1.1

frontend/src/components/Contacts/configureContactsCols.tsx

@@ -61,13 +61,14 @@ export const loadColumns = async (
     },
     {
       field: 'phone_number',
-      headerName: 'PhoneNumber',
+      headerName: 'Phone Number',
       flex: 1,
       minWidth: 120,
       filterable: false,
       headerClassName: 'datagrid--header',
       cellClassName: 'datagrid--cell',
       editable: hasUpdatePermission,
+      renderCell: (params) => dataFormatter.phoneFormatter(params.value),
     },
     {
       field: 'notes',

frontend/src/components/Contacts/configureContactsCols.tsx.temp

@@ -0,0 +1,105 @@
+import React from 'react';
+import BaseIcon from '../BaseIcon';
+import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
+import axios from 'axios';
+import {
+  GridActionsCellItem,
+  GridRowParams,
+  GridValueGetterParams,
+} from '@mui/x-data-grid';
+import ImageField from '../ImageField';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import DataGridMultiSelect from '../DataGridMultiSelect';
+import ListActionsPopover from '../ListActionsPopover';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+type Params = (id: string) => void;
+
+export const loadColumns = async (
+  onDelete: Params,
+  entityName: string,
+
+  user,
+) => {
+  async function callOptionsApi(entityName: string) {
+    if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
+
+    try {
+      const data = await axios(`/${entityName}/autocomplete?limit=100`);
+      return data.data;
+    } catch (error) {
+      console.log(error);
+      return [];
+    }
+  }
+
+  const hasUpdatePermission = hasPermission(user, 'UPDATE_CONTACTS');
+
+  return [
+    {
+      field: 'name',
+      headerName: 'Name',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+      valueGetter: (params: GridValueGetterParams) =>
+        `${params.row.first_name || ''} ${params.row.last_name || ''}`,
+    },
+    {
+      field: 'email',
+      headerName: 'Email',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+      editable: hasUpdatePermission,
+    },
+    {
+      field: 'phone_number',
+      headerName: 'Phone Number',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+      editable: hasUpdatePermission,
+      renderCell: (params) => dataFormatter.phoneFormatter(params.value),
+    },
+    },
+    {
+      field: 'notes',
+      headerName: 'Notes',
+      flex: 1,
+      minWidth: 120,
+      filterable: false,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+      editable: hasUpdatePermission,
+    },
+    {
+      field: 'actions',
+      type: 'actions',
+      minWidth: 30,
+      headerClassName: 'datagrid--header',
+      cellClassName: 'datagrid--cell',
+      getActions: (params: GridRowParams) => {
+        return [
+          <div key={params?.row?.id}>
+            <ListActionsPopover
+              onDelete={onDelete}
+              itemId={params?.row?.id}
+              pathEdit={`/contacts/contacts-edit/?id=${params?.row?.id}`}
+              pathView={`/contacts/contacts-view/?id=${params?.row?.id}`}
+              hasUpdatePermission={hasUpdatePermission}
+            />
+          </div>,
+        ];
+      },
+    },
+  ];
+};

frontend/src/helpers/dataFormatter.js

