refactor(desk): use icons in v-checkbox

Author: zzhenryquezz

packages/desktop/components.d.ts

@@ -15,7 +15,7 @@ declare module '@vue/runtime-core' {
     VCardHead: typeof import('./components/v-card-head.vue')['default']
     VCardTitle: typeof import('./components/v-card-title.vue')['default']
     VChart: typeof import('./components/v-chart.vue')['default']
-    VCheckbox: typeof import('./components/v-checkbox.vue')['default']
+    VCheckbox: typeof import('./components/VCheckbox.vue')['default']
     VCode: typeof import('./components/v-code.vue')['default']
     VContainer: typeof import('./components/v-container.vue')['default']
     VDialog: typeof import('./components/v-dialog.vue')['default']

packages/desktop/components/VCheckbox.vue

@@ -0,0 +1,55 @@
+<script lang="ts">
+export default {
+    inheritAttrs: true,
+}
+</script>
+
+<script setup lang="ts">
+import { useVariant } from '@composables/use-variant'
+import { useVModel } from 'vue-wind/composables/v-model'
+
+// Props & Emits
+const props = defineProps({
+    modelValue: {
+        type: [String, Number, Boolean] as any,
+        default: null,
+    },
+    label: {
+        type: String,
+        default: null,
+    },
+    color: {
+        type: String,
+        default: 'accent',
+    },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+// model
+const model = useVModel(props, 'modelValue', emit)
+
+// color
+
+const colorVariant = useVariant(props, 'color', {
+    accent: 'text-accent',
+    _shared: 'cursor-pointer',
+})
+</script>
+<template>
+    <label class="flex items-center">
+        <input v-model="model" type="checkbox" class="hidden" />
+
+        <v-icon
+            v-if="model"
+            :class="colorVariant.classes"
+            :style="colorVariant.styles"
+            name="square-check"
+            class="cursor-pointer"
+        />
+
+        <v-icon v-else name="fa-regular fa-square" class="cursor-pointer text-t-secondary" />
+
+        <span v-if="label" class="text-t-secondary block font-bold ml-2">{{ label }}</span>
+    </label>
+</template>

packages/desktop/components/v-checkbox.vue

@@ -163,7 +163,7 @@ const relation = computed(() => {
                 <v-card-title>
                     {{ $t('editEntity', [$t('column')]) }}
                 </v-card-title>
-                <v-btn text color="danger" class="ml-auto" @click="deleteColumn">
+                <v-btn mode="text" color="danger" class="ml-auto" @click="deleteColumn">
                     <v-icon name="trash" />
                 </v-btn>
             </v-card-head>
@@ -206,7 +206,7 @@ const relation = computed(() => {
                                     <v-btn
                                         v-bind="attrs"
                                         :color="option.color || 'accent'"
-                                        size="w-4 h-4"
+                                        size="xs"
                                     />
 
                                     <v-input v-model="option.name" class="ml-4">
@@ -225,25 +225,25 @@ const relation = computed(() => {
                                 <v-card class="py-4 px-2" color="b-primary">
                                     <v-btn
                                         color="accent"
-                                        size="w-4 h-4"
+                                        size="xs"
                                         class="mb-4"
                                         @click="option.color = 'accent'"
                                     />
                                     <v-btn
                                         color="info"
-                                        size="w-4 h-4"
+                                        size="xs"
                                         class="mb-4"
                                         @click="option.color = 'info'"
                                     />
                                     <v-btn
                                         color="danger"
-                                        size="w-4 h-4"
+                                        size="xs"
                                         class="mb-4"
                                         @click="option.color = 'danger'"
                                     />
                                     <v-btn
                                         color="warn"
-                                        size="w-4 h-4"
+                                        size="xs"
                                         class="mb-4"
                                         @click="option.color = 'warn'"
                                     />

packages/desktop/modules/collection-column/components/CcColumn.vue

@@ -2,7 +2,6 @@ import { ref, watch, WatchStopHandle } from 'vue'
 import { defineStore } from 'pinia'
 import debounce from 'lodash/debounce'
 
-import { useStore as useWorkspace } from '@modules/workspace/store'
 import { useStore as useCollection } from '@modules/collection/store'
 
 import Column from '@core/entities/column'
@@ -18,7 +17,6 @@ interface StoreItem {
 export const useStore = defineStore('column', () => {
     const items = ref<StoreItem[]>([])
 
-    const workspace = useWorkspace()
     const collection = useCollection()
 
     async function set(collectionId: string, forceUpdate = false) {
@@ -128,13 +126,7 @@ export const useStore = defineStore('column', () => {
 
         if (!item || !data) return
 
-        await collection.update({
-            workspaceId: workspace.currentId!,
-            collectionId,
-            data: {
-                columns: item.columns,
-            },
-        })
+        await collection.update(collectionId, { columns: item.columns }, false)
     }
 
     async function destroy(collectionId: string, columnId: string) {

packages/desktop/modules/collection-column/store.ts

@@ -363,7 +363,7 @@ onKeyStroke('Delete', async () => {
                                 class="px-4 py-2"
                                 select:no-chevron
                                 menu:offset-y
-                                color="none"
+                                input:color="none"
                                 flat
                             />
                         </v-td>

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

@@ -6,9 +6,6 @@ import Collection from '@core/entities/collection'
 import { useStore as useWorkspace } from '@modules/workspace/store'
 import { useCase } from '@composables/use-case'
 
-import UpdateCollectionsDTO from '@core/use-cases/update-collection/update-collection.dto'
-import CreateCollectionDTO from '@core/use-cases/create-collection/create-collection.dto'
-import DeleteCollectionsDTO from '@core/use-cases/delete-collection/delete-collection.dto'
 import ShowCollectionsDTO from '@core/use-cases/show-collection/show-collection.dto'
 import { useViewStore } from '@modules/view/store'
 import { useItemStore } from '@modules/item/store'
@@ -58,7 +55,7 @@ export const useStore = defineStore('collection', () => {
         return response.data
     }
 
-    async function update(id: string, payload: Partial<Collection>) {
+    async function update(id: string, payload: Partial<Collection>, release = true) {
         const index = collections.value.findIndex((c) => c.id === id)
 
         const response = await useCase('update-collection', {
@@ -71,7 +68,7 @@ export const useStore = defineStore('collection', () => {
             collections.value.splice(index, 1, response.data)
         }
 
-        releaseCollection(id)
+        if (release) releaseCollection(id)
 
         return response.data
     }

packages/desktop/modules/collection/store.ts

@@ -14,16 +14,11 @@
         "search": "",
         "filters": [],
         "columns": [
-            {
-                "id": "_actions_left",
-                "label": "#",
-                "width": 43
-            },
             {
                 "label": "Done",
                 "id": "47dcb1b3-4895-4642-a9f9-c23b0d9b3331",
                 "options": [],
-                "width": 92
+                "width": 52
             },
             {
                 "label": "Name",