add form items to LibraryOptions

src/messages/fr.json

@@ -9,5 +9,26 @@
     "gallery": "Créations numériques",
     "blog": "Blog"
   },
-  "siblings": "Textes rebonds"
+  "options": {
+    "display": {
+      "title": "Gestion de l'affichage",
+      "choices": {
+        "tree-map": "Arborescent",
+        "card-map": "Aléatoire",
+        "card-list": "Alphabétique"
+      }
+    },
+    "filters": {
+      "title": "Filtres",
+      "choices": {
+        "tags": "Tags",
+        "strangeness": "Degré d'étrangement"
+      }
+    },
+    "search": {
+      "title": "Rechercher"
+    }
+  },
+  "siblings": "Textes rebonds",
+  "tags": "Tags"
 }

src/pages/library/LibraryOptions.vue

@@ -1,13 +1,69 @@
 <template>
-  <component-debug :component="this" v-if="show" />
+  <div v-if="show" class="d-flex justify-content-between">
+    <b-form-group
+      :label="$t('options.display.title')"
+      v-slot="{ ariaDescribedby }"
+    >
+      <b-form-radio-group
+        id="mode-select"
+        v-model="currentMode" :options="modes"
+        name="mode-select" :aria-describedby="ariaDescribedby" buttons
+        size="sm"
+      />
+    </b-form-group>
+
+    <b-form-group
+      v-if="currentMode !== 'tree-map'"
+      :label="$t('options.filters.title')"
+      label-for="tags-select"
+    >
+      <multiple-tags-select id="tags-select" v-model="selectedTags" :options="tags" />
+    </b-form-group>
+
+    <b-form-group
+      :label="$t('options.search.title')"
+      label-for="search-input"
+    >
+      <b-input-group size="sm" append="search-icon">
+        <b-form-input v-model="search" id="search-input" trim />
+      </b-input-group>
+    </b-form-group>
+  </div>
 </template>
 
 <script>
+import MultipleTagsSelect from '@/components/formItems/MultipleTagsSelect'
+
 export default {
   name: 'LibraryOptions',
 
+  components: {
+    MultipleTagsSelect
+  },
+
   props: {
-    show: { type: Boolean, default: true }
+    show: { type: Boolean, required: true },
+    mode: { type: String, required: true },
+    tags: { type: Array, default: () => ([]) }
+  },
+
+  data () {
+    return {
+      modes: [
+        { text: this.$t('options.display.choices.tree-map'), value: 'tree-map' },
+        { text: this.$t('options.display.choices.card-map'), value: 'card-map' },
+        { text: this.$t('options.display.choices.card-list'), value: 'card-list' }
+      ],
+      currentMode: this.mode,
+      selectedTags: [],
+      search: ''
+    }
+  },
+
+  watch: {
+    currentMode (mode) {
+      this.$router.push({ query: { mode } })
+    }
   }
 }
 </script>

src/router/routes.js

@@ -38,7 +38,8 @@ export default [
         return { mode, texts }
       },
       options: ({ query }) => ({
-        show: !('texts' in query && query.texts.length)
+        show: !('texts' in query && query.texts.length),
+        mode: query.mode || 'tree-map'
       })
     }
   },