47144bbf7e
- suppression des 4 pages - ajout de 2 nouvelle pages - redirection des anciennes pages vers le nouvelles - Le nouvelle page ne sont plus statiques (basés sur engagement) - Ajout du Model NutritionPage - Ajout des Enums NutritionBlocType, NutritionType - Intégration complete avec responsive des deux nouvelles pages - modification des composants vu pour créer une instance de Vuejs par composant existant pour ajouter et enlever des dropdowns - Suppression des balanced menus - fix login center image - Modification de l'intégration de CKeditor - Ajout de UploadController avec methode pour image - html purifier fix config using ckeditor - ckeditor set css base style on front and back (for nutrition pages on front)
115 lines
4.9 KiB
Vue
115 lines
4.9 KiB
Vue
<template>
|
|
<div>
|
|
<div class="accordion" id="accordionStrates">
|
|
<div v-for="(item, index) in datas" class="card">
|
|
<div class="card-header" :id="'heading' + index">
|
|
<h2 class="mb-0 row">
|
|
<button class="btn btn-link btn-block text-left col-md-11" type="button" data-toggle="collapse" :data-target="'#collapse' + index" aria-expanded="true" :aria-controls="'collapse' + index">
|
|
Strate {{ index + 1 }}
|
|
</button>
|
|
<button type="button" class="close col-md-1" aria-label="Close" @click="removeItem(index)">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</h2>
|
|
</div>
|
|
|
|
<div :id="'collapse' + index" class="collapse" :aria-labelledby="'heading' + index" data-parent="#accordionStrates">
|
|
<div class="card-body">
|
|
<div class="form-group">
|
|
<label class="col-form-label">Titre de la strate</label>
|
|
<input type="text" class="form-control" v-model="item.title" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="col-form-label">Visuel de type JPEG/PNG - 2Mo max. - 220 x 220px max.</label><br/>
|
|
<input type="file" accept="image/jpeg, image/png, image/jpg" @change="processImage($event, index)">
|
|
<br v-if="item.moment_id !== null"/><img v-if="item.moment_id !== null" :src="'/' + item.picture">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="col-form-label">Label du visuel</label>
|
|
<input type="text" class="form-control" v-model="item.picture_label">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="col-form-label">Texte</label><br/>
|
|
<ckeditor :editor="editor" v-model="item.content"></ckeditor>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="col-form-label">Label du bouton</label>
|
|
<input type="text" class="form-control" v-model="item.button_label">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="col-form-label">Lien du bouton</label>
|
|
<input type="text" class="form-control" v-model="item.button_link">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="col-form-label">
|
|
<input type="checkbox" name="status" v-model="item.status">
|
|
Activer la strate
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<div class="form-group text-center">
|
|
<button type="button" class="btn btn-primary text-white" @click="newItem">Ajouter une strate</button>
|
|
<input type="hidden" :name="name" :value="JSON.stringify(datas)">
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
|
|
|
|
export default {
|
|
mounted() {
|
|
console.log('MomentStrates Component mounted.');
|
|
this.datas = JSON.parse(this.dbdatas);
|
|
},
|
|
props: [
|
|
'name',
|
|
'dbdatas',
|
|
],
|
|
data() {
|
|
return {
|
|
datas: [],
|
|
response: null,
|
|
processing: false,
|
|
editor: null
|
|
}
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
methods: {
|
|
newItem() {
|
|
this.datas.push({id: null, moment_id: null, title: '', picture: null, picture_label: '', content: '', button_label: '', button_link: '', status: false});
|
|
},
|
|
removeItem(index) {
|
|
if (confirm("Êtes-vous sûr(e) ?")) {
|
|
this.datas.splice(index, 1);
|
|
}
|
|
},
|
|
processImage(event, index) {
|
|
var file = event.target.files[0];
|
|
var reader = new FileReader();
|
|
reader.readAsDataURL(file);
|
|
reader.onload = function () {
|
|
this.datas[index].picture = reader.result;
|
|
}.bind(this);
|
|
reader.onerror = function (error) {
|
|
console.log('Error: ', error);
|
|
};
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fade-enter-active, .fade-leave-active {
|
|
transition: opacity .5s;
|
|
}
|
|
.fade-enter, .fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|