LP1816475: more intuitive behavior of date and time pickers
authorJane Sandberg <sandbej@linnbenton.edu>
Sat, 6 Apr 2019 20:47:22 +0000 (13:47 -0700)
committerJane Sandberg <sandbej@linnbenton.edu>
Wed, 17 Apr 2019 20:41:53 +0000 (13:41 -0700)
Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>
Open-ILS/src/eg2/src/app/staff/booking/create-reservation.component.html
Open-ILS/src/eg2/src/app/staff/booking/create-reservation.component.ts
Open-ILS/src/eg2/src/app/staff/booking/resource-type-combobox.component.ts

index 9e74df3..873a41f 100644 (file)
@@ -42,7 +42,7 @@
       <div class="input-group-prepend">
         <label class="input-group-text" for="ideal-reservation-date" i18n>Reservation date</label>
       </div>
-      <eg-date-select *ngIf="!multiday" #dateLimiter domId="ideal-reservation-date" (onChangeAsDate)="handleDateChange($event)"></eg-date-select>
+      <eg-date-select *ngIf="!multiday" #dateLimiter domId="ideal-reservation-date" (onChangeAsDate)="handleDateChange($event)" [initialDate]="today"></eg-date-select>
       <eg-daterange-select *ngIf="multiday" #dateRangeLimiter></eg-daterange-select>
     </div>
   </div>
@@ -59,7 +59,7 @@
       <div class="input-group-prepend">
         <label class="input-group-text" for="ideal-resource-type" i18n>Resource type</label>
       </div>
-      <eg-resource-type-combobox domId="ideal-resource-type" (typeChanged)="handleResourceTypeChange($event)"></eg-resource-type-combobox>
+      <eg-resource-type-combobox #rt domId="ideal-resource-type" (typeChanged)="handleResourceTypeChange($event)"></eg-resource-type-combobox>
     </div>
   </div>
 </div>
@@ -84,7 +84,7 @@
           <span class="input-group-prepend">
             <label class="input-group-text" for="start-time" i18n>Start time</label>
           </span>
-          <ngb-timepicker [(ngModel)]="startOfDay"></ngb-timepicker>
+          <ngb-timepicker [(ngModel)]="startOfDay" (ngModelChange)="fetchData()" [meridian]="true"></ngb-timepicker>
         </span>
       </li>
       <li class="list-group-item">
@@ -92,7 +92,7 @@
           <span class="input-group-prepend">
             <label class="input-group-text" for="end-time" i18n>End time</label>
           </span>
-          <ngb-timepicker [(ngModel)]="endOfDay"></ngb-timepicker>
+          <ngb-timepicker [(ngModel)]="endOfDay" (ngModelChange)="fetchData()" [meridian]="true"></ngb-timepicker>
         </span>
       </li>
       <li class="list-group-item">
index ab9cbf6..d454ea1 100644 (file)
@@ -13,6 +13,7 @@ import {GridDataSource,  GridRowFlairEntry} from '@eg/share/grid/grid';
 import {IdlObject} from '@eg/core/idl.service';
 import {NetService} from '@eg/core/net.service';
 import {PcrudService} from '@eg/core/pcrud.service';
+import {ResourceTypeComboboxComponent} from './resource-type-combobox.component';
 import {ServerStoreService} from '@eg/core/server-store.service';
 import {ToastService} from '@eg/share/toast/toast.service';
 
