ngx-techlify-core 11.4.5 → 11.4.6

package/bundles/ngx-techlify-core.umd.js

@@ -747,6 +747,7 @@
             this.authClientSecret = '';
             this.authGrantType = '';
             this.apiUrl = '';
+            this.isLogoutWhileApiGetsFailed = false;
             this.loadFromMap(data);
         }
         TechlifyConfig.prototype.loadFromMap = function (data) {
@@ -757,6 +758,7 @@
             this.apiUrl = data.apiUrl;
             this.storage = data === null || data === void 0 ? void 0 : data.storage;
             this.rawConfigs = data;
+            this.isLogoutWhileApiGetsFailed = data === null || data === void 0 ? void 0 : data.isLogoutWhileApiGetsFailed;
         };
         return TechlifyConfig;
     }());
@@ -882,8 +884,9 @@
      * @since 20171202
      */
     var ErrorHandlerService = /** @class */ (function () {
-        function ErrorHandlerService(alerter) {
+        function ErrorHandlerService(alerter, config) {
             this.alerter = alerter;
+            this.config = config;
         }
         ErrorHandlerService.prototype.handleError = function (errorResponse, msg) {
             if (msg === void 0) { msg = ''; }
@@ -911,17 +914,23 @@
             }
             var errMessage = errors.length ? errors[0] : msg;
             this.alerter.addAlert("Error: " + errMessage, "warning");
+            if (errorResponse.status == 403 && this.config.isLogoutWhileApiGetsFailed) {
+                sessionStorage.clear();
+                localStorage.clear();
+                location.reload();
+            }
         };
         return ErrorHandlerService;
     }());
-    ErrorHandlerService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ErrorHandlerService_Factory() { return new ErrorHandlerService(i0.ɵɵinject(AlertService)); }, token: ErrorHandlerService, providedIn: "root" });
+    ErrorHandlerService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ErrorHandlerService_Factory() { return new ErrorHandlerService(i0.ɵɵinject(AlertService), i0.ɵɵinject(TechlifyConfig)); }, token: ErrorHandlerService, providedIn: "root" });
     ErrorHandlerService.decorators = [
         { type: i0.Injectable, args: [{
                     providedIn: 'root'
                 },] }
     ];
     ErrorHandlerService.ctorParameters = function () { return [
-        { type: AlertService }
+        { type: AlertService },
+        { type: TechlifyConfig }
     ]; };
 
     var log = new Logger('ErrorHandlerInterceptor');
@@ -1391,9 +1400,13 @@
         EntityFileService.prototype.deleteEntityFile = function (model) {
             return this.http.delete("api/entity-files/" + model.id).toPromise();
         };
