fix(KAN-14): preserve template inheritance and project data

resources/js/pages/project-templates/Create.vue

@@ -6,31 +6,58 @@ import { useLocalization } from '@/composables/useLocalization';
 import AppLayout from '@/layouts/AppLayout.vue';
 import { index, show } from '@/routes/projects';
 import { create } from '@/routes/projects/templates';
+import {
+    create as createEmpty,
+    index as templatesIndex,
+} from '@/routes/project-templates';
 import type { BreadcrumbItem, ProjectTemplatesCreatePageProps } from '@/types';
 const props = defineProps<ProjectTemplatesCreatePageProps>();
 const { t } = useLocalization();
-const breadcrumbs = computed<BreadcrumbItem[]>(() => [
-    { title: t('navigation.projects'), href: index() },
-    { title: props.project.name, href: show(props.project.id) },
-    { title: t('projects.saveTemplate'), href: create(props.project.id) },
-]);
+const breadcrumbs = computed<BreadcrumbItem[]>(() =>
+    props.project
+        ? [
+              { title: t('navigation.projects'), href: index() },
+              { title: props.project.name, href: show(props.project.id) },
+              {
+                  title: t('projects.saveTemplate'),
+                  href: create(props.project.id),
+              },
+          ]
+        : [
+              { title: t('navigation.templates'), href: templatesIndex() },
+              { title: t('templates.createEmpty'), href: createEmpty() },
+          ],
+);
 </script>
 
 <template>
     <AppLayout :breadcrumbs="breadcrumbs">
-        <Head :title="t('templates.createTitle', { project: project.name })" />
+        <Head
+            :title="
+                project
+                    ? t('templates.createTitle', { project: project.name })
+                    : t('templates.createEmpty')
+            "
+        />
         <div class="p-page gap-page mx-auto grid w-full min-w-0 max-w-6xl">
             <header class="gap-stack grid">
                 <h1 class="text-headline-mobile md:text-headline break-words">
-                    {{ t('templates.createTitle', { project: project.name }) }}
+                    {{
+                        project
+                            ? t('templates.createTitle', {
+                                  project: project.name,
+                              })
+                            : t('templates.createEmpty')
+                    }}
                 </h1>
                 <p class="text-muted-foreground">
                     {{ t('templates.createDescription') }}
                 </p>
             </header>
             <ProjectTemplateForm
-                :key="project.id"
+                :key="project?.id ?? 'empty'"
                 :project="project"
+                :initial-configuration="initialConfiguration"
                 :copy-area-options="copyAreaOptions"
             />
         </div>

resources/js/pages/project-templates/Index.vue

@@ -18,7 +18,7 @@ import { useFormProtection } from '@/composables/useFormProtection';
 import { useLocalization } from '@/composables/useLocalization';
 import { useProjectTemplateAreas } from '@/composables/useProjectTemplateAreas';
 import AppLayout from '@/layouts/AppLayout.vue';
-import { destroy, edit, index } from '@/routes/project-templates';
+import { destroy, edit, index, create } from '@/routes/project-templates';
 import {
     create as createProject,
     index as projectsIndex,
@@ -80,9 +80,9 @@ function removeTemplate(): void {
                     </p>
                 </div>
                 <Button as-child class="shrink-0"
-                    ><Link :href="createProject()"
+                    ><Link :href="create()"
                         ><Plus aria-hidden="true" />{{
-                            t('projects.create')
+                            t('templates.createEmpty')
                         }}</Link
                     ></Button
                 >

resources/js/pages/projects/Show.vue

@@ -88,7 +88,10 @@ const settingsItems = computed(() =>
                     </p>
                 </div>
                 <Button
-                    v-if="$page.props.auth.permissions.projectCreate"
+                    v-if="
+                        $page.props.auth.permissions.projectCreate &&
+                        canManageAccess
+                    "
                     as-child
                     variant="outline"
                     class="self-start"