update card header

folio-org · Nov 26, 2024 · 3d7fc76 · 3d7fc76
1 parent 40a886b
commit 3d7fc76
Show file tree

Hide file tree

Showing 9 changed files with 74 additions and 69 deletions.
diff --git a/src/Organizations/OrganizationVersion/OrganizationVersionView/OrganizationVersionView.js b/src/Organizations/OrganizationVersion/OrganizationVersionView/OrganizationVersionView.js
@@ -54,8 +54,6 @@ export const OrganizationVersionView = ({ version }) => {
     },
   ];
 
-  console.log('version', version);
-
   return (
     <HasCommand
       commands={shortcuts}

diff --git a/...rsion/components/OrganizationContactInfoVersionView/OrganizationContactInfoVersionView.js b/...rsion/components/OrganizationContactInfoVersionView/OrganizationContactInfoVersionView.js
@@ -85,14 +85,8 @@ export const OrganizationContactInfoVersionView = ({ version: currentVersion })
         >
           <ContactAddressesVersionView addresses={data[category.id].addresses} />
           <ContactPersonPhonesVersionView phones={data[category.id].phoneNumbers} />
-          <ContactPersonEmailsVersionView
-            name="emails"
-            emails={data[category.id].emails}
-          />
-          <ContactPersonURLsVersionView
-            name="urls"
-            urls={data[category.id].urls}
-          />
+          <ContactPersonEmailsVersionView emails={data[category.id].emails} />
+          <ContactPersonURLsVersionView urls={data[category.id].urls} />
         </Accordion>
       ))}
     </Layout>

diff --git a/...n/components/OrganizationContactInfoVersionView/components/ContactAddressesVersionView.js b/...n/components/OrganizationContactInfoVersionView/components/ContactAddressesVersionView.js
@@ -1,35 +1,29 @@
 import PropTypes from 'prop-types';
-import { useContext } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import {
   Card,
   Col,
   Row,
 } from '@folio/stripes/components';
-import {
-  VersionKeyValue,
-  VersionViewContext,
-} from '@folio/stripes-acq-components';
+import { VersionKeyValue } from '@folio/stripes-acq-components';
 
