From e5e9e99bde7913bf57a6695e11704128d62cc840 Mon Sep 17 00:00:00 2001 From: Shemy Date: Thu, 30 Sep 2021 13:53:24 -0400 Subject: [PATCH 01/13] 24736 - Add some css to make the 3 links having visible focus indicators --- .../dina-ui/components/button-bar/nav/nav.tsx | 33 +++++++---------- .../button-bar/nav/wet-beow-bootstrap-4.css | 9 ----- .../button-bar/nav/wet-beow-override.css | 37 +++++++++++++++++++ packages/dina-ui/pages/_app.tsx | 1 + 4 files changed, 51 insertions(+), 29 deletions(-) create mode 100644 packages/dina-ui/components/button-bar/nav/wet-beow-override.css diff --git a/packages/dina-ui/components/button-bar/nav/nav.tsx b/packages/dina-ui/components/button-bar/nav/nav.tsx index fd311d7672..ef723c5841 100644 --- a/packages/dina-ui/components/button-bar/nav/nav.tsx +++ b/packages/dina-ui/components/button-bar/nav/nav.tsx @@ -18,25 +18,18 @@ export function Nav() { return ( <> - +
+ + + + + + + + + +
+
@@ -50,7 +43,7 @@ export function Nav() { alt={formatMessage("governmentOfCanada")} property="logo" /> - + diff --git a/packages/dina-ui/components/button-bar/nav/wet-beow-bootstrap-4.css b/packages/dina-ui/components/button-bar/nav/wet-beow-bootstrap-4.css index a687d8cf23..b152ee48b6 100644 --- a/packages/dina-ui/components/button-bar/nav/wet-beow-bootstrap-4.css +++ b/packages/dina-ui/components/button-bar/nav/wet-beow-bootstrap-4.css @@ -403,12 +403,3 @@ a.btn, .btn-outline-secondary { color: #3838f3; } - -.wb-inv { - clip: rect(1px, 1px, 1px, 1px); - height: 1px; - margin: 0; - overflow: hidden; - position: absolute; - width: 1px; -} diff --git a/packages/dina-ui/components/button-bar/nav/wet-beow-override.css b/packages/dina-ui/components/button-bar/nav/wet-beow-override.css new file mode 100644 index 0000000000..51600d7d87 --- /dev/null +++ b/packages/dina-ui/components/button-bar/nav/wet-beow-override.css @@ -0,0 +1,37 @@ +/* Below css are emulating WET/CDTS css or override as needed */ + +.wb-inv { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + margin: 0; + overflow: hidden; + position: absolute; + width: 1px; +} + +/* css for the 3 non visible skip links, make the background color same as the app bar */ +a.wb-link-inv:focus { + background-color: #26374a; + display: block; + color: white; + text-decoration: none; + margin-top: 25px; +} + +a.wb-link-inv { + color: transparent; + background-color: transparent; + clip: auto; + height: auto; + margin-top: 15px; + overflow: hidden; + position: absolute; + width: auto; +} +.wb-sl { + background: #26374a; + color: #fff; + font-weight: 700; + padding: 5px; + z-index: 501; +} diff --git a/packages/dina-ui/pages/_app.tsx b/packages/dina-ui/pages/_app.tsx index f38a02334e..6d888d24e7 100644 --- a/packages/dina-ui/pages/_app.tsx +++ b/packages/dina-ui/pages/_app.tsx @@ -25,6 +25,7 @@ import { ErrorBoundaryPage } from "../components"; import "../components/button-bar/nav/app-top.css"; import "../components/button-bar/nav/nav.css"; import "../components/button-bar/nav/wet-beow-bootstrap-4.css"; +import "../components/button-bar/nav/wet-beow-override.css"; import { FileUploadProviderImpl } from "../components/object-store/file-upload/FileUploadProvider"; import { DinaIntlProvider } from "../intl/dina-ui-intl"; From fd21dbcdca3e4bae627eee3838ea7bf898d575ce Mon Sep 17 00:00:00 2001 From: Shemy Date: Mon, 4 Oct 2021 14:30:25 -0400 Subject: [PATCH 02/13] 24785 - Modify the lang attribute for the toggle button to match the button display text locale - Add missing translations for labels and aria-labels --- packages/common-ui/lib/intl/LanguageSelector.tsx | 2 +- packages/common-ui/lib/intl/common-ui-en.ts | 2 ++ packages/dina-ui/components/button-bar/nav/nav.tsx | 3 ++- .../collection/CollectingEventFormLayout.tsx | 6 +++--- packages/dina-ui/intl/dina-ui-en.ts | 13 ++++++++++--- packages/dina-ui/intl/dina-ui-fr.ts | 7 +++---- 6 files changed, 21 insertions(+), 12 deletions(-) diff --git a/packages/common-ui/lib/intl/LanguageSelector.tsx b/packages/common-ui/lib/intl/LanguageSelector.tsx index 0cefe3551d..8938abd8d3 100644 --- a/packages/common-ui/lib/intl/LanguageSelector.tsx +++ b/packages/common-ui/lib/intl/LanguageSelector.tsx @@ -30,7 +30,7 @@ export function LanguageSelector() { className="btn btn-link px-0" style={{ color: "#0000cc" }} onClick={onClick} - lang={locale} + lang={key} > {LANGUAGE_LABELS[key]} diff --git a/packages/common-ui/lib/intl/common-ui-en.ts b/packages/common-ui/lib/intl/common-ui-en.ts index edc22b2e92..500608b852 100644 --- a/packages/common-ui/lib/intl/common-ui-en.ts +++ b/packages/common-ui/lib/intl/common-ui-en.ts @@ -52,6 +52,8 @@ export const COMMON_UI_MESSAGES_ENGLISH = { geoSuggest: "Geo-Suggest", geoSuggestTooltip: "This button shows some suggested geo-locations based on what you've typed into the field.", + jumpToPage: "jump to page", + rowsPerPage: "rows per page", loadingText: "Loading...", loggedInAsUser: "Logged in as:", logoutBtn: "Logout", diff --git a/packages/dina-ui/components/button-bar/nav/nav.tsx b/packages/dina-ui/components/button-bar/nav/nav.tsx index ef723c5841..bd0d0329e8 100644 --- a/packages/dina-ui/components/button-bar/nav/nav.tsx +++ b/packages/dina-ui/components/button-bar/nav/nav.tsx @@ -342,6 +342,7 @@ function NavCollectionDropdown() { } export function Footer() { + const { formatMessage } = useDinaIntl(); return (
@@ -384,7 +385,7 @@ export function Footer() {
Symbol of the Government of Canada
diff --git a/packages/dina-ui/components/collection/CollectingEventFormLayout.tsx b/packages/dina-ui/components/collection/CollectingEventFormLayout.tsx index 20f8b5b8a8..84f57c63e8 100644 --- a/packages/dina-ui/components/collection/CollectingEventFormLayout.tsx +++ b/packages/dina-ui/components/collection/CollectingEventFormLayout.tsx @@ -371,17 +371,17 @@ export function CollectingEventFormLayout({ )} diff --git a/packages/dina-ui/intl/dina-ui-en.ts b/packages/dina-ui/intl/dina-ui-en.ts index 4c77324306..6514a1bbce 100644 --- a/packages/dina-ui/intl/dina-ui-en.ts +++ b/packages/dina-ui/intl/dina-ui-en.ts @@ -143,7 +143,7 @@ export const DINAUI_MESSAGES_ENGLISH = { editWorkflowTemplateTitle: "Edit Workflow Template", elevationInMeters: "Elevation in Meters", enableDateRangeLabel: "Enable Date Range", - endEventDateTimeLabel: "End Event DateTime (YYYY-MM-DDTHH:MM:SS.MMM)", + endEventDateTime: "End Event DateTime (YYYY-MM-DDTHH:MM:SS.MMM)", exifProperties: "Exif Properties", existingAttachments: "Existing Attachments", feedbackButtonText: "Feedback", @@ -232,6 +232,7 @@ export const DINAUI_MESSAGES_ENGLISH = { field_editableBuiltInAttributes: "Visible Built In Attributes", field_editableManagedAttributes: "Managed Attributes In Use", field_email: "Email", + field_endEventDateTime: "End Event Date Time", field_familyNames_tooltip: "Family name(s) including compound family names", field_givenNames_tooltip: "First and all middle names", field_license: "License", @@ -265,6 +266,7 @@ export const DINAUI_MESSAGES_ENGLISH = { field_publiclyReleasable_tooltip: "Indicates if the object could be released publicly on a web page or open data portals.", field_qualifier: "Transcriber's Notes", + field_startEventDateTime: "Start Event Date Time", field_transcriberRemarks: "Verbatim Remarks", field_type: "Type", field_typeStatus: "Type Status", @@ -272,12 +274,16 @@ export const DINAUI_MESSAGES_ENGLISH = { field_verbatimScientificName: "Verbatim Scientific Name", field_verbatimDeterminer: "Verbatim Determiner", field_verbatimDate: "Verbatim Date", + field_verbatimEventDateTime: "Verbatim Event Date Time", field_xmpMetadataDate: "Last Updated On", field_xmpMetadataDate_tooltip: "Date and time of when the record was last updated.", field_xmpRightsWebStatement: "License", fileTooBig: "File too big", + filterAttribute: "Filter Attribute", filterByGroup: "Filter By Group", + filterPredicate: "Filter Predicate", + filterValue: "Filter Value", footerContactInfo: "Contact information", footerPrivacy: "Privacy", footerTermsAndConditions: "Terms and conditions", @@ -294,6 +300,7 @@ export const DINAUI_MESSAGES_ENGLISH = { georeferencedByLabel: "Georeferenced By (agent)", georeferencedDateLabel: "Georeferenced Date", governmentOfCanada: "Government of Canada", + governmentOfCanadaSymbol: "Symbol of the Government of Canada", goToThePreviousStep: "Go to the previous step", group: "Group", groupMustBeSelected: "Group must be selected", @@ -445,7 +452,7 @@ export const DINAUI_MESSAGES_ENGLISH = { splitSampleTagOriginalAsDestroyed: 'Tag Original as "Destroyed"', splitSubsampleTitle: "Split Material Sample", splitWorkflowRunTitle: "Split Workflow Run", - startEventDateTimeLabel: "Start Event DateTime (YYYY-MM-DDTHH:MM:SS.MMM)", + startEventDateTime: "Start Event DateTime (YYYY-MM-DDTHH:MM:SS.MMM)", startNewRunConfigLabel: "Start a New Run ", stateProvinceLabel: "State/Province", storage: "Storage", @@ -480,7 +487,7 @@ export const DINAUI_MESSAGES_ENGLISH = { userMustBelongToGroup: "User must belong to a Group", userViewTitle: "User", verbatimDeterminationLegend: "Verbatim Determination", - verbatimEventDateTimeLabel: "Verbatim Event DateTime", + verbatimEventDateTime: "Verbatim Event DateTime", verbatimLabelLegend: "Verbatim Label", verbatimLatLong: "Verbatim Lat/Long", viewDetailButtonLabel: " View Detail", diff --git a/packages/dina-ui/intl/dina-ui-fr.ts b/packages/dina-ui/intl/dina-ui-fr.ts index a2936cba9d..747f94c3b3 100644 --- a/packages/dina-ui/intl/dina-ui-fr.ts +++ b/packages/dina-ui/intl/dina-ui-fr.ts @@ -129,8 +129,7 @@ export const DINAUI_MESSAGES_FRENCH: Partial = { editStorageUnitTypeTitle: "Modifier le type de stockage", editWorkflowTemplateTitle: "Modifier le modèle de flux de travail", enableDateRangeLabel: "Activer la plage de dates", - endEventDateTimeLabel: - "Date/heure de fin d’événement (AAAA-MM-JJTHH:MM:SS.MMM)", + endEventDateTime: "Date/heure de fin d’événement (AAAA-MM-JJTHH:MM:SS.MMM)", exifProperties: "Propriétés existantes", existingAttachments: "Pièces jointes existantes", feedbackButtonText: "Commentaires", @@ -427,7 +426,7 @@ export const DINAUI_MESSAGES_FRENCH: Partial = { splitSampleTagOriginalAsDestroyed: "Identifier l’original comme « Détruit »", splitSubsampleTitle: "Division (sous-échantillon)", splitWorkflowRunTitle: "Exécuter la division du flux de travail ", - startEventDateTimeLabel: + startEventDateTime: "Date/heure de début de l’événement (AAAA-MM-JJTHH:MM:SS.MMM)", startNewRunConfigLabel: "Lancer une nouvelle éxécution", stateProvinceLabel: "État/province", @@ -460,7 +459,7 @@ export const DINAUI_MESSAGES_FRENCH: Partial = { userListTitle: "Utilisateurs", userMustBelongToGroup: "L’utilisateur doit appartenir à un groupe", userViewTitle: "Utilisateur", - verbatimEventDateTimeLabel: "Date et heure de l’événement Verbatim", + verbatimEventDateTime: "Date et heure de l’événement Verbatim", verbatimLabelLegend: "Étiquette Verbatim", verbatimLatLong: "Verbatim Lat/Long", viewDetailButtonLabel: "Afficher détails", From fee84d21d2cf6d9278dcb2693a2464ac13189c05 Mon Sep 17 00:00:00 2001 From: Shemy Date: Mon, 4 Oct 2021 15:35:15 -0400 Subject: [PATCH 03/13] 24740 - Add fields to Person.ts - Add fields to view and edit pages --- packages/dina-ui/components/add-person/PersonForm.tsx | 7 ++++++- packages/dina-ui/pages/person/view.tsx | 4 ++++ packages/dina-ui/types/agent-api/resources/Person.ts | 2 ++ 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/dina-ui/components/add-person/PersonForm.tsx b/packages/dina-ui/components/add-person/PersonForm.tsx index 39eb09302c..211ecdf2df 100644 --- a/packages/dina-ui/components/add-person/PersonForm.tsx +++ b/packages/dina-ui/components/add-person/PersonForm.tsx @@ -10,7 +10,6 @@ import { } from "common-ui"; import { ResourceSelectField } from "common-ui/lib"; import { PersistedResource } from "kitsu"; -import { IdentifierType } from "../../../dina-ui/types/agent-api/resources/Identifier"; import { Organization } from "../../../dina-ui/types/agent-api/resources/Organization"; import { DinaMessage } from "../../intl/dina-ui-intl"; import { Person } from "../../types/objectstore-api"; @@ -88,6 +87,12 @@ export function PersonForm({ onSubmitSuccess, person }: PersonFormProps) { />
+
+ +
+
+ +
diff --git a/packages/dina-ui/pages/person/view.tsx b/packages/dina-ui/pages/person/view.tsx index 8f9fdac520..047a5a5ad8 100644 --- a/packages/dina-ui/pages/person/view.tsx +++ b/packages/dina-ui/pages/person/view.tsx @@ -75,6 +75,10 @@ export function PersonDetailsPage({ router }: WithRouterProps) { fieldClassName="col-md-4" /> )} +
+ + +
diff --git a/packages/dina-ui/types/agent-api/resources/Person.ts b/packages/dina-ui/types/agent-api/resources/Person.ts index b61ef3837d..9e013a6452 100644 --- a/packages/dina-ui/types/agent-api/resources/Person.ts +++ b/packages/dina-ui/types/agent-api/resources/Person.ts @@ -13,6 +13,8 @@ export interface PersonAttributes { createdBy?: string; createdOn?: string; identifiers?: Identifier[]; + webpage?: URL; + remarks?: string; } export interface PersonRelationships { From 57c4d6d9f16c9776210b50f52ed990a58708a77f Mon Sep 17 00:00:00 2001 From: Shemy Date: Tue, 5 Oct 2021 09:55:15 -0400 Subject: [PATCH 04/13] 24741 - Add 3 new fields to institution.ts fiels - Add 3 fields to view and edit pages and making sure the French part will be in place once translation done - Fix delete institution leading slash issue --- packages/common-ui/lib/intl/common-ui-en.ts | 3 +++ packages/dina-ui/intl/dina-ui-en.ts | 2 ++ packages/dina-ui/pages/collection/institution/edit.tsx | 7 +++++++ packages/dina-ui/pages/collection/institution/view.tsx | 1 + .../dina-ui/types/collection-api/resources/Institution.ts | 3 +++ 5 files changed, 16 insertions(+) diff --git a/packages/common-ui/lib/intl/common-ui-en.ts b/packages/common-ui/lib/intl/common-ui-en.ts index edc22b2e92..a1741b4f60 100644 --- a/packages/common-ui/lib/intl/common-ui-en.ts +++ b/packages/common-ui/lib/intl/common-ui-en.ts @@ -32,9 +32,12 @@ export const COMMON_UI_MESSAGES_ENGLISH = { errorPageTitle: "Error", existing: "Existing", false: "False", + field_address: "Address", field_author: "Author", field_changedProperties: "Changed Properties", field_commitDateTime: "Commit Date and Time", + field_familyNames: "Family Names", + field_givenNames: "Given Names", field_group: "Group", field_resourceName: "Resource Name", field_snapshotType: "Snapshot Type", diff --git a/packages/dina-ui/intl/dina-ui-en.ts b/packages/dina-ui/intl/dina-ui-en.ts index 4c77324306..9f91fc4fb6 100644 --- a/packages/dina-ui/intl/dina-ui-en.ts +++ b/packages/dina-ui/intl/dina-ui-en.ts @@ -265,6 +265,7 @@ export const DINAUI_MESSAGES_ENGLISH = { field_publiclyReleasable_tooltip: "Indicates if the object could be released publicly on a web page or open data portals.", field_qualifier: "Transcriber's Notes", + field_remarks: "Remarks", field_transcriberRemarks: "Verbatim Remarks", field_type: "Type", field_typeStatus: "Type Status", @@ -272,6 +273,7 @@ export const DINAUI_MESSAGES_ENGLISH = { field_verbatimScientificName: "Verbatim Scientific Name", field_verbatimDeterminer: "Verbatim Determiner", field_verbatimDate: "Verbatim Date", + field_webpage: "Web Page", field_xmpMetadataDate: "Last Updated On", field_xmpMetadataDate_tooltip: "Date and time of when the record was last updated.", diff --git a/packages/dina-ui/pages/collection/institution/edit.tsx b/packages/dina-ui/pages/collection/institution/edit.tsx index 4026d29dc0..8a37fb22e9 100644 --- a/packages/dina-ui/pages/collection/institution/edit.tsx +++ b/packages/dina-ui/pages/collection/institution/edit.tsx @@ -146,6 +146,13 @@ export function InstitutionFormLayout() { multiLines={true} />
+
+ + +
+
+ +
{readOnly && (
diff --git a/packages/dina-ui/pages/collection/institution/view.tsx b/packages/dina-ui/pages/collection/institution/view.tsx index c366f30dad..78bdeefbf4 100644 --- a/packages/dina-ui/pages/collection/institution/view.tsx +++ b/packages/dina-ui/pages/collection/institution/view.tsx @@ -38,6 +38,7 @@ export function InstitutionDetailsPage({ router }: WithRouterProps) { resource={institution} apiBaseUrl="/collection-api" resourceBaseUrl="collection/institution" + withLeadingSlash={true} /> diff --git a/packages/dina-ui/types/collection-api/resources/Institution.ts b/packages/dina-ui/types/collection-api/resources/Institution.ts index f72b94a9bb..eb0a78cdd0 100644 --- a/packages/dina-ui/types/collection-api/resources/Institution.ts +++ b/packages/dina-ui/types/collection-api/resources/Institution.ts @@ -13,6 +13,9 @@ export interface InstitutionAttributes { }[] | null; }; + webpage?: URL; + address?: string; + remarks?: string; } export type Institution = KitsuResource & From a25783b45f4b8089d2b5f3fcd97208e96f7e18d8 Mon Sep 17 00:00:00 2001 From: Shemy Date: Wed, 6 Oct 2021 08:41:36 -0400 Subject: [PATCH 05/13] 24758 - Add the 4 fields to Collection.ts - Add the new fields to view and edit pages --- packages/dina-ui/intl/dina-ui-en.ts | 1 + packages/dina-ui/pages/collection/collection/edit.tsx | 8 ++++++++ .../dina-ui/types/collection-api/resources/Collection.ts | 4 ++++ 3 files changed, 13 insertions(+) diff --git a/packages/dina-ui/intl/dina-ui-en.ts b/packages/dina-ui/intl/dina-ui-en.ts index 4c77324306..e59c27436d 100644 --- a/packages/dina-ui/intl/dina-ui-en.ts +++ b/packages/dina-ui/intl/dina-ui-en.ts @@ -170,6 +170,7 @@ export const DINAUI_MESSAGES_ENGLISH = { field_collectorGroup_agentsError: "At lease one agent should be specified for the group", field_collectors: "Collectors", + field_contact: " Contact", field_createdBy: "Created By", field_createdDate: "Created Date", field_createdOn: "Created On", diff --git a/packages/dina-ui/pages/collection/collection/edit.tsx b/packages/dina-ui/pages/collection/collection/edit.tsx index 0caee069b2..30660596d0 100644 --- a/packages/dina-ui/pages/collection/collection/edit.tsx +++ b/packages/dina-ui/pages/collection/collection/edit.tsx @@ -180,6 +180,14 @@ export function CollectionFormFields({ title }) { multiLines={true} />
+
+ + +
+
+ + +
{readOnly && (
diff --git a/packages/dina-ui/types/collection-api/resources/Collection.ts b/packages/dina-ui/types/collection-api/resources/Collection.ts index 893012103f..ab0fcde557 100644 --- a/packages/dina-ui/types/collection-api/resources/Collection.ts +++ b/packages/dina-ui/types/collection-api/resources/Collection.ts @@ -11,6 +11,10 @@ export interface CollectionAttributes { createdOn?: string; createdBy?: string; multilingualDescription?: MultilingualDescription; + webpage?: URL; + contact?: string; + address?: string; + remarks?: string; } export interface CollectionRelationships { From 68d930ce7a2ca25a7042aa415722398b8d204e1b Mon Sep 17 00:00:00 2001 From: Mat Poff Date: Wed, 6 Oct 2021 14:23:39 +0000 Subject: [PATCH 06/13] 24758 -Changed webpage type from URL to string. --- packages/dina-ui/types/collection-api/resources/Collection.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dina-ui/types/collection-api/resources/Collection.ts b/packages/dina-ui/types/collection-api/resources/Collection.ts index ab0fcde557..1908541e88 100644 --- a/packages/dina-ui/types/collection-api/resources/Collection.ts +++ b/packages/dina-ui/types/collection-api/resources/Collection.ts @@ -11,7 +11,7 @@ export interface CollectionAttributes { createdOn?: string; createdBy?: string; multilingualDescription?: MultilingualDescription; - webpage?: URL; + webpage?: string; contact?: string; address?: string; remarks?: string; From 90a4d54b3ba493c69e32768d25e4a3599b57d7e9 Mon Sep 17 00:00:00 2001 From: Mat Poff Date: Wed, 6 Oct 2021 15:03:43 +0000 Subject: [PATCH 07/13] 24741 Changed URL field to string. --- packages/dina-ui/types/collection-api/resources/Institution.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dina-ui/types/collection-api/resources/Institution.ts b/packages/dina-ui/types/collection-api/resources/Institution.ts index eb0a78cdd0..6a5be1f43e 100644 --- a/packages/dina-ui/types/collection-api/resources/Institution.ts +++ b/packages/dina-ui/types/collection-api/resources/Institution.ts @@ -13,7 +13,7 @@ export interface InstitutionAttributes { }[] | null; }; - webpage?: URL; + webpage?: string; address?: string; remarks?: string; } From b5aed8b5e071bba13afb48aca70286f91dc65fbf Mon Sep 17 00:00:00 2001 From: Mat Poff Date: Wed, 6 Oct 2021 17:24:22 +0000 Subject: [PATCH 08/13] In progress 24771 Changed DeterminationField to use tabs. --- .../collection/DeterminationField.tsx | 166 ++++++------------ 1 file changed, 57 insertions(+), 109 deletions(-) diff --git a/packages/dina-ui/components/collection/DeterminationField.tsx b/packages/dina-ui/components/collection/DeterminationField.tsx index 25073720d6..a0e57db8ae 100644 --- a/packages/dina-ui/components/collection/DeterminationField.tsx +++ b/packages/dina-ui/components/collection/DeterminationField.tsx @@ -10,8 +10,9 @@ import { useDinaFormContext } from "common-ui"; import { FieldArray } from "formik"; -import { Accordion } from "react-bootstrap"; -import { VscTriangleDown, VscTriangleRight } from "react-icons/vsc"; +import { clamp } from "lodash"; +import { useState } from "react"; +import { Tab, TabList, TabPanel, Tabs } from "react-tabs"; import { CatalogueOfLifeNameField } from "."; import { Person } from "../../../dina-ui/types/agent-api/resources/Person"; import { TypeStatusEnum } from "../../../dina-ui/types/collection-api/resources/TypeStatus"; @@ -54,6 +55,8 @@ export function DeterminationField({ className }: DeterminationFieldProps) { const { formatMessage, locale } = useDinaIntl(); const determinationsPath = "determination"; + const [activeTabIdx, setActiveTabIdx] = useState(0); + return (
@@ -62,16 +65,14 @@ export function DeterminationField({ className }: DeterminationFieldProps) { (form.values.determination as Determination[]) ?? []; function addDetermination() { push({}); - setImmediate(() => { - // Scroll to the new accordion item: - document - .querySelector(".determination-section .accordion:last-child") - ?.scrollIntoView({ behavior: "smooth", block: "center" }); - }); + setActiveTabIdx(determinations.length); } function removeDetermination(index: number) { - remove(index); + remove(index); // Stay on the current tab number, or reduce if removeing the last element: + setActiveTabIdx(current => + clamp(current, 0, determinations.length - 2) + ); } function determinationInternal(index: number) { @@ -190,108 +191,55 @@ export function DeterminationField({ className }: DeterminationFieldProps) {
-
- - {!readOnly && !isTemplate && determinations?.length && ( - - - - )} -
-
- } + legend={} >
- {determinations.length === 1 ? ( - determinationInternal(0) - ) : ( -
- {!isTemplate && ( -
-
-
-
- -
-
- -
-
- -
-
-
- )} - - - {isTemplate - ? determinationInternal(0) - : determinations.map((determination, index) => ( - - - - - -
-
- {determination.verbatimScientificName} -
-
- {determination.verbatimDate} -
-
- {determination.verbatimDeterminer} -
-
- {!readOnly && !isTemplate && ( - - )} -
-
- - - {determinationInternal(index)} - - - - ))} -
+ + { + // Only show the tabs when there is more than 1 assertion: + + {determinations.map((_, index) => ( + + {index + 1} + + ))} + + } + {determinations.length + ? determinations.map((_, index) => ( + + {determinationInternal(index)} + {!readOnly && !isTemplate && ( +
+ + + + removeDetermination(index)} + > + + +
+ )} + + )) + : null} + + {!determinations.length && !readOnly && !isTemplate && ( + + + )}
From 5888744630f01ddd87e59c4d3cd78894e7b7bd1c Mon Sep 17 00:00:00 2001 From: Mat Poff Date: Wed, 6 Oct 2021 19:07:21 +0000 Subject: [PATCH 09/13] In progress 24771 -Added filedAs field with suggestions from determinations fields. -Added test. --- .../formik-connected/AutoSuggestTextField.tsx | 46 ++++++---- .../lib/formik-connected/TextField.tsx | 7 +- .../__tests__/AutoSuggestTextField.test.tsx | 18 ++++ packages/common-ui/package.json | 1 + .../collection/DeterminationField.tsx | 66 ++++++++++---- .../CatalogueOfLifeSearchBox.tsx | 2 +- packages/dina-ui/intl/dina-ui-en.ts | 1 + yarn.lock | 90 ++++++++++++++----- 8 files changed, 169 insertions(+), 62 deletions(-) diff --git a/packages/common-ui/lib/formik-connected/AutoSuggestTextField.tsx b/packages/common-ui/lib/formik-connected/AutoSuggestTextField.tsx index 03d4dbb691..88f2f3baa6 100644 --- a/packages/common-ui/lib/formik-connected/AutoSuggestTextField.tsx +++ b/packages/common-ui/lib/formik-connected/AutoSuggestTextField.tsx @@ -4,19 +4,16 @@ import { TextFieldProps, useQuery } from "common-ui"; -import { FormikContextType, useFormikContext } from "formik"; +import { FormikContextType } from "formik"; import { KitsuResource, PersistedResource } from "kitsu"; -import { castArray, uniq } from "lodash"; +import { castArray, compact, uniq } from "lodash"; import React, { ChangeEvent, InputHTMLAttributes, useEffect, useState } from "react"; -import AutoSuggest, { - InputProps, - ShouldRenderReasons -} from "react-autosuggest"; +import AutoSuggest, { InputProps } from "react-autosuggest"; import { useDebounce } from "use-debounce"; import { OnFormikSubmit } from "./safeSubmit"; @@ -28,11 +25,16 @@ interface AutoSuggestConfig { searchValue: string, formikCtx: FormikContextType ) => JsonApiQuerySpec; + /** Hard-coded suggestions */ + suggestions?: ( + searchValue: string, + formikCtx: FormikContextType + ) => (string | null | undefined)[]; + /** Configures a */ suggestion?: ( resource: PersistedResource, searchValue: string ) => string | string[] | undefined; - configSuggestion?: (resource: PersistedResource) => string[]; onSuggestionSelected?: OnFormikSubmit>; timeoutMs?: number; /** Show the suggestions even when the input is blank. */ @@ -46,7 +48,7 @@ interface AutoSuggestConfig { export function AutoSuggestTextField({ query, suggestion, - configSuggestion, + suggestions, onSuggestionSelected, timeoutMs, alwaysShowSuggestions, @@ -55,10 +57,12 @@ export function AutoSuggestTextField({ return ( ( + customInput={(inputProps, formik) => ( ({ function AutoSuggestTextFieldInternal({ query, + suggestions, suggestion = (it, searchVal) => (!searchVal ? String(it) : String(searchVal)), onSuggestionSelected, id, timeoutMs = 250, alwaysShowSuggestions, + formik, ...inputProps -}: InputHTMLAttributes & AutoSuggestConfig) { - const formikCtx = useFormikContext(); - +}: InputHTMLAttributes & + AutoSuggestConfig & { formik: FormikContextType }) { const [searchValue, setSearchValue] = useState(""); const [debouncedSearchValue] = timeoutMs ? useDebounce(searchValue, timeoutMs) : [searchValue]; const { loading, response } = useQuery( - query?.(debouncedSearchValue, formikCtx) as any, + query?.(debouncedSearchValue, formik) as any, { // Don't show results when the search is empty: - disabled: !alwaysShowSuggestions && !debouncedSearchValue?.trim() + disabled: + !query || (!alwaysShowSuggestions && !debouncedSearchValue?.trim()) } ); - const suggestions = - response && !loading + const allSuggestions = compact([ + ...(suggestions?.(searchValue, formik) || []), + ...(response && !loading ? uniq( castArray(response.data).flatMap(it => suggestion(it, debouncedSearchValue) ) ) - : []; + : []) + ]); useEffect(() => { const autosuggestGeneratedDivs = @@ -137,14 +145,14 @@ function AutoSuggestTextFieldInternal({
s} onSuggestionsFetchRequested={({ value }) => setSearchValue(value)} onSuggestionSelected={(_, data) => { inputProps.onChange?.({ target: { value: data.suggestion } } as any); - onSuggestionSelected?.(data.suggestion, formikCtx); + onSuggestionSelected?.(data.suggestion, formik); }} onSuggestionsClearRequested={() => setSearchValue("")} renderSuggestion={text =>
{text}
} diff --git a/packages/common-ui/lib/formik-connected/TextField.tsx b/packages/common-ui/lib/formik-connected/TextField.tsx index 59192f8b11..9df35b0c87 100644 --- a/packages/common-ui/lib/formik-connected/TextField.tsx +++ b/packages/common-ui/lib/formik-connected/TextField.tsx @@ -14,7 +14,10 @@ export interface TextFieldProps extends LabelWrapperParams { numberOnly?: boolean; letterOnly?: boolean; noSpace?: boolean; - customInput?: (inputProps: InputHTMLAttributes) => JSX.Element; + customInput?: ( + inputProps: InputHTMLAttributes, + form: FormikProps + ) => JSX.Element; onChangeExternal?: ( form: FormikProps, name: string, @@ -76,7 +79,7 @@ export function TextField(props: TextFieldProps) { // controlled input that we manually pass the "onChange" and "value" props. Otherwise // we will get React's warning about switching from an uncontrolled to controlled input. return ( - customInput?.(inputPropsInternal) ?? + customInput?.(inputPropsInternal, formik) ?? (multiLines ? ( { filter: { rsql: "name==*p*" } }); }); + + it("Can render custom suggestions passed via props.", async () => { + const wrapper = mountWithAppContext( + + + name="examplePersonNameField" + suggestions={() => ["suggestion-1", "suggestion-2"]} + timeoutMs={0} + /> + , + { apiContext } + ); + + expect(wrapper.find(AutoSuggest).prop("suggestions")).toEqual([ + "suggestion-1", + "suggestion-2" + ]); + }); }); diff --git a/packages/common-ui/package.json b/packages/common-ui/package.json index 38fdbc77ff..fe670a2e43 100644 --- a/packages/common-ui/package.json +++ b/packages/common-ui/package.json @@ -49,6 +49,7 @@ "yup": "^0.32.9" }, "devDependencies": { + "@types/dompurify": "^2.3.1", "@types/lodash": "^4.14.172", "@types/react": "^17.0.19", "@types/react-autosuggest": "^10.1.4", diff --git a/packages/dina-ui/components/collection/DeterminationField.tsx b/packages/dina-ui/components/collection/DeterminationField.tsx index a0e57db8ae..eb06033717 100644 --- a/packages/dina-ui/components/collection/DeterminationField.tsx +++ b/packages/dina-ui/components/collection/DeterminationField.tsx @@ -1,6 +1,7 @@ import { AutoSuggestTextField, DateField, + DinaFormSection, FieldSet, filterBy, FormikButton, @@ -9,6 +10,7 @@ import { TextFieldWithMultiplicationButton, useDinaFormContext } from "common-ui"; +import DOMPurify from "dompurify"; import { FieldArray } from "formik"; import { clamp } from "lodash"; import { useState } from "react"; @@ -198,7 +200,7 @@ export function DeterminationField({ className }: DeterminationFieldProps) { { // Only show the tabs when there is more than 1 assertion: @@ -212,23 +214,28 @@ export function DeterminationField({ className }: DeterminationFieldProps) { {determinations.length ? determinations.map((_, index) => ( - {determinationInternal(index)} - {!readOnly && !isTemplate && ( -
- - - - removeDetermination(index)} - > - - -
- )} +
+ {determinationInternal(index)} + {!readOnly && !isTemplate && ( +
+ + + + removeDetermination(index)} + > + + +
+ )} +
)) : null} @@ -242,6 +249,29 @@ export function DeterminationField({ className }: DeterminationFieldProps) { )}
+
+ + + determinations.flatMap(det => [ + det.verbatimScientificName, + // Scientific name can be html: + det.scientificName && + new DOMParser().parseFromString( + DOMPurify.sanitize(det.scientificName), + "text/html" + ).documentElement.textContent + ]) ?? [] + } + /> + +
); }} diff --git a/packages/dina-ui/components/collection/catalogue-of-life/CatalogueOfLifeSearchBox.tsx b/packages/dina-ui/components/collection/catalogue-of-life/CatalogueOfLifeSearchBox.tsx index de13ec9f2e..c43ecac483 100644 --- a/packages/dina-ui/components/collection/catalogue-of-life/CatalogueOfLifeSearchBox.tsx +++ b/packages/dina-ui/components/collection/catalogue-of-life/CatalogueOfLifeSearchBox.tsx @@ -56,7 +56,7 @@ export function CatalogueOfLifeSearchBox({ const nameResults = searchResult?.result; return ( -
+
{/* Hide this for now for the demo */} {/*