library admin: improvement

ui/src/app/records/custom-editor/libraries/library-form.service.ts

@@ -35,17 +35,41 @@ export class LibraryFormService {
           Validators.required
         ]
       }],
-      opening_hours: this.fb.array(this.createOpeningHours())
+      opening_hours: this.fb.array([])
     });
+    this.initializeOpeningHours();
   }
 
-  createOpeningHours() {
+  initializeOpeningHours(openingHours = []) {
     const days = Object.keys(WeekDays);
-    const openings = [];
+    const hours = this.form.get('opening_hours');
     for (let step = 0; step < 7; step++) {
-      openings.push(this.buildOpeningHours(false, days[step], this.fb.array([this.buildTimes()])));
+      hours.push(this.buildOpeningHours(
+        false,
+        days[step],
+        this.fb.array([])
+      ));
+    }
+    this.setOpeningHours(openingHours);
+  }
+
+  setOpeningHours(openingHours = []) {
+    for (let step = 0; step < 7; step++) {
+      const atimes = this.getTimesByDayIndex(step);
+      const day = openingHours[step];
+      if (day !== undefined) {
+        if (day.times.length > 0) {
+          atimes.removeAt(0);
+          const hours = this.form.get('opening_hours').get(String(step));
+          hours.get('is_open').setValue(day.is_open);
+          day.times.forEach(time => {
+            atimes.push(this.buildTimes(time.start_time, time.end_time));
+          });
+        }
+      } else {
+        atimes.push(this.buildTimes('00:00', '00:00'));
+      }
     }
-    return openings;
   }
 
   buildOpeningHours(is_open, day, times): FormGroup {
@@ -79,9 +103,6 @@ export class LibraryFormService {
 
   reset() {
     this.build();
-    // TODO: replace by something like this
-    // this.form.reset();
-    // this.createOpeningHours();
   }
 
   populate(library: Library) {
@@ -90,8 +111,8 @@ export class LibraryFormService {
       address:  library.address,
       email: library.email,
       code: library.code,
-      opening_hours: library.opening_hours
     });
+    this.setOpeningHours(library.opening_hours);
   }
 
   setId(id) { this.form.value.id = id; }

ui/src/app/records/custom-editor/libraries/library.component.html

@@ -67,7 +67,7 @@ <h1 translate>Library</h1>
         <div [formGroupName]="i">
           <div class="form-group row">
             <div class="col-2">
-              <ui-switch formControlName="is_open" [checked]="day.value.is_open" size="small" defaultBgColor="red"></ui-switch>
+              <ui-switch formControlName="is_open" [checked]="day.value.is_open" size="small" defaultBgColor="red" class="align-middle"></ui-switch>
               {{ day.value.day | translate | titlecase }}
             </div>
             <div class="col-10">

ui/src/app/records/custom-editor/libraries/library.ts

@@ -55,6 +55,7 @@ export class Library {
   update(obj) {
     Object.assign(this, obj);
     this.cleanOpeningHours(this.opening_hours);
+    this.reorderOpeningHours(this.opening_hours);
   }
 
   createOpeningHours() {
@@ -88,6 +89,15 @@ export class Library {
     });
   }
 
+  reorderOpeningHours(openingHours) {
+    openingHours.forEach(opening => {
+      if (opening.times.length > 1) {
+        opening.times.sort((a, b) =>
+          moment(a.start_time, 'HH:mm').diff(moment(b.start_time, 'HH:mm')));
+      }
+    });
+  }
+
   deleteException(index) {
     this.exception_dates.splice(index, 1);
   }

ui/src/app/shared/time-validator.ts

@@ -24,11 +24,17 @@ export class TimeValidator {
         let isRangeLessThan = false;
         const times = <FormArray>control.get('times');
         if (control.get('is_open').value && times.value.length > 1) {
-          const firstEndTime = times.at(0).get('end_time');
-          const lastStartTime = times.at(1).get('start_time');
-          const firstEndDate = moment(firstEndTime.value, 'HH:mm');
-          const lastStartDate = moment(lastStartTime.value, 'HH:mm');
-          isRangeLessThan = lastStartDate.diff(firstEndDate) <= 0;
+          const firstStartDate = moment(times.at(0).get('start_time').value, 'HH:mm');
+          const firstEndDate = moment(times.at(0).get('end_time').value, 'HH:mm');
+          const lastStartDate = moment(times.at(1).get('start_time').value, 'HH:mm');
+          const lastEndDate = moment(times.at(1).get('end_time').value, 'HH:mm');
+          if (firstStartDate > lastStartDate) {
+            isRangeLessThan = firstStartDate.diff(lastStartDate) <= 0
+              || firstStartDate.diff(lastEndDate) <= 0;
+          } else {
+            isRangeLessThan = lastStartDate.diff(firstEndDate) <= 0
+              || lastStartDate.diff(firstEndDate) <= 0;
+          }
         }
         return isRangeLessThan ? { rangeLessThan: { value: isRangeLessThan} } : null;
       }