Merge pull request #5 from adrianrbp/4-frontend-company-service-avail…

…ability-management

4-frontend company service availability management

.devcontainer/.env

@@ -0,0 +1,9 @@
+POSTGRES_USER=user
+POSTGRES_PASSWORD=password
+POSTGRES_DB=monitoring_sys
+
+
+DATABASE_HOST=postgres
+DATABASE_USER=user
+DATABASE_PASSWORD=password
+DATABASE_NAME=monitoring_sys_development

.devcontainer/docker-compose.yml

@@ -1,5 +1,8 @@
+name: monitoring-schedule
+
 services:
   postgres:
+    container_name: monit-pg
     image: postgres:latest
     restart: unless-stopped
     environment:
@@ -10,8 +13,11 @@ services:
       - "5432:5432"
     volumes:
       - postgres-data:/var/lib/postgresql/data
+    networks:
+      - backend-net
 
   rails:
+    container_name: monit-rails
     build:
       context: .
       dockerfile: ./rails-container/Dockerfile
@@ -22,18 +28,24 @@ services:
       DATABASE_NAME: monitoring_sys_development
     volumes:
       - ..:/workspace:cached
+    networks:
+      - frontend-net
+      - backend-net
     command: sleep infinity
     ports:
       - "3030:3030"
     depends_on:
       - postgres
 
   vue:
+    container_name: monit-vue
     build:
       context: .
       dockerfile: ./vue-container/Dockerfile
     volumes:
       - ..:/workspace:cached
+    networks:
+      - frontend-net
     # command: sh -c "yarn install && yarn serve"
     command: sleep infinity
     ports:
@@ -42,14 +54,21 @@ services:
       - rails
 
   playwright:
+    container_name: monit-playwright
     image: mcr.microsoft.com/playwright:v1.39.0-jammy  # Use the latest version
     working_dir: /workspace/frontend
     user: pwuser
     volumes:
       - ..:/workspace:cached
+    networks:
+      - frontend-net
     depends_on:
       - vue
     command: sh -c "yarn install && npx playwright install && tail -f /dev/null"
 
 volumes:
   postgres-data:
+
+networks:
+  backend-net: {}
+  frontend-net: {}

.devcontainer/rails-container/devcontainer.json

@@ -35,6 +35,44 @@
             "strings": "on"
           }
         },
+        "peacock": {
+          "affectTabActiveBorder": true,
+          "remoteColor": "#dd0531",
+          "favoriteColors": [
+            {
+              "name": "Angular Red",
+              "value": "#dd0531"
+            },
+            {
+              "name": "Something Different",
+              "value": "#832561"
+            },
+            {
+              "name": "Svelte Orange",
+              "value": "#ff3d00"
+            }
+          ]
+        },
+        "workbench.colorCustomizations": {
+          "sash.hoverBorder": "#fa1b49",
+          "statusBar.background": "#dd0531",
+          "statusBar.foreground": "#e7e7e7",
+          "statusBarItem.hoverBackground": "#fa1b49",
+          "statusBarItem.remoteBackground": "#dd0531",
+          "statusBarItem.remoteForeground": "#e7e7e7",
+          "activityBar.activeBackground": "#fa1b49",
+          "activityBar.background": "#fa1b49",
+          "activityBar.foreground": "#e7e7e7",
+          "activityBar.inactiveForeground": "#e7e7e799",
+          "activityBarBadge.background": "#155e02",
+          "activityBarBadge.foreground": "#e7e7e7",
+          "commandCenter.border": "#e7e7e799",
+          "titleBar.activeBackground": "#dd0531",
+          "titleBar.activeForeground": "#e7e7e7",
+          "titleBar.inactiveBackground": "#dd053199",
+          "titleBar.inactiveForeground": "#e7e7e799",
+          "tab.activeBorder": "#fa1b49"
+        },
         "[ruby]": {
           "editor": {
             "defaultFormatter": "Shopify.ruby-lsp",
@@ -100,7 +138,9 @@
         "esbenp.prettier-vscode",
         "streetsidesoftware.code-spell-checker",
         "marcoroth.stimulus-lsp",
-        "VisualStudioExptTeam.vscodeintellicode"
+        "johnpapa.vscode-peacock",
+        "VisualStudioExptTeam.vscodeintellicode",
+        "fabiospampinato.vscode-terminals"
       ]
     }
   }

.devcontainer/vue-container/devcontainer.json

