refactor(desk): centralize view edition in module

Author: zzhenryquezz

packages/core/entities/view-gallery.ts

@@ -1,8 +1,4 @@
-import View, { ViewColumn } from './view'
-
-export interface ViewGalleryColumn extends ViewColumn {
-    hide: boolean
-}
+import View from './view'
 
 export interface ViewGallerySize {
     width: number | string
@@ -24,8 +20,6 @@ export interface ViewGalleryThumbnail {
 export default class ViewGallery extends View {
     public readonly component = 'gallery'
 
-    public columns: ViewGalleryColumn[] = []
-
     public thumbnail: ViewGalleryThumbnail = {
         key: '',
         position: '',

packages/core/entities/view.ts

@@ -11,39 +11,17 @@ export interface ViewFilter {
 
 export interface ViewColumn extends Partial<Column> {
     id: string // link with column
+    hide?: boolean
 }
 
 export default class View {
     public id = ''
     public filters: ViewFilter[] = []
     public columns: ViewColumn[] = []
 
-    constructor(props?: Omit<View, 'id'>, id?: string) {
+    constructor(props?: Partial<View>, id?: string) {
         Object.assign(this, props)
 
         this.id = id || uuid()
     }
-
-    public merge(payload: Partial<View>) {
-        const { columns, ...data } = payload
-
-        if (!columns) {
-            return Object.assign(this, data)
-        }
-
-        columns.forEach((c) => {
-            const cColumn = this.columns.find((cv) => cv.id === c.id)
-
-            Object.assign(cColumn || {}, c)
-        })
-
-        this.columns.sort((a, b) => {
-            const aIndex = columns.findIndex((s) => s.id === a.id)
-            const bIndex = columns.findIndex((s) => s.id === b.id)
-
-            if (aIndex === -1 || bIndex === -1) return 0
-
-            return aIndex - bIndex
-        })
-    }
 }

packages/desktop/modules/collection/components/CActions.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { debounce } from 'lodash'
+import { ref, watch, computed, onMounted } from 'vue'
+import { useStore } from '../store'
+
+import CDrawerFilter from './CDrawerFilter.vue'
+import CDrawerHideColumns from './CDrawerHideColumns.vue'
+
+// Props & emit
+const props = defineProps({
+    collectionId: {
+        type: String,
+        required: true,
+    },
+    viewId: {
+        type: String,
+        default: '',
+    },
+})
+
+// collection
+const store = useStore()
+
+const collection = computed(() => store.collections.find((c) => c.id === props.collectionId))
+
+onMounted(async () => {
+    if (!collection.value) {
+        await store.setCollections()
+    }
+})
+
+// view
+
+const view = computed(() => store.view.getRegister(props.collectionId, props.viewId).view)
+
+watch(props, () => store.view.setRegister(props.collectionId, props.viewId), {
+    deep: true,
+    immediate: true,
+})
+
+const search = ref({
+    input: '',
+    show: false,
+    onInput: debounce((v) => (search.value.input = v), 100),
+})
+
+async function load() {
+    await store.item.setRegister(props.collectionId, {
+        filters: view.value.filters,
+        search: search.value.input,
+    })
+}
+
+watch(() => search.value.input, debounce(load, 500))
+</script>
+<template>
+    <v-card-head v-if="collection">
+        <slot name="left" />
+
+        <div class="grow"></div>
+
+        <div class="flex items-center transition-all">
+            <transition name="slide-left">
+                <is-input
+                    v-if="search.show || !!search.input"
+                    :model-value="search.input"
+                    :placeholder="$t('search')"
+                    size="sm"
+                    class="w-[300px] mr-2"
+                    @update:model-value="search.onInput"
+                >
+                    <template #append>
+                        <v-btn
+                            v-if="search.input"
+                            text
+                            size="none"
+                            class="w-5 h-5"
+                            @click="search.input = ''"
+                        >
+                            <is-icon name="times" />
+                        </v-btn>
+                    </template>
+                </is-input>
+            </transition>
+
+            <v-btn text size="sm" @click="search.show = !search.show">
+                <is-icon name="search" />
+            </v-btn>
+
+            <v-btn text size="sm" @click="load">
+                <is-icon name="rotate" />
+            </v-btn>
+
+            <c-drawer-hide-columns v-model="view.columns" :collection-id="collectionId" />
+
+            <c-drawer-filter v-model="view.filters" :columns="collection?.columns" />
+        </div>
+    </v-card-head>
+</template>

packages/desktop/modules/collection/components/CDrawerFilter.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-import { CollectionColumn } from '@/../core/entities/collection'
+import Column from '@core/entities/column'
 import { useVModel } from 'vue-wind/composables/v-model'
-import { Filter } from '../composables/filter'
+import { ViewFilter } from '@core/entities/view'
 
 import CFilter from './CFilter.vue'
 
 const props = defineProps({
     modelValue: {
-        type: Array as () => Filter[],
+        type: Array as () => ViewFilter[],
         default: () => [],
     },
     columns: {
-        type: Array as () => CollectionColumn[],
+        type: Array as () => Column[],
         default: () => [],
     },
 })
@@ -28,7 +28,7 @@ function clear() {
     filters.value = []
 }
 
-function add(column: CollectionColumn) {
+function add(column: Column) {
     filters.value.push({
         columnId: column.id,
         field: column.field,

packages/desktop/modules/collection/components/CDrawerHideColumns.vue

@@ -1,17 +1,21 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-
-import { CollectionColumn } from '@/../core/entities/collection'
+import { computed, ref } from 'vue'
 import { useVModel } from '@vueuse/core'
-import { ViewGalleryColumn } from '@/../core/entities/view'
+
+import View, { ViewColumn } from '@/../core/entities/view'
 
 import VDraggable from 'vuedraggable'
+import { useStore } from '../store'
 
 const props = defineProps({
     modelValue: {
-        type: Array as () => (ViewGalleryColumn & CollectionColumn)[],
+        type: Array as () => View['columns'],
         default: () => [],
     },
+    collectionId: {
+        type: String,
+        required: true,
+    },
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -31,6 +35,17 @@ function hideAll() {
         c.hide = true
     })
 }
+
+// get label
+const store = useStore()
+
+const collection = computed(() => store.collections.find((c) => c.id === props.collectionId))
+
+function getLabel(viewColumn: ViewColumn) {
+    const column = collection.value?.columns.find((c) => c.id === viewColumn.id)
+
+    return column?.label || viewColumn.id
+}
 </script>
 
 <template>
@@ -75,7 +90,7 @@ function hideAll() {
                     </v-btn>
 
                     <div>
-                        {{ column.label }}
+                        {{ getLabel(column) }}
                     </div>
                 </is-list-item>
             </template>

packages/desktop/modules/collection/components/CFilter.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { CollectionColumn } from '@/../core/entities/collection'
+import Column from '@core/entities/column'
 import { computed } from 'vue'
 import { useVModel } from 'vue-wind/composables/v-model'
-import { Filter } from '../composables/filter'
+import { ViewFilter } from '@core/entities/view'
 
 import CFilterNumber from './CFilterNumber.vue'
 import CFilterRelation from './CFilterRelation.vue'
@@ -14,11 +14,11 @@ import CFilterText from './CFilterText.vue'
 
 const props = defineProps({
     modelValue: {
-        type: Object as () => Filter,
+        type: Object as () => ViewFilter,
         default: null,
     },
     columns: {
-        type: Array as () => CollectionColumn[],
+        type: Array as () => Column[],
         default: () => [],
     },
 })
@@ -29,12 +29,13 @@ const emit = defineEmits(['update:modelValue', 'destroy'])
 const model = useVModel(props, 'modelValue', emit)
 
 // set component
-const components: Record<CollectionColumn['type'], any> = {
+const components: Record<Column['type'], any> = {
     text: CFilterText,
     number: CFilterNumber,
     relation: CFilterRelation,
     select: CFilterSelect,
     script: CFilterScript,
+    entry: CFilterText,
 }
 
 const column = computed(() => props.columns.find((c) => c.id === model.value.columnId))