Merge pull request #3646 from nocodb/refactor/drawer-styles

packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue

@@ -21,10 +21,11 @@ interface Props {
   parentId?: string
   autoSave: boolean
   hookId?: string
+  showLoading?: boolean
   modelValue?: Filter[]
 }
 
-const { nested = false, parentId, autoSave = true, hookId = null, modelValue } = defineProps<Props>()
+const { nested = false, parentId, autoSave = true, hookId = null, modelValue, showLoading = true } = defineProps<Props>()
 
 const emit = defineEmits(['update:filtersLength'])
 
@@ -46,9 +47,7 @@ const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGr
   activeView,
   parentId,
   computed(() => autoSave),
-  () => {
-    reloadDataHook.trigger()
-  },
+  () => reloadDataHook.trigger(showLoading),
   modelValue || nestedFilters.value,
   !modelValue,
 )
@@ -134,8 +133,8 @@ defineExpose({
 
 <template>
   <div
-    class="p-6 menu-filter-dropdown bg-gray-50 !border"
-    :class="{ 'shadow-xl min-w-[430px] max-w-[630px] max-h-[max(80vh,500px)] overflow-auto': !nested, 'border-1 w-full': nested }"
+    class="p-4 menu-filter-dropdown bg-gray-50 !border mt-4"
+    :class="{ 'shadow min-w-[430px] max-w-[630px] max-h-[max(80vh,500px)] overflow-auto': !nested, 'border-1 w-full': nested }"
   >
     <div v-if="filters && filters.length" class="nc-filter-grid mb-2" @click.stop>
       <template v-for="(filter, i) in filters" :key="filter.id || i">

packages/nc-gui/components/smartsheet/Grid.vue

@@ -23,6 +23,7 @@ import {
   provide,
   reactive,
   ref,
+  useClipboard,
   useEventListener,
   useGridViewColumnWidth,
   useI18n,
@@ -96,6 +97,8 @@ const {
 
 const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view)
 
+const { copy } = useClipboard()
+
 onMounted(loadGridViewColumns)
 
 provide(IsFormInj, ref(false))
@@ -113,8 +116,15 @@ provide(ReadonlyInj, !hasEditPermission)
 const disableUrlOverlay = ref(false)
 provide(CellUrlDisableOverlayInj, disableUrlOverlay)
 
-reloadViewDataHook?.on(async () => {
+const showLoading = ref(true)
+
+reloadViewDataHook?.on(async (shouldShowLoading) => {
+  // set value if spinner should be hidden
+  showLoading.value = !!shouldShowLoading
   await loadData()
+
+  // reset to default (showing spinner on load)
+  showLoading.value = true
 })
 
 const skipRowRemovalOnCancel = ref(false)
@@ -179,8 +189,6 @@ const clearCell = async (ctx: { row: number; col: number }) => {
   await updateOrSaveRow(rowObj, columnObj.title)
 }
 
-const { copy } = useClipboard()
-
 const makeEditable = (row: Row, col: ColumnType) => {
   if (!hasEditPermission || editEnabled || isView) {
     return
@@ -373,10 +381,12 @@ onBeforeUnmount(async () => {
 
 <template>
   <div class="flex flex-col h-full min-h-0 w-full">
-    <div v-if="isLoading" class="flex items-center justify-center h-full w-full">
-      <a-spin size="large" />
-    </div>
-    <div v-else class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull">
+    <general-overlay :model-value="isLoading" inline transition>
+      <div class="flex items-center justify-center h-full w-full">
+        <a-spin size="large" />
+      </div>
+    </general-overlay>
+    <div class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull">
       <a-dropdown
         v-model:visible="contextMenu"
         :trigger="isSqlView ? [] : ['contextmenu']"

packages/nc-gui/components/webhook/Drawer.vue

@@ -32,12 +32,13 @@ async function editHook(hook: Record<string, any>) {
     class="nc-drawer-webhook"
     @keydown.esc="vModel = false"
   >
-    <a-layout class="">
+    <a-layout>
       <a-layout-content class="px-10 py-5 scrollbar-thin-primary">
         <WebhookEditor v-if="editOrAdd" ref="webhookEditorRef" @back-to-list="editOrAdd = false" />
         <WebhookList v-else @edit="editHook" @add="editOrAdd = true" />
       </a-layout-content>
-      <a-layout-footer class="!bg-white flex">
+
+      <a-layout-footer class="!bg-white border-t flex">
         <a-button v-e="['e:hiring']" class="mx-auto mb-4" href="https://angel.co/company/nocodb" target="_blank" size="large">
           🚀 {{ $t('labels.weAreHiring') }}! 🚀
         </a-button>

packages/nc-gui/components/webhook/Editor.vue

@@ -606,7 +606,13 @@ onMounted(async () => {
         <a-col :span="24">
           <a-card>
             <a-checkbox v-model:checked="hook.condition" class="nc-check-box-hook-condition">On Condition</a-checkbox>
-            <SmartsheetToolbarColumnFilter v-if="hook.condition" ref="filterRef" :auto-save="false" :hook-id="hook.id" />
+            <SmartsheetToolbarColumnFilter
+              v-if="hook.condition"
+              ref="filterRef"
+              :auto-save="false"
+              :show-loading="false"
+              :hook-id="hook.id"
+            />
           </a-card>
         </a-col>
       </a-row>

packages/nc-gui/composables/useViewFilters.ts

@@ -150,7 +150,7 @@ export function useViewFilters(
   }
 
   const saveOrUpdate = async (filter: Filter, i: number, force = false) => {
-    if (!view?.value) return
+    if (!view.value) return
 
     try {
       if (nestedMode.value) {

packages/nc-gui/context/index.ts

@@ -21,7 +21,9 @@ export const IsLockedInj: InjectionKey<Ref<boolean>> = Symbol('is-locked-injecti
 export const CellValueInj: InjectionKey<Ref<any>> = Symbol('cell-value-injection')
 export const ActiveViewInj: InjectionKey<Ref<ViewType>> = Symbol('active-view-injection')
 export const ReadonlyInj: InjectionKey<boolean> = Symbol('readonly-injection')
-export const ReloadViewDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-view-data-injection')
+
+/** when bool is passed, it indicates if a loading spinner should be visible while reloading */
+export const ReloadViewDataHookInj: InjectionKey<EventHook<boolean | void>> = Symbol('reload-view-data-injection')
 export const ReloadRowDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-row-data-injection')
 export const OpenNewRecordFormHookInj: InjectionKey<EventHook<void>> = Symbol('open-new-record-form-injection')
 export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')