@@ -27,6 +27,99 @@ export default {
   booleanFormatter(val) {
     return val ? 'Yes' : 'No';
   },
+
+  /**
+   * Format phone number to +X (XXX) XXX-XXXX
+   */
+  phoneFormatter(val) {
+    if (!val) return '';
+    const digits = val.replace(/\D/g, '');
+    let country = '';
+    let number = '';
+    if (digits.length === 11) {
+      country = digits.charAt(0);
+      number = digits.slice(1);
+    } else if (digits.length === 10) {
+      country = '1';
+      number = digits;
+    } else {
+      return val;
+    }
+    const area = number.slice(0, 3);
+    const prefix = number.slice(3, 6);
+    const line = number.slice(6);
+    return `+${country} (${area}) ${prefix}-${line}`;
+  },
+
+  /**
+   * Format phone number to +X (XXX) XXX-XXXX
+   */
+  phoneFormatter(val) {
+    if (!val) return '';
+    const digits = val.replace(/\D/g, '');
+    let country = '';
+    let number = '';
+    if (digits.length === 11) {
+      country = digits.charAt(0);
+      number = digits.slice(1);
+    } else if (digits.length === 10) {
+      country = '1';
+      number = digits;
+    } else {
+      return val;
+    }
+    const area = number.slice(0, 3);
+    const prefix = number.slice(3, 6);
+    const line = number.slice(6);
+    return `+${country} (${area}) ${prefix}-${line}`;
+  },
+
+
+  /**
+   * Format phone number to +X (XXX) XXX-XXXX
+   */
+  phoneFormatter(val) {
+    if (!val) return '';
+    const digits = val.replace(/\D/g, '');
+    let country = '';
+    let number = '';
+    if (digits.length === 11) {
+      country = digits.charAt(0);
+      number = digits.slice(1);
+    } else if (digits.length === 10) {
+      country = '1';
+      number = digits;
+    } else {
+      return val;
+    }
+    const area = number.slice(0, 3);
+    const prefix = number.slice(3, 6);
+    const line = number.slice(6);
+    return `+${country} (${area}) ${prefix}-${line}`;
+  },
+
+  /**
+   * Format phone number to +X (XXX) XXX-XXXX
+   */
+  phoneFormatter(val) {
+    if (!val) return '';
+    const digits = val.replace(/\D/g, '');
+    let country = '';
+    let number = '';
+    if (digits.length === 11) {
+      country = digits.charAt(0);
+      number = digits.slice(1);
+    } else if (digits.length === 10) {
+      country = '1';
+      number = digits;
+    } else {
+      return val;
+    }
+    const area = number.slice(0, 3);
+    const prefix = number.slice(3, 6);
+    const line = number.slice(6);
+    return `+${country} (${area}) ${prefix}-${line}`;
+  },
   dataGridEditFormatter(obj) {
     return _.transform(obj, (result, value, key) => {
       if (_.isArray(value)) {

frontend/src/helpers/dataFormatter.js.temp

@@ -0,0 +1,234 @@
+import dayjs from 'dayjs';
+import _ from 'lodash';
+
+export default {
+  filesFormatter(arr) {
+    if (!arr || !arr.length) return [];
+    return arr.map((item) => item);
+  },
+  imageFormatter(arr) {
+    if (!arr || !arr.length) return [];
+    return arr.map((item) => ({
+      publicUrl: item.publicUrl || '',
+    }));
+  },
+  oneImageFormatter(arr) {
+    if (!arr || !arr.length) return '';
+    return arr[0].publicUrl || '';
+  },
+  dateFormatter(date) {
+    if (!date) return '';
+    return dayjs(date).format('YYYY-MM-DD');
+  },
+  dateTimeFormatter(date) {
+    if (!date) return '';
+    return dayjs(date).format('YYYY-MM-DD HH:mm');
+  },
+  booleanFormatter(val) {
+    return val ? 'Yes' : 'No';
+
+  /**
+   * Format phone number to +X (XXX) XXX-XXXX
+   */
+  phoneFormatter(val) {
+    if (!val) return '';
+    const digits = val.replace(/\D/g, '');
+    let country = '';
+    let number = '';
+    if (digits.length === 11) {
+      country = digits.charAt(0);
+      number = digits.slice(1);
+    } else if (digits.length === 10) {
+      country = '1';
+      number = digits;
+    } else {
+      return val;
+    }
+    const area = number.slice(0, 3);
+    const prefix = number.slice(3, 6);
+    const line = number.slice(6);
+    return `+${country} (${area}) ${prefix}-${line}`;
+  },
+
+  },
+
+  /**
+   * Format phone number to +X (XXX) XXX-XXXX
+   */
+  phoneFormatter(val) {
+    if (!val) return '';
+    const digits = val.replace(/\D/g, '');
+    let country = '';
+    let number = '';
+    if (digits.length === 11) {
+      country = digits.charAt(0);
+      number = digits.slice(1);
+    } else if (digits.length === 10) {
+      country = '1';
+      number = digits;
+    } else {
+      return val;
+    }
+    const area = number.slice(0, 3);
+    const prefix = number.slice(3, 6);
+    const line = number.slice(6);
+    return `+${country} (${area}) ${prefix}-${line}`;
+  },
+
+  /**
+   * Format phone number to +X (XXX) XXX-XXXX
+   */
+  phoneFormatter(val) {
+    if (!val) return '';
+    const digits = val.replace(/\D/g, '');
+    let country = '';
+    let number = '';
+    if (digits.length === 11) {
+      country = digits.charAt(0);
+      number = digits.slice(1);
+    } else if (digits.length === 10) {
+      country = '1';
+      number = digits;
+    } else {
+      return val;
+    }
+    const area = number.slice(0, 3);
+    const prefix = number.slice(3, 6);
+    const line = number.slice(6);
+    return `+${country} (${area}) ${prefix}-${line}`;
+  },
+
+
+  /**
+   * Format phone number to +X (XXX) XXX-XXXX
+   */
+  phoneFormatter(val) {
+    if (!val) return '';
+    const digits = val.replace(/\D/g, '');
+    let country = '';
+    let number = '';
+    if (digits.length === 11) {
+      country = digits.charAt(0);
+      number = digits.slice(1);
+    } else if (digits.length === 10) {
+      country = '1';
+      number = digits;
+    } else {
+      return val;
+    }
+    const area = number.slice(0, 3);
+    const prefix = number.slice(3, 6);
+    const line = number.slice(6);
+    return `+${country} (${area}) ${prefix}-${line}`;
+  },
+
+  /**
+   * Format phone number to +X (XXX) XXX-XXXX
+   */
+  phoneFormatter(val) {
+    if (!val) return '';
+    const digits = val.replace(/\D/g, '');
+    let country = '';
+    let number = '';
+    if (digits.length === 11) {
+      country = digits.charAt(0);
+      number = digits.slice(1);
+    } else if (digits.length === 10) {
+      country = '1';
+      number = digits;
+    } else {
+      return val;
+    }
+    const area = number.slice(0, 3);
+    const prefix = number.slice(3, 6);
+    const line = number.slice(6);
+    return `+${country} (${area}) ${prefix}-${line}`;
+  },
+  dataGridEditFormatter(obj) {
+    return _.transform(obj, (result, value, key) => {
+      if (_.isArray(value)) {
+        result[key] = _.map(value, 'id');
+      } else if (_.isObject(value)) {
+        result[key] = value.id;
+      } else {
+        result[key] = value;
+      }
+    });
+  },
+
+  usersManyListFormatter(val) {
+    if (!val || !val.length) return [];
+    return val.map((item) => item.firstName);
+  },
+  usersOneListFormatter(val) {
+    if (!val) return '';
+    return val.firstName;
+  },
+  usersManyListFormatterEdit(val) {
+    if (!val || !val.length) return [];
+    return val.map((item) => {
+      return { id: item.id, label: item.firstName };
+    });
+  },
+  usersOneListFormatterEdit(val) {
+    if (!val) return '';
+    return { label: val.firstName, id: val.id };
+  },
+
+  contactsManyListFormatter(val) {
+    if (!val || !val.length) return [];
+    return val.map((item) => item.first_name);
+  },
+  contactsOneListFormatter(val) {
+    if (!val) return '';
+    return val.first_name;
+  },
+  contactsManyListFormatterEdit(val) {
+    if (!val || !val.length) return [];
+    return val.map((item) => {
+      return { id: item.id, label: item.first_name };
+    });
+  },
+  contactsOneListFormatterEdit(val) {
+    if (!val) return '';
+    return { label: val.first_name, id: val.id };
+  },
+
+  rolesManyListFormatter(val) {
+    if (!val || !val.length) return [];
+    return val.map((item) => item.name);
+  },
+  rolesOneListFormatter(val) {
+    if (!val) return '';
+    return val.name;
+  },
+  rolesManyListFormatterEdit(val) {
+    if (!val || !val.length) return [];
+    return val.map((item) => {
+      return { id: item.id, label: item.name };
+    });
+  },
+  rolesOneListFormatterEdit(val) {
+    if (!val) return '';
+    return { label: val.name, id: val.id };
+  },
+
+  permissionsManyListFormatter(val) {
+    if (!val || !val.length) return [];
+    return val.map((item) => item.name);
+  },
+  permissionsOneListFormatter(val) {
+    if (!val) return '';
+    return val.name;
+  },
+  permissionsManyListFormatterEdit(val) {
+    if (!val || !val.length) return [];
+    return val.map((item) => {
+      return { id: item.id, label: item.name };
+    });
+  },
+  permissionsOneListFormatterEdit(val) {
+    if (!val) return '';
+    return { label: val.name, id: val.id };
+  },
+};