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

feat: version 1.0.0 (#21)

Browse Source
This commit is contained in:
Arash
2023-09-20 19:47:07 +03:00
committed by GitHub
parent 033380e051
commit 431d3784fe
42 changed files with 3654 additions and 3219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/app.vue
View File

@ -5,6 +5,7 @@ import './styles/global.css'
<template>
<Html>
<Body h-screen>
<Notification />
<NuxtLayout>
<NuxtPage />
</NuxtLayout>

58
client/components/Connection.vue
View File

@ -1,33 +1,53 @@
<script lang="ts" setup>
defineProps({
connection: {
import { computed } from 'vue'
const props = defineProps({
code: {
type: Number,
default: 0,
},
})
const connections = [
{
color: 'text-red-5',
border: 'border-red-5',
status: 'Not Connected',
description: 'Please Check Your Connection!',
},
{
color: 'text-green-5',
border: 'border-green-5',
status: 'Connected',
description: 'Everything is Working Perfectly!',
},
{
color: 'text-yellow-5',
border: 'border-yellow-5',
status: 'Connecting',
description: 'Just a Moment, We"re Getting There!',
},
{
color: 'text-orange-5',
border: 'border-orange-5',
status: 'Disconnecting',
description: 'Preparing to Safely Disconnect!',
},
]
const connection = computed(() => connections[props.code])
</script>
<template>
<NPanelGrids>
<div flex="~ gap-2" animate-pulse items-center text-yellow>
<NIcon icon="carbon-flow-connection" />
Please check your mongodb connection
</div>
<div flex="~ gap-2" items-center text-light>
Your current connection is: {{ connection }}
<div flex="~ gap-2" animate-pulse items-center text-lg font-bold :class="connection.color">
({{ code }}):
{{ connection.status }},
{{ connection.description }}
</div>
<div absolute bottom-10 left-10 right-10 flex justify-around>
<NCard p2 text-red-5>
0: Not connected
</NCard>
<NCard p2 text-green-5>
1: Connected
</NCard>
<NCard p2 text-yellow-5>
2: Connecting
</NCard>
<NCard p2 text-orange-5>
3: Disconnecting
<NCard v-for="item, index of connections" :key="index" p2 :class="[item.color, item.status === connection.status ? item.border : '']">
({{ index }}): {{ item.status }}
</NCard>
</div>
</NPanelGrids>

15
client/components/CreateResource.vue
View File

@ -1,4 +1,8 @@
<script lang="ts" setup>
import { useRouter } from 'nuxt/app'
import { computed, reactive, ref } from 'vue'
import { rpc } from '../composables/rpc'
interface ColumnInterface {
name: string
type: string
@ -115,10 +119,8 @@ const convertedBread = computed(() => {
const formattedFields = computed(() => {
return fields.value.map((field) => {
for (const [key, value] of Object.entries(field)) {
if (!value) {
// @ts-expect-error - no need for type checking
if (!value)
delete field[key]
}
}
return field
@ -126,7 +128,7 @@ const formattedFields = computed(() => {
})
async function generate() {
await rpc.generateResource(
await rpc.value?.generateResource(
{
name: collection.value,
fields: schema.value ? formattedFields.value : undefined,
@ -142,6 +144,7 @@ async function generate() {
const toggleSchema = computed({
get() {
if (hasBread.value)
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
return schema.value = true
return schema.value
},
@ -247,7 +250,7 @@ const toggleSchema = computed({
</div>
<div flex justify-center gap2>
<NIconButton icon="carbon-add" n="cyan" @click="addField(index)" />
<NIconButton icon="carbon-delete" n="red" @click="removeField(index)" />
<NIconButton icon="carbon-trash-can" n="red" @click="removeField(index)" />
</div>
</div>
</div>
@ -257,5 +260,3 @@ const toggleSchema = computed({
</NButton>
</div>
</template>
<style></style>

48
client/components/DatabaseDetail.vue
View File

@ -1,4 +1,9 @@
<script lang="ts" setup>
import { computed, reactive, ref, watch } from 'vue'
import { computedAsync } from '@vueuse/core'
import { rpc } from '../composables/rpc'
import { useCopy } from '../composables/editor'
const props = defineProps({
collection: {
type: String,
@ -10,19 +15,19 @@ const props = defineProps({
const pagination = reactive({ limit: 20, page: 1 })
const countDocuments = computedAsync(async () => {
return await rpc.countDocuments(props.collection)
return await rpc.value?.countDocuments(props.collection)
})
const documents = computedAsync(async () => {
return await rpc.listDocuments(props.collection, pagination)
return await rpc.value?.listDocuments(props.collection, pagination)
})
watch(pagination, async () => {
documents.value = await rpc.listDocuments(props.collection, pagination)
documents.value = await rpc.value?.listDocuments(props.collection, pagination)
})
const schema = computedAsync<any>(async () => {
return await rpc.resourceSchema(props.collection)
return await rpc.value?.resourceSchema(props.collection)
})
const fields = computed(() => {
@ -79,7 +84,9 @@ function editDocument(document: any) {
}
async function saveDocument(document: any, create = true) {
const method = create ? rpc.createDocument : rpc.updateDocument
const method = create ? rpc.value?.createDocument : rpc.value?.updateDocument
if (!method)
return
const newDocument = await method(props.collection, document)
// TODO: show toast
if (newDocument?.error)
@ -87,7 +94,7 @@ async function saveDocument(document: any, create = true) {
if (create) {
if (!documents.value.length) {
documents.value = await rpc.listDocuments(props.collection, pagination)
documents.value = await rpc.value?.listDocuments(props.collection, pagination)
return discardEditing()
}
documents.value.push({ _id: newDocument.insertedId, ...document })
@ -105,7 +112,7 @@ function discardEditing() {
}
async function deleteDocument(document: any) {
const newDocument = await rpc.deleteDocument(props.collection, document._id)
const newDocument = await rpc.value?.deleteDocument(props.collection, document._id)
// TODO: show toast
if (newDocument.deletedCount === 0)
return
@ -170,17 +177,17 @@ const copy = useCopy()
{{ document[field] }}
</span>
</td>
<td class="actions">
<td>
<div flex justify-center gap2 class="group">
<template v-if="editing && selectedDocument._id === document._id">
<NIconButton icon="carbon-save" @click="saveDocument(selectedDocument, false)" />
<NIconButton icon="carbon-close" @click="discardEditing" />
<NIconButton title="Save" icon="carbon-save" @click="saveDocument(selectedDocument, false)" />
<NIconButton title="Cancel" icon="carbon-close" @click="discardEditing" />
</template>
<template v-else>
<NIconButton icon="carbon-edit" @click="editDocument(document)" />
<NIconButton icon="carbon-delete" @click="deleteDocument(document)" />
<NIconButton icon="carbon-document-multiple-02" @click="saveDocument(document)" />
<NIconButton absolute right-4 opacity-0 group-hover="opacity-100" transition-all icon="carbon-copy" @click="copy(JSON.stringify(document))" />
<NIconButton title="Edit" icon="carbon-edit" @click="editDocument(document)" />
<NIconButton title="Delete" icon="carbon-trash-can" @click="deleteDocument(document)" />
<NIconButton title="Duplicate" icon="carbon-document-multiple-02" @click="saveDocument(document)" />
<NIconButton title="Copy" n="xs" absolute right-4 opacity-0 group-hover="opacity-100" transition-all icon="carbon-copy" @click="copy(JSON.stringify(document))" />
</template>
</div>
</td>
@ -190,14 +197,14 @@ const copy = useCopy()
<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(selectedDocument)" />
<NIconButton icon="carbon-close" @click="discardEditing" />
<td flex="~ justify-center gap2">
<NIconButton title="Save" icon="carbon-save" @click="saveDocument(selectedDocument)" />
<NIconButton title="Cancel" icon="carbon-close" @click="discardEditing" />
</td>
</tr>
</tbody>
</table>
<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 />
No documents found
</div>
@ -205,11 +212,6 @@ const copy = useCopy()
</template>
<style lang="scss">
// TODO:
.actions .n-icon {
margin: 0;
}
table {
table-layout: fixed;
tr {

7
client/components/DrawerRight.vue → client/components/Drawer.vue
View File

@ -1,4 +1,7 @@
<script setup lang="ts">
import { ref } from 'vue'
import { onClickOutside, useElementSize } from '@vueuse/core'
const props = defineProps<{
modelValue?: boolean
navbar?: HTMLElement
@ -17,7 +20,7 @@ onClickOutside(el, () => {
if (props.modelValue && props.autoClose)
emit('close')
}, {
ignore: ['#open-drawer-right'],
ignore: ['a', 'button', 'summary', '[role="dialog"]'],
})
</script>
@ -41,7 +44,7 @@ export default {
ref="el"
border="l base"
flex="~ col gap-1"
fixed bottom-0 right-0 z-10 z-20 of-auto text-sm backdrop-blur-lg
absolute bottom-0 right-0 z-10 z-20 of-auto text-sm glass-effect
:style="{ top: `${top}px` }"
v-bind="$attrs"
>

34
client/components/Notification.vue Normal file
View File

@ -0,0 +1,34 @@
<script setup lang='ts'>
const show = ref(false)
const icon = ref<string | undefined>()
const text = ref<string | undefined>()
const classes = ref<string | undefined>()
provideNotificationFn((data) => {
text.value = data.message
icon.value = data.icon
classes.value = data.classes ?? 'text-green'
show.value = true
setTimeout(() => {
show.value = false
}, data.duration ?? 1500)
})
</script>
<template>
<div
fixed left-0 right-0 top-0 z-999 text-center
:class="show ? '' : 'pointer-events-none overflow-hidden'"
>
<div
border="~ base"
flex="~ inline gap2"
m-3 inline-block items-center rounded px-4 py-1 transition-all duration-300 bg-base
:style="show ? {} : { transform: 'translateY(-300%)' }"
:class="[show ? 'shadow' : 'shadow-none', classes]"
>
<div v-if="icon" :class="icon" />
<div>{{ text }}</div>
</div>
</div>
</template>

36
client/components/PanelLeftRight.vue
View File

@ -1,36 +0,0 @@
<script lang="ts" setup>
import { Pane, Splitpanes } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
const props = defineProps({
minLeft: {
type: Number,
default: 10,
},
minRight: {
type: Number,
default: 10,
},
maxLeft: {
type: Number,
default: 90,
},
maxRight: {
type: Number,
default: 90,
},
})
const size = ref(props.maxLeft)
</script>
<template>
<Splitpanes h-full of-hidden @resize="size = $event[0].size">
<Pane border="r base" h-full class="of-auto!" :size="size" :min-size="minLeft" :max-size="maxLeft">
<slot name="left" />
</Pane>
<Pane relative h-full class="of-auto!" :min-size="minRight">
<slot name="right" />
</Pane>
</Splitpanes>
</template>

33
client/components/SplitPanel.vue Normal file
View File

@ -0,0 +1,33 @@
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { Pane, Splitpanes } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
const props = defineProps<{
storageKey?: string
leftSize?: number
minSize?: number
}>()
const DEFAULT = 30
const state = ref()
const key = props.storageKey
const size = key
? computed({
get: () => state.value[key] || props.leftSize || DEFAULT,
set: (v) => { state.value[key] = v },
})
: ref(props.leftSize || DEFAULT)
</script>
<template>
<Splitpanes h-full of-hidden @resize="size = $event[0].size">
<Pane border="r base" h-full class="of-auto!" :size="size" :min-size="$slots.right ? (minSize || 10) : 100">
<slot name="left" />
</Pane>
<Pane v-if="$slots.right" relative h-full class="of-auto!" :min-size="minSize || 10">
<slot name="right" />
</Pane>
</Splitpanes>
</template>

14
client/composables/dialog.ts Normal file
View File

@ -0,0 +1,14 @@
let _showNotification: typeof showNotification
export function showNotification(data: {
message: string
icon?: string
classes?: string
duration?: number
}) {
_showNotification?.(data)
}
export function provideNotificationFn(fn: typeof showNotification) {
_showNotification = fn
}

6
client/composables/editor.ts
View File

@ -1,10 +1,14 @@
import { useClipboard } from '@vueuse/core'
import { showNotification } from './dialog'
export function useCopy() {
const clipboard = useClipboard()
return (text: string) => {
clipboard.copy(text)
// TODO: show toast
showNotification({
message: 'Copied to clipboard',
icon: 'carbon-copy',
})
}
}

67
client/composables/rpc.ts
View File

@ -1,59 +1,18 @@
import { createBirpc } from 'birpc'
import { parse, stringify } from 'flatted'
import { createHotContext } from 'vite-hot-client'
import { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'
import type { BirpcReturn } from 'birpc'
import { ref } from 'vue'
import type { NuxtDevtoolsClient } from '@nuxt/devtools-kit/dist/types'
import type { ClientFunctions, ServerFunctions } from '../../src/types'
import { WS_EVENT_NAME } from '../../src/constants'
import { RPC_NAMESPACE } from '../../src/constants'
export const wsConnecting = ref(true)
export const wsError = ref<any>()
export const wsConnectingDebounced = useDebounce(wsConnecting, 2000)
export const devtools = ref<NuxtDevtoolsClient>()
export const devtoolsRpc = ref<NuxtDevtoolsClient['rpc']>()
export const rpc = ref<BirpcReturn<ServerFunctions, ClientFunctions>>()
const connectPromise = connectVite()
// eslint-disable-next-line @typescript-eslint/ban-types
let onMessage: Function = () => {}
onDevtoolsClientConnected(async (client) => {
devtoolsRpc.value = client.devtools.rpc
devtools.value = client.devtools
export const clientFunctions = {
// will be added in app.vue
} as ClientFunctions
export const extendedRpcMap = new Map<string, any>()
export const rpc = createBirpc<ServerFunctions>(clientFunctions, {
post: async (d) => {
(await connectPromise).send(WS_EVENT_NAME, d)
},
on: (fn) => {
onMessage = fn
},
serialize: stringify,
deserialize: parse,
resolver(name, fn) {
if (fn)
return fn
if (!name.includes(':'))
return
const [namespace, fnName] = name.split(':')
return extendedRpcMap.get(namespace)?.[fnName]
},
onError(error, name) {
console.error(`[nuxt-devtools] RPC error on executing "${name}":`, error)
},
timeout: 120_000,
})
async function connectVite() {
const hot = await createHotContext()
if (!hot)
throw new Error('Unable to connect to devtools')
hot.on(WS_EVENT_NAME, (data) => {
onMessage(data)
rpc.value = client.devtools.extendClientRpc<ServerFunctions, ClientFunctions>(RPC_NAMESPACE, {
})
// TODO:
// hot.on('vite:connect', (data) => {})
// hot.on('vite:disconnect', (data) => {})
return hot
}
})

1
client/composables/state.ts Normal file
View File

@ -0,0 +1 @@
export const selectedCollection = useState('mongo:collection', () => '')

7
client/layouts/default.vue
View File

@ -1,10 +1,13 @@
<script lang="ts" setup>
const readyState = computedAsync(async () => await rpc.readyState())
import { computedAsync } from '@vueuse/core'
import { rpc } from '../composables/rpc'
const readyState = computedAsync(async () => await rpc.value?.readyState())
</script>
<template>
<div h-full of-auto>
<slot v-if="readyState === 1" />
<Connection v-else :connection="readyState" />
<Connection v-else :code="readyState" />
</div>
</template>

4
client/nuxt.config.ts
View File

@ -1,5 +1,5 @@
import { resolve } from 'pathe'
import { PATH_CLIENT } from '../src/constants'
import { CLIENT_PATH } from '../src/constants'
export default defineNuxtConfig({
ssr: false,
@ -22,6 +22,6 @@ export default defineNuxtConfig({
},
},
app: {
baseURL: PATH_CLIENT,
baseURL: CLIENT_PATH,
},
})

42
client/pages/index.vue
View File

@ -1,13 +1,17 @@
<script lang="ts" setup>
const route = useRoute()
import { computed, ref } from 'vue'
import { computedAsync } from '@vueuse/core'
import { useRouter } from 'nuxt/app'
import { rpc } from '../composables/rpc'
import { selectedCollection } from '../composables/state'
const router = useRouter()
const selectedCollection = ref()
const drawer = ref(false)
const search = ref('')
const collections = computedAsync(async () => {
return await rpc.listCollections()
return await rpc.value?.listCollections()
})
const filtered = computed(() => {
@ -16,28 +20,23 @@ const filtered = computed(() => {
return collections.value.filter((c: any) => c.name.toLowerCase().includes(search.value.toLowerCase()))
})
onMounted(() => {
if (route.query.table)
selectedCollection.value = route.query.table
})
async function dropCollection(table: any) {
await rpc.dropCollection(table.name)
collections.value = await rpc.listCollections()
await rpc.value?.dropCollection(table.name)
collections.value = await rpc.value?.listCollections()
if (selectedCollection.value === table.name) {
selectedCollection.value = undefined
selectedCollection.value = ''
router.push({ name: 'index' })
}
}
async function refresh() {
collections.value = await rpc.listCollections()
collections.value = await rpc.value?.listCollections()
drawer.value = false
}
</script>
<template>
<PanelLeftRight :min-left="13" :max-left="20">
<SplitPanel :min-left="13" :max-left="20">
<template #left>
<div px4>
<Navbar v-model:search="search" :placeholder="`${collections?.length ?? '-'} collection in total`" mt2>
@ -48,13 +47,20 @@ async function refresh() {
</div>
</Navbar>
<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">
<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>
<div flex gap2>
<NIconButton block n="red" icon="carbon-delete" @click="dropCollection(table)" />
<NIconButton block n="red" icon="carbon-trash-can" @click="dropCollection(table)" />
<!-- <NIconButton icon="carbon-overflow-menu-horizontal" /> -->
</div>
</NuxtLink>
@ -72,8 +78,8 @@ async function refresh() {
</div>
</div>
</template>
</PanelLeftRight>
<DrawerRight v-model="drawer" style="width: calc(80.5%);" auto-close @close="drawer = false">
</SplitPanel>
<Drawer v-model="drawer" style="width: calc(80.5%);" auto-close @close="drawer = false">
<CreateResource @refresh="refresh" />
</DrawerRight>
</Drawer>
</template>