-        EntityFileService.prototype.uploadEntityFile = function (file) {
+        EntityFileService.prototype.uploadEntityFile = function (file, params) {
             var formData = new FormData();
             formData.append("fileData", file, file.name);
+            if (params === null || params === void 0 ? void 0 : params.entity_id) {
+                formData.append('entity_id', params.entity_id);
+                formData.append('entity_type', params.entity_type);
+            }
             return this.http
                 .skipHeader()
                 .post("api/entity-files-upload", formData).toPromise();
@@ -1459,7 +1472,8 @@
                 entity_type: [''],
                 entity_id: [],
                 file: ['', forms.Validators.required],
-                url: ['', forms.Validators.required]
+                url: ['', forms.Validators.required],
+                file_size: ['', forms.Validators.required],
             });
         };
         EntityFileFormComponent.prototype.ngOnInit = function () {
@@ -1538,12 +1552,8 @@
                             return [4 /*yield*/, this.entityFileService.uploadEntityFile(this.fileList[0])];
                         case 1:
                             result = _c.sent();
-                            this.entityFileGroup
-                                .get("file")
-                                .setValue(result.item.file);
-                            this.entityFileGroup
-                                .get("url")
-                                .setValue(result.item.url);
+                            this.entityFileGroup.patchValue(result.item);
+                            ;
                             this.fileList = [];
                             _c.label = 2;
                         case 2: return [2 /*return*/];
@@ -1582,7 +1592,7 @@
     EntityFileFormComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'entity-file-form',
-                    template: "<form [formGroup]=\"entityFileGroup\" (ngSubmit)=\"submit()\">\n    <div fxLayout=\"column\" class=\"mat-typography\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>Entity File</div>\n        </div>\n\n        <div mat-dialog-content fxLayout=\"column\" fxLayoutAlign.=\"start\">\n            <ng-container *ngIf=\"!hideTitleAndDetails\">\n                <mat-form-field>\n                    <input type=\"text\" matInput formControlName=\"title\" placeholder=\"Title\" autocomplete=\"off\">\n                </mat-form-field>\n                <mat-form-field>\n                    <textarea matInput formControlName=\"details\" placeholder=\"Details\" autocomplete=\"off\"></textarea>\n                </mat-form-field>\n            </ng-container>\n\n            <ng-template #fileUpload>\n                <section fxFlex=\"100%\">\n                    <div>Entity File*</div>\n                    <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"fileList\">\n                    </app-file-dropper>\n                    <div class=\"text-danger\" *ngIf=\"isFieldValid('url')\">\n                        {{getErrorMessage(\"url\")}}\n                    </div>\n                </section>\n            </ng-template>\n\n\n            <div fxFlex=\"100%\" class=\"mt-2\" *ngIf=\"entityFileGroup.get('url').value;else fileUpload;\">\n                <app-document-viewer [file]=\"entityFileGroup.get('file').value\"\n                    [fileUrl]=\"entityFileGroup.get('url').value\" [config]=\"this.viewerConfig\" (remove)=\"removeFile()\"\n                    [disableEdit]=\"updateMode\">\n                </app-document-viewer>\n\n            </div>\n\n            <div class=\"mt-4 mb-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n                <button mat-raised-button type=\"button\" (click)=\"dialogRef.close()\">\n                    Cancel\n                </button>\n                <button mat-raised-button type=\"submit\" color=\"primary\">Save</button>\n            </div>\n        </div>\n    </div>\n</form>",
+                    template: "<form [formGroup]=\"entityFileGroup\" (ngSubmit)=\"submit()\">\n  <div fxLayout=\"column\" class=\"mat-typography\">\n    <div mat-dialog-title class=\"text-center\">\n      <div>Entity File</div>\n    </div>\n    <div mat-dialog-content fxLayout=\"column\" fxLayoutAlign.=\"start\">\n      <ng-container *ngIf=\"!hideTitleAndDetails\">\n        <mat-form-field>\n          <input type=\"text\" matInput formControlName=\"title\" placeholder=\"Title\" autocomplete=\"off\">\n        </mat-form-field>\n        <mat-form-field>\n          <textarea matInput formControlName=\"details\" placeholder=\"Details\" autocomplete=\"off\"></textarea>\n        </mat-form-field>\n      </ng-container>\n      <ng-template #fileUpload>\n        <section fxFlex=\"100%\">\n          <div>Entity File*</div>\n          <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"fileList\">\n          </app-file-dropper>\n          <div class=\"text-danger\" *ngIf=\"isFieldValid('url')\">\n            {{getErrorMessage(\"url\")}}\n          </div>\n        </section>\n      </ng-template>\n      <div fxFlex=\"100%\" class=\"mt-2\" *ngIf=\"entityFileGroup.get('url').value;else fileUpload;\">\n        <app-document-viewer [file]=\"entityFileGroup.get('file').value\" [fileUrl]=\"entityFileGroup.get('url').value\"\n          [config]=\"this.viewerConfig\" (remove)=\"removeFile()\" [disableEdit]=\"updateMode\">\n        </app-document-viewer>\n      </div>\n      <div class=\"mt-4 mb-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n        <button mat-raised-button type=\"button\" (click)=\"dialogRef.close()\">\n          Cancel\n        </button>\n        <button mat-raised-button type=\"submit\" color=\"primary\">Save</button>\n      </div>\n    </div>\n  </div>\n</form>\n",
                     styles: [""]
                 },] }
     ];
