Merge pull request #4366 from MarcoAllenspach/fixedHideMaterialFilter

Hide Materialfilter PeriodOnly in ContentNode #4361
ecamp · Jan 3, 2024 · 4d8ee95 · 4d8ee95
2 parents b66e137 + ee989fa
commit 4d8ee95
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/frontend/src/components/activity/content/Material.vue b/frontend/src/components/activity/content/Material.vue
@@ -6,6 +6,7 @@
       :layout-mode="layoutMode"
       :material-item-collection="materialItemCollection"
       :disabled="disabled"
+      hide-period-filter
     />
   </ContentNodeCard>
 </template>

diff --git a/frontend/src/components/material/MaterialTable.vue b/frontend/src/components/material/MaterialTable.vue
@@ -142,9 +142,10 @@
 
     <template #[`header.lastColumn`]>
       <button
+        v-if="!hidePeriodFilter"
         class="ec-material-table__filterbutton"
         :class="{ 'primary--text': periodOnly }"
-        :disabled="layoutMode"
+        :disabled="layoutMode || !periodFilterEnabled"
         @click="periodOnly = !periodOnly"
       >
         <span>
@@ -157,7 +158,12 @@
               : $tc('components.material.materialTable.reference')
           }}
         </span>
-        <v-icon aria-hidden="true" small :color="periodOnly ? 'primary' : null">
+        <v-icon
+          v-if="periodFilterEnabled"
+          aria-hidden="true"
+          small
+          :color="periodOnly ? 'primary' : null"
+        >
           {{ periodOnly ? 'mdi-filter' : 'mdi-filter-outline' }}
         </v-icon>
       </button>
@@ -252,6 +258,9 @@ export default {
 
     // period Entity for displaying material items within a period (should be null if materialNode is provided)
     period: { type: Object, required: false, default: null },
+
+    // Hide the filter button activity / period
+    hidePeriodFilter: { type: Boolean, required: false, default: false },
   },
   data() {
     return {
@@ -367,6 +376,17 @@ export default {
     isDefaultVariant() {
       return this.clientWidth > 710
     },
+    // Show filter just if period material is in the list
+    periodFilterEnabled() {
+      return this.materialItemCollection.items.some((item) => item.materialNode === null)
+    },
+  },
+  watch: {
+    periodFilterEnabled() {
+      if (!this.periodFilterEnabled) {
+        this.periodOnly = false
+      }
+    },
   },
   mounted() {
     this.clientWidth = this.$el.clientWidth