improvements (#1514)

podkrepi-bg · Jul 24, 2023 · d7973d0 · d7973d0
1 parent b5c043a
commit d7973d0
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 41 deletions.
diff --git a/public/locales/bg/coordinator.json b/public/locales/bg/coordinator.json
@@ -1,9 +1,14 @@
 {
+  "coordinators": "Координатори",
+  "allCoordinators": "Всички координатори",
   "headings": {
     "info": "Информация"
   },
   "fields": {
-    "name": "Име"
+    "actions": "Действия",
+    "name": "Име",
+    "email": "Имейл",
+    "phone": "Телефон"
   },
   "btns": {
     "add": "Добави",

diff --git a/public/locales/en/coordinator.json b/public/locales/en/coordinator.json
@@ -1,9 +1,14 @@
 {
+  "coordinators": "Coordinators",
+  "allCoordinators": "All coordinators",
   "headings": {
     "info": "Information"
   },
   "fields": {
-    "name": "Name"
+    "actions": "Actions",
+    "name": "Name",
+    "email": "Email",
+    "phone": "Phone"
   },
   "btns": {
     "add": "Add",

diff --git a/src/components/admin/coordinators/CoordinatorAddPage.tsx b/src/components/admin/coordinators/CoordinatorAddPage.tsx
@@ -3,11 +3,14 @@ import AdminContainer from 'components/common/navigation/AdminContainer'
 
 import CoordinatorsForm from './CoordinatorsForm'
 import { Container } from '@mui/material'
+import { useTranslation } from 'next-i18next'
 
 export default function CoordinatorsAddPage() {
+  const { t } = useTranslation('coordinator')
+
   return (
     <AdminLayout>
-      <AdminContainer title={'Координатори'}>
+      <AdminContainer title={t('coordinators')}>
         <Container maxWidth="md" sx={{ py: 5 }}>
           <CoordinatorsForm />
         </Container>

diff --git a/src/components/admin/coordinators/CoordinatorsPage.tsx b/src/components/admin/coordinators/CoordinatorsPage.tsx
@@ -4,13 +4,16 @@ import { ModalStoreImpl } from 'stores/dashboard/ModalStore'
 
 import CoordinatorsGrid from './grid/CoordinatorsGrid'
 import GridAppbar from './grid/GridAppbar'
+import { useTranslation } from 'next-i18next'
 
 export const ModalStore = new ModalStoreImpl()
 
 export default function BankAccountsPage() {
+  const { t } = useTranslation('coordinator')
+
   return (
     <AdminLayout>
-      <AdminContainer title={'Координатори'}>
+      <AdminContainer title={t('coordinators')}>
         <GridAppbar />
         <CoordinatorsGrid />
       </AdminContainer>

diff --git a/src/components/admin/coordinators/grid/CoordinatorsGrid.tsx b/src/components/admin/coordinators/grid/CoordinatorsGrid.tsx
@@ -7,15 +7,16 @@ import { useCoordinatorsList } from 'common/hooks/coordinators'
 import GridActions from 'components/admin/GridActions'
 
 import { ModalStore } from '../CoordinatorsPage'
-import { commonProps } from './CoordinatorsGridHelper'
 import DeleteModal from './DeleteModal'
 import DetailsModal from './DetailsModal'
+import { useTranslation } from 'next-i18next'
 
 export default function CoordinatorsGrid() {
+  const { t } = useTranslation('coordinator')
   const columns: GridColDef[] = [
     {
       field: 'others',
-      headerName: 'Действия',
+      headerName: t('fields.actions'),
       headerAlign: 'center',
       sortable: false,
       disableColumnMenu: true,
@@ -32,27 +33,38 @@ export default function CoordinatorsGrid() {
       },
     },
     {
-      ...commonProps,
-      headerName: 'Име',
-      field: 'status',
-      renderCell: (row) => row.row.person.firstName + ' ' + row.row.person.lastName,
-      valueGetter: (row) => row.row.person.firstName + ' ' + row.row.person.lastName,
+      headerName: t('fields.name'),
+      field: 'name',
+      renderCell: (p) => p.row.person.firstName + ' ' + p.row.person.lastName,
+      valueGetter: (p) => p.row.person.firstName,
+      width: 200,
     },
     {
-      ...commonProps,
-      headerName: 'Имейл',
-      field: 'ibanNumber',
-      width: 220,
-      renderCell: (row) => row.row.person.email,
-      valueGetter: (row) => row.row.person.email,
+      headerName: t('fields.email'),
+      field: 'email',
+      valueGetter: (p) => p.row.person.email,
+      width: 250,
+      renderCell: (params: GridRenderCellParams): React.ReactNode => {
+        return (
+          <a
+            href={`mailto:${params.row.person.email}`}
+            style={{
+              textDecoration: 'underline',
+              color: '#0070f3',
+              cursor: 'pointer',
+            }}>
+            {params.row.person.email}
+          </a>
+        )
+      },
     },
     {
-      ...commonProps,
-      headerName: 'Телефон',
-      field: 'accountHolderName',
+      headerName: t('fields.phone'),
+      field: 'phone',
       flex: 1,
-      renderCell: (row) => row.row.person.phone,
-      valueGetter: (row) => row.row.person.phone,
+      renderCell: (p) => p.row.person.phone,
+      valueGetter: (p) => p.row.person.phone,
+      width: 150,
     },
   ]
 

diff --git a/src/components/admin/coordinators/grid/DetailsModal.tsx b/src/components/admin/coordinators/grid/DetailsModal.tsx
@@ -1,3 +1,6 @@
+import { UseQueryResult } from '@tanstack/react-query'
+import { useViewCoordinator } from 'common/hooks/coordinators'
+import { CoordinatorResponse } from 'gql/coordinators'
 import { observer } from 'mobx-react'
 import { useTranslation } from 'next-i18next'
 
@@ -7,10 +10,13 @@ import { ModalStore } from '../CoordinatorsPage'
 
 export default observer(function DetailsModal() {
   const { selectedRecord } = ModalStore
+  const { data }: UseQueryResult<CoordinatorResponse> = useViewCoordinator(selectedRecord.id)
   const { t } = useTranslation('coordinator')
   const dataConverted = [
-    { name: 'ID', value: `${selectedRecord?.id}` },
-    { name: t('fields.name'), value: `${selectedRecord?.name}` },
+    { name: 'ID', value: data?.id },
+    { name: t('fields.name'), value: data?.person?.firstName + ' ' + data?.person?.lastName },
+    { name: t('fields.email'), value: data?.person?.email },
+    { name: t('fields.phone'), value: data?.person?.phone },
   ]
 
   return <DetailsDialog modalStore={ModalStore} data={dataConverted} />

diff --git a/src/components/admin/coordinators/grid/GridAppbar.tsx b/src/components/admin/coordinators/grid/GridAppbar.tsx
@@ -1,12 +1,7 @@
 import { useRouter } from 'next/router'
 import { Box, Toolbar, Tooltip, Typography } from '@mui/material'
-import {
-  Add as AddIcon,
-  Print as PrintIcon,
-  Save as SaveIcon,
-  Share as ShareIcon,
-  EventNote as EventNoteIcon,
-} from '@mui/icons-material'
+import { Add as AddIcon } from '@mui/icons-material'
+import { useTranslation } from 'next-i18next'
 
 import { routes } from 'common/routes'
 
@@ -17,15 +12,9 @@ const addIconStyles = {
   padding: 1.2,
   boxShadow: 3,
 }
-const iconStyles = {
-  background: 'white',
-  borderRadius: '50%',
-  cursor: 'pointer',
-  padding: 0.5,
-  boxShadow: 3,
-  mr: 1,
-}
+
 export default function GridAppbar() {
+  const { t } = useTranslation('coordinator')
   const router = useRouter()
 
   return (
@@ -38,11 +27,11 @@ export default function GridAppbar() {
         height: '72px',
       }}>
       <Box sx={{ height: '64px', display: 'flex', alignItems: 'start', pt: 1 }}>
-        <Typography>Всички координатори</Typography>
+        <Typography>{t('allCoordinators')}</Typography>
       </Box>
       <Box sx={{ height: '64px', display: 'flex', alignItems: 'flex-end', pb: 1 }}>
         <Box sx={{ display: 'flex', alignItems: 'center' }}>
-          <Tooltip title="Добави">
+          <Tooltip title={t('btns.add')}>
             <AddIcon
               sx={addIconStyles}
               fontSize="large"