strapi-relation-names 1.2.0 → 1.2.2

package/dist/admin/{SettingsPage-BGsuRnwx.js → SettingsPage-BebR4ghK.js}

@@ -2,10 +2,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const designSystem = require("@strapi/design-system");
+const styled = require("styled-components");
 const react = require("react");
 const reactIntl = require("react-intl");
 const admin = require("@strapi/strapi/admin");
-const index = require("./index-DFr0KRky.js");
+const index = require("./index-DfSAe961.js");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
 const FIELD_TYPES = /* @__PURE__ */ new Set([
   "string",
   "text",
@@ -120,6 +123,21 @@ const getAvailableFields = (schema, schemas, prefix = "", ancestors = /* @__PURE
   return [...systemFields, ...fields.filter((field) => !systemFields.includes(field))];
 };
 const PLUGIN_SETTINGS_PATH = "/strapi-relation-names/settings";
+const AvailableField = styled__default.default(designSystem.Typography)`
+  display: inline-block;
+  padding: 1px 4px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+
+  &:hover,
+  &[aria-pressed='true'] {
+    border-color: currentColor;
+  }
+`;
 const getRelationTarget = (attribute) => attribute.targetModel ?? attribute.target;
 const SettingsPage = () => {
   const { formatMessage } = reactIntl.useIntl();
@@ -201,7 +219,24 @@ const SettingsPage = () => {
   };
   return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Main, { "aria-labelledby": "relation-names-title", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 8, children: [
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", tag: "h1", id: "relation-names-title", children: formatMessage({ id: index.getTranslation("settings.title") }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, paddingBottom: 6, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: formatMessage({ id: index.getTranslation("settings.description") }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.Flex,
+      {
+        gap: 2,
+        width: "100%",
+        paddingBottom: 6,
+        style: {
+          "justify-content": "space-between",
+          position: "sticky",
+          top: ".5rem",
+          zIndex: 1
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: formatMessage({ id: index.getTranslation("settings.description") }) }),
+          !isLoading && rows.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { loading: isSaving, disabled: isSaving, onClick: () => void save(), children: formatMessage({ id: index.getTranslation("settings.save") }) }) : null
+        ]
+      }
+    ),
     isLoading ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: formatMessage({ id: index.getTranslation("settings.loading") }) }) : null,
     error ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "danger600", tag: "p", children: error }) : null,
     !isLoading && rows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: formatMessage({ id: index.getTranslation("settings.noRelations") }) }) : null,
@@ -209,6 +244,12 @@ const SettingsPage = () => {
       const targetAttributes = target?.attributes ?? {};
       const template = settings.relations[source.uid]?.[fieldName] ?? "";
       const validationError = template ? validateTemplate(template, targetAttributes, schemaMap) : null;
+      const availableFields = getAvailableFields(target, schemaMap);
+      const toggleField = (field) => {
+        const placeholder = `{${field}}`;
+        const nextTemplate = template.includes(placeholder) ? template.replaceAll(placeholder, "").replace(/\s{2,}/g, " ").trim() : `${template.trim()}${template.trim() ? " " : ""}${placeholder}`;
+        updateTemplate(source.uid, fieldName, nextTemplate);
+      };
       return /* @__PURE__ */ jsxRuntime.jsxs(
         designSystem.Box,
         {
@@ -233,7 +274,9 @@ const SettingsPage = () => {
                 error: validationError ?? void 0,
                 name: `${source.uid}.${fieldName}`,
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({ id: index.getTranslation("settings.template") }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
+                    id: index.getTranslation("settings.template")
+                  }) }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     designSystem.TextInput,
                     {
@@ -247,18 +290,34 @@ const SettingsPage = () => {
                 ]
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: [
-              formatMessage({ id: index.getTranslation("settings.availableFields") }),
-              ":",
-              " ",
-              getAvailableFields(target, schemaMap).join(", ")
-            ] }) })
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Root, { collapsible: true, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: "available-fields", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { children: formatMessage({
+                id: index.getTranslation("settings.availableFields")
+              }) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: availableFields.map((field, index2) => {
+                const placeholder = `{${field}}`;
+                return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+                  index2 > 0 ? ", " : null,
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    AvailableField,
+                    {
+                      as: "button",
+                      type: "button",
+                      variant: "pi",
+                      textColor: "neutral600",
+                      "aria-pressed": template.includes(placeholder),
+                      onClick: () => toggleField(field),
+                      children: field
+                    }
+                  )
+                ] }, field);
+              }) }) })
+            ] }) }) })
           ]
         },
         `${source.uid}.${fieldName}`
       );
