@dative-gpi/foundation-shared-components 1.0.36 → 1.0.37-report-v1

package/components/lists/FSDataTableUI.vue

@@ -1,67 +1,79 @@
 <template>
   <FSCol
     gap="16px"
+    style="position: relative;"
   >
     <FSRow
-      align="bottom-center"
-      :wrap="isExtraSmall ? false : true"
+      v-if="$props.showSearch || (!isMobileSized && ($slots['prepend-toolbar'] || $slots['toolbar'] || $slots['append-toolbar'])) || (!$props.disableTable && !$props.disableIterator)"
+      align="bottom-left"
+      :wrap="isMobileSized ? false : true"
       width="fill"
     >
       <slot
-        v-if="!isExtraSmall"
+        v-if="!isMobileSized"
         name="prepend-toolbar"
       />
       <template
         v-if="$props.showSearch"
       >
         <FSSearchField
-          prependInnerIcon="mdi-magnify"
           :hideHeader="true"
           v-model="innerSearch"
         />
         <FSButton
           v-if="filterableHeaders.length > 0"
           prependIcon="mdi-filter-variant"
-          padding="0 7px"
-          :variant="showFilters ? 'full' : 'standard'"
-          @click="showFilters = !showFilters"
+          :variant="innerShowFilters ? 'full' : 'standard'"
+          @click="innerShowFilters = !innerShowFilters"
         />
       </template>
       <slot
-        v-if="!isExtraSmall"
+        v-if="!isMobileSized"
         name="toolbar"
       />
       <template
-        v-if="!$props.disableTable && !$props.disableIterator"
+        v-if="$slots['append-toolbar'] || (!$props.disableTable && !$props.disableIterator)"
       >
-        <v-spacer />
         <FSRow
           align="center-right"
+          :width="isExtraSmall ? 'hug' : 'fill'"
         >
+          <slot
+            v-if="!isMobileSized"
+            name="append-toolbar"
+          />
           <FSOptionGroup
+            v-if="!$props.disableTable && !$props.disableIterator"
             :values="modeOptions"
             :singleColor="true"
             :required="true"
+            variant="slide"
             v-model="innerMode"
           />
         </FSRow>
       </template>
     </FSRow>
     <FSRow
-      v-if="isExtraSmall && hasToolbar"
+      v-if="isMobileSized && ($slots['prepend-toolbar'] || $slots['toolbar'] || $slots['append-toolbar'])"
     >
-      <FSWrapGroup>
+      <FSSlideGroup>
+        <slot
+          name="prepend-toolbar"
+        />
         <slot
           name="toolbar"
         />
-      </FSWrapGroup>
+        <slot
+          name="append-toolbar"
+        />
+      </FSSlideGroup>
     </FSRow>
     <FSRow
       v-if="showFiltersRow"
       gap="16px"
     >
       <FSCol
-        v-if="showFilters && hasVisibleFilters"
+        v-if="innerShowFilters && hasVisibleFilters"
         width="hug"
       >
         <FSRow
@@ -95,9 +107,9 @@
           gap="8px"
         >
           <FSChip
-            v-if="showFilters && resetable"
+            v-if="innerShowFilters && resetable"
             variant="standard"
-            :label="$tr('ui.data-table.reset-filters', 'Reset')"
+            :label="$tr('data-table.reset-filters', 'Reset')"
             :height="['30px', '24px']"
             :color="ColorEnum.Error"
             :editable="true"
@@ -149,7 +161,7 @@
           <FSText
             font="text-overline"
           >
-            {{ $tr("ui.data-table.empty", "No data") }}
+            {{ $tr("ui.common.no-data", "No data") }}
           </FSText>
         </template>
         <template
@@ -291,25 +303,29 @@
               <slot
                 :name="`${header.slotName}-append`"
               />
-              <v-spacer />
-              <slot
-                :name="`${header.slotName}-configuration`"
+              <FSRow
+                align="center-right"
+                :wrap="false"
               >