@@ -25,6 +25,48 @@
           },
           "defaultFormatter": "esbenp.prettier-vscode"
         },
+        "peacock": {
+          "affectTabActiveBorder": true,
+          "remoteColor": "#42b883",
+          "favoriteColors": [
+            {
+              "name": "JavaScript Yellow",
+              "value": "#f9e64f"
+            },
+            {
+              "name": "Node Green",
+              "value": "#215732"
+            },
+            {
+              "name": "React Blue",
+              "value": "#61dafb"
+            },
+            {
+              "name": "Vue Green",
+              "value": "#42b883"
+            }
+          ]
+        },
+        "workbench.colorCustomizations": {
+          "activityBar.activeBackground": "#65c89b",
+          "activityBar.background": "#65c89b",
+          "activityBar.foreground": "#15202b",
+          "activityBar.inactiveForeground": "#15202b99",
+          "activityBarBadge.background": "#945bc4",
+          "activityBarBadge.foreground": "#e7e7e7",
+          "commandCenter.border": "#15202b99",
+          "sash.hoverBorder": "#65c89b",
+          "statusBar.background": "#42b883",
+          "statusBar.foreground": "#15202b",
+          "statusBarItem.hoverBackground": "#359268",
+          "statusBarItem.remoteBackground": "#42b883",
+          "statusBarItem.remoteForeground": "#15202b",
+          "tab.activeBorder": "#65c89b",
+          "titleBar.activeBackground": "#42b883",
+          "titleBar.activeForeground": "#15202b",
+          "titleBar.inactiveBackground": "#42b88399",
+          "titleBar.inactiveForeground": "#15202b99"
+        },
         "tailwindCSS": {
           "includeLanguages": {
             "plaintext": "html"
@@ -59,7 +101,9 @@
         "marcoroth.stimulus-lsp",
         "usernamehw.errorlens",
         "aaron-bond.better-comments",
-        "VisualStudioExptTeam.vscodeintellicode"
+        "VisualStudioExptTeam.vscodeintellicode",
+        "johnpapa.vscode-peacock",
+        "mariusalchimavicius.json-to-ts"
       ]
     }
   }

.github/workflows/test.yml

@@ -46,7 +46,20 @@ jobs:
       - name: Run Jest tests
         run: |
           cd frontend
-          yarn test:unit
+          yarn test:unit --ci --reporters=default --reporters=jest-junit
+
+      - name: Upload Jest Test Report
+        uses: actions/upload-artifact@v3
+        with:
+          name: jest-test-report
+          path: frontend/junit.xml
+      # - name: Display Jest Test Results
+      #   uses: dorny/test-reporter@v1
+      #   if: always()  # Run this step even if previous steps fail
+      #   with:
+      #     name: Jest Tests
+      #     path: frontend/junit.xml
+      #     reporter: jest-junit
 
       # - name: Start Rails server
       #   run: |
@@ -88,3 +101,23 @@ jobs:
           cd frontend
           yarn test:e2e
 
+      - name: Upload Playwright HTML Test Report
+        uses: actions/upload-artifact@v3
+        with:
+          name: playwright-report
+          path: frontend/playwright-report
+
+      - name: Upload Playwright Test Report
+        uses: actions/upload-artifact@v3
+        with:
+          name: playwright-report
+          path: frontend/playwright-tests.xml
+
+      # - name: Display Playwright Test Results
+      #   uses: dorny/test-reporter@v1
+      #   if: always()  # Run this step even if previous steps fail
+      #   with:
+      #     name: Playwright Tests
+      #     path: frontend/playwright-tests.xml
+      #     reporter: java-junit
+

README.md

@@ -26,17 +26,19 @@
 ### Componentes
 #### Endpoints - Gestion de Turnos (Shifts)
 - 1st Dropdown (Services)
-  - /api/company_services 
+  - GET /api/company_services 
 - 2nd Dropdown (Weeks)
-  - /api/company_services/:id/weeks 
+  - GET /api/company_services/:id/weeks 
 - Engineers Table
-  - /api/company_services/:id/engineers?week=YYYY-WW 
+  - GET /api/company_services/:id/engineers?week=YYYY-WW 
 - Shifts Table
-  - /api/company_services/:id/shifts?week=YYYY-WW
+  - GET /api/company_services/:id/shifts?week=YYYY-WW
 #### Endpoints - Gestion de Disponibilidad (Availability)
