Merge pull request #1673 from danskernesdigitalebibliotek/DDFBRA-231-…

…paragraph-material-grid-link-automatic

DDFBRA-231 - Add `MaterialGridLinkAutomatic` app

src/apps/material-grid/link-automatic/MaterialGridLinkAutomatic.entry.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import GuardedApp from "../../../components/guarded-app";
+import { GlobalEntryTextProps } from "../../../core/storybook/globalTextArgs";
+import { withConfig } from "../../../core/utils/config";
+import { withText } from "../../../core/utils/text";
+import { withUrls } from "../../../core/utils/url";
+import MaterialGridLinkAutomatic from "./MaterialGridLinkAutomatic";
+import { ValidSelectedIncrements } from "../materiel-grid-util";
+
+interface MaterialGridLinkAutomaticEntryConfigProps {
+  blacklistedAvailabilityBranchesConfig: string;
+  blacklistedPickupBranchesConfig?: string;
+  blacklistedSearchBranchesConfig?: string;
+  branchesConfig: string;
+}
+
+export interface MaterialGridLinkAutomaticEntryProps
+  extends GlobalEntryTextProps,
+    MaterialGridLinkAutomaticEntryConfigProps {
+  link: string;
+  title?: string;
+  description?: string;
+  selectedAmountOfMaterialsForDisplay: ValidSelectedIncrements;
+  buttonText: string;
+  materialUrl: string;
+}
+
+const MaterialGridLinkAutomaticEntry: React.FC<
+  MaterialGridLinkAutomaticEntryProps
+> = ({
+  link,
+  title,
+  description,
+  selectedAmountOfMaterialsForDisplay,
+  buttonText
+}) => (
+  <GuardedApp app="material-grid-automatic">
+    <MaterialGridLinkAutomatic
+      link={new URL(link)}
+      title={title}
+      description={description}
+      selectedAmountOfMaterialsForDisplay={selectedAmountOfMaterialsForDisplay}
+      buttonText={buttonText}
+    />
+  </GuardedApp>
+);
+
+export default withConfig(withUrls(withText(MaterialGridLinkAutomaticEntry)));

src/apps/material-grid/link-automatic/MaterialGridLinkAutomatic.mount.ts

@@ -0,0 +1,7 @@
+import addMount from "../../../core/addMount";
+import MaterialGridLinkAutomaticEntry from "./MaterialGridLinkAutomatic.entry";
+
+addMount({
+  appName: "material-grid-link-automatic",
+  app: MaterialGridLinkAutomaticEntry
+});