-                <FSHeaderButton
-                  :first="index === 0"
-                  :last="index === headersSlots.length - 1"
-                  @update:hide="updateHeader(header, 'hidden', !header.hidden)"
-                  @update:left="updateHeader(header, 'index', -1)"
-                  @update:right="updateHeader(header, 'index', 1)"
-                />
-                <FSButton
-                  v-if="header.sortable"
-                  variant="icon"
-                  :color="sortColor(header, props)"
-                  :icon="sortIcon(header, props)"
-                  @click="toggleSort(header)"
-                />
-              </slot>
+                <slot
+                  :name="`${header.slotName}-configuration`"
+                >
+                  <FSHeaderButton
+                    :first="index === 0"
+                    :last="index === headersSlots.length - 1"
+                    @update:hide="updateHeader(header, 'hidden', !header.hidden)"
+                    @update:left="updateHeader(header, 'index', -1)"
+                    @update:right="updateHeader(header, 'index', 1)"
+                  />
+                  <FSButton
+                    v-if="header.sortable"
+                    variant="icon"
+                    :color="sortColor(header, props)"
+                    :icon="sortIcon(header, props)"
+                    @click="toggleSort(header)"
+                  />
+                </slot>
+              </FSRow>
             </FSRow>
           </slot>
         </template>
@@ -357,22 +373,23 @@
                   <FSText
                     font="text-button"
                   >
-                    {{ $tr("ui.data-table.all-selected-bold", "Warning:") }}
+                    {{ $tr("data-table.all-selected-bold", "Warning:") }}
                   </FSText>
                   <FSText>
-                    {{ $tr("ui.data-table.all-selected-regular", "All elements selected") }}
+                    {{ $tr("data-table.all-selected-regular", "All elements selected") }}
                   </FSText>
                 </FSRow>
               </template>
               <template
                 v-else
               >
-                <FSText>
-                  {{ $tr("ui.data-table.some-selected", "{0} element(s) selected", $props.modelValue.length.toString()) }}
-                </FSText>
+                <FSRow>
+                  <FSText>
+                    {{ $tr("data-table.some-selected", "{0} element(s) selected", $props.modelValue.length.toString()) }}
+                  </FSText>
+                </FSRow>
               </template>
             </template>
-            <v-spacer />
             <FSRow
               align="center-right"
               width="hug"
@@ -381,7 +398,7 @@
               <FSText
                 font="text-overline"
               >
-                {{ $tr("ui.data-table.rows-per-page", "Rows per page") }}
+                {{ $tr("data-table.rows-per-page", "Rows per page") }}
               </FSText>
               <FSSelectField
                 class="fs-data-table-rows-per-page fs-small-input"
@@ -433,7 +450,7 @@
           <FSText
             font="text-overline"
           >
-            {{ $tr("ui.data-table.empty", "No data") }}
+            {{ $tr("ui.common.no-data", "No data") }}
           </FSText>
         </template>
         <template
@@ -447,7 +464,7 @@
               v-for="(item, index) in items"
               elementSelector=".fs-draggable-item"
               :disabled="draggableDisabled"
-              :item="item"
+              :item="{ ...item, index }"
               :key="index"
               @update:dragend="(event, dragged) => onDragEnd(event, dragged, '.fs-data-iterator-container')"
               @dragover="(event) => onDragOver(event, '.fs-draggable-item', '.fs-data-iterator-container')"
@@ -531,22 +548,23 @@
                   <FSText
                     font="text-button"
                   >
-                    {{ $tr("ui.data-table.all-selected-bold", "Warning:") }}
+                    {{ $tr("data-table.all-selected-bold", "Warning:") }}
                   </FSText>
                   <FSText>
-                    {{ $tr("ui.data-table.all-selected-regular", "All elements selected") }}
+                    {{ $tr("data-table.all-selected-regular", "All elements selected") }}
                   </FSText>
                 </FSRow>
               </template>
               <template
                 v-else
               >
-                <FSText>
-                  {{ $tr("ui.data-table.some-selected", "{0} element(s) selected", $props.modelValue.length.toString()) }}
-                </FSText>
+                <FSRow>
+                  <FSText>
+                    {{ $tr("data-table.some-selected", "{0} element(s) selected", $props.modelValue.length.toString()) }}
+                  </FSText>
+                </FSRow>
               </template>
             </template>
-            <v-spacer />
             <FSRow
               align="center-right"
               :wrap="false"
@@ -554,7 +572,7 @@
               <FSText
                 font="text-overline"
               >
