[CP-2995] Contacts Panel added (wrapper)

libs/generic-view/feature/src/lib/setup-component.tsx

@@ -24,7 +24,7 @@ import {
   RecursiveComponent,
 } from "generic-view/utils"
 import { DataProviderExtendedField, EntityData, Layout } from "device/models"
-import { cloneDeep, set } from "lodash"
+import { cloneDeep, get, set } from "lodash"
 import { useFormContext } from "react-hook-form"
 
 export const setupComponent = <P extends object>(
@@ -96,7 +96,7 @@ export const setupComponent = <P extends object>(
       if (entityData) {
         for (const [key, field] of Object.entries(dataProvider.fields)) {
           if (typeof field === "string") {
-            const value = entityData[field]
+            const value = get(entityData, field)
             set(editableProps || {}, key, value)
           } else {
             const value = processFormFields(field, entityData[field.field])

libs/generic-view/feature/src/lib/use-dev-views/views/contacts-view.ts

@@ -16,27 +16,84 @@ const view: View = {
         columns: ["1fr"],
       },
     },
-    childrenKeys: ["importContactsButton", "contactsLoader"],
-  },
-  contactsLoader: {
-    component: "entities-loader",
-    config: {
-      entitiesTypes: ["contacts"],
-    },
     childrenKeys: ["contactsForm"],
   },
   contactsForm: {
     component: "form",
     config: {
       formOptions: {
         defaultValues: {
+          searchedContact: undefined,
           activeContactId: undefined,
           selectedContacts: [],
           totalContacts: 0,
         },
       },
     },
-    childrenKeys: ["deleteButton", "contactsFormWrapper"],
+    childrenKeys: ["contactsLoader"],
+  },
+  contactsLoader: {
+    component: "entities-loader",
+    config: {
+      entitiesTypes: ["contacts"],
+    },
+    childrenKeys: ["contactsPanel", "deleteButton", "contactsFormWrapper"],
+  },
+  contactsPanel: {
+    component: "block-plain",
+    childrenKeys: ["contactsSearchInput", "contactsButtonActions"],
+    layout: {
+      margin: "32px",
+      gridLayout: {
+        rows: [],
+        columns: ["280px", "344px"],
+        justifyContent: "space-between",
+      },
+    },
+  },
+  contactsSearchInput: {
+    component: "form.searchInput",
+    config: {
+      label: "Search all contacts",
+      name: "searchedContact",
+    },
+  },
+  contactsButtonActions: {
+    component: "block-plain",
+    layout: {
+      gridLayout: {
+        columns: ["1fr", "1fr"],
+        rows: [],
+        columnGap: "32px"
+      },
+    },
+    childrenKeys: ["createContactsButton", "importContactsButton"],
+  },
+  importContactsButton: {
+    component: "button-primary",
+    config: {
+      text: "import contacts",
+      actions: [
+        {
+          type: "open-modal",
+          modalKey: "importContactsButton-modal",
+          domain: "import-contacts",
+        },
+      ],
+    },
+  },
+  createContactsButton: {
+    component: "button-secondary",
+    config: {
+      disabled: true,
+      text: "add contact",
+      actions: [
+        {
+          type: "custom",
+          callback: () => console.log("`createContactsButton` click!"),
+        },
+      ],
+    },
   },
   deleteButton: {
     component: "button-primary",
@@ -64,7 +121,7 @@ const view: View = {
           type: "form-set-field",
           key: "selectedContacts",
           value: [],
-        }
+        },
       ],
     },
   },
@@ -189,22 +246,22 @@ const view: View = {
       formFieldName: "activeContactId",
       renderIfFalse: true,
     },
-    childrenKeys: ["columnCompany"],
+    childrenKeys: ["columnPhoneNumber"],
   },
-  columnCompany: {
+  columnPhoneNumber: {
     component: "table.cell",
     config: {
       width: 200,
     },
-    childrenKeys: ["contactCompany"],
+    childrenKeys: ["contactPhoneNumber"],
   },
-  contactCompany: {
+  contactPhoneNumber: {
     component: "text-plain",
     dataProvider: {
       source: "entities-field",
       entitiesType: "contacts",
       fields: {
-        "data.text": "company",
+        "data.text": "phoneNumbers[0].phoneNumber",
       },
     },
   },