Ajout d'un bouton pour afficher tout le contenu d'une mutation

static/index.html

@@ -144,6 +144,7 @@
 	</script>
 	<script src="js/data.js"></script>
 	<script src="js/component.boite.js"></script>
+	<script src="js/component.mutation.js"></script>
 	<script src="js/component.boite-accordeon.js"></script>
 	<script src="js/index.js?v=3"></script>
 

static/js/component.boite-accordeon.js

@@ -1,8 +1,12 @@
 Vue.component('boite-accordeon', {
 	// Les paramètres sont là
 	props: ['couleur', 'mutation', 'icone', 'index'],
+	data () {
+		return {
+			showDetail: false
+		}
+	},
 	// La on donne le code source HTML du composant qui peut utiliser des données
-
 	template: `<div class="card mt-3">
 				<div class="card-body" v-on:click="selectionnerMutation()">
 					<div class="media d-flex">
@@ -19,21 +23,17 @@ Vue.component('boite-accordeon', {
 						</div>
 					</div>
 					<div v-if="vue.mutationIndex == index" style="background-color: #eee" class="mt-3">
-						<boite
-							v-for="batiment in mutation.batiments"
-							:valeur="(batiment['code_type_local'] != 3) ? (formatterNombre(batiment['surface_reelle_bati']) + ' m²') : ''"
-							:icone="['', 'fa fa-home', 'fas fa-building', 'fas fa-warehouse', 'fas fa-store'][batiment['code_type_local']]"
-							:texte="batiment['type_local'] + ((batiment['code_type_local'] < 3) ? (' / ' + formatterNombre(batiment['nombre_pieces_principales']) + ' p') : '')">
-						</boite>
-						<boite
-							v-for="terrain in mutation.terrains"
-							:valeur="formatterNombre(terrain['surface_terrain']) + ' m²'"
-							icone="fa fa-tree"
-							:texte="terrain['nature_culture'] + (terrain['nature_culture_speciale'] != 'None' ? ' / ' + terrain['nature_culture_speciale'] : '')">
-						</boite>
-							<div v-if="mutation.parcellesLiees.length > 0" style = "padding:0.5rem">
-								Cette mutation contient des dispositions dans des parcelles adjacentes. La valeur foncière correspond au total.
-							</div>
+						<mutation :mutation="mutation"></mutation>
+						<div v-if="mutation.mutationsLiees.length > 0" style = "padding:0.5rem">
+							Cette mutation contient des dispositions dans des parcelles adjacentes. La valeur foncière correspond au total.
+							<br><button v-on:click="showDetail = !showDetail">Voir le contenu des autres parcelles de cette mutation</button>
+						</div>
+						<div class="mutations-liees" v-if="showDetail && mutation.mutationsLiees.length > 0">
+							<mutation
+							  v-for="mutationLiee in mutation.mutationsLiees"
+							  :mutation="mutationLiee">
+						  </mutation>
+						</div>
 					</div>
 			</div>
 		</div>`,

static/js/component.mutation.js

@@ -0,0 +1,24 @@
+Vue.component('mutation', {
+	// Les paramètres sont là
+	props: ['couleur', 'mutation', 'icone', 'index'],
+	// La on donne le code source HTML du composant qui peut utiliser des données
+	template:
+		`<div class="mutation">
+			<boite
+				v-for="batiment in mutation.batiments"
+				:valeur="(batiment['code_type_local'] != 3) ? (formatterNombre(batiment['surface_reelle_bati']) + ' m²') : ''"
+				:icone="['', 'fa fa-home', 'fas fa-building', 'fas fa-warehouse', 'fas fa-store'][batiment['code_type_local']]"
+				:texte="batiment['type_local'] + ((batiment['code_type_local'] < 3) ? (' / ' + formatterNombre(batiment['nombre_pieces_principales']) + ' p') : '')">
+			</boite>
+			<boite
+				v-for="terrain in mutation.terrains"
+				:valeur="formatterNombre(terrain['surface_terrain']) + ' m²'"
+				icone="fa fa-tree"
+				:texte="terrain['nature_culture'] + (terrain['nature_culture_speciale'] != 'None' ? ' / ' + terrain['nature_culture_speciale'] : '')">
+			</boite>
+		</div>`
+});
+
+function formatterNombre(nombreDecimal) {
+	return nombreDecimal.replace(/\..*/g, '').replace(/(\d)(?=(\d{3})+$)/g, '$1 ');
+}

static/js/data.js

@@ -124,44 +124,46 @@ function computeParcelle(mutationsSection, idParcelle) {
 	var mutations = _.chain(mutationsParcelle)
 		.groupBy('id_mutation')
 		.map(function (rows, idMutation) {
-			var infos = [_.pick(rows[0], 'date_mutation', 'id_parcelle', 'nature_mutation', 'valeur_fonciere', 'adresse_numero', 'adresse_suffixe', 'adresse_nom_voie')]
-
-			var parcellesLiees = _.uniq(
-				mutationsSection
-					.filter(function (m) {
-						return m.id_mutation === idMutation && m.id_parcelle !== idParcelle
-					})
-					.map(function (m) {
-						return m.id_parcelle
-					})
-			)
-
-			var batiments = _.chain(rows)
+			var mutation = buildMutation(rows)
+			mutation.mutationsLiees = _.chain(mutationsSection)
 				.filter(function (m) {
-					return m.type_local !== 'None'
+					return m.id_mutation === idMutation && m.id_parcelle !== idParcelle
 				})
-				.uniqBy(function (m) {
-					return `${m.code_type_local}@${m.surface_reelle_bati}`
+				.map(function(m) {
+					return buildMutation([m])
 				})
 				.value()
+			return mutation
+		})
+		.value()
 
-			var terrains = _.chain(rows)
-				.filter(function (m) {
-					return m.nature_culture !== 'None'
-				})
-				.uniqBy(function (m) {
-					return `${m.code_nature_culture}@${m.code_nature_culture_special}@${m.surface_terrain}`
-				})
-				.value()
+	return {mutations: sortByDateDesc(mutations)}
+}
 
-			return {
-				infos: infos,
-				parcellesLiees: parcellesLiees,
-				batiments: batiments,
-				terrains: terrains
-			}
+function buildMutation(rows) {
+	var infos = [_.pick(rows[0], 'id_mutation', 'date_mutation', 'id_parcelle', 'nature_mutation', 'valeur_fonciere', 'adresse_numero', 'adresse_suffixe', 'adresse_nom_voie')]
+
+	var batiments = _.chain(rows)
+		.filter(function (m) {
+			return m.type_local !== 'None'
+		})
+		.uniqBy(function (m) {
+			return `${m.code_type_local}@${m.surface_reelle_bati}`
 		})
 		.value()
 
-	return {mutations: sortByDateDesc(mutations)}
+	var terrains = _.chain(rows)
+		.filter(function (m) {
+			return m.nature_culture !== 'None'
+		})
+		.uniqBy(function (m) {
+			return `${m.code_nature_culture}@${m.code_nature_culture_special}@${m.surface_terrain}`
+		})
+		.value()
+
+	return {
+		infos: infos,
+		batiments: batiments,
+		terrains: terrains
+	}
 }

static/js/index.js

@@ -430,8 +430,8 @@ function entrerDansMutation(sonIndex) {
 
 	codesParcelles = [codeParcelle];
 	if (sonIndex != null) {
-		for (parcelleLiee of vue.parcelle.mutations[sonIndex].parcellesLiees) {
-			codesParcelles.push(parcelleLiee);
+		for (mutationLiee of vue.parcelle.mutations[sonIndex].mutationsLiees) {
+			codesParcelles.push(mutationLiee.infos[0].id_parcelle);
 		}
 	}
 
@@ -440,6 +440,12 @@ function entrerDansMutation(sonIndex) {
 	return Promise.resolve()
 }
 
+function voirDetailMutation(sonIndex) {
+	console.log(vue.parcelle.mutations[sonIndex].mutationsLiees);
+
+	return Promise.resolve()
+}
+
 function entrerDansSection(newIdSection) {
 	if (idSection) {
 		resetSection()