library exceptions date: improvement

* BETTER Change the layout of the fields in the repeat area * FIX closes rero#155 rero#223 * Change the switch by radio buttons on the exception type and status Signed-off-by: Bertrand Zuchuat <[email protected]>
Garfield-fr · Apr 2, 2019 · eec1105 · eec1105
1 parent f891c7d
commit eec1105
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 36 deletions.
diff --git a/.../records/custom-editor/libraries/exception-dates-edit/exception-dates-edit.component.html b/.../records/custom-editor/libraries/exception-dates-edit/exception-dates-edit.component.html
@@ -1,7 +1,7 @@
 <div class="modal-body">
     <form [formGroup]="exceptionForm" (ngSubmit)="onSubmit()">
     <div class="form-group">
-      <h3 class="modal-title" translate>Edit</h3>
+      <h3 class="modal-title" translate>Exception</h3>
     </div>
     <!-- Title -->
     <div class="form-group row">
@@ -21,15 +21,18 @@ <h3 class="modal-title" translate>Edit</h3>
     </div>
     <!-- Date -->
     <div class="form-group row">
-      <label for="title" class="col-sm-2 col-form-label" translate>Days period</label>
+      <label for="title" class="col-sm-2 col-form-label">&nbsp;</label>
       <div class="col-sm-10">
-        <ui-switch
-          formControlName="is_period"
-          [checked]="is_period"
-          size="small"
-          defaultBgColor="red"
-          (change)="onPeriodChange($event)">
-        </ui-switch>
+        <div class="form-check-inline">
+          <label class="form-check-label mr-2" translate>
+            <input type="radio" class="form-check-input" name="day-period" value="false" [checked]="is_period.value === false" (change)="onPeriodChange($event)">
+            day
+          </label>
+          <label class="form-check-label" translate>
+            <input type="radio" class="form-check-input" name="day-period" value="true" [checked]="is_period.value === true" (change)="onPeriodChange($event)">
+            period
+          </label>
+        </div>
       </div>
     </div>
     <!-- one Date -->
@@ -59,23 +62,19 @@ <h3 class="modal-title" translate>Edit</h3>
         </div>
       </div>
       <div class="col-sm-2 mt-2">
-        <ui-switch
-          formControlName="is_open"
-          [checked]="is_open"
-          size="small"
-          defaultBgColor="red"
-        >
-        </ui-switch>
+        &nbsp;
       </div>
       <div class="col-sm-10 mt-2">
-        <span class="mb-2" *ngIf="exceptionForm.value.is_open">
-          {{ 'Opened on' | translate }}
-          {{ exceptionForm.value.date | date : 'EEEE' | lowercase | translate }}
-        </span>
-        <span class="mb-2" *ngIf="!exceptionForm.value.is_open">
-          {{ 'Closed on' | translate }}
-          {{ exceptionForm.value.date | date : 'EEEE' | lowercase | translate }}
-        </span>
+        <div class="form-check-inline">
+          <label class="form-check-label mr-2" translate>
+            <input type="radio" class="form-check-input" name="date-status" value="false" [checked]="is_open.value === false" (change)="onDateStatusChange($event)">
+            close
+          </label>
+          <label class="form-check-label" translate>
+            <input type="radio" class="form-check-input" name="date-status" value="true" [checked]="is_open.value === true" (change)="onDateStatusChange($event)">
+            open
+          </label>
+        </div>
         <div class="mb-2">
           <em *ngIf="exceptionForm.value && exceptionForm.value.is_open" translate>
             Change the default opening hours for this day
@@ -181,7 +180,7 @@ <h3 class="modal-title" translate>Edit</h3>
     </div>
     <!-- Repeat -->
     <div class="form-group row">
-      <label for="repeat" class="col-sm-2 col-form-label required" translate>Repeat</label>
+      <label for="repeat" class="col-sm-2 col-form-label required" translate>Repetition</label>
       <div class="col-sm-10">
         <ui-switch
           formControlName="repeat"
@@ -191,13 +190,13 @@ <h3 class="modal-title" translate>Edit</h3>
           (change)="onRepeatChange($event)">
         </ui-switch>
         <div class="ml-2 d-inline" *ngIf="repeat.value">
-          <select formControlName="period">
-            <option value="daily" translate>daily</option>
-            <option value="weekly" translate>weekly</option>
-            <option value="monthly" translate>monthly</option>
-            <option value="yearly" translate>yearly</option>
+          <label for="interval" class="col-form-label required" translate>Repeat each</label>
+          <input type="number" min="1" step="1" class="ml-2 col-2" formControlName="interval">
+          <select class="ml-1" formControlName="period">
+            <option value="weekly" translate>week</option>
+            <option value="monthly" translate>month</option>
+            <option value="yearly" translate>year</option>
           </select>
-          <input type="number" min="1" step="1" class="ml-2" formControlName="interval">
           <div *ngIf="interval.invalid && (interval.dirty || interval.touched)" class="text-danger pt-1">
             <div *ngIf="interval.errors.required" translate>
               Interval is required.

diff --git a/...pp/records/custom-editor/libraries/exception-dates-edit/exception-dates-edit.component.ts b/...pp/records/custom-editor/libraries/exception-dates-edit/exception-dates-edit.component.ts
@@ -1,8 +1,7 @@
-import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { BsModalRef } from 'ngx-bootstrap/modal';
 import { BsLocaleService } from 'ngx-bootstrap/datepicker';
 import { FormArray, FormGroup } from '@angular/forms';
-import * as moment from 'moment';
 import { Subject } from 'rxjs';
 
 import { LibraryExceptionFormService } from '../library-exception-form.service';
@@ -45,16 +44,24 @@ export class ExceptionDatesEditComponent implements OnInit {
     this.bsModalRef.hide();
   }
 
-  onPeriodChange(period) {
-    this.form.is_period.setValue(period);
-    if (period) {
+  onPeriodChange(event) {
+    const target = event.target;
+    const value = target.value === 'true';
+    this.form.is_period.setValue(value);
+    if (value) {
       for (let i = 0; i < this.form.times.length; i++) {
         this.form.times.removeAt(i);
       }
       this.form.is_open.setValue(false);
     }
   }
 
+  onDateStatusChange(event) {
+    const target = event.target;
+    const value = target.value === 'true';
+    this.form.is_open.setValue(value);
+  }
+
   onRepeatChange(repeat) {
     if (repeat) {
       this.form.interval.setValue(1);