-    }) : null,
-    !isLoading && rows.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "flex-end", paddingTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { loading: isSaving, disabled: isSaving, onClick: () => void save(), children: formatMessage({ id: index.getTranslation("settings.save") }) }) }) : null
+    }) : null
   ] }) });
 };
 exports.SettingsPage = SettingsPage;

package/dist/admin/{SettingsPage-Blk-4H_X.mjs → SettingsPage-DFZP5CZs.mjs}

@@ -1,9 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Main, Box, Typography, Field, TextInput, Flex, Button } from "@strapi/design-system";
-import { useState, useCallback, useEffect, useMemo } from "react";
+import { Main, Box, Typography, Flex, Button, Field, TextInput, Accordion } from "@strapi/design-system";
+import styled from "styled-components";
+import { useState, useCallback, useEffect, useMemo, Fragment } from "react";
 import { useIntl } from "react-intl";
 import { useFetchClient } from "@strapi/strapi/admin";
-import { g as getTranslation } from "./index-DdvdGn6T.mjs";
+import { g as getTranslation } from "./index-CiS6cuI9.mjs";
 const FIELD_TYPES = /* @__PURE__ */ new Set([
   "string",
   "text",
@@ -118,6 +119,21 @@ const getAvailableFields = (schema, schemas, prefix = "", ancestors = /* @__PURE
   return [...systemFields, ...fields.filter((field) => !systemFields.includes(field))];
 };
 const PLUGIN_SETTINGS_PATH = "/strapi-relation-names/settings";
+const AvailableField = styled(Typography)`
+  display: inline-block;
+  padding: 1px 4px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+
+  &:hover,
+  &[aria-pressed='true'] {
+    border-color: currentColor;
+  }
+`;
 const getRelationTarget = (attribute) => attribute.targetModel ?? attribute.target;
 const SettingsPage = () => {
   const { formatMessage } = useIntl();
@@ -199,7 +215,24 @@ const SettingsPage = () => {
   };
   return /* @__PURE__ */ jsx(Main, { "aria-labelledby": "relation-names-title", children: /* @__PURE__ */ jsxs(Box, { padding: 8, children: [
     /* @__PURE__ */ jsx(Typography, { variant: "alpha", tag: "h1", id: "relation-names-title", children: formatMessage({ id: getTranslation("settings.title") }) }),
-    /* @__PURE__ */ jsx(Box, { paddingTop: 2, paddingBottom: 6, children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: formatMessage({ id: getTranslation("settings.description") }) }) }),
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        gap: 2,
+        width: "100%",
+        paddingBottom: 6,
+        style: {
+          "justify-content": "space-between",
+          position: "sticky",
+          top: ".5rem",
+          zIndex: 1
+        },
+        children: [
+          /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: formatMessage({ id: getTranslation("settings.description") }) }),
+          !isLoading && rows.length > 0 ? /* @__PURE__ */ jsx(Button, { loading: isSaving, disabled: isSaving, onClick: () => void save(), children: formatMessage({ id: getTranslation("settings.save") }) }) : null
+        ]
+      }
+    ),
     isLoading ? /* @__PURE__ */ jsx(Typography, { children: formatMessage({ id: getTranslation("settings.loading") }) }) : null,
     error ? /* @__PURE__ */ jsx(Typography, { textColor: "danger600", tag: "p", children: error }) : null,
     !isLoading && rows.length === 0 ? /* @__PURE__ */ jsx(Typography, { children: formatMessage({ id: getTranslation("settings.noRelations") }) }) : null,
@@ -207,6 +240,12 @@ const SettingsPage = () => {
       const targetAttributes = target?.attributes ?? {};
       const template = settings.relations[source.uid]?.[fieldName] ?? "";
       const validationError = template ? validateTemplate(template, targetAttributes, schemaMap) : null;
+      const availableFields = getAvailableFields(target, schemaMap);
+      const toggleField = (field) => {
+        const placeholder = `{${field}}`;
+        const nextTemplate = template.includes(placeholder) ? template.replaceAll(placeholder, "").replace(/\s{2,}/g, " ").trim() : `${template.trim()}${template.trim() ? " " : ""}${placeholder}`;
+        updateTemplate(source.uid, fieldName, nextTemplate);
+      };
       return /* @__PURE__ */ jsxs(
         Box,
         {
@@ -231,7 +270,9 @@ const SettingsPage = () => {
                 error: validationError ?? void 0,
                 name: `${source.uid}.${fieldName}`,
                 children: [
-                  /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({ id: getTranslation("settings.template") }) }),
+                  /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
+                    id: getTranslation("settings.template")
+                  }) }),
                   /* @__PURE__ */ jsx(
                     TextInput,
                     {
@@ -245,18 +286,34 @@ const SettingsPage = () => {
                 ]
               }
             ),
-            /* @__PURE__ */ jsx(Box, { paddingTop: 2, children: /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", children: [
-              formatMessage({ id: getTranslation("settings.availableFields") }),
-              ":",
-              " ",
-              getAvailableFields(target, schemaMap).join(", ")
-            ] }) })
+            /* @__PURE__ */ jsx(Box, { paddingTop: 2, children: /* @__PURE__ */ jsx(Accordion.Root, { collapsible: true, children: /* @__PURE__ */ jsxs(Accordion.Item, { value: "available-fields", children: [
+              /* @__PURE__ */ jsx(Accordion.Header, { children: /* @__PURE__ */ jsx(Accordion.Trigger, { children: formatMessage({
+                id: getTranslation("settings.availableFields")
+              }) }) }),
+              /* @__PURE__ */ jsx(Accordion.Content, { children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: availableFields.map((field, index) => {
+                const placeholder = `{${field}}`;
+                return /* @__PURE__ */ jsxs(Fragment, { children: [
+                  index > 0 ? ", " : null,
+                  /* @__PURE__ */ jsx(
+                    AvailableField,
+                    {
+                      as: "button",
+                      type: "button",
+                      variant: "pi",
+                      textColor: "neutral600",
+                      "aria-pressed": template.includes(placeholder),
+                      onClick: () => toggleField(field),
+                      children: field
+                    }
+                  )
+                ] }, field);
+              }) }) })
+            ] }) }) })
           ]
         },
         `${source.uid}.${fieldName}`
       );
