feat(gui-v2): show all/hide all integration, reload data after change

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue

@@ -23,7 +23,12 @@ const isAnyFieldHidden = computed(() => {
   // return meta?.fields?.some(field => field.hidden)
 })
 
-const { fields, loadViewColumns, filteredFieldList, filterQuery, showAll, hideAll, sync } = useViewColumns(activeView, meta)
+const { fields, loadViewColumns, filteredFieldList, filterQuery, showAll, hideAll, saveOrUpdate } = useViewColumns(
+  activeView,
+  meta,
+  false,
+  () => reloadDataHook?.trigger(),
+)
 
 watch(
   () => activeView?.value?.id,
@@ -328,7 +333,7 @@ export default {
             type="checkbox"
             class="mt-0 pt-0"
             @click.stop
-            @change="sync(field, i)"
+            @change="saveOrUpdate(field, i)"
           />
           <!--                        @change="saveOrUpdate(field, i)"> -->
           <!--            <template #label>
@@ -358,11 +363,11 @@ export default {
         </v-checkbox>
       </v-list-item> -->
       <v-list-item dense class="mt-2 list-btn mb-3">
-        <v-btn small class="elevation-0 grey--text" @click.stop="showAll">
+        <v-btn small class="elevation-0 grey--text text-sm text-capitalize" @click.stop="showAll">
           <!-- Show All -->
           {{ $t('general.showAll') }}
         </v-btn>
-        <v-btn small class="elevation-0 grey--text" @click.stop="hideAll">
+        <v-btn small class="elevation-0 grey--text text-sm text-capitalize" @click.stop="hideAll">
           <!-- Hide All -->
           {{ $t('general.hideAll') }}
         </v-btn>

packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenuItem.vue

@@ -1,35 +0,0 @@
-<script>
-import cell from '@/components/project/spreadsheet/mixins/cell'
-
-export default {
-  name: 'FieldsMenuItem',
-  mixins: [cell],
-  props: {
-    sqlUi: [Object, Function],
-    column: Object,
-  },
-}
-</script>
-
-<template>
-  <div>
-    <v-icon v-if="column.pk" color="warning" x-small class="mr-1"> mdi-key-variant </v-icon>
-    <v-icon v-else-if="uiDatatypeIcon" small class="mr-1">
-      {{ uiDatatypeIcon }}
-    </v-icon>
-
-    <v-icon v-else-if="isForeignKey" color="purple" small class="mr-1"> mdi-link-variant </v-icon>
-
-    <span v-else-if="isInt" class="font-weight-bold mr-1" style="font-size: 15px">#</span>
-    <v-icon v-else-if="isFloat" color="grey" class="mr-1 mt-n1"> mdi-decimal </v-icon>
-    <v-icon v-else-if="isDate" color="grey" small class="mr-1"> mdi-calendar </v-icon>
-    <v-icon v-else-if="isDateTime" color="grey" small class="mr-1"> mdi-calendar-clock </v-icon>
-    <v-icon v-else-if="isSet" color="grey" small class="mr-1"> mdi-checkbox-multiple-marked </v-icon>
-    <v-icon v-else-if="isEnum" color="grey" small class="mr-1"> mdi-radiobox-marked </v-icon>
-    <v-icon v-else-if="isBoolean" color="grey" small class="mr-1"> mdi-check-box-outline </v-icon>
-    <v-icon v-else-if="isString" color="grey" class=""> mdi-alpha-a </v-icon>
-    <v-icon v-else-if="isTextArea" color="grey" small class="mr-1"> mdi-card-text-outline </v-icon>
-  </div>
-</template>
-
-<style scoped></style>

packages/nc-gui-v2/composables/useViewColumns.ts

@@ -6,6 +6,7 @@ export default function (
   view: Ref<(GridType | FormType | GalleryType) & { id?: string }> | undefined,
   meta: Ref<TableType> | undefined,
   isPublic = false,
+  reloadData?: () => void,
 ) {
   const fields = ref<
     {
@@ -51,16 +52,25 @@ export default function (
     }
   }
 
-  const showAll = () => {}
-  const hideAll = () => {}
+  const showAll = async () => {
+    await $api.dbView.showAllColumn(view?.value?.id as string)
+    await loadViewColumns()
+    reloadData?.()
+  }
+  const hideAll = async () => {
+    await $api.dbView.hideAllColumn(view?.value?.id as string)
+    await loadViewColumns()
+    reloadData?.()
+  }
 
-  const sync = async (field: any, index: number) => {
+  const saveOrUpdate = async (field: any, index: number) => {
     if (field.id) {
       await $api.dbViewColumn.update(view?.value?.id as string, field.id, field)
     } else {
       if (fields.value) fields.value[index] = (await $api.dbViewColumn.create(view?.value?.id as string, field)) as any
     }
+    reloadData?.()
   }
 
-  return { fields, loadViewColumns, filteredFieldList, filterQuery, showAll, hideAll, sync }
+  return { fields, loadViewColumns, filteredFieldList, filterQuery, showAll, hideAll, saveOrUpdate }
 }