tin-spa 2.3.0 → 2.3.1

package/fesm2020/tin-spa.mjs

@@ -1199,8 +1199,12 @@ class DataServiceLib {
                 { name: 'gender', alias: 'Gender', type: 'select', options: this.genders, required: true },
                 { name: 'firstName', type: 'text', required: true },
                 { name: 'lastName', type: 'text', required: true },
+                { name: 'dateOfBirth', type: 'date', alias: 'Date of Birth', required: true },
+                { name: 'employmentDate', type: 'date', alias: 'Employment Date', required: true },
                 { name: 'departmentID', alias: 'Department', type: 'select', options: [], optionDisplay: 'name', optionValue: 'departmentID' },
                 { name: 'positionID', alias: 'Position', type: 'select', options: [], optionDisplay: 'name', optionValue: 'positionID', masterField: 'departmentID', },
+                { name: 'employmentStatus', alias: 'Employment Status', type: 'select', options: [], optionDisplay: 'name', optionValue: 'value' },
+                { name: 'activeStatus', alias: 'Active Status', type: 'select', options: [], optionDisplay: 'name', optionValue: 'value' },
                 { name: 'address', type: 'text', rows: 2, span: true },
                 { name: 'phone', type: 'text' },
                 { name: 'email', type: 'text' },
@@ -1212,12 +1216,12 @@ class DataServiceLib {
             minColumns: ['name', 'departmentName', 'positionName'],
             flatButtons: true,
             columns: [
-                { name: 'employeeID', type: 'number', alias: 'ID' },
                 { name: 'name', type: 'text' },
-                { name: 'nationalID', type: 'text' },
-                { name: 'genderName', type: 'text' },
-                { name: 'departmentName', type: 'text' },
-                { name: 'positionName', type: 'text' },
+                { name: 'genderName', type: 'text', alias: 'Gender' },
+                { name: 'departmentName', type: 'text', alias: 'Department' },
+                { name: 'positionName', type: 'text', alias: 'Position' },
+                { name: 'employmentStatusName', type: 'text', alias: 'Employment Status' },
+                { name: 'activeStatusName', type: 'text', alias: 'Active Status' },
             ],
             buttons: [
                 { name: 'create', display: 'Create', dialog: true, action: { url: 'general/employees?action=create', method: 'post' } },
@@ -1415,6 +1419,8 @@ class DataServiceLib {
         this.CallApi({ url: 'general/employeesmeta/x' }, "").subscribe((apiResponse) => {
             this.employeeFormConfig.fields.find(x => x.name == 'departmentID').options = apiResponse.data.departments;
             this.employeeFormConfig.fields.find(x => x.name == 'positionID').masterOptions = apiResponse.data.positions;
+            this.employeeFormConfig.fields.find(x => x.name == 'employmentStatus').options = apiResponse.data.employmentStatuses;
+            this.employeeFormConfig.fields.find(x => x.name == 'activeStatus').options = apiResponse.data.activeStatuses;
         });
     }
     //--------------------------Positions-------------------------
@@ -1868,16 +1874,26 @@ class DateComponent {
         this.placeholder = "";
         this.width = "100%";
         this.valueChange = new EventEmitter();
-        this.control = new FormControl(new Date());
     }
     ngOnInit() {
+        this.initializeDateControls();
+    }
+    ngOnChanges(changes) {
+        if (changes['readonly']) {
+            this.updateControlState();
+        }
+        if (changes['value']) {
+            this.control.setValue(new Date(this.value));
+        }
+    }
+    initializeDateControls() {
         this.minDate = new FormControl(new Date(this.min));
         this.maxDate = new FormControl(new Date(this.max));
-        if (!this.value || this.value == "") {
-            this.control = new FormControl(new Date());
-            ;
-        }
-        setTimeout(() => { this.onChangeEvent(); }, 5);
+        this.control = new FormControl({ value: new Date(this.value), disabled: this.readonly });
+        this.updateControlState();
+        setTimeout(() => this.onChangeEvent(), 5);
+    }
+    updateControlState() {
         if (this.readonly) {
             this.control.disable();
         }
@@ -1885,16 +1901,13 @@ class DateComponent {
             this.control.enable();
         }
     }
-    ngOnChanges() {
-        this.control = new FormControl(new Date(this.value));
-    }
     onChangeEvent() {
-        let d = Core.getFormatedDate2(this.control.value, true);
-        this.valueChange.emit(d);
+        const formattedDate = Core.getFormatedDate2(this.control.value, true);
+        this.valueChange.emit(formattedDate);
     }
     validate(control) {
         if (control.hasError('matDatepickerMin')) {
-            return `Minimun date is ${this.min}`;
+            return `Minimum date is ${this.min}`;
         }
         if (control.hasError('matDatepickerMax')) {
             return `Maximum date is ${this.max}`;
@@ -1903,11 +1916,11 @@ class DateComponent {
     }
 }
 DateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateComponent, selector: "spa-date", inputs: { required: "required", min: "min", max: "max", readonly: "readonly", hint: "hint", value: "value", display: "display", placeholder: "placeholder", width: "width" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "\r\n<mat-form-field [ngStyle]=\"{'width':width}\">\r\n<input [formControl]=\"control\" [min]=\"minDate.value\" [max]=\"maxDate.value\" matInput [matDatepicker]=\"picker_date\" (dateInput)=\"onChangeEvent()\" [placeholder]=\"display\" [readonly]=\"true\"  >\r\n<mat-datepicker-toggle matSuffix [for]=\"picker_date\"></mat-datepicker-toggle>\r\n<mat-datepicker #picker_date></mat-datepicker>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] });
+DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateComponent, selector: "spa-date", inputs: { required: "required", min: "min", max: "max", readonly: "readonly", hint: "hint", value: "value", display: "display", placeholder: "placeholder", width: "width" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "\r\n<mat-form-field [ngStyle]=\"{'width':width}\">\r\n  <input [formControl]=\"control\" [min]=\"minDate.value\" [max]=\"maxDate.value\" matInput [matDatepicker]=\"picker_date\" (dateInput)=\"onChangeEvent()\" [placeholder]=\"display\" [readonly]=\"true\">\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker_date\"></mat-datepicker-toggle>\r\n  <mat-datepicker #picker_date></mat-datepicker>\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-date', template: "\r\n<mat-form-field [ngStyle]=\"{'width':width}\">\r\n<input [formControl]=\"control\" [min]=\"minDate.value\" [max]=\"maxDate.value\" matInput [matDatepicker]=\"picker_date\" (dateInput)=\"onChangeEvent()\" [placeholder]=\"display\" [readonly]=\"true\"  >\r\n<mat-datepicker-toggle matSuffix [for]=\"picker_date\"></mat-datepicker-toggle>\r\n<mat-datepicker #picker_date></mat-datepicker>\r\n<mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { required: [{
+            args: [{ selector: 'spa-date', template: "\r\n<mat-form-field [ngStyle]=\"{'width':width}\">\r\n  <input [formControl]=\"control\" [min]=\"minDate.value\" [max]=\"maxDate.value\" matInput [matDatepicker]=\"picker_date\" (dateInput)=\"onChangeEvent()\" [placeholder]=\"display\" [readonly]=\"true\">\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker_date\"></mat-datepicker-toggle>\r\n  <mat-datepicker #picker_date></mat-datepicker>\r\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\r\n</mat-form-field>\r\n" }]
+        }], propDecorators: { required: [{
                 type: Input
             }], min: [{
                 type: Input