strapi-plugin-document-metadata 1.0.1

package/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2025 Felix Mau <me@felix.hamburg>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,67 @@
+# Strapi Plugin: Document Metadata
+
+A Strapi plugin that displays entity metadata, with an option to include the **"last opened"** details.
+
+## ⏳ Installation
+
+Install with NPM.
+
+```bash
+npm install strapi-plugin-document-metadata --save
+```
+
+Install with Yarn.
+
+```bash
+yarn add strapi-plugin-document-metadata
+```
+
+## 🔧 Usage
+
+### 1. Configure the Plugin
+
+Add the following configuration to your `config/plugins.ts` file. Create the file if it doesn’t already exist:
+
+```ts
+export default {
+  // …
+  'document-metadata': {
+    enabled: true,
+  },
+};
+```
+
+Then restart the app to apply the changes.
+
+### 2. Use in the Admin Panel
+
+Once the plugin is installed, the **Document Metadata** card automatically appears when editing **collection types entries**. By default, it displays:
+
+- Created at
+- Created by
+- Last updated at
+- Last updated by
+
+No additional setup is required for these fields.
+
+#### Last Opened Metadata
+
+To enable **Last Opened** tracking, add the following fields to your collection type using the Content-Type Builder:
+
+| Field name | Type     | Required |
+| ---------- | -------- | -------- |
+| `openedAt` | DateTime | ❌       |
+| `openedBy` | String   | ❌       |
+
+Once these fields exist:
+
+- The plugin automatically updates them when a document is opened.
+- The metadata card will display the last opened date and user.
+
+**Note:** To prevent these fields from showing up in the regular edit view, remove them under "Configure the view".
+
+## 📸 Screenshots
+
+Below are screenshots from an example application showing the document metadata in the list view and when editing an entry.
+
+<a href="./assets/content-type-builder.png"/><img src="./assets/content-type-builder-thumb.png" alt="Add openedAt and openedBy in the content type builder." /></a>&nbsp;&nbsp;<a href="./assets/content-manager-list-view.png"/><img src="./assets/content-manager-list-view-thumb.png" alt="Opened at and opened by in the list view." /></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="./assets/content-manager-first-time-opened.png"/><img src="./assets/content-manager-first-time-opened-thumb.png" alt="Document Metadata when opened for the first time." /></a>&nbsp;&nbsp;<a href="./assets/content-manager-last-time-opened.png"/><img src="./assets/content-manager-last-time-opened-thumb.png" alt="Document Metadata." /></a>

package/dist/_chunks/en-h9IAaoUJ.mjs

@@ -0,0 +1,16 @@
+const en = {
+  "document-metadata.title": "Metadata",
+  "document-metadata.opened-at": "Opened at",
+  "document-metadata.opened-by": "by {username}",
+  "document-metadata.opened-first-time": "Opened for the first time.",
+  "document-metadata.updated-at": "Updated at",
+  "document-metadata.updated-by": "by {username}",
+  "document-metadata.created-at": "Created at",
+  "document-metadata.created-by": "by {username}",
+  "document-metadata.date.today": "Today, {formattedTime}",
+  "document-metadata.date.yesterday": "Yesterday, {formattedTime}",
+  "document-metadata.date.other": "{formattedDate}"
+};
+export {
+  en as default
+};

package/dist/_chunks/en-tDvQkVOI.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const en = {
+  "document-metadata.title": "Metadata",
+  "document-metadata.opened-at": "Opened at",
+  "document-metadata.opened-by": "by {username}",
+  "document-metadata.opened-first-time": "Opened for the first time.",
+  "document-metadata.updated-at": "Updated at",
+  "document-metadata.updated-by": "by {username}",
+  "document-metadata.created-at": "Created at",
+  "document-metadata.created-by": "by {username}",
+  "document-metadata.date.today": "Today, {formattedTime}",
+  "document-metadata.date.yesterday": "Yesterday, {formattedTime}",
+  "document-metadata.date.other": "{formattedDate}"
+};
+exports.default = en;

package/dist/admin/index.js

