Kontext

Drupal ist ein hervorragendes Content-Management-System (Entitäten), aber die Verwaltung dieser Inhalte erfordert gute Kenntnisse der Drupal-Konzepte. Dies ist für Drupal-Neulinge mit einem erheblichen Aufwand verbunden.

Um dieses Problem zu lösen, bieten wir ein Modul an, mit dem Sie die meisten Entitäten schnell bearbeiten können.

Voraussetzungen

Sie müssen im Stammverzeichnis Ihres vuejs-Projekts eine Datei namens request.js erstellen. Ihre Hauptaufgabe besteht darin, die versch

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

Sie müssen die folgenden Importe in Ihre Store-Datei (vuex) einfügen:

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

Ziel

Einen Editor für einen Absatztyp einrichten.

Schritt 1: Wiederherstellung von Inhalten

Sie müssen den Inhalt von \Drupal\apivuejs\Services\GenerateForm::getForm. Um dies zu erreichen, wird eine Route bereitgestellt. /vuejs-entity/form/get-form/from/entity-id und sie erfordert die folgenden Parameter :

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

Mit dem Attribut „duplicate“ kann ein neues Modell aus einem bestehenden Modell erstellt werden, wenn es auf „true“ gesetzt ist, oder das bestehende Modell geändert werden, wenn es auf „false“ gesetzt ist.

Je nach Bedarf können Sie weitere Routen erstellen.

Beispiel für die Verwendung auf der Ebene der Vuex-Aktionen.

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

Mit dieser Funktion können die Daten für die definierten Parameter abgerufen werden.

Schritt 2 : Aufbau und Anzeige der

Für diesen Schritt können Sie direkt diese Funktion zum Erstellen der Felder verwenden:

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

Für die Anzeige wird Folgendes verwendet

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

Schritt 3 : Felder aktualisieren ändern

Auf dieser Ebene handelt es sich nicht um eine Sicherung, sondern lediglich um eine Änderung eines Werts. Das heißt, ein Benutzer hat den Wert des Titelfelds geändert.

Diese Funktion verwenden:

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

Schritt 4 : Datensicherung

Diese Funktion verwenden :

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