refactor: create SettingsFacet.vue

src/modules/datasets/datasetsFacets/DatasetsFacets.vue

@@ -11,30 +11,9 @@
           :catalogLanguageIds="catalogLanguageIds"
         />
         <!-- Facet settings -->
-        <div class="row facet-field mb-3" v-if="!showCatalogDetails">
-          <facet
-            :header="$t('message.datasetFacets.settings')"
-            :toolTipTitle="$t('message.helpIcon.settings')"
-            :items="[]"
-            class="col pr-0"
-          >
-            <template #after>
-              <div class="form-group list-group-item list-group-item-action d-flex justify-content-between align-items-center">
-                {{ $t('message.datasetFacets.operator') }}
-                <span class="ml-2 d-flex flex-wrap">
-                  <div class="custom-control custom-radio">
-                    <input type="radio" id="radio-and" name="radio-facet-operator" class="custom-control-input" @click="changeFacetOperator(FACET_OPERATORS.and)" :checked="getFacetOperator === FACET_OPERATORS.and">
-                    <label class="custom-control-label" for="radio-and">{{ $t('message.datasetFacets.and') }}</label>
-                  </div>
-                  <div class="custom-control custom-radio">
-                    <input type="radio" class="custom-control-input" id="radio-or" name="radio-facet-operator" @click="changeFacetOperator(FACET_OPERATORS.or)" :checked="getFacetOperator === FACET_OPERATORS.or">
-                    <label class="custom-control-label" for="radio-or">{{ $t('message.datasetFacets.or').toUpperCase() }}</label>
-                  </div>
-                </span>
-              </div>
-            </template>
-          </facet>
-        </div>
+        <settings-facet
+          v-if="!showCatalogDetails"
+        />
         <!-- Facets -->
         <div class="row facet-field mb-3"
              v-for="(field, index) in getSortedFacets"
@@ -127,11 +106,13 @@ import DatasetsFacetsItem from './DatasetsFacetsItem.vue';
 import { getTranslationFor, getFacetTranslation } from '../../utils/helpers';
 import DatasetsFacetMap from "@/modules/datasets/datasetsFacets/DatasetsFacetMap";
 import CatalogDetailsFacet from "@/modules/datasets/datasetsFacets/CatalogDetailsFacet";
+import SettingsFacet from "@/modules/datasets/datasetsFacets/SettingsFacet";
 
 export default {
   name: 'datasetFacets',
   dependencies: ['catalogService'],
   components: {
+    SettingsFacet,
     CatalogDetailsFacet,
     // Facet,
     DatasetsFacetMap,
@@ -189,9 +170,6 @@ export default {
     datasetBoundsWatcher() {
       return this.getDatasetGeoBounds;
     },
-    facetOperatorWatcher() {
-      return this.getFacetOperator;
-    },
     facetGroupOperatorWatcher() {
       return this.getFacetGroupOperator;
     },
@@ -254,7 +232,6 @@ export default {
       'toggleFacet',
       'addFacet',
       'removeFacet',
-      'setFacetOperator',
       'setFacetGroupOperator',
       'setDataServices',
       'setPage',
@@ -347,10 +324,6 @@ export default {
         );
       }
     },
-    changeFacetOperator(op) {
-      this.setFacetOperator(op);
-      this.setFacetGroupOperator(op);
-    },
     toggleFacetGroupOperator() {
       let op = this.getFacetGroupOperator;
       op = op === this.FACET_GROUP_OPERATORS.and ? this.FACET_GROUP_OPERATORS.or : this.FACET_GROUP_OPERATORS.and;
@@ -379,15 +352,6 @@ export default {
     }
   },
   watch: {
-    facetOperatorWatcher: {
-      handler(facetOperator) {
-        this.$router.replace(
-          { query: Object.assign({}, this.$route.query, { facetOperator }) }
-        ).catch(
-          error => { console.log(error); }
-        );
-      },
-    },
     facetGroupOperatorWatcher: {
       handler(facetGroupOperator) {
         this.$router.replace(
@@ -397,20 +361,6 @@ export default {
         );
       },
     },
-    // dataServicesWatcher: {
-    //   handler(dataServices) {
-    //     this.$router.replace(
-    //       { query: Object.assign({}, this.$route.query, { dataServices }) }
-    //     ).catch(
-    //       error => { console.log(error); }
-    //     );
-    //   },
-    // },
-    // showCatalogDetailsWatcher: {
-    //   handler(showCatalogDetails) {
-    //     this.showCatalogDetails = showCatalogDetails;
-    //   },
-    // },
     getDataServices(dataServices) {
       this.$router.replace(
         { query: Object.assign({}, this.$route.query, { dataServices }) }
@@ -435,7 +385,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 
 .facet:hover {
   cursor: pointer;

src/modules/datasets/datasetsFacets/SettingsFacet.vue

+<template>
+  <div class="row facet-field mb-3">
+    <facet
+      :header="$t('message.datasetFacets.settings')"
+      :toolTipTitle="$t('message.helpIcon.settings')"
+      :items="[]"
+      class="col pr-0"
+    >
+      <template #after>
+        <div class="form-group list-group-item list-group-item-action d-flex justify-content-between align-items-center">
+          {{ $t('message.datasetFacets.operator') }}
+          <span class="ml-2 d-flex flex-wrap">
+            <div class="custom-control custom-radio">
+              <input type="radio" id="radio-and" name="radio-facet-operator" class="custom-control-input" @click="changeFacetOperator(FACET_OPERATORS.and)" :checked="getFacetOperator === FACET_OPERATORS.and">
+              <label class="custom-control-label" for="radio-and">{{ $t('message.datasetFacets.and') }}</label>
+            </div>
+            <div class="custom-control custom-radio">
+              <input type="radio" class="custom-control-input" id="radio-or" name="radio-facet-operator" @click="changeFacetOperator(FACET_OPERATORS.or)" :checked="getFacetOperator === FACET_OPERATORS.or">
+              <label class="custom-control-label" for="radio-or">{{ $t('message.datasetFacets.or').toUpperCase() }}</label>
+            </div>
+          </span>
+        </div>
+      </template>
+    </facet>
+  </div>
+</template>
+
+<script>
+import {mapActions, mapGetters} from "vuex";
+
+export default {
+  name: "SettingsFacet",
+  data() {
+    return {
+      FACET_OPERATORS: this.$env.datasets.facets.FACET_OPERATORS
+    };
+  },
+  computed: {
+    ...mapGetters('datasets', [
+      'getFacetOperator'
+    ]),
+  },
+  methods: {
+    ...mapActions('datasets', [
+      'setFacetOperator',
+      'setFacetGroupOperator'
+    ]),
+    changeFacetOperator(op) {
+      this.setFacetOperator(op);
+      this.setFacetGroupOperator(op);
+    }
+  },
+  watch: {
+    getFacetOperator(facetOperator) {
+      this.$router.replace(
+        { query: Object.assign({}, this.$route.query, { facetOperator }) }
+      ).catch(
+        error => { console.log(error); }
+      );
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>