diff --git a/packages/dina-ui/components/add-person/PersonForm.tsx b/packages/dina-ui/components/add-person/PersonForm.tsx index 20cf4e5a42..5f97ff1ecc 100644 --- a/packages/dina-ui/components/add-person/PersonForm.tsx +++ b/packages/dina-ui/components/add-person/PersonForm.tsx @@ -1,5 +1,4 @@ import { - DeleteButton, DinaForm, DinaFormOnSubmit, filterBy, @@ -12,7 +11,6 @@ import { OperationError, SaveArgs, useApiClient, - DeleteArgs, BackButton, ButtonBar } from "common-ui"; diff --git a/packages/dina-ui/components/add-person/PersonFormFields.tsx b/packages/dina-ui/components/add-person/PersonFormFields.tsx index fc07d85392..7074cf1dbf 100644 --- a/packages/dina-ui/components/add-person/PersonFormFields.tsx +++ b/packages/dina-ui/components/add-person/PersonFormFields.tsx @@ -1,9 +1,4 @@ -import { - FieldSet, - FormikButton, - useDinaFormContext, - SelectOption -} from "common-ui"; +import { FieldSet, FormikButton, useDinaFormContext } from "common-ui"; import { Person } from "../../../dina-ui/types/objectstore-api"; import React, { useState } from "react"; import { FieldArray } from "formik"; diff --git a/packages/dina-ui/intl/dina-ui-en.ts b/packages/dina-ui/intl/dina-ui-en.ts index 315fa29d1e..ed86620c1e 100644 --- a/packages/dina-ui/intl/dina-ui-en.ts +++ b/packages/dina-ui/intl/dina-ui-en.ts @@ -1,5 +1,3 @@ -import { ColumnSelector } from "packages/common-ui/lib"; - /** * English Object Store messages. A message must be set here in English before other languages. */ @@ -1170,5 +1168,6 @@ export const DINAUI_MESSAGES_ENGLISH = { collecting_event_tag_info: "Tag suggestions are currently based on collecting event tags associated with Material Samples.", selectFunctionToUse: "Select function to use", - selectFieldToUseWithFunction: "Select a field to use with the function" + selectFieldToUseWithFunction: "Select a field to use with the function", + editIdentifierTitle: "Edit Identifier" }; diff --git a/packages/dina-ui/pages/identifier/edit.tsx b/packages/dina-ui/pages/identifier/edit.tsx new file mode 100644 index 0000000000..d872d42ea7 --- /dev/null +++ b/packages/dina-ui/pages/identifier/edit.tsx @@ -0,0 +1,181 @@ +import { + ApiClientContext, + BackButton, + ButtonBar, + DinaForm, + DinaFormOnSubmit, + SubmitButton, + TextField, + useQuery, + withResponse, + MultilingualTitle +} from "common-ui"; +import { InputResource, PersistedResource } from "kitsu"; +import { fromPairs, toPairs } from "lodash"; +import { useRouter } from "next/router"; +import { Fragment, useContext } from "react"; +import { DinaMessage, useDinaIntl } from "../../intl/dina-ui-intl"; +import { AgentIdentifierType } from "../../types/agent-api/resources/AgentIdentifierType"; +import { Head, Nav, Footer } from "../../components"; +import Link from "next/link"; + +interface IdentifierFormProps { + fetchedIdentifierType?: AgentIdentifierType; + onSaved: ( + identifierType: PersistedResource + ) => Promise; +} + +export default function IdentifierTypeEditPage() { + const router = useRouter(); + const { + query: { id } + } = router; + const { formatMessage } = useDinaIntl(); + + async function goToViewPage( + identifier: PersistedResource + ) { + await router.push(`/identifier/view?id=${identifier.id}`); + } + + const title = id ? "editIdentifierTitle" : "addIdentifier"; + + const query = useQuery( + { + path: `agent-api/identifier-type/${id}` + }, + { disabled: !id } + ); + + return ( +
+ +
+ ); +} + +export function IdentifierTypeForm({ + fetchedIdentifierType, + onSaved +}: IdentifierFormProps) { + const { apiClient } = useContext(ApiClientContext); + + const initialValues: AgentIdentifierType = fetchedIdentifierType + ? { + ...fetchedIdentifierType, + // Convert multilingualDescription to editable Dictionary format: + multilingualTitle: fromPairs( + fetchedIdentifierType.multilingualTitle?.titles?.map( + ({ title, lang }) => [lang ?? "", title ?? ""] + ) + ) + } + : { type: "identifier-type" }; + + const onSubmit: DinaFormOnSubmit = async ({ + submittedValues + }) => { + const input: InputResource = { + ...submittedValues, + // Convert the editable format to the stored format: + multilingualTitle: { + titles: toPairs(submittedValues.multilingualTitle).map( + ([lang, title]) => ({ lang, title }) + ) + } + }; + delete (input as any).type; + const savedIdentifierType = await apiClient.axios.post( + `agent-api/identifier-type`, + { + data: { + type: "identifier-type", + attributes: { + ...input, + ...(input.uriTemplate && { uriTemplate: `${input.uriTemplate}$1` }) + } + } + }, + { + headers: { + "Content-Type": "application/vnd.api+json" + } + } + ); + await onSaved(savedIdentifierType?.data?.data); + }; + + return ( + + initialValues={initialValues} + onSubmit={onSubmit} + > + +
+ +
+
+ +
+ + + + ); +} + +export function IdentifierTypeFormLayout() { + return ( +
+
+ + +
+
+ { + try { + const url = new URL(value); + if (url.protocol === "http:" || url.protocol === "https:") { + return ( + + + {value} + + + ); + } + } catch (_) { + return value; + } + }} + /> +
+ +
+ ); +} diff --git a/packages/dina-ui/pages/identifier/list.tsx b/packages/dina-ui/pages/identifier/list.tsx index 5275d063f8..d7771de0ca 100644 --- a/packages/dina-ui/pages/identifier/list.tsx +++ b/packages/dina-ui/pages/identifier/list.tsx @@ -1,10 +1,10 @@ import { ColumnDefinition, dateCell, - descriptionCell, intlContext, ListLayoutFilterType, - ListPageLayout + ListPageLayout, + titleCell } from "common-ui"; import Link from "next/link"; import { useRouter } from "next/router"; @@ -16,39 +16,38 @@ import { DinaMessage, useDinaIntl } from "../../intl/dina-ui-intl"; import { groupCell, GroupSelectField } from "../../components"; import PageLayout from "../../components/page/PageLayout"; -import { ManagedAttribute } from "../../types/collection-api"; -import { Identifier } from "../../types/agent-api/resources/Identifier"; +import { AgentIdentifierType } from "packages/dina-ui/types/agent-api/resources/AgentIdentifierType"; -export function useFilterManagedAttribute() { +export function useFilterIdentifierType() { const { locale: language } = useContext(intlContext); - const filterManagedAttributes = ( + const filterIdentifierType = ( filterForm: any, - value: ManagedAttribute + value: AgentIdentifierType ) => { let result = true; - if (filterForm?.group) { - result = result && value.group === filterForm.group; - } if (filterForm?.filterBuilderModel?.value) { - result = - result && - (value.name - .toLowerCase() - .indexOf(filterForm.filterBuilderModel.value.toLowerCase()) > -1 || - ( - value.multilingualDescription?.descriptions?.filter( - (item) => - item.lang === language && - (item.desc ?? "") - .toLowerCase() - .indexOf(filterForm.filterBuilderModel.value.toLowerCase()) > - -1 - ) ?? [] - ).length > 0); + if (value.name) { + result = + result && + (value.name + .toLowerCase() + .indexOf(filterForm.filterBuilderModel.value.toLowerCase()) > -1 || + ( + value.multilingualTitle?.titles?.filter( + (item) => + item.lang === language && + (item.title ?? "") + .toLowerCase() + .indexOf( + filterForm.filterBuilderModel.value.toLowerCase() + ) > -1 + ) ?? [] + ).length > 0); + } } return result; }; - return { filterManagedAttributes }; + return { filterIdentifierType }; } export default function IdentifiersListPage() { @@ -97,26 +96,27 @@ function CreateNewSection({ href }: CreateButtonProps) { } function AgentIdentifiersListView() { - const COLLECTIONS_ATTRIBUTES_FILTER_ATTRIBUTES = [ - "name", - "multilingualDescription" - ]; + const AGENT_IDENTIFIERS_FILTER_ATTRIBUTES = ["name", "multilingualTitle"]; + const { filterIdentifierType } = useFilterIdentifierType(); - const AGENT_IDENTIFIERS_LIST_COLUMNS: ColumnDefinition[] = [ - { - cell: ({ - row: { - original: { id } - } - }) => , - header: "Name", - accessorKey: "name" - }, - descriptionCell(false, false, "multilingualDescription"), - groupCell("group"), - "createdBy", - dateCell("createdOn") - ]; + const AGENT_IDENTIFIERS_LIST_COLUMNS: ColumnDefinition[] = + [ + { + cell: ({ row: { original } }) => { + return ( + + {original.name} + + ); + }, + header: "Name", + accessorKey: "name" + }, + titleCell(false, false, "multilingualTitle"), + groupCell("group"), + "createdBy", + dateCell("createdOn") + ]; return ( <> @@ -125,17 +125,17 @@ function AgentIdentifiersListView() { {/* Quick create menu */} - + - + enableInMemoryFilter={true} - // filterFn={filterManagedAttributes} + filterFn={filterIdentifierType} filterType={ListLayoutFilterType.FREE_TEXT} - filterAttributes={COLLECTIONS_ATTRIBUTES_FILTER_ATTRIBUTES} - id="collections-module-managed-attribute-list" + filterAttributes={AGENT_IDENTIFIERS_FILTER_ATTRIBUTES} + id="agent-identifiers-list" queryTableProps={{ columns: AGENT_IDENTIFIERS_LIST_COLUMNS, - path: "collection-api/managed-attribute?page[limit]=1000" + path: "agent-api/identifier-type?page[limit]=1000" }} additionalFilters={(filterForm) => ({ isCompleted: false, diff --git a/packages/dina-ui/pages/identifier/view.tsx b/packages/dina-ui/pages/identifier/view.tsx new file mode 100644 index 0000000000..9854f1d65c --- /dev/null +++ b/packages/dina-ui/pages/identifier/view.tsx @@ -0,0 +1,35 @@ +import { DinaForm } from "common-ui"; +import { fromPairs } from "lodash"; +import { ViewPageLayout } from "../../components"; +import { AgentIdentifierType } from "../../types/agent-api/resources/AgentIdentifierType"; +import { IdentifierTypeFormLayout } from "./edit"; + +export default function IdentifierTypeDetailsPage() { + return ( + + form={(props) => ( + + {...props} + initialValues={{ + ...props.initialValues, + // Convert multilingualTitle to editable Dictionary format: + multilingualTitle: fromPairs( + props.initialValues.multilingualTitle?.titles?.map( + ({ title, lang }) => [lang ?? "", title ?? ""] + ) + ) + }} + > + + + )} + query={(id) => ({ + path: `agent-api/identifier-type/${id}` + })} + entityLink="/identifier" + type="identifier-type" + apiBaseUrl="/agent-api" + showDeleteButton={false} + /> + ); +} diff --git a/packages/dina-ui/pages/person/edit.tsx b/packages/dina-ui/pages/person/edit.tsx index 71ee501347..780f2b492e 100644 --- a/packages/dina-ui/pages/person/edit.tsx +++ b/packages/dina-ui/pages/person/edit.tsx @@ -1,4 +1,4 @@ -import { BackButton, useQuery, withResponse } from "common-ui"; +import { useQuery, withResponse } from "common-ui"; import { useRouter } from "next/router"; import { PersonForm } from "../../components"; import { Person } from "../../types/agent-api/resources/Person"; diff --git a/packages/dina-ui/types/agent-api/resources/AgentIdentifierType.ts b/packages/dina-ui/types/agent-api/resources/AgentIdentifierType.ts new file mode 100644 index 0000000000..4b38259f79 --- /dev/null +++ b/packages/dina-ui/types/agent-api/resources/AgentIdentifierType.ts @@ -0,0 +1,16 @@ +import { MultilingualTitle } from "../../common"; + +export interface AgentIdentifierTypeAttributes { + type: "identifier-type"; + id?: string | undefined; + createdBy?: string; + createdOn?: string; + key?: string; + name?: string; + dinaComponents?: string[]; + uriTemplate?: string; + term?: string; + multilingualTitle?: MultilingualTitle; +} + +export type AgentIdentifierType = AgentIdentifierTypeAttributes;