chore: ui

client/components/DatabaseDetail.vue

@@ -16,17 +16,33 @@ const fields = computed(() => {
   return []
 })
 
+const search = ref('')
 const editing = ref(false)
+const dbContainer = ref<HTMLElement>()
 const selectedDocument = ref()
 
+const filtered = computed(() => {
+  if (!search.value)
+    return documents.value
+  return documents.value.filter((document: any) => {
+    for (const field of fields.value) {
+      if (document[field].toString().toLowerCase().includes(search.value.toLowerCase()))
+        return true
+    }
+    return false
+  })
+})
+
 function addDocument() {
   editing.value = true
-  // add newDocument with fields as keys
   selectedDocument.value = {}
   for (const field of fields.value) {
     if (field !== '_id')
       selectedDocument.value[field] = ''
   }
+
+  const parent = dbContainer.value?.parentElement
+  parent?.scrollTo(0, parent.scrollHeight)
 }
 
 function editDocument(document: any) {
@@ -63,15 +79,15 @@ async function deleteDocument(document: any) {
 </script>
 
 <template>
-  <div w-full h-full p4>
-    <template v-if="documents?.length">
-      <div flex justify-between>
-        <div flex-auto />
+  <div ref="dbContainer">
+    <Navbar v-model:search="search" sticky top-0 p4 backdrop-blur z-10>
+      <template #actions>
         <NButton icon="carbon:add" n="green" @click="addDocument">
           Add Document
         </NButton>
-      </div>
-      <table w-full mt4 :class="{ 'editing-mode': editing }">
+      </template>
+    </Navbar>
+    <table v-if="documents?.length" w-full mb10 :class="{ 'editing-mode': editing }">
       <thead>
         <tr>
           <th v-for="field of fields" :key="field" text-start>
@@ -83,7 +99,7 @@ async function deleteDocument(document: any) {
         </tr>
       </thead>
       <tbody>
-          <tr v-for="document in documents" :key="document._id" :class="{ isEditing: editing && selectedDocument._id === document._id }">
+        <tr v-for="document in filtered" :key="document._id" :class="{ isEditing: editing && selectedDocument._id === document._id }">
           <td v-for="field of fields" :key="field" hover-bg-green hover-bg-opacity-5 hover-text-green cursor-pointer @dblclick="editDocument(document)">
             <template v-if="editing && selectedDocument._id === document._id">
               <input v-model="selectedDocument[field]" :disabled="field === '_id'">
@@ -117,7 +133,6 @@ async function deleteDocument(document: any) {
         </tr>
       </tbody>
     </table>
-    </template>
     <div v-else flex justify-center items-center h-full text-2xl>
       <NIcon icon="carbon-document" mr1 />
       No documents found
@@ -126,6 +141,7 @@ async function deleteDocument(document: any) {
 </template>
 
 <style lang="scss">
+// TODO:
 .actions .n-icon {
   margin: 0;
 }
@@ -192,6 +208,12 @@ td {
     }
     &.isEditing {
       opacity: 1;
+      color: #fff;
+      input {
+        &::placeholder {
+          color: #3ede80;
+        }
+      }
     }
   }
 }

client/pages/index.vue

@@ -24,7 +24,6 @@ onMounted(() => {
 </script>
 
 <template>
-  <div h-full>
   <PanelLeftRight :min-left="13" :max-left="20">
     <template #left>
       <div py1 px4>
@@ -51,5 +50,4 @@ onMounted(() => {
       <DatabaseDetail v-if="selectedCollection" :collection="selectedCollection" />
     </template>
   </PanelLeftRight>
-  </div>
 </template>