From 172320f2e7df9f799e6a51f280d2900ef5d5dbe9 Mon Sep 17 00:00:00 2001
From: Gaelle <gaelle@bimdata.io>
Date: Mon, 18 Mar 2024 15:16:13 +0100
Subject: [PATCH] add ColumnFilters component

---
 .../column-filters/ColumnFilters.vue          | 73 +++++++++++++++++++
 .../column-filters/_ColumnFilters.scss        | 13 ++++
 2 files changed, 86 insertions(+)
 create mode 100644 src/BIMDataComponents/BIMDataTable/column-filters/ColumnFilters.vue
 create mode 100644 src/BIMDataComponents/BIMDataTable/column-filters/_ColumnFilters.scss

diff --git a/src/BIMDataComponents/BIMDataTable/column-filters/ColumnFilters.vue b/src/BIMDataComponents/BIMDataTable/column-filters/ColumnFilters.vue
new file mode 100644
index 00000000..95f25147
--- /dev/null
+++ b/src/BIMDataComponents/BIMDataTable/column-filters/ColumnFilters.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="column-filters p-12">
+    <slot name="column-filters">
+      <div
+        v-for="element in columnElements"
+        :key="element.text"
+        class="column-filters__element flex justify-center"
+      >
+        <BIMDataCheckbox
+          :text="element.text"
+          :modelValue="element.checked"
+          @update:modelValue="toggle(element, $event)"
+        />
+      </div>
+    </slot>
+  </div>
+</template>
+<script>
+import { computed } from "vue";
+import BIMDataCheckbox from "../../BIMDataCheckbox/BIMDataCheckbox.vue";
+export default {
+  components: {
+    BIMDataCheckbox,
+  },
+  props: {
+    column: {
+      type: Object,
+      required: true,
+    },
+    rows: {
+      type: Array,
+      required: true,
+    },
+    filters: {
+      type: Array,
+      required: true,
+    },
+  },
+  setup(props, { emit }) {
+    const columnFilters = computed(
+      () =>
+        props.filters.find(filter => filter.columnKey === props.column.id)
+          ?.columnFilters ?? [],
+    );
+    const elements = [
+      ...new Set(props.rows.map(row => row.data[props.column.id])),
+    ];
+    const columnElements = computed(() =>
+      elements.map(element => ({
+        text: element,
+        checked: columnFilters.value.includes(element),
+      })),
+    );
+
+    const toggle = (element, checked) => {
+      const newColumnFilters = checked
+        ? [...columnFilters.value, element.text]
+        : columnFilters.value.filter(filter => filter !== element.text);
+      emit("filter", {
+        columnKey: props.column.id,
+        columnFilters: newColumnFilters,
+      });
+    };
+
+    return {
+      columnElements,
+      toggle,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss" src="./_ColumnFilters.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataTable/column-filters/_ColumnFilters.scss b/src/BIMDataComponents/BIMDataTable/column-filters/_ColumnFilters.scss
new file mode 100644
index 00000000..f0222c88
--- /dev/null
+++ b/src/BIMDataComponents/BIMDataTable/column-filters/_ColumnFilters.scss
@@ -0,0 +1,13 @@
+.column-filters {
+  width: 100%;
+  display: grid;
+  position: absolute;
+  left: 0;
+  background-color: var(--color-white);
+  box-shadow: var(--box-shadow);
+  gap: calc(var(--spacing-unit) / 2);
+  border-radius: calc(var(--spacing-unit) / 2);
+  .bimdata-checkbox {
+    font-weight: 400;
+  }
+}