Bootstrap ticket layout and vue app to edit ticket

This commit is contained in:
Julien Fastré 2024-04-17 11:34:42 +02:00
parent c8467df1b1
commit dd37427be1
Signed by: julienfastre
GPG Key ID: BDE2190974723FCB
13 changed files with 130 additions and 29 deletions

View File

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

View File

@ -68,35 +68,37 @@
</div> </div>
{% endif %} {% endif %}
{% block content %} {% block wrapping_content %}
<div class="col-8 main_search"> {% block content %}
{% if app.user.isAbsent %} <div class="col-8 main_search">
<div class="d-flex flex-row mb-5 alert alert-warning" role="alert"> {% if app.user.isAbsent %}
<p class="m-2">{{'absence.You are marked as being absent'|trans }}</p> <div class="d-flex flex-row mb-5 alert alert-warning" role="alert">
<span class="ms-auto"> <p class="m-2">{{'absence.You are marked as being absent'|trans }}</p>
<a class="btn btn-remove" title="Modifier" href="{{ path('chill_main_user_absence_index') }}">{{ 'absence.Unset absence'|trans }}</a> <span class="ms-auto">
</span> <a class="btn btn-remove" title="Modifier" href="{{ path('chill_main_user_absence_index') }}">{{ 'absence.Unset absence'|trans }}</a>
</div> </span>
{% endif %} </div>
<h2>{{ 'Search'|trans }}</h2> {% endif %}
<h2>{{ 'Search'|trans }}</h2>
<form action="{{ path('chill_main_search') }}" method="get"> <form action="{{ path('chill_main_search') }}" method="get">
<input class="form-control form-control-lg" name="q" type="search" placeholder="{{ 'Search persons, ...'|trans }}" /> <input class="form-control form-control-lg" name="q" type="search" placeholder="{{ 'Search persons, ...'|trans }}" />
<div class="text-center"> <div class="text-center">
<button type="submit" class="btn btn-lg btn-warning mt-3"> <button type="submit" class="btn btn-lg btn-warning mt-3">
<i class="fa fa-fw fa-search"></i> {{ 'Search'|trans }} <i class="fa fa-fw fa-search"></i> {{ 'Search'|trans }}
</button> </button>
<a class="btn btn-lg btn-misc mt-3" href="{{ path('chill_main_advanced_search_list') }}"> <a class="btn btn-lg btn-misc mt-3" href="{{ path('chill_main_advanced_search_list') }}">
<i class="fa fa-fw fa-search"></i> {{ 'Advanced search'|trans }} <i class="fa fa-fw fa-search"></i> {{ 'Advanced search'|trans }}
</a> </a>
</div> </div>
</form> </form>
</div> </div>
{# DISABLED {{ chill_widget('homepage', {} ) }} #} {# DISABLED {{ chill_widget('homepage', {} ) }} #}
{% include '@ChillMain/Homepage/index.html.twig' %} {% include '@ChillMain/Homepage/index.html.twig' %}
{% endblock %}
{% endblock %} {% endblock %}
</div> </div>

View File

@ -1,4 +1,4 @@
// this file loads all assets from the Chill person bundle
module.exports = function(encore, entries) { 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');
}; };

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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');

View File

@ -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>

View File

@ -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 %}

View File

@ -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 %}