refactor(desk): create c-drawer-filter component

zzhenryquezz · zzhenryquezz · commit 73ab4c693cb0 · 2022-12-15T19:10:42.000-03:00
diff --git a/packages/desktop/components/v-btn.vue b/packages/desktop/components/v-btn.vue
@@ -51,13 +51,15 @@ const variations = {
         'accent': 'bg-accent hover:bg-accent/75',
         'danger': 'bg-danger hover:bg-danger/75 text-t-primary',
         'info': 'bg-info hover:bg-info/75 text-t-primary',
+        'warn': 'bg-warn hover:bg-warn/75 text-t-primary',
         'b-secondary': 'bg-b-secondary hover:bg-b-secondary/75 text-t-primary',
     },
     text: {
         'accent':
             'hover:border-accent/5 hover:bg-accent/5 border border-transparent hover:text-accent',
         'danger':
             'hover:border-danger/5 hover:bg-danger/5 border border-transparent hover:text-danger',
+        'warn': 'hover:border-warn/5 hover:bg-warn/5 border border-transparent hover:text-warn',
         'info': 'hover:border-info/5 hover:bg-info/5 border border-transparent hover:text-info',
         'lines': 'hover:border-lines/5 hover:bg-lines/5 border border-transparent hover:text-lines',
         'b-primary':
diff --git a/packages/desktop/components/v-table.vue b/packages/desktop/components/v-table.vue
@@ -29,7 +29,11 @@ const props = defineProps({
     },
     limit: {
         type: [Number, String],
-        default: 80,
+        default: 20,
+    },
+    loading: {
+        type: Boolean,
+        default: false,
     },
     fixed: {
         type: Boolean,
@@ -74,9 +78,11 @@ const visibleItems = computed(() => props.items.slice(0, pagination.value.limit)
 </script>
 <template>
     <table
-        class="w-full border-lines border-separate border-spacing-0"
-        :class="[fixed ? 'table-fixed' : '']"
+        class="w-full border-lines border-separate border-spacing-0 relative"
+        :class="[fixed ? 'table-fixed' : '', loading ? 'animate-pulse' : '']"
     >
+        <div v-if="loading" class="absolute top-0 left-0 h-[1px] w-full bg-accent animate-pulse" />
+
         <thead>
             <slot name="column" :columns="parsedColumns">
                 <v-tr :class="[headerStick ? 'sticky top-0' : '']" class="bg-b-primary">
diff --git a/packages/desktop/i18n/en-US.ts b/packages/desktop/i18n/en-US.ts
@@ -57,6 +57,7 @@ export default {
     section: 'Section',
     apply: 'Apply',
     operation: 'Operation',
+    clear: 'Clear',
     errors: {
         workspaceNotFound: '@:workspace not found: {0}',
         collectionNotFound: '@:collection not found: {1}',
diff --git a/packages/desktop/modules/collection/components/CDrawerFilter.vue b/packages/desktop/modules/collection/components/CDrawerFilter.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { CollectionColumn } from '@/../core/entities/collection'
+import { useVModel } from 'vue-wind/composables/v-model'
+import { Filter } from '../composables/filter'
+
+import CFilter from './CFilter.vue'
+
+const props = defineProps({
+    modelValue: {
+        type: Array as () => Filter[],
+        default: () => [],
+    },
+    columns: {
+        type: Array as () => CollectionColumn[],
+        default: () => [],
+    },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const filters = useVModel(props, 'modelValue', emit)
+
+const drawer = ref(false)
+
+function clear() {
+    filters.value = []
+}
+
+function add(column: CollectionColumn) {
+    filters.value.push({
+        columnId: column.id,
+        field: column.field,
+        type: column.type,
+        config: {},
+        value: '',
+    })
+}
+</script>
+
+<template>
+    <is-drawer v-model="drawer">
+        <template #activator="{ attrs }">
+            <v-btn text size="sm" v-bind="attrs">
+                <is-icon name="filter" />
+            </v-btn>
+        </template>
+
+        <v-card-head class="px-4">
+            <v-card-title class="text-t-secondary mr-auto">
+                {{ $t('filter', 2) }}
+            </v-card-title>
+
+            <v-btn class="mr-4 text-uppercase" text color="warn" @click="clear">
+                <is-icon name="brush" class="rotate-180 block" />
+            </v-btn>
+
+            <v-btn color="danger" text @click="drawer = false">
+                <is-icon name="times" />
+            </v-btn>
+        </v-card-head>
+
+        <c-filter
+            v-for="(f, index) in filters"
+            :key="index"
+            :model-value="f"
+            :columns="columns"
+            @update:model-value="(v) => (filters[index] = v)"
+            @destroy="filters.splice(index, 1)"
+        />
+
+        <v-card-content class="flex-wrap">
+            <div v-if="!filters.length" class="w-full mb-3 text-t-secondary">
+                {{ $t('noEntity', [$t('filter', 2)]) }}
+            </div>
+
+            <is-menu offset-y close-on-content-click>
+                <template #activator="{ on }">
+                    <v-btn v-bind="on" class="w-full" color="info">
+                        <is-icon name="plus" class="mr-4" />
+                        {{ $t('addEntity', [$t('filter')]) }}
+                    </v-btn>
+                </template>
+
+                <v-card color="b-secondary">
+                    <is-list-item v-for="c in columns" :key="c.id" @click="add(c)">
+                        {{ c.label }}
+                    </is-list-item>
+                </v-card>
+            </is-menu>
+        </v-card-content>
+    </is-drawer>
+</template>
diff --git a/packages/desktop/modules/collection/components/CTable.vue b/packages/desktop/modules/collection/components/CTable.vue
@@ -8,19 +8,18 @@ import { useRouter } from 'vue-router'
 import debounce from 'lodash/debounce'
 
 import Item from '@core/entities/item'
-import Collection, { CollectionColumn } from '@core/entities/collection'
+import Collection from '@core/entities/collection'
 import { ViewTable } from '@core/entities/view'
 
-import { toCssMeasurement, useNonReactive } from '@/composables/utils'
+import { useNonReactive } from '@/composables/utils'
+import { filter } from '@/modules/collection/composables/filter'
+import { createBindings } from '@/composables/binding'
 import { useStore } from '@/modules/collection/store'
 
-import { Filter, filter } from '@/modules/collection/composables/filter'
-
 import Draggable from 'vuedraggable'
 import CColumn from './CColumn.vue'
-import CFilter from './CFilter.vue'
+import CDrawerFilter from './CDrawerFilter.vue'
 import IValue from '@/modules/item/components/IValue.vue'
-import { createBindings } from '@/composables/binding'
 
 const props = defineProps({
     width: {
@@ -75,22 +74,6 @@ watch(() => props.collectionId, setCollection, {
     immediate: true,
 })
 
-// set items
-const items = ref<Item[]>([])
-
-async function setItems() {
-    if (!collection.value) {
-        items.value = []
-        return
-    }
-    store.item
-        .list({ collectionId: props.collectionId })
-        .then((r) => (items.value = r.data))
-        .catch(() => (items.value = []))
-}
-
-watch(collection, setItems)
-
 // view
 const view = ref<ViewTable & { loading: boolean }>({
     loading: false,
@@ -129,15 +112,13 @@ async function setView() {
 
     collection.value.columns
         .map((c) => useNonReactive(c))
-        .forEach((c) => {
-            const saved = savedColumns.find((s) => s.id === c.id)
-
+        .forEach((c) =>
             columns.push({
-                width: 200,
+                width: 5,
                 ...c,
-                ...saved,
+                ...savedColumns.find((s) => s.id === c.id),
             })
-        })
+        )
 
     columns.push({
         id: '_actions_right',
@@ -171,58 +152,48 @@ watch(collection, setView)
 watch(() => view.value.columns, saveView, { deep: true })
 watch(() => view.value.filters, saveView, { deep: true })
 
-// filters
+// set items
+
 const search = ref({
     input: '',
     show: false,
     onInput: debounce((v) => (search.value.input = v), 100),
 })
 
-const filters = ref({
-    drawer: false,
-    payload: [] as Filter[],
-})
+const items = ref<Item[]>([])
+const loadingItems = ref(false)
+
+async function setItems() {
+    if (!collection.value) {
+        items.value = []
+        return
+    }
 
-const filteredItems = computed(() =>
-    items.value.filter((i) => {
+    if (loadingItems.value) return
+
+    loadingItems.value = true
+
+    const raw = await store.item
+        .list({ collectionId: props.collectionId })
+        .then((r) => (items.value = r.data))
+        .catch(() => (items.value = []))
+
+    items.value = raw.filter((i) => {
         let valid = !!JSON.stringify(i).toLowerCase().includes(search.value.input.toLowerCase())
 
         valid = view.value.filters.reduce((r, f) => r && filter(i, f), valid)
 
         return valid
     })
-)
-
-function addFilter(column: CollectionColumn) {
-    filters.value.payload.push({
-        columnId: column.id,
-        field: column.field,
-        type: column.type,
-        config: {},
-        value: '',
-    })
-}
 
-function applyFilters() {
-    view.value.filters = useNonReactive(filters.value.payload)
-
-    filters.value.drawer = false
+    setTimeout(() => (loadingItems.value = false), 800)
 }
 
-function cancelFilters() {
-    filters.value.payload = useNonReactive(view.value.filters)
+watch(collection, setItems)
 
-    filters.value.drawer = false
-}
+watch(() => view.value.filters, debounce(setItems, 500), { deep: true })
 
-watch(
-    () => view.value.loading,
-    (v) => {
-        if (v) return
-
-        filters.value.payload = useNonReactive(view.value.filters)
-    }
-)
+watch(() => search.value.input, debounce(setItems, 1000))
 
 // bindings
 const attrs = useAttrs()
@@ -265,74 +236,21 @@ const bindings = computed(() => createBindings(attrs, ['table', 'head']))
                     <is-icon name="search" />
                 </v-btn>
 
-                <is-drawer v-model="filters.drawer">
-                    <template #activator="{ attrs }">
-                        <v-btn text size="sm" v-bind="attrs">
-                            <is-icon name="filter" />
-                        </v-btn>
-                    </template>
-
-                    <form @submit.prevent="applyFilters">
-                        <v-card-head class="px-4">
-                            <v-card-title class="text-t-secondary mr-auto">
-                                {{ $t('filter', 2) }}
-                            </v-card-title>
-
-                            <v-btn class="mr-4" color="danger" @click="cancelFilters">
-                                {{ $t('cancel') }}
-                            </v-btn>
-
-                            <v-btn class="mr-4" type="submit">
-                                {{ $t('apply') }}
-                            </v-btn>
-
-                            <v-btn @click="filters.drawer = false">
-                                <is-icon name="times" />
-                            </v-btn>
-                        </v-card-head>
-
-                        <c-filter
-                            v-for="(f, index) in filters.payload"
-                            :key="index"
-                            :model-value="f"
-                            :columns="collection ? collection.columns : []"
-                            @update:model-value="(v) => (filters[index] = v)"
-                            @destroy="filters.payload.splice(index, 1)"
-                        />
-
-                        <v-card-content class="flex-wrap">
-                            <div
-                                v-if="!filters.payload.length"
-                                class="w-full mb-3 text-t-secondary"
-                            >
-                                {{ $t('noEntity', [$t('filter', 2)]) }}
-                            </div>
-
-                            <is-menu offset-y close-on-content-click>
-                                <template #activator="{ on }">
-                                    <v-btn v-bind="on" class="mr-4" color="info">
-                                        {{ $t('addEntity', [$t('filter')]) }}
-                                    </v-btn>
-                                </template>
+                <v-btn text size="sm" @click="setItems">
+                    <is-icon name="rotate" />
+                </v-btn>
 
-                                <v-card color="b-secondary">
-                                    <is-list-item
-                                        v-for="c in collection ? collection.columns : []"
-                                        :key="c.id"
-                                        @click="addFilter(c)"
-                                    >
-                                        {{ c.label }}
-                                    </is-list-item>
-                                </v-card>
-                            </is-menu>
-                        </v-card-content>
-                    </form>
-                </is-drawer>
+                <c-drawer-filter v-model="view.filters" :columns="collection?.columns" />
             </div>
         </v-card-head>
 
         <div class="overflow-auto w-full h-[calc(100%_-_53px)]">
-            <v-table :items="filteredItems" :columns="view.columns" v-bind="bindings.table">
+            <v-table
+                :items="items"
+                :columns="view.columns"
+                v-bind="bindings.table"
+                :loading="loadingItems"
+            >
                 <template #column>
                     <Draggable v-model="view.columns" handle=".drag" item-key="id" tag="v-tr">
                         <template #item="{ element: c }">
@@ -369,7 +287,6 @@ const bindings = computed(() => createBindings(attrs, ['table', 'head']))
                             v-for="c in view.columns"
                             :key="c.id"
                             no-padding
-                            :width="c.width"
                             :class="c.id[0] === '_' ? '!border-x-0' : ''"
                         >
                             <is-menu v-if="c.id === '_actions_left'" offset-y>
diff --git a/packages/desktop/modules/collection/composables/filter.ts b/packages/desktop/modules/collection/composables/filter.ts
diff --git a/packages/desktop/tailwind.config.js b/packages/desktop/tailwind.config.js
