dep s

projet-d-innovation · Jun 8, 2023 · 39d7d2b · 39d7d2b
1 parent 2d06e88
commit 39d7d2b
Show file tree

Hide file tree

Showing 7 changed files with 229 additions and 37 deletions.
diff --git a/.env b/.env
@@ -1 +1 @@
-VITE_BACKEND_URL = "http://localhost:50003/api/v1/"
+VITE_BACKEND_URL = "http://localhost:50000/api/v1"
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "axios": "^1.3.6",
     "classnames": "^2.3.2",
     "jwt-decode": "^3.1.2",
+    "mantine-react-table": "^1.0.0-beta.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-query": "^3.39.3",

diff --git a/src/api/axios.ts b/src/api/axios.ts
@@ -1,7 +1,8 @@
 import axios from 'axios';
 
 
-const baseURL = import.meta.env.VITE_BACKEND_URL as string
+// const baseURL = import.meta.env.VITE_BACKEND_URL as string
+const baseURL = ""
 
 const api = axios.create({
   baseURL: baseURL,

diff --git a/src/pages/admin/pedagoqiue/DepartementsPage.tsx b/src/pages/admin/pedagoqiue/DepartementsPage.tsx
@@ -1,9 +1,108 @@
+import { useQuery } from "react-query"
+import { DepartementService } from "../../../services/DepartementService";
+import { useMemo, useState } from "react";
+import { MRT_ColumnDef, MantineReactTable } from "mantine-react-table";
+import { IDepartement, IFiliere } from "../../../types/interfaces";
+import { Box, Title, Menu, Button, Text, ActionIcon, Tooltip } from "@mantine/core";
+import { IconUserCircle, IconSend, IconEdit, IconTrash, IconChevronDown, IconDatabaseExport, IconDatabaseImport, IconSettings, IconTableExport } from "@tabler/icons-react";
 
 const DepartementPage = () => {
+
+
+  const [pagination, setPagination] = useState({
+    pageIndex: 0,
+    pageSize: 5, //customize the default page size
+  });
+
+  const { data, isLoading, isError, refetch, isFetching } = useQuery({
+    queryKey: ['departements', pagination.pageIndex],
+    queryFn: () => DepartementService.getDepartements(
+      {
+        page: pagination.pageIndex,
+        size: pagination.pageSize,
+        includeChefDepartement: true,
+        includeFilieres: true
+      }
+    ),
+    keepPreviousData: true,
+  })
+
+
+  const columns = useMemo<MRT_ColumnDef<IDepartement>[]>(
+    () => [
+      {
+        accessorKey: 'codeDepartement',
+        header: 'Code',
+      },
+      {
+        accessorKey: 'intituleDepartement',
+        header: 'Intitulé',
+      },
+      {
+        accessorFn: (row) => row.filieres as IFiliere[],
+        id: 'filieres',
+        header: 'Nombre filières',
+        Cell: ({ cell }) => cell.getValue<IFiliere[]>().length,
+      },
+    ],
+    [],
+  );
+
+
   return (
-    <main className="flex flex-col items-center justify-center min-h-screen py-2">
-      <h1 className="text-6xl font-bold mb-5">DepartementPage</h1>
-    </main>
+    <main className=" h-screen py-2 w-full">
+      <MantineReactTable
+        columns={columns}
+        data={data?.records ?? []}
+        enableColumnFilterModes
+        enableColumnOrdering
+        enableGrouping
+        enablePinning
+        enableRowActions
+        onPaginationChange={setPagination}
+        state={{ pagination }}
+        enableRowSelection
+        positionToolbarAlertBanner="top"
+        enableFullScreenToggle={false}
+        renderTopToolbarCustomActions={({ table }) => {
+
+          return <div style={{ display: 'flex', gap: '8px' }}>
+            <Button variant="outline">
+              Nouveau
+            </Button>
+            <Button variant="outline" color="red">
+              Supprimer sélection
+            </Button>
+          </div>
+        }}
+        renderRowActionMenuItems={() => (
+          <>
+            <Menu.Label>Single-Selection</Menu.Label>
+            <Menu.Item
+              icon={<IconSettings size={14} />}
+            >
+              Details
+            </Menu.Item>
+            <Menu.Item
+              onClick={() => {
+              }}
+              icon={<IconEdit size={14} />}
+            >
+              Modifier
+            </Menu.Item>
+            <Menu.Divider />
+            <Menu.Item
+              color="red"
+              icon={<IconTrash size={14} />}
+              onClick={() => {
+              }}
+            >
+              Supprimmer
+            </Menu.Item>
+          </>
+        )}
+      />
+    </main >
   )
 }
 

diff --git a/src/services/DepartementService.ts b/src/services/DepartementService.ts
@@ -0,0 +1,51 @@
+import axios from 'axios';
+import { IDepartement, IPagination } from '../types/interfaces';
+
+
+export class DepartementService {
+
+  static readonly api = axios.create({
+    baseURL: "http://localhost:50000/api/v1",
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    paramsSerializer: (params) => {
+      const searchParams = new URLSearchParams();
+      for (const key in params) {
+        if (params.hasOwnProperty(key)) {
+          const param = params[key];
+          if (Array.isArray(param)) {
+            param.forEach((value) => {
+              searchParams.append(key, value);
+            });
+          } else {
+            searchParams.append(key, param);
+          }
+        }
+      }
+      return searchParams.toString();
+    }
+  });
+
+  static async getDepartements({ search = "", page = 0, size = 10, includeFilieres = false, includeChefDepartement = false }: {
+    search?: string,
+    page?: number,
+    size?: number,
+    includeFilieres?: boolean,
+    includeChefDepartement?: boolean
+  }): Promise<IPagination<IDepartement>> {
+    const response = await this.api.get("/departements", {
+      params: {
+        search,
+        page: page,
+        size,
+        includeFilieres,
+        includeChefDepartement
+      }
+
+    });
+
+    return response.data;
+  }
+
+}
diff --git a/src/types/interfaces.ts b/src/types/interfaces.ts
@@ -1,35 +1,15 @@
-
-export interface IEtudiant {
-  code: string,
-  cin: string,
-  cne: string,
-  nom: string,
-  prenom: string,
-  telephone: string,
-  adresse: string,
-  dateNaissance: Date,
-  ville: string,
-  pays: string,
-  photo: string
-}
-
-export interface IProfesseur {
-  code: string,
-  nom: string,
-  prenom: string,
-  telephone: string,
-  photo: string,
-  codeDepartement: string,
-  departement: IDepartement,
-  elements?: IElement[]
-}
-
 export interface IUtilisateur {
-  code: string,
-  nom: string,
-  prenom: string,
-  telephone: string,
-  photo?: string,
+  code?: string,
+  cin?: string,
+  cne?: string,
+  nom?: string,
+  prenom?: string,
+  telephone?: string,
+  adresse?: string,
+  dateNaissance?: Date,
+  ville?: string,
+  pays?: string,
+  photo?: string
   roles?: IRoleWithoutPermissions[]
 }
 
@@ -38,20 +18,33 @@ export interface IDepartement {
   intituleDepartement: string,
   codeChefDepartement: string
   chefDepartement?: IUtilisateur,
+  filieres?: IFiliere[]
+}
+
+export interface IFiliere {
+
+  codeFiliere: string,
+  intituleFiliere: string,
+  codeDepartement: string,
+  codeChefFiliere: string,
+  chefFiliere: IUtilisateur
+  semestres?: ISemestre[]
 }
 
 
 export interface ISemestre {
   codeSemestre: string,
   codeFiliere: string,
   intituleSemestre: string
+  modules?: IModule[]
 }
 
 export interface IModule {
   codeModule: string,
   intituleModule: string,
   coefficientModule: number,
-  codeSemestre: string
+  codeSemestre: string,
+  elements: IElement[]
 }
 
 
@@ -61,6 +54,7 @@ export interface IElement {
   coefficientElement: number,
   codeModule: string,
   codeProfesseur: string
+  professeur?: IUtilisateur
 }
 
 

diff --git a/yarn.lock b/yarn.lock
@@ -638,6 +638,37 @@
   resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-2.17.0.tgz#3b5ac3d41576894d3e18cd8014ba8ce33f3634be"
   integrity sha512-UeJaylOGNRhQKyDlgZfrQ3UPSGlfVQuXcmCsTYeXioKKepibW6VZ3H36Lo1jvBTBkQD2e9m+k2NxwkztOTXwrA==
 
+"@tanstack/[email protected]":
+  version "8.8.4"
+  resolved "https://registry.yarnpkg.com/@tanstack/match-sorter-utils/-/match-sorter-utils-8.8.4.tgz#0b2864d8b7bac06a9f84cb903d405852cc40a457"
+  integrity sha512-rKH8LjZiszWEvmi01NR72QWZ8m4xmXre0OOwlRGnjU01Eqz/QnN+cqpty2PJ0efHblq09+KilvyR7lsbzmXVEw==
+  dependencies:
+    remove-accents "0.4.2"
+
+"@tanstack/[email protected]":
+  version "8.9.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.9.1.tgz#bfe1d286f549b9743d99bfbeb531f2582f9d698b"
+  integrity sha512-yHs2m6lk5J5RNcu2dNtsDGux66wNXZjEgzxos6MRCX8gL+nqxeW3ZglqP6eANN0bGElPnjvqiUHGQvdACOr3Cw==
+  dependencies:
+    "@tanstack/table-core" "8.9.1"
+
+"@tanstack/[email protected]":
+  version "3.0.0-beta.54"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.0.0-beta.54.tgz#755979455adf13f2584937204a3f38703e446037"
+  integrity sha512-D1mDMf4UPbrtHRZZriCly5bXTBMhylslm4dhcHqTtDJ6brQcgGmk8YD9JdWBGWfGSWPKoh2x1H3e7eh+hgPXtQ==
+  dependencies:
+    "@tanstack/virtual-core" "3.0.0-beta.54"
+
+"@tanstack/[email protected]":
+  version "8.9.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.9.1.tgz#869410ca1748c45d4e19ccfd4db7e36452611674"
+  integrity sha512-2+R83n8vMZND0q3W1lSiF7co9nFbeWbjAErFf27xwbeA9E0wtUu5ZDfgj+TZ6JzdAEQAgfxkk/QNFAKiS8E4MA==
+
+"@tanstack/[email protected]":
+  version "3.0.0-beta.54"
+  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.0.0-beta.54.tgz#12259d007911ad9fce1388385c54a9141f4ecdc4"
+  integrity sha512-jtkwqdP2rY2iCCDVAFuaNBH3fiEi29aTn2RhtIoky8DTTiCdc48plpHHreLwmv1PICJ4AJUUESaq3xa8fZH8+g==
+
 "@types/json-schema@^7.0.9":
   version "7.0.11"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
@@ -1503,6 +1534,11 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+[email protected]:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/highlight-words/-/highlight-words-1.2.2.tgz#9875b75d11814d7356b24f23feeb7d77761fa867"
+  integrity sha512-Mf4xfPXYm8Ay1wTibCrHpNWeR2nUMynMVFkXCi4mbl+TEgmNOe+I4hV7W3OCZcSvzGL6kupaqpfHOemliMTGxQ==
+
 hoist-non-react-statics@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@@ -1690,6 +1726,16 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+mantine-react-table@^1.0.0-beta.8:
+  version "1.0.0-beta.8"
+  resolved "https://registry.yarnpkg.com/mantine-react-table/-/mantine-react-table-1.0.0-beta.8.tgz#728f73b68d86c2c71909b41496b25ebdc493b87d"
+  integrity sha512-um2yN96NXSh7IBYCOxCY4d+zbPiJDiD2u1jAVPOiaKuLysvR9tP2fw2CdlFhfyM2BQD8xjJv+IlTyL602yo2Hw==
+  dependencies:
+    "@tanstack/match-sorter-utils" "8.8.4"
+    "@tanstack/react-table" "8.9.1"
+    "@tanstack/react-virtual" "3.0.0-beta.54"
+    highlight-words "1.2.2"
+
 match-sorter@^6.0.2:
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.3.1.tgz#98cc37fda756093424ddf3cbc62bfe9c75b92bda"
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		VITE_BACKEND_URL = "http://localhost:50003/api/v1/"
		VITE_BACKEND_URL = "http://localhost:50000/api/v1"