Benjamin Ottensten
fc76fd9f4f
* Update header navigation Logo, share button color, breadcrumb colors, spacings * Updates to main button component Shadows, border on secondary button, less spacings to icons * Update spacings in dialog after bew button styling * Use secondary button in embed dialog * Update select inputs Spacing, icon, border on dropdown, smaller avatars * Update inputs to use the new styling * Various copy updates * Update icons Smaller icons, outline instead of solid, removed some icons that were unnecessary * Switch order of actions in Delete dialog * Update styling of inline New model action * Remove strange BG effect on comments component * Update styling of hide/isolate actions in viewer Was necessary after the button styling change. But new copy also makes it more usable. * Fix alignment issue in selection info panel * Align styling in Viewer panel component * Clean up measure usage tips A permanent "Right click to cancel measurement" tip isn't needed * Panel spacing * Update actions in the add model to viewer dialog * Update permissions input in new project dialog * Two minor things * Remove unnecessary flex classes --------- Co-authored-by: andrewwallacespeckle <andrew@speckle.systems>
89 lines
2.7 KiB
Vue
89 lines
2.7 KiB
Vue
<template>
|
|
<div>
|
|
<button
|
|
v-show="!showNewModelCard"
|
|
class="group flex w-full rounded-md items-center text-primary text-xs px-2 py-1 transition hover:bg-foundation-focus dark:hover:bg-primary-muted"
|
|
@click="showNewModelCard = true"
|
|
>
|
|
+
|
|
<span class="font-semibold ml-1">NEW</span>
|
|
</button>
|
|
<div
|
|
v-if="showNewModelCard"
|
|
class="w-full p-2 flex items-center rounded-md transition bg-foundation-focus dark:bg-primary-muted"
|
|
>
|
|
<form
|
|
class="flex items-center justify-between w-full space-x-2"
|
|
@submit="onSubmit"
|
|
>
|
|
<div class="flex-grow">
|
|
<FormTextInput
|
|
v-model="name"
|
|
name="name"
|
|
label="Model name"
|
|
placeholder="Model name"
|
|
auto-focus
|
|
color="foundation"
|
|
:rules="rules"
|
|
:disabled="anyMutationsLoading"
|
|
autocomplete="off"
|
|
/>
|
|
</div>
|
|
<div class="flex flex-wrap gap-1 sm:gap-2">
|
|
<FormButton submit :disabled="anyMutationsLoading">Save</FormButton>
|
|
<FormButton color="secondary" @click="showNewModelCard = false">
|
|
Cancel
|
|
</FormButton>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { useForm } from 'vee-validate'
|
|
import { useMutationLoading } from '@vue/apollo-composable'
|
|
import {
|
|
useCreateNewModel,
|
|
useModelNameValidationRules
|
|
} from '~~/lib/projects/composables/modelManagement'
|
|
import { trim } from 'lodash-es'
|
|
import { useMixpanel } from '~~/lib/core/composables/mp'
|
|
import { sanitizeModelName } from '~/lib/projects/helpers/models'
|
|
|
|
const props = defineProps<{
|
|
projectId: string
|
|
/**
|
|
* If creating a nested model, specify the prefix of the parent model here as it will be prefixed
|
|
* to whatever the user enters.
|
|
* E.g. if creating a model under "a/b", then put "a/b" here
|
|
*/
|
|
parentModelName?: string
|
|
}>()
|
|
|
|
const { handleSubmit } = useForm<{ name: string }>()
|
|
const anyMutationsLoading = useMutationLoading()
|
|
const rules = useModelNameValidationRules()
|
|
const createModel = useCreateNewModel()
|
|
const mp = useMixpanel()
|
|
|
|
const onSubmit = handleSubmit(async (formValues) => {
|
|
await createModel({
|
|
name: createFinalName(formValues.name),
|
|
projectId: props.projectId,
|
|
description: ''
|
|
})
|
|
mp.track('Branch Action', { type: 'action', name: 'create', mode: 'nested' })
|
|
showNewModelCard.value = false
|
|
name.value = ''
|
|
})
|
|
|
|
const showNewModelCard = ref(false)
|
|
const name = ref('')
|
|
|
|
const createFinalName = (name: string) => {
|
|
const userEnteredName = sanitizeModelName(trim(name, '/'))
|
|
const prefix = trim(props.parentModelName || '', '/')
|
|
return (prefix ? `${prefix}/` : '') + userEnteredName
|
|
}
|
|
</script>
|