ERM-1958: Write registry entry for Organization lookup

CHANGELOG.md

@@ -5,6 +5,7 @@
 * Add record metadata widget to contact person. Refs UIORGS-305.
 * Display linked agreements on an organization record. Refs UIORGS-306.
 * Can not delete integration from organization. Refs UIORGS-307.
+* Add filter integration for ui-dashboard. Refs ERM-1958.
 
 ## [3.1.0](https://github.com/folio-org/ui-organizations/tree/v3.1.0) (2022-03-04)
 [Full Changelog](https://github.com/folio-org/ui-organizations/compare/v3.0.1...v3.1.0)

OrganizationLookup.js

@@ -0,0 +1,153 @@
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+
+import { FormattedMessage } from 'react-intl';
+
+import {
+  Button,
+  Card,
+  Col,
+  KeyValue,
+  Layout,
+  NoValue,
+  Row,
+  Tooltip,
+} from '@folio/stripes/components';
+
+import { AppIcon, Pluggable } from '@folio/stripes/core';
+
+// This must return a function to render a link button
+
+const propTypes = {
+  disabled: PropTypes.bool,
+  id: PropTypes.string,
+  input: PropTypes.shape({
+    name: PropTypes.string,
+    value: PropTypes.string,
+  }),
+  onResourceSelected: PropTypes.func,
+  resource: PropTypes.object,
+};
+
+const OrganizationLookup = ({
+  disabled,
+  id,
+  input: { name, value },
+  onResourceSelected,
+  renderOrganizations,
+  resource
+}) => {
+  let triggerButton = useRef(null);
+
+  const renderOrganizationLinkButton = (v) => (
+    <Pluggable
+      dataKey={id}
+      selectVendor={onResourceSelected}
+      renderTrigger={(pluggableRenderProps) => {
+        triggerButton = pluggableRenderProps.buttonRef;
+
+        const organizationName = resource?.name;
+        const buttonProps = {
+          'aria-haspopup': 'true',
+          'buttonRef': triggerButton,
+          'buttonStyle': v ? 'default' : 'primary',
+          'disabled': disabled,
+          'id': `${id}-find-organizations-btn`,
+          'marginBottom0': true,
+          'name': name,
+          'onClick': pluggableRenderProps.onClick,
+        };
+
+        if (value) {
+          return (
+            <Tooltip
+              id={`${id}-organizations-button-tooltip`}
+              text={<FormattedMessage id="ui-organizations.relatedOrganization.replaceOrganizationSpecific" values={{ organizationName }} />}
+              triggerRef={triggerButton}
+            >
+              {({ ariaIds }) => (
+                <Button
+                  aria-labelledby={ariaIds.text}
+                  {...buttonProps}
+                >
+                  <FormattedMessage id="ui-organizations.relatedOrganization.replaceOrganization" />
+                </Button>
+              )}
+            </Tooltip>
+          );
+        }
+
+        return (
+          <Button
+            {...buttonProps}
+          >
+            <FormattedMessage id="ui-organizations.relatedOrganization.linkOrganization" />
+          </Button>
+        );
+      }}
+      type="find-organization"
+    >
+      <FormattedMessage id="ui-organizations.relatedOrganization.noPlugin" />
+    </Pluggable>
+  );
+
+  const defaultRenderOrganizations = () => (
+    <div>
+      <Row>
+        <Col md={12} xs={12}>
+          <KeyValue
+            label={<FormattedMessage id="ui-organizations.main.name" />}
+            value={resource.name ?? <NoValue />}
+          />
+        </Col>
+      </Row>
+    </div>
+  );
+
+  const renderEmpty = () => (
+    <div>
+      <Layout className="textCentered">
+        <strong>
+          <FormattedMessage id="ui-organizations.relatedOrganization.noneLinked" />
+        </strong>
+      </Layout>
+      <Layout className="textCentered">
+        <FormattedMessage id="ui-organizations.relatedOrganization.linkToStart" />
+      </Layout>
+    </div>
+  );
+
+  const renderFunction = () => {
+    if (value) {
+      if (renderOrganizations) {
+        return renderOrganizations(resource);
+      }
+
+      return defaultRenderOrganizations();
+    }
+
+    return renderEmpty();
+  };
+
+  return (
+    <Card
+      cardStyle={value ? 'positive' : 'negative'}
+      headerEnd={renderOrganizationLinkButton(value)}
+      headerStart={(
+        <AppIcon app="organizations" size="small">
+          <strong>
+            <FormattedMessage id="ui-organizations.meta.title" />
+          </strong>
+        </AppIcon>
+      )}
+      id={id}
+      roundedBorder
+    >
+      {renderFunction()}
+    </Card>
+  );
+};
+
+OrganizationLookup.propTypes = propTypes;
+
+export default OrganizationLookup;

index.js

@@ -11,8 +11,18 @@ import { Organizations as Organization } from './src/Organizations';
 import { ContactsContainer } from './src/contacts';
 import { InterfaceContainer } from './src/interfaces';
 import Settings from './src/Settings';
+import setUpRegistry from './setUpRegistry';
 
 class Organizations extends Component {
+  static eventHandler(event, _s, data) {
+    if (event === 'LOAD_STRIPES_REGISTRY') {
+      // Data should contain Registry singleton:
+      setUpRegistry(data);
+    }
+
+    return null;
+  }
+
   static propTypes = {
     stripes: PropTypes.shape({
       connect: PropTypes.func.isRequired,

package.json

@@ -14,8 +14,10 @@
   "stripes": {
     "actsAs": [
       "app",
+      "handler",
       "settings"
     ],
+    "handlerName": "eventHandler",
     "displayName": "ui-organizations.meta.title",
     "moduleName": "Organizations",
     "route": "/organizations",

setUpRegistry.js

@@ -0,0 +1,14 @@
+import OrganizationLookup from './OrganizationLookup';
+
+const setUpRegistry = (registry) => {
+  // Organization Resource
+  const organizationReg = registry.registerResource('organization');
+
+  organizationReg.setViewResources('/organizations');
+  organizationReg.setViewResource(organization => `/organizations/view/${organization.id}`);
+
+  // Lookup plugin
+  organizationReg.setLookupComponent(OrganizationLookup);
+};
+
+export default setUpRegistry;

translations/ui-organizations/en_US.json

@@ -313,6 +313,12 @@
     "permission.acqUnits.assign": "Organizations: Assign acquisition units to new organization",
     "permission.acqUnits.manage": "Organizations: Manage acquisition units",
     "permission.settings": "Settings (Organizations): Can view and edit settings",
+    "relatedOrganization.linkOrganization": "Link organization",
+    "relatedOrganization.noPlugin": "No \"find-organization\" plugin is installed",
+    "relatedOrganization.replaceOrganization": "Replace organization",
+    "relatedOrganization.replaceOrganizationSpecific": "Replace organization {organizationName}",
+    "relatedOrganization.noneLinked": "No organization linked",
+    "relatedOrganization.linkToStart": "Link an organization to get started",
     "appMenu.organizationsAppSearch": "Organizations app Search",
     "view.exportLog": "View export log",
     "integrationDetails": "Integration details",
@@ -394,4 +400,4 @@
     "linkedAgreements.agreement.agreementStatus.draft": "Draft",
     "linkedAgreements.agreement.agreementStatus.in_negotiation": "In negotiation",
     "linkedAgreements.agreement.agreementStatus.requested": "Requested"
-}
+}