Commit 8983876c authored by Julien BOUYER's avatar Julien BOUYER
Browse files

UNOTOPLYS-172 feat(screen) : gestion de la suppression

parent 581ec93d
This diff is collapsed.
import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop } from 'vue-property-decorator';
@Component
export default class Confirm extends Vue {
@Prop()
public title: string;
@Prop()
public confirmLabel: string;
public cancel(event: Event): void {
this.$emit('cancel', event);
}
public confirm(event: Event): void {
this.$emit('confirm', event);
}
}
<template>
<div class="absolute pb-2 text-sm bg-white border rounded-md z-20 w-60 -right-4 top-2">
<p class="p-4">{{ title }}</p>
<button class="w-full px-4 py-1 text-left text-blue-600 hover:bg-blue-100 hover:text-blue-900" @click="cancel">
{{ $t('button.cancel') }}
</button>
<button class="w-full px-4 py-1 text-left text-red-600 hover:bg-red-100 hover:text-red-900" @click="confirm">{{ confirmLabel }}</button>
</div>
</template>
<script lang="ts" src="./confirm.component.ts" />
......@@ -7,7 +7,7 @@
</ol>
<!-- Tabs-->
<ul class="px-4 py-2 border-b md:flex md:justify-center md:text-center md:py-0">
<tab-item v-for="tab in tabs()" :title="tab.title" :link="tab.link" :state="tab.isCurrent ? 'current' : ''" />
<tab-item v-for="(tab, index) in tabs()" :key="index" :title="tab.title" :link="tab.link" :state="tab.isCurrent ? 'current' : ''" />
</ul>
</nav>
<login username="Bob" />
......
......@@ -2,18 +2,27 @@ import Vue from 'vue';
import { Component, Inject } from 'vue-property-decorator';
import ScreenService from '@/entities/screen/screen.service';
import { IScreen } from '@/shared/model/screen.model';
import Confirm from '@/components/confirm/confirm.vue';
import Icon from '@/components/icon/icon.vue';
import { IScreen } from '@/shared/model/screen.model';
@Component({
components: {
Confirm,
Icon,
},
})
export default class Panel extends Vue {
@Inject('screenService') private screenService: () => ScreenService;
public showConfirm: boolean;
constructor() {
super();
this.showConfirm = false;
}
public get screenList(): boolean {
return this.$store.getters.screenList;
}
......@@ -48,7 +57,8 @@ export default class Panel extends Vue {
}
public deleteScreen() {
const idScreen = this.$store.getters.idScreen;
this.showConfirm = false;
const idScreen = Number.parseInt(this.$store.getters.idScreen, 10);
const idxScreen = this.$store.getters.screenList.findIndex((s: IScreen) => s.id === idScreen);
this.screenService()
.delete(idScreen)
......
......@@ -9,9 +9,19 @@
<icon name="add" />
<span class="ml-2">{{ $t('screen.add') }}</span>
</router-link>
<button class="flex items-center p-2 text-red-600 transition hover:bg-red-600 focus:ring hover:text-red-100" @click="deleteScreen">
<button
class="flex items-center p-2 text-red-600 transition hover:bg-red-600 focus:ring hover:text-red-100"
@click="showConfirm = true"
>
<icon name="trash" />
</button>
<confirm
v-if="showConfirm"
:title="$t('screen.label.delete')"
:confirmLabel="$t('button.delete')"
@cancel="showConfirm = false"
@confirm="deleteScreen"
/>
</div>
<ol class="p-2 text-sm select-none">
<li
......
......@@ -145,7 +145,9 @@
},
"footer": "Ceci est votre pied de page",
"button": {
"save": "Enregistrer"
"save": "Enregistrer",
"cancel": "Annuler",
"delete": "Supprimer"
},
"onglets": {
"parametrages": "Paramétrages",
......
......@@ -44,7 +44,8 @@
"helpText": "Cette information est utilisée pour définir l'URL de l'étape (ex: https://apply.univ-nantes.fr/form/staps/<strong>ref1</strong>)"
},
"description": "Description",
"newItemType": "Type de l'item à ajouter"
"newItemType": "Type de l'item à ajouter",
"delete": "Voulez-vous vraiment supprimer cet écran ?"
},
"items": {
"newLabelPlaceholder": "Ajouter un libellé...",
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment