@rangertechnologies/ngnxt
Version:
This library was used for creating dymanic UI based on the input JSON/data
42 lines • 11 kB
JavaScript
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../services/change.service";
import * as i2 from "@angular/common";
export class DependentTableComponent {
changeService;
alertMessage;
ValueLength;
Value;
errorObj;
constructor(changeService) {
this.changeService = changeService;
this.changeService.changeField$.subscribe((data) => {
this.dependentData(data);
});
}
ngOnInit() {
this.errorObj = JSON.parse(this.alertMessage);
}
dependentData(data) {
let existingData = data.Permits;
if (existingData.length !== 0) {
this.ValueLength = true;
this.Value = existingData;
$("#zoneIcon").css("border", "3px solid rgb(252, 35, 27)");
}
else {
this.ValueLength = false;
this.Value = [];
$("#zoneIcon").css("border", "3px solid rgb(12, 190, 12)");
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DependentTableComponent, deps: [{ token: i1.ChangeService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DependentTableComponent, selector: "app-dependent-table", inputs: { alertMessage: "alertMessage" }, ngImport: i0, template: "<div class=\"dropdown\" style=\"cursor: pointer;\">\n <span id=\"zoneIcon\"> \n <img src=\"./../../../../../assets/images/permit_icons/zone.png\" style=\"height: 35px; margin-left: 0px;\" alt=\"adv-search\">\n </span>\n <div class=\"dropdown-content\" style=\"margin-left: -300px; min-width: 415px;\">\n <div class=\"col-lg-12\">\n <table class=\"table table-striped table-bordered\">\n <tbody *ngIf=\"!ValueLength\">\n <tr>\n <td colspan=\"3\" class=\"permission_yes\" style=\"color: rgb(12, 190, 12); text-align: center\">\n <span><b>{{ errorObj.noPermits }}</b></span>\n <span>{{ errorObj.noActive }}</span>\n </td>\n </tr>\n </tbody>\n <tbody id=\"zoneDetails\" *ngIf=\"ValueLength\">\n <tr>\n <td colspan=\"3\" class=\"permission_yes\" style=\"color: rgb(252, 35, 27); text-align: center\">\n <span><b>{{ errorObj.permits }} ({{Value.length}})</b></span>\n <span>{{ errorObj.active }}</span>\n </td>\n </tr>\n <tr *ngFor=\"let item of Value\" >\n <td>\n <span>{{item?.permit_type}}-{{item?.ref_no}} - {{item?.status}} - {{item?.end_date}}</span>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </div>", styles: [".dropdown{margin-top:25px;margin-left:25px}.dropdown-content{display:none;position:absolute;background-color:#f9f9f9;min-width:160px;box-shadow:0 8px 16px #0003;padding:12px 16px;z-index:1}.dropdown:hover .dropdown-content{display:block}#zoneIcon{border:3px solid #a59d9d;padding:10px}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}@media (max-width: 992px){.dropdown{margin-top:15px;margin-left:0;margin-bottom:15px}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DependentTableComponent, decorators: [{
type: Component,
args: [{ selector: 'app-dependent-table', template: "<div class=\"dropdown\" style=\"cursor: pointer;\">\n <span id=\"zoneIcon\"> \n <img src=\"./../../../../../assets/images/permit_icons/zone.png\" style=\"height: 35px; margin-left: 0px;\" alt=\"adv-search\">\n </span>\n <div class=\"dropdown-content\" style=\"margin-left: -300px; min-width: 415px;\">\n <div class=\"col-lg-12\">\n <table class=\"table table-striped table-bordered\">\n <tbody *ngIf=\"!ValueLength\">\n <tr>\n <td colspan=\"3\" class=\"permission_yes\" style=\"color: rgb(12, 190, 12); text-align: center\">\n <span><b>{{ errorObj.noPermits }}</b></span>\n <span>{{ errorObj.noActive }}</span>\n </td>\n </tr>\n </tbody>\n <tbody id=\"zoneDetails\" *ngIf=\"ValueLength\">\n <tr>\n <td colspan=\"3\" class=\"permission_yes\" style=\"color: rgb(252, 35, 27); text-align: center\">\n <span><b>{{ errorObj.permits }} ({{Value.length}})</b></span>\n <span>{{ errorObj.active }}</span>\n </td>\n </tr>\n <tr *ngFor=\"let item of Value\" >\n <td>\n <span>{{item?.permit_type}}-{{item?.ref_no}} - {{item?.status}} - {{item?.end_date}}</span>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </div>", styles: [".dropdown{margin-top:25px;margin-left:25px}.dropdown-content{display:none;position:absolute;background-color:#f9f9f9;min-width:160px;box-shadow:0 8px 16px #0003;padding:12px 16px;z-index:1}.dropdown:hover .dropdown-content{display:block}#zoneIcon{border:3px solid #a59d9d;padding:10px}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}tbody td{font-size:13px}@media (max-width: 992px){.dropdown{margin-top:15px;margin-left:0;margin-bottom:15px}}\n"] }]
}], ctorParameters: () => [{ type: i1.ChangeService }], propDecorators: { alertMessage: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVwZW5kZW50LXRhYmxlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL254dC1hcHAvc3JjL2xpYi9jb21wb25lbnRzL2RlcGVuZGVudC10YWJsZS9kZXBlbmRlbnQtdGFibGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbnh0LWFwcC9zcmMvbGliL2NvbXBvbmVudHMvZGVwZW5kZW50LXRhYmxlL2RlcGVuZGVudC10YWJsZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQzs7OztBQVN6RCxNQUFNLE9BQU8sdUJBQXVCO0lBUWQ7SUFOWCxZQUFZLENBQUs7SUFFMUIsV0FBVyxDQUFTO0lBQ3BCLEtBQUssQ0FBSztJQUNWLFFBQVEsQ0FBSztJQUViLFlBQW9CLGFBQTRCO1FBQTVCLGtCQUFhLEdBQWIsYUFBYSxDQUFlO1FBQzlDLElBQUksQ0FBQyxhQUFhLENBQUMsWUFBWSxDQUFDLFNBQVMsQ0FBQyxDQUFDLElBQUksRUFBQyxFQUFFO1lBQ2hELElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDM0IsQ0FBQyxDQUFDLENBQUE7SUFDSixDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUM7SUFDaEQsQ0FBQztJQUVELGFBQWEsQ0FBQyxJQUFRO1FBQ3BCLElBQUksWUFBWSxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUM7UUFDaEMsSUFBRyxZQUFZLENBQUMsTUFBTSxLQUFLLENBQUMsRUFBRSxDQUFDO1lBQzdCLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDO1lBQ3hCLElBQUksQ0FBQyxLQUFLLEdBQUcsWUFBWSxDQUFDO1lBQzFCLENBQUMsQ0FBQyxXQUFXLENBQUMsQ0FBQyxHQUFHLENBQUMsUUFBUSxFQUFFLDRCQUE0QixDQUFDLENBQUM7UUFDNUQsQ0FBQzthQUFNLENBQUM7WUFDUCxJQUFJLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQztZQUN6QixJQUFJLENBQUMsS0FBSyxHQUFHLEVBQUUsQ0FBQztZQUNoQixDQUFDLENBQUMsV0FBVyxDQUFDLENBQUMsR0FBRyxDQUFDLFFBQVEsRUFBRSw0QkFBNEIsQ0FBQyxDQUFDO1FBQzVELENBQUM7SUFDSixDQUFDO3dHQTdCVSx1QkFBdUI7NEZBQXZCLHVCQUF1QixxR0NUcEMsczRDQStCUTs7NEZEdEJLLHVCQUF1QjtrQkFMbkMsU0FBUzsrQkFDRSxxQkFBcUI7a0ZBTXRCLFlBQVk7c0JBQXBCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENoYW5nZVNlcnZpY2UgfSBmcm9tICcuLi8uLi9zZXJ2aWNlcy9jaGFuZ2Uuc2VydmljZSc7XG5kZWNsYXJlIHZhciAkOiBhbnk7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FwcC1kZXBlbmRlbnQtdGFibGUnLFxuICB0ZW1wbGF0ZVVybDogJy4vZGVwZW5kZW50LXRhYmxlLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZGVwZW5kZW50LXRhYmxlLmNvbXBvbmVudC5jc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBEZXBlbmRlbnRUYWJsZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgQElucHV0KCkgYWxlcnRNZXNzYWdlOmFueTtcblxuICBWYWx1ZUxlbmd0aDpib29sZWFuO1xuICBWYWx1ZTphbnk7XG4gIGVycm9yT2JqOmFueTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGNoYW5nZVNlcnZpY2U6IENoYW5nZVNlcnZpY2UpIHsgXG4gICAgdGhpcy5jaGFuZ2VTZXJ2aWNlLmNoYW5nZUZpZWxkJC5zdWJzY3JpYmUoKGRhdGEpPT57XG4gICAgICB0aGlzLmRlcGVuZGVudERhdGEoZGF0YSk7XG4gICAgfSlcbiAgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuZXJyb3JPYmogPSBKU09OLnBhcnNlKHRoaXMuYWxlcnRNZXNzYWdlKTtcbiAgfVxuXG4gIGRlcGVuZGVudERhdGEoZGF0YTphbnkpe1xuICAgIGxldCBleGlzdGluZ0RhdGEgPSBkYXRhLlBlcm1pdHM7XG4gICAgaWYoZXhpc3RpbmdEYXRhLmxlbmd0aCAhPT0gMCkge1xuICAgICAgdGhpcy5WYWx1ZUxlbmd0aCA9IHRydWU7XG4gICAgICB0aGlzLlZhbHVlID0gZXhpc3RpbmdEYXRhO1xuICAgICAgJChcIiN6b25lSWNvblwiKS5jc3MoXCJib3JkZXJcIiwgXCIzcHggc29saWQgcmdiKDI1MiwgMzUsIDI3KVwiKTtcbiAgICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuVmFsdWVMZW5ndGggPSBmYWxzZTtcbiAgICAgIHRoaXMuVmFsdWUgPSBbXTtcbiAgICAgICQoXCIjem9uZUljb25cIikuY3NzKFwiYm9yZGVyXCIsIFwiM3B4IHNvbGlkIHJnYigxMiwgMTkwLCAxMilcIik7XG4gICAgIH1cbiAgfVxuXG59XG4iLCI8ZGl2ICBjbGFzcz1cImRyb3Bkb3duXCIgc3R5bGU9XCJjdXJzb3I6IHBvaW50ZXI7XCI+XG4gICAgPHNwYW4gaWQ9XCJ6b25lSWNvblwiPiAgXG4gICAgICA8aW1nIHNyYz1cIi4vLi4vLi4vLi4vLi4vLi4vYXNzZXRzL2ltYWdlcy9wZXJtaXRfaWNvbnMvem9uZS5wbmdcIiBzdHlsZT1cImhlaWdodDogMzVweDsgbWFyZ2luLWxlZnQ6IDBweDtcIiBhbHQ9XCJhZHYtc2VhcmNoXCI+XG4gICAgPC9zcGFuPlxuICAgIDxkaXYgY2xhc3M9XCJkcm9wZG93bi1jb250ZW50XCIgc3R5bGU9XCJtYXJnaW4tbGVmdDogLTMwMHB4OyBtaW4td2lkdGg6IDQxNXB4O1wiPlxuICAgICAgPGRpdiBjbGFzcz1cImNvbC1sZy0xMlwiPlxuICAgICAgICA8dGFibGUgY2xhc3M9XCJ0YWJsZSB0YWJsZS1zdHJpcGVkIHRhYmxlLWJvcmRlcmVkXCI+XG4gICAgICAgICAgPHRib2R5ICpuZ0lmPVwiIVZhbHVlTGVuZ3RoXCI+XG4gICAgICAgICAgICA8dHI+XG4gICAgICAgICAgICAgIDx0ZCBjb2xzcGFuPVwiM1wiIGNsYXNzPVwicGVybWlzc2lvbl95ZXNcIiBzdHlsZT1cImNvbG9yOiByZ2IoMTIsIDE5MCwgMTIpOyB0ZXh0LWFsaWduOiBjZW50ZXJcIj5cbiAgICAgICAgICAgICAgICA8c3Bhbj48Yj57eyBlcnJvck9iai5ub1Blcm1pdHMgfX08L2I+PC9zcGFuPlxuICAgICAgICAgICAgICAgIDxzcGFuPnt7IGVycm9yT2JqLm5vQWN0aXZlIH19PC9zcGFuPlxuICAgICAgICAgICAgICA8L3RkPlxuICAgICAgICAgICAgPC90cj5cbiAgICAgICAgICA8L3Rib2R5PlxuICAgICAgICAgIDx0Ym9keSBpZD1cInpvbmVEZXRhaWxzXCIgKm5nSWY9XCJWYWx1ZUxlbmd0aFwiPlxuICAgICAgICAgICAgPHRyPlxuICAgICAgICAgICAgICA8dGQgY29sc3Bhbj1cIjNcIiBjbGFzcz1cInBlcm1pc3Npb25feWVzXCIgc3R5bGU9XCJjb2xvcjogcmdiKDI1MiwgMzUsIDI3KTsgdGV4dC1hbGlnbjogY2VudGVyXCI+XG4gICAgICAgICAgICAgICAgPHNwYW4+PGI+e3sgZXJyb3JPYmoucGVybWl0cyB9fSAoe3tWYWx1ZS5sZW5ndGh9fSk8L2I+PC9zcGFuPlxuICAgICAgICAgICAgICAgIDxzcGFuPnt7IGVycm9yT2JqLmFjdGl2ZSB9fTwvc3Bhbj5cbiAgICAgICAgICAgICAgPC90ZD5cbiAgICAgICAgICAgIDwvdHI+XG4gICAgICAgICAgICA8dHIgKm5nRm9yPVwibGV0IGl0ZW0gb2YgVmFsdWVcIiA+XG4gICAgICAgICAgICAgIDx0ZD5cbiAgICAgICAgICAgICAgICA8c3Bhbj57e2l0ZW0/LnBlcm1pdF90eXBlfX0te3tpdGVtPy5yZWZfbm99fSAtIHt7aXRlbT8uc3RhdHVzfX0gLSB7e2l0ZW0/LmVuZF9kYXRlfX08L3NwYW4+XG4gICAgICAgICAgICAgIDwvdGQ+XG4gICAgICAgICAgICA8L3RyPlxuICAgICAgICAgIDwvdGJvZHk+XG4gICAgICAgIDwvdGFibGU+XG4gICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PiJdfQ==