refactor du store et des templates suite à la refont du backend
This commit is contained in:
Valentin
@@ -4,265 +4,340 @@ import { defineStore } from 'pinia';
|
||||
import REST from '../api/rest-axios';
|
||||
|
||||
export const useContentStore = defineStore('content', {
|
||||
state: () => ({
|
||||
href: '',
|
||||
etape: {
|
||||
title: '',
|
||||
adresse: {},
|
||||
etape_number: '',
|
||||
dates: {
|
||||
start: {
|
||||
d: '',
|
||||
m: '',
|
||||
y: '',
|
||||
},
|
||||
end: {
|
||||
d: '',
|
||||
m: '',
|
||||
y: '',
|
||||
},
|
||||
state: () => ({
|
||||
href: '',
|
||||
etape: {
|
||||
title: '',
|
||||
adresse: {},
|
||||
etape_number: '',
|
||||
vignette: {},
|
||||
couleur: '',
|
||||
previous: {},
|
||||
next: {},
|
||||
dates: {
|
||||
start: {
|
||||
d: '',
|
||||
m: '',
|
||||
y: '',
|
||||
},
|
||||
end: {
|
||||
d: '',
|
||||
m: '',
|
||||
y: '',
|
||||
},
|
||||
},
|
||||
parties: [],
|
||||
},
|
||||
geofield: {},
|
||||
// galeries: [],
|
||||
parties: [],
|
||||
saison: {},
|
||||
thematiques: [],
|
||||
vignette: {},
|
||||
couleur: '',
|
||||
sensibleMap: {},
|
||||
previous: {},
|
||||
next: {},
|
||||
},
|
||||
page: {
|
||||
title: '',
|
||||
text: '',
|
||||
},
|
||||
loading: false,
|
||||
error: null,
|
||||
page: {
|
||||
title: '',
|
||||
vignette: {},
|
||||
parties: [],
|
||||
},
|
||||
loading: false,
|
||||
error: null,
|
||||
}),
|
||||
actions: {
|
||||
async fetchEtapeData(nid) {
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
this.etape = {};
|
||||
this.page = {};
|
||||
try {
|
||||
const response = await REST.get(`/jsonapi/node/etape/`);
|
||||
for (let [index, etape] of response.data.data.entries()) {
|
||||
if (etape.attributes.drupal_internal__nid == nid) {
|
||||
for (let metatag of etape.attributes.metatag) {
|
||||
if (metatag.tag === "link") {
|
||||
this.href = metatag.attributes.href;
|
||||
}
|
||||
}
|
||||
this.etape.title = etape.attributes.title;
|
||||
this.etape.adresse = etape.attributes.field_adresse;
|
||||
this.etape.etape_number = etape.attributes.field_arret_numero;
|
||||
this.etape.dates = {
|
||||
start: this.getCleanDate(etape.attributes.field_dates.value),
|
||||
end: this.getCleanDate(etape.attributes.field_dates.end_value),
|
||||
}
|
||||
this.etape.geofield = etape.attributes.field_geofield;
|
||||
// this.etape.galeries = await this.fetchEtapeContent('field_galleries', etape.relationships);
|
||||
const partiesFetch = await this.fetchEtapeContent('field_parties', etape.relationships);
|
||||
let partiesArray = []
|
||||
async fetchEtapeData(nid) {
|
||||
this.resetStore();
|
||||
try {
|
||||
const response = await REST.get(`/jsonapi/node/etape/`);
|
||||
for (let etape of response.data.data) {
|
||||
if (etape.attributes.drupal_internal__nid == nid) {
|
||||
for (let metatag of etape.attributes.metatag) {
|
||||
if (metatag.tag === "link") {
|
||||
this.href = metatag.attributes.href;
|
||||
}
|
||||
}
|
||||
this.etape.title = etape.attributes.title;
|
||||
this.etape.adresse = etape.attributes.field_adresse;
|
||||
this.etape.etape_number = etape.attributes.field_arret_numero;
|
||||
const vignetteFetch = await this.fetchContent('field_vignette', etape.relationships);
|
||||
this.etape.vignette = {
|
||||
url: vignetteFetch.attributes.uri.url,
|
||||
alt: etape.relationships.field_vignette.data.meta.alt
|
||||
};
|
||||
this.etape.couleur = etape.attributes.field_couleur;
|
||||
|
||||
if (partiesFetch) {
|
||||
for (let partie of partiesFetch) {
|
||||
let partieContent = {
|
||||
title: partie.attributes.field_titre || '',
|
||||
text: partie.attributes.field_texte.value || '',
|
||||
diaporama: [],
|
||||
chiffresCles: [],
|
||||
videos: [],
|
||||
}
|
||||
|
||||
if (partie.relationships.field_diaporama) {
|
||||
const diaporama = await REST.get(partie.relationships.field_diaporama.links.related.href);
|
||||
|
||||
partie.relationships.field_diaporama.data.forEach((element, i) => {
|
||||
partieContent.diaporama[i] = {};
|
||||
partieContent.diaporama[i].alt = element.meta.alt;
|
||||
});
|
||||
|
||||
diaporama.data.data.forEach((element, i) => {
|
||||
partieContent.diaporama[i].url = element.attributes.uri.url;
|
||||
});
|
||||
}
|
||||
|
||||
if (partie.attributes.field_chiffres_cles) {
|
||||
for (let chiffre of partie.attributes.field_chiffres_cles) {
|
||||
partieContent.chiffresCles.push(chiffre.processed);
|
||||
}
|
||||
}
|
||||
|
||||
if (partie.attributes.field_videos) {
|
||||
for (let video of partie.attributes.field_videos) {
|
||||
const videoId = video.split('?v=')[1];
|
||||
const videoUrl = `https://www.youtube.com/embed/${videoId}`;
|
||||
partieContent.videos.push(videoUrl);
|
||||
}
|
||||
}
|
||||
|
||||
partiesArray.push(partieContent);
|
||||
}
|
||||
}
|
||||
|
||||
this.etape.parties = partiesArray;
|
||||
this.etape.saison = await this.fetchEtapeContent('field_saison', etape.relationships);
|
||||
this.etape.thematiques = await this.fetchEtapeContent('field_thematiques', etape.relationships);
|
||||
const vignetteFetch = await this.fetchEtapeContent('field_vignette', etape.relationships);
|
||||
this.etape.vignette = { url: vignetteFetch.attributes.uri.url, alt: etape.attributes.field_vignette_alt };
|
||||
const sensibleMapFetch = await this.fetchEtapeContent('field_carte_sensible', etape.relationships);
|
||||
if (sensibleMapFetch) {
|
||||
this.etape.sensibleMap = { url: sensibleMapFetch.attributes.uri.url, alt: etape.relationships.field_carte_sensible.data.meta.alt };
|
||||
}
|
||||
this.etape.couleur = etape.attributes.field_couleur;
|
||||
|
||||
// get previous and next étape infos
|
||||
// the list from the json api /node is not ordered
|
||||
// and i need authentification to get the json view ordered list
|
||||
// so i get it from the displayed list in the page
|
||||
const orderedEtapesList = document.querySelectorAll('#etapes-liste li');
|
||||
|
||||
if (orderedEtapesList) {
|
||||
const processEtape = async (etapeItemNid, etapesList, key) => {
|
||||
for (let etape of etapesList) {
|
||||
if (etape.attributes.drupal_internal__nid == etapeItemNid) {
|
||||
const vignetteFetch = await REST.get(etape.relationships.field_vignette.links.related.href);
|
||||
this.etape[key] = {
|
||||
nid: etape.attributes.drupal_internal__nid,
|
||||
couleur: etape.attributes.field_couleur,
|
||||
title: etape.attributes.title,
|
||||
postalCode: etape.attributes.field_adresse.postal_code,
|
||||
dates: {
|
||||
this.etape.dates = {
|
||||
start: this.getCleanDate(etape.attributes.field_dates.value),
|
||||
end: this.getCleanDate(etape.attributes.field_dates.end_value),
|
||||
},
|
||||
vignette: {
|
||||
url: vignetteFetch.data.data.attributes.uri.url,
|
||||
alt: etape.relationships.field_vignette.data.meta.alt,
|
||||
},
|
||||
};
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
for (let li of orderedEtapesList) {
|
||||
if (li.querySelector('a').dataset.nodeNid === nid) {
|
||||
const previousEtapeItemNid = li.previousElementSibling?.querySelector('a').dataset.nodeNid;
|
||||
const nextEtapeItemNid = li.nextElementSibling?.querySelector('a').dataset.nodeNid;
|
||||
|
||||
if (previousEtapeItemNid) {
|
||||
await processEtape(previousEtapeItemNid, response.data.data, 'previous');
|
||||
}
|
||||
|
||||
if (nextEtapeItemNid) {
|
||||
await processEtape(nextEtapeItemNid, response.data.data, 'next');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.setActiveItemInMenu();
|
||||
break;
|
||||
const partiesFetch = await this.fetchContent('field_parties', etape.relationships);
|
||||
if (partiesFetch) {
|
||||
this.etape.parties = [];
|
||||
for (let partie of partiesFetch) {
|
||||
const partieType = partie.type.replace(/^paragraph--/, "");
|
||||
let partieContent = {
|
||||
type: partieType,
|
||||
};
|
||||
|
||||
switch (partieType) {
|
||||
case 'carte_sensible':
|
||||
const carteSensibleFetch = await this.fetchContent('field_image_carte', partie.relationships);
|
||||
if (carteSensibleFetch) {
|
||||
partieContent.carteSensible = {
|
||||
url: carteSensibleFetch.attributes.uri.url,
|
||||
alt: partie.relationships.field_image_carte.data.meta.alt,
|
||||
};
|
||||
}
|
||||
break;
|
||||
case 'titre_texte':
|
||||
partieContent.titre = partie.attributes.field_titre;
|
||||
partieContent.texte = partie.attributes.field_texte.value;
|
||||
break;
|
||||
case 'chiffres_cles':
|
||||
const chiffresClesFetch = await this.fetchContent('field_chiffres_clefs', partie.relationships);
|
||||
if (chiffresClesFetch) {
|
||||
partieContent.chiffresCles = [];
|
||||
for (let chiffre of chiffresClesFetch) {
|
||||
partieContent.chiffresCles.push({
|
||||
chiffre: chiffre.attributes.field_chiffre,
|
||||
description: chiffre.attributes.field_description,
|
||||
});
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'diaporama':
|
||||
const diaporamaFetch = await this.fetchContent('field_diaporama', partie.relationships);
|
||||
if (diaporamaFetch) {
|
||||
partieContent.diaporama = [];
|
||||
for (let [index, image] of diaporamaFetch.entries()) {
|
||||
partieContent.diaporama.push({
|
||||
url: image.attributes.uri.url,
|
||||
alt: partie.relationships.field_diaporama.data[index].meta.alt,
|
||||
});
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'entretien':
|
||||
partieContent.entretien = {};
|
||||
const personnesFetch = await this.fetchContent('field_personne_s', partie.relationships);
|
||||
const questionsReponsesFetch = await this.fetchContent('field_questions_reponses', partie.relationships);
|
||||
if (personnesFetch && questionsReponsesFetch) {
|
||||
partieContent.entretien.personnes = [];
|
||||
for (let personne of personnesFetch) {
|
||||
const portraitFetch = await this.fetchContent('field_portrait', personne.relationships);
|
||||
if (portraitFetch) {
|
||||
partieContent.entretien.personnes.push({
|
||||
portrait: portraitFetch.attributes.uri.url,
|
||||
alt: personne.relationships.field_portrait.data.meta.alt,
|
||||
description: personne.attributes.field_description,
|
||||
});
|
||||
}
|
||||
}
|
||||
partieContent.entretien.questionsReponses = [];
|
||||
for (let qr of questionsReponsesFetch) {
|
||||
partieContent.entretien.questionsReponses.push({
|
||||
question: qr.attributes.field_question,
|
||||
reponse: qr.attributes.field_reponse.value,
|
||||
});
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'exergue':
|
||||
partieContent.exergue = partie.attributes.field_texte_exergue.value;
|
||||
break;
|
||||
case 'video':
|
||||
partieContent.videos = [];
|
||||
for (let video of partie.attributes.field_videos) {
|
||||
const videoId = video.split('?v=')[1];
|
||||
const videoUrl = `https://www.youtube.com/embed/${videoId}`;
|
||||
partieContent.videos.push(videoUrl);
|
||||
}
|
||||
break;
|
||||
}
|
||||
this.etape.parties.push(partieContent);
|
||||
}
|
||||
}
|
||||
|
||||
// get previous and next étape infos
|
||||
// the list from the json api /node is not ordered
|
||||
// and i need authentification to get the json view ordered list
|
||||
// so i get it from the displayed list in the page
|
||||
const orderedEtapesList = document.querySelectorAll('#etapes-liste li');
|
||||
|
||||
if (orderedEtapesList) {
|
||||
const processEtape = async (etapeItemNid, etapesList, key) => {
|
||||
for (let etape of etapesList) {
|
||||
if (etape.attributes.drupal_internal__nid == etapeItemNid) {
|
||||
const vignetteFetch = await REST.get(etape.relationships.field_vignette.links.related.href);
|
||||
this.etape[key] = {
|
||||
nid: etape.attributes.drupal_internal__nid,
|
||||
couleur: etape.attributes.field_couleur,
|
||||
title: etape.attributes.title,
|
||||
postalCode: etape.attributes.field_adresse.postal_code,
|
||||
dates: {
|
||||
start: this.getCleanDate(etape.attributes.field_dates.value),
|
||||
end: this.getCleanDate(etape.attributes.field_dates.end_value),
|
||||
},
|
||||
vignette: {
|
||||
url: vignetteFetch.data.data.attributes.uri.url,
|
||||
alt: etape.relationships.field_vignette.data.meta.alt,
|
||||
},
|
||||
};
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
for (let li of orderedEtapesList) {
|
||||
if (li.querySelector('a').dataset.nodeNid == nid) {
|
||||
const previousEtapeItemNid = li.previousElementSibling?.querySelector('a').dataset.nodeNid;
|
||||
const nextEtapeItemNid = li.nextElementSibling?.querySelector('a').dataset.nodeNid;
|
||||
if (previousEtapeItemNid) {
|
||||
await processEtape(previousEtapeItemNid, response.data.data, 'previous');
|
||||
}
|
||||
if (nextEtapeItemNid) {
|
||||
await processEtape(nextEtapeItemNid, response.data.data, 'next');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.setActiveItemInMenu(nid);
|
||||
} catch (error) {
|
||||
this.error = 'Failed to fetch data';
|
||||
console.error('Issue with getNodeData', error);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
async fetchStaticData(nid) {
|
||||
this.resetStore();
|
||||
try {
|
||||
const response = await REST.get(`/jsonapi/node/static/`);
|
||||
for (let page of response.data.data) {
|
||||
if (page.attributes.drupal_internal__nid == nid) {
|
||||
for (let metatag of page.attributes.metatag) {
|
||||
if (metatag.tag === "link") {
|
||||
this.href = metatag.attributes.href;
|
||||
}
|
||||
}
|
||||
this.page.title = page.attributes.title;
|
||||
const vignetteFetch = await this.fetchContent('field_vignette', page.relationships);
|
||||
this.page.vignette = {
|
||||
url: vignetteFetch.attributes.uri.url,
|
||||
alt: page.relationships.field_vignette.data.meta.alt
|
||||
};
|
||||
|
||||
const partiesFetch = await this.fetchContent('field_parties_static', page.relationships);
|
||||
if (partiesFetch) {
|
||||
this.page.parties = [];
|
||||
|
||||
|
||||
for (let partie of partiesFetch) {
|
||||
const partieType = partie.type.replace(/^paragraph--/, "");
|
||||
let partieContent = {
|
||||
type: partieType,
|
||||
};
|
||||
|
||||
switch (partieType) {
|
||||
case 'titre_texte':
|
||||
partieContent.titre = partie.attributes.field_titre;
|
||||
partieContent.texte = partie.attributes.field_texte.value;
|
||||
break;
|
||||
case 'diaporama':
|
||||
const diaporamaFetch = await this.fetchContent('field_diaporama', partie.relationships);
|
||||
if (diaporamaFetch) {
|
||||
partieContent.diaporama = [];
|
||||
for (let [index, image] of diaporamaFetch.entries()) {
|
||||
partieContent.diaporama.push({
|
||||
url: image.attributes.uri.url,
|
||||
alt: partie.relationships.field_diaporama.data[index].meta.alt,
|
||||
});
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'video':
|
||||
partieContent.videos = [];
|
||||
for (let video of partie.attributes.field_videos) {
|
||||
const videoId = video.split('?v=')[1];
|
||||
const videoUrl = `https://www.youtube.com/embed/${videoId}`;
|
||||
partieContent.videos.push(videoUrl);
|
||||
}
|
||||
break;
|
||||
}
|
||||
this.page.parties.push(partieContent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.setActiveItemInMenu(nid);
|
||||
} catch (error) {
|
||||
this.error = 'Failed to fetch data';
|
||||
console.error('Issue with getNodeData', error);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
async fetchContent(field, relationships) {
|
||||
if (relationships[field].data) {
|
||||
try {
|
||||
const contentLink = relationships[field].links.related.href;
|
||||
const contentFetch = await REST.get(contentLink);
|
||||
return contentFetch.data.data;
|
||||
} catch (error) {
|
||||
this.error = 'Failed to fetch data';
|
||||
console.error('Issue with getNodeData', error);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
this.error = 'Failed to fetch data';
|
||||
console.error('Issue with getNodeData', error);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
async fetchStaticData(nid) {
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
this.etape = {};
|
||||
this.page = {};
|
||||
try {
|
||||
const response = await REST.get(`/jsonapi/node/static/`);
|
||||
for (let staticContent of response.data.data) {
|
||||
if (staticContent.attributes.drupal_internal__nid == nid) {
|
||||
staticContent.attributes.metatag.forEach(item => {
|
||||
if (item.tag === 'meta') {
|
||||
this.page.title = item.attributes.content.split(' |')[0];
|
||||
}
|
||||
if (item.tag === 'link') {
|
||||
this.href = item.attributes.href;
|
||||
}
|
||||
})
|
||||
this.page.text = staticContent.attributes.field_texte.value;
|
||||
}
|
||||
}
|
||||
this.setActiveItemInMenu();
|
||||
} catch (error) {
|
||||
this.error = 'Failed to fetch data';
|
||||
console.error('Issue with getNodeData', error);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
emptyAll() {
|
||||
this.etape = {};
|
||||
this.page = {};
|
||||
this.setActiveItemInMenu();
|
||||
},
|
||||
setActiveItemInMenu() {
|
||||
const title = this.etape.title || this.page.title;
|
||||
|
||||
const generalLinks = document.querySelectorAll('#menu > ul > li > a');
|
||||
if (Object.entries(this.etape).length === 0 && Object.entries(this.page).length === 0) {
|
||||
for (let link of generalLinks) {
|
||||
link.classList.remove('is-active');
|
||||
}
|
||||
generalLinks[0].classList.add('is-active');
|
||||
} else {
|
||||
for (let link of generalLinks) {
|
||||
if (link.innerText === title) {
|
||||
link.classList.add('is-active');
|
||||
} else {
|
||||
},
|
||||
emptyAll(nid) {
|
||||
this.etape = {};
|
||||
this.page = {};
|
||||
this.setActiveItemInMenu(nid);
|
||||
},
|
||||
setActiveItemInMenu(nid) {
|
||||
const title = this.etape.title || this.page.title;
|
||||
|
||||
const generalLinks = document.querySelectorAll('#menu > ul > li > a');
|
||||
if (Object.entries(this.etape).length === 0 && Object.entries(this.page).length === 0) {
|
||||
for (let link of generalLinks) {
|
||||
link.classList.remove('is-active');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const etapeLinks = document.querySelectorAll('#etapes-liste li');
|
||||
for (let link of etapeLinks) {
|
||||
const a = link.querySelector('a');
|
||||
if (a.innerText === title) {
|
||||
link.classList.remove('inactive');
|
||||
generalLinks[0].classList.add('is-active');
|
||||
} else {
|
||||
link.classList.add('inactive');
|
||||
for (let link of generalLinks) {
|
||||
if (link.dataset.nodeNid == nid) {
|
||||
link.classList.add('is-active');
|
||||
} else {
|
||||
link.classList.remove('is-active');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
const inactiveLinks = document.querySelectorAll('#etapes-liste li.inactive');
|
||||
if (inactiveLinks.length === etapeLinks.length) {
|
||||
for (let link of inactiveLinks) {
|
||||
link.classList.remove('inactive');
|
||||
|
||||
const etapeLinks = document.querySelectorAll('#etapes-liste li');
|
||||
for (let link of etapeLinks) {
|
||||
const a = link.querySelector('a');
|
||||
if (a.innerText === title) {
|
||||
link.classList.remove('inactive');
|
||||
} else {
|
||||
link.classList.add('inactive');
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async fetchEtapeContent(field, relationships) {
|
||||
if (relationships[field].data) {
|
||||
try {
|
||||
const contentLink = relationships[field].links.related.href;
|
||||
const contentFetch = await REST.get(contentLink);
|
||||
return contentFetch.data.data;
|
||||
} catch (error) {
|
||||
this.error = 'Failed to fetch data';
|
||||
console.error('Issue with getNodeData', error);
|
||||
const inactiveLinks = document.querySelectorAll('#etapes-liste li.inactive');
|
||||
if (inactiveLinks.length === etapeLinks.length) {
|
||||
for (let link of inactiveLinks) {
|
||||
link.classList.remove('inactive');
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
getCleanDate(date) {
|
||||
return {
|
||||
d: date.split('-')[2],
|
||||
m: new Intl.DateTimeFormat('fr-FR', { month: 'long' }).format(new Date(date)),
|
||||
y: date.split('-')[0],
|
||||
}
|
||||
}
|
||||
},
|
||||
resetStore() {
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
this.href = '';
|
||||
this.etape = {};
|
||||
this.page = {};
|
||||
},
|
||||
getCleanDate(date) {
|
||||
return {
|
||||
d: date.split('-')[2],
|
||||
m: new Intl.DateTimeFormat('fr-FR', { month: 'long' }).format(new Date(date)),
|
||||
y: date.split('-')[0],
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user