Files
nocodb/packages/nc-gui/components/dashboard/TreeView/CreateProject/Menu.vue

70 lines
2.4 KiB
Vue

<script lang="ts" setup>
interface Props {
visible: boolean
variant: 'modal' | 'dropdown'
baseCreateMode: NcBaseCreateMode | null
}
const props = withDefaults(defineProps<Props>(), {
variant: 'dropdown',
})
const emits = defineEmits<{
(e: 'update:visible', value: boolean): void
(e: 'update:baseCreateMode', value: NcBaseCreateMode | null): void
(e: 'onSelect', mode: NcBaseCreateMode): void
}>()
const vVisible = useVModel(props, 'visible', emits)
const baseCreateMode = useVModel(props, 'baseCreateMode', emits)
const workspaceStore = useWorkspace()
const { navigateToTemplates } = workspaceStore
const { isTemplatesFeatureEnabled } = storeToRefs(workspaceStore)
const { isAiFeaturesEnabled } = useNocoAi()
const onClickOption = (mode: NcBaseCreateMode) => {
if (isTemplatesFeatureEnabled.value && mode === NcBaseCreateMode.FROM_TEMPLATE) {
vVisible.value = false
navigateToTemplates()
return
}
baseCreateMode.value = mode
}
onMounted(() => {
if (!isAiFeaturesEnabled.value && props.variant === 'modal') {
baseCreateMode.value = NcBaseCreateMode.FROM_SCRATCH
}
})
</script>
<template>
<NcMenu v-if="variant === 'dropdown'" variant="large" data-testid="nc-home-create-new-menu"
@click="vVisible = false">
<DashboardTreeViewCreateProjectMenuItem v-e="['c:base:create:scratch']" icon="plus" label="From Scratch"
subtext="Start with an empty base" @click="onClickOption(NcBaseCreateMode.FROM_SCRATCH)" />
<DashboardTreeViewCreateProjectMenuItem v-if="isAiFeaturesEnabled" v-e="['c:base:ai:create']"
icon="ncAutoAwesome" label="Build with AI" subtext="Pre-built structures for common use cases"
@click="onClickOption(NcBaseCreateMode.BUILD_WITH_AI)" />
</NcMenu>
<div v-else class="flex flex-row gap-6 flex-wrap max-w-[min(80vw,738px)] children:(!w-[230px] !max-w-[230px])">
<ProjectActionItem v-e="['c:base:create:scratch']" icon="plus" label="From Scratch"
subtext="Start with an empty base" @click="onClickOption(NcBaseCreateMode.FROM_SCRATCH)" />
<ProjectActionItem v-if="isAiFeaturesEnabled" v-e="['c:base:ai:create']" icon="ncAutoAwesome"
label="Build with AI" subtext="Pre-built structures for common use cases"
@click="onClickOption(NcBaseCreateMode.BUILD_WITH_AI)" />
</div>
</template>