Merge pull request #139 from WildCodeSchool/responsiv_dash

Responsiv dash

Dockerfile

@@ -1,11 +1,32 @@
 #syntax=docker/dockerfile:1.4
 FROM node:20-alpine
 
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+# hadolint ignore=DL3018
+RUN apk add --no-cache libc6-compat
+
 WORKDIR /usr/src/app
-COPY --link ./package.json ./package-lock.json ./
-COPY --link ./backend/package.json ./backend/package-lock.json ./backend/
-COPY --link ./frontend/package.json ./frontend/package-lock.json ./frontend/
 
-RUN npm install
+RUN corepack enable && \
+	corepack prepare --activate pnpm@latest && \
+	pnpm config -g set store-dir /.pnpm-store
+
+COPY --link ./backend/package.json ./backend/
+COPY --link ./frontend/package.json ./frontend/
+
+RUN cd frontend && \
+    pnpm fetch && \
+    pnpm install
+RUN cd backend && \
+    pnpm fetch && \
+    pnpm install
+
+COPY ./frontend ./frontend
+
+RUN cd frontend && \
+    pnpm run build
+
+COPY ./backend ./backend
+COPY docker-entry.sh .
 
-COPY ./ .
+CMD ["sh","./docker-entry.sh"]

backend/database/database.sql

