multi-content-type-relation 0.1.0

package/README.md

@@ -0,0 +1,86 @@
+<div align="center">
+<h1>Strapi Multi Content Type Relation</h1>
+	
+<p style="margin-top: 0;">Create deep relations in the contribution between content types.</p>
+
+</div>
+
+- **Multilingual** Support i18n out of the box
+- Support **Publication State**
+- **Required, minimum, maximum** validators for the custom field
+- Seamless UI integration with **Strapi Design System**
+
+## Installation
+
+Install the plugin in your Strapi project
+
+```bash
+npm install multi-content-type-relation
+```
+
+After installation, enable the plugin in your config file
+
+```js
+// config/plugins.js
+
+module.exports = () => ({
+  "multi-content-type-relation": {
+    enabled: true,
+    config: {
+      recursive: {
+        enabled: true,
+        maxDepth: 2,
+      },
+      debug: false,
+    },
+  },
+  // .. other plugins
+});
+```
+
+The plugin should now appear in the **Settings** section of your Strapi app
+
+## Usage
+
+This plugin allows you to create a custom field inside any content type you want. This custom field will allow you, after some configuration in the **content type builder** to select multiple content types in the contribution
+
+Configuring a MRCT field by selecting content types you want to link
+![](https://i.imgur.com/J1cCGKM.png)
+
+Advanced settings Tab
+![](https://i.imgur.com/ik75kGH.png)
+
+Usage from contribution side
+
+https://i.imgur.com/UDz7pUh.mp4
+
+## Configuration
+
+Plugin configuration settings
+
+###### Key: `recursive`
+
+> `required:` no | `type:` { enabled: Boolean, maxDepth: number} | default { enabled: false, maxDepth: 1}
+
+By default, the plugin will only hydrate the direct relations of the content you fetch
+
+If, for some reasons, you want to hydrate the relations of the relations of the content you fetch, you can through this setting.
+
+> Note: this setting will DRAMATICALLY increase the load on Strapi. The complexity is O(n^maxDepth) and the plugin will fetch n^maxDepth items through Strapi API. **I strongly recommand to never go above maxDepth set to 2.**
+
+###### Key: `debug`
+
+> `required:` no | `type:` Boolean | default false
+
+This setting show debug log of the plugin for better understanding
+
+## Submit an issue
+
+You can use github issues to raise an issue about this plugin
+
+## Contributing
+
+Feel free to fork and make a pull request of this plugin !
+
+- [NPM package](https://www.npmjs.com/package/multi-content-type-relation)
+- [GitHub repository](https://github.com/kaliop/multi-content-type-relation)

package/TODO.md

@@ -0,0 +1,4 @@
+# Remaining tasks
+
+- publish it
+- Create tests

package/admin/src/components/Input/InputContentSuggestions.tsx

@@ -0,0 +1,162 @@
+import React, { useMemo } from "react"
+import { Box, Table, Thead, Tr, Th, Tbody, Typography, Divider } from "@strapi/design-system"
+import { DndContext, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core"
+import { SortableContext, arrayMove, verticalListSortingStrategy } from "@dnd-kit/sortable"
+
+import { MatchingContent, SelectedEntry } from "../../interface"
+import { TableItem } from "./TableItem"
+
+type Props = {
+  uniqueId: number
+  suggestions?: MatchingContent[]
+  selected?: SelectedEntry[]
+  onAddEntry?(entry: SelectedEntry): void
+  onDeleteEntry?(entry: SelectedEntry): void
+  onEntriesSorted?(entries: SelectedEntry[]): void
+  sortable?: boolean
+  maximum?: number
+}
+
+export function InputContentSuggestions({
+  uniqueId,
+  suggestions,
+  selected,
+  onAddEntry,
+  onDeleteEntry,
+  onEntriesSorted,
+  maximum,
+  sortable
+}: Props) {
+  const suggestionAsSelectedEntry = useMemo(() => {
+    return (suggestions || [])
+      .flatMap((suggestion) =>
+        suggestion.results.map<SelectedEntry>((entrySuggestion) => ({
+          displayName: suggestion.displayName,
+          item: entrySuggestion,
+          searchableField: suggestion.searchableField,
+          uid: suggestion.uid
+        }))
+      )
+      .slice(0, 10)
+  }, [suggestions])
+
+  const buildSelectedId = (entry: SelectedEntry) => {
+    return `${uniqueId}-${entry.uid}-${entry.item.id}`
+  }
+
+  const availableSuggestions = useMemo(() => {
+    const selectedIdentifiers = (selected || []).map(buildSelectedId)
+
+    return suggestionAsSelectedEntry.filter((suggestion) => !selectedIdentifiers.includes(buildSelectedId(suggestion)))
+  }, [suggestions, selected])
+
+  const onAdd = (entry: SelectedEntry) => {
+    if (typeof onAddEntry === "function") {
+      onAddEntry(entry)
+    }
+  }
+
+  const onDelete = (entry: SelectedEntry) => {
+    if (typeof onDeleteEntry === "function") {
+      onDeleteEntry(entry)
+    }
+  }
+
+  // Sortable behavior
+  const onSort = (entries: SelectedEntry[]) => {
+    if (typeof onEntriesSorted === "function") {
+      onEntriesSorted(entries)
+    }
+  }
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5
+      }
+    })
+  )
+
+  const handleDragEnd = (event) => {
+    const { active, over } = event
+
+    if (!active || !over) return
+
+    if (active.id !== over.id) {
+      const oldIndex = selected!.findIndex((entry) => buildSelectedId(entry) === active.id)
+      const newIndex = selected!.findIndex((entry) => buildSelectedId(entry) === over.id)
+
+      onSort(arrayMove(selected!, oldIndex, newIndex))
+    }
+  }
+
+  if (!availableSuggestions?.length && !selected?.length) return null
+
+  return (
+    <Box padding={[2, 0, 2, 0]} background="neutral100">
+      <Table style={{ whiteSpace: "unset" }}>
+        <Thead>
+          <Tr>
+            <Th></Th>
+            <Th>
+              <Typography variant="sigma">Title</Typography>
+            </Th>
+            <Th>
+              <Typography variant="sigma">ID</Typography>
+            </Th>
+            <Th>
+              <Typography variant="sigma">Content type</Typography>
+            </Th>
+            <Th>
+              <Typography variant="sigma">State</Typography>
+            </Th>
+          </Tr>
+        </Thead>
+
+        <Tbody>
+          {selected?.length ? (
+            sortable ? (
+              <>
+                {/* @ts-expect-error Server Component */}
+                <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+                  <SortableContext
+                    items={selected.map((entry) => buildSelectedId(entry))}
+                    strategy={verticalListSortingStrategy}
+                  >
+                    {selected.map((entry) => (
+                      <TableItem
+                        uniqueId={uniqueId}
+                        key={buildSelectedId(entry)}
+                        entry={entry}
+                        type="selected"
+                        onDelete={onDelete}
+                        sortable={sortable}
+                      />
+                    ))}
+                  </SortableContext>
+                </DndContext>
+              </>
+            ) : (
+              (selected || []).map((entry) => (
+                <TableItem uniqueId={uniqueId} entry={entry} type="selected" onDelete={onDelete} />
+              ))
+            )
+          ) : null}
+
+          {availableSuggestions.length && selected?.length ? <Tr style={{ height: "32px" }} /> : null}
+
+          {availableSuggestions.map((entry) => (
+            <TableItem
+              uniqueId={uniqueId}
+              key={buildSelectedId(entry)}
+              entry={entry}
+              type="suggestion"
+              onAdd={onAdd}
+              disabled={typeof maximum === "number" ? (selected?.length ?? 0) >= maximum : false}
+            />
+          ))}
+        </Tbody>
+      </Table>
+    </Box>
+  )
+}

package/admin/src/components/Input/MainInput.tsx

@@ -0,0 +1,135 @@
+import React, { useEffect, useMemo, useState } from "react"
+import { useIntl } from "react-intl"
+import { useLocation } from "react-router-dom"
+
+import { Loader, Field, TextInput } from "@strapi/design-system"
+
+import { FormattedStrapiEntry, PluginOption, SelectedEntry } from "../../interface"
+import { useSearchedEntries } from "../../hooks/useSearchedEntries"
+import { InputContentSuggestions } from "./InputContentSuggestions"
+import { formatToStrapiField, validateCurrentRelations } from "../../helpers/content"
+
+type Props = {
+  name: string
+  error: string
+  description: string
+  value: string
+  onChange(payload: Record<string, unknown>): void
+  intlLabel: Record<string, string>
+  attribute: PluginOption
+  required: boolean
+}
+
+export function MainInput({ name, error, description, onChange, value, intlLabel, attribute, required }: Props) {
+  const { formatMessage } = useIntl()
+  const location = useLocation()
+  const maximumItems = attribute.options.max
+  const minimumItems = attribute.options.min || 0
+  const currentLocale = new URLSearchParams(location.search).get("plugins[i18n][locale]") as string
+
+  const [keyword, setKeyword] = useState("")
+  const [selected, setSelected] = useState<SelectedEntry[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const value = selected.length > maximumItems || selected.length < minimumItems ? [] : selected
+
+    onChange({ target: { name, value: formatToStrapiField(value) } })
+  }, [selected])
+
+  const hint = useMemo(() => {
+    const minLabel = minimumItems > 0 ? `min. ${minimumItems} ${minimumItems > 1 ? "entries" : "entry"}` : ""
+    const maxLabel = maximumItems > 0 ? `max. ${maximumItems} ${maximumItems > 1 ? "entries" : "entry"}` : ""
+
+    return `
+      ${minLabel ? `${minLabel}` : ""}
+      ${minLabel && maxLabel ? ", " : ""}
+      ${maxLabel}
+      ${minLabel || maxLabel ? " - " : ""}
+      ${selected.length} selected
+    `
+  }, [selected, maximumItems, minimumItems])
+
+  const inputError = useMemo(() => {
+    if (!error) return ""
+
+    if (selected.length < minimumItems) return `${error} - A minimum of ${minimumItems} item(s) is required`
+
+    if (selected.length > maximumItems) return `${error} - A maximum of ${maximumItems} item(s) is required`
+
+    return error
+  }, [error, maximumItems, minimumItems, selected])
+
+  const { loading: searchLoading, results } = useSearchedEntries(keyword, attribute.options.contentTypes, currentLocale)
+
+  // Validate relations and remove the one that got deleted
+  useEffect(() => {
+    async function validateContent() {
+      if (!value) {
+        setLoading(false)
+        return
+      }
+
+      const entries = JSON.parse(value) as FormattedStrapiEntry[]
+
+      const result = await validateCurrentRelations(entries)
+
+      setSelected(result)
+      setLoading(false)
+    }
+
+    validateContent()
+  }, [])
+
+  const onAddEntry = (entry: SelectedEntry) => {
+    const alreadyDefined = selected.some(
+      (selectedEntry) => selectedEntry.uid === entry.uid && selectedEntry.item.id === entry.item.id
+    )
+
+    if (alreadyDefined) return
+
+    setSelected([...selected, entry])
+  }
+
+  const onDeleteEntry = (entry: SelectedEntry) => {
+    const newSelected = selected.filter(
+      (selectedEntry) => !(selectedEntry.uid === entry.uid && selectedEntry.item.id === entry.item.id)
+    )
+
+    setSelected(newSelected)
+  }
+
+  const onEntriesSorted = (entries) => {
+    setSelected(entries)
+  }
+
+  if (loading) return <Loader />
+
+  return (
+    <Field name={name} id={name} error={error} hint={description} required={required}>
+      <TextInput
+        label={formatMessage(intlLabel)}
+        placeholder="Type a term to search"
+        required={required}
+        hint={hint}
+        error={inputError}
+        value={keyword}
+        onChange={(e) => setKeyword(e.target.value)}
+      />
+      {searchLoading ? (
+        <Loader />
+      ) : (
+        <InputContentSuggestions
+          uniqueId={Date.now()}
+          suggestions={results}
+          selected={selected}
+          onAddEntry={onAddEntry}
+          onDeleteEntry={onDeleteEntry}
+          onEntriesSorted={onEntriesSorted}
+          maximum={maximumItems}
+          sortable
+        />
+      )}
+    </Field>
+  )
+}