-                {{ $tr("ui.data-table.rows-per-page", "Rows per page") }}
+                {{ $tr("data-table.rows-per-page", "Rows per page") }}
               </FSText>
               <FSRow
                 width="120px"
@@ -603,7 +621,7 @@
           <FSText
             font="text-overline"
           >
-            {{ $tr("ui.data-table.empty", "No data") }}
+            {{ $tr("ui.common.no-data", "No data") }}
           </FSText>
         </template>
         <template
@@ -618,7 +636,7 @@
               v-for="(item, index) in items.filter((item) => item.type === 'item')"
               elementSelector=".fs-draggable-item"
               :disabled="draggableDisabled"
-              :item="item"
+              :item="{ ...item, index }"
               :key="index"
               @update:dragend="(event, dragged) => onDragEnd(event, dragged, '.fs-data-iterator-container')"
               @dragover="(event) => onDragOver(event, '.fs-draggable-item', '.fs-data-iterator-container')"
@@ -685,7 +703,7 @@
     <div
       class="fs-data-table-intersection"
       :id="elementId"
-    />
+    /> 
   </FSCol>
 </template>
 
@@ -696,9 +714,10 @@ import { useRouter } from "vue-router";
 import { ColorEnum, type FSDataTableColumn, type FSDataTableFilter, type FSDataTableOrder, type FSToggle } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints, useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { useRouting } from "@dative-gpi/foundation-shared-services/composables";
 import { uuidv4 } from "@dative-gpi/bones-ui/tools/uuid"
 
-import { alphanumericSort, sizeToVar } from "../../utils";
+import { alphanumericSort, containsSearchTerm, sizeToVar } from "../../utils";
 
 import FSDataIteratorItem from "./FSDataIteratorItem.vue";
 import FSSearchField from "../fields/FSSearchField.vue";
