WIP ticket page

Author: RICHARD-Quentin

app/src/components/ticket/leftPanel.vue

@@ -0,0 +1,20 @@
+<template lang="pug">
+q-card.bg-gray-4
+    q-card-section
+        .text-h6 Autres sections
+    q-separator(inset)
+    q-card-actions(align="center" vertical)
+        q-btn(color="primary" flat) Mes tickets
+        q-btn(color="primary" flat) Tout les tickets
+    q-separator(inset)
+    q-card-actions(align="center" vertical)
+        q-btn(v-for="projet in projets.data" color="primary" flat :key="projet.id" :to="`/ticket/${projet.id}`") {{ projet.name }}
+    
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, computed } from 'vue'
+import { useHttpApi } from '~/composables/useHttpApi';
+const { data: projets } = await useHttpApi(`core/project`)
+
+</script>

app/src/components/ticket/mainPanel.vue

@@ -0,0 +1,3 @@
+<template lang="pug">
+    
+</template>

app/src/components/ticket/rightPanel.vue

@@ -0,0 +1,25 @@
+<template lang="pug">
+q-list
+    q-expansion-item(label="Enveloppe")
+        q-card 
+            q-card-section
+                q-input
+    q-expansion-item(label="Informations")
+        q-card 
+            q-card-section
+                q-input
+    q-expansion-item(label="Cycle de vie")
+        q-card 
+            q-card-section
+                q-input
+span {{ ticketData }}
+</template>
+
+<script lang="ts" setup>
+defineProps({
+    ticketData: {
+        type: Object,
+        required: true
+    }
+})
+</script>

app/src/pages/ticket/[id].vue

@@ -1,15 +1,32 @@
 <template lang="pug">
-    
+.column
+    .row.q-gutter-lg.items-center
+        q-breadcrumbs 
+            q-breadcrumbs-el(to="/") Accueil
+            q-breadcrumbs-el(to="/tickets") Tickets
+            q-breadcrumbs-el(:label="ticketData.data.sequence")
+    .row.q-gutter-md.col-11
+        .col-2
+            tk-ticketLeftPanel
+        .col-6
+            tk-ticketMainPanel()
+        .col-3
+            tk-ticketRightPanel(:ticketData="ticketData.data")
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { useRoute } from 'nuxt/app';
+import { useHttpApi } from '~/composables/useHttpApi';
 
 const route = useRoute()
 const id = ref<string>('')
+const { data: ticketData } = await useHttpApi(`tickets/ticket/${route.params.id}`)
+
+onMounted(async () => {
 
-onMounted(() => {
-    id.value = route.params.id
 })
+
+
+
 </script>