UIORGS-398: modify summary display in organization view mode

folio-org · Oct 17, 2023 · 80f8c62 · 80f8c62
1 parent c0f694e
commit 80f8c62
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 74 deletions.
diff --git a/src/Organizations/OrganizationDetails/OrganizationDetails.js b/src/Organizations/OrganizationDetails/OrganizationDetails.js
@@ -61,6 +61,20 @@ import { OrganizationAgreements } from './OrganizationAgreements';
 import { OrganizationAccounts } from './OrganizationAccounts';
 import { IntegrationDetails } from './IntegrationDetails';
 
+const {
+  summarySection,
+  contactInformationSection,
+  contactPeopleSection,
+  interfacesSection,
+  vendorInformationSection,
+  vendorTermsSection,
+  integrationDetailsSection,
+  accountsSection,
+  notesSection,
+  agreements,
+  donorContacts,
+} = ORGANIZATION_SECTIONS;
+
 const OrganizationDetails = ({
   onClose,
   onEdit,
@@ -75,16 +89,16 @@ const OrganizationDetails = ({
   const stripes = useStripes();
   const [isRemoveModalOpened, toggleRemoveModal] = useModalToggle();
   const initialAccordionStatus = {
-    [ORGANIZATION_SECTIONS.summarySection]: true,
-    [ORGANIZATION_SECTIONS.contactInformationSection]: false,
-    [ORGANIZATION_SECTIONS.contactPeopleSection]: true,
-    [ORGANIZATION_SECTIONS.interfacesSection]: false,
-    [ORGANIZATION_SECTIONS.vendorInformationSection]: false,
-    [ORGANIZATION_SECTIONS.vendorTermsSection]: false,
-    [ORGANIZATION_SECTIONS.integrationDetailsSection]: false,
-    [ORGANIZATION_SECTIONS.accountsSection]: false,
-    [ORGANIZATION_SECTIONS.notesSection]: false,
-    [ORGANIZATION_SECTIONS.agreements]: false,
+    [summarySection]: true,
+    [contactInformationSection]: false,
+    [contactPeopleSection]: true,
+    [interfacesSection]: false,
+    [vendorInformationSection]: false,
+    [vendorTermsSection]: false,
+    [integrationDetailsSection]: false,
+    [accountsSection]: false,
+    [notesSection]: false,
+    [agreements]: false,
   };
   const [isTagsOpened, toggleTagsPane] = useModalToggle();
   const paneTitleRef = useRef();
@@ -259,8 +273,8 @@ const OrganizationDetails = ({
 
           <AccordionSet initialStatus={initialAccordionStatus}>
             <Accordion
-              id={ORGANIZATION_SECTIONS.summarySection}
-              label={ORGANIZATION_SECTION_LABELS[ORGANIZATION_SECTIONS.summarySection]}
+              id={summarySection}
+              label={ORGANIZATION_SECTION_LABELS[summarySection]}
             >
               <OrganizationSummary
                 acqUnitIds={organization.acqUnitIds}
@@ -284,14 +298,14 @@ const OrganizationDetails = ({
               entityName={organization.name}
               entityType={ORG_NOTE_TYPE}
               hideAssignButton
-              id={ORGANIZATION_SECTIONS.notesSection}
+              id={notesSection}
               pathToNoteCreate={`${NOTES_ROUTE}/new`}
               pathToNoteDetails={NOTES_ROUTE}
             />
 
             <Accordion
-              id={ORGANIZATION_SECTIONS.contactInformationSection}
-              label={ORGANIZATION_SECTION_LABELS[ORGANIZATION_SECTIONS.contactInformationSection]}
+              id={contactInformationSection}
+              label={ORGANIZATION_SECTION_LABELS[contactInformationSection]}
             >
               <OrganizationContactInfo
                 organization={organization}
@@ -300,8 +314,8 @@ const OrganizationDetails = ({
             </Accordion>
 
             <Accordion
-              id={ORGANIZATION_SECTIONS.contactPeopleSection}
-              label={ORGANIZATION_SECTION_LABELS[ORGANIZATION_SECTIONS.contactPeopleSection]}
+              id={contactPeopleSection}
+              label={ORGANIZATION_SECTION_LABELS[contactPeopleSection]}
             >
               <OrganizationContactPeopleContainer
                 contactsIds={organization.contacts}
@@ -310,20 +324,33 @@ const OrganizationDetails = ({
             </Accordion>
 
             <Accordion
-              id={ORGANIZATION_SECTIONS.interfacesSection}
-              label={ORGANIZATION_SECTION_LABELS[ORGANIZATION_SECTIONS.interfacesSection]}
+              id={interfacesSection}
+              label={ORGANIZATION_SECTION_LABELS[interfacesSection]}
             >
               <OrganizationInterfacesContainer
                 interfaceIds={organization.interfaces}
               />
             </Accordion>
 
+            {
+              Boolean(organization.isVendor && organization.isDonor) && (
+              <Accordion
+                id={donorContacts}
+                label={ORGANIZATION_SECTION_LABELS[donorContacts]}
+              >
+                {/*
+                  TODO: add donor contacts list component https://issues.folio.org/browse/UIORGS-394
+                */}
+              </Accordion>
+              )
+            }
+
             {
               organization.isVendor && (
                 <>
                   <Accordion
-                    id={ORGANIZATION_SECTIONS.vendorInformationSection}
-                    label={ORGANIZATION_SECTION_LABELS[ORGANIZATION_SECTIONS.vendorInformationSection]}
+                    id={vendorInformationSection}
+                    label={ORGANIZATION_SECTION_LABELS[vendorInformationSection]}
                   >
                     <OrganizationVendorInfo
                       paymentMethod={organization.paymentMethod}
@@ -343,17 +370,17 @@ const OrganizationDetails = ({
                   </Accordion>
 
                   <Accordion
-                    id={ORGANIZATION_SECTIONS.vendorTermsSection}
-                    label={ORGANIZATION_SECTION_LABELS[ORGANIZATION_SECTIONS.vendorTermsSection]}
+                    id={vendorTermsSection}
+                    label={ORGANIZATION_SECTION_LABELS[vendorTermsSection]}
                   >
                     <OrganizationAgreements
                       agreements={organization.agreements}
                     />
                   </Accordion>
 
                   <Accordion
-                    id={ORGANIZATION_SECTIONS.integrationDetailsSection}
-                    label={ORGANIZATION_SECTION_LABELS[ORGANIZATION_SECTIONS.integrationDetailsSection]}
+                    id={integrationDetailsSection}
+                    label={ORGANIZATION_SECTION_LABELS[integrationDetailsSection]}
                     displayWhenOpen={addIntegrationButton}
                   >
                     <IntegrationDetails
@@ -363,8 +390,8 @@ const OrganizationDetails = ({
                   </Accordion>
 
                   <Accordion
-                    id={ORGANIZATION_SECTIONS.accountsSection}
-                    label={ORGANIZATION_SECTION_LABELS[ORGANIZATION_SECTIONS.accountsSection]}
+                    id={accountsSection}
+                    label={ORGANIZATION_SECTION_LABELS[accountsSection]}
                   >
                     <OrganizationAccounts
                       accounts={organization.accounts}
@@ -375,8 +402,8 @@ const OrganizationDetails = ({
             }
 
             <LinkedAgreements
-              id={ORGANIZATION_SECTIONS.agreements}
-              label={ORGANIZATION_SECTION_LABELS[ORGANIZATION_SECTIONS.agreements]}
+              id={agreements}
+              label={ORGANIZATION_SECTION_LABELS[agreements]}
               organization={organization}
             />
           </AccordionSet>

diff --git a/src/Organizations/OrganizationDetails/OrganizationSummary/OrganizationSummary.js b/src/Organizations/OrganizationDetails/OrganizationSummary/OrganizationSummary.js
@@ -1,12 +1,11 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
 
 import {
   Checkbox,
   Col,
   KeyValue,
-  MultiColumnList,
   NoValue,
   Row,
 } from '@folio/stripes/components';
@@ -18,12 +17,6 @@ import {
 
 import { ORGANIZATION_SECTIONS } from '../../constants';
 
-const aliasesColumnMapping = {
-  value: <FormattedMessage id="ui-organizations.summary.alias" />,
-  description: <FormattedMessage id="ui-organizations.summary.description" />,
-};
-const aliasesVisibleColumns = ['value', 'description'];
-
 const OrganizationSummary = ({
   acqUnitIds,
   aliases,
@@ -39,6 +32,7 @@ const OrganizationSummary = ({
   organizationTypes,
 }) => {
   const defaultLanguageValue = LANG_LABEL_BY_CODE[language] || language;
+  const alternativeNames = useMemo(() => aliases.map(({ value }) => value).join(', '), [aliases]);
 
   return (
     <>
@@ -54,96 +48,89 @@ const OrganizationSummary = ({
       </Row>
 
       <Row>
-        <Col xs={4}>
+        <Col xs={3}>
           <KeyValue
             data-testid="name"
             label={<FormattedMessage id="ui-organizations.summary.name" />}
             value={name}
           />
         </Col>
 
-        <Col xs={4}>
+        <Col xs={3}>
           <KeyValue
             label={<FormattedMessage id="ui-organizations.summary.code" />}
             value={code}
           />
         </Col>
 
-        <Col xs={4}>
+        <Col xs={3}>
           <KeyValue
             data-testid="accountingCode"
             label={<FormattedMessage id="ui-organizations.summary.accountingCode" />}
             value={erpCode || <NoValue />}
           />
         </Col>
 
-        <Col xs={4}>
+        <Col xs={3}>
           <KeyValue
             label={<FormattedMessage id="ui-organizations.summary.organizationStatus" />}
           >
             {status && <FormattedMessage id={`ui-organizations.organizationStatus.${status.toLowerCase()}`} />}
           </KeyValue>
         </Col>
 
-        <Col xs={4}>
+        <Col xs={3}>
           <KeyValue
             data-testid="defaultLanguage"
             label={<FormattedMessage id="ui-organizations.summary.defaultLanguage" />}
             value={defaultLanguageValue || <NoValue />}
           />
         </Col>
 
-        <Col xs={4}>
-          <Checkbox
-            checked={isVendor}
-            disabled
-            label={<FormattedMessage id="ui-organizations.summary.isVendor" />}
-            vertical
-          />
-        </Col>
-
-        <Col xs={4}>
-          <Checkbox
-            checked={isDonor}
-            disabled
-            label={<FormattedMessage id="ui-organizations.summary.isDonor" />}
-            vertical
-          />
-        </Col>
-
-        <Col xs={4}>
+        <Col xs={3}>
           <KeyValue
             data-testid="type"
             label={<FormattedMessage id="ui-organizations.summary.type" />}
             value={organizationTypes.join(', ') || <NoValue />}
           />
         </Col>
 
-        <Col xs={4}>
+        <Col xs={3}>
           <AcqUnitsView units={acqUnitIds} />
         </Col>
 
-        <Col xs={12}>
+        <Col xs={3}>
           <KeyValue
             data-testid="description"
             label={<FormattedMessage id="ui-organizations.summary.description" />}
             value={description || <NoValue />}
           />
         </Col>
-      </Row>
 
-      <Row>
-        <Col xs={12}>
+        <Col xs={3}>
+          <Checkbox
+            checked={isDonor}
+            disabled
+            label={<FormattedMessage id="ui-organizations.summary.isDonor" />}
+            vertical
+          />
+        </Col>
+
+        <Col xs={3}>
+          <Checkbox
+            checked={isVendor}
+            disabled
+            label={<FormattedMessage id="ui-organizations.summary.isVendor" />}
+            vertical
+          />
+        </Col>
+
+        <Col xs={3}>
           <KeyValue
+            data-testid="alternativeNames"
             label={<FormattedMessage id="ui-organizations.summary.alternativeNames" />}
-          >
-            <MultiColumnList
-              contentData={aliases}
-              columnMapping={aliasesColumnMapping}
-              interactive={false}
-              visibleColumns={aliasesVisibleColumns}
-            />
-          </KeyValue>
+            value={alternativeNames || <NoValue />}
+          />
         </Col>
       </Row>
     </>

diff --git a/src/Organizations/constants.js b/src/Organizations/constants.js
@@ -12,6 +12,7 @@ export const ORGANIZATION_SECTIONS = {
   notesSection: 'notesSection',
   integrationDetailsSection: 'integrationDetailsSection',
   agreements: 'linkedAgreements',
+  donorContacts: 'donorContacts',
 };
 
 export const ORGANIZATION_SECTION_LABELS = {
@@ -24,6 +25,7 @@ export const ORGANIZATION_SECTION_LABELS = {
   [ORGANIZATION_SECTIONS.accountsSection]: <FormattedMessage id="ui-organizations.accounts" />,
   [ORGANIZATION_SECTIONS.integrationDetailsSection]: <FormattedMessage id="ui-organizations.integrationDetails" />,
   [ORGANIZATION_SECTIONS.agreements]: <FormattedMessage id="ui-organizations.linkedAgreements.section" />,
+  [ORGANIZATION_SECTIONS.donorContacts]: <FormattedMessage id="ui-organizations.donorContacts" />,
 };
 
 export const CREATE_UNITS_PERM = 'organizations.acquisitions-units-assignments.assign';

diff --git a/translations/ui-organizations/en.json b/translations/ui-organizations/en.json
@@ -87,6 +87,7 @@
   "contactPeople": "Contact people",
   "agreements": "Agreements",
   "vendorInformation": "Vendor information",
+  "donorContacts": "Donor contacts",
   "ediInformation": "EDI information",
   "interface": "Interface",
   "accounts": "Accounts",