From 22348268100cb93268546edee7b355b726517c16 Mon Sep 17 00:00:00 2001
From: arashsheyda <sheidaeearash1999@gmail.com>
Date: Fri, 21 Apr 2023 13:27:43 +0300
Subject: [PATCH] chore: ui

---
 client/components/DatabaseDetail.vue | 124 ++++++++++++++++-----------
 client/pages/index.vue               |  52 ++++++-----
 2 files changed, 98 insertions(+), 78 deletions(-)

diff --git a/client/components/DatabaseDetail.vue b/client/components/DatabaseDetail.vue
index 8e57b53..79e9ba1 100644
--- a/client/components/DatabaseDetail.vue
+++ b/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,61 +79,60 @@ 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 }">
-        <thead>
-          <tr>
-            <th v-for="field of fields" :key="field" text-start>
-              {{ field }}
-            </th>
-            <th text-center>
-              Actions
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="document in documents" :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>
+    </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>
+            {{ field }}
+          </th>
+          <th text-center>
+            Actions
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <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'">
+            </template>
+            <span v-else>
+              {{ document[field] }}
+            </span>
+          </td>
+          <td class="actions">
+            <div flex justify-center gap2>
               <template v-if="editing && selectedDocument._id === document._id">
-                <input v-model="selectedDocument[field]" :disabled="field === '_id'">
+                <NIconButton icon="carbon-save" @click="updateDocument" />
+                <NIconButton icon="carbon-close" @click="discardEditing" />
               </template>
-              <span v-else>
-                {{ document[field] }}
-              </span>
-            </td>
-            <td class="actions">
-              <div flex justify-center gap2>
-                <template v-if="editing && selectedDocument._id === document._id">
-                  <NIconButton icon="carbon-save" @click="updateDocument" />
-                  <NIconButton icon="carbon-close" @click="discardEditing" />
-                </template>
-                <template v-else>
-                  <NIconButton icon="carbon-edit" @click="editDocument(document)" />
-                  <NIconButton icon="carbon-delete" @click="deleteDocument(document)" />
-                </template>
-              </div>
-            </td>
-          </tr>
-          <tr v-if="editing && !selectedDocument?._id" :class="{ isEditing: editing && !selectedDocument?._id }">
-            <td v-for="field of fields" :key="field">
-              <input v-if="field !== '_id'" v-model="selectedDocument[field]" :placeholder="field">
-              <input v-else placeholder="ObjectId(_id)" disabled>
-            </td>
-            <td flex justify-center gap2 class="actions">
-              <NIconButton icon="carbon-save" @click="saveDocument" />
-              <NIconButton icon="carbon-close" @click="discardEditing" />
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </template>
+              <template v-else>
+                <NIconButton icon="carbon-edit" @click="editDocument(document)" />
+                <NIconButton icon="carbon-delete" @click="deleteDocument(document)" />
+              </template>
+            </div>
+          </td>
+        </tr>
+        <tr v-if="editing && !selectedDocument?._id" :class="{ isEditing: editing && !selectedDocument?._id }">
+          <td v-for="field of fields" :key="field">
+            <input v-if="field !== '_id'" v-model="selectedDocument[field]" :placeholder="field">
+            <input v-else placeholder="ObjectId(_id)" disabled>
+          </td>
+          <td flex justify-center gap2 class="actions">
+            <NIconButton icon="carbon-save" @click="saveDocument" />
+            <NIconButton icon="carbon-close" @click="discardEditing" />
+          </td>
+        </tr>
+      </tbody>
+    </table>
     <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;
+        }
+      }
     }
   }
 }
diff --git a/client/pages/index.vue b/client/pages/index.vue
index f2a3f26..2f6aba0 100644
--- a/client/pages/index.vue
+++ b/client/pages/index.vue
@@ -24,32 +24,30 @@ onMounted(() => {
 </script>
 
 <template>
-  <div h-full>
-    <PanelLeftRight :min-left="13" :max-left="20">
-      <template #left>
-        <div py1 px4>
-          <div flex items-center p2>
-            <!-- TODO: -->
-            <NIconButton w-full mb2 icon="carbon-reset" title="Refresh" />
-            <NIconButton w-full mb2 icon="carbon-data-base" title="Connection Name" :class="connected ? 'text-green-5' : 'text-orange-5'" />
-            <NIconButton w-full mb2 icon="carbon-add" title="Create Table" @click="drawer = !drawer" />
-          </div>
-          <NTextInput v-model="search" w-full p2 mb2 :placeholder="`${collections?.length ?? '-'} collection in total`" icon="carbon-search" />
-          <div grid gird-cols-1 my2 mx1>
-            <NuxtLink v-for="table in filtered" :key="table.name" :to="{ name: 'index', query: { table: table.name } }" flex justify-between p2 my1 hover-bg-green hover-bg-opacity-5 hover-text-green rounded-lg :class="{ 'bg-green bg-opacity-5 text-green': selectedCollection === table.name }" @click="selectedCollection = table.name">
-              <span>
-                <NIcon icon="carbon-db2-database" />
-                {{ table.name }}
-              </span>
-              <!-- TODO: -->
-              <NIconButton icon="carbon-overflow-menu-horizontal" />
-            </NuxtLink>
-          </div>
+  <PanelLeftRight :min-left="13" :max-left="20">
+    <template #left>
+      <div py1 px4>
+        <div flex items-center p2>
+          <!-- TODO: -->
+          <NIconButton w-full mb2 icon="carbon-reset" title="Refresh" />
+          <NIconButton w-full mb2 icon="carbon-data-base" title="Connection Name" :class="connected ? 'text-green-5' : 'text-orange-5'" />
+          <NIconButton w-full mb2 icon="carbon-add" title="Create Table" @click="drawer = !drawer" />
         </div>
-      </template>
-      <template #right>
-        <DatabaseDetail v-if="selectedCollection" :collection="selectedCollection" />
-      </template>
-    </PanelLeftRight>
-  </div>
+        <NTextInput v-model="search" w-full p2 mb2 :placeholder="`${collections?.length ?? '-'} collection in total`" icon="carbon-search" />
+        <div grid gird-cols-1 my2 mx1>
+          <NuxtLink v-for="table in filtered" :key="table.name" :to="{ name: 'index', query: { table: table.name } }" flex justify-between p2 my1 hover-bg-green hover-bg-opacity-5 hover-text-green rounded-lg :class="{ 'bg-green bg-opacity-5 text-green': selectedCollection === table.name }" @click="selectedCollection = table.name">
+            <span>
+              <NIcon icon="carbon-db2-database" />
+              {{ table.name }}
+            </span>
+            <!-- TODO: -->
+            <NIconButton icon="carbon-overflow-menu-horizontal" />
+          </NuxtLink>
+        </div>
+      </div>
+    </template>
+    <template #right>
+      <DatabaseDetail v-if="selectedCollection" :collection="selectedCollection" />
+    </template>
+  </PanelLeftRight>
 </template>