package/admin/src/components/Input/PublicationState.tsx

@@ -0,0 +1,28 @@
+import React, { useMemo } from "react"
+import { Status, Typography } from "@strapi/design-system"
+
+type Props = {
+  isPublished: boolean
+  hasDraftAndPublish?: boolean
+}
+
+export const PublicationState = ({ isPublished, hasDraftAndPublish }: Props) => {
+  const configuration = useMemo(() => {
+    const conf = { variant: "alternative", text: "N/A" }
+
+    if (hasDraftAndPublish) {
+      conf.variant = isPublished ? "success" : "secondary"
+      conf.text = isPublished ? "Published" : "Draft"
+    }
+
+    return conf
+  }, [isPublished, hasDraftAndPublish])
+
+  return (
+    <Status showBullet={false} variant={configuration.variant} size="S" width="min-content">
+      <Typography fontWeight="bold" textColor={`${configuration.variant}700`}>
+        {configuration.text}
+      </Typography>
+    </Status>
+  )
+}

package/admin/src/components/Input/TableItem.tsx

@@ -0,0 +1,109 @@
+import React, { useEffect, useMemo, useState } from "react"
+import { Tr, Td, Typography, IconButton } from "@strapi/design-system"
+import { Trash, Plus, Drag, Eye } from "@strapi/icons"
+import { PublicationState } from "./PublicationState"
+import { useSortable } from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+
+import { SelectedEntry } from "../../interface"
+import { getContentTypeForUid, getContentTypes } from "../../helpers/storage"
+import { useLocation } from "react-router-dom"
+
+type Props = {
+  entry: SelectedEntry
+  type: "suggestion" | "selected"
+  uniqueId: number
+  onAdd?(entry: SelectedEntry): void
+  onDelete?(entry: SelectedEntry): void
+  disabled?: boolean
+  sortable?: boolean
+}
+
+export const TableItem = ({ entry, type, uniqueId, disabled, onAdd, onDelete, sortable }: Props) => {
+  const entryIdentifier = useMemo(() => `${uniqueId}-${entry.uid}-${entry.item.id}`, [entry])
+  const contentType = getContentTypeForUid(entry.uid)
+  const location = useLocation()
+
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: entryIdentifier })
+
+  const trueRef = document.querySelector(`[data-tableitem="${entryIdentifier}"]`)
+  useEffect(() => {
+    if (!trueRef) return
+
+    setNodeRef(trueRef as HTMLElement)
+  }, [trueRef])
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  }
+
+  const [currentLocale, setCurrentLocale] = useState("")
+  useEffect(() => {
+    const searchParams = new URLSearchParams(location.search)
+    const locale = searchParams.get("plugins[i18n][locale]")
+    if (!locale) return
+    setCurrentLocale(locale)
+  }, [location])
+
+  const goToEntry = () => {
+    if (!currentLocale) return
+
+    const contentTypes = window.sessionStorage.getItem("mctr::content_types")
+
+    if (contentTypes) {
+      try {
+        const parsedContentTypes = JSON.parse(contentTypes)
+        if (Array.isArray(parsedContentTypes)) {
+          const contentType = parsedContentTypes.find((ct) => ct.uid === entry.uid)
+          if (contentType) {
+            const kind = contentType.kind
+            let url = `/admin/content-manager/${kind}/${entry.uid}`
+            if (kind === "collectionType") {
+              url += `/${entry.item.id}`
+            }
+            url += `?plugins[i18n][locale]=${currentLocale}`
+
+            window.open(url, "_blank")
+            return
+          }
+        }
+      } catch (e) {
+        console.error("[MRCT] Failed to retrieve content types")
+      }
+    } else {
+      alert("An error occured, please try to refresh the page")
+    }
+  }
+
+  return (
+    <Tr style={style} {...attributes} {...listeners} data-tableitem={entryIdentifier}>
+      <Td>{type === "selected" ? <IconButton icon={<Drag />} noBorder /> : null}</Td>
+      <Td>
+        <Typography color="neutral800">{entry.item[entry.searchableField]}</Typography>
+      </Td>
+      <Td>
+        <Typography color="neutral800">{entry.item.id}</Typography>
+      </Td>
+      <Td>
+        <Typography color="neutral800">{entry.displayName}</Typography>
+      </Td>
+      <Td>
+        <PublicationState
+          isPublished={!!entry.item.publishedAt}
+          hasDraftAndPublish={contentType?.options?.draftAndPublish}
+        />
+      </Td>
+      <Td>
+        <div style={{ display: "flex" }}>
+          <IconButton label="Go to entry" onClick={goToEntry} icon={<Eye />} style={{ "margin-right": "5px" }} />
+          {type === "suggestion" ? (
+            <IconButton label="Add" onClick={() => onAdd!(entry)} icon={<Plus />} disabled={disabled} />
+          ) : type === "selected" ? (
+            <IconButton label="Delete" onClick={() => onDelete!(entry)} icon={<Trash />} />
+          ) : null}
+        </div>
+      </Td>
+    </Tr>
+  )
+}

