ngx-techlify-core 11.2.4 → 11.2.8

package/fesm2015/ngx-techlify-core.js

@@ -569,25 +569,27 @@ class ErrorHandlerService {
         this.alerter = alerter;
     }
     handleError(errorResponse, msg = '') {
-        var _a;
+        var _a, _b, _c, _d;
         // 1 - Create empty array to store errors
         const errors = [];
         // 2 - check if the error object is present in the response
-        if (errorResponse.error) {
-            // 3 - Push the main error message to the array of errors
-            errors.push(errorResponse.error.message ? errorResponse.error.message : (_a = errorResponse.error) === null || _a === void 0 ? void 0 : _a.error);
-            // 4 - Check for Laravel form validation error messages object
-            if (errorResponse.error.errors) {
-                // 5 - For each error property (which is a form field)
+        if (errorResponse === null || errorResponse === void 0 ? void 0 : errorResponse.error) {
+            // 3 - Check for Laravel form validation error messages object
+            if ((_a = errorResponse === null || errorResponse === void 0 ? void 0 : errorResponse.error) === null || _a === void 0 ? void 0 : _a.errors) {
+                // 4 - For each error property (which is a form field)
                 for (const property in errorResponse.error.errors) {
-                    if (errorResponse.error.errors.hasOwnProperty(property)) {
-                        // 6 - Extract it's array of errors
-                        const propertyErrors = errorResponse.error.errors[property];
-                        // 7 - Push all errors in the array to the errors array
+                    if ((_b = errorResponse.error.errors) === null || _b === void 0 ? void 0 : _b.hasOwnProperty(property)) {
+                        // 5 - Extract it's array of errors
+                        const propertyErrors = (_c = errorResponse === null || errorResponse === void 0 ? void 0 : errorResponse.error) === null || _c === void 0 ? void 0 : _c.errors[property];
+                        // 6 - Push all errors in the array to the errors array
                         propertyErrors.forEach(error => errors.push(error));
                     }
                 }
             }
+            if (errors.length === 0) {
+                // 7 - Push the main error message to the array of errors if there is no validation error
+                errors.push(errorResponse.error.message ? errorResponse.error.message : (_d = errorResponse.error) === null || _d === void 0 ? void 0 : _d.error);
+            }
         }
         var errMessage = errors.length ? errors[0] : msg;
         this.alerter.addAlert("Error: " + errMessage, "warning");
@@ -1550,6 +1552,7 @@ class NoteFormComponent {
     }
     //Method to trigger login
     submit() {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             this.noteFormFirstAttempt = true;
             if (this.noteFormGroup.valid) {
@@ -1557,7 +1560,7 @@ class NoteFormComponent {
                 const result = this.updateMode
                     ? yield this.noteService.editNote(model)
                     : yield this.noteService.addNote(model);
-                this.alertService.addAlert("Note saved successfully", "success");
+                this.alertService.addAlert(`${(_a = this.data) === null || _a === void 0 ? void 0 : _a.labelText} saved successfully`, "success");
                 this.dialogRef.close(result);
             }
         });
@@ -1577,7 +1580,7 @@ class NoteFormComponent {
 NoteFormComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-note-form',
-                template: "<form [formGroup]=\"noteFormGroup\" (ngSubmit)=\"submit()\">\n    <div fxLayout=\"column\" class=\"mat-typography\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>Note</div>\n        </div>\n\n        <div mat-dialog-content fxLayout=\"column\">\n            <div fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\n                <mat-form-field fxFlex=\"100%\">\n                    <textarea matInput formControlName=\"note\" placeholder=\"Note\" autocomplete=\"off\" required></textarea>\n                    <mat-error *ngIf=\"isFieldValid('note')\">{{\n                      getErrorMessage(\"note\")\n                    }}</mat-error>\n                </mat-form-field>\n\n                <div class=\"my-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n                    <button mat-raised-button type=\"button\" (click)=\"cancel()\">\n                        Cancel\n                    </button>\n                    <button mat-raised-button type=\"submit\" color=\"primary\">Save</button>\n                </div>\n            </div>\n        </div>\n    </div>\n</form>",
+                template: "<form [formGroup]=\"noteFormGroup\" (ngSubmit)=\"submit()\">\n    <div fxLayout=\"column\" class=\"mat-typography\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>{{data?.labelText}}</div>\n        </div>\n\n        <div mat-dialog-content fxLayout=\"column\">\n            <div fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\n                <mat-form-field fxFlex=\"100%\">\n                    <textarea matInput formControlName=\"note\" placeholder=\"{{data?.labelText}}\" autocomplete=\"off\"\n                        required></textarea>\n                    <mat-error *ngIf=\"isFieldValid('note')\">{{\n                        getErrorMessage(\"note\")\n                        }}</mat-error>\n                </mat-form-field>\n\n                <div class=\"my-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n                    <button mat-raised-button type=\"button\" (click)=\"cancel()\">\n                        Cancel\n                    </button>\n                    <button mat-raised-button type=\"submit\" color=\"primary\">Save</button>\n                </div>\n            </div>\n        </div>\n    </div>\n</form>",
                 styles: [""]
             },] }
 ];
@@ -1591,11 +1594,11 @@ NoteFormComponent.ctorParameters = () => [
 ];
 
 class NoteListComponent {
-    constructor(noteService, alertService, dialog) {
+    constructor(noteService, dialog) {
         this.noteService = noteService;
-        this.alertService = alertService;
         this.dialog = dialog;
         this.readonly = false;
+        this.labelText = 'Note';
         this.notes = [];
         this.displayedColumns = [
             'index',
@@ -1627,7 +1630,8 @@ class NoteListComponent {
         const dialogRef = this.dialog.open(NoteFormComponent, {
             width: "400px",
             data: {
-                note: { related_model_id: this.relatedModelId, model_type: this.modelType }
+                note: { related_model_id: this.relatedModelId, model_type: this.modelType },
+                labelText: this.labelText,
             },
             autoFocus: false
         });
@@ -1643,7 +1647,8 @@ class NoteListComponent {
             width: "400px",
             data: {
                 note: note,
-                update: true
+                update: true,
+                labelText: this.labelText
             },
             autoFocus: false
         });
@@ -1659,8 +1664,8 @@ class NoteListComponent {
             const dialogRef = this.dialog.open(ActionPopupComponent, {
                 width: "400px",
                 data: {
-                    title: "Delete Note",
-                    message: `Are you sure to delete the note?`
+                    title: `Delete ${this.labelText}`,
+                    message: `Are you sure to delete?`
                 },
                 autoFocus: false
             });
@@ -1688,19 +1693,19 @@ class NoteListComponent {
 NoteListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-note-list',
-                template: "<div fxLayout=\"column\" fxLayoutGap=\"1.5rem\" class=\"m-4\">\n\n    <div fxLayout fxLayoutAlign=\"start center\" fxLayoutGap=\"1rem\">\n        <h3 class=\"m-0 font-weight-bold mr-3\">Notes</h3>\n        <button class=\"d-print-none\" *ngIf=\"!readonly\" mat-raised-button color=\"primary\" type=\"button\"\n            (click)=\"addNote()\">+ Add</button>\n    </div>\n\n    <div class=\"w-00 scroll-container\" infiniteScroll [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"50\"\n        (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n        <table mat-table [dataSource]=\"notes\" class=\"w-100\" multiTemplateDataRows>\n\n            <!-- Index Column -->\n            <ng-container matColumnDef=\"index\">\n                <th mat-header-cell *matHeaderCellDef> # </th>\n                <td mat-cell *matCellDef=\"let note; let i = dataIndex\"> {{ i+1 }} </td>\n            </ng-container>\n\n\n            <ng-container matColumnDef=\"note\">\n                <th mat-header-cell *matHeaderCellDef> Note </th>\n                <td mat-cell *matCellDef=\"let note\">\n                    {{note?.note}}\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"actions\">\n                <th mat-header-cell *matHeaderCellDef class=\"d-print-none\"> Actions </th>\n                <td mat-cell *matCellDef=\"let note\" class=\"d-print-none\">\n                    <button type=\"button\" mat-icon-button (click)=\"editNote(note)\">\n                        <mat-icon>edit</mat-icon>\n                    </button>\n                    <button type=\"button\" mat-icon-button (click)=\"deleteNote(note)\">\n                        <mat-icon>delete</mat-icon>\n                    </button>\n                </td>\n            </ng-container>\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n    </div>\n\n</div>",
+                template: "<div fxLayout=\"column\" fxLayoutGap=\"1.5rem\" class=\"m-4\">\n\n    <div fxLayout fxLayoutAlign=\"center center\" fxLayoutGap=\"1rem\">\n        <h3 class=\"m-0 font-weight-bold mr-3\">{{labelText}}s</h3>\n        <button class=\"d-print-none\" *ngIf=\"!readonly\" mat-raised-button color=\"primary\" type=\"button\"\n            (click)=\"addNote()\">+ Add</button>\n    </div>\n\n    <div class=\"w-00 scroll-container\" infiniteScroll [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"50\"\n        (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n        <table mat-table [dataSource]=\"notes\" class=\"w-100\" multiTemplateDataRows>\n\n            <!-- Index Column -->\n            <ng-container matColumnDef=\"index\">\n                <th mat-header-cell *matHeaderCellDef> # </th>\n                <td mat-cell *matCellDef=\"let note; let i = dataIndex\"> {{ i+1 }} </td>\n            </ng-container>\n\n\n            <ng-container matColumnDef=\"note\">\n                <th mat-header-cell *matHeaderCellDef> {{labelText}} </th>\n                <td mat-cell *matCellDef=\"let note\">\n                    {{note?.note}}\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"actions\">\n                <th mat-header-cell *matHeaderCellDef class=\"d-print-none\"> Actions </th>\n                <td mat-cell *matCellDef=\"let note\" class=\"d-print-none\">\n                    <button type=\"button\" mat-icon-button (click)=\"editNote(note)\">\n                        <mat-icon>edit</mat-icon>\n                    </button>\n                    <button type=\"button\" mat-icon-button (click)=\"deleteNote(note)\">\n                        <mat-icon>delete</mat-icon>\n                    </button>\n                </td>\n            </ng-container>\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n    </div>\n\n</div>",
                 styles: [".scroll-container{max-height:400px;overflow-y:auto}"]
             },] }
 ];
 NoteListComponent.ctorParameters = () => [
     { type: NoteService },
-    { type: AlertService },
     { type: MatDialog }
 ];
 NoteListComponent.propDecorators = {
     relatedModelId: [{ type: Input }],
     modelType: [{ type: Input }],
-    readonly: [{ type: Input }]
+    readonly: [{ type: Input }],
+    labelText: [{ type: Input }]
 };
 
 var SearchableSelectorComponent_1;
@@ -1720,6 +1725,7 @@ let SearchableSelectorComponent = SearchableSelectorComponent_1 = class Searchab
         this.edit = false;
         this.sort = true;
         this.selectionChange = new EventEmitter();
+        this.itemsChange = new EventEmitter();
         this.isLoading = false;
         this.onChange = () => { };
         this.onTouched = () => { };
@@ -1786,7 +1792,10 @@ let SearchableSelectorComponent = SearchableSelectorComponent_1 = class Searchab
             items = [this.selectedValue, ...this.items];
         else
             items = this.items;
-        return items.filter((v, i, a) => a.findIndex(v => v[this.valueField] === a[i][this.valueField]) === i);
+        items = items.filter((v, i, a) => a.findIndex(v => v[this.valueField] === a[i][this.valueField]) === i);
+        //Emit the items to any child component
+        this.itemsChange.emit(items);
+        return items;
     }
     ngOnInit() {
         this.selectorForm.get('search').valueChanges
@@ -1950,6 +1959,7 @@ SearchableSelectorComponent.propDecorators = {
     searchField: [{ type: Input }],
     itemComponent: [{ type: Input }],
     selectionChange: [{ type: Output }],
+    itemsChange: [{ type: Output }],
     required: [{ type: Input }],
     disabled: [{ type: Input }],
     value: [{ type: Input }]
@@ -2148,12 +2158,12 @@ NumberSelector.propDecorators = {
 };
 
 function calculateTimeline(value) {
-    var data = {
+    const date = new Date();
+    const data = {
         'date_from': date,
         'date_to': date,
         'show_custom_field': false
     };
-    var date = new Date();
     switch (value) {
         case 1: { //Custom
             data.show_custom_field = true;
@@ -2268,9 +2278,13 @@ class TimelineFilterComponent {
             { value: 11, viewValue: 'Last Year' },
             { value: 12, viewValue: 'All dates' },
         ];
+        this.labelText = 'Select Timeline';
+        this.dateFrom = 'date_from';
+        this.dateTo = 'date_to';
         this.showCustomDateFields = false;
     }
     set defaultValue(value) {
+        this.timelineValue = value;
         this.changeTimeline(value);
     }
     ngOnInit() {
@@ -2287,8 +2301,8 @@ class TimelineFilterComponent {
     changeTimeline(value) {
         const timeline = calculateTimeline(value);
         if (timeline) {
-            this.setFieldValue('date_from', timeline.date_from);
-            this.setFieldValue('date_to', timeline.date_to);
+            this.setFieldValue(this.dateFrom, timeline.date_from);
+            this.setFieldValue(this.dateTo, timeline.date_to);
             this.showCustomDateFields = timeline.show_custom_field;
         }
     }
@@ -2296,13 +2310,16 @@ class TimelineFilterComponent {
 TimelineFilterComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-timeline-filter',
-                template: "<ng-container [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label>Select Timeline</mat-label>\n        <mat-select (selectionChange)=\"changeTimeline($event.value)\">\n            <mat-option *ngFor=\"let timeline of timelines\" [value]=\"timeline.value\">\n                {{timeline.viewValue}}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <ng-container *ngIf=\"showCustomDateFields\">\n        <mat-form-field>\n            <input matInput formControlName=\"date_from\" [matDatepicker]=\"fromPicker\" (click)=\"fromPicker.open()\"\n                placeholder=\"From Date\" readonly />\n            <mat-datepicker-toggle matSuffix [for]=\"fromPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #fromPicker></mat-datepicker>\n            <button mat-button *ngIf=\"getFieldValue('date_from')\" matSuffix mat-icon-button\n                (click)=\"resetFieldValue('date_from')\">\n                <mat-icon>close</mat-icon>\n            </button>\n        </mat-form-field>\n\n        <mat-form-field>\n            <input matInput formControlName=\"date_to\" [matDatepicker]=\"toPicker\" (click)=\"toPicker.open()\"\n                placeholder=\"To Date\" readonly />\n            <mat-datepicker-toggle matSuffix [for]=\"\"></mat-datepicker-toggle>\n            <mat-datepicker #toPicker></mat-datepicker>\n            <button mat-button *ngIf=\"getFieldValue('date_to')\" matSuffix mat-icon-button\n                (click)=\"resetFieldValue('date_to')\">\n                <mat-icon>close</mat-icon>\n            </button>\n        </mat-form-field>\n\n    </ng-container>\n</ng-container>",
+                template: "<ng-container [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label>{{labelText}}</mat-label>\n        <mat-select (selectionChange)=\"changeTimeline($event.value)\" [value]=\"timelineValue\">\n            <mat-option *ngFor=\"let timeline of timelines\" [value]=\"timeline.value\">\n                {{timeline.viewValue}}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <ng-container *ngIf=\"showCustomDateFields\">\n        <mat-form-field>\n            <input matInput formControlName=\"{{dateFrom}}\" [matDatepicker]=\"fromPicker\" (click)=\"fromPicker.open()\"\n                placeholder=\"From Date\" readonly />\n            <mat-datepicker-toggle matSuffix [for]=\"fromPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #fromPicker></mat-datepicker>\n            <button mat-button *ngIf=\"getFieldValue(dateFrom)\" matSuffix mat-icon-button\n                (click)=\"resetFieldValue(dateFrom)\">\n                <mat-icon>close</mat-icon>\n            </button>\n        </mat-form-field>\n\n        <mat-form-field>\n            <input matInput formControlName=\"{{dateTo}}\" [matDatepicker]=\"toPicker\" (click)=\"toPicker.open()\"\n                placeholder=\"To Date\" readonly />\n            <mat-datepicker-toggle matSuffix [for]=\"\"></mat-datepicker-toggle>\n            <mat-datepicker #toPicker></mat-datepicker>\n            <button mat-button *ngIf=\"getFieldValue(dateTo)\" matSuffix mat-icon-button\n                (click)=\"resetFieldValue(dateTo)\">\n                <mat-icon>close</mat-icon>\n            </button>\n        </mat-form-field>\n\n    </ng-container>\n</ng-container>",
                 styles: [""]
             },] }
 ];
 TimelineFilterComponent.ctorParameters = () => [];
 TimelineFilterComponent.propDecorators = {
     timelines: [{ type: Input }],
+    labelText: [{ type: Input }],
+    dateFrom: [{ type: Input }],
+    dateTo: [{ type: Input }],
     form: [{ type: Input }],
     defaultValue: [{ type: Input }]
 };