bachir/ouatterrir-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

admin front doleance improved dateEditable with optional range

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2025-02-13 11:50:29 +01:00
parent e0651f9ac9
commit d324c0436e
2 changed files with 121 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
src/components/contents/Doleancer.vue
View File

@ -57,7 +57,14 @@ export default {
'csrf_token',
'isloggedin',
'user_entites']),
...mapState(CommonStore,['hover_elmt'])
...mapState(CommonStore,['hover_elmt']),
//
opened_dol() {
return this.opened_concernement.opened_doleance;
},
groupeinteret() {
return this.doleance.groupesinterets[this.opened_dol.field_index];
}
},
created () {
this.concernement = this.concernementsByID[this.cid];
@ -234,7 +241,6 @@ export default {
// get all the field_entite values, we don't want to ersae everything
let groupes = [];
this.concernement.doleances.forEach((doleance) =>{
if (doleance.id === this.opened_concernement.opened_doleance.id) {
doleance.groupesinterets.forEach((group) => {
@ -349,7 +355,7 @@ export default {
<section
class="content-doleances">
<template v-if="opened_concernement.opened_doleance && opened_concernement.opened_doleance.id === doleance.id">
<template v-if="opened_dol && opened_dol.id === doleance.id">
<ContentEditable
tag="h3"
:value="doleance.title"
@ -363,7 +369,7 @@ export default {
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
<section
v-if="opened_concernement.opened_doleance.field === 'leprobleme' || !opened_concernement.opened_doleance.field">
v-if="opened_dol.field === 'leprobleme' || !opened_dol.field">
<!-- <span class="date">{{ doleance.date_leprobleme.start }}</span> -->
<DateEditable
:value="doleance.date_leprobleme.start"
@ -373,7 +379,7 @@ export default {
entitytype: 'node',
bundle: 'cercle_politique',
id: doleance.id,
field: {field_name: 'field_date_leprobleme', value:'value'}
field: {field_name: 'field_date_leprobleme'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
<h5>{{ ct_cercle_politique.field_le_probleme.label }}</h5>
@ -393,9 +399,9 @@ export default {
</section>
<section
v-if="opened_concernement.opened_doleance.field === 'lenquete'
|| ((!opened_concernement.opened_doleance.field
|| opened_concernement.opened_doleance.field === 'leprobleme')
v-if="opened_dol.field === 'lenquete'
|| ((!opened_dol.field
|| opened_dol.field === 'leprobleme')
&& !doleance.lenquete)"
class="lenquete">
<h5>{{ ct_cercle_politique.field_enquete_terraindevie.label }}</h5>
@ -415,34 +421,48 @@ export default {
</section>
<section
v-if="opened_concernement.opened_doleance.field === 'groupesinterets'"
v-if="opened_dol.field === 'groupesinterets'"
class="groupesinterets">
<span class="date">
{{ doleance.groupesinterets[opened_concernement.opened_doleance.field_index].date.start }}
<!-- {{ groupeinteret.date.start }}
&#x2192;
{{ doleance.groupesinterets[opened_concernement.opened_doleance.field_index].date.end }}
{{ groupeinteret.date.end }} -->
<DateEditable
:value="groupeinteret.date.start"
:end_value="groupeinteret.date.end"
class="groupeinteret-date-start"
:contenteditable="opened_concernement.can_update"
mode="range"
:data="{
entitytype: 'paragraph',
bundle: 'groupes_interets',
id: groupeinteret.id,
revision_id: groupeinteret.revision_id,
field: {field_name: 'field_date_groupe_interets'}
}"
v-on:updated="reloadConcernementCerclePol(cid)"/>
</span>
<h5>Construction de groupes d'intérets avec qui composer la doléance</h5>
<section>
<label for="groupe">{{ p_groupes_interets.field_groupe_interets.label }}</label>
<p
name="groupe"
v-html="doleance.groupesinterets[opened_concernement.opened_doleance.field_index].groupe_interets" />
v-html="groupeinteret.groupe_interets" />
<label for="accorder">{{ p_groupes_interets.field_accorder_interets.label }}</label>
<p
name="accorder"
v-html="doleance.groupesinterets[opened_concernement.opened_doleance.field_index].accorder_interets" />
v-html="groupeinteret.accorder_interets" />
<label for="formuler">{{ p_groupes_interets.field_formuler.label }}</label>
<p
name="formuler"
v-html="doleance.groupesinterets[opened_concernement.opened_doleance.field_index].formuler" />
v-html="groupeinteret.formuler" />
</section>
</section>
<section
v-if="opened_concernement.opened_doleance.field === 'adresse_de_la_doleance'"
v-if="opened_dol.field === 'adresse_de_la_doleance'"
class="adresse">
<span class="date">{{ doleance.date_adresse.start }}</span>
@ -465,34 +485,34 @@ export default {
</section>
<section
v-if="opened_concernement.opened_doleance.field === 'reception_traitement'"
v-if="opened_dol.field === 'reception_traitement'"
class="reception_traitement">
<span class="date">
{{ doleance.reception_traitement[opened_concernement.opened_doleance.field_index].date.start }}
{{ doleance.reception_traitement[opened_dol.field_index].date.start }}
&#x2192;
{{ doleance.reception_traitement[opened_concernement.opened_doleance.field_index].date.end }}
{{ doleance.reception_traitement[opened_dol.field_index].date.end }}
</span>
<h5>Reception et traitement de la doléance</h5>
<label for="entite_adressee">{{ p_reception_et_traitement.field_entite_adressee.label }}</label>
<p
name="entite_adressee"
v-html="doleance.reception_traitement[opened_concernement.opened_doleance.field_index].entite_adressee" />
v-html="doleance.reception_traitement[opened_dol.field_index].entite_adressee" />
<label for="doleance_formulee">{{ p_reception_et_traitement.field_doleance_formulee.label }}</label>
<p
name="doleance_formulee"
v-html="doleance.reception_traitement[opened_concernement.opened_doleance.field_index].doleance_formulee" />
v-html="doleance.reception_traitement[opened_dol.field_index].doleance_formulee" />
<label for="traite_doleance">{{ p_reception_et_traitement.field_traite_doleance.label }}</label>
<p
name="traite_doleance"
v-html="doleance.reception_traitement[opened_concernement.opened_doleance.field_index].traite_doleance" />
v-html="doleance.reception_traitement[opened_dol.field_index].traite_doleance" />
<label for="entite_recoit_doleance">{{ p_reception_et_traitement.field_entite_recoit_doleance.label }}</label>
<p
name="entite_recoit_doleance"
v-html="doleance.reception_traitement[opened_concernement.opened_doleance.field_index].entite_recoit_doleance" />
v-html="doleance.reception_traitement[opened_dol.field_index].entite_recoit_doleance" />
</section>
<section
v-if="opened_concernement.opened_doleance.field === 'decision'"
v-if="opened_dol.field === 'decision'"
class="decision">
<span class="date">{{ doleance.date_decision.start }}</span>
@ -504,31 +524,31 @@ export default {
</section>
<section
v-if="opened_concernement.opened_doleance.field === 'mise_en_oeuvre_decision'"
v-if="opened_dol.field === 'mise_en_oeuvre_decision'"
class="mise_en_oeuvre_decision">
<span class="date">
{{ doleance.mise_en_oeuvre_decision[opened_concernement.opened_doleance.field_index].date.start }}
{{ doleance.mise_en_oeuvre_decision[opened_dol.field_index].date.start }}
&#x2192;
{{ doleance.mise_en_oeuvre_decision[opened_concernement.opened_doleance.field_index].date.end }}
{{ doleance.mise_en_oeuvre_decision[opened_dol.field_index].date.end }}
</span>
<h5>{{ ct_cercle_politique.field_mise_en_oeuvre_decision.label }}</h5>
<label for="entite_adresse_decision">{{ p_mise_en_oeuvre_decision.field_entite_adresse_decision.label }}</label>
<p
name="entite_adresse_decision"
v-html="doleance.mise_en_oeuvre_decision[opened_concernement.opened_doleance.field_index].entite_adresse_decision" />
v-html="doleance.mise_en_oeuvre_decision[opened_dol.field_index].entite_adresse_decision" />
<label for="formule_decision">{{ p_mise_en_oeuvre_decision.field_formule_decision.label }}</label>
<p
name="formule_decision"
v-html="doleance.mise_en_oeuvre_decision[opened_concernement.opened_doleance.field_index].formule_decision" />
v-html="doleance.mise_en_oeuvre_decision[opened_dol.field_index].formule_decision" />
<label for="entite_metenoeuvre_decisio">{{ p_mise_en_oeuvre_decision.field_entite_metenoeuvre_decisio.label }}</label>
<p
name="entite_metenoeuvre_decisio"
v-html="doleance.mise_en_oeuvre_decision[opened_concernement.opened_doleance.field_index].entite_metenoeuvre_decisio" />
v-html="doleance.mise_en_oeuvre_decision[opened_dol.field_index].entite_metenoeuvre_decisio" />
</section>
<section
v-if="opened_concernement.opened_doleance.field === 'adresse_de_la_decision'"
v-if="opened_dol.field === 'adresse_de_la_decision'"
class="adresse_de_la_decision">
<span class="date">{{ doleance.date_adresse.start }}</span>
<h5>Adresse de la decision à appliquer</h5>
@ -542,33 +562,33 @@ export default {
</section>
<section
v-if="opened_concernement.opened_doleance.field === 'receptions_et_applications'"
v-if="opened_dol.field === 'receptions_et_applications'"
class="receptions_et_applications">
<span class="date">
{{ doleance.receptions_et_applications[opened_concernement.opened_doleance.field_index].date.start }}
{{ doleance.receptions_et_applications[opened_dol.field_index].date.start }}
&#x2192;
{{ doleance.receptions_et_applications[opened_concernement.opened_doleance.field_index].date.end }}
{{ doleance.receptions_et_applications[opened_dol.field_index].date.end }}
</span>
<h5>{{ ct_cercle_politique.field_receptions_et_applications.label }}</h5>
<label for="applique_decision">{{ p_reception_application_decision.field_applique_decision.label }}</label>
<p
name="applique_decision"
v-html="doleance.receptions_et_applications[opened_concernement.opened_doleance.field_index].applique_decision" />
v-html="doleance.receptions_et_applications[opened_dol.field_index].applique_decision" />
<label for="formule_decision_applic">{{ p_reception_application_decision.field_formule_decision_applic.label }}</label>
<p
name="formule_decision_applic"
v-html="doleance.receptions_et_applications[opened_concernement.opened_doleance.field_index].formule_decision_applic" />
v-html="doleance.receptions_et_applications[opened_dol.field_index].formule_decision_applic" />
<label for="entite_recoit_decision">{{ p_reception_application_decision.field_entite_recoit_decision.label }}</label>
<p
name="entite_recoit_decision"
v-html="doleance.receptions_et_applications[opened_concernement.opened_doleance.field_index].entite_recoit_decision" />
v-html="doleance.receptions_et_applications[opened_dol.field_index].entite_recoit_decision" />
</section>
<section
v-if="opened_concernement.opened_doleance.field === 'probleme_initial_resolu'"
v-if="opened_dol.field === 'probleme_initial_resolu'"
class="probleme_initial_resolu">
<h5>Réussite / échec / reprise du cercle politique</h5>
@ -595,6 +615,20 @@ export default {
<template v-slot:footer>
<template v-if="concernement.can_update">
<!-- <template v-if="opened_concernement.opened_doleance.field === 'groupesinterets'">
<div
v-if="!reloading_concernements"
@click="addgroupInteret"
class="add-groupinteret-btn btn">
<span>Ajouter un group d'intérêt</span>
<svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
</div>
<div v-else class="add-groupinteret-btn btn">
<div class="loading">Chargement</div>
</div>
</template> -->
<template v-if="opened_concernement.opened_doleance.field === 'lenquete' || opened_concernement.opened_doleance.field === 'groupesinterets'">
<div
v-if="!reloading_concernements"
@ -607,9 +641,10 @@ export default {
<div class="loading">Chargement</div>
</div>
</template>
<template v-if="opened_concernement.opened_doleance.field === 'lenquete'">
<div v-if="!reloading_concernements" @click="addCerclePo" class="add-cerclepo-btn btn">
<span>Ajouter un crecle politique</span>
<span>Ajouter un cercle politique</span>
<svg-icon type="mdi" :path="mdiStickerPlusOutline_path"/>
</div>
<div v-else class="add-cerclepo-btn btn">

67
src/components/editable/DateEditable.vue
View File

@ -13,33 +13,50 @@ export default {
props: {
tag: String,
value: String,
end_value : {
type : String,
default : null
},
contenteditable : {
type : [Boolean, String],
default : true,
default : true
},
mode : {
type : String,
default : null
},
data: Object,
placeholder : {
type : String,
default : 'Ajouter du texte'
default : 'Choisir une date'
}
},
emits: ['updated'],
data(){
return {
date: null,
// spellcheck: false
date: null
}
},
computed: {
...mapState(UserStore,['csrf_token']),
attrs() {
// console.log(`this.mode: ${this.mode}`);
let a = {};
if (this.mode && this.mode === 'range') {
a.range = true;
}
return a;
}
},
created () {
console.log('DateEditable created');
this.date = this.value;
if (this.mode && this.mode === 'range') {
this.date = [this.value, this.end_value]
}else{
this.date = this.value;
}
},
mounted () {
// if (this.contenteditable) {
// }
},
beforeUnmount() {
},
@ -56,25 +73,30 @@ export default {
...mapActions(ConcernementsStore, ['reloadConcernements']),
save(){
console.log('save csrf_token', this.csrf_token);
const params = {
console.log('save this.data', this.data);
console.log('save this.date', this.date);
let params = {
type: this.data.bundle,
[this.data.field.field_name]: [{[this.data.field.value]: this.date}]
};
if (this.data.entitytype === 'node') {
params.nid = [{"value":this.data.id}];
} else {
params.id = [{"value":this.data.id}];
}
// we need additional values for image alt for example
// console.log('additional_values', this.data.field.additional_values);
if (this.data.field.additional_values) {
for (const key in this.data.field.additional_values) {
if (Object.hasOwnProperty.call(this.data.field.additional_values, key)) {
params[this.data.field.field_name][0][key] = this.data.field.additional_values[key]
}
}
if (this.mode && this.mode === "range") {
params[this.data.field.field_name] = [{
value: this.date[0],
end_value: this.date[1]
}]
} else {
params[this.data.field.field_name] = [{
value: this.date
}]
}
const configs = {
headers: {'X-CSRF-Token': this.csrf_token}
};
@ -100,7 +122,14 @@ export default {
</script>
<template>
<VueDatePicker v-if="contenteditable" v-model="date" model-type="yyyy-MM-dd" format="dd-MM-yyyy" :enable-time-picker="false" :clearable="false"/>
<VueDatePicker
v-if="contenteditable"
v-model="date"
model-type="yyyy-MM-dd"
format="dd-MM-yyyy"
:enable-time-picker="false"
:clearable="false"
v-bind="attrs"/>
<span v-else class="date">{{ value }}</span>
</template>