72 lines
1.8 KiB
Vue
72 lines
1.8 KiB
Vue
<template>
|
|
<main class="flex flex-col items-stretch | w-full">
|
|
<Header :title="page.content.title" />
|
|
|
|
<DialogWrapper v-if="dialog.content" />
|
|
|
|
<div class="kanban">
|
|
<ProjectStep v-for="step in page.steps" :key="step" :step="step" />
|
|
</div>
|
|
|
|
<DTLPanel
|
|
v-if="isDTLPanelOpen"
|
|
:proposals="page.designToLight"
|
|
@close="isDTLPanelOpen = false"
|
|
/>
|
|
<DTLButton
|
|
v-if="page?.designToLight?.length > 0"
|
|
@click="toggleDTLPanel($event)"
|
|
/>
|
|
</main>
|
|
</template>
|
|
|
|
<script setup>
|
|
import ProjectStep from '../components/project/ProjectStep.vue';
|
|
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, 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();
|
|
|
|
const route = useRoute();
|
|
|
|
if (route.query.dialog) {
|
|
openDialog(route.query.dialog);
|
|
}
|
|
|
|
const isDTLPanelOpen = ref(false);
|
|
|
|
watch(
|
|
() => route.query.dialog,
|
|
(targetStepSlug) => {
|
|
if (targetStepSlug) {
|
|
const targetStep = page.value.steps.find(
|
|
(step) => step.slug === targetStepSlug
|
|
);
|
|
dialog.content = targetStep;
|
|
} else {
|
|
dialog.content = null;
|
|
}
|
|
}
|
|
);
|
|
|
|
// Functions
|
|
function openDialog(targetStepSlug) {
|
|
const targetStep = page.value.steps.find(
|
|
(step) => step.slug === targetStepSlug
|
|
);
|
|
dialog.content = targetStep;
|
|
}
|
|
|
|
function toggleDTLPanel(event) {
|
|
isDTLPanelOpen.value = !isDTLPanelOpen.value;
|
|
event.stopImmediatePropagation();
|
|
}
|
|
</script>
|