@@ -746,6 +765,11 @@ export default defineComponent({
       type: Array as PropType<FSDataTableColumn[]>,
       required: true
     },
+    showFilters: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     filters: {
       type: Object as PropType<{ [key: string]: FSDataTableFilter[] }>,
       required: false,
@@ -815,6 +839,11 @@ export default defineComponent({
       required: false,
       default: true
     },
+    noSearch: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     singleSelect: {
       type: Boolean,
       required: false,
@@ -881,9 +910,10 @@ export default defineComponent({
       default: "12px"
     },
   },
-  emits: ["update:modelValue", "update:headers", "update:filters", "update:mode", "update:sortBy", "update:rowsPerPage", "update:page", "update:include", "update:items", "click:row"],
+  emits: ["update:modelValue", "update:headers", "update:search", "update:showFilters", "update:filters", "update:mode", "update:sortBy", "update:rowsPerPage", "update:page", "update:include", "update:items", "click:row"],
   setup(props, { emit }) {
-    const { isExtraSmall } = useBreakpoints();
+    const { isExtraSmall, isMobileSized } = useBreakpoints();
+    const { handleRoutingEvent } = useRouting();
     const { $tr } = useTranslationsProvider();
     const { getColors } = useColors();
     const router = useRouter();
@@ -895,9 +925,9 @@ export default defineComponent({
     const innerSearch: Ref<string | null> = ref(null);
     const innerRowsPerPage = ref(props.rowsPerPage);
     const innerSortBy = ref(props.sortBy);
-    const innerMode = ref(props.mode);
+    const innerMode = ref(props.disableTable ? "iterator" : props.disableIterator ? "table" : props.mode);
     const innerPage = ref(props.page);
-    const showFilters = ref(true);
+    const innerShowFilters = ref(props.showFilters);
     const resetable = ref(false);
 
     const intersectionObserver = ref<IntersectionObserver | null>(null);
@@ -906,19 +936,26 @@ export default defineComponent({
     const elementId = `id${uuidv4()}`;
 
     const modeOptions: FSToggle[] = [
-      { id: "table", prependIcon: "mdi-table" },
-      { id: "iterator", prependIcon: "mdi-apps" }
+      { id: "iterator", prependIcon: "mdi-view-grid-outline" },
+      { id: "table", prependIcon: "mdi-format-list-bulleted" }
     ];
 
     const rowsPerPageOptions: { id: number, label: string }[] = [
       { id: 5, label: "5" },
       { id: 10, label: "10" },
       { id: 30, label: "30" },
-      { id: -1, label: $tr("ui.data-table.all-rows", "All") }
+      { id: -1, label: $tr("ui.common.all", "All") }
     ];
 
     const showFiltersRow = computed((): boolean => {
-      return (props.showSearch && showFilters.value && filterableHeaders.value.length > 0) || hiddenHeaders.value.length > 0;
+      switch (innerMode.value) {
+        case "iterator": {
+          return (props.showSearch && innerShowFilters.value && filterableHeaders.value.length > 0);
+        }
+        case "table": {
+          return (props.showSearch && innerShowFilters.value && filterableHeaders.value.length > 0) || hiddenHeaders.value.length > 0;
+        }
+      }
     });
 
     const hasVisibleFilters = computed((): boolean => {
@@ -926,11 +963,15 @@ export default defineComponent({
     });
 
     const showFiltersDivider = computed((): boolean => {
-      return resetable.value || (hiddenHeaders.value.length > 0 && hasVisibleFilters.value);
-    });
-
-    const hasToolbar = computed((): boolean => {
-      return !!useSlots().slots["toolbar"];
+      switch (innerMode.value) {
+        case "iterator": {
+          return resetable.value;
+        }
+        case "table": {
+          return resetable.value || (hiddenHeaders.value.length > 0 && hasVisibleFilters.value);
+        }
+      }
+      
     });
 
     const innerSlots = computed((): { [label: string]: Slot<any> } => {
@@ -1021,21 +1062,27 @@ export default defineComponent({
     });
 
     const innerItems = computed((): any[] => {
-      const activeFilters: { key: string, filter: FSDataTableFilter }[] = Object.keys(filters.value).reduce((acc, key) => {
-        return acc.concat(filters.value[key].filter((filter) => filter.hidden).map((filter) => ({ key, filter })));
-      }, [] as { key: string, filter: FSDataTableFilter }[]);
+      // Select only the filters where a value is hidden, for others, accept all values
+      const activeFilters: { [key: string]: FSDataTableFilter[] } = Object.keys(filters.value).reduce((acc, key) => {
+        if (filters.value[key].some((filter) => filter.hidden)) {
+          acc[key] = filters.value[key].filter((filter) => !filter.hidden);
+        }
+        return acc;
+      }, {} as { [key: string]: FSDataTableFilter[] });
+
       if (props.items && props.items.length) {
+        const innerSearchFormatted = innerSearch.value ? innerSearch.value.toLowerCase() : null;
         return props.items.filter((item) => {
           if (props.selectedOnly && !props.modelValue.includes(item[props.itemValue])) {
             return false;
           }
-          if (innerSearch.value) {
-            if (!JSON.stringify(item).toLowerCase().includes(innerSearch.value.toString().toLowerCase())) {
+          for (const property in activeFilters) {
+            if (!activeFilters[property].some((filter) => filter.filter && filter.filter(filter.value, item[property], item))) {
               return false;
             }
           }
-          if (activeFilters.some(af => af.filter.filter && af.filter.filter(af.filter.value, item[af.key], item))) {
-            return false;
+          if (!props.noSearch && innerSearchFormatted) {
+            return containsSearchTerm(item, innerSearchFormatted);
           }
           return true;
         });
@@ -1084,12 +1131,7 @@ export default defineComponent({
           clickable: true,
           row: (event: PointerEvent, row: any) => {
             if (props.itemTo && router) {
-              if (event.metaKey || event.ctrlKey || event.button === 1) {
-                window.open(router.resolve(props.itemTo(row.item)).href, "_blank");
-              }
-              else {
-                router.push(props.itemTo(row.item));
-              }
+              handleRoutingEvent(event, props.itemTo(row.item), true);
             }
             else {
               emit("click:row", row.item);
@@ -1214,39 +1256,52 @@ export default defineComponent({
         const key = header.value!;
         const currentFilters = filters.value[key];
 
+        const getPath = (object: any, keys: string[]) => keys.reduce((acc, key) => acc[key] ?? null, object);
+
         let value: FSDataTableFilter[] = [];
 
         if (header.fixedFilters) {
           value = header.fixedFilters.map((ff): FSDataTableFilter => ({
             hidden: currentFilters?.find((cf) => cf.value == (ff.value || null))?.hidden ?? false,
             text: ff.text?.toString() ?? "—",
-            value: ff.value || null,
-            filter: header.methodFilter ?? ((value, property) => {
-              property = [property].flat();
-              return Array.isArray(property) ? property.includes(value) || (!value && property.length == 0) : (!value && !property) || value == property;
+            value: ff.value ?? null,
+            filter: header.methodFilter ?? ((_, property, item) => {
+              if (header.methodFilterRaw) {
+                return header.methodFilterRaw(ff.value, item);
+              }
+              const flat = property = [property].flat();
+              return (!ff.value && flat.length == 0) || flat.some(f => f == ff.value);
             })
           }));
+          filterDictionary[key] = value;
         }
         else {
           if (props.items && props.items.length) {
             const mapToInnerValue = header.innerValue ? header.innerValue : (i: any) => i;
-            const itemValues = props.items.flatMap((item) => Array.isArray(item[key]) && item[key].length == 0 ? undefined : item[key]).map(mapToInnerValue);
+            const itemValues = props.items.flatMap((item) => {
+              return Array.isArray(getPath(item, key.split("."))) && getPath(item, key.split(".")).length == 0 ? undefined : getPath(item, key.split("."))
+            }).map(mapToInnerValue);
             const distinctValues = [...new Set(itemValues)];
 
-            value = distinctValues.map((dv): FSDataTableFilter => ({
-              hidden: currentFilters?.find((cf) => cf.value == (dv || null))?.hidden ?? false,
-              text: dv?.toString() ?? "—",
-              value: dv || null,
-              filter: header.methodFilter ?? ((_, property) => {
-                property = [property].flat().map(mapToInnerValue);
-                return Array.isArray(property) ? property.includes(dv) || (!dv && property.length == 0) : (!dv && !property) || dv == property;
-              })
-            }));
+            value = distinctValues.map((dv): FSDataTableFilter => {
+              return {
+                hidden: currentFilters?.find((cf) => cf.value == (dv || null))?.hidden ?? false,
+                text: dv?.toString() ?? "—",
+                value: dv || null,
+                filter: header.methodFilter ?? ((_, property, item) => {
+                  if (header.methodFilterRaw) {
+                    return header.methodFilterRaw(dv, item);
+                  }
+                  const flat = [property].flat().map(mapToInnerValue);
+                  return (!dv && flat.length == 0) || flat.some(f => f == dv);
+                })
+              }
+            });
           }
+          filterDictionary[key] = value.sort((v1, v2) => {
+            return v1.text.localeCompare(v2.text, undefined, { numeric: true });
+          });
         }
-        filterDictionary[key] = value.sort((v1, v2) => {
-          return v1.text.localeCompare(v2.text, undefined, { numeric: true });
-        });
       }
       for (const [key, filters] of Object.entries(props.filters)) {
         for (const filter of filters) {
@@ -1313,6 +1368,7 @@ export default defineComponent({
             }, { threshold: [0.9] });
           }
           if (document.querySelector(`#${elementId}`)) {
+            intersectionObserver.value.unobserve(document.querySelector(`#${elementId}`)!);
             intersectionObserver.value.observe(document.querySelector(`#${elementId}`)!);
           }
           return;
@@ -1349,10 +1405,10 @@ export default defineComponent({
     };
 
     const resetRowIndex = (initialIndex: number, currentIndex: number, draggedElement: HTMLElement, tbodyElement: HTMLElement) => {
-      if (initialIndex > currentIndex) {
+      if (initialIndex > currentIndex && tbodyElement.children[initialIndex]) {
         tbodyElement.children[initialIndex].insertAdjacentElement("afterend", draggedElement);
       }
-      else {
+      else if(tbodyElement.children[initialIndex]) {
         tbodyElement.children[initialIndex].insertAdjacentElement("beforebegin", draggedElement);
       }
     };
@@ -1468,8 +1524,17 @@ export default defineComponent({
       }
     });
 
+    watch(() => props.showFilters, () => {
+      innerShowFilters.value = props.showFilters;
+    });
+
     watch(innerSearch, () => {
       innerPage.value = 1;
+      emit("update:search", innerSearch.value);
+    });
+
+    watch(innerShowFilters, () => {
+      emit("update:showFilters", innerShowFilters.value);
     });
 
     watch(filters, () => {
@@ -1477,6 +1542,10 @@ export default defineComponent({
         .some((key) => filters.value[key].some((filter) => filter.hidden));
     }, { deep: true });
 
+    watch(size, () => {
+      observeIntersection();
+    });
+
     watch(innerMode, () => {
       emit("update:mode", innerMode.value);
       size.value = props.sizeIterator;
@@ -1501,13 +1570,14 @@ export default defineComponent({
 
     watch(() => props.items, async () => {
       computeFilters();
+      observeIntersection();
       if (innerPage.value !== 1) {
         const formerPage = innerPage.value;
         innerPage.value = 1;
         await nextTick();
         innerPage.value = formerPage;
       }
-    });
+    }, { deep: true });
 
     return {
       ColorEnum,
@@ -1518,9 +1588,8 @@ export default defineComponent({
       innerMode,
       modeOptions,
       innerPage,
-      hasToolbar,
       pageOptions,
-      showFilters,
+      innerShowFilters,
       showFiltersRow,
       showFiltersDivider,
       hasVisibleFilters,
@@ -1537,6 +1606,7 @@ export default defineComponent({
       classes,
       style,
       size,
+      isMobileSized,
       isExtraSmall,
       draggableDisabled,
       elementId,

package/components/lists/FSDraggable.vue

@@ -74,7 +74,7 @@ export default defineComponent({
           const dragged = (event.target as HTMLElement)?.closest(props.elementSelector) as HTMLElement;
           dragged.classList.add("fs-draggable-dragging");
           dragged.classList.add("fs-draggable-dragging-grabbegin");
-          dragged.dataset.initialIndex = props.item?.index ?? props.item?.value;
+          dragged.dataset.initialIndex = props.item.index;
           event.preventDefault();
         }
       }, mobileGrabThreshold);
@@ -171,7 +171,7 @@ export default defineComponent({
         return;
       }
       const dragged = (event.target as HTMLElement)?.closest(props.elementSelector) as HTMLElement;
-      dragged.dataset.initialIndex = props.item?.index ?? props.item?.value;
+      dragged.dataset.initialIndex = props.item.index;
       event.dataTransfer?.setDragImage(dragged, 25, 25);
       
       if (event.dataTransfer) {

package/components/lists/FSFilterButton.vue

@@ -23,38 +23,34 @@
       :border="false"
     >
       <FSCol
-        padding="16px 0 24px 16px"
+        padding="20px"
         gap="12px"
       >
         <FSCol
-          padding="0 16px 0 0"
           gap="12px"
         >
           <FSSpan
             font="text-overline"
           >
-            {{ $tr("ui.data-table.filter", "Filter") }}
+            {{ $tr("ui.common.filter", "Filter") }}
           </FSSpan>
           <FSChip
             class="fs-filter-button-chip"
-            :label="$tr('ui.data-table.all-values', 'All values')"
+            :label="$tr('ui.common.all-values', 'All values')"
             :height="['30px', '24px']"
             :variant="getAllVariant()"
             :color="$props.color"
             :editable="true"
             @click="onToggleAll"
           />
-          <FSDivider
-            padding="0 8px 0 0"
-          />
+          <FSDivider />
           <FSSearchField
+            :hideHeader="true"
             class="fs-filter-button-search"
-            prependInnerIcon="mdi-magnify"
             v-model="search"
           />
         </FSCol>
         <FSFadeOut
-          padding="0 8px 0 0"
           maxHeight="360px"
         >
           <FSCol
@@ -140,10 +136,10 @@ export default defineComponent({
         if (props.filters) {
           const hidden = props.filters.filter(f => f.hidden).length;
           if (hidden > 0) {
-            return $tr("ui.data-table.some-filters-visible", "{0}: {1} visible", props.header.text, (props.filters.length - hidden).toString());
+            return $tr("filter-button.some-filters-visible", "{0}: {1} visible", props.header.text, (props.filters.length - hidden).toString());
           }
         }
-        return $tr("ui.data-table.all-filters-visible", "{0}: All visible", props.header.text);
+        return $tr("filter-button.all-filters-visible", "{0}: All visible", props.header.text);
       }
       return null;
     });