src/apps/material-grid/link-automatic/MaterialGridLinkAutomatic.stories.tsx

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import globalTextArgs, {
+  argTypes as globalTextArgTypes
+} from "../../../core/storybook/globalTextArgs";
+import serviceUrlArgs, {
+  argTypes as serviceUrlArgTypes
+} from "../../../core/storybook/serviceUrlArgs";
+import MaterialGridLinkAutomatic from "./MaterialGridLinkAutomatic.entry";
+import MaterialGridSkeleton from "../MaterialGridSkeleton";
+
+const meta: Meta<typeof MaterialGridLinkAutomatic> = {
+  title: "Apps / Material Grid Link / Automatic",
+  component: MaterialGridLinkAutomatic,
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore: can't figure out how to type this
+  argTypes: {
+    ...globalTextArgTypes,
+    ...serviceUrlArgTypes,
+    title: {
+      description: "Title",
+      control: { type: "text" }
+    },
+    description: {
+      description: "Description",
+      control: { type: "text" }
+    },
+    link: {
+      control: { type: "text" },
+      description:
+        "link search string to use for the material grid, search for a result and copy the link string from an advanced search"
+    },
+    selectedAmountOfMaterialsForDisplay: {
+      description: "Amount of materials to show",
+      control: {
+        type: "select",
+        options: [4, 8, 12, 16, 20, 24, 28, 32]
+      }
+    },
+    buttonText: {
+      description: "Button text",
+      control: { type: "text" }
+    },
+    materialUrl: {
+      description: "Path to the material page",
+      control: { type: "text" }
+    },
+    etAlText: {
+      description: "Et al. Text",
+      control: { type: "text" }
+    },
+    blacklistedPickupBranchesConfig: {
+      description: "Blacklisted Pickup branches",
+      control: { type: "text" }
+    },
+    blacklistedAvailabilityBranchesConfig: {
+      description: "Blacklisted Availability branches",
+      control: { type: "text" }
+    },
+    blacklistedSearchBranchesConfig: {
+      description: "Blacklisted branches",
+      control: { type: "text" }
+    },
+    branchesConfig: {
+      description: "Branches",
+      control: { type: "text" }
+    }
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MaterialGridLinkAutomatic>;
+
+export const Primary: Story = {
+  args: {
+    ...globalTextArgs,
+    ...serviceUrlArgs,
+    title: "Recommended materials",
+    description:
+      "This is a long description of the materials selected, or whatever else you want to put in here",
+    link: "https://dapple-cms.docker/advanced-search?sublocation=fantasy&advancedSearchCql=%27harry%27&linked=true",
+    selectedAmountOfMaterialsForDisplay: 12,
+    buttonText: "Show all",
+    materialUrl: "/work/:workid",
+    etAlText: "et al.",
+    blacklistedPickupBranchesConfig:
+      "FBS-751032,FBS-751031,FBS-751009,FBS-751027,FBS-751024",
+    blacklistedAvailabilityBranchesConfig:
+      "FBS-751032,FBS-751031,FBS-751009,FBS-751027,FBS-751024",
+    blacklistedSearchBranchesConfig:
+      "FBS-751032,FBS-751031,FBS-751009,FBS-751027,FBS-751024",
+    branchesConfig:
+      '[\n   {\n      "branchId":"DK-775120",\n      "title":"Højbjerg"\n   },\n   {\n      "branchId":"DK-775122",\n      "title":"Beder-Malling"\n   },\n   {\n      "branchId":"DK-775144",\n      "title":"Gellerup"\n   },\n   {\n      "branchId":"DK-775167",\n      "title":"Lystrup"\n   },\n   {\n      "branchId":"DK-775146",\n      "title":"Harlev"\n   },\n   {\n      "branchId":"DK-775168",\n      "title":"Skødstrup"\n   },\n   {\n      "branchId":"FBS-751010",\n      "title":"Arresten"\n   },\n   {\n      "branchId":"DK-775147",\n      "title":"Hasle"\n   },\n   {\n      "branchId":"FBS-751032",\n      "title":"Må ikke benyttes"\n   },\n   {\n      "branchId":"FBS-751031",\n      "title":"Fjernlager 1"\n   },\n   {\n      "branchId":"DK-775126",\n      "title":"Solbjerg"\n   },\n   {\n      "branchId":"FBS-751030",\n      "title":"ITK"\n   },\n   {\n      "branchId":"DK-775149",\n      "title":"Sabro"\n   },\n   {\n      "branchId":"DK-775127",\n      "title":"Tranbjerg"\n   },\n   {\n      "branchId":"DK-775160",\n      "title":"Risskov"\n   },\n   {\n      "branchId":"DK-775162",\n      "title":"Hjortshøj"\n   },\n   {\n      "branchId":"DK-775140",\n      "title":"Åby"\n   },\n   {\n      "branchId":"FBS-751009",\n      "title":"Fjernlager 2"\n   },\n   {\n      "branchId":"FBS-751029",\n      "title":"Stadsarkivet"\n   },\n   {\n      "branchId":"FBS-751027",\n      "title":"Intern"\n   },\n   {\n      "branchId":"FBS-751026",\n      "title":"Fælles undervejs"\n   },\n   {\n      "branchId":"FBS-751025",\n      "title":"Fællessekretariatet"\n   },\n   {\n      "branchId":"DK-775133",\n      "title":"Bavnehøj"\n   },\n   {\n      "branchId":"FBS-751024",\n      "title":"Fjernlånte materialer"\n   },\n   {\n      "branchId":"DK-775100",\n      "title":"Hovedbiblioteket"\n   },\n   {\n      "branchId":"DK-775170",\n      "title":"Trige"\n   },\n   {\n      "branchId":"DK-775150",\n      "title":"Tilst"\n   },\n   {\n      "branchId":"DK-775130",\n      "title":"Viby"\n   },\n   {\n      "branchId":"DK-775164",\n      "title":"Egå"\n   }\n]'
+  }
+};
+
+export const Skeleton: Story = {
+  render: () => <MaterialGridSkeleton />
+};

src/apps/material-grid/link-automatic/MaterialGridLinkAutomatic.tsx

@@ -0,0 +1,72 @@
+import * as React from "react";
+import { useComplexSearchWithPaginationQuery } from "../../../core/dbc-gateway/generated/graphql";
+import useGetCleanBranches from "../../../core/utils/branches";
+import { Work } from "../../../core/utils/types/entities";
+import MaterialGrid from "../MaterialGrid";
+import MaterialGridSkeleton from "../MaterialGridSkeleton";
+import { ValidSelectedIncrements } from "../materiel-grid-util";
+import { getQueryParams } from "../../../core/utils/helpers/url";
+import { commaSeparatedStringToArray } from "../../advanced-search/helpers";
+
+export type MaterialGridLinkAutomaticProps = {
+  link: URL;
+  title?: string;
+  description?: string;
+  selectedAmountOfMaterialsForDisplay: ValidSelectedIncrements;
+  buttonText: string;
+};
+
+const MaterialGridLinkAutomatic: React.FC<MaterialGridLinkAutomaticProps> = ({
+  link,
+  title,
+  description,
+  selectedAmountOfMaterialsForDisplay
+}) => {
+  const cleanBranches = useGetCleanBranches();
+  const { advancedSearchCql, location, sublocation } = getQueryParams(link);
+
+  const { data, isLoading } = useComplexSearchWithPaginationQuery(
+    {
+      cql: advancedSearchCql,
+      offset: 0,
+      limit: selectedAmountOfMaterialsForDisplay,
+      filters: {
+        branchId: cleanBranches,
+        ...(location
+          ? { location: commaSeparatedStringToArray(location) }
+          : {}),
+        ...(sublocation
+          ? { sublocation: commaSeparatedStringToArray(sublocation) }
+          : {})
+      }
+    },
+    {
+      enabled: !!advancedSearchCql
+    }
+  );
+
+  if (isLoading || !data) {
+    return <MaterialGridSkeleton title={title} />;
+  }
+
+  const resultWorks: Work[] = data.complexSearch.works as Work[];
+  const materials = resultWorks.map((work) => {
+    return {
+      wid: work.workId
+    };
+  });
+
+  return (
+    <>
+      <MaterialGrid
+        title={title}
+        materials={materials}
+        description={description}
+        selectedAmountOfMaterialsForDisplay={
+          selectedAmountOfMaterialsForDisplay
+        }
+      />
+    </>
+  );
+};
+export default MaterialGridLinkAutomatic;

src/core/utils/helpers/url.ts

@@ -2,6 +2,10 @@ import { WorkId } from "../types/ids";
 
 export const getCurrentLocation = () => String(window.location);
 
+export const getQueryParams = (url: URL): Record<string, string> => {
+  return Object.fromEntries(url.searchParams);
+};
+
 export const appendQueryParametersToUrl = (
   url: URL,
   parameters: { [key: string]: string }