Add CustomerId field (#267)

- update SubscriptionField to work with customer as wel as organisation properties.

Author: tjeerddie

src/custom-surf/uniforms/AutoFieldLoader.tsx

@@ -6,6 +6,7 @@ import VlanField from "custom/uniforms/VlanField";
 import {
     AcceptField,
     BoolField,
+    CustomerField,
     DateField,
     DividerField,
     LabelField,
@@ -59,6 +60,8 @@ export function autoFieldFunction(props: GuaranteedProps<unknown> & Record<strin
                     return LocationCodeField;
                 case "organisationId":
                     return OrganisationField;
+                case "customerId":
+                    return CustomerField;
                 case "contactPersonName":
                     return ContactPersonNameField;
                 case "vlan":

src/lib/uniforms-surfnet/src/SubscriptionField.tsx

@@ -33,8 +33,8 @@ import { filterProductsByBandwidth } from "validations/Products";
 import { subscriptionFieldStyling } from "./SubscriptionFieldStyling";
 
 export function makeLabel(subscription: iSubscription, products: Product[], organisations?: Organization[]) {
-    const organisation = organisations && organisations.find((org) => org.uuid === subscription.customer_id);
-    const organisationName = organisation ? organisation.name : subscription.customer_id.substring(0, 8);
+    const customer = organisations && organisations.find((org) => org.uuid === subscription.customer_id);
+    const customerName = customer ? customer.name : subscription.customer_id.substring(0, 8);
     const product = subscription.product || productById(subscription.product_id!, products);
     const description =
         subscription.description || intl.formatMessage({ id: "forms.widgets.subscription.missingDescription" });
@@ -47,7 +47,7 @@ export function makeLabel(subscription: iSubscription, products: Product[], orga
     } else if (["SP", "SPNL", "AGGSP", "AGGSPNL", "MSC", "MSCNL", "IRBSP"].includes(product.tag)) {
         let portSubscription = subscription as ServicePortSubscription;
         const portMode = getPortMode(portSubscription, products);
-        return `${subscription_substring} ${portMode.toUpperCase()} ${description.trim()} ${organisationName}`;
+        return `${subscription_substring} ${portMode.toUpperCase()} ${description.trim()} ${customerName}`;
     } else {
         return description.trim();
     }
@@ -62,6 +62,8 @@ export function getPortMode(subscription: ServicePortSubscription, products: Pro
 declare module "uniforms" {
     interface FilterDOMProps {
         excludedSubscriptionIds: never;
+        customerId: never;
+        customerKey: never;
         organisationId: never;
         organisationKey: never;
         visiblePortMode: never;
@@ -74,6 +76,8 @@ declare module "uniforms" {
 filterDOMProps.register(
     "productIds",
     "excludedSubscriptionIds",
+    "customerId",
+    "customerKey",
     "organisationId",
     "organisationKey",
     "visiblePortMode",
@@ -88,6 +92,8 @@ export type SubscriptionFieldProps = FieldProps<
     {
         productIds?: string[];
         excludedSubscriptionIds?: string[];
+        customerId?: string;
+        customerKey?: string;
         organisationId?: string;
         organisationKey?: string;
         visiblePortMode?: string;
@@ -117,6 +123,8 @@ function Subscription({
     className = "",
     productIds,
     excludedSubscriptionIds,
+    customerId,
+    customerKey,
     organisationId,
     organisationKey,
     visiblePortMode = "all",
@@ -128,6 +136,13 @@ function Subscription({
     intl,
     ...props
 }: SubscriptionFieldProps) {
+    if (organisationId) {
+        customerId = organisationId;
+    }
+    if (organisationKey) {
+        customerKey = organisationKey;
+    }
+
     const { theme, organisations, products: allProducts, apiClient, customApiClient } = useContext(ApplicationContext);
     const { getSubscriptions, clearSubscriptions } = useContext(SubscriptionsContext);
 
@@ -154,10 +169,8 @@ function Subscription({
 
     const usedBandwidth = bandwidth || bandwithFromField;
 
-    // Get value from org field if organisationKey is set.
-    const usedOrganisationId = organisationKey
-        ? get(model, organisationKey, "nonExistingOrgToFilterEverything")
-        : organisationId;
+    // Get value from org field if customerKey is set.
+    const usedOrganisationId = customerKey ? get(model, customerKey, "nonExistingOrgToFilterEverything") : customerId;
 
     const filteredProductIds = useMemo(() => {
         let products = allProducts;

src/lib/uniforms-surfnet/src/index.ts

@@ -43,4 +43,5 @@ export { default as SummaryField } from "lib/uniforms-surfnet/src/SummaryField";
 
 export { default as LocationCodeField } from "lib/uniforms-surfnet/src/logic/LocationCodeField";
 export { default as OrganisationField } from "lib/uniforms-surfnet/src/logic/OrganisationField";
+export { default as CustomerField } from "lib/uniforms-surfnet/src/logic/CustomerField";
 export { default as ProductField } from "lib/uniforms-surfnet/src/logic/ProductField";

src/lib/uniforms-surfnet/src/logic/CustomerField.tsx

@@ -0,0 +1,45 @@
+/*
+ * Copyright 2019-2023 SURF.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import SelectField, { SelectFieldProps } from "lib/uniforms-surfnet/src/SelectField";
+import get from "lodash/get";
+import React, { useContext } from "react";
+import { useIntl } from "react-intl";
+import { connectField } from "uniforms";
+import ApplicationContext from "utils/ApplicationContext";
+
+export type CustomerFieldProps = Omit<SelectFieldProps, "placeholder" | "transform" | "allowedValues">;
+
+function Customer({ name, ...props }: CustomerFieldProps) {
+    const intl = useIntl();
+    const { organisations } = useContext(ApplicationContext);
+    const customerLabelLookup =
+        organisations?.reduce<{ [index: string]: string }>(function (mapping, org) {
+            mapping[org.uuid] = org.name;
+            return mapping;
+        }, {}) ?? {};
+
+    return (
+        <SelectField
+            name=""
+            {...props}
+            allowedValues={Object.keys(customerLabelLookup)}
+            transform={(uuid: string) => get(customerLabelLookup, uuid, uuid)}
+            placeholder={intl.formatMessage({ id: "forms.widgets.customer.placeholder" })}
+        />
+    );
+}
+
+export default connectField(Customer);

src/locale/en.ts

@@ -107,6 +107,9 @@ I18n.translations.en = {
             organisation: {
                 placeholder: "Search and select a customer...",
             },
+            customer: {
+                placeholder: "Search and select a customer...",
+            },
             product: {
                 placeholder: "Search and select a product...",
             },