@@ -419,23 +419,16 @@ CREATE TABLE `user` (
 --
 
 LOCK TABLES `user` WRITE;
-/*!40000 ALTER TABLE `user` DISABLE KEYS */
-;
-
-INSERT INTO
-    `user`
-VALUES (
-        1, 'johny', 'demo', '06 87 27 48 94', '[email protected]', '45 rue des cocotiers, Perpignan, 66100', '$2b$05$qmUzhYqnfbiQyfY0NZXaueKkDbInhO4pzZGuLnTT5JAUq5BJgdbeK', 0, 'loremipsul-mdolor'
-    ),
-    (
-        28, 'erftgyhuj', 'rfghj', 'rftgyhuj', '[email protected]', 'dcfvgbh', '$2b$05$8K8lbcHYqN5jZqO8mFzLW.YC8n4yVcIjk8fyz18Ud/vgkMVmfhR/i', 0, ''
-    ),
-    (
-        29, 'cass', 'cassiergegr', '098320498', '[email protected]', 'ç!\"\'(è rye àéç\"!àçé', '$2b$05$AnyuQBLohvbHr79KdBOj9OWmJfpu8ulSY2G2LQgqz/whDlSy1qKbq', 0, 'uploads/05d0d336a101ed3b078b4153b7378bf8.avif'
+/*!40000 ALTER TABLE `user` DISABLE KEYS */;
+INSERT INTO `user` VALUES (1,'johny','demo','06 87 27 48 94','[email protected]','45 rue des cocotiers, Perpignan, 66100','$2b$05$qmUzhYqnfbiQyfY0NZXaueKkDbInhO4pzZGuLnTT5JAUq5BJgdbeK',0,'loremipsul-mdolor'
+),(
+  28,'erftgyhuj','rfghj','rftgyhuj','[email protected]','dcfvgbh','$2b$05$8K8lbcHYqN5jZqO8mFzLW.YC8n4yVcIjk8fyz18Ud/vgkMVmfhR/i',0,''
+  ),(
+    29,'cass','cassiergegr','098320498','[email protected]','ç!\"\'(è rye àéç\"!àçé','$2b$05$AnyuQBLohvbHr79KdBOj9OWmJfpu8ulSY2G2LQgqz/whDlSy1qKbq',0,'uploads/05d0d336a101ed3b078b4153b7378bf8.avif'
+    ),(
+      44, "John", "Doe", "0606060606", "[email protected]", "06 Ure", "$2b$05$P3w2mRO1X1DPbrVsQocyfupP20xBlgEZGrNfimpoAFCzf4f.mTqTS", 1, 'uploads/05d0d336a101ed3b078b4153b7378bf8.avif'
     );
-/*!40000 ALTER TABLE `user` ENABLE KEYS */
-;
-
+/*!40000 ALTER TABLE `user` ENABLE KEYS */;
 UNLOCK TABLES;
 
 --

docker-compose.prod.yml

@@ -3,11 +3,7 @@ version: '3.4'
 services:
   web:
     build: .
-    container_name: ${PROJECT_NAME:-project}-web
-    volumes:
-      - .:/usr/src/app:delegated
-      - ./docker-entry.sh:/etc/entrypoint.sh
-    entrypoint: [ "sh", "/etc/entrypoint.sh" ]
+    container_name: ${PROJECT_NAME}-web
     env_file:
       - ../envs/.env-${GITHUB_REPOSITORY_NAME}
     environment:
@@ -24,9 +20,9 @@ services:
     labels:
       - "traefik.enable=true"
       - "traefik.docker.network=proxy"
-      - "traefik.http.routers.${PROJECT_NAME:-project}-secure.entrypoints=websecure"
-      - "traefik.http.routers.${PROJECT_NAME:-project}-secure.rule=Host(`${PROJECT_NAME:-project}.${HOST:-localhost}`)"
-      - "traefik.http.services.${PROJECT_NAME:-project}.loadbalancer.server.port=3310"
+      - "traefik.http.routers.${PROJECT_NAME}-secure.entrypoints=websecure"
+      - "traefik.http.routers.${PROJECT_NAME}-secure.rule=Host(`${PROJECT_NAME}.${HOST}`)"
+      - "traefik.http.services.${PROJECT_NAME}.loadbalancer.server.port=3310"
 
 networks:
   proxy:

docker-compose.yml

@@ -38,5 +38,6 @@ services:
       # Password for root access
       MYSQL_ROOT_PASSWORD: rootpassword
     ports:
-      - "3306"
-
+      - target: 3306
+        published: 3306
+        protocol: tcp

docker-entry.sh

@@ -1,6 +1,3 @@
 #!/usr/bin/env sh
 
-sleep 5
-npm install
-npm run build
-npm run start
+cd /usr/src/app/backend && node migrate.js && node index.js

frontend/src/components/Dashboards/RowDash.css

@@ -1,25 +1,50 @@
 .offerDash-item {
   display: flex;
   justify-content: space-between;
-  box-shadow: 5px 5px 15px 8px rgba(217, 217, 217, 0.53);
-  padding: 10px 35px;
-  margin-bottom: 20px;
 }
-.array-box,
-.bigArray-box {
-  margin-inline: 5px;
-  margin: 25px 0;
+
+.offerDash-item {
+  display: flex;
+  background-color: var(--background-input);
+  margin-block: 10px;
+  padding: 5px 10px;
+  border-radius: 10px;
+  align-items: center;
 }
-.array-box {
-  width: 12%;
+
+.offerDash-item > p {
+  font-size: 14px;
 }
-.bigArray-box {
-  width: 32%;
+
+.offerDash-item > p:nth-child(2) {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 70px;
 }
+
 .icon-dash {
   display: flex;
-  justify-content: space-between;
-  margin: 25px 0;
-  width: 100px;
-  color: var(--second-color);
+  flex-direction: column;
+}
+
+@media screen and (min-width: 1200px) {
+  .offerDash-item > p {
+    font-size: 20px;
+    margin-block: 10px;
+  }
+
+  .offerDash-item > p:nth-child(2) {
+    white-space: initial;
+    max-width: 100px;
+  }
+
+  .icon-dash {
+    flex-direction: row;
+  }
+
+  .icon-dash > button > i {
+    font-size: 20px;
+    margin-right: 20px;
+  }
 }

frontend/src/components/Dashboards/RowDash.jsx

@@ -55,7 +55,6 @@ function RowDash() {
           <p className="array-box">{offer.id}</p>
           <p className="array-box">{offer.company}</p>
           <p className="array-box">{offer.NbrCandidats}</p>
-          <p className="array-box">En ligne</p>
           <p className="bigArray-box">{offer.email}</p>
           <div className="icon-dash">
             <button

frontend/src/components/Dashboards/RowDash2.css

@@ -0,0 +1,56 @@
+.offerDash-item {
+  display: flex;
+  justify-content: space-between;
+}
+
+.offerDash-item {
+  display: flex;
+  background-color: var(--background-input);
+  margin-block: 10px;
+  padding: 5px 10px;
+  border-radius: 10px;
+  /* justify-content: center; */
+  align-items: center;
+}
+
+.offerDash-item > p {
+  font-size: 14px;
+}
+
+.offerDash-item > p:nth-child(2) {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 70px;
+}
+
+.icon-dash {
+  display: flex;
+  flex-direction: column;
+}
+
+@media screen and (min-width: 1200px) {
+  .offerDash-item > p {
+    font-size: 20px;
+    margin-block: 10px;
+  }
+
+  .offerDash-item > p:nth-child(1) {
+    white-space: initial;
+    min-width: 25px;
+  }
+
+  .offerDash-item > p:nth-child(2) {
+    white-space: initial;
+    max-width: 100px;
+  }
+
+  .icon-dash {
+    flex-direction: row;
+  }
+
+  .icon-dash > button > i {
+    font-size: 20px;
+    margin-right: 20px;
+  }
+}

frontend/src/components/Dashboards/RowDash2.jsx

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from "react";
-import "./RowDash.css";
 import { useGlobalContext } from "../../contexts/GlobalContext";
-// import { useAdminContext } from "../../contexts/AdminContext";
+import { useAdminContext } from "../../contexts/AdminContext";
+import "./RowDash2.css";
 
 function RowDash2() {
   const { apiService } = useGlobalContext();
-  // const { goToEditUser } = useAdminContext();
+  const { goToEditUser } = useAdminContext();
   const [users, setUsers] = useState([]);
 
   const fetchUsers = async () => {
@@ -48,14 +48,14 @@ function RowDash2() {
           <p className="bigArray-box">{user.email}</p>
           <p>{user.is_admin}</p>
           <div className="icon-dash">
-            {/* <button
+            <button
               type="button"
               aria-label="editeuser"
               onClick={() => goToEditUser(user.id)}
               className="invisible-button"
             >
               <i className="fa-solid fa-pen" />
-            </button> */}
+            </button>
             <button
               type="button"
               aria-label="deleteuser"

frontend/src/components/Dashboards/TitleDashboard.jsx

@@ -1,5 +1,5 @@
-import "./title-dashboard.css";
 import PropTypes from "prop-types";
+import "./title-dashboard.css";
 
 function TitleDashboard({
   labelDash,
@@ -8,6 +8,7 @@ function TitleDashboard({
   labelDash4,
   labelDash5,
   labelDash6,
+  labelDash7,
 }) {
   return (
     <div className="title-container">
@@ -16,7 +17,8 @@ function TitleDashboard({
       <h4 className="title-dash">{labelDash3}</h4>
       <h4 className="title-dash">{labelDash4}</h4>
       <h4 className="title-dash">{labelDash5}</h4>
-      <h4 className="title-dash-action">{labelDash6}</h4>
+      <h4 className="title-dash">{labelDash6}</h4>
+      <h4 className="title-dash">{labelDash7}</h4>
     </div>
   );
 }
@@ -27,6 +29,7 @@ TitleDashboard.propTypes = {
   labelDash4: PropTypes.string.isRequired,
   labelDash5: PropTypes.string.isRequired,
   labelDash6: PropTypes.string.isRequired,
+  labelDash7: PropTypes.string.isRequired,
 };
 
 export default TitleDashboard;

frontend/src/components/Dashboards/title-dashboard.css

@@ -1,21 +1,21 @@
 .title-container {
-  width: 70%;
-  margin-left: 25px;
   display: flex;
   justify-content: space-between;
 }
 
 .tab {
   color: var(--texte-default);
-  font-size: 20px;
+  font-size: 24px;
   margin-left: 30px;
 }
 
 .title-dash {
-  font-size: 20px;
-  color: var(--texte-default);
+  justify-content: space-between;
+  font-size: 16px;
   font-weight: 400;
+  color: var(--texte-default);
 }
+
 .title-dash-action {
   font-size: 20px;
   color: var(--texte-default);
@@ -25,27 +25,37 @@
 
 .title-btn {
   display: flex;
+  flex-direction: column;
+  align-items: center;
   margin-bottom: 30px;
 }
 
-/* .submit-btn-mini {
-  background-color: var(--second-color);
-  color: var(--text-btn);
-  padding: 30px 0;
-  border: 0;
-  border-radius: 7px;
-  text-transform: uppercase;
-  font-weight: 500;
-  font-size: 10px;
-  width: 100%;
-  margin-top: -20px;
-  align-items: center;
-} */
-
 .ref {
   margin-top: -50px;
   margin-right: 70px;
   font-size: 16px;
   display: flex;
   justify-content: flex-end;
 }
+
+@media screen and (min-width: 1200px) {
+  .title-container {
+    margin-inline: 10px;
+  }
+
+  .title-dash {
+    font-size: 24px;
+  }
+
+  .title-btn {
+    width: 70%;
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-bottom: 60px;
+  }
+
+  .tab {
+    font-size: 32px;
+  }
+}