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 []
})
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;
}
}
}
}
}