Bootstrap ticket layout and vue app to edit ticket

CONVENTIONS.md

@@ -55,7 +55,7 @@ Arborescence:
     - person
     - personvendee
     - household_edit_metadata
-        - index.js
+        - index.ts
 ```
 
 ## Organisation des feuilles de styles

src/Bundle/ChillMainBundle/Resources/views/layout.html.twig

@@ -68,6 +68,7 @@
                     </div>
                 {% endif %}
 
+                {% block wrapping_content %}
                     {% block content %}
                         <div class="col-8 main_search">
                             {% if app.user.isAbsent %}
@@ -98,6 +99,7 @@
                         {% include '@ChillMain/Homepage/index.html.twig' %}
 
                     {% endblock %}
+                {% endblock %}
 
             </div>
         {% endblock %}

src/Bundle/ChillTicketBundle/chill.webpack.config.js

@@ -1,4 +1,4 @@
-// this file loads all assets from the Chill person bundle
 module.exports = function(encore, entries) {
-    encore.addEntry('ticket_app', __dirname + '/src/Resources/public/vuejs/TicketApp/index.ts');
+    encore.addEntry('mod_ticket', __dirname + '/src/Resources/public/module/ticket/index.ts');
+    encore.addEntry('vue_ticket_app', __dirname + '/src/Resources/public/vuejs/TicketApp/index.ts');
 };

src/Bundle/ChillTicketBundle/src/Controller/EditTicketController.php

@@ -14,13 +14,22 @@ namespace Chill\TicketBundle\Controller;
 use Chill\TicketBundle\Entity\Ticket;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Annotation\Route;
+use Twig\Environment;
 
 class EditTicketController
 {
+    public function __construct(
+        private Environment $templating,
+    ) {}
+
     #[Route('/{_locale}/ticket/ticket/{id}/edit', name: 'chill_ticket_ticket_edit')]
     public function __invoke(
         Ticket $ticket
     ): Response {
-        return new Response('ok');
+        return new Response(
+            $this->templating->render(
+                '@ChillTicket/Ticket/edit.html.twig',
+            )
+        );
     }
 }

src/Bundle/ChillTicketBundle/src/Resources/public/module/ticket/index.ts

@@ -0,0 +1 @@
+import './banner.scss';

src/Bundle/ChillTicketBundle/src/Resources/public/types.ts

@@ -0,0 +1,3 @@
+export interface Ticket {
+    id: number
+}

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<p>{{ $t('hello', {'name': 'Boris'})}}</p>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/i18n/messages.ts

@@ -0,0 +1,5 @@
+export const messages = {
+    fr: {
+        hello: "Bonjour {name}"
+    }
+};

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/index.ts

@@ -0,0 +1,17 @@
+import {createApp} from "vue";
+import { _createI18n } from "../../../../../../ChillMainBundle/Resources/public/vuejs/_js/i18n";
+import VueToast from 'vue-toast-notification';
+import 'vue-toast-notification/dist/theme-sugar.css';
+import {messages} from "./i18n/messages";
+import App from './App.vue';
+
+const i18n = _createI18n(messages)
+
+const _app = createApp({
+        template: '<app></app>',
+    })
+    .use(i18n)
+    .use(VueToast)
+    .component('app', App)
+    .mount('#ticketRoot');
+

src/Bundle/ChillTicketBundle/src/Resources/views/Banner/banner.html.twig

@@ -0,0 +1,24 @@
+<div class="banner banner-ticket">
+    <div id="header-ticket-main" class="header-name">
+        <div class="container-xxl">
+            <div class="row">
+                <div class="col-md-6 ps-md-5 ps-xxl-0">
+                    TODO
+                </div>
+
+                <div class="col-md-6">
+                    TODO
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="header-ticket-details" class="header-details">
+        <div class="container-xxl">
+            <div class="row justify-content-between">
+                <div class="col-md-12 ps-md-5 ps-xxl-0 container">
+                    <p>TODO</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/Bundle/ChillTicketBundle/src/Resources/views/Ticket/edit.html.twig

@@ -0,0 +1,15 @@
+{% extends '@ChillTicket/layout.html.twig' %}
+
+{% block css %}
+    {{ parent() }}
+    {{ encore_entry_link_tags('vue_ticket_app') }}
+{% endblock %}
+
+{% block js %}
+    {{ parent() }}
+    {{ encore_entry_script_tags('vue_ticket_app') }}
+{% endblock %}
+
+{% block content %}
+    <div id="ticketRoot"></div>
+{% endblock %}

src/Bundle/ChillTicketBundle/src/Resources/views/layout.html.twig

@@ -0,0 +1,14 @@
+{% extends '@ChillMain/layout.html.twig' %}
+
+
+{% block top_banner %}
+    {{ include('@ChillTicket/Banner/banner.html.twig') }}
+{% endblock %}
+
+{% block wrapping_content %}
+    <div class="row">
+        <div class="col-md-8 col-sm-12">
+            {% block content %}{% endblock %}
+        </div>
+    </div>
+{% endblock %}