Merge pull request #376 from ScienceForChange/refactor/CRUD/studyzone

Refactor/crud/studyzone
ScienceForChange · Nov 14, 2024 · 9e8df1a · 9e8df1a
2 parents 407b80d + bb52230
commit 9e8df1a
Show file tree

Hide file tree

Showing 10 changed files with 553 additions and 235 deletions.
diff --git a/src/app/modules/admin/study-zone/components/study-zone-form/study-zone-form.component.html b/src/app/modules/admin/study-zone/components/study-zone-form/study-zone-form.component.html
diff --git a/src/app/modules/admin/study-zone/components/study-zone-form/study-zone-form.component.scss b/src/app/modules/admin/study-zone/components/study-zone-form/study-zone-form.component.scss
@@ -24,3 +24,17 @@
   }
 }
 
+.step-header{
+  position: sticky;
+  top: -15px;
+  background-color: white;
+  z-index: 10;
+  border-bottom: 1px solid #e0e0e0;
+}
+img{
+  width: 100px;
+  height: 100px;
+  border-radius: 8px;
+  object-fit: cover; 
+  object-position: center;
+}
diff --git a/src/app/modules/admin/study-zone/components/study-zone-form/study-zone-form.component.ts b/src/app/modules/admin/study-zone/components/study-zone-form/study-zone-form.component.ts
@@ -1,3 +1,4 @@
+import { AuthService } from './../../../../../services/auth/auth.service';
 import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
 import {
   AbstractControl,
@@ -18,6 +19,7 @@ import { StudyZoneMapService } from '../../service/study-zone-map.service';
 
 import compareObjectsValues from '../../../../../../utils/compareObjects';
 import { TranslateService } from '@ngx-translate/core';
+import { User } from '../../../../../models/observations';
 
 @Component({
   selector: 'app-study-zone-form',
@@ -29,14 +31,15 @@ export class StudyZoneFormComponent {
   private studyZoneService = inject(StudyZoneService);
   private studyZoneMapService = inject(StudyZoneMapService);
   private translations = inject(TranslateService);
+  private authService = inject(AuthService);
 
   @Input() visible: boolean = false;
   @Output() toggleStudyZoneForm: EventEmitter<void> = new EventEmitter<void>();
 
   private polygon: any = null;
 
   studyZoneForm: FormGroup = new FormGroup({
-    user_id: new FormControl('', [Validators.required]),
+    user_id: new FormControl(),
     name: new FormControl('', [Validators.required]),
     description: new FormControl('', [Validators.required]),
     conclusion: new FormControl(''),

diff --git a/src/app/modules/admin/study-zone/components/study-zone-list/study-zone-list.component.html b/src/app/modules/admin/study-zone/components/study-zone-list/study-zone-list.component.html
@@ -34,11 +34,29 @@ <h2>{{ "admin.studyZone.list.title" | translate }}</h2>
         <ng-template [ngxPermissionsOnly]="['UPDATE-STUDY-ZONES','DELETE-STUDY-ZONES']">
           <td class="flex justify-content-end gap-2">
             <ng-template [ngxPermissionsOnly]="['UPDATE-STUDY-ZONES']">
-              <button pButton type="button" [icon]="studyZone.is_visible ? 'pi pi-times' : 'pi pi-check'" (click)="toggleEnableStudyZone(studyZone.id)"></button>
-              <button pButton type="button" class="p-button-warning" icon="pi pi-pencil" (click)="editStudyZone(studyZone.id)"></button>
+
+              <button pButton 
+              type="button" 
+              [ngClass]="{ 'p-button-secondary' : studyZone.is_visible }" 
+              [icon]="studyZone.is_visible ? 'pi pi-eye-slash' : 'pi pi-eye'" 
+              [pTooltip]="(studyZone.is_visible ? 'studyzones.show' : 'studyzones.hide') | translate" 
+              tooltipPosition="top" 
+              (click)="toggleEnableStudyZone(studyZone.id)"
+              ></button>
+
+              <button pButton 
+              type="button" 
+              class="p-button-warning" 
+              icon="pi pi-pencil" 
+              [pTooltip]="'studyzones.edit' | translate" 
+              tooltipPosition="top" 
+              (click)="editStudyZone(studyZone.id)"
+              >
+              </button>
+
             </ng-template>
             <ng-template [ngxPermissionsOnly]="['DELETE-STUDY-ZONES']">
-              <button pButton type="button" class="p-button-danger" icon="pi pi-trash" (click)="confirmDeleteStudyZone($event, studyZone.id)"></button>
+              <button pButton type="button" class="p-button-danger" icon="pi pi-trash" [pTooltip]="'studyzones.delete' | translate" tooltipPosition="top" (click)="confirmDeleteStudyZone($event, studyZone.id)"></button>
             </ng-template>
           </td>
         </ng-template>

diff --git a/src/app/modules/admin/study-zone/page/study-zone.component.html b/src/app/modules/admin/study-zone/page/study-zone.component.html
@@ -14,7 +14,8 @@ <h3 class="mb-0">{{ "studyzones.title" | translate }}</h3>
       <app-study-zone-list (toggleStudyZoneForm)="toggleStudyZoneForm()" />
     </div>
   }
-  @if(studyZoneFormVisible()){
+
+  @if(studyZoneFormVisible()) {
     <app-study-zone-form [visible]="studyZoneFormVisible()" (toggleStudyZoneForm)="toggleStudyZoneForm()"/>
   }
   @if(visibleDialog) {

diff --git a/src/app/modules/admin/study-zone/study-zone.module.ts b/src/app/modules/admin/study-zone/study-zone.module.ts
@@ -16,6 +16,7 @@ import { DividerModule } from 'primeng/divider';
 import { TableModule } from 'primeng/table';
 import { ConfirmPopupModule } from 'primeng/confirmpopup';
 import { ToastModule } from 'primeng/toast';
+import { StepperModule } from 'primeng/stepper';
 
 
 import { StudyZoneComponent } from './page/study-zone.component';
@@ -51,7 +52,8 @@ import { MenubarModule } from 'primeng/menubar';
     TableModule,
     ToastModule,
     MenubarModule,
-    NgxPermissionsModule
+    NgxPermissionsModule,
+    StepperModule
   ],
 })
 export class StudyZoneModule {}
diff --git a/src/assets/i18n/ca.json b/src/assets/i18n/ca.json
@@ -413,7 +413,13 @@
           "createDetail": "La zona d'estudi s'ha creat correctament",
           "errorSummary": "Ha succeït un error",
           "errorDetail": "No s'ha pogut crear la zona d'estudi,tenca el formulari i torna a intentar-ho"
-        }
+        },
+        "first-step": "Informació bàsica",
+        "second-step": "Arxius",
+        "third-step": "Col·laboradors",
+        "file": "Arxiu",
+        "collaborator": "Col·laborador",
+        "collaborators": "Col·laboradors"
       },
       "list": {
         "title": "Llistat de zones d'estudi",
@@ -518,8 +524,11 @@
     "title": "Observacions",
     "show": "Veure info"
   },
-  "studyZones": "Zones d'estudi",
   "studyzones": {
-    "title": "Zones d'Estudi"
+    "title": "Zones d'Estudi",
+    "edit": "Editar",
+    "delete": "Esborrar",
+    "show": "Mostrar",
+    "hide": "Amagar"
   }
 }
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -409,7 +409,13 @@
           "createDetail": "Study area has been successfully created",
           "errorSummary": "An error has occurred",
           "errorDetail": "Study area could not be created, please close the form and try again"