-export const ContactAddressesVersionView = ({ addresses }) => {
-  const versionContext = useContext(VersionViewContext);
+import { ContactCardHeaderVersionView } from './ContactCardHeaderVersionView';
 
+export const ContactAddressesVersionView = ({ addresses }) => {
   return (
     <Row>
       <Col xs={12}>
         {addresses?.map((address) => {
-          const isPrimaryValue = (
-            <h4 style={{ margin: 0 }}>
-              <FormattedMessage id={`ui-organizations.${address?.isPrimary ? 'primaryItem' : 'alternateItem'}`} />
-            </h4>
-          );
-          const headerStart = versionContext?.paths?.includes(`${address?._initialFieldPath}.isPrimary`)
-            ? <mark>{isPrimaryValue}</mark>
-            : isPrimaryValue;
-
           return (
-            <Card headerStart={headerStart}>
+            <Card
+              headerStart={(
+                <ContactCardHeaderVersionView
+                  name={`${address?._initialFieldPath}.isPrimary`}
+                  isPrimary={address?.isPrimary}
+                />
+              )}
+            >
               <Row>
                 <Col xs={3}>
                   <VersionKeyValue

diff --git a/...tInfoVersionView/components/ContactCardHeaderVersionView/ContactCardHeaderVersionView.css b/...tInfoVersionView/components/ContactCardHeaderVersionView/ContactCardHeaderVersionView.css
@@ -0,0 +1,7 @@
+.cardHeader {
+  margin: 0;
+
+  & .mark {
+    background-color: mark;
+  }
+}
diff --git a/...ctInfoVersionView/components/ContactCardHeaderVersionView/ContactCardHeaderVersionView.js b/...ctInfoVersionView/components/ContactCardHeaderVersionView/ContactCardHeaderVersionView.js
@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+import { useContext } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { VersionViewContext } from '@folio/stripes-acq-components';
+
+import css from './ContactCardHeaderVersionView.css';
+
+export const ContactCardHeaderVersionView = ({ isPrimary, name }) => {
+  const versionContext = useContext(VersionViewContext);
+
+  const isUpdated = versionContext?.paths?.includes(name);
+
+  const headerStart = (
+    <h4 className={css.cardHeader}>
+      <span className={isUpdated ? css.mark : ''}><FormattedMessage id={`ui-organizations.${isPrimary ? 'primaryItem' : 'alternateItem'}`} /></span>
+    </h4>
+  );
+
+  return headerStart;
+};
+
+ContactCardHeaderVersionView.propTypes = {
+  isPrimary: PropTypes.bool.isRequired,
+  name: PropTypes.string.isRequired,
+};
diff --git a/...nents/OrganizationContactInfoVersionView/components/ContactCardHeaderVersionView/index.js b/...nents/OrganizationContactInfoVersionView/components/ContactCardHeaderVersionView/index.js
@@ -0,0 +1 @@
+export { ContactCardHeaderVersionView } from './ContactCardHeaderVersionView';
diff --git a/...omponents/OrganizationContactInfoVersionView/components/ContactPersonEmailsVersionView.js b/...omponents/OrganizationContactInfoVersionView/components/ContactPersonEmailsVersionView.js
@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import { useContext } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import {
@@ -10,31 +9,27 @@ import {
 import {
   LANG_LABEL_BY_CODE,
   VersionKeyValue,
-  VersionViewContext,
 } from '@folio/stripes-acq-components';
 
 import { ContactPersonSection } from '../../../../../ContactPeople/ContactPerson';
+import { ContactCardHeaderVersionView } from './ContactCardHeaderVersionView';
 
 export const ContactPersonEmailsVersionView = ({ emails }) => {
-  const versionContext = useContext(VersionViewContext);
-
   if (!emails?.length) return null;
 
   const renderBody = () => (
     <Row>
       <Col xs={12}>
         {emails?.map((email) => {
-          const isPrimaryValue = (
-            <h4 style={{ margin: 0 }}>
-              <FormattedMessage id={`ui-organizations.${email?.isPrimary ? 'primaryItem' : 'alternateItem'}`} />
-            </h4>
-          );
-          const headerStart = versionContext?.paths?.includes(`${email?._initialFieldPath}.isPrimary`)
-            ? <span><mark>{isPrimaryValue}</mark></span>
-            : isPrimaryValue;
-
           return (
-            <Card headerStart={headerStart}>
+            <Card
+              headerStart={(
+                <ContactCardHeaderVersionView
+                  name={`${email?._initialFieldPath}.isPrimary`}
+                  isPrimary={email?.isPrimary}
+                />
+              )}
+            >
               <Row>
                 <Col xs={3}>
                   <VersionKeyValue

diff --git a/...omponents/OrganizationContactInfoVersionView/components/ContactPersonPhonesVersionView.js b/...omponents/OrganizationContactInfoVersionView/components/ContactPersonPhonesVersionView.js
@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import { useContext } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import {
@@ -10,32 +9,28 @@ import {
 import {
   LANG_LABEL_BY_CODE,
   VersionKeyValue,
-  VersionViewContext,
 } from '@folio/stripes-acq-components';
 
 import { ContactPersonSection } from '../../../../../ContactPeople/ContactPerson';
+import { ContactCardHeaderVersionView } from './ContactCardHeaderVersionView';
 
 export const ContactPersonPhonesVersionView = ({ phones }) => {
-  const versionContext = useContext(VersionViewContext);
-
   if (!phones?.length) return null;
 
   const renderBody = () => (
     (
       <Row>
         <Col xs={12}>
           {phones?.map((phone) => {
-            const isPrimaryValue = (
-              <h4 style={{ margin: 0 }}>
-                <FormattedMessage id={`ui-organizations.${phone?.isPrimary ? 'primaryItem' : 'alternateItem'}`} />
-              </h4>
-            );
-            const headerStart = versionContext?.paths?.includes(`${phone?._initialFieldPath}.isPrimary`)
-              ? <mark>{isPrimaryValue}</mark>
-              : isPrimaryValue;
-
             return (
-              <Card headerStart={headerStart}>
+              <Card
+                headerStart={(
+                  <ContactCardHeaderVersionView
+                    name={`${phone?._initialFieldPath}.isPrimary`}
+                    isPrimary={phone?.isPrimary}
+                  />
+                )}
+              >
                 <Row>
                   <Col xs={3}>
                     <VersionKeyValue

diff --git a/.../components/OrganizationContactInfoVersionView/components/ContactPersonURLsVersionView.js b/.../components/OrganizationContactInfoVersionView/components/ContactPersonURLsVersionView.js
@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import { useContext } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import {
@@ -11,31 +10,27 @@ import {
 import {
   LANG_LABEL_BY_CODE,
   VersionKeyValue,
-  VersionViewContext,
 } from '@folio/stripes-acq-components';
 
 import { ContactPersonSection } from '../../../../../ContactPeople/ContactPerson';
+import { ContactCardHeaderVersionView } from './ContactCardHeaderVersionView';
 
 export const ContactPersonURLsVersionView = ({ urls }) => {
-  const versionContext = useContext(VersionViewContext);
-
   if (!urls?.length) return null;
 
   const renderBody = () => (
     <Row>
       <Col xs={12}>
         {urls?.map((url) => {
-          const isPrimaryValue = (
-            <h4 style={{ margin: 0 }}>
-              <FormattedMessage id={`ui-organizations.${url?.isPrimary ? 'primaryItem' : 'alternateItem'}`} />
-            </h4>
-          );
-          const headerStart = versionContext?.paths?.includes(`${url?._initialFieldPath}.isPrimary`)
-            ? <mark>{isPrimaryValue}</mark>
-            : isPrimaryValue;
-
           return (
-            <Card headerStart={headerStart}>
+            <Card
+              headerStart={(
+                <ContactCardHeaderVersionView
+                  name={`${url?._initialFieldPath}.isPrimary`}
+                  isPrimary={url?.isPrimary}
+                />
+              )}
+            >
               <Row>
                 <Col xs={3}>
                   <VersionKeyValue
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { ContactCardHeaderVersionView } from './ContactCardHeaderVersionView';