improve: bump package.json, fix organizations summary layout, remove …

…checkbox handler
folio-org · Oct 16, 2023 · f81b2bf · f81b2bf
1 parent a610303
commit f81b2bf
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 37 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@folio/organizations",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "Organizations",
   "main": "index.js",
   "repository": "folio-org/ui-organizations",

diff --git a/src/Organizations/OrganizationDetails/OrganizationSummary/OrganizationSummary.js b/src/Organizations/OrganizationDetails/OrganizationSummary/OrganizationSummary.js
@@ -1,11 +1,12 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
 
 import {
   Checkbox,
   Col,
   KeyValue,
+  MultiColumnList,
   NoValue,
   Row,
 } from '@folio/stripes/components';
@@ -17,6 +18,12 @@ 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,
@@ -32,7 +39,6 @@ const OrganizationSummary = ({
   organizationTypes,
 }) => {
   const defaultLanguageValue = LANG_LABEL_BY_CODE[language] || language;
-  const alternativeNames = useMemo(() => aliases.map(({ value }) => value).join(', '), [aliases]);
 
   return (
     <>
@@ -48,89 +54,96 @@ const OrganizationSummary = ({
       </Row>
 
       <Row>
-        <Col xs={3}>
+        <Col xs={4}>
           <KeyValue
             data-testid="name"
             label={<FormattedMessage id="ui-organizations.summary.name" />}
             value={name}
           />
         </Col>
 
-        <Col xs={3}>
+        <Col xs={4}>
           <KeyValue
             label={<FormattedMessage id="ui-organizations.summary.code" />}
             value={code}
           />
         </Col>
 
-        <Col xs={3}>
+        <Col xs={4}>
           <KeyValue
             data-testid="accountingCode"
             label={<FormattedMessage id="ui-organizations.summary.accountingCode" />}
             value={erpCode || <NoValue />}
           />
         </Col>
 
-        <Col xs={3}>
+        <Col xs={4}>
           <KeyValue
             label={<FormattedMessage id="ui-organizations.summary.organizationStatus" />}
           >
             {status && <FormattedMessage id={`ui-organizations.organizationStatus.${status.toLowerCase()}`} />}
           </KeyValue>
         </Col>
 
-        <Col xs={3}>
+        <Col xs={4}>
           <KeyValue
             data-testid="defaultLanguage"
             label={<FormattedMessage id="ui-organizations.summary.defaultLanguage" />}
             value={defaultLanguageValue || <NoValue />}
           />
         </Col>
 
-        <Col xs={3}>
+        <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}>
           <KeyValue
             data-testid="type"
             label={<FormattedMessage id="ui-organizations.summary.type" />}
             value={organizationTypes.join(', ') || <NoValue />}
           />
         </Col>
 
-        <Col xs={3}>
+        <Col xs={4}>
           <AcqUnitsView units={acqUnitIds} />
         </Col>
 
-        <Col xs={3}>
+        <Col xs={12}>
           <KeyValue
             data-testid="description"
             label={<FormattedMessage id="ui-organizations.summary.description" />}
             value={description || <NoValue />}
           />
         </Col>
+      </Row>
 
-        <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}>
+      <Row>
+        <Col xs={12}>
           <KeyValue
-            data-testid="alternativeNames"
             label={<FormattedMessage id="ui-organizations.summary.alternativeNames" />}
-            value={alternativeNames || <NoValue />}
-          />
+          >
+            <MultiColumnList
+              contentData={aliases}
+              columnMapping={aliasesColumnMapping}
+              interactive={false}
+              visibleColumns={aliasesVisibleColumns}
+            />
+          </KeyValue>
         </Col>
       </Row>
     </>
@@ -158,6 +171,7 @@ OrganizationSummary.propTypes = {
 OrganizationSummary.defaultProps = {
   aliases: [],
   isVendor: false,
+  isDonor: false,
 };
 
 export default OrganizationSummary;
diff --git a/src/Organizations/OrganizationForm/OrganizationSummaryForm/OrganizationSummaryForm.js b/src/Organizations/OrganizationForm/OrganizationSummaryForm/OrganizationSummaryForm.js
@@ -77,8 +77,8 @@ function OrganizationSummaryForm({ initialValues }) {
     onResetVendorFields();
   }, [onResetVendorFields]);
 
-  const handleCheckbox = useCallback(({ target: { checked, name } }) => {
-    change(name, checked);
+  const onChangeIsVendor = useCallback(({ target: { checked } }) => {
+    change('isVendor', checked);
 
     if (initialValues.id && !checked) setVendorUncheckConfirm(true);
   }, [initialValues.id, change]);
@@ -192,7 +192,6 @@ function OrganizationSummaryForm({ initialValues }) {
           label={<FormattedMessage id="ui-organizations.summary.isDonor" />}
           name="isDonor"
           type="checkbox"
-          onChange={handleCheckbox}
           vertical
           validateFields={[]}
         />
@@ -206,8 +205,8 @@ function OrganizationSummaryForm({ initialValues }) {
           label={<FormattedMessage id="ui-organizations.summary.isVendor" />}
           name="isVendor"
           type="checkbox"
-          onChange={handleCheckbox}
           vertical
+          onChange={onChangeIsVendor}
           validateFields={[]}
         />
       </Col>