fix: update ui

Author: arashsheyda

client/app/components/LoadingScreen.vue

@@ -190,7 +190,7 @@ const connection = computed(() => connections[code]!)
     </div>
 
     <div
-      v-if="info"
+      v-if="info?.authenticated"
       class="absolute top-10 left-10 hidden lg:block pointer-events-none text-[10px] text-white/20"
     >
       <p>DB: {{ info.name }}</p>

client/app/layouts/default.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import type { NavigationMenuItem, DropdownMenuItem } from '@nuxt/ui'
+import type { NavigationMenuItem } from '@nuxt/ui'
 import { computedAsync } from '@vueuse/core'
 import { rpc } from '../composables/rpc'
-import { useRoute, ref, computed, onMounted, watch, useRouter } from '#imports'
+import { useRoute, ref, computed, watch, useRouter } from '#imports'
 
 const collections = computedAsync(async () => await rpc.value?.listCollections() || [])
 
 const route = useRoute()
 const router = useRouter()
-// const toast = useToast()
 
 const open = ref(false)
 
@@ -29,11 +28,6 @@ const groups = computed(() => [
     label: 'Collections',
     items: links.value[0],
   },
-  {
-    id: 'actions',
-    label: 'Actions',
-    items: links.value[0],
-  },
   {
     id: 'code',
     label: 'Code',
@@ -57,41 +51,6 @@ watch(links, () => {
     }
   }
 }, { immediate: true })
-
-onMounted(async () => {
-//   const cookie = useCookie('cookie-consent')
-//   if (cookie.value === 'accepted') {
-//     return
-//   }
-
-//   toast.add({
-//     title: 'We use first-party cookies to enhance your experience on our website.',
-//     duration: 0,
-//     close: false,
-//     actions: [{
-//       label: 'Accept',
-//       color: 'neutral',
-//       variant: 'outline',
-//       onClick: () => {
-//         cookie.value = 'accepted'
-//       },
-//     }, {
-//       label: 'Opt out',
-//       color: 'neutral',
-//       variant: 'ghost',
-//     }],
-//   })
-})
-
-const items = [[{
-  label: 'New mail',
-  icon: 'i-lucide-send',
-  to: '/inbox',
-}, {
-  label: 'New customer',
-  icon: 'i-lucide-user-plus',
-  to: '/customers',
-}]] satisfies DropdownMenuItem[][]
 </script>
 
 <template>