-- Los de gestion de turnos para el filtrado y llenado de semana
+- Dropdowns anteriores (gestion de turnos) para el filtrado y llenado de semana
+- Boton Editar Disponibilidad: Consultar Disponibilidad de ingenieros
+  - GET /api/company_services/:id/engineers/availability?week=YYYY-WW
 - Updates Engineer Availability 
-  - /api/company_services/:id/engineers/availability
+  - POST /api/company_services/:id/engineers/availability
     - week
     - availability (array)
       - engineer_id
@@ -99,3 +101,12 @@ docker-compose -f .devcontainer/docker-compose.yml up
 ```
 
 - navegar a 0.0.0.0:8080 para empezar a usar la app
+
+
+### Screenshots
+#### Ejecución
+![figma-1](./1-shift_management.png)
+
+#### Figma
+![figma-1](./shift-availability-management-figma.jpg)
+![figma-2](./shift-availability-management-figma-p2.jpg)

frontend/e2e/checkCompanyServiceShifts.spec.js

@@ -61,7 +61,7 @@ test.describe("Check Company Service Shifts", () => {
       ).toHaveText(`${timeBlock.start} - ${timeBlock.end}`);
       await expect(
         specificTimeBlock.locator(
-          `[aria-label="Engineer Assigned ${timeBlock.engineer}"]`
+          `[aria-label="Assigned Engineer ${timeBlock.engineer}"]`
         )
       ).toHaveText(timeBlock.engineer);
     }
@@ -75,7 +75,7 @@ test.describe("Check Company Service Shifts", () => {
       unassignedTimeBlock.locator('[aria-label="Hour 09:00"]')
     ).toHaveText("09:00 - 10:00");
     await expect(
-      unassignedTimeBlock.locator('[aria-label="Engineer Assigned ⚠"]')
+      unassignedTimeBlock.locator('[aria-label="Assigned Engineer ⚠"]')
     ).toHaveText("⚠");
   });
 });

frontend/e2e/editAvailability.spec.js

@@ -0,0 +1,38 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Shift and Availability Table", () => {
+  test("should render the correct availability and save it", async ({
+    page,
+  }) => {
+    await page.goto("/");
+
+    // Select a service
+    await page.selectOption('select[aria-label="Selecciona un Servicio"]', {
+      label: "Service A",
+    });
+
+    // Select a week
+    await page.selectOption('select[aria-label="Selecciona una Semana"]', {
+      label: "Semana 32 del 2024",
+    });
+
+    await page.click('button:has-text("Editar Disponibilidad")');
+
+    // Check the rendering of the shift table
+    await expect(
+      page.locator('[aria-label="Day Lunes 05 de Agosto"]')
+    ).toBeVisible();
+
+    // Check the rendering of checkboxes
+    await expect(
+      page.locator('[aria-label="Availability Monday 09:00 Engineer 1"]')
+    ).toBeVisible();
+
+    // Check some checkboxes
+    await page.check('[aria-label="Availability Monday 09:00 Engineer 1"]');
+    await page.check('[aria-label="Availability Monday 10:00 Engineer 2"]');
+
+    // Save availability
+    await page.click('button:has-text("Ver Turnos")');
+  });
+});

frontend/jest.config.js

@@ -1,4 +1,14 @@
 module.exports = {
   preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
   testPathIgnorePatterns: [".*\\.page\\.ts$"],
+  reporters: [
+    "default",
+    [
+      "jest-junit",
+      {
+        outputDirectory: "./test-reports",
+        outputName: "junit.xml",
+      },
+    ],
+  ],
 };

frontend/package.json

@@ -37,6 +37,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.0.3",
     "jest": "^27.0.5",
+    "jest-junit": "^16.0.0",
     "postcss": "^8.4.40",
     "prettier": "^2.4.1",
     "start-server-and-test": "^2.0.5",

frontend/playwright.config.js

@@ -10,8 +10,10 @@ export default defineConfig({
   expect: {
     timeout: 5000,
   },
-  // reporter: [
-  //   ['list'],
-  //   ['html', { outputFile: 'e2e/test-results/report.html' }],
-  // ],
+  reporter: [
+    ["list"],
+    ["junit", { outputFile: "playwright-tests.xml" }],
+    ["html", { outputFolder: "playwright-report", open: "never" }],
+    //   ['html', { outputFile: 'e2e/test-results/report.html' }],
+  ],
 });

frontend/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app" class="max-w-xl mx-auto mt-10">
+  <div id="app" class="w-full mx-auto mt-10">
     <ShiftManagement />
   </div>
 </template>