-        }
+        },
+        "first-step": "Basic information",
+        "second-step": "Files",
+        "third-step": "Collaborators",
+        "file": "File",
+        "collaborator": "Collaborator",
+        "collaborators": "Collaborators"
       },
       "list": {
         "title": "List of study areas",
@@ -515,6 +521,10 @@
   },
   "studyZones": "Study Zones",
   "studyzones": {
-    "title": "Study Zones"
+    "title": "Study Zones",
+    "edit": "Editar",
+    "delete": "Delete",
+    "show": "Show",
+    "hide": "Hide"
   }
 }
diff --git a/src/assets/i18n/es.json b/src/assets/i18n/es.json
@@ -383,7 +383,7 @@
         "cancelDrawing": "Cancelar"
       },
       "form": {
-        "title": "Informació de la zona d'estudi",
+        "title": "Información de la zona de estudio",
         "name": "Nombre",
         "description": "Descripción",
         "conclusion": "Conclusión",
@@ -410,7 +410,13 @@
           "createDetail": "La zona de estudio se ha creado correctamente",
           "errorSummary": "Ha sucedido un error",
           "errorDetail": "No se ha podido crear la zona de estudio, cierra el formulario y vuelve a intentarlo"
-        }
+        },
+        "first-step": "Información básica",
+        "second-step": "Archivos",
+        "third-step": "Colaboradores",
+        "file": "Archivo",
+        "collaborator": "Colaborador",
+        "collaborators": "Colaboradores"
       },
       "list": {
         "title": "Listado de Zonas de Estudio",
@@ -517,6 +523,10 @@
   },
   "studyZones": "Zonas de estudio",
   "studyzones": {
-    "title": "Zonas de Estudio"
+    "title": "Zonas de Estudio",
+    "edit": "Editar",
+    "delete": "Borrar",
+    "show": "Mostrar",
+    "hide": "Ocultar"
   }
 }
diff --git a/src/assets/layout/styles/theme/bootstrap4-light-blue/theme.css b/src/assets/layout/styles/theme/bootstrap4-light-blue/theme.css
@@ -7284,6 +7284,176 @@
     font-feature-settings: var(--font-feature-settings, normal);
     font-size: 1rem;
   }
+
+  .p-stepper .p-stepper-nav {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow-x: auto;
+  }
+
+  .p-stepper-vertical .p-stepper-nav {
+    flex-direction: column;
+  }
+
+  .p-stepper-header {
+    position: relative;
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+  }
+  .p-stepper-header:last-of-type {
+    flex: initial;
+  }
+
+  .p-stepper-header .p-stepper-action {
+    border: 0 none;
+    display: inline-flex;
+    align-items: center;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .p-stepper-header .p-stepper-action:focus-visible {
+    outline: 1px solid var(--p-focus-ring-color);
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+
+  .p-stepper.p-stepper-readonly .p-stepper-header {
+    cursor: auto;
+  }
+
+  .p-stepper-header.p-highlight .p-stepper-action {
+    cursor: default;
+  }
+
+  .p-stepper-title {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+
+  .p-stepper-number {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .p-stepper-separator {
+    flex: 1 1 0;
+  }
+
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #8b7d64;
+    border: 1px solid #f0ede2;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #334155;
+    font-weight: 500;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 1px solid var(--p-focus-ring-color);
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #fff8ef;
+    color: #d8881d;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #334155;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 1px solid var(--p-focus-ring-color);
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #f6a13b;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 0.875rem 1.125rem 1.125rem 1.125rem;
+    color: #334155;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #f0ebe2;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #334155;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.4rem);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #f6a13b;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+
 }
+
 /* Vendor extensions to the designer enhanced bootstrap compatibility */
 /* Customizations to the designer theme should be defined here */