Implement datasets filter at workflows tab

src/assets/app.scss

@@ -71,3 +71,12 @@ h3 {
     ----padding-right: 1rem;
   }
 }
+
+.checkbox .checkbox-label {
+  ----label--font-size: 1rem;
+  margin-bottom: 0.2rem;
+  &:before {
+    ----border-radius: 4px;
+    ----margin-right: 0.5rem;
+  }
+}

src/components/Workflows.vue

 <template>
-  <div class="_margin-bottom:3">
+  <div class="_display:flex _margin-bottom:3">
 <!--    <SelectButton v-model="selectedOption" :options="options" optionLabel="name"></SelectButton>-->
     <i-button-group>
       <i-button color="primary" size="lg" :outline="!isList" @click="selectedOption = options[0]">{{options[0].name}}</i-button>
       <i-button color="primary" size="lg" :outline="!isTable" @click="selectedOption = options[1]">{{options[1].name}}</i-button>
     </i-button-group>
+    <MultiFilter
+      class="_margin-left:auto"
+      :amount-label="$t('datasets_selected')"
+      v-model="datasetsFilterOptions"
+      @update:model-value="onChangeDatasetFilter"
+    />
   </div>
   <div v-if="selectedOption">
-    <WorkflowsList v-if="selectedOption.value === 'list'" :data="data" :defs="defs" />
-    <WorkflowsTable v-else :data="data" :defs="defs" />
+    <WorkflowsList v-if="selectedOption.value === 'list'" :data="filteredData" :defs="defs" />
+    <WorkflowsTable v-else :data="filteredData" :defs="defs" />
   </div>
 </template>
 
@@ -21,10 +27,12 @@
   import { useI18n } from "vue-i18n";
   import { setEvalColors } from "@/helpers/eval-colors";
   import { store } from "@/helpers/store";
+  import MultiFilter from "@/components/workflows/MultiFilter.vue";
 
   const { t } = useI18n();
 
   const data = ref([]);
+  const filteredData = ref([]);
   const defs = ref({});
   const router = useRouter();
   const route = useRoute();
@@ -34,7 +42,13 @@
     { name: t('table'), value: 'table' }
   ]);
   const selectedOption = ref(null);
+  const datasetsFilterOptions = ref([]);
 
+  const onChangeDatasetFilter = (value) => {
+    value = value.filter(({ selected }) => !!(selected));
+    filteredData.value = data.value
+      .filter(item => value.find(({ id }) => item.metadata.gt_workspace['@id'] === id));
+  };
 
   watch(selectedOption, ({ value }) => {
     router.push({ query: { view: value } });
@@ -56,6 +70,22 @@
     data.value = await api.getWorkflows();
     defs.value = await api.getEvalDefinitions();
 
+    filteredData.value = data.value;
+
+    const datasetsMap = data.value
+      .filter(item => !!(item.metadata.gt_workspace))
+      .reduce((acc, cur) => {
+        const gtWorkspaceId = cur.metadata.gt_workspace['@id'];
+        acc[gtWorkspaceId] = cur.metadata.gt_workspace.label;
+        return acc;
+      }, {});
+
+    datasetsFilterOptions.value = Object.keys(datasetsMap).map(id => ({
+      id,
+      label: datasetsMap[id],
+      selected: true
+    }));
+
     setEvalColors(data.value);
 
     const filtered = options.value.filter((option) => {

src/components/workflows/MultiFilter.vue

+<template>
+  <div class="_display:flex _align-items:center">
+    <div class="_font-weight:bold">{{ amount }}</div>
+    <i-dropdown class="_margin-left:1" placement="bottom-end">
+      <i-button>{{ $t('change') }}</i-button>
+      <template #body>
+        <div class="options-container _padding-x:2">
+          <i-checkbox v-model="allSelected" @update:modelValue="onSelectAll">{{ $t('select_all') }}</i-checkbox>
+          <i-checkbox v-model="option.selected" @update:modelValue="onChange" v-for="option in filteredOptions" :key="option.id">{{ option.label }}</i-checkbox>
+        </div>
+      </template>
+    </i-dropdown>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+const props = defineProps(['amount-label', 'modelValue']);
+const emit = defineEmits(['update:modelValue']);
+
+const totalAmount = ref(0);
+const filteredOptions = ref([]);
+const allSelected = ref(true);
+
+const amount = computed(() => {
+  return filteredOptions.value.filter(({ selected }) => !!(selected)).length + ` ${t('of')} ` + totalAmount.value + ' ' + props.amountLabel;
+});
+
+watch(() => props.modelValue, (value) => {
+  totalAmount.value = value.length;
+  filteredOptions.value = value.map(({ id, label, selected = false }) => ({
+    id, label, selected
+  }));
+}, { immediate: true });
+
+const onChange = () => {
+  allSelected.value = filteredOptions.value.filter(({ selected }) => !(selected)).length === 0;
+  emit('update:modelValue', filteredOptions.value);
+};
+
+const onSelectAll = (isChecked) => {
+  filteredOptions.value.forEach((option, i) => filteredOptions.value[i].selected = isChecked);
+  emit('update:modelValue', filteredOptions.value);
+};
+
+</script>
+
+<style scoped>
+.options-container {
+  max-height: 30vh;
+  overflow: auto;
+}
+</style>

src/components/workflows/WorkflowsList.vue

@@ -268,11 +268,10 @@ const shortenCER = (value) => {
   return Math.round(value * 1000) / 1000;
 };
 
- onMounted(() => {
-   setEvals(props.data);
-   setListData(props.data);
- });
-
+onMounted(() => {
+ setEvals(props.data);
+ setListData(props.data);
+});
 
 watch(() => props.data, () => {
   setEvals(props.data);

src/locales/de.json

@@ -28,5 +28,9 @@
   "cer_max_desc": "CER Max absteigend",
   "no_table_data": "Keine Tabellendaten verfügbar",
   "workflow_steps": "Workflowschritte",
-  "external_repo_url": "Externer Link zum Repository"
+  "external_repo_url": "Externer Link zum Repository",
+  "change": "Ändern",
+  "datasets_selected": "Datasets ausgewählt",
+  "of": "von",
+  "select_all": "Alle auswählen"
 }

src/locales/en.json

@@ -22,5 +22,9 @@
   "cer_max_desc": "CER Max descending",
   "no_table_data": "No table data available",
   "workflow_steps": "Workflow steps",
-  "external_repo_url": "External link to the repository"
+  "external_repo_url": "External link to the repository",
+  "change": "Change",
+  "datasets_selected": "datasets selected",
+  "of": "of",
+  "select_all": "Select all"
 }