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
- personvendee
- household_edit_metadata
- index.js
- index.ts
```
## Organisation des feuilles de styles

View File

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

View File

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

View File

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

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