chore: code tidying

e-picsa · Jan 19, 2024 · 81f772f · 81f772f
1 parent 3839dbc
commit 81f772f
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 22 deletions.
diff --git a/...tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.html b/...tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.html
@@ -19,7 +19,11 @@ <h2>{{ 'Calendar Time' | translate }}</h2>
     <div class="calender-box">
       <mat-form-field>
         <mat-label>{{ 'Start Month ' | translate }} :</mat-label>
-        <mat-select id="startMonth" #monthSelect (change)="setTimePeriod(monthSelect.value, totalMonths.value)">
+        <mat-select
+          id="startMonth"
+          #monthSelect
+          (selectionChange)="setTimePeriod(monthSelect.value, totalMonths.value)"
+        >
           <mat-option *ngFor="let month of months; index as i" [value]="i">{{ month.label | translate }}</mat-option>
         </mat-select>
       </mat-form-field>
@@ -39,27 +43,18 @@ <h2>{{ 'Calendar Time' | translate }}</h2>
         </mat-form-field>
         <!-- error message outside form field as not bound to specific controller but more a general error -->
         @if(form.controls.timeAndConditions.touched && form.controls.timeAndConditions.errors){
-        <mat-error>{{ 'Please enter the required number of months' | translate }}</mat-error>
+        <mat-error>{{ 'Please enter start and total months' | translate }}</mat-error>
         }
       </div>
     </div>
-
-    <h2>{{ 'Weather' | translate }}</h2>
-    <div class="monthsGrid" formArrayName="timeAndConditions">
-      <!-- Loop over nested time and conditions forms -->
-      @for (childForm of form.controls.timeAndConditions.controls; track $index) {
-      <div class="month" [formGroup]="childForm">
-        <mat-form-field>
-          <mat-label>{{ childForm.controls.month.value | translate }}</mat-label>
-          <input matInput [placeholder]="'wet,dry...' | translate" type="text" formControlName="weather" />
-          <mat-error>{{ 'Please enter the weather' | translate }}</mat-error>
-        </mat-form-field>
-      </div>
+    <div class="calendar-summary">
+      @for (item of formValue.timeAndConditions; track $index) {
+      <div>{{ monthsByID[item.month].label | translate }}</div>
       }
     </div>
   </div>
   <div class="submit-button">
-    <button class="" mat-button mat-raised-button (click)="onSubmition()" color="primary">
+    <button class="" mat-button mat-raised-button (click)="handleSubmit()" color="primary">
       {{ 'Create calender ' | translate }}
     </button>
   </div>

diff --git a/...tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.scss b/...tools/seasonal-calendar-tool/src/app/pages/create-calendar/create-calendar.component.scss
@@ -3,13 +3,19 @@
   gap: 2rem;
 }
 
-.monthsGrid {
-  display: grid;
-  gap: 1rem;
-  grid-template-columns: repeat(3, 1fr);
-  max-width: 800px;
-}
 .submit-button {
   margin-top: 2rem;
   margin-bottom: 2rem;
 }
+.calendar-summary {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  & > div {
+    padding: 8px;
+    border-radius: 4px;
+    width: 80px;
+    background: var(--color-light);
+    height: 40px;
+  }
+}
diff --git a/apps/picsa-tools/seasonal-calendar-tool/src/app/services/calendar.form.service.ts b/apps/picsa-tools/seasonal-calendar-tool/src/app/services/calendar.form.service.ts
@@ -63,7 +63,10 @@ export class SeasonCalendarFormService {
    * https://blog.angular-university.io/angular-form-array/
    * */
   private generateTimeAndConditionsControl(months: string[] = []) {
-    const formArray = this.fb.array<FormGroup<{ month: FormControl<string>; weather: FormControl<string> }>>([]);
+    const formArray = this.fb.array<FormGroup<{ month: FormControl<string>; weather: FormControl<string> }>>(
+      [],
+      Validators.required // use required validator to ensure array non-zero length
+    );
     for (const month of months) {
       const group = this.fb.nonNullable.group({ month, weather: '' });
       formArray.push(group);