Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-20 17:24:25 +00:00
Code Issues Actions Projects Releases Wiki Activity

Mise à jour de l'interface utilisateur pour le composant ActionToolbarComponent

Browse Source
This commit is contained in:
Boris Waaub 2024-04-25 10:36:45 +02:00
parent 800a952532
commit 2a1963e993
5 changed files with 89 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
View File

@ -1,6 +1,6 @@
<template>
<banner-component :ticket="ticket" />
<div class="container-xxl p-2">
<div class="container-xxl p-3">
<ticket-selector-component :tickets="[]" />
<ticket-history-list-component :history="ticket.history" />
<motive-list-component :motives="motives" />

54
src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
View File

@ -1,48 +1,82 @@
<template>
<div class="sticky-bottom">
<div class="footer-ticket-details"><button class="btn btn-chill-green text-white">Enregistrer</button></div>
<div class="footer-ticket-details">
<div class="tab-content">
<div v-if="activeTab === 'commentaire'" class="p-2">
<label class="col-form-label" for="content">{{ $t('comment.label') }}</label>
<textarea v-model="comment" class="form-control" id="content" rows="3"
placeholder="{{ $t('comment.placeholder') }}">
</textarea>
</div>
<div v-if="activeTab === 'transfert'">
<!-- Content for the 'Transfert' tab pane -->
<p>This is the Transfert tab pane content.</p>
</div>
<div v-if="activeTab === 'motif'">
<!-- Content for the 'Motif' tab pane -->
<p>This is the Motif tab pane content.</p>
</div>
<div v-if="activeTab === 'fermer'">
<!-- Content for the 'Fermer' tab pane -->
<p>This is the Fermer tab pane content.</p>
</div>
</div>
<button class="btn btn-chill-green text-white">Enregistrer</button>
</div>
<div class="footer-ticket-main">
<ul class="nav nav-tabs justify-content-end">
<li class="nav-item">
<button type="button" class="m-2 btn btn-light">
<button type="button" class="m-2 btn btn-light" @click="activeTab = 'commentaire'">
<i class="fa fa-plus"></i>
Commentaire
</button>
</li>
<li class="nav-item">
<button type="button" class="m-2 btn btn-light">
<button type="button" class="m-2 btn btn-light" @click="activeTab = 'transfert'">
<i class="fa fa-paper-plane"></i>
Transfert
</button>
</li>
<li class="nav-item">
<button type="button" class="m-2 btn btn-light">
<button type="button" class="m-2 btn btn-light" @click="activeTab = 'motif'">
<i class="fa fa-paint-brush"></i>
Motif
</button>
</li>
<li class="nav-item">
<button type="button" class="m-2 btn btn-light">
<button type="button" class="m-2 btn btn-light" @click="activeTab = 'fermer'">
<i class="fa fa-bolt"></i>
Fermer
</button>
</li>
</ul>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { useStore } from 'vuex';
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useStore } from 'vuex';
export default defineComponent({
name: 'ActionToolbarComponent',
setup(props, ctx) {
const store = useStore();
const editor = ref();
const activeTab = ref("");
const comment = ref("");
return {
activeTab,
comment,
editor,
};
},
});
</script>

42
src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/MotiveSelectorComponent.vue Normal file
View File

@ -0,0 +1,42 @@
<template>
<div class="btn-group">
<button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
{{ $t('ticket.previous_tickets') }}
<span class="badge rounded-pill bg-chill-green">
{{ tickets.length }}
<span class="visually-hidden">Tickets</span>
</span>
</button>
<ul class="dropdown-menu">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
</template>
<script lang="ts">
import { PropType, defineComponent } from 'vue';
// Types
import { Ticket } from '../../../types';
export default defineComponent({
name: 'MotiveSelectorComponent',
props: {
tickets: {
type: Object as PropType<Ticket[]>,
required: true,
},
},
setup() {
return {}
}
});
</script>
<style lang="scss" scoped></style>

6
src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketSelectorComponent.vue
View File

@ -2,9 +2,9 @@
<div class="btn-group">
<button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
{{ $t('ticket.previous_tickets') }}
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-chill-green">
{{ tickets.length }}
<span class="visually-hidden">unread messages</span>
<span class="visually-hidden">Tickets</span>
</span>
</button>
@ -20,8 +20,6 @@
import { PropType, defineComponent } from 'vue';
// Types
import { Ticket } from '../../../types';

1
src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/index.ts
View File

@ -3,7 +3,6 @@ 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';