-    }) : null,
-    !isLoading && rows.length > 0 ? /* @__PURE__ */ jsx(Flex, { justifyContent: "flex-end", paddingTop: 4, children: /* @__PURE__ */ jsx(Button, { loading: isSaving, disabled: isSaving, onClick: () => void save(), children: formatMessage({ id: getTranslation("settings.save") }) }) }) : null
+    }) : null
   ] }) });
 };
 export {

package/dist/admin/{de-a3KtzZ7N.mjs → de-Bc81LkbY.mjs}

@@ -1,7 +1,7 @@
 const de = {
   "plugin.name": "Relationsnamen",
   "settings.title": "Relationsnamen",
-  "settings.description": "Legen Sie fest, wie verknüpfte Einträge im Content Manager angezeigt werden. Verwenden Sie ein oder mehrere skalare Felder des verknüpften Inhaltstyps, zum Beispiel Vor- und Nachname.",
+  "settings.description": "Legen Sie fest, wie verknüpfte Einträge beschriftet werden, z. B. mit Vor- und Nachname.",
   "settings.target": "Verknüpfter Inhalt: {target}",
   "settings.template": "Bezeichnungsvorlage",
   "settings.availableFields": "Verfügbare Felder",

package/dist/admin/{de-BBrO1tf0.js → de-CsBvOsWR.js}

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const de = {
   "plugin.name": "Relationsnamen",
   "settings.title": "Relationsnamen",
-  "settings.description": "Legen Sie fest, wie verknüpfte Einträge im Content Manager angezeigt werden. Verwenden Sie ein oder mehrere skalare Felder des verknüpften Inhaltstyps, zum Beispiel Vor- und Nachname.",
+  "settings.description": "Legen Sie fest, wie verknüpfte Einträge beschriftet werden, z. B. mit Vor- und Nachname.",
   "settings.target": "Verknüpfter Inhalt: {target}",
   "settings.template": "Bezeichnungsvorlage",
   "settings.availableFields": "Verfügbare Felder",

package/dist/admin/{en-8w3y1FSw.mjs → en-Bk-HIXNd.mjs}

@@ -1,7 +1,7 @@
 const en = {
   "plugin.name": "Relation Names",
   "settings.title": "Relation Names",
-  "settings.description": "Choose how related entries are displayed in the Content Manager. Use one or more scalar fields from the related content type, such as a first and last name.",
+  "settings.description": "Choose how related entries are labeled, using fields such as first and last name.",
   "settings.target": "Related content: {target}",
   "settings.template": "Label template",
   "settings.availableFields": "Available fields",

package/dist/admin/{en-DlY6ZGdo.js → en-DT4g6X2H.js}

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const en = {
   "plugin.name": "Relation Names",
   "settings.title": "Relation Names",
-  "settings.description": "Choose how related entries are displayed in the Content Manager. Use one or more scalar fields from the related content type, such as a first and last name.",
+  "settings.description": "Choose how related entries are labeled, using fields such as first and last name.",
   "settings.target": "Related content: {target}",
   "settings.template": "Label template",
   "settings.availableFields": "Available fields",

package/dist/admin/{index-DdvdGn6T.mjs → index-CiS6cuI9.mjs}

@@ -88,7 +88,7 @@ const plugin = {
         id: `${PLUGIN_ID}.plugin.name`,
         defaultMessage: "Relation Names"
       },
-      Component: () => import("./SettingsPage-Blk-4H_X.mjs").then((module) => ({ default: module.SettingsPage })),
+      Component: () => import("./SettingsPage-DFZP5CZs.mjs").then((module) => ({ default: module.SettingsPage })),
       permissions: []
     });
     app.registerPlugin({
@@ -105,7 +105,7 @@ const plugin = {
     return Promise.all(
       locales.map(async (locale) => {
         try {
-          const { default: data } = await __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/de.json": () => import("./de-a3KtzZ7N.mjs"), "./translations/en.json": () => import("./en-8w3y1FSw.mjs") }), `./translations/${locale}.json`, 3);
+          const { default: data } = await __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/de.json": () => import("./de-Bc81LkbY.mjs"), "./translations/en.json": () => import("./en-Bk-HIXNd.mjs") }), `./translations/${locale}.json`, 3);
           const newData = {};
           const keys = Object.keys(data);
           for (const key of keys) {

package/dist/admin/{index-DFr0KRky.js → index-DfSAe961.js}

@@ -89,7 +89,7 @@ const plugin = {
         id: `${PLUGIN_ID}.plugin.name`,
         defaultMessage: "Relation Names"
       },
-      Component: () => Promise.resolve().then(() => require("./SettingsPage-BGsuRnwx.js")).then((module2) => ({ default: module2.SettingsPage })),
+      Component: () => Promise.resolve().then(() => require("./SettingsPage-BebR4ghK.js")).then((module2) => ({ default: module2.SettingsPage })),
       permissions: []
     });
     app.registerPlugin({
@@ -106,7 +106,7 @@ const plugin = {
     return Promise.all(
       locales.map(async (locale) => {
         try {
-          const { default: data } = await __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/de.json": () => Promise.resolve().then(() => require("./de-BBrO1tf0.js")), "./translations/en.json": () => Promise.resolve().then(() => require("./en-DlY6ZGdo.js")) }), `./translations/${locale}.json`, 3);
+          const { default: data } = await __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/de.json": () => Promise.resolve().then(() => require("./de-CsBvOsWR.js")), "./translations/en.json": () => Promise.resolve().then(() => require("./en-DT4g6X2H.js")) }), `./translations/${locale}.json`, 3);
           const newData = {};
           const keys = Object.keys(data);
           for (const key of keys) {

package/dist/admin/index.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const index = require("./index-DFr0KRky.js");
+const index = require("./index-DfSAe961.js");
 exports.default = index.plugin;

package/dist/admin/index.mjs

@@ -1,4 +1,4 @@
-import { p } from "./index-DdvdGn6T.mjs";
+import { p } from "./index-CiS6cuI9.mjs";
 export {
   p as default
 };

package/dist/server/index.js

@@ -267,6 +267,11 @@ const matchesRelation = (source, candidate, targetModelType) => {
 const applyLabel = (value, hydrated, runtime) => {
   const label = renderTemplate(runtime, hydrated);
   if (label) {
+    const isNestedTemplate = runtime.placeholders.some((placeholder) => placeholder.includes("."));
+    const isIdentityField = runtime.displayField === "id" || runtime.displayField === "documentId";
+    if (isNestedTemplate && isIdentityField) {
+      return { ...value, label };
+    }
     return { ...value, [runtime.displayField]: label };
   }
   if (runtime.displayField === runtime.originalMainField) {
@@ -451,7 +456,11 @@ const relationLabels = ({ strapi }) => {
       }
       const editMetadata = isRecord$1(metadata.edit) ? metadata.edit : {};
       const configuredMainField = typeof editMetadata.mainField === "string" ? editMetadata.mainField : "id";
-      const displayField = compiled.placeholders.some((placeholder) => placeholder.includes(".")) ? configuredMainField : compiled.displayField;
+      const isNestedTemplate = compiled.placeholders.some(
+        (placeholder) => placeholder.includes(".")
+      );
+      const isIdentityField = configuredMainField === "id" || configuredMainField === "documentId";
+      const displayField = isNestedTemplate && isIdentityField ? "label" : isNestedTemplate ? configuredMainField : compiled.displayField;
       metadatas[fieldName] = {
         ...metadata,
         edit: {

package/dist/server/index.mjs

@@ -265,6 +265,11 @@ const matchesRelation = (source, candidate, targetModelType) => {
 const applyLabel = (value, hydrated, runtime) => {
   const label = renderTemplate(runtime, hydrated);
   if (label) {
+    const isNestedTemplate = runtime.placeholders.some((placeholder) => placeholder.includes("."));
+    const isIdentityField = runtime.displayField === "id" || runtime.displayField === "documentId";
+    if (isNestedTemplate && isIdentityField) {
+      return { ...value, label };
+    }
     return { ...value, [runtime.displayField]: label };
   }
   if (runtime.displayField === runtime.originalMainField) {
@@ -449,7 +454,11 @@ const relationLabels = ({ strapi }) => {
       }
       const editMetadata = isRecord$1(metadata.edit) ? metadata.edit : {};
       const configuredMainField = typeof editMetadata.mainField === "string" ? editMetadata.mainField : "id";
-      const displayField = compiled.placeholders.some((placeholder) => placeholder.includes(".")) ? configuredMainField : compiled.displayField;
+      const isNestedTemplate = compiled.placeholders.some(
+        (placeholder) => placeholder.includes(".")
+      );
+      const isIdentityField = configuredMainField === "id" || configuredMainField === "documentId";
+      const displayField = isNestedTemplate && isIdentityField ? "label" : isNestedTemplate ? configuredMainField : compiled.displayField;
       metadatas[fieldName] = {
         ...metadata,
         edit: {

package/package.json

@@ -5,7 +5,7 @@
   "author": "Christoph Tupi <christoph.tupi@gmail.com>",
   "keywords": [],
   "type": "commonjs",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "strapi": {
     "kind": "plugin",
     "name": "strapi-relation-names",