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 @@ ...@@ -7,7 +7,7 @@
</ol> </ol>
<!-- Tabs--> <!-- Tabs-->
<ul class="px-4 py-2 border-b md:flex md:justify-center md:text-center md:py-0"> <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> </ul>
</nav> </nav>
<login username="Bob" /> <login username="Bob" />
......
...@@ -2,18 +2,27 @@ import Vue from 'vue'; ...@@ -2,18 +2,27 @@ import Vue from 'vue';
import { Component, Inject } from 'vue-property-decorator'; import { Component, Inject } from 'vue-property-decorator';
import ScreenService from '@/entities/screen/screen.service'; 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 Icon from '@/components/icon/icon.vue';
import { IScreen } from '@/shared/model/screen.model';
@Component({ @Component({
components: { components: {
Confirm,
Icon, Icon,
}, },
}) })
export default class Panel extends Vue { export default class Panel extends Vue {
@Inject('screenService') private screenService: () => ScreenService; @Inject('screenService') private screenService: () => ScreenService;
public showConfirm: boolean;
constructor() {
super();
this.showConfirm = false;
}
public get screenList(): boolean { public get screenList(): boolean {
return this.$store.getters.screenList; return this.$store.getters.screenList;
} }
...@@ -48,7 +57,8 @@ export default class Panel extends Vue { ...@@ -48,7 +57,8 @@ export default class Panel extends Vue {
} }
public deleteScreen() { 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); const idxScreen = this.$store.getters.screenList.findIndex((s: IScreen) => s.id === idScreen);
this.screenService() this.screenService()
.delete(idScreen) .delete(idScreen)
......
...@@ -9,9 +9,19 @@ ...@@ -9,9 +9,19 @@
<icon name="add" /> <icon name="add" />
<span class="ml-2">{{ $t('screen.add') }}</span> <span class="ml-2">{{ $t('screen.add') }}</span>
</router-link> </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" /> <icon name="trash" />
</button> </button>
<confirm
v-if="showConfirm"
:title="$t('screen.label.delete')"
:confirmLabel="$t('button.delete')"
@cancel="showConfirm = false"
@confirm="deleteScreen"
/>
</div> </div>
<ol class="p-2 text-sm select-none"> <ol class="p-2 text-sm select-none">
<li <li
......
...@@ -145,7 +145,9 @@ ...@@ -145,7 +145,9 @@
}, },
"footer": "Ceci est votre pied de page", "footer": "Ceci est votre pied de page",
"button": { "button": {
"save": "Enregistrer" "save": "Enregistrer",
"cancel": "Annuler",
"delete": "Supprimer"
}, },
"onglets": { "onglets": {
"parametrages": "Paramétrages", "parametrages": "Paramétrages",
......
...@@ -44,7 +44,8 @@ ...@@ -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>)" "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", "description": "Description",
"newItemType": "Type de l'item à ajouter" "newItemType": "Type de l'item à ajouter",
"delete": "Voulez-vous vraiment supprimer cet écran ?"
}, },
"items": { "items": {
"newLabelPlaceholder": "Ajouter un libellé...", "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