Discover: sidebarFilter layout done

2023-04-12 16:44:47 +08:00
parent 98f37249bc
commit daed99f84f
12 changed files with 733 additions and 55 deletions
--- a/src/components/Discover/table/actOccCase.vue
+++ b/src/components/Discover/table/actOccCase.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="bg-neutral-10 border border-neutral-300 rounded-xl px-4 h-full">
+    <div class="flex justify-between items-center my-2">
+      <p class="h2">{{ tableTitle }}&nbsp({{ data.length }})</p>
+      <!-- Search -->
+      <!-- <Search></Search> -->
+    </div>
+    <!-- Table -->
+    <div class="overflow-y-auto overflow-x-auto scrollbar -mx-2 h-[calc(100%_-_64px)]">
+      <DataTable v-model:selection="select" :value="data" tableClass="w-full !border-separate !border-spacing-x-2 !table-auto" @row-select="onRowSelect" @row-unselect="onRowUnselect" @row-select-all="onRowSelectAll" @row-unselect-all="onRowUnelectAll">
+        <ColumnGroup type="header">
+          <Row>
+              <Column selectionMode="multiple" headerClass="w-8 !p-2 !bg-neutral-10 !border-neutral-500 sticky top-0 left-0 z-10 bg-neutral-10"></Column>
+              <Column field="label" header="Activity" headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10" sortable />
+              <Column field="occ_value" header="Occurrences" headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10" sortable :colspan="3" />
+              <Column field="case_value" headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10" header="Cases with Activity" sortable :colspan="3" />
+          </Row>
+        </ColumnGroup>
+        <Column selectionMode="multiple" bodyClass="!p-2 !border-0"></Column>
+        <Column field="label" header="Activity" bodyClass="break-words !py-2 !border-0"></Column>
+        <Column header="進度條" bodyClass="!py-2 !border-0 min-w-[96px]">
+          <template #body="slotProps">
+            <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
+              <div class="h-full bg-primary" :style="progressWidth(slotProps.data.occ_value)"></div>
+            </div>
+          </template>
+        </Column>
+        <Column field="occurrences" header="Occurrences" bodyClass="!text-right !py-2 !border-0"></Column>
+        <Column field="occurrence_ratio" header="O2" bodyClass="!text-right !py-2 !border-0"></Column>
+        <Column header="進度條" bodyClass="!py-2 !border-0 min-w-[96px]">
+          <template #body="slotProps">
+            <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
+              <div class="h-full bg-primary" :style="progressWidth(slotProps.data.case_value)"></div>
+            </div>
+          </template>
+        </Column>
+        <Column field="cases" header="Cases with Activity" bodyClass="!text-right !py-2 !border-0"></Column>
+        <Column field="case_ratio" header="C2" bodyClass="!text-right !py-2 !border-0"></Column>
+      </DataTable>
+    </div>
+  </div>
+</template>
+
+<script>
+import Search from '@/components/Search.vue';
+
+export default {
+  props: {
+    tableTitle: {
+      type: String,
+      require: true,
+    },
+    tableData: {
+      type: Array,
+      require: true,
+    },
+    tableSelect: {
+      type: Array,
+      require: true,
+    },
+    progressWidth: {
+      type: Function,
+      require: false,
+    }
+  },
+  data() {
+    return {
+      select: this.tableSelect,
+      data: this.tableData
+    }
+  },
+  components: {
+    Search,
+  },
+  methods: {
+    onRowSelect() {
+      this.$emit('on-row-select', this.select);
+    },
+    onRowUnselect() {
+      this.$emit('on-row-select', this.select);
+    },
+    onRowSelectAll(e) {
+      this.select = e.data;
+      this.$emit('on-row-select', this.select);
+    },
+    onRowUnelectAll(e) {
+      this.select = null;
+      this.$emit('on-row-select', this.select)
+    }
+  }
+}
+</script>