Zum Hauptinhalt springen

Umstieg auf das neue React-File-Cover

Vorgehen​

Ist eine Migration überhaupt notwendig?​

Als erstes muss überprüft werden, ob ein Skript ou.cust.ptpINV.filetype.field.html.cover.ts existiert. Wenn nein, ist keine Migration notwendig.

Migration durchführen​

1. In der Funktion getCockpit muss folgender Code angepasst werden​

Vorher:

badges: {
      discount: discountBadge,
      netAmount: netAmountBadge
    },
    /* Code ab hier anpassen */
    statusCodes,
    verification: verifications,
    /* Code anpassen Ende */

Nachher:

badges: {
      discount: discountBadge,
      netAmount: netAmountBadge
    },
    /* Neuer Code */
    statusCodes: {
      table: {
        select: false,
        showOptions: false,
        showHeader: false,
        showFooter: false,
        hover: false,
        border: false,
        bordered: false,
        striped: false,
        columns: {
          status: {
            type: "icon",
            label: "Status",
            width: "30px"
          },
          message: {
            label: "Info",
            attributes: {
              title: (_value, opts) => {
                return opts.row.code || "";
              }
            }
          }
        },
        rows: statusCodes
      }
    },
    verification: {
      table: {
        select: false,
        showOptions: false,
        showHeader: false,
        showFooter: false,
        hover: false,
        border: false,
        bordered: false,
        striped: false,
        rowStyle: opts => {
          return opts.row.isCurrent ? "font-weight: bold;" : "";
        },
        columns: {
          status: {
            type: "icon",
            label: "Status",
            width: "30px"
          },
          message: {
            disableInternationalization: true,
            label: "Info",
            attributes: {
              title: (value, opts) => {
                return opts.row.tooltip || "";
              }
            }
          }
        },
        rows: verifications
      }
    },
    /* Ende neuer Code */

2. In der Funktion getHistory muss folgender Code angepasst werden​

Vorher:

/* Code ab hier anpassen */
rowStyle: opt => {
      // @ts-expect-error untyped in client
      if (!window.ptpInvoiceCoverInstance.history.selectedInvoice) {
        return "";
      }
      // @ts-expect-error untyped in client
      if (window.ptpInvoiceCoverInstance.history.selectedInvoice.invoiceNumber == opt.row.invoiceNumber) {
        return "background-color: #f2f2f2";
      }
      return "";
    },
/* Code anpassen Ende */

Nachher:

/* Neuer Code */
rowStyle: opt => {
      if (!opt.table.additionalParams.selectedInvoice) {
        return "";
      }
      if (typeof opt.table.additionalParams.selectedInvoice === "object" && "invoiceNumber" in opt.table.additionalParams.selectedInvoice && opt.table.additionalParams.selectedInvoice.invoiceNumber === opt.row.invoiceNumber) {
        return "background-color: #f2f2f2";
      }
      return "";
    },
/* Ende neuer Code */

3. In den Funktionen getVerificationData und getVerificationDataOther muss jeweils folgender Code angepasst werden​

Vorher:

rowStyle: opt => {
      /* Code ab hier anpassen */
      // @ts-expect-error untyped in client
      if (window.ptpInvoiceCoverInstance.verification.current == opt.row.editor) {
        return "cursor: default; border-left: 10px solid #4caf50;";
      }
      /* Code anpassen Ende */
      return "";
    },
    columns: {
      editor: {
        label: "de:Rechnungsprüfer;en:verification user",
        render: opt => {
          /* Code ab hier anpassen */
          // @ts-expect-error untyped in client
          if (window.ptpInvoiceCoverInstance.verification.current == opt.row.editor) {
            return `✔ <b>${opt.row.login}</b>`;
          }
          /* Code anpassen Ende */
          return opt.row.login;
        },
        attributes: {
          title: (value, opt) => {
            /* Code ab hier anpassen */
            // @ts-expect-error untyped in client
            if (window.ptpInvoiceCoverInstance.verification.current == opt.row.editor) {
              return `${opt.row.login} ist der aktuelle Rechnungsprüfer.`;
            }
            /* Code anpassen Ende */
            return "";
          }
        }
      },

Nachher:

rowStyle: opt => {
      /* Neuer Code */
      if (opt.table.additionalParams.current === opt.row.editor) {
        return "cursor: default; border-left: 10px solid #4caf50;";
      }
      /* Ende neuer Code */
      return "";
    },
    columns: {
      editor: {
        label: "de:Rechnungsprüfer;en:verification user",
        render: opt => {
          /* Neuer Code */
          if (opt.table.additionalParams.current === opt.row.editor) {
            return `✔ <b>${opt.row.login}</b>`;
          }
          /* Ende neuer Code */
          return opt.row.login;
        },
        attributes: {
          title: (value, opt) => {
            /* Neuer Code */
            if (opt.table.additionalParams.current === opt.row.editor) {
              return `${opt.row.login} ist der aktuelle Rechnungsprüfer.`;
            }
            /* Ende neuer Code */
            return "";
          }
        }
      },

4. Hier muss noch der Export angepasst werden​

Vorher:

/* Code ab hier anpassen */
module.exports = docFile => {
/* Ende Code anpassen */
  return {
    // templates: {
    //     global: {
    //         start: getHtmlTemplate("ou.cust.ptpINV.filetype.field.html.cover.globalStart"),
    //         end: getHtmlTemplate("ou.cust.ptpINV.filetype.field.html.cover.globalEnd"),
    //     },
    //     vendor: {
    //         start: getHtmlTemplate("ou.cust.ptpINV.filetype.field.html.cover.vendorStart"),
    //         end: get

Nachher:

/* Neuer Code */
exports.getData = getData;

function getData(docFile) {
/* Ende neuer Code */
  return {

5. Überprüfen, ob im HTML-Code selbst customizing vorgenommen wurde​

Dazu überprüfen, ob in diesem Skript im Daten-Objekt, das das Cover definiert, eine Eigenschaft templateUrl existiert, z.B. ou.cust.ptpINV.cover.html. Das bedeutet, es wurden Anpassungen am Invoice-Cover über ein Custom-Template vorgenommen. Andernfalls ist keine weitere Migration notwendig.

6. HTML-Customizing migrieren​

Falls ein anderes Custom Property hinterlegt ist als ou.sp.ptpINV.cover.html, muss der Unterschied zwischen dem Inhalt der beiden Custom Properties evaluiert und anhand der Anleitung unter React File-Cover Customizing eine Customizing-Strategie gewählt werden. Auch CSS-Anpassungen müssen hier beachtet werden.

tipp

Je nach Komplexität des vorhandenen Customizings lohnt es sich möglicherweise, hier einen Entwickler hinzuzuziehen.

7. Weitere Breaking Changes​

gefahr

Der clientseitige Zugriff auf das Cover über window.ptpInvoiceCoverInstance ist nicht mehr möglich.