Mettre en place un éditeur de contenus (entités) sur Drupal 9 via vuejs

Contexte

Drupal est un excellent gestionnaire de contenus (entitées),  mais la gestion de ces contenus necessites de bonne connaissance des concepts drupal. Cela est un effort considerable pour les utilisateurs novice sur Drupal.

Pour apporter une solution à cela probleme nous proposons un module qui vous permet d'editer rapidement la pluspart des entitées.

Pre-requis

vous devez creer à la racine de votre projet vuejs un fichier request.js. Son role principale est de fournir les differentes methodes (get, post, delete).

import { AjaxToastBootStrap } from "wbuutilities";
//
export default {
  ...AjaxToastBootStrap,
  languageId:
    window.drupalSettings &&
    window.drupalSettings.path &&
    window.drupalSettings.path.currentLanguage
      ? window.drupalSettings.path.currentLanguage
      : null,
  // TestDomain: "http://wb-horizon.kksa",
  // TestDomain: "http://test376.wb-horizon.kksa", // test specifique
  TestDomain: "http://" + window.location.host,
  debug: true,
};

Vous devez ajouter dans votre fichier de store (vuex) les imports suivant :

...
import request from "../request";
import generateField from "components_h_vuejs/src/js/FormUttilities";
import loadField from "components_h_vuejs/src/components/fieldsDrupal/loadField";
...

Objectif

Mettre en place un editeur pour un type de paragraph.

Etape 1 : recuperation du contenu

Vous devez recuperer le contenu de \Drupal\apivuejs\Services\GenerateForm::getForm. Pour effectuer cela une route est fourni /vuejs-entity/form/get-form/from/entity-id et elle requirert les paramettres suivant :

{
        id: **, l'id de l'entite
        entity_type_id: le type d'entité,
        duplicate: false,
      }

L'attribut duplicate permet de creer un nouveau à partir d'un model s'il est à true ou de modifier celui existant s'il est à false.

En fonction de vos besoins vous pouvez creer d'autre route.

Example d'utilisation au niveau des actions vuex.

loadForm({ commit, state, dispatch }) {
      commit("ACTIVE_RUNNING");
      const param = {
        id: state.currentEntityInfo.id,
        entity_type_id: state.currentEntityInfo.entityTypeId,
        duplicate: false,
      };

      return request
        .bPost("/vuejs-entity/form/get-form/from/entity-id", param, {}, false)
        .then((resp) => {
          commit("DISABLE_RUNNING");
          commit("SET_CURRENT_ENTITY_FORM", resp.data);
          //on declenche la construction des champs.
          dispatch("buildFields");
        });
    },

Cette fonction permet de recuperer les données pour les parametres definit.

Etape 2 : Construction et affichages des champs.

Pour cette etape vous pouvez directement utiliser cette fonction pour la construction des champs :

buildFields({ commit, state }) {
      var fields = [];
      loadField.setConfig(request);
      commit("RUN_BUILDING_FIELDS");
      if (state.currentEntityForm.length) {
        generateField
          .generateFields(state.currentEntityForm, fields)
          .then((resp) => {
            commit("SET_FIELDS", resp);
          });
      }
    },

Pour l'affichage on utilisera :

<component
        :is="container.template"
        v-for="(container, i) in fields"
        :key="i"
        :entity="container.entity"
        :class-entity="['pt-1']"
      >
        <component
          :is="render.template"
          v-for="(render, k) in container.fields"
          :key="k"
          :field="render.field"
          :model="render.model"
          :entities="render.entities"
          :class-css="['mb-5']"
          :parent-name="i + '.entity.'"
          :parent-child-name="i + '.entities.'"
          namespace-store=""
          @addNewValue="addNewValue($event, render)"
          @removeField="removeField($event, render)"
          @array_move="array_move($event, render)"
        ></component>
      </component>

Etape 3 : mettre à jour les champs modifier

à ce niveau cela n'est pas la sauvegarde, il s'agit juste d'une modification d'une valeur. i.e un utilisateur a changé la valeur du champs titre.

utiliser cette function :

SET_VALUE(state, payload) {
      console.log(" SET_VALUE payload ", payload);
      function updateSettings(settings, keyPath, value) {
        const keys = keyPath.split(".");
        const targetKey = keys.pop();
        let current = settings;
        for (let i = 0; i < keys.length; ++i) {
          current = current[keys[i]];
          if (!current) {
            throw new Error(" Specified key not found. " + keys[i]);
          }
        }
        current[targetKey] = value;
      }
      updateSettings(state.currentEntityForm, payload.fieldName, payload.value);
    },

Etape 4 : Sauvegarde des données

Utiliser cette fonction :

saveEntities({ commit, state }) {
      return new Promise((resolv, reject) => {
        commit("ACTIVE_RUNNING");
        generateField
          .getNumberEntities(state.currentEntityForm)
          .then((numbers) => {
            state.run_entity.numbers = numbers;
            generateField
              .prepareSaveEntities(
                this,
                state.currentEntityForm,
                state.run_entity
              )
              .then((resp) => {
                commit("DISABLE_RUNNING");
                resolv(resp);
              })
              .catch((er) => {
                commit("DISABLE_RUNNING");
                reject(er);
              });
          })
          .catch((er) => {
            commit("DISABLE_RUNNING");
            reject(er);
          });
      });
    },