@@ -0,0 +1,311 @@
+"use strict";
+const react = require("react");
+const jsxRuntime = require("react/jsx-runtime");
+const reactRouterDom = require("react-router-dom");
+const admin = require("@strapi/strapi/admin");
+const designSystem = require("@strapi/design-system");
+const icons = require("@strapi/icons");
+const reactIntl = require("react-intl");
+const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
+  const v = glob[path];
+  if (v) {
+    return typeof v === "function" ? v() : Promise.resolve(v);
+  }
+  return new Promise((_, reject) => {
+    (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(
+      reject.bind(
+        null,
+        new Error(
+          "Unknown variable dynamic import: " + path + (path.split("/").length !== segs ? ". Note that variables only represent file names one level deep." : "")
+        )
+      )
+    );
+  });
+};
+const PLUGIN_ID = "document-metadata";
+const Initializer = ({ setPlugin }) => {
+  const ref = react.useRef(setPlugin);
+  react.useEffect(() => {
+    ref.current(PLUGIN_ID);
+  }, []);
+  return null;
+};
+const prefixKey = (key) => `${PLUGIN_ID}.${key}`;
+const relativeDateFormatter = (date, textBuilder) => {
+  const today = /* @__PURE__ */ new Date();
+  if (today.toDateString() === date.toDateString()) {
+    return textBuilder.today(date.toLocaleTimeString());
+  }
+  const yesterday = /* @__PURE__ */ new Date();
+  yesterday.setDate(yesterday.getDate() - 1);
+  if (yesterday.toDateString() === date.toDateString()) {
+    return textBuilder.yesterday(date.toLocaleTimeString());
+  }
+  return textBuilder.other(date.toLocaleString());
+};
+const config$3 = {
+  /** The threshold in minutes to determine if a date is considered "recent". */
+  thresholdInMinutes: 60
+};
+const recentTimeFormatter = ({
+  date,
+  fallbackFormatter
+}) => {
+  const now = /* @__PURE__ */ new Date();
+  const minutesElapsedSinceNow = minutesElapsed(now, date);
+  if (minutesElapsedSinceNow >= config$3.thresholdInMinutes) {
+    return fallbackFormatter(date);
+  }
+  const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+  return rtf.format(-minutesElapsedSinceNow, "minutes");
+};
+const minutesElapsed = (now, then) => {
+  const millisecondsPerMinute = 60 * 1e3;
+  return Math.floor((now.getTime() - then.getTime()) / millisecondsPerMinute);
+};
+const MetadataRow = ({ title, line1, line2 }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Item, { direction: "column", alignItems: "stretch", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: [
+      line1,
+      /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+      line2
+    ] })
+  ] });
+};
+var FetchStatus = /* @__PURE__ */ ((FetchStatus2) => {
+  FetchStatus2["Initial"] = "initial";
+  FetchStatus2["InProgress"] = "in-progress";
+  FetchStatus2["Success"] = "success";
+  FetchStatus2["Failure"] = "failure";
+  return FetchStatus2;
+})(FetchStatus || {});
+const config$2 = {
+  /** The configuration for the last-opened request. */
+  lastOpenedRequest: {
+    /** The path to fetch the last-opened metadata for the entity with the given `uid` and `documentId`. */
+    path: (uid, documentId) => `/document-metadata/last-opened/${uid}/${documentId}`
+  }
+};
+const useLastOpened = ({
+  uid,
+  documentId,
+  locale
+}) => {
+  const fetchClient = admin.useFetchClient();
+  const [lastOpenedFetchState, setLastOpenedFetchState] = react.useState({
+    status: "initial"
+    /* Initial */
+  });
+  react.useEffect(() => {
+    const fetchLastOpened = async () => {
+      setLastOpenedFetchState({
+        status: "in-progress"
+        /* InProgress */
+      });
+      try {
+        const { data: lastOpened } = await fetchClient.get(
+          config$2.lastOpenedRequest.path(uid, documentId),
+          {
+            params: { locale }
+          }
+        );
+        setLastOpenedFetchState({ status: "success", lastOpened });
+      } catch (error) {
+        console.error(`Failed to fetch last-opened metadata: ${error}`);
+        setLastOpenedFetchState({ status: "failure", error });
+      }
+    };
+    fetchLastOpened();
+  }, [uid, documentId, locale]);
+  return lastOpenedFetchState;
+};
+const config$1 = {
+  /** The loading text to show while fetching data. */
+  loadingString: "…",
+  /** The non-breaking space character. */
+  nonBreakingSpace: " "
+};
+const LastOpenedMetadataLoader = ({
+  uid,
+  documentId,
+  locale
+}) => {
+  const { formatMessage } = reactIntl.useIntl();
+  const translate = (key, values) => formatMessage({ id: prefixKey(key) }, values);
+  const lastOpenedFetchState = useLastOpened({ uid, documentId, locale });
+  switch (lastOpenedFetchState.status) {
+    case FetchStatus.Initial:
+    case FetchStatus.InProgress:
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        MetadataRow,
+        {
+          title: translate("opened-at"),
+          line1: config$1.loadingString,
+          line2: config$1.nonBreakingSpace
+        }
+      );
+    case FetchStatus.Failure:
+      return null;
+    case FetchStatus.Success:
+      const lastOpened = lastOpenedFetchState.lastOpened;
+      if (!lastOpened.openedAt || !lastOpened.openedBy) {
+        return /* @__PURE__ */ jsxRuntime.jsx(MetadataRow, { title: translate("opened-at"), line1: translate("opened-first-time") });
+      }
+      const formattedOpenedAt = recentTimeFormatter({
+        date: new Date(lastOpened.openedAt),
+        fallbackFormatter: (date) => relativeDateFormatter(date, {
+          today: (formattedTime) => translate("date.today", { formattedTime }),
+          yesterday: (formattedTime) => translate("date.yesterday", { formattedTime }),
+          other: (formattedDate) => translate("date.other", { formattedDate })
+        })
+      });
+      const formattedOpenedBy = translate("opened-by", { username: lastOpened.openedBy });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        MetadataRow,
+        {
+          title: translate("opened-at"),
+          line1: formattedOpenedAt,
+          line2: formattedOpenedBy
+        }
+      );
+  }
+};
+const LastOpenedMetadataGuard = ({
+  uid,
+  document
+}) => {
+  const hasLastOpenedFields = "openedAt" in document && "openedBy" in document;
+  if (!hasLastOpenedFields) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(LastOpenedMetadataLoader, { uid, documentId: document.documentId, locale: document.locale });
+};
+const DocumentMetadataCard = ({
+  collectionType,
+  uid,
+  documentId
+}) => {
+  const { formatMessage } = reactIntl.useIntl();
+  const translate = (key, values) => formatMessage({ id: prefixKey(key) }, values);
+  const initialParams = { plugins: { i18n: { locale: void 0 } } };
+  const [queryParams, _] = admin.useQueryParams(initialParams);
+  const locale = queryParams.query.plugins.i18n.locale;
+  const { document } = admin.unstable_useDocument({ documentId, model: uid, collectionType, params: { locale } });
+  if (!document) {
+    return null;
+  }
+  const formatDate = (date) => recentTimeFormatter({
+    date: new Date(date),
+    fallbackFormatter: (date2) => relativeDateFormatter(date2, {
+      today: (formattedTime) => translate("date.today", { formattedTime }),
+      yesterday: (formattedTime) => translate("date.yesterday", { formattedTime }),
+      other: (formattedDate) => translate("date.other", { formattedDate })
+    })
+  });
+  const formatUsername = (user) => `${user.firstname} ${user.lastname}`;
+  let formattedUpdatedAt = formatDate(new Date(document.updatedAt));
+  let formattedUpdatedBy = document.updatedBy ? translate("updated-by", { username: formatUsername(document.updatedBy) }) : "";
+  let formattedCreatedAt = formatDate(new Date(document.createdAt));
+  let formattedCreatedBy = document.createdBy ? translate("created-by", { username: formatUsername(document.createdBy) }) : "";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    designSystem.Box,
+    {
+      width: "100%",
+      padding: "16px",
+      background: "neutral0",
+      hasRadius: true,
+      borderColor: "neutral200",
+      borderStyle: "solid",
+      borderWidth: "1px",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: "8px", gridCols: 1, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Item, { direction: "column", alignItems: "stretch", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: "8px", direction: "row", alignItems: "center", justifyContent: "space-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: /* @__PURE__ */ jsxRuntime.jsx(reactIntl.FormattedMessage, { id: prefixKey("title") }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(icons.Paperclip, { fill: "neutral600", style: { marginRight: "4px" } })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, { style: { marginTop: "6px", marginBottom: "4px" } })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(LastOpenedMetadataGuard, { uid, document }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          MetadataRow,
+          {
+            title: translate("updated-at"),
+            line1: formattedUpdatedAt,
+            line2: formattedUpdatedBy
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          MetadataRow,
+          {
+            title: translate("created-at"),
+            line1: formattedCreatedAt,
+            line2: formattedCreatedBy
+          }
+        )
+      ] })
+    }
+  );
+};
+const config = {
+  /**
+   * The supported collection type.
+   * We currently only support "collection-types", as "single-types" don't have their document ID as part of the URL.
+   */
+  supportedCollectionType: "collection-types",
+  /**
+   * The expected length of a valid document ID.
+   *
+   * > To address this limitation, Strapi 5 introduced documentId, a 24-character alphanumeric string, as a unique and
+   * > persistent identifier for a content entry, independent of its physical records.
+   *
+   * https://docs.strapi.io/cms/api/document-service
+   */
+  documentIdLength: 24
+};
+const DocumentMetadataGuard = () => {
+  const location = reactRouterDom.useLocation();
+  const urlPathComponents = location.pathname.split("/").filter(Boolean);
+  const [collectionType, uid, documentId] = urlPathComponents.slice(-3);
+  const isValidCollectionType = collectionType === config.supportedCollectionType;
+  const isValidUID = uid && uid.length;
+  const isValidDocumentId = documentId && documentId.length === config.documentIdLength;
+  if (!isValidCollectionType || !isValidUID || !isValidDocumentId) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DocumentMetadataCard,
+    {
+      collectionType,
+      uid,
+      documentId
+    }
+  );
+};
+const index = {
+  register(app) {
+    app.getPlugin("content-manager").injectComponent("editView", "right-links", {
+      name: "DocumentMetadataGuard",
+      Component: DocumentMetadataGuard
+    });
+    app.registerPlugin({
+      id: PLUGIN_ID,
+      initializer: Initializer,
+      isReady: false,
+      name: PLUGIN_ID
+    });
+  },
+  async registerTrads({ locales }) {
+    return Promise.all(
+      locales.map(async (locale) => {
+        try {
+          const { default: data } = await __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/en.json": () => Promise.resolve().then(() => require("../_chunks/en-tDvQkVOI.js")) }), `./translations/${locale}.json`, 3);
+          return { data, locale };
+        } catch {
+          return { data: {}, locale };
+        }
+      })
+    );
+  }
+};
+module.exports = index;