Add configuration option to use a date picker instead of date slider

sist2-vue/src/components/DateSlider.vue

@@ -1,5 +1,31 @@
 <template>
-  <div id="dateSlider"></div>
+  <div v-if="$store.state.optUseDatePicker">
+    <b-row>
+      <b-col sm="6">
+        <b-form-datepicker
+            value-as-date
+            :date-format-options="{ year: 'numeric', month: '2-digit', day: '2-digit' }"
+            :locale="$store.state.optLang"
+            class="mb-2"
+            :value="dateMin" @input="setDateMin"></b-form-datepicker>
+      </b-col>
+      <b-col sm="6">
+        <b-form-datepicker
+            value-as-date
+            :date-format-options="{ year: 'numeric', month: '2-digit', day: '2-digit' }"
+            :locale="$store.state.optLang"
+            class="mb-2"
+            :value="dateMax" @input="setDateMax"></b-form-datepicker>
+      </b-col>
+    </b-row>
+  </div>
+  <div v-else>
+    <b-row>
+      <b-col style="height: 70px;">
+        <div id="dateSlider"></div>
+      </b-col>
+    </b-row>
+  </div>
 </template>
 
 <script>
@@ -10,11 +36,36 @@ import {mergeTooltips} from "@/util-js";
 
 export default {
   name: "DateSlider",
+  methods: {
+    setDateMin(val) {
+      const epochDate = Math.ceil(+val / 1000);
+      this.$store.commit("setDateMin", epochDate);
+    },
+    setDateMax(val) {
+      const epochDate = Math.ceil(+val / 1000);
+      this.$store.commit("setDateMax", epochDate);
+    },
+  },
+  computed: {
+    dateMin() {
+      const dateMin = this.$store.state.dateMin ? this.$store.state.dateMin : this.$store.state.dateBoundsMin;
+      return new Date(dateMin * 1000)
+    },
+    dateMax() {
+      const dateMax = this.$store.state.dateMax ? this.$store.state.dateMax : this.$store.state.dateBoundsMax;
+      return new Date(dateMax * 1000)
+    }
+  },
   mounted() {
     this.$store.subscribe((mutation) => {
       if (mutation.type === "setDateBoundsMax") {
         const elem = document.getElementById("dateSlider");
 
+        if (elem === null) {
+          // Using b-form-datepicker, skip initialisation of slider
+          return
+        }
+
         if (elem.children.length > 0) {
           return;
         }

sist2-vue/src/i18n/messages.ts

@@ -67,7 +67,8 @@ export default {
             tagOrOperator: "Use OR operator when specifying multiple tags.",
             hideDuplicates: "Hide duplicate results based on checksum",
             hideLegacy: "Hide the 'legacyES' Elasticsearch notice",
-            updateMimeMap: "Update the Media Types tree in real time"
+            updateMimeMap: "Update the Media Types tree in real time",
+            useDatePicker: "Use a Date Picker component rather than a slider"
         },
         queryMode: {
             simple: "Simple",
@@ -229,7 +230,8 @@ export default {
             tagOrOperator: "Utiliser l'opérateur OU lors de la spécification de plusieurs tags",
             hideDuplicates: "Masquer les résultats en double",
             hideLegacy: "Masquer la notice 'legacyES' Elasticsearch",
-            updateMimeMap: "Mettre à jour l'arbre de Types de médias en temps réel"
+            updateMimeMap: "Mettre à jour l'arbre de Types de médias en temps réel",
+            useDatePicker: "Afficher un composant « Date Picker » plutôt qu'un slider"
         },
         queryMode: {
             simple: "Simple",
@@ -391,7 +393,8 @@ export default {
             tagOrOperator: "使用或操作（OR）匹配多个标签。",
             hideDuplicates: "使用校验码隐藏重复结果",
             hideLegacy: "隐藏'legacyES' Elasticsearch 通知",
-            updateMimeMap: "媒体类型树的实时更新"
+            updateMimeMap: "媒体类型树的实时更新",
+            useDatePicker: "使用日期选择器组件而不是滑块"
         },
         queryMode: {
             simple: "简单",

sist2-vue/src/store/index.ts

@@ -49,6 +49,7 @@ export default new Vuex.Store({
         optLightboxSlideDuration: 15,
         optHideLegacy: false,
         optUpdateMimeMap: true,
+        optUseDatePicker: false,
 
         _onLoadSelectedIndices: [] as string[],
         _onLoadSelectedMimeTypes: [] as string[],
@@ -157,6 +158,7 @@ export default new Vuex.Store({
         setOptTreemapColor: (state, val) => state.optTreemapColor = val,
         setOptHideLegacy: (state, val) => state.optHideLegacy = val,
         setOptUpdateMimeMap: (state, val) => state.optUpdateMimeMap = val,
+        setOptUseDatePicker: (state, val) => state.optUseDatePicker = val,
 
         setOptLightboxLoadOnlyCurrent: (state, val) => state.optLightboxLoadOnlyCurrent = val,
         setOptLightboxSlideDuration: (state, val) => state.optLightboxSlideDuration = val,
@@ -366,5 +368,6 @@ export default new Vuex.Store({
         optResultSize: state => state.size,
         optHideLegacy: state => state.optHideLegacy,
         optUpdateMimeMap: state => state.optUpdateMimeMap,
+        optUseDatePicker: state => state.optUseDatePicker,
     }
 })

sist2-vue/src/views/Configuration.vue

@@ -41,6 +41,10 @@
           <b-form-checkbox :checked="optUpdateMimeMap" @input="setOptUpdateMimeMap">
             {{ $t("opt.updateMimeMap") }}
           </b-form-checkbox>
+
+          <b-form-checkbox :checked="optUseDatePicker" @input="setOptUseDatePicker">
+            {{ $t("opt.useDatePicker") }}
+          </b-form-checkbox>
         </b-card>
 
         <br/>
@@ -229,6 +233,7 @@ export default {
       "optHideDuplicates",
       "optHideLegacy",
       "optUpdateMimeMap",
+      "optUseDatePicker",
     ]),
     clientWidth() {
       return window.innerWidth;
@@ -272,7 +277,8 @@ export default {
       "setOptLang",
       "setOptHideDuplicates",
       "setOptHideLegacy",
-      "setOptUpdateMimeMap"
+      "setOptUpdateMimeMap",
+      "setOptUseDatePicker",
     ]),
     onResetClick() {
       localStorage.removeItem("sist2_configuration");

sist2-vue/src/views/SearchPage.vue

@@ -19,11 +19,7 @@
       </b-row>
       <b-row>
         <b-col sm="6">
-          <b-row>
+          <DateSlider></DateSlider>
-            <b-col style="height: 70px;">
-              <DateSlider></DateSlider>
-            </b-col>
-          </b-row>
           <b-row>
             <b-col>
               <IndexPicker></IndexPicker>