v3

frontend/src/components/Contacts/TableContacts.tsx

@@ -216,6 +216,9 @@ const TableSampleContacts = ({
         className={'datagrid--table'}
         getRowClassName={() => `datagrid--row`}
         rows={contacts ?? []}
+
+          components={{ Toolbar: GridToolbar }}
+          onRowClick={(params) => router.push(`/contacts/contacts-view/?id=${params.id}`)}
         columns={columns}
         initialState={{
           pagination: {

frontend/src/components/Contacts/configureContactsCols.tsx

@@ -69,23 +69,6 @@ export const loadColumns = async (
       cellClassName: 'datagrid--cell',
       editable: hasUpdatePermission,
     },
-    {
-      field: 'job_seeker',
-      headerName: 'JobSeeker',
-      flex: 1,
-      minWidth: 120,
-      filterable: false,
-      headerClassName: 'datagrid--header',
-      cellClassName: 'datagrid--cell',
-      editable: hasUpdatePermission,
-      sortable: false,
-      type: 'singleSelect',
-      getOptionValue: (value: any) => value?.id,
-      getOptionLabel: (value: any) => value?.label,
-      valueOptions: await callOptionsApi('users'),
-      valueGetter: (params: GridValueGetterParams) =>
-        params?.value?.id ?? params?.value,
-    },
     {
       field: 'notes',
       headerName: 'Notes',

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

@@ -1,100 +0,0 @@
-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: 'phone_number',
-      headerName: 'PhoneNumber',
-      flex: 1,
-      minWidth: 120,
-      filterable: false,
-      headerClassName: 'datagrid--header',
-      cellClassName: 'datagrid--cell',
-      editable: hasUpdatePermission,
-    },
-    {
-      field: 'job_seeker',
-      headerName: 'JobSeeker',
-      flex: 1,
-      minWidth: 120,
-      filterable: false,
-      headerClassName: 'datagrid--header',
-      cellClassName: 'datagrid--cell',
-      editable: hasUpdatePermission,
-      sortable: false,
-      type: 'singleSelect',
-      getOptionValue: (value: any) => value?.id,
-      getOptionLabel: (value: any) => value?.label,
-      valueOptions: await callOptionsApi('users'),
-      valueGetter: (params: GridValueGetterParams) =>
-        params?.value?.id ?? 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/pages/contacts/contacts-view.tsx

@@ -54,30 +54,10 @@ const ContactsView = () => {
           />
         </SectionTitleLineWithButton>
         <CardBox>
-          <div className={'mb-4'}>
+          <div className='mb-6'>
-            <p className={'block font-bold mb-2'}>FirstName</p>
+            <h1 className='text-2xl font-bold'>{contacts?.first_name} {contacts?.last_name}</h1>
-            <p>{contacts?.first_name}</p>
+            <p className='text-sm text-gray-500'>{contacts?.email}</p>
-          </div>
+            <p className='text-sm text-gray-500'>{contacts?.phone_number}</p>
-
-          <div className={'mb-4'}>
-            <p className={'block font-bold mb-2'}>LastName</p>
-            <p>{contacts?.last_name}</p>
-          </div>
-
-          <div className={'mb-4'}>
-            <p className={'block font-bold mb-2'}>Email</p>
-            <p>{contacts?.email}</p>
-          </div>
-
-          <div className={'mb-4'}>
-            <p className={'block font-bold mb-2'}>PhoneNumber</p>
-            <p>{contacts?.phone_number}</p>
-          </div>
-
-          <div className={'mb-4'}>
-            <p className={'block font-bold mb-2'}>JobSeeker</p>
-
-            <p>{contacts?.job_seeker?.firstName ?? 'No data'}</p>
           </div>
 
           <div className={'mb-4'}>