@@ -155,13 +114,7 @@ const items = [[{
           </template>
 
           <template #right>
-            <UDropdownMenu :items="items">
-              <UButton
-                icon="i-lucide-plus"
-                size="md"
-                class="rounded-full"
-              />
-            </UDropdownMenu>
+            <slot name="actions" />
           </template>
         </UDashboardNavbar>
       </template>

client/app/pages/[...collection]/index.vue

@@ -229,6 +229,33 @@ function addDocument() {
       selectedDocument.value[field] = ''
   }
   // }
+
+  // Scroll to new document and focus on first field
+  setTimeout(() => {
+    const tableEl = tableRef.value?.$el as HTMLElement
+    if (tableEl) {
+      // Scroll to the bottom where the new row is
+      tableEl.scrollTop = tableEl.scrollHeight
+    }
+
+    // Focus on the first editable field
+    const firstField = fields.value.find(f => f !== '_id')
+    if (firstField && selectedDocument.value) {
+      const inputId = `${selectedDocument.value._id || 'new'}-${firstField}`
+      const input = document.getElementById(inputId) as HTMLInputElement
+      if (input) {
+        input.focus()
+      }
+      else {
+        // If no _id yet, try to find the first input in the editing row
+        setTimeout(() => {
+          const firstInput = document.querySelector('.custom-input input') as HTMLInputElement
+          if (firstInput)
+            firstInput.focus()
+        }, 100)
+      }
+    }
+  }, 100)
 }
 
 function editDocument(document: any) {
@@ -316,85 +343,92 @@ useEventListener(tableRef, 'scroll', updateShadow)
 </script>
 
 <template>
-  <div class="px-4 py-2 backdrop-blur z-10 flex items-center gap-4 border-b border-default">
-    <UInput
-      v-model="search"
-      placeholder="Search..."
-      class="flex-1"
-    />
-    <UButton
-      icon="carbon:add"
-      color="success"
-      @click="addDocument"
-    >
-      Add Document
-    </UButton>
-  </div>
-
-  <div
-    v-if="totalDocuments"
-    class="flex items-center px-4 py-2 border-b border-default"
-  >
-    <div class="opacity-50">
-      <span v-if="search">{{ filtered.length }} matched · </span>
-      <span>{{ documents?.length }} of {{ totalDocuments }} documents in total</span>
-    </div>
-    <div class="flex-auto" />
-    <div class="flex gap-2">
-      <select
-        v-if="pagination.limit !== 0"
-        v-model="pagination.page"
-        class="px-3 py-1.5 rounded border border-default bg-default"
+  <NuxtLayout>
+    <template #actions>
+      <UInput
+        v-model="search"
+        placeholder="Search..."
+        class="w-64"
+      />
+      <UButton
+        icon="carbon:add"
+        color="success"
+        @click="addDocument"
       >
-        <option
-          v-for="i in Math.ceil(totalDocuments / pagination.limit)"
-          :key="i"
-          :value="i"
+        Add Document
+      </UButton>
+    </template>
+
+    <div
+      v-if="totalDocuments"
+      class="flex items-center px-4 py-2 border-b border-default"
+    >
+      <div class="opacity-50">
+        <span v-if="search">{{ filtered.length }} matched · </span>
+        <span>{{ documents?.length }} of {{ totalDocuments }} documents in total</span>
+      </div>
+      <div class="flex-auto" />
+      <div class="flex gap-2">
+        <select
+          v-if="pagination.limit !== 0"
+          v-model="pagination.page"
+          class="px-3 py-1.5 rounded border border-default bg-default"
         >
-          page: {{ i }}
-        </option>
-      </select>
-      <select
-        v-model="pagination.limit"
-        class="px-3 py-1.5 rounded border border-default bg-default"
-      >
-        <option
-          v-for="i in [1, 2, 3, 4, 5]"
-          :key="i"
-          :value="i * 10"
+          <option
+            v-for="i in Math.ceil(totalDocuments / pagination.limit)"
+            :key="i"
+            :value="i"
+          >
+            page: {{ i }}
+          </option>
+        </select>
+        <select
+          v-model="pagination.limit"
+          class="px-3 py-1.5 rounded border border-default bg-default"
         >
-          show: {{ i * 10 }}
-        </option>
-        <option :value="0">
-          show all
-        </option>
-      </select>
+          <option
+            v-for="i in [1, 2, 3, 4, 5]"
+            :key="i"
+            :value="i * 10"
+          >
+            show: {{ i * 10 }}
+          </option>
+          <option :value="0">
+            show all
+          </option>
+        </select>
+      </div>
     </div>
-  </div>
-
-  <UTable
-    v-if="documents?.length || selectedDocument"
-    ref="tableRef"
-    v-model:column-pinning="columnPinning"
-    :data="tableData"
-    :columns="columns"
-    sticky
-    :ui="{
-      tr: editing ? 'data-[editing=true]:bg-elevated' : '',
-    }"
-  >
-    <template #_id-cell="{ row }">
-      ObjectId('{{ row.original._id }}')
-    </template>
-  </UTable>
-
-  <div
-    v-else
-    class="flex justify-center items-center h-full text-2xl"
-  >
-    <span class="mr-1">📄</span>
-    No documents found
-  </div>
+
+    <UTable
+      v-if="documents?.length || selectedDocument"
+      ref="tableRef"
+      v-model:column-pinning="columnPinning"
+      :data="tableData"
+      :columns="columns"
+      sticky
+      :ui="{
+        tr: editing ? 'data-[editing=true]:bg-elevated' : '',
+      }"
+    >
+      <template #_id-cell="{ row }">
+        <span v-if="row.original._id">
+          ObjectId('{{ row.original._id }}')
+        </span>
+        <span v-else>
+          ---
+        </span>
+      </template>
+    </UTable>
+
+    <div
+      v-else
+      class="flex justify-center items-center h-full text-2xl"
+    >
+      <span class="mr-1">📄</span>
+      No documents found
+    </div>
+  </NuxtLayout>
 </template>
 
 <style lang="scss">