project creation request form working

src/views/Home.vue

@@ -1,9 +1,16 @@
 <template>
   <main class="flex flex-col" style="--row-gap: var(--space-32)">
     <Projects />
+    <ProjectRequestDialog v-if="isProjectRequestDialogOpen" />
+    <ProjectRequestButton @click="isProjectRequestDialogOpen = true" />
   </main>
 </template>
 
 <script setup>
 import Projects from "../components/Projects.vue";
+import ProjectRequestButton from "../components/ProjectRequestButton.vue";
+import ProjectRequestDialog from "../components/ProjectRequestDialog.vue";
+import { ref } from "vue";
+
+const isProjectRequestDialogOpen = ref(false);
 </script>

src/views/Kanban.vue

@@ -7,6 +7,12 @@
     <div class="kanban">
       <ProjectStep v-for="step in page.steps" :key="step" :step="step" />
     </div>
+
+    <DTLPanel v-if="isDTLPanelOpen" @close="isDTLPanelOpen = false" />
+    <DTLButton
+      v-if="page?.designToLight?.length > 0"
+      @click="openDTLPanel($event)"
+    />
   </main>
 </template>
 
@@ -16,9 +22,11 @@ import Header from "../components/project/Header.vue";
 import DialogWrapper from "../components/project/DialogWrapper.vue";
 import { usePageStore } from "../stores/page";
 import { storeToRefs } from "pinia";
-import { watch } from "vue";
+import { watch, ref } from "vue";
 import { useDialogStore } from "../stores/dialog";
 import { useRoute } from "vue-router";
+import DTLButton from "../components/design-to-light/DTLButton.vue";
+import DTLPanel from "../components/design-to-light/DTLPanel.vue";
 
 const { page } = storeToRefs(usePageStore());
 const dialog = useDialogStore();
@@ -29,6 +37,8 @@ if (route.query.dialog) {
   openDialog(route.query.dialog);
 }
 
+const isDTLPanelOpen = ref(false);
+
 watch(
   () => route.query.dialog,
   (targetStepSlug) => {
@@ -43,10 +53,16 @@ watch(
   }
 );
 
+// Functions
 function openDialog(targetStepSlug) {
   const targetStep = page.value.steps.find(
     (step) => step.slug === targetStepSlug
   );
   dialog.content = targetStep;
 }
+
+function openDTLPanel(event) {
+  isDTLPanelOpen.value = true;
+  event.stopImmediatePropagation();
+}
 </script>