feat: initial database ui
This commit is contained in:
arashsheyda
162
client/components/DatabaseDetail.vue
Normal file
162
client/components/DatabaseDetail.vue
Normal file
@ -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>
|
||||||
55
client/pages/index.vue
Normal file
55
client/pages/index.vue
Normal file
@ -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>
|
||||||
Reference in New Issue
Block a user