ecamp#3862

Show filter just if activity and a period material item is in the list Add filter for activity material
MarcoAllenspach · Dec 28, 2023 · 7766f8c · 7766f8c
1 parent a1f8025
commit 7766f8c
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 13 deletions.
diff --git a/frontend/src/components/material/MaterialTable.vue b/frontend/src/components/material/MaterialTable.vue
@@ -140,22 +140,22 @@
 
     <template #[`header.lastColumn`]>
       <button
+        v-if="showFilter()"
         class="ec-material-table__filterbutton"
-        :class="{ 'primary--text': periodOnly }"
-        @click="periodOnly = !periodOnly"
+        :class="{ 'primary--text': activeFilter }"
+        @click="updateFilter"
       >
         <span>
-          <span v-if="!periodOnly" class="d-sr-only">{{
-            $tc('global.button.filter')
+          <span v-if="activeFilter === 0">{{
+            $tc('components.material.materialTable.reference')
           }}</span>
-          {{
-            periodOnly
-              ? $tc('components.material.materialTable.periodOnly')
-              : $tc('components.material.materialTable.reference')
-          }}
+          <span v-else-if="activeFilter === 1">{{
+            $tc('components.material.materialTable.periodOnly')
+          }}</span>
+          <span v-else>{{ $tc('components.material.materialTable.activityOnly') }}</span>
         </span>
-        <v-icon aria-hidden="true" small :color="periodOnly ? 'primary' : null">
-          {{ periodOnly ? 'mdi-filter' : 'mdi-filter-outline' }}
+        <v-icon aria-hidden="true" small :color="activeFilter ? 'primary' : null">
+          {{ activeFilter ? 'mdi-filter' : 'mdi-filter-outline' }}
         </v-icon>
       </button>
     </template>
@@ -213,6 +213,12 @@ import PromptEntityDelete from '@/components/prompt/PromptEntityDelete.vue'
 // Non-breaking space
 const nbsp = '\u00A0'
 
+const filterOptiones = {
+  SHOW_ALL: 0,
+  SHOW_PERIOD: 1,
+  SHOW_ACTIVITY: 2,
+}
+
 export default {
   name: 'MaterialTable',
   components: {
@@ -253,7 +259,7 @@ export default {
   data() {
     return {
       newMaterialItems: {},
-      periodOnly: false,
+      activeFilter: filterOptiones.SHOW_ALL,
       clientWidth: 1000,
     }
   },
@@ -326,7 +332,17 @@ export default {
     },
     materialItemsData() {
       const items = this.materialItemCollection.items
-        .filter((item) => !(this.periodOnly && item.materialNode !== null))
+        .filter((item) => {
+          switch (this.activeFilter) {
+            case filterOptiones.SHOW_PERIOD:
+              return item.materialNode === null
+            case filterOptiones.SHOW_ACTIVITY:
+              return item.materialNode !== null
+            default:
+              // Show all
+              return true
+          }
+        })
         .map((item) => ({
           id: item.id,
           uri: item._meta.self,
@@ -433,6 +449,22 @@ export default {
         return activity.rootContentNode()._meta.self === root
       })
     },
+
+    updateFilter() {
+      this.activeFilter = this.activeFilter + 1
+      if (this.activeFilter > filterOptiones.SHOW_ACTIVITY) {
+        this.activeFilter = filterOptiones.SHOW_ALL
+      }
+    },
+
+    // Show filter just if activity & period material is in list
+    showFilter() {
+      const test = this.materialItemCollection.items.some((item) => item.materialNode === null)
+      return (
+        test &&
+        this.materialItemCollection.items.some((item) => item.materialNode !== null)
+      )
+    },
   },
 }
 </script>

diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
@@ -241,6 +241,7 @@
         "addNewItem": "Eintrag hinzufügen",
         "noItems": "Keine Einträge gefunden",
         "periodOnly": "Filter: Lagerabschnitt",
+        "activityOnly": "Filter: Aktivität ",
         "reference": "Aktivität / Abschnitt"
       },
       "useMaterialViewHelper": {

diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
@@ -241,6 +241,7 @@
         "addNewItem": "Add new item",
         "noItems": "No material items found",
         "periodOnly": "Filter: Period",
+        "activityOnly": "Filter: Activity",
         "reference": "Activity / Period"
       },
       "useMaterialViewHelper": {

diff --git a/frontend/src/locales/fr.json b/frontend/src/locales/fr.json
@@ -233,6 +233,7 @@
         "addNewItem": "Ajoute un nouvel élément",
         "noItems": "Aucun élément matériel trouvé",
         "periodOnly": "Filtre : Période",
+        "activityOnly": "Filtre: Activité",
         "reference": "Activité / Période"
       },
       "useMaterialViewHelper": {

diff --git a/frontend/src/locales/it.json b/frontend/src/locales/it.json
@@ -233,6 +233,7 @@
         "addNewItem": "Aggiungi un nuovo elemento",
         "noItems": "Nessun oggetto materiale trovato",
         "periodOnly": "Filtro: Periodo",
+        "activityOnly": "Filtro: Attività",
         "reference": "Attività / Periodo"
       },
       "useMaterialViewHelper": {

diff --git a/frontend/src/locales/rm.json b/frontend/src/locales/rm.json
@@ -203,6 +203,7 @@
         "addNewItem": "Agiuntar ina endataziun",
         "noItems": "Na chattà naginas endataziuns",
         "periodOnly": "Filter: part dal champ",
+        "activityOnly": "Filter: Activitad",
         "reference": "Activitad / part"
       },
       "useMaterialViewHelper": {