@@ -1602,17 +1612,37 @@
             this.alertService = alertService;
             this.dialog = dialog;
             this.viewOnly = false;
+            this.title = "File";
             this.filters = {};
             this.entityFiles = [];
-            this.displayedColumns = ['index', 'title', 'details', 'file',];
+            this.displayedColumns = [
+                'index',
+                'title',
+                'details',
+                'file_size',
+                'uploaded_on',
+            ];
             this.isWorking = false;
             this.search = new forms.FormControl('');
             this.page = 1;
             this.perPage = 25;
             this.lastPage = 0;
+            this.fileList = [];
         }
         EntityFilesViewAllComponent.prototype.ngOnInit = function () {
             var _this = this;
+            //File dropper config
+            this.fileConfig = {
+                fileId: "entityDashboardDropper",
+                containerId: "entityDashboardDropperContainer",
+                styles: {
+                    height: "500px"
+                },
+                multiple: false,
+                acceptFile: "*",
+                maxSize: 10,
+                acceptFileText: "All Files"
+            };
             this.viewerConfig = {
                 imageStyle: {
                     height: '200px',
@@ -1648,6 +1678,7 @@
                     switch (_a.label) {
                         case 0:
                             this.filters.page = this.page;
+                            this.filters.perPage = this.perPage;
                             this.isWorking = true;
                             return [4 /*yield*/, this.entityFileService.getEntityFiles(this.filters)];
                         case 1:
@@ -1743,12 +1774,42 @@
         EntityFilesViewAllComponent.prototype.resetFieldValue = function () {
             this.search.setValue("");
         };
+        EntityFilesViewAllComponent.prototype.sizeOf = function (bytes) {
+            if (!bytes) {
+                return "0.00 B";
+            }
+            var e = Math.floor(Math.log(bytes) / Math.log(1024));
+            return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B';
+        };
+        EntityFilesViewAllComponent.prototype.fileChanged = function (event) {
+            return __awaiter(this, void 0, void 0, function () {
+                var result;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            this.fileList = event;
+                            if (!(this.fileList.length > 0)) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.entityFileService.uploadEntityFile(this.fileList[0], {
+                                    entity_type: this.entityType,
+                                    entity_id: this.entityId,
+                                })];
+                        case 1:
+                            result = _a.sent();
+                            this.fileList = [];
+                            this.alertService.addAlert('Successfull uploaded', 'success');
+                            this.reload();
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            });
+        };
         return EntityFilesViewAllComponent;
     }());
     exports.ɵo.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-entity-files-view-all',
-                    template: "<div fxLayout=\"column\" fxLayoutGap=\"1rem\" class=\"mat-typography p-4\" *ngIf=\"!displayMode\">\n    <div fxLayout=\"column\" fxLayoutGap=\"0.25rem\">\n        <h3 class=\"font-weight-bold\" fxLayoutAlign=\"center center\"> Files\n            <button type=\"button\" class=\"mx-1\" mat-mini-fab color=\"primary\" (click)=\"addEntityFile()\" *ngIf=\"!viewOnly\">\n                <mat-icon>add</mat-icon>\n            </button>\n        </h3>\n        <div fxLayout=\"row wrap\" fxLayoutAlign=\"start\" *ngIf=\"!removeSearch\">\n            <mat-form-field class=\"mt-1\">\n                <input type=\"text\" matInput [formControl]=\"search\" placeholder=\"Title\" name=\"title\"\n                    autocomplete=\"off\" />\n                <button mat-button *ngIf=\"filters.title\" matSuffix mat-icon-button (click)=\"resetFieldValue()\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </mat-form-field>\n        </div>\n        <table mat-table [dataSource]=\"entityFiles\" class=\"w-100\" matSort multiTemplateDataRows\n            infiniteScrollContainer=\"body\" infiniteScroll [infiniteScrollDistance]=\"1.5\" [infiniteScrollThrottle]=\"50\"\n            [fromRoot]=\"true\" (scrolled)=\"onScroll()\">\n\n            <!-- Index Column -->\n            <ng-container matColumnDef=\"index\">\n                <th mat-header-cell *matHeaderCellDef> # </th>\n                <td mat-cell *matCellDef=\"let element; let i = dataIndex\"> {{ i+1 }} </td>\n            </ng-container>\n\n            <!-- Title Column -->\n            <ng-container matColumnDef=\"title\">\n                <th mat-header-cell *matHeaderCellDef> Title </th>\n                <td mat-cell *matCellDef=\"let element\"> {{element.title}} </td>\n            </ng-container>\n\n            <!-- Details Column -->\n            <ng-container matColumnDef=\"details\">\n                <th mat-header-cell *matHeaderCellDef> Details </th>\n                <td mat-cell *matCellDef=\"let element\"> {{element.details}} </td>\n            </ng-container>\n\n            <!-- File Column -->\n            <ng-container matColumnDef=\"file\">\n                <th mat-header-cell *matHeaderCellDef> File </th>\n                <td mat-cell *matCellDef=\"let element\">\n                    <a href=\"{{element.url}}\" target=\"_blank\">\n                        <button mat-button type=\"button\">View</button>\n                    </a>\n                </td>\n            </ng-container>\n\n            <!-- Actions Column -->\n            <ng-container matColumnDef=\"actions\">\n                <th mat-header-cell *matHeaderCellDef> Actions </th>\n                <td mat-cell *matCellDef=\"let element\" style=\"min-width:110px\">\n                    <button type=\"button\" mat-icon-button (click)=\"editEntityFile(element)\">\n                        <mat-icon>edit</mat-icon>\n                    </button>\n                    <button type=\"button\" mat-icon-button (click)=\"deleteEntityFile(element)\">\n                        <mat-icon>delete</mat-icon>\n                    </button>\n                </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n    </div>\n</div>\n\n<div fxLayout=\"row wrap\" fxLayoutGap=\"1rem\" class=\"mat-typography p-4\" *ngIf=\"displayMode\">\n\n    <div *ngFor=\"let efile of entityFiles\">\n        <app-document-viewer [file]=\"efile.file\" [fileUrl]=\"efile.url\" [config]=\"this.viewerConfig\"\n            [disableEdit]=\"true\">\n        </app-document-viewer>\n        <a href=\"{{efile.url}}\" target=\"_blank\">\n            <button mat-button type=\"button\">View</button>\n        </a>\n    </div>\n\n</div>",
+                    template: "<div class=\"mat-typography\" *ngIf=\"!displayMode\">\n  <div fxLayout=\"row\" fxLayoutGap=\"1rem\">\n    <mat-card fxFlex=\"70%\">\n      <mat-card-title fxLayout fxLayoutGap=\"1rem\">\n        <h3 class=\"font-weight-bold primary-color\" fxLayout=\"center center\">\n          <mat-icon>\n            <span class=\"material-icons\">\n              description\n            </span>\n          </mat-icon>\n          {{title}}s\n        </h3>\n        <div>\n          <button type=\"button\" class=\"mx-1\" mat-raised-button color=\"primary\" (click)=\"addEntityFile()\"\n            *ngIf=\"!viewOnly\">\n            <mat-icon>\n              <span class=\"material-icons\">\n                add_circle_outline\n              </span>\n            </mat-icon>\n            {{title}}\n          </button>\n        </div>\n        <mat-form-field *ngIf=\"!removeSearch\" appearance=\"outline\" style=\"font-size: 10px;\">\n          <mat-label>Search</mat-label>\n          <input type=\"text\" matInput [formControl]=\"search\" placeholder=\"Search\" name=\"title\" autocomplete=\"off\" />\n          <button mat-button *ngIf=\"filters.title\" matSuffix mat-icon-button (click)=\"resetFieldValue()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-form-field>\n      </mat-card-title>\n      <mat-card-content class=\"entity-file-card\">\n        <table mat-table [dataSource]=\"entityFiles\" class=\"w-100\" matSort multiTemplateDataRows infiniteScroll\n          [infiniteScrollDistance]=\"1.5\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\">\n\n          <!-- Index Column -->\n          <ng-container matColumnDef=\"index\">\n            <th mat-header-cell *matHeaderCellDef> # </th>\n            <td mat-cell *matCellDef=\"let element; let i = dataIndex\"> {{ i+1 }} </td>\n          </ng-container>\n\n          <!-- Title Column -->\n          <ng-container matColumnDef=\"title\">\n            <th mat-header-cell *matHeaderCellDef> Title </th>\n            <td mat-cell *matCellDef=\"let element\">\n              <div>\n                <span>\n                  {{element.title}}\n                </span>\n                <span>\n                  <a href=\"{{element.url}}\" target=\"_blank\" class=\"text-decoration-none text-muted\">\n                    <button mat-icon-button type=\"button\">\n                      <mat-icon>download</mat-icon>\n                    </button>\n                  </a>\n                </span>\n              </div>\n            </td>\n          </ng-container>\n\n          <!-- Details Column -->\n          <ng-container matColumnDef=\"details\">\n            <th mat-header-cell *matHeaderCellDef> Details </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.details}} </td>\n          </ng-container>\n\n          <!-- File size Column -->\n          <ng-container matColumnDef=\"file_size\">\n            <th mat-header-cell *matHeaderCellDef> File Size </th>\n            <td mat-cell *matCellDef=\"let element\"> {{ sizeOf(element.file_size)}} </td>\n          </ng-container>\n\n          <!-- Uploaded On Column -->\n          <ng-container matColumnDef=\"uploaded_on\">\n            <th mat-header-cell *matHeaderCellDef> Uploaded On </th>\n            <td mat-cell *matCellDef=\"let element\">\n              <div>\n                {{element.created_at | date: 'mediumDate'}}\n              </div>\n              <div class=\"text-muted\">\n                By {{element.creator?.name}}\n              </div>\n            </td>\n          </ng-container>\n\n          <!-- Actions Column -->\n          <ng-container matColumnDef=\"actions\">\n            <th mat-header-cell *matHeaderCellDef> Actions </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"min-width:110px\" class=\"text-muted\">\n              <button type=\"button\" mat-icon-button (click)=\"editEntityFile(element)\">\n                <mat-icon>edit</mat-icon>\n              </button>\n              <button type=\"button\" mat-icon-button (click)=\"deleteEntityFile(element)\">\n                <mat-icon>delete</mat-icon>\n              </button>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n      </mat-card-content>\n    </mat-card>\n    <section fxFlex=\"30%\">\n      <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"fileList\">\n      </app-file-dropper>\n    </section>\n  </div>\n</div>\n\n<div fxLayout=\"row wrap\" fxLayoutGap=\"1rem\" class=\"mat-typography p-4\" *ngIf=\"displayMode\">\n  <div *ngFor=\"let efile of entityFiles\">\n    <app-document-viewer [file]=\"efile.file\" [fileUrl]=\"efile.url\" [config]=\"this.viewerConfig\" [disableEdit]=\"true\">\n    </app-document-viewer>\n    <a href=\"{{efile.url}}\" target=\"_blank\">\n      <button mat-button type=\"button\">View</button>\n    </a>\n  </div>\n</div>\n",
                     styles: [""]
                 },] }
     ];
@@ -1764,7 +1825,8 @@
         viewOnly: [{ type: i0.Input }],
         removeSearch: [{ type: i0.Input }],
         hideTitleAndDetails: [{ type: i0.Input }],
-        displayMode: [{ type: i0.Input }]
+        displayMode: [{ type: i0.Input }],
+        title: [{ type: i0.Input }]
     };
     exports.ɵo = __decorate([
         untilDestroy.UntilDestroy()