gitea_admin/nuxt-mongoose
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: ui

Browse Source
This commit is contained in:
arashsheyda
2023-04-21 13:27:43 +03:00
parent c2fc88292f
commit 2234826810
2 changed files with 98 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
client/components/DatabaseDetail.vue
View File

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

52
client/pages/index.vue
View File

@ -24,32 +24,30 @@ onMounted(() => {
</script> </script>
<template> <template>
<div h-full> <PanelLeftRight :min-left="13" :max-left="20">
<PanelLeftRight :min-left="13" :max-left="20"> <template #left>
<template #left> <div py1 px4>
<div py1 px4> <div flex items-center p2>
<div flex items-center p2> <!-- TODO: -->
<!-- TODO: --> <NIconButton w-full mb2 icon="carbon-reset" title="Refresh" />
<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-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" />
<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> </div>
</template> <NTextInput v-model="search" w-full p2 mb2 :placeholder="`${collections?.length ?? '-'} collection in total`" icon="carbon-search" />
<template #right> <div grid gird-cols-1 my2 mx1>
<DatabaseDetail v-if="selectedCollection" :collection="selectedCollection" /> <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">
</template> <span>
</PanelLeftRight> <NIcon icon="carbon-db2-database" />
</div> {{ 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> </template>