From 711d15926f79c658b9adbef3a3fa8194df8ed9a1 Mon Sep 17 00:00:00 2001
From: arashsheyda <sheidaeearash1999@gmail.com>
Date: Fri, 21 Apr 2023 12:17:38 +0300
Subject: [PATCH] feat: initial database ui

---
 client/components/DatabaseDetail.vue | 162 +++++++++++++++++++++++++++
 client/pages/index.vue               |  55 +++++++++
 2 files changed, 217 insertions(+)
 create mode 100644 client/components/DatabaseDetail.vue
 create mode 100644 client/pages/index.vue

diff --git a/client/components/DatabaseDetail.vue b/client/components/DatabaseDetail.vue
new file mode 100644
index 0000000..c0c44b0
--- /dev/null
+++ b/client/components/DatabaseDetail.vue
@@ -0,0 +1,162 @@
+<script lang="ts" setup>
+const props = defineProps({
+  collection: {
+    type: String,
+    required: true,
+  },
+})
+
+const documents = computedAsync(async () => {
+  return await rpc.listDocuments(props.collection)
+})
+
+const fields = computed(() => {
+  if (documents.value && documents.value.length > 0)
+    return Object.keys(documents.value[0])
+})
+
+const editing = ref(false)
+const selectedDocument = ref()
+
+function editDocument(document: any) {
+  if (editing.value)
+    return
+  editing.value = true
+  selectedDocument.value = { ...document }
+}
+
+async function saveDocument() {
+  // TODO: validate & show errors
+  await rpc.updateDocument(props.collection, selectedDocument.value)
+  editing.value = false
+  selectedDocument.value = undefined
+  documents.value = await rpc.listDocuments(props.collection)
+}
+
+function discardEditing() {
+  editing.value = false
+  selectedDocument.value = null
+}
+
+async function deleteDocument(document: any) {
+  rpc.deleteDocument(props.collection, document._id)
+  documents.value = await rpc.listDocuments(props.collection)
+}
+</script>
+
+<template>
+  <div w-full h-full p4>
+    <template v-if="fields?.length">
+      <div flex justify-between>
+        <div flex-auto />
+        <NButton icon="carbon:add" n="green" @click="drawer = !drawer">
+          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 v-if="editing && selectedDocument._id === document._id">
+                <input v-model="selectedDocument[field]">
+              </template>
+              <span v-else>
+                {{ document[field] }}
+              </span>
+            </td>
+            <td flex justify-center gap2 class="actions">
+              <template v-if="editing && selectedDocument._id === document._id">
+                <NIconButton icon="carbon-save" @click="saveDocument" />
+                <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>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </template>
+    <div v-else flex justify-center items-center h-full text-2xl>
+      <NIcon icon="carbon-document" mr1 />
+      No documents found
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.actions .n-icon {
+  margin: 0;
+}
+
+table {
+  table-layout: fixed;
+  tr {
+    width: 100%;
+    td, th {
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+  input {
+    border: none;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.7);
+    width: 100%;
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+th {
+  border-right: 1px solid #272727;
+  border-left: 1px solid #272727;
+  border-top: 1px solid #272727;
+  padding: 5px 10px;
+}
+
+td {
+  border: 1px solid #272727;
+  padding: 5px 10px;
+  color: rgba(255, 255, 255, 0.7);
+  &:hover {
+    color: #fff;
+  }
+}
+
+.editing-mode {
+  tr {
+    &:not(.isEditing) {
+      opacity: 0.3;
+      position: relative;
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: #000;
+        opacity: 0.3;
+      }
+    }
+    &.isEditing {
+      opacity: 1;
+    }
+  }
+}
+</style>
diff --git a/client/pages/index.vue b/client/pages/index.vue
new file mode 100644
index 0000000..496a182
--- /dev/null
+++ b/client/pages/index.vue
@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+const route = useRoute()
+
+const selectedCollection = ref()
+// TODO: check connection
+const connected = ref(true)
+const drawer = ref(false)
+const search = ref('')
+
+const collections = computedAsync(async () => {
+  return await rpc.listCollections()
+})
+
+const filtered = computed(() => {
+  if (!search.value)
+    return collections.value
+  return collections.value.filter((c: any) => c.name.toLowerCase().includes(search.value.toLowerCase()))
+})
+
+onMounted(() => {
+  if (route.query.table)
+    selectedCollection.value = route.query.table
+})
+</script>
+
+<template>
+  <div h-full>
+    <PanelLeftRight :min-left="13" :max-left="20">
+      <template #left>
+        <div py1 px2 border="r base">
+          <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>
+        </div>
+      </template>
+      <template #right>
+        <DatabaseDetail v-if="selectedCollection" :collection="selectedCollection" />
+      </template>
+    </PanelLeftRight>
+  </div>
+</template>