Files
speckle-server/packages/frontend-2/components/projects/AddDialog.vue
T
Kristaps Fabians Geikins 596312ab0e feat(frontend): personal project limit disclaimers & prompts (#4822)
* ProjectsAdd wrapper

* WorkspaceMoveProject wrapper added

* move wrapper finalized

* passing through location

* more cleanup

* model add wrapper

* permissions cleanup

* add invite wrapper

* vue-tippy bugfix

* ViewerLimitsDialog prep

* upgrade limit alert prep

* limit alerts

* movemanager fix

* new add flow

* slug update fix

* add model flow

* invites?

* some extra fixes

* move unmount fix?

* more fixes

* vue-tsc update

* style: remove h-32 for smaller screens

* vue-tsc parser fix

* prep for new viewer limits dialog

* updated viewer dialogs

* comment variant cleanup

* CR comments

---------

Co-authored-by: michalspeckle <michal@speckle.systems>
2025-05-28 12:12:18 +03:00

100 lines
2.4 KiB
Vue

<template>
<LayoutDialog v-model:open="open" max-width="sm" :title="step.title">
<ProjectsAddDialogWorkspace
v-if="step.id === DialogStepId.Workspace"
@workspace-selected="onWorkspaceSelected"
@canceled="onCanceled"
/>
<ProjectsAddDialogMetadata
v-else-if="step.id === DialogStepId.Metadata"
:workspace-id="workspaceId"
:support-go-back="!!previousStep"
@created="onCreated"
@canceled="onCanceled"
@back="goToPreviousStep"
/>
</LayoutDialog>
</template>
<script setup lang="ts">
import type { MaybeNullOrUndefined } from '@speckle/shared'
import { useMultiStepDialog } from '~/lib/common/composables/dialog'
const DialogStepId = {
Workspace: 'workspace',
Metadata: 'metadata'
} as const
type DialogStepId = (typeof DialogStepId)[keyof typeof DialogStepId]
const emit = defineEmits<{
(e: 'created'): void
}>()
const props = defineProps<{
workspaceId?: MaybeNullOrUndefined<string>
}>()
const workspaceId = ref(props.workspaceId)
const open = defineModel<boolean>('open', { required: true })
const {
public: { FF_PERSONAL_PROJECTS_LIMITS_ENABLED }
} = useRuntimeConfig()
const forcePickingWorkspace = computed(() => !!FF_PERSONAL_PROJECTS_LIMITS_ENABLED)
const { step, resetStep, goToNextStep, previousStep, goToPreviousStep } =
useMultiStepDialog<DialogStepId>({
steps: computed(() => [
{
id: DialogStepId.Workspace,
title: 'Choose workspace for a new project',
skippable: !forcePickingWorkspace.value
},
{
id: DialogStepId.Metadata,
title: 'Create a new project'
}
]),
resolveNextStep: () => {
return forcePickingWorkspace.value && !workspaceId.value
? DialogStepId.Workspace
: DialogStepId.Metadata
},
resolvePreviousStep: () => {
return forcePickingWorkspace.value
? DialogStepId.Workspace
: DialogStepId.Metadata
}
})
const onWorkspaceSelected = (workspace: { id: string }) => {
workspaceId.value = workspace.id
goToNextStep()
}
const onCanceled = () => {
open.value = false
}
const onCreated = () => {
emit('created')
open.value = false
}
watch(open, (newValue, oldValue) => {
if (newValue && !oldValue) {
workspaceId.value = props.workspaceId
resetStep()
}
})
watch(
() => props.workspaceId,
(newValue, oldValue) => {
if (newValue !== oldValue) {
workspaceId.value = props.workspaceId
resetStep()
}
}
)
</script>