@@ -35,6 +36,7 @@ export class CreateReservationComponent implements OnInit, AfterViewInit {
     patronId: number;
     resourceBarcode: string;
     resourceId: number;
+    resourceTypeId: number;
 
     startOfDay: NgbTimeStruct = {hour: 9, minute: 0, second: 0};
     endOfDay: NgbTimeStruct = {hour: 17, minute: 0, second: 0};
@@ -57,6 +59,9 @@ export class CreateReservationComponent implements OnInit, AfterViewInit {
     @ViewChildren('dateRangeLimiter') dateRangeLimiters: QueryList<DateRangeSelectComponent>;
     @ViewChildren('scheduleGrid') scheduleGrids: QueryList<GridComponent>;
     @ViewChild('newDialog') newDialog: FmRecordEditorComponent;
+    @ViewChild('rt') rt: ResourceTypeComboboxComponent;
+
+    today = new Date();
 
     constructor(
         private auth: AuthService,
@@ -93,7 +98,7 @@ export class CreateReservationComponent implements OnInit, AfterViewInit {
                 .pipe(single())
                 .subscribe((res) => {
                     this.resourceId = res.id();
-                    this.fetchData('resource', this.resourceId);
+                    this.fetchData();
                 }, (err) => {
                     this.pcrud.search('acp',
                         {'barcode' : this.resourceBarcode}, {'limit': 1})
@@ -104,7 +109,7 @@ export class CreateReservationComponent implements OnInit, AfterViewInit {
                         this.auth.token(), [item.id()])
                        .subscribe((response) =>  {
                             this.toast.info('Made this barcode bookable');
-                            this.resourceId = response['id'];
+                            this.resourceId = response['brsrc'][0][0];
                         }, (error) => {
                             this.toast.danger('Cannot make this barcode bookable');
                         })
@@ -136,7 +141,7 @@ export class CreateReservationComponent implements OnInit, AfterViewInit {
                     if (granularity != null) { this.granularity = granularity; }
                 });
             }
-            this.scheduleGrids.forEach((g) => g.reload());
+            this.fetchData();
         };
 
         this.handleDateChange = ($event: Date) => {
@@ -152,7 +157,7 @@ export class CreateReservationComponent implements OnInit, AfterViewInit {
                     hour: ('00' === endArray[0]) ? 17 : +endArray[0],
                     minute: +endArray[1],
                     second: 0};
-                this.scheduleGrids.forEach((g) => g.reload());
+                this.fetchData();
             });
         };
 
@@ -189,17 +194,18 @@ export class CreateReservationComponent implements OnInit, AfterViewInit {
         return this.newDialog.open({size: 'lg'}).then(
             ok => {
                 this.toast.success('Reservation successfully created'); // TODO: needs i18n, pluralization
-                this.scheduleGrids.forEach((g) => g.reload());
+                this.fetchData();
             },
             err => {}
         );
     }
-    handleResourceTypeChange(event: ComboboxEntry) {
+    handleResourceTypeChange($event: ComboboxEntry) {
         this.resourceBarcode = null;
         this.resourceId = null;
+        this.resourceTypeId = $event.id;
         this.attributes = [];
-        if (event.id) {
-            this.pcrud.search('bra', {resource_type : event.id}, {
+        if (this.resourceTypeId) {
+            this.pcrud.search('bra', {resource_type : this.resourceTypeId}, {
                 order_by: 'name ASC',
                 flesh: 1,
                 flesh_fields: {'bra' : ['valid_values']}
@@ -208,18 +214,20 @@ export class CreateReservationComponent implements OnInit, AfterViewInit {
                 }, err => {
                     console.debug(err);
                 }, () => {
-                    this.fetchData('type', event.id);
+                    this.fetchData();
                 });
         }
     }
 
-    fetchData (limiter: 'resource' | 'type', id: number) {
+    fetchData () {
         this.resources = [];
         let where = {};
-        if ('type' === limiter) {
-            where = {type: id};
-        } else if ('resource' === limiter) {
+       if (this.resourceId) {
             where = {id: this.resourceId};
+        } else if (this.resourceTypeId) {
+            where = {type: this.resourceTypeId};
+        } else {
+            return;
         }
         this.scheduleSource.data = [];
         this.pcrud.search('brsrc', where, {
@@ -265,3 +273,4 @@ export class CreateReservationComponent implements OnInit, AfterViewInit {
 
 }
 
+
index fe12178..b3d63c0 100644 (file)
@@ -1,10 +1,12 @@
-import { Component, EventEmitter, OnInit, Input, Output } from '@angular/core';
+import {Component, EventEmitter, OnInit, Input, Output, ViewChild} from '@angular/core';
 import {PcrudService} from '@eg/core/pcrud.service';
+import {ComboboxComponent} from '@eg/share/combobox/combobox.component';
 import {ComboboxEntry} from '@eg/share/combobox/combobox.component';
 
 @Component({
     selector: 'eg-resource-type-combobox',
     template: `<eg-combobox
+        #resourceTypeCombobox
         [attr.id]="domId"
         placeholder="Resource type" i18n-placeholder
         [entries]="resourceTypes"
@@ -15,10 +17,14 @@ export class ResourceTypeComboboxComponent implements OnInit {
 
     resourceTypes: ComboboxEntry[];
 
+    clear: () => void;
+
     @Input() domId = '';
     @Input() startId: number;
     @Output() typeChanged: EventEmitter<ComboboxEntry>;
 
+    @ViewChild('resourceTypeCombobox') resourceTypeCombobox: ComboboxComponent;
+
     constructor(private pcrud: PcrudService) {
         this.typeChanged = new EventEmitter<ComboboxEntry>();
     }
@@ -29,6 +35,10 @@ export class ResourceTypeComboboxComponent implements OnInit {
             if (!this.resourceTypes) { this.resourceTypes = []; }
             this.resourceTypes.push({id: type.id(), label: type.name()});
         });
+        this.clear = () => {
+            this.resourceTypeCombobox.selected = {id: '', label: ''};
+        };
     }
 
 }
+