Commit f1e0bd1f authored by Julien BOUYER's avatar Julien BOUYER
Browse files

UNOTOPLYS-171 feat(screen) : JSdoc

parent c2208792
......@@ -3,6 +3,9 @@ import { Component, Prop } from 'vue-property-decorator';
import { IScreen } from '@/shared/model/screen.model';
/**
* Composant d'affichage d'une liste de IScreen avec possibilité de déplacer les éléments par drag-n-drop.
*/
@Component
export default class DndList extends Vue {
@Prop()
......@@ -15,6 +18,8 @@ export default class DndList extends Vue {
constructor() {
super();
// La liste passée en prop n'est pas utilisée directement car le dnd doit pouvoir la mettre à jour.
// On la copie dans une data qui est bindée à la vue par le méthode set et get
this.currentList = this.screenList;
}
......@@ -39,16 +44,31 @@ export default class DndList extends Vue {
return this.idScreen == panel.id;
}
/**
* Emet un évènement à la sélection d'un Screen indiquant .
* @param {IScreen} panelScreen écran sélectionné dans le panneau
* @returns {void}
*/
public selectScreen(panelScreen: IScreen): void {
this.$emit('selectScreen', panelScreen);
}
/**
* Méthode appelée après le drag-n-drop d'un élément sur sa nouvelle position.
* Calcule le nouvel index de l'élément et émet un événement indiquant le nouvel index pour l'écran.
* @param {CustomEvent} e événement émis après le déplacement d'un évènement
*/
public reordered(e: CustomEvent) {
const selectedElm = e.detail.items[0];
const screenIdx = this.screenList.findIndex(s => s.id === Number.parseInt(selectedElm.getAttribute('data-screenid'), 10));
const screen = this.screenList[screenIdx];
// L'index donné est celui dans le tableau des screens (0 à n), or à l'affichage, on démarre à 1
let newIndex = e.detail.index;
if (newIndex <= screenIdx) {
// Si le nouvel index est inférieur à l'index courant (déplacement vers le haut),
// il est donc nécessaire de l'incrémenté de 1 (position de départ).
// Lors d'un déplacement vers le bas, l'index est déjà incrémenté de 1
// (l'écran en cours de déplacement est toujours présent dans la liste)
newIndex++;
}
this.$emit('update', { screen, newIndex });
......
......@@ -20,17 +20,26 @@ export default class Panel extends Vue {
public screenList: any[];
/**
* Clé de MAJ du composant DND. On l'incrémente à chaque mise à jour de
* screenList pour indiquer au composant qu'il doit se recharger.
*/
public dndKey: number;
public showConfirm: boolean;
constructor() {
super();
// Si getter screenList est déjà prêt, on le copie, sinon on charge une liste vide
this.screenList = this.$store.getters.screenList || [];
this.dndKey = 0;
this.showConfirm = false;
}
/**
* Surveille la MAJ du getter screenList et met à jour la data screenList à chaque modification.
* Incrémente dndKey pour forcer le composant DndList à se réfraîchir.
*/
@Watch('$store.getters.screenList')
public reloadScreenList() {
this.screenList = this.$store.getters.screenList;
......
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