package/admin/src/components/Input/index.tsx

@@ -0,0 +1,27 @@
+import React, { useMemo } from "react"
+
+import { MainInput } from "./MainInput"
+
+export default function Index(props) {
+  const attribute = useMemo(() => {
+    if (!props.attribute) return props.attribute
+
+    if (!props.attribute.options) return props.attribute
+
+    if (!props.attribute.options.contentTypes) return props.attribute
+
+    const contentTypes = Object.keys(props.attribute.options.contentTypes).filter(
+      (key) => props.attribute.options.contentTypes[key]
+    )
+
+    return {
+      ...props.attribute,
+      options: {
+        ...props.attribute.options,
+        contentTypes: contentTypes.join(",")
+      }
+    }
+  }, [props.attribute])
+
+  return <MainInput {...props} attribute={attribute} />
+}

package/admin/src/components/PluginIcon/index.tsx

@@ -0,0 +1,12 @@
+/**
+ *
+ * PluginIcon
+ *
+ */
+
+import React from 'react';
+import { Puzzle } from '@strapi/icons';
+
+const PluginIcon = () => <Puzzle />;
+
+export default PluginIcon;

package/admin/src/helpers/content.ts

@@ -0,0 +1,60 @@
+import { getFetchClient } from "@strapi/helper-plugin"
+
+import pluginId from "../pluginId"
+import { FormattedStrapiEntry, MatchingContent, MatchingContentResponse, SelectedEntry } from "../interface"
+
+export const fetchMatchingContent = async (
+  keyword: string,
+  contentTypes: string,
+  locale: string
+): Promise<MatchingContentResponse> => {
+  const { post } = getFetchClient()
+  const response = await post(`/${pluginId}/get-content`, {
+    contentTypes: contentTypes.split(","),
+    keyword,
+    locale
+  })
+
+  const data = response.data as MatchingContent[]
+
+  if (!data) throw new Error("No data returned from API")
+
+  const total = data.reduce((accumulator, option) => {
+    if (!option.results) return accumulator
+
+    return accumulator + option.results.length
+  }, 0)
+
+  return {
+    data,
+    total
+  }
+}
+
+export const formatToStrapiField = (entries: SelectedEntry[]) => {
+  if (entries.length === 0) return ""
+
+  return JSON.stringify(entries.map((entry) => ({ uid: entry.uid, id: entry.item.id, MRCT: true })).filter(Boolean))
+}
+
+export const validateCurrentRelations = async (entries: FormattedStrapiEntry[]) => {
+  const { post } = getFetchClient()
+
+  const response = await post(`/${pluginId}/validate-relations`, {
+    entries
+  })
+
+  return response.data as SelectedEntry[]
+}
+
+export const listContentTypes = async () => {
+  try {
+    const { get } = getFetchClient()
+    const response = await get(`/${pluginId}/list-content-types`)
+
+    return response.data
+  } catch (error) {
+    console.error(error)
+    return []
+  }
+}

package/admin/src/helpers/storage.ts

@@ -0,0 +1,32 @@
+export type LightContentType = {
+  apiName: string
+  attributes: Record<string, Record<string, unknown>>[]
+  collectionName: string
+  globalId: string
+  modelName: string
+  modelType: string
+  options?: { draftAndPublish?: boolean }
+  uid: string
+}
+
+const STORAGE_KEY = "mctr::content_types"
+
+export function getContentTypes() {
+  const raw = sessionStorage.getItem(STORAGE_KEY)
+
+  return raw ? (JSON.parse(raw) as LightContentType[]) : undefined
+}
+
+export function getContentTypeForUid(uid: string) {
+  const contentTypes = getContentTypes()
+
+  if (!Array.isArray(contentTypes)) return
+
+  return contentTypes.find((contentType) => contentType.uid === uid)
+}
+
+export function setContentTypes(contentTypes: LightContentType[]) {
+  const stringified = JSON.stringify(contentTypes)
+
+  sessionStorage.setItem(STORAGE_KEY, stringified)
+}