Background

Drupal is an excellent content management system, but managing content requires a good understanding of Drupal concepts. This can be a considerable challenge for novice Drupal users.

To solve this problem, we offer a module that allows you to quickly edit most entities.

Prerequisites

You must create a file called request.js at the root of your vuejs project. Its main role is to provide the different methods (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,
};

You must add the following imports to your store file (vuex):

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

Objective

Set up an editor for a paragraph type.

Step 1 : content recovery

You must recover the contents of \Drupal\apivuejs\Services\GenerateForm::getForm. PTo do this, a route is provided /vuejs-entity/form/get-form/from/entity-id and it requires the following parameters :

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

The duplicate attribute allows you to create a new one from a model if it is true, or modify the existing one if it is false.

Depending on your needs, you can create other routes.

Example of use at the vuex action level.

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");
        });
    },

This function allows you to retrieve data for

Step 2 : Field construction and displays.

For this step, you can directly use this function to construct the fields. :

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);
          });
      }
    },

For display, we will use :

<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>

Step 3 : update fields edit

At this level, it is not a backup, it is just a modification of a value. i.e. a user has changed the value of the title field.

use this 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 : Data backup

Use this feature :

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);
          });
      });
    },