fix(desk): table missing width key

Author: zzhenryquezz

packages/desktop/modules/collection-column/composables/with-view.ts

@@ -1,5 +1,4 @@
 import { useNonReactive } from '@/composables/utils'
-import pick from 'lodash/pick'
 
 import { ViewColumn } from '@core/entities/view-common'
 import Column from '@core/entities/column'
@@ -27,11 +26,20 @@ export function withView<T = ViewColumn>(columns: Column[], viewColumns: ViewCol
     return result as (Column & T)[]
 }
 
-export function withOnlyView<T = ViewColumn>(columns: (Column & T)[]): T[] {
-    if (!columns[0]) return []
+export function withNonColumnProperties<T = ViewColumn>(column: Column & T) {
+    const result: any = {}
 
     const cKeys = Object.keys(new Column({}))
-    const keys = Object.keys(columns[0]).filter((k) => k === 'id' || !cKeys.includes(k))
 
-    return useNonReactive(columns).map((c) => pick(c, keys)) as T[]
+    Object.keys(column)
+        .filter((key) => key === 'id' || !cKeys.includes(key))
+        .forEach((key) => {
+            result[key] = column[key]
+        })
+
+    return result
+}
+
+export function withOnlyView<T = ViewColumn>(columns: (Column & T)[]): T[] {
+    return useNonReactive(columns).map(withNonColumnProperties) as T[]
 }

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

@@ -21,7 +21,14 @@ const drawer = ref(false)
 // columns
 const store = useStore()
 
-const view = computed(() => store.view.get(props.collectionId, props.viewId))
+const view = computed({
+    get: () => store.view.get(props.collectionId, props.viewId),
+    set: (value) => {
+        if (!value) return
+
+        store.view.set(props.collectionId, props.viewId, value)
+    },
+})
 
 const columns = computed({
     get() {
@@ -32,7 +39,10 @@ const columns = computed({
     set(value) {
         if (!view.value) return
 
-        view.value.columns = withOnlyView(value)
+        view.value = {
+            ...view.value,
+            columns: withOnlyView(value),
+        }
     },
 })
 

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

@@ -61,7 +61,14 @@ const collection = computed(() => store.collection.get(props.collectionId))
 // view
 const innerViewId = ref('')
 
-const view = computed(() => store.view.get<ViewTable>(props.collectionId, innerViewId.value))
+const view = computed({
+    get: () => store.view.get<ViewTable>(props.collectionId, innerViewId.value),
+    set: (value) => {
+        if (!value) return
+
+        store.view.set<ViewTable>(props.collectionId, innerViewId.value, value)
+    },
+})
 
 async function setViews() {
     innerViewId.value = props.viewId || ''
@@ -111,7 +118,10 @@ const columns = computed({
     set(value) {
         if (!view.value) return
 
-        view.value.columns = withOnlyView(value).filter((c) => !c.id.startsWith('_'))
+        view.value = {
+            ...view.value,
+            columns: withOnlyView(value).filter((c) => !c.id.startsWith('_')),
+        }
     },
 })
 

packages/desktop/modules/view/store.ts

@@ -50,7 +50,7 @@ export const useStore = defineStore('view', () => {
     }
 
     async function setViews(collectionId: string, forceUpdate = false) {
-        if (!forceUpdate && getViews(collectionId).length) {
+        if (!forceUpdate && all(collectionId).length) {
             return
         }
 
@@ -71,7 +71,7 @@ export const useStore = defineStore('view', () => {
 
         raw.map(instantiate).forEach((v) => create(collectionId, v, true))
 
-        return getViews(collectionId)
+        return all(collectionId)
     }
 
     async function save(collectionId: string) {
@@ -103,9 +103,7 @@ export const useStore = defineStore('view', () => {
             const stop = watch(
                 () => views.value[index].view,
                 debounce(() => save(collectionId), 500),
-                {
-                    deep: true,
-                }
+                { deep: true }
             )
 
             watchers.value.push({
@@ -140,6 +138,19 @@ export const useStore = defineStore('view', () => {
         return views.value[index].view as T
     }
 
+    function set<T = ViewCommon>(collectionId: string, viewId: string, payload: T) {
+        const index = views.value.findIndex(
+            (v) => v.collectionId === collectionId && v.viewId === viewId
+        )
+
+        if (index === -1) return
+
+        views.value[index] = {
+            ...views.value[index],
+            view: Object.assign(views.value[index].view, payload),
+        }
+    }
+
     async function destroy(collectionId: string, viewId: string) {
         const index = views.value.findIndex(
             (i) => i.collectionId === collectionId && i.viewId === viewId
@@ -167,6 +178,7 @@ export const useStore = defineStore('view', () => {
         setViews,
         all,
         get,
+        set,
         getViews,
         getView,
         create,