feat: experimental generate resource
This commit is contained in:
arashsheyda
261
client/components/CreateResource.vue
Normal file
261
client/components/CreateResource.vue
Normal file
@ -0,0 +1,261 @@
|
||||
<script lang="ts" setup>
|
||||
interface ColumnInterface {
|
||||
name: string
|
||||
type: string
|
||||
required: boolean
|
||||
unique: boolean
|
||||
default: any
|
||||
}
|
||||
|
||||
const emit = defineEmits(['refresh'])
|
||||
const router = useRouter()
|
||||
|
||||
const schema = ref(true)
|
||||
const bread = reactive({
|
||||
browse: {
|
||||
active: true,
|
||||
type: 'index',
|
||||
},
|
||||
read: {
|
||||
active: true,
|
||||
type: 'show',
|
||||
by: '_id',
|
||||
},
|
||||
edit: {
|
||||
active: true,
|
||||
type: 'put',
|
||||
by: '_id',
|
||||
},
|
||||
add: {
|
||||
active: true,
|
||||
type: 'create',
|
||||
},
|
||||
delete: {
|
||||
active: true,
|
||||
type: 'delete',
|
||||
by: '_id',
|
||||
},
|
||||
})
|
||||
|
||||
const hasBread = computed({
|
||||
get() {
|
||||
return bread.browse.active || bread.read.active || bread.edit.active || bread.add.active || bread.delete.active
|
||||
},
|
||||
set(value: boolean) {
|
||||
bread.browse.active = value
|
||||
bread.read.active = value
|
||||
bread.edit.active = value
|
||||
bread.add.active = value
|
||||
bread.delete.active = value
|
||||
},
|
||||
})
|
||||
|
||||
const collection = ref('')
|
||||
const fields = ref<ColumnInterface[]>([
|
||||
{
|
||||
name: 'name',
|
||||
type: 'string',
|
||||
required: true,
|
||||
unique: false,
|
||||
default: '',
|
||||
},
|
||||
{
|
||||
name: 'slug',
|
||||
type: 'string',
|
||||
required: true,
|
||||
unique: true,
|
||||
default: '',
|
||||
},
|
||||
])
|
||||
|
||||
const allFields = computed(() => {
|
||||
return [{ name: '_id', type: 'ObjectId', required: true, unique: true, default: '' }, ...fields.value]
|
||||
})
|
||||
|
||||
const fieldsLabels = ['name', 'type', 'required', 'unique', 'default']
|
||||
const mongoTypes = [
|
||||
'string',
|
||||
'number',
|
||||
'boolean',
|
||||
'date',
|
||||
'object',
|
||||
'array',
|
||||
'ObjectId',
|
||||
]
|
||||
|
||||
function addField(index: number) {
|
||||
fields.value.splice(index + 1, 0, {
|
||||
name: '',
|
||||
type: 'string',
|
||||
required: false,
|
||||
unique: false,
|
||||
default: '',
|
||||
})
|
||||
}
|
||||
|
||||
function removeField(index: number) {
|
||||
fields.value.splice(index, 1)
|
||||
}
|
||||
|
||||
const convertedBread = computed(() => {
|
||||
const breads: any = []
|
||||
// add active breads
|
||||
// eslint-disable-next-line unused-imports/no-unused-vars
|
||||
for (const [key, value] of Object.entries(bread) as any) {
|
||||
if (value.active) {
|
||||
breads.push({
|
||||
type: value.type,
|
||||
by: value?.by,
|
||||
})
|
||||
}
|
||||
}
|
||||
return breads
|
||||
})
|
||||
|
||||
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
|
||||
delete field[key]
|
||||
}
|
||||
}
|
||||
|
||||
return field
|
||||
})
|
||||
})
|
||||
|
||||
async function generate() {
|
||||
await rpc.generateResource(
|
||||
{
|
||||
name: collection.value,
|
||||
fields: schema.value ? formattedFields.value : undefined,
|
||||
},
|
||||
convertedBread.value,
|
||||
).then(() => {
|
||||
emit('refresh')
|
||||
router.push(`/?table=${collection.value}`)
|
||||
})
|
||||
}
|
||||
|
||||
// TODO: remove this
|
||||
const toggleSchema = computed({
|
||||
get() {
|
||||
if (hasBread.value)
|
||||
return schema.value = true
|
||||
return schema.value
|
||||
},
|
||||
set(value: boolean) {
|
||||
schema.value = value
|
||||
if (!schema.value)
|
||||
return hasBread.value = false
|
||||
hasBread.value = true
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div relative h-full of-hidden>
|
||||
<div sticky top-0 px8 py4 n-bg-base>
|
||||
<div mb2 flex items-center>
|
||||
<span text-2xl font-bold mt1>
|
||||
<NCheckbox v-model="hasBread" n="green">
|
||||
BREAD
|
||||
|
|
||||
</NCheckbox>
|
||||
</span>
|
||||
<span flex gap4 mt2 ml2>
|
||||
<NCheckbox v-model="bread.browse.active" n="blue">
|
||||
Browse
|
||||
</NCheckbox>
|
||||
<div flex gap2>
|
||||
<NCheckbox v-model="bread.read.active" n="cyan">
|
||||
Read
|
||||
</NCheckbox>
|
||||
<NSelect v-if="bread.read.active" v-model="bread.read.by">
|
||||
<option v-for="field in allFields" :key="field.name" :value="field.name">
|
||||
{{ field.name }}
|
||||
</option>
|
||||
</NSelect>
|
||||
</div>
|
||||
<div flex gap2>
|
||||
<NCheckbox v-model="bread.edit.active" n="purple">
|
||||
Edit
|
||||
</NCheckbox>
|
||||
<NSelect v-if="bread.edit.active" v-model="bread.edit.by">
|
||||
<option v-for="field in allFields" :key="field.name" :value="field.name">
|
||||
{{ field.name }}
|
||||
</option>
|
||||
</NSelect>
|
||||
</div>
|
||||
<NCheckbox v-model="bread.add.active" n="green">
|
||||
Add
|
||||
</NCheckbox>
|
||||
<div flex gap2>
|
||||
<NCheckbox v-model="bread.delete.active" n="red">
|
||||
Delete
|
||||
</NCheckbox>
|
||||
<NSelect v-if="bread.delete.active" v-model="bread.delete.by">
|
||||
<option v-for="field in allFields" :key="field.name" :value="field.name">
|
||||
{{ field.name }}
|
||||
</option>
|
||||
</NSelect>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div flex gap4>
|
||||
<NTextInput v-model="collection" flex-auto placeholder="Collection name" />
|
||||
<NCheckbox v-model="toggleSchema" n="green">
|
||||
Generate Schema
|
||||
</NCheckbox>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="schema" px8 h-full of-auto>
|
||||
<div grid="~ cols-1" gap-2 mt4 mb4>
|
||||
<div grid="~ cols-6" text-center>
|
||||
<div v-for="label in fieldsLabels" :key="label">
|
||||
{{ label }}
|
||||
</div>
|
||||
<div>
|
||||
Actions
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(column, index) in fields" :key="index" grid="~ cols-6" items-center text-center gap4>
|
||||
<div>
|
||||
<NTextInput v-model="column.name" />
|
||||
</div>
|
||||
<div>
|
||||
<NSelect v-model="column.type">
|
||||
<option v-for="mongoType of mongoTypes" :key="mongoType" :value="mongoType">
|
||||
{{ mongoType }}
|
||||
</option>
|
||||
</NSelect>
|
||||
</div>
|
||||
<div>
|
||||
<NCheckbox v-model="column.required" n="green" />
|
||||
</div>
|
||||
<div>
|
||||
<NCheckbox v-model="column.unique" n="cyan" />
|
||||
</div>
|
||||
<div>
|
||||
<NTextInput v-if="column.type === 'string'" v-model="column.default" type="string" n="orange" />
|
||||
<NTextInput v-else-if="column.type === 'number'" v-model="column.default" type="number" n="orange" />
|
||||
<NCheckbox v-else-if="column.type === 'boolean'" v-model="column.default" n="orange" />
|
||||
<NTextInput v-else-if="column.type === 'date'" v-model="column.default" type="date" n="orange" />
|
||||
<NTextInput v-else-if="column.type === 'ObjectId'" placeholder="no-default" disabled n="orange" />
|
||||
<NTextInput v-else v-model="column.default" n="orange" />
|
||||
</div>
|
||||
<div flex justify-center gap2>
|
||||
<NIconButton icon="carbon-add" n="cyan" @click="addField(index)" />
|
||||
<NIconButton icon="carbon-delete" n="red" @click="removeField(index)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<NButton absolute right-8 bottom-8 px8 py2 icon="carbon-magic-wand-filled" n="green" @click="generate">
|
||||
Create
|
||||
</NButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style></style>
|
||||
Reference in New Issue
Block a user