Feature/fg 51 (#744)

* ferdig med å legge til inputfelter for søk * begynt på toggle button * begynt på grid * endret daterangepicker til datepicker og lagt til norsk * save before testing tablepaginator * edited table to mui table * fikset row, column issue * ferdig med gui * removed code smells * fjernet codesmell * fix merge conflicts * fjernet date-picker-pro --------- Co-authored-by: Marius Bølset Gisleberg <[email protected]>
Fotogjengen · Sep 9, 2023 · 7a290b4 · 7a290b4
1 parent d148ea9
commit 7a290b4
Show file tree

Hide file tree

Showing 10 changed files with 968 additions and 222 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,12 +36,14 @@
     "@emotion/styled": "^11.10.4",
     "@mui/icons-material": "^5.10.6",
     "@mui/lab": "^5.0.0-alpha.102",
-    "@mui/material": "^5.10.8",
+    "@mui/material": "^5.14.7",
     "@mui/styles": "^5.10.8",
+    "@mui/x-data-grid": "^6.12.1",
     "@mui/x-date-pickers": "^6.1.0",
     "axios": "0.27.2",
     "classnames": "2.3.2",
     "date-fns": "^2.29.3",
+    "dayjs": "^1.11.7",
     "file-saver": "^2.0.5",
     "form-data": "4.0.0",
     "formik": "^2.2.9",

diff --git a/src/AppRoutes.tsx b/src/AppRoutes.tsx
@@ -15,6 +15,7 @@ import InternNav from "./views/Intern/InternNav/InternNav";
 import Expo from "./views/Intern/Expo/Expo";
 import Redirect from "./utils/Redirect/Redirect";
 import MotiveHeader from "./components/ImageViewer/MotiveHeader";
+import InternSearchView from "./views/Intern/InternSearch/InternSearchView";
 import { Box } from "@mui/material";
 
 const AppRoutes: FC = () => {
@@ -28,6 +29,7 @@ const AppRoutes: FC = () => {
         <Route path="/search/:term" element={<Search />} />
         <Route path="/intern/myprofile" element={<MyProfile />} />
         <Route path="/csa-tester" element={<CsaTester />} />
+        <Route path="/intern/sok" element={<InternSearchView />} />
         <Route path="/intern/last-opp" element={<PhotoUpload />} />
         <Route path="/intern/arkivsjef" element={<Arkivsjef />} />
         <Route path="/intern/motive" element={<Motives />} />

diff --git a/src/index.tsx b/src/index.tsx
@@ -20,7 +20,6 @@ const Root: FC = () => {
   const [open, setOpen] = useState(false);
   const [message, setMessage] = useState("");
   const [severity, setSeverity] = useState(severityEnum.INFO);
-
   const [photos, setPhotos] = useState<PhotoDto[]>([]);
   const [isOpen, setIsOpen] = useState(false);
   const [photoIndex, setPhotoIndex] = useState(0);

diff --git a/src/views/Intern/InternNav/InternNav.tsx b/src/views/Intern/InternNav/InternNav.tsx
@@ -22,7 +22,7 @@ const InternNav = () => {
   const mainLinks = [
     {
       name: "Internsøk",
-      to: "/søk",
+      to: "/intern/sok",
       icon: <ImageSearchIcon style={{ fontSize: mainIconSize }} />,
     },
     {

diff --git a/src/views/Intern/InternSearch/CustomTable.tsx b/src/views/Intern/InternSearch/CustomTable.tsx
@@ -0,0 +1,183 @@
+import React, { useState } from "react";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import Paper from "@mui/material/Paper";
+import Pagination from "@mui/material/Pagination";
+import styles from "./InternSearch.module.css";
+import ToggleComponent from "./ToggleComponent";
+
+const columns = [
+  { id: "album", label: "Album" },
+  { id: "motiv", label: "Motiv" },
+  { id: "dato", label: "Dato" },
+  { id: "type", label: "Type" },
+  { id: "sted", label: "Sted" },
+  { id: "oppslag", label: "Oppslag" },
+  { id: "rettighet", label: "Rettighet" },
+  { id: "scannet", label: "Scannet" },
+  { id: "bilde", label: "Bilde" },
+  { id: "endre", label: "Endre" },
+];
+
+const rows = [
+  {
+    id: 1,
+    album: "album",
+    motiv: "motiv",
+    dato: "dato",
+    type: "type",
+    sted: "sted",
+    oppslag: "oppslag",
+    rettighet: "boss",
+    scannet: "nei",
+    bilde: "url",
+    endre: "endre/slett",
+  },
+  {
+    id: 2,
+    album: "album",
+    motiv: "motiv",
+    dato: "dato",
+    type: "type",
+    sted: "sted",
+    oppslag: "oppslag",
+    rettighet: "boss",
+    scannet: "nei",
+    bilde: "url",
+    endre: "endre/slett",
+  },
+  {
+    id: 3,
+    album: "album",
+    motiv: "motiv",
+    dato: "dato",
+    type: "type",
+    sted: "sted",
+    oppslag: "oppslag",
+    rettighet: "boss",
+    scannet: "nei",
+    bilde: "url",
+    endre: "endre/slett",
+  },
+  {
+    id: 4,
+    album: "album",
+    motiv: "motiv",
+    dato: "dato",
+    type: "type",
+    sted: "sted",
+    oppslag: "oppslag",
+    rettighet: "boss",
+    scannet: "nei",
+    bilde: "url",
+    endre: "endre/slett",
+  },
+  {
+    id: 5,
+    album: "album",
+    motiv: "motiv",
+    dato: "dato",
+    type: "type",
+    sted: "sted",
+    oppslag: "oppslag",
+    rettighet: "boss",
+    scannet: "nei",
+    bilde: "url",
+    endre: "endre/slett",
+  },
+  {
+    id: 6,
+    album: "album",
+    motiv: "motiv",
+    dato: "dato",
+    type: "type",
+    sted: "sted",
+    oppslag: "oppslag",
+    rettighet: "boss",
+    scannet: "nei",
+    bilde: "url",
+    endre: "endre/slett",
+  },
+  // ... more rows
+];
+
+const rowsPerPageOptions = [5, 10, 25];
+
+const CustomTable = () => {
+  const [page, setPage] = React.useState(1);
+  const [rowsPerPage] = React.useState(rowsPerPageOptions[0]);
+
+  const handleChangePage = (event: any, newPage: any) => {
+    setPage(newPage);
+  };
+  const [isGrid, setIsGrid] = useState(true);
+  const handleChange = () => {
+    setIsGrid(!isGrid);
+  };
+
+  const emptyRows = Math.max(0, page * rowsPerPage - rows.length);
+
+  return (
+    <Paper>
+      <div className={styles.toggleHeader}>
+        <div className={styles.pagination}>
+          <Pagination
+            count={Math.ceil(rows.length / rowsPerPage)}
+            page={page}
+            onChange={handleChangePage}
+            color="primary"
+          />
+        </div>
+        <div className={styles.toggleComponent}>
+          <ToggleComponent
+            value={isGrid ? "Grid" : "List"}
+            onChange={handleChange}
+          />
+        </div>
+      </div>
+      <TableContainer>
+        <Table>
+          <TableHead>
+            <TableRow>
+              {columns.map((column) => (
+                <TableCell key={column.id}>{column.label}</TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows
+              .slice((page - 1) * rowsPerPage, page * rowsPerPage)
+              .map((row) => (
+                <TableRow key={row.id}>
+                  {columns.map((column) => (
+                    <TableCell key={column.id}>
+                      {row[column.id as keyof typeof row]}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            {emptyRows > 0 && (
+              <TableRow style={{ height: 53 * emptyRows }}>
+                <TableCell colSpan={columns.length} />
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <div className={styles.pagination2}>
+        <Pagination
+          count={Math.ceil(rows.length / rowsPerPage)}
+          page={page}
+          onChange={handleChangePage}
+          color="primary"
+        />
+      </div>
+    </Paper>
+  );
+};
+
+export default CustomTable;
diff --git a/src/views/Intern/InternSearch/InternSearch.module.css b/src/views/Intern/InternSearch/InternSearch.module.css
@@ -0,0 +1,50 @@
+.internSearch {
+  background-color: white;
+  display: flex;
+  border-radius: 2rem;
+  padding: 2rem;
+}
+.formTextField {
+  padding: 0.4rem;
+}
+
+.gridDivContainer {
+  display: grid;
+  width: 70%;
+  height: 30%;
+  order: 2;
+  margin-right: auto;
+  padding: 1rem;
+}
+
+.gridContainer {
+  padding: 0.5rem;
+  background-color: whitesmoke;
+  border-radius: 1rem;
+}
+
+.gridBox {
+  width: 100%;
+}
+
+.toggleHeader {
+  width: 100%;
+  border-radius: 1rem;
+  display: flex;
+  flex: 1;
+}
+
+.pagination {
+  width: 100%;
+  padding: 1rem;
+}
+
+.pagination2 {
+  width: 100%;
+  padding: 1rem;
+}
+
+.toggleComponent {
+  width: 15%;
+  padding: 1rem;
+}