Update filtering in client

client/src/components/instruments/FilterEntry.vue

@@ -12,7 +12,6 @@
 </template>
 
 <script>
-  import {INTERDISCIPLINARY, LANGUAGE_COMMUNICATION, SOCIETY} from '@/consts/instrument.consts';
   import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
   const ChevronRight = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronRight');
 
@@ -22,7 +21,7 @@
         type: String,
         required: true,
       },
-      type: {
+      id: {
         type: String,
         default: '',
       },
@@ -31,8 +30,8 @@
         default: false,
       },
       category: {
-        type: String,
+        type: Object,
-        default: '',
+        default: () => {},
       },
     },
 
@@ -65,9 +64,6 @@
       },
       typeClass() {
         return {
-          'filter-entry--language-communication': this.category === LANGUAGE_COMMUNICATION,
-          'filter-entry--society': this.category === SOCIETY,
-          'filter-entry--interdisciplinary': this.category === INTERDISCIPLINARY,
           'filter-entry--active': this.isActive,
           'filter-entry--category': this.isCategory,
         };

client/src/components/instruments/FilterGroup.vue

@@ -3,20 +3,20 @@
     <filter-entry
       :text="title"
       v-bind="$attrs"
-      :type="category"
       :category="category"
       :is-category="true"
-      @click.native="setCategoryFilter(category)"
+      :id="category.id"
+      @click.native="setCategoryFilter(category.id)"
     />
     <div class="filter-group__children">
       <filter-entry
         :data-cy="`filter-${type.type}`"
         :category="type.category"
         :text="type.name"
-        :type="type.type"
         v-for="type in types"
+        :id="type.id"
         :key="type.id"
-        @click.native="setFilter(`type:${type.type}`)"
+        @click.native="setFilter(`type:${type.id}`)"
       />
     </div>
   </div>
@@ -39,8 +39,8 @@
         default: () => [],
       },
       category: {
-        type: String,
+        type: Object,
-        default: '',
+        default: () => ({}),
       },
     },
     components: {

client/src/components/instruments/InstrumentEntry.vue

@@ -1,15 +1,21 @@
 <template>
   <div
-    :class="typeClass"
+    :style="{
+      color: instrument.type.category.foreground,
+      backgroundColor: instrument.type.category.background
+    }"
     class="instrument-entry"
   >
     <h4
       class="instrument-entry__category"
+      :style="{color: instrument.type.category.foreground}"
       data-cy="instrument-subheader"
     >
       {{ categoryName }}
     </h4>
-    <h3 class="instrument-entry__title">
+    <h3
+      class="instrument-entry__title"
+    >
       {{ instrument.title }}
     </h3>
   </div>

client/src/components/instruments/InstrumentFilter.vue

@@ -6,72 +6,34 @@
     />
 
     <filter-group
-      :types="languageCommunicationTypes"
+      :types="category.types"
-      :category="LANGUAGE_COMMUNICATION"
+      :category="category"
-      title="Sprache und Kommunikation"
+      :title="category.name"
-      data-cy="filter-language-communication"
+      v-for="category in instrumentCategories"
-      class="instrument-filter__group--language"
+      :key="category.id"
-    />
-
-    <filter-group
-      :types="societyTypes"
-      :category="SOCIETY"
-      title="Gesellschaft"
-      data-cy="filter-society"
-    />
-
-    <filter-group
-      :category="INTERDISCIPLINARY"
-      title="Überfachliche Instrumente"
-      data-cy="filter-interdisciplinary"
     />
   </div>
 </template>
 
 <script>
-  import {INTERDISCIPLINARY, LANGUAGE_COMMUNICATION, SOCIETY} from '@/consts/instrument.consts';
 
   import FilterGroup from '@/components/instruments/FilterGroup';
 
-  import INSTRUMENT_TYPES_QUERY from 'gql/queries/instrumentTypesQuery';
+  import INSTRUMENT_CATEGORIES_QUERY from 'gql/queries/instrumentCategoriesQuery.gql';
 
   export default {
-
     components: {
       FilterGroup,
     },
     data() {
       return {
-        filter: '',
+        instrumentCategories: [],
-        LANGUAGE_COMMUNICATION,
-        SOCIETY,
-        INTERDISCIPLINARY,
-        instrumentTypes: [],
       };
     },
 
-    computed: {
-      languageCommunicationTypes() {
-        return this.instrumentTypes.filter(t => t.category === 'LANGUAGE_COMMUNICATION');
-      },
-      societyTypes() {
-        return this.instrumentTypes.filter(t => t.category === 'SOCIETY');
-      },
-      interdisciplinaryTypes() {
-        return this.instrumentTypes.filter(t => t.category === 'INTERDISCIPLINARY');
-      },
-    },
-
-    methods: {
-      setFilter(filter) {
-        this.filter = filter;
-        this.$emit('filter', filter);
-      }
-    },
-
     apollo: {
-      instrumentTypes: {
+      instrumentCategories: {
-        query: INSTRUMENT_TYPES_QUERY,
+        query: INSTRUMENT_CATEGORIES_QUERY,
       },
     },
   };

client/src/graphql/gql/queries/instrumentCategoriesQuery.gql

@@ -0,0 +1,17 @@
+query InstrumentTypesQuery {
+  instrumentCategories {
+    name
+    id
+    types {
+      name
+      id
+      type
+      category {
+        id
+        name
+        foreground
+        background
+      }
+    }
+  }
+}

client/src/helpers/instrumentType.js

@@ -6,7 +6,7 @@ const instrumentType = (instrument) => {
   if (typeof instrument === 'string') {
     category = instrument;
   } else {
-    category = instrument.type.category;
+    return instrument.type.category.name;
   }
   return typeDictionary[category] || '';
 };

client/src/pages/instrumentOverview.vue

@@ -48,7 +48,11 @@
           const {currentFilter} = instrumentFilter;
           if (currentFilter && currentFilter.indexOf(':') > -1) {
             const [filterType, identifier] = currentFilter.split(':');
-            this.filter = i => i.type[filterType] === identifier;
+            if(filterType === 'type') {
+              this.filter = i => i.type.id === identifier;
+            } else {
+              this.filter = i => i.type.category.id === identifier;
+            }
           } else {
             this.filter = i => i; // identity
           }