Mémorisation des correspondances et début de la mise en page/aide (4da4807c) · Commits · open-source / oscar

public/js/oscar/src/ImportIcalUI.vue

+85 −60

Original line number	Diff line number	Diff line
		@@ -8,7 +8,23 @@
		</div>
		</div>

		<div class="overlay" v-if="editCorrespondance">
		<div class="overlay" v-if="debug">
		<div class="overlay-content">
		<a href="#" @click="debug = null">CLOSE</a>
		<pre>{{ debug }}</pre>
		</div>
		</div>

		<div class="overlay" v-if="tutostep > 0">
		<div class="overlay-content">
		<div v-if="tutostep == 1">

		</div>
		<a href="#" @click="debug = null">CLOSE</a>
		</div>
		</div>

		<div class="overlay" v-if="editCorrespondance" :class="(tutostep > 0 && tutostep != 4) ? 'blur' : ''">
		<div class="overlay-content">
		<i class="icon-cancel-outline overlay-closer" @click="editCorrespondance = null"></i>

		@@ -36,32 +52,70 @@
		</div>

		<div class="row">
		<div class="col-md-6">
		<h3>Critères d'importation</h3>
		<div class="col-md-6 card" :class="(tutostep > 0 && tutostep != 1) ? 'blur' : ''">
		<h3>Etape 1 : <strong>Mois à importer</strong></h3>
		<p class="basline">Choississez le mois à importer (Vous ne pouvez importer que un mois terminé)</p>
		<div class="help">Vous ne pouvez selectionner que un mois terminé</div>
		<div>
		Période de <periodselector :period="periodStart" :max="periodMax" @change="handlerPeriodChange($event)" />
		</div>
		</div>

		<div class="col-md-6">
		<h3>Fichier ICS (Format ICAL)</h3>
		<div class="col-md-6 card" :class="(tutostep > 0 && tutostep != 2) ? 'blur' : ''">
		<h3>Etape 2 : <strong>Fichier ICS (Format ICAL)</strong></h3>
		<p class="basline">Selectionnez le fichier ICAL (format ICS) à charger depuis votre ordinateur</p>
		<input type="file" @change="handlerFileSelected">
		</div>
		</div>

		<div v-if="timesheets == null"></div>
		<div v-else-if="timesheets.length == 0">
		<div v-if="timesheets != null && timesheets.length == 0">
		<div class="alert alert-info">
		Aucun créneau chargé depuis le fichier ICS
		</div>
		</div>

		<div class="row" v-else>
		<div class="col-md-8">
		<h2><i class="icon-pin"></i>Créneaux trouvés</h2>
		<div class="col-md-4 card">
		<h3>Étape 3 : <strong>Ajuster les correspondances</strong></h3>

		<div class="alert alert-info">
		<p>
		Vous trouverez ici les <strong>intitulés</strong> chargés depuis le calendrier.
		</p>
		</div>

		<div v-if="timesheets != null && timesheets.length > 0">
		<div class="input-group">
		<div class="input-group-addon"><i class="icon-filter"></i></div>
		<input type="text" class="form-input form-control" placeholder="Filter les intitulés..." v-model="labelFilter" />
		</div>
		<hr>
		<div v-for="label in labels" class="card xs correspondance" :class="{ 'match' : labelsCorrespondance[label.toLowerCase()] }">
		<div class="in-ical">
		<i class="icon-tag"></i> <strong>{{ label }}</strong>
		</div>

		<span v-if="labelsCorrespondance[label.toLowerCase()] && labelsCorrespondance[label.toLowerCase()] != null" class="cartouche card-info">
		<i class="icon-link-outline"></i>
		{{ labelsCorrespondance[label.toLowerCase()].label }}
		</span>

		<nav>
		<a href="#" class="text-danger" @click.prevent="handlerRemoveLabel(label)" title="Retirer les créneaux"><i class="icon-trash"></i></a>
		<a href="#" class="text-danger" @click.prevent="handlerEditCorrespondance(label)" title="Modifier la correspondance"><i class="icon-edit"></i></a>
		</nav>
		</div>
		</div>

		</div>
		<div class="col-md-8 card">
		<h2>Étape 4 : <strong>Vérifiez et finaliser</strong></h2>

		<div v-if="timesheets != null && timesheets.length > 0">

		<p class="alert alert-info">
		<i class="icon-info-circled"></i>
		Voici les créneaux trouvès dans le calendrier que vous avez chargé. Une fois les créneaux validés,
		Voici les créneaux trouvès dans le calendrier que vous avez chargé. Une fois les créneaux importés,
		vous pourrez toujours les modifier ou les supprimer depuis l'interface de déclaration.
		</p>

		@@ -130,46 +184,8 @@
		</tr>
		</tbody>
		</table>
		</div>
		<div class="col-md-4">
		<h2>
		<i class="icon-tags"></i>
		Intitulés et correspondance</h2>

		<div class="alert alert-info">
		<p>
		Vous trouverez ici les <strong>intitulés</strong> chargés depuis le calendrier.
		</p>

		<p>

		</p>
		</div>

		<div class="input-group">
		<div class="input-group-addon"><i class="icon-filter"></i></div>
		<input type="text" class="form-input form-control" placeholder="Filter les intitulés..." v-model="labelFilter" />
		</div>

		<hr>


		<div v-for="label in labels" class="card xs correspondance" :class="{ 'match' : labelsCorrespondance[label.toLowerCase()] }">
		<div class="in-ical">
		<i class="icon-tag"></i> <strong>{{ label }}</strong>
		</div>

		<span v-if="labelsCorrespondance[label.toLowerCase()] && labelsCorrespondance[label.toLowerCase()] != null" class="cartouche card-info">
		<i class="icon-link-outline"></i>
		{{ labelsCorrespondance[label.toLowerCase()].label }}
		</span>

		<nav>
		<a href="#" class="text-danger" @click.prevent="handlerRemoveLabel(label)" title="Retirer les créneaux"><i class="icon-trash"></i></a>
		<a href="#" class="text-danger" @click.prevent="handlerEditCorrespondance(label)" title="Modifier la correspondance"><i class="icon-edit"></i></a>
		</nav>
		</div>

		</div>
		</div>
		<form action="" method="post" v-if="sendData.length">
		@@ -194,7 +210,8 @@
		periodEnd: "2018-12",
		debug: null,
		labelsCorrespondance: {},
		editCorrespondance: null
		editCorrespondance: null,
		tutostep: 0
		}
		},

		@@ -352,7 +369,7 @@
		t.destinationId = -1;
		t.destinationLabel = "";
		t.imported = false;
		} else {
		} else {editCorrespondance
		if( t.importable == true ){
		t.destinationCode = dest.code;
		t.destinationId = dest.id;
		@@ -364,6 +381,9 @@
		}
		})
		this.labelsCorrespondance[editCorrespondance.toLowerCase()] = dest;
		if( window.localStorage ){
		window.localStorage.setItem('labelsCorrespondance', JSON.stringify(this.labelsCorrespondance));
		}
		this.editCorrespondance = null;
		},

		@@ -735,6 +755,11 @@
		}
		return items;
		}
		},
		mounted(){
		if( window.localStorage && window.localStorage.getItem('labelsCorrespondance') ){
		this.labelsCorrespondance = JSON.parse(window.localStorage.getItem('labelsCorrespondance'));
		}
		}
		}
		</script>
		No newline at end of file