add form items to LibraryOptions

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>