@memberjunction/ng-explorer-core 0.9.75 → 0.9.78

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,14 +1,18 @@
1
1
  import { Router } from '@angular/router';
2
2
  import { DashboardEntity } from '@memberjunction/core-entities';
3
+ import { SharedService } from '../../shared/shared.service';
3
4
  import * as i0 from "@angular/core";
4
5
  export declare class DashboardBrowserComponent {
5
6
  private router;
7
+ private sharedService;
6
8
  dashboards: DashboardEntity[];
7
9
  showLoader: boolean;
8
- constructor(router: Router);
10
+ constructor(router: Router, sharedService: SharedService);
9
11
  ngOnInit(): void;
10
12
  LoadData(): Promise<void>;
11
13
  itemClick(item: DashboardEntity): void;
14
+ addNew(): Promise<void>;
15
+ deleteItem(item: DashboardEntity): Promise<void>;
12
16
  static ɵfac: i0.ɵɵFactoryDeclaration<DashboardBrowserComponent, never>;
13
17
  static ɵcmp: i0.ɵɵComponentDeclaration<DashboardBrowserComponent, "app-dashboard-browser", never, {}, {}, never, never, false, never>;
14
18
  }
@@ -9,12 +9,15 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
9
9
  };
10
10
  import { Component } from '@angular/core';
11
11
  import { Metadata, RunView } from '@memberjunction/core';
12
+ import { DashboardConfigDetails } from '../single-dashboard/single-dashboard.component';
12
13
  import * as i0 from "@angular/core";
13
14
  import * as i1 from "@angular/router";
14
- import * as i2 from "../generic-browse-list/generic-browse-list.component";
15
+ import * as i2 from "../../shared/shared.service";
16
+ import * as i3 from "../generic-browse-list/generic-browse-list.component";
15
17
  export class DashboardBrowserComponent {
16
- constructor(router) {
18
+ constructor(router, sharedService) {
17
19
  this.router = router;
20
+ this.sharedService = sharedService;
18
21
  this.dashboards = [];
19
22
  this.showLoader = false;
20
23
  }
@@ -30,8 +33,12 @@ export class DashboardBrowserComponent {
30
33
  EntityName: 'Dashboards',
31
34
  ExtraFilter: `UserID=${md.CurrentUser.ID}`
32
35
  });
33
- if (result && result.Success)
36
+ if (result && result.Success) {
34
37
  this.dashboards = result.Results;
38
+ }
39
+ else {
40
+ this.dashboards = [];
41
+ }
35
42
  this.showLoader = false;
36
43
  });
37
44
  }
@@ -40,16 +47,71 @@ export class DashboardBrowserComponent {
40
47
  this.router.navigate(['resource', 'dashboard', item.ID]);
41
48
  }
42
49
  }
50
+ addNew() {
51
+ return __awaiter(this, void 0, void 0, function* () {
52
+ this.showLoader = true;
53
+ const metadata = new Metadata();
54
+ let dashboardEntity = yield metadata.GetEntityObject('Dashboards');
55
+ dashboardEntity.NewRecord();
56
+ dashboardEntity.UserID = metadata.CurrentUser.ID;
57
+ let dashboardCount = this.dashboards.length;
58
+ let nameSuffix = dashboardCount > 0 ? `${dashboardCount + 1}` : "";
59
+ dashboardEntity.Name = "New Dashboard " + nameSuffix;
60
+ let defaultConfigDetails = new DashboardConfigDetails();
61
+ const config = {
62
+ columns: defaultConfigDetails.columns,
63
+ rowHeight: defaultConfigDetails.rowHeight,
64
+ resizable: defaultConfigDetails.resizable,
65
+ reorderable: defaultConfigDetails.reorderable,
66
+ items: []
67
+ };
68
+ const configJSON = JSON.stringify(config);
69
+ dashboardEntity.UIConfigDetails = configJSON;
70
+ const result = yield dashboardEntity.Save();
71
+ if (result) {
72
+ this.dashboards.push(dashboardEntity);
73
+ }
74
+ else {
75
+ this.sharedService.CreateSimpleNotification("Error creating new dashboard entity", "error");
76
+ }
77
+ this.showLoader = false;
78
+ });
79
+ }
80
+ deleteItem(item) {
81
+ return __awaiter(this, void 0, void 0, function* () {
82
+ this.showLoader = true;
83
+ if (item && item.ID && item.ID > 0) {
84
+ const md = new Metadata();
85
+ let dashboardEntity = yield md.GetEntityObject('Dashboards');
86
+ let loadResult = yield dashboardEntity.Load(item.ID);
87
+ if (loadResult) {
88
+ let deleteResult = yield dashboardEntity.Delete();
89
+ if (deleteResult) {
90
+ //todo - change these to use the shared
91
+ this.sharedService.CreateSimpleNotification(`successfully deleted dashboard record ${item.ID}`, "info");
92
+ this.dashboards = this.dashboards.filter(i => i.ID != item.ID);
93
+ }
94
+ else {
95
+ this.sharedService.CreateSimpleNotification(`Unable to delete dashboard record ${item.ID}`, "error");
96
+ }
97
+ }
98
+ else {
99
+ this.sharedService.CreateSimpleNotification(`unable to fetch dashboard record ${item.ID}`, "error");
100
+ }
101
+ }
102
+ this.showLoader = false;
103
+ });
104
+ }
43
105
  }
44
- DashboardBrowserComponent.ɵfac = function DashboardBrowserComponent_Factory(t) { return new (t || DashboardBrowserComponent)(i0.ɵɵdirectiveInject(i1.Router)); };
45
- DashboardBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DashboardBrowserComponent, selectors: [["app-dashboard-browser"]], decls: 1, vars: 2, consts: [["title", "Dashboards", "itemType", "dashboard", 3, "items", "showLoader", "itemClickEvent"]], template: function DashboardBrowserComponent_Template(rf, ctx) { if (rf & 1) {
106
+ DashboardBrowserComponent.ɵfac = function DashboardBrowserComponent_Factory(t) { return new (t || DashboardBrowserComponent)(i0.ɵɵdirectiveInject(i1.Router), i0.ɵɵdirectiveInject(i2.SharedService)); };
107
+ DashboardBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DashboardBrowserComponent, selectors: [["app-dashboard-browser"]], decls: 1, vars: 2, consts: [["title", "Dashboards", "itemType", "dashboard", 3, "items", "showLoader", "itemClickEvent", "addButtonClickEvent", "deleteButtonClickEvent"]], template: function DashboardBrowserComponent_Template(rf, ctx) { if (rf & 1) {
46
108
  i0.ɵɵelementStart(0, "app-generic-browse-list", 0);
47
- i0.ɵɵlistener("itemClickEvent", function DashboardBrowserComponent_Template_app_generic_browse_list_itemClickEvent_0_listener($event) { return ctx.itemClick($event); });
109
+ i0.ɵɵlistener("itemClickEvent", function DashboardBrowserComponent_Template_app_generic_browse_list_itemClickEvent_0_listener($event) { return ctx.itemClick($event); })("addButtonClickEvent", function DashboardBrowserComponent_Template_app_generic_browse_list_addButtonClickEvent_0_listener() { return ctx.addNew(); })("deleteButtonClickEvent", function DashboardBrowserComponent_Template_app_generic_browse_list_deleteButtonClickEvent_0_listener($event) { return ctx.deleteItem($event); });
48
110
  i0.ɵɵelementEnd();
49
111
  } if (rf & 2) {
50
112
  i0.ɵɵproperty("items", ctx.dashboards)("showLoader", ctx.showLoader);
51
- } }, dependencies: [i2.GenericBrowseListComponent], styles: [".main-area[_ngcontent-%COMP%] {\r\n display: flex;\r\n height: 100%;\r\n width: 100%;\r\n gap: 24px;\r\n padding: 24px 0;\r\n}\r\n.list-view[_ngcontent-%COMP%] {\r\n padding: 16px;\r\n min-width: 300px;\r\n border-radius: 4px;\r\n background: #FAFAFA;\r\n border: none;\r\n}\r\n .list-view .k-listview-header, .list-view .k-listview-footer {\r\n border: none;\r\n}\r\n .list-view .k-listview-content {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 4px;\r\n background: #fff;\r\n padding: 16px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%], .footer[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 16px;\r\n height: auto;\r\n margin:0;\r\n}\r\n\r\n.header[_ngcontent-%COMP%] {\r\n color: #424242;\r\n margin-bottom: 16px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n.header[_ngcontent-%COMP%] .head-tag[_ngcontent-%COMP%] {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] {\r\n width: 24px;\r\n height: 24px;\r\n min-width: 24px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-size: 10px;\r\n background: rgba(0, 0, 0, 0.08);\r\n border-radius: 50%;\r\n}\r\n.footer[_ngcontent-%COMP%] {\r\n font-size: 14px;\r\n margin-top: 16px;\r\n}\r\n\r\n.list-item[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 30px;\r\n cursor: pointer;\r\n margin: 4px;\r\n}\r\n.card-container[_ngcontent-%COMP%] {\r\n margin: 0;\r\n padding: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n }\r\n .card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n .card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n }\r\n\r\n \r\n\r\n\r\n \r\n .view-card[_ngcontent-%COMP%] .view-icon[_ngcontent-%COMP%] {\r\n color: #ff6358;\r\n }\r\n .card-wrapper[_ngcontent-%COMP%] {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 6px;\r\n }\r\n .card-wrapper[_ngcontent-%COMP%] .k-card-body[_ngcontent-%COMP%] {\r\n background: #fff;\r\n padding: 12px 20px;\r\n }\r\n .card-wrapper[_ngcontent-%COMP%] .view-card[_ngcontent-%COMP%] {\r\n overflow: auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: #fafafa;\r\n padding: 4px 15px;\r\n }\r\n .view-card[_ngcontent-%COMP%] .btn-wrapper[_ngcontent-%COMP%] {\r\n display: flex;\r\n align-items: center;\r\n }\r\n \r\n .k-card-body[_ngcontent-%COMP%] .view-card-content[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n margin-bottom: 0;\r\n letter-spacing: 0.18px;\r\n }\r\n .k-card-body[_ngcontent-%COMP%] .view-card-content[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\n color: #666;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n height: 48px;\r\n margin-bottom: 0;\r\n }\r\n .card-container[_ngcontent-%COMP%] {\r\n padding: 0;\r\n margin: 0;\r\n box-shadow: none;\r\n }\r\n .card-header-entity[_ngcontent-%COMP%] {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n }\r\n \r\n .card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n }\r\n .card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n .card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n }\r\n .main-area[_ngcontent-%COMP%] .card-list[_ngcontent-%COMP%] {\r\n display: flex;\r\n gap: 20px;\r\n }"] });
113
+ } }, dependencies: [i3.GenericBrowseListComponent], styles: [".main-area[_ngcontent-%COMP%] {\r\n display: flex;\r\n height: 100%;\r\n width: 100%;\r\n gap: 24px;\r\n padding: 24px 0;\r\n}\r\n.list-view[_ngcontent-%COMP%] {\r\n padding: 16px;\r\n min-width: 300px;\r\n border-radius: 4px;\r\n background: #FAFAFA;\r\n border: none;\r\n}\r\n .list-view .k-listview-header, .list-view .k-listview-footer {\r\n border: none;\r\n}\r\n .list-view .k-listview-content {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 4px;\r\n background: #fff;\r\n padding: 16px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%], .footer[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 16px;\r\n height: auto;\r\n margin:0;\r\n}\r\n\r\n.header[_ngcontent-%COMP%] {\r\n color: #424242;\r\n margin-bottom: 16px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n.header[_ngcontent-%COMP%] .head-tag[_ngcontent-%COMP%] {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] {\r\n width: 24px;\r\n height: 24px;\r\n min-width: 24px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-size: 10px;\r\n background: rgba(0, 0, 0, 0.08);\r\n border-radius: 50%;\r\n}\r\n.footer[_ngcontent-%COMP%] {\r\n font-size: 14px;\r\n margin-top: 16px;\r\n}\r\n\r\n.list-item[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 30px;\r\n cursor: pointer;\r\n margin: 4px;\r\n}\r\n.card-container[_ngcontent-%COMP%] {\r\n margin: 0;\r\n padding: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n }\r\n .card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n .card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n }\r\n\r\n \r\n\r\n\r\n \r\n .view-card[_ngcontent-%COMP%] .view-icon[_ngcontent-%COMP%] {\r\n color: #ff6358;\r\n }\r\n .card-wrapper[_ngcontent-%COMP%] {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 6px;\r\n }\r\n .card-wrapper[_ngcontent-%COMP%] .k-card-body[_ngcontent-%COMP%] {\r\n background: #fff;\r\n padding: 12px 20px;\r\n }\r\n .card-wrapper[_ngcontent-%COMP%] .view-card[_ngcontent-%COMP%] {\r\n overflow: auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: #fafafa;\r\n padding: 4px 15px;\r\n }\r\n .view-card[_ngcontent-%COMP%] .btn-wrapper[_ngcontent-%COMP%] {\r\n display: flex;\r\n align-items: center;\r\n }\r\n \r\n .k-card-body[_ngcontent-%COMP%] .view-card-content[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n margin-bottom: 0;\r\n letter-spacing: 0.18px;\r\n }\r\n .k-card-body[_ngcontent-%COMP%] .view-card-content[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\n color: #666;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n height: 48px;\r\n margin-bottom: 0;\r\n }\r\n .card-container[_ngcontent-%COMP%] {\r\n padding: 0;\r\n margin: 0;\r\n box-shadow: none;\r\n }\r\n .card-header-entity[_ngcontent-%COMP%] {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n }\r\n \r\n .card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n }\r\n .card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n .card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n }\r\n .main-area[_ngcontent-%COMP%] .card-list[_ngcontent-%COMP%] {\r\n display: flex;\r\n gap: 20px;\r\n }"] });
52
114
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DashboardBrowserComponent, [{
53
115
  type: Component,
54
- args: [{ selector: 'app-dashboard-browser', template: "<app-generic-browse-list title=\"Dashboards\" itemType=\"dashboard\" [items]=\"dashboards\" (itemClickEvent)=\"itemClick($event)\" [showLoader]=\"showLoader\">\n\n</app-generic-browse-list>", styles: ["\r\n.main-area {\r\n display: flex;\r\n height: 100%;\r\n width: 100%;\r\n gap: 24px;\r\n padding: 24px 0;\r\n}\r\n.list-view {\r\n padding: 16px;\r\n min-width: 300px;\r\n border-radius: 4px;\r\n background: #FAFAFA;\r\n border: none;\r\n}\r\n::ng-deep .list-view .k-listview-header, \r\n::ng-deep .list-view .k-listview-footer {\r\n border: none;\r\n}\r\n::ng-deep .list-view .k-listview-content {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 4px;\r\n background: #fff;\r\n padding: 16px;\r\n}\r\n\r\n.header,\r\n.footer {\r\n color: #424242;\r\n font-size: 16px;\r\n height: auto;\r\n margin:0;\r\n}\r\n\r\n.header {\r\n color: #424242;\r\n margin-bottom: 16px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n.header .head-tag {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header .count {\r\n width: 24px;\r\n height: 24px;\r\n min-width: 24px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-size: 10px;\r\n background: rgba(0, 0, 0, 0.08);\r\n border-radius: 50%;\r\n}\r\n.footer {\r\n font-size: 14px;\r\n margin-top: 16px;\r\n}\r\n\r\n.list-item {\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 30px;\r\n cursor: pointer;\r\n margin: 4px;\r\n}\r\n.card-container {\r\n margin: 0;\r\n padding: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity .title-wrap h1 {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n }\r\n .card-header-entity .title-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n .card-header-entity .title-wrap p {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n }\r\n\r\n \r\n\r\n\r\n \r\n .view-card .view-icon {\r\n color: #ff6358;\r\n }\r\n .card-wrapper {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 6px;\r\n }\r\n .card-wrapper .k-card-body {\r\n background: #fff;\r\n padding: 12px 20px;\r\n }\r\n .card-wrapper .view-card {\r\n overflow: auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: #fafafa;\r\n padding: 4px 15px;\r\n }\r\n .view-card .btn-wrapper {\r\n display: flex;\r\n align-items: center;\r\n }\r\n \r\n .k-card-body .view-card-content h5 {\r\n color: #424242;\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n margin-bottom: 0;\r\n letter-spacing: 0.18px;\r\n }\r\n .k-card-body .view-card-content p {\r\n color: #666;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n height: 48px;\r\n margin-bottom: 0;\r\n }\r\n .card-container {\r\n padding: 0;\r\n margin: 0;\r\n box-shadow: none;\r\n }\r\n .card-header-entity {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n }\r\n \r\n .card-header-entity .title-wrap h1 {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n }\r\n .card-header-entity .title-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n .card-header-entity .title-wrap p {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n }\r\n .main-area .card-list {\r\n display: flex;\r\n gap: 20px;\r\n }\r\n "] }]
55
- }], function () { return [{ type: i1.Router }]; }, null); })();
116
+ args: [{ selector: 'app-dashboard-browser', template: "<app-generic-browse-list title=\"Dashboards\" itemType=\"dashboard\" [items]=\"dashboards\" (itemClickEvent)=\"itemClick($event)\" (addButtonClickEvent)=\"addNew()\" (deleteButtonClickEvent)=\"deleteItem($event)\" [showLoader]=\"showLoader\">\r\n\r\n</app-generic-browse-list>", styles: ["\r\n.main-area {\r\n display: flex;\r\n height: 100%;\r\n width: 100%;\r\n gap: 24px;\r\n padding: 24px 0;\r\n}\r\n.list-view {\r\n padding: 16px;\r\n min-width: 300px;\r\n border-radius: 4px;\r\n background: #FAFAFA;\r\n border: none;\r\n}\r\n::ng-deep .list-view .k-listview-header, \r\n::ng-deep .list-view .k-listview-footer {\r\n border: none;\r\n}\r\n::ng-deep .list-view .k-listview-content {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 4px;\r\n background: #fff;\r\n padding: 16px;\r\n}\r\n\r\n.header,\r\n.footer {\r\n color: #424242;\r\n font-size: 16px;\r\n height: auto;\r\n margin:0;\r\n}\r\n\r\n.header {\r\n color: #424242;\r\n margin-bottom: 16px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n.header .head-tag {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header .count {\r\n width: 24px;\r\n height: 24px;\r\n min-width: 24px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-size: 10px;\r\n background: rgba(0, 0, 0, 0.08);\r\n border-radius: 50%;\r\n}\r\n.footer {\r\n font-size: 14px;\r\n margin-top: 16px;\r\n}\r\n\r\n.list-item {\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 30px;\r\n cursor: pointer;\r\n margin: 4px;\r\n}\r\n.card-container {\r\n margin: 0;\r\n padding: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity .title-wrap h1 {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n }\r\n .card-header-entity .title-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n .card-header-entity .title-wrap p {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n }\r\n\r\n \r\n\r\n\r\n \r\n .view-card .view-icon {\r\n color: #ff6358;\r\n }\r\n .card-wrapper {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 6px;\r\n }\r\n .card-wrapper .k-card-body {\r\n background: #fff;\r\n padding: 12px 20px;\r\n }\r\n .card-wrapper .view-card {\r\n overflow: auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: #fafafa;\r\n padding: 4px 15px;\r\n }\r\n .view-card .btn-wrapper {\r\n display: flex;\r\n align-items: center;\r\n }\r\n \r\n .k-card-body .view-card-content h5 {\r\n color: #424242;\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n margin-bottom: 0;\r\n letter-spacing: 0.18px;\r\n }\r\n .k-card-body .view-card-content p {\r\n color: #666;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n height: 48px;\r\n margin-bottom: 0;\r\n }\r\n .card-container {\r\n padding: 0;\r\n margin: 0;\r\n box-shadow: none;\r\n }\r\n .card-header-entity {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n }\r\n \r\n .card-header-entity .title-wrap h1 {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n }\r\n .card-header-entity .title-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n .card-header-entity .title-wrap p {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n }\r\n .main-area .card-list {\r\n display: flex;\r\n gap: 20px;\r\n }\r\n "] }]
117
+ }], function () { return [{ type: i1.Router }, { type: i2.SharedService }]; }, null); })();
@@ -10,11 +10,15 @@ export declare class GenericBrowseListComponent {
10
10
  iconName: string;
11
11
  showAddButton: boolean;
12
12
  addText: string;
13
+ backText: string;
13
14
  addButtonClickEvent: EventEmitter<any>;
15
+ deleteButtonClickEvent: EventEmitter<any>;
14
16
  itemClickEvent: EventEmitter<any>;
15
17
  constructor(router: Router);
16
18
  itemClick(item: any): void;
19
+ deleteItem(item: any): void;
17
20
  addButtonClicked(): void;
21
+ goHomeButtonClicked(): void;
18
22
  static ɵfac: i0.ɵɵFactoryDeclaration<GenericBrowseListComponent, never>;
19
- static ɵcmp: i0.ɵɵComponentDeclaration<GenericBrowseListComponent, "app-generic-browse-list", never, { "showLoader": "showLoader"; "itemType": "itemType"; "title": "title"; "items": "items"; "iconName": "iconName"; "showAddButton": "showAddButton"; "addText": "addText"; }, { "addButtonClickEvent": "addButtonClickEvent"; "itemClickEvent": "itemClickEvent"; }, never, never, false, never>;
23
+ static ɵcmp: i0.ɵɵComponentDeclaration<GenericBrowseListComponent, "app-generic-browse-list", never, { "showLoader": "showLoader"; "itemType": "itemType"; "title": "title"; "items": "items"; "iconName": "iconName"; "showAddButton": "showAddButton"; "addText": "addText"; "backText": "backText"; }, { "addButtonClickEvent": "addButtonClickEvent"; "deleteButtonClickEvent": "deleteButtonClickEvent"; "itemClickEvent": "itemClickEvent"; }, never, never, false, never>;
20
24
  }
@@ -6,35 +6,41 @@ import * as i3 from "@progress/kendo-angular-buttons";
6
6
  import * as i4 from "@progress/kendo-angular-indicators";
7
7
  import * as i5 from "@progress/kendo-angular-icons";
8
8
  import * as i6 from "@progress/kendo-angular-layout";
9
- function GenericBrowseListComponent_kendo_loader_9_Template(rf, ctx) { if (rf & 1) {
10
- i0.ɵɵelement(0, "kendo-loader", 8);
9
+ function GenericBrowseListComponent_kendo_loader_13_Template(rf, ctx) { if (rf & 1) {
10
+ i0.ɵɵelement(0, "kendo-loader", 10);
11
11
  } }
12
- function GenericBrowseListComponent_div_10_div_1_Template(rf, ctx) { if (rf & 1) {
12
+ function GenericBrowseListComponent_div_14_div_1_Template(rf, ctx) { if (rf & 1) {
13
13
  const _r5 = i0.ɵɵgetCurrentView();
14
- i0.ɵɵelementStart(0, "div")(1, "kendo-card", 11)(2, "kendo-card-header", 12);
15
- i0.ɵɵelement(3, "kendo-icon", 13);
14
+ i0.ɵɵelementStart(0, "div")(1, "kendo-card", 13)(2, "kendo-card-header", 14);
15
+ i0.ɵɵelement(3, "kendo-icon", 15);
16
+ i0.ɵɵelementStart(4, "div", 16)(5, "button", 17);
17
+ i0.ɵɵelement(6, "span", 18);
16
18
  i0.ɵɵelementEnd();
17
- i0.ɵɵelementStart(4, "kendo-card-body", 14);
18
- i0.ɵɵlistener("click", function GenericBrowseListComponent_div_10_div_1_Template_kendo_card_body_click_4_listener() { const restoredCtx = i0.ɵɵrestoreView(_r5); const d_r3 = restoredCtx.$implicit; const ctx_r4 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r4.itemClick(d_r3)); });
19
- i0.ɵɵelementStart(5, "div", 15)(6, "h5", 16);
20
- i0.ɵɵtext(7);
19
+ i0.ɵɵelementStart(7, "button", 19);
20
+ i0.ɵɵlistener("click", function GenericBrowseListComponent_div_14_div_1_Template_button_click_7_listener() { const restoredCtx = i0.ɵɵrestoreView(_r5); const d_r3 = restoredCtx.$implicit; const ctx_r4 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r4.deleteItem(d_r3)); });
21
+ i0.ɵɵelement(8, "span", 20);
22
+ i0.ɵɵelementEnd()()();
23
+ i0.ɵɵelementStart(9, "kendo-card-body", 21);
24
+ i0.ɵɵlistener("click", function GenericBrowseListComponent_div_14_div_1_Template_kendo_card_body_click_9_listener() { const restoredCtx = i0.ɵɵrestoreView(_r5); const d_r3 = restoredCtx.$implicit; const ctx_r6 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r6.itemClick(d_r3)); });
25
+ i0.ɵɵelementStart(10, "div", 22)(11, "h5", 23);
26
+ i0.ɵɵtext(12);
21
27
  i0.ɵɵelementEnd();
22
- i0.ɵɵelementStart(8, "p", 17);
23
- i0.ɵɵtext(9);
28
+ i0.ɵɵelementStart(13, "p", 24);
29
+ i0.ɵɵtext(14);
24
30
  i0.ɵɵelementEnd()()()()();
25
31
  } if (rf & 2) {
26
32
  const d_r3 = ctx.$implicit;
27
33
  const ctx_r2 = i0.ɵɵnextContext(2);
28
34
  i0.ɵɵadvance(3);
29
35
  i0.ɵɵclassMap(ctx_r2.iconName);
30
- i0.ɵɵadvance(4);
36
+ i0.ɵɵadvance(9);
31
37
  i0.ɵɵtextInterpolate(d_r3.Name);
32
38
  i0.ɵɵadvance(2);
33
39
  i0.ɵɵtextInterpolate(d_r3.Description);
34
40
  } }
35
- function GenericBrowseListComponent_div_10_Template(rf, ctx) { if (rf & 1) {
36
- i0.ɵɵelementStart(0, "div", 9);
37
- i0.ɵɵtemplate(1, GenericBrowseListComponent_div_10_div_1_Template, 10, 4, "div", 10);
41
+ function GenericBrowseListComponent_div_14_Template(rf, ctx) { if (rf & 1) {
42
+ i0.ɵɵelementStart(0, "div", 11);
43
+ i0.ɵɵtemplate(1, GenericBrowseListComponent_div_14_div_1_Template, 15, 4, "div", 12);
38
44
  i0.ɵɵelementEnd();
39
45
  } if (rf & 2) {
40
46
  const ctx_r1 = i0.ɵɵnextContext();
@@ -50,39 +56,60 @@ export class GenericBrowseListComponent {
50
56
  this.items = [];
51
57
  this.iconName = 'view-icon';
52
58
  this.showAddButton = false;
53
- this.addText = 'Add';
59
+ this.addText = 'Create New';
60
+ this.backText = 'Go Back';
54
61
  this.addButtonClickEvent = new EventEmitter();
62
+ this.deleteButtonClickEvent = new EventEmitter();
55
63
  this.itemClickEvent = new EventEmitter();
64
+ this.router = router;
56
65
  }
57
66
  itemClick(item) {
58
67
  if (item) {
59
68
  this.itemClickEvent.emit(item);
60
69
  }
61
70
  }
71
+ deleteItem(item) {
72
+ if (item) {
73
+ this.deleteButtonClickEvent.emit(item);
74
+ }
75
+ }
62
76
  addButtonClicked() {
63
77
  this.addButtonClickEvent.emit();
64
78
  }
79
+ goHomeButtonClicked() {
80
+ this.router.navigate(["dashboard"]);
81
+ }
65
82
  }
66
83
  GenericBrowseListComponent.ɵfac = function GenericBrowseListComponent_Factory(t) { return new (t || GenericBrowseListComponent)(i0.ɵɵdirectiveInject(i1.Router)); };
67
- GenericBrowseListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GenericBrowseListComponent, selectors: [["app-generic-browse-list"]], inputs: { showLoader: "showLoader", itemType: "itemType", title: "title", items: "items", iconName: "iconName", showAddButton: "showAddButton", addText: "addText" }, outputs: { addButtonClickEvent: "addButtonClickEvent", itemClickEvent: "itemClickEvent" }, decls: 11, vars: 5, consts: [[1, "card-container"], [1, "card-header-entity"], [1, "title-wrap"], [1, "add-item"], ["kendoButton", "", "icon", "addIcon", 3, "primary", "click"], [1, "main-area"], ["type", "converging-spinner", 4, "ngIf"], ["class", "card-list k-d-flex k-flex-row k-h-full k-flex-wrap", 4, "ngIf"], ["type", "converging-spinner"], [1, "card-list", "k-d-flex", "k-flex-row", "k-h-full", "k-flex-wrap"], [4, "ngFor", "ngForOf"], [1, "card-wrapper"], [1, "k-hstack", "view-card"], ["name", "table"], [3, "click"], [1, "view-card-content", "k-cursor-pointer"], ["kendoCardTitle", ""], ["kendoCardSubtitle", ""]], template: function GenericBrowseListComponent_Template(rf, ctx) { if (rf & 1) {
84
+ GenericBrowseListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GenericBrowseListComponent, selectors: [["app-generic-browse-list"]], inputs: { showLoader: "showLoader", itemType: "itemType", title: "title", items: "items", iconName: "iconName", showAddButton: "showAddButton", addText: "addText", backText: "backText" }, outputs: { addButtonClickEvent: "addButtonClickEvent", deleteButtonClickEvent: "deleteButtonClickEvent", itemClickEvent: "itemClickEvent" }, decls: 15, vars: 7, consts: [[1, "card-container"], [1, "card-header-entity"], [1, "title-wrap"], [1, "add-item"], ["kendoButton", "", 3, "primary", "click"], [1, "k-icon", "k-font-icon", "k-i-plus"], [1, "k-icon", "k-font-icon", "k-i-chevron-left"], [1, "main-area"], ["type", "converging-spinner", 4, "ngIf"], ["class", "card-list k-d-flex k-flex-row k-h-full k-flex-wrap", 4, "ngIf"], ["type", "converging-spinner"], [1, "card-list", "k-d-flex", "k-flex-row", "k-h-full", "k-flex-wrap"], [4, "ngFor", "ngForOf"], [1, "card-wrapper"], [1, "k-hstack", "view-card"], ["name", "table"], [1, "btn-wrapper"], ["kendoButton", "", "fillMode", "flat"], [1, "k-icon", "k-i-edit"], ["kendoButton", "", "fillMode", "flat", 3, "click"], [1, "k-icon", "k-i-delete"], [3, "click"], [1, "view-card-content", "k-cursor-pointer"], ["kendoCardTitle", ""], ["kendoCardSubtitle", ""]], template: function GenericBrowseListComponent_Template(rf, ctx) { if (rf & 1) {
68
85
  i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h1");
69
86
  i0.ɵɵtext(4);
70
87
  i0.ɵɵelementEnd()();
71
88
  i0.ɵɵelementStart(5, "div", 3)(6, "button", 4);
72
89
  i0.ɵɵlistener("click", function GenericBrowseListComponent_Template_button_click_6_listener() { return ctx.addButtonClicked(); });
73
- i0.ɵɵtext(7);
90
+ i0.ɵɵelement(7, "span", 5);
91
+ i0.ɵɵtext(8);
92
+ i0.ɵɵelementEnd();
93
+ i0.ɵɵelementStart(9, "button", 4);
94
+ i0.ɵɵlistener("click", function GenericBrowseListComponent_Template_button_click_9_listener() { return ctx.goHomeButtonClicked(); });
95
+ i0.ɵɵelement(10, "span", 6);
96
+ i0.ɵɵtext(11);
74
97
  i0.ɵɵelementEnd()()();
75
- i0.ɵɵelementStart(8, "div", 5);
76
- i0.ɵɵtemplate(9, GenericBrowseListComponent_kendo_loader_9_Template, 1, 0, "kendo-loader", 6);
77
- i0.ɵɵtemplate(10, GenericBrowseListComponent_div_10_Template, 2, 1, "div", 7);
98
+ i0.ɵɵelementStart(12, "div", 7);
99
+ i0.ɵɵtemplate(13, GenericBrowseListComponent_kendo_loader_13_Template, 1, 0, "kendo-loader", 8);
100
+ i0.ɵɵtemplate(14, GenericBrowseListComponent_div_14_Template, 2, 1, "div", 9);
78
101
  i0.ɵɵelementEnd()();
79
102
  } if (rf & 2) {
80
103
  i0.ɵɵadvance(4);
81
104
  i0.ɵɵtextInterpolate(ctx.title);
82
105
  i0.ɵɵadvance(2);
83
106
  i0.ɵɵproperty("primary", true);
107
+ i0.ɵɵadvance(2);
108
+ i0.ɵɵtextInterpolate1(" ", ctx.addText, " ");
84
109
  i0.ɵɵadvance(1);
85
- i0.ɵɵtextInterpolate(ctx.addText);
110
+ i0.ɵɵproperty("primary", true);
111
+ i0.ɵɵadvance(2);
112
+ i0.ɵɵtextInterpolate1(" ", ctx.backText, " ");
86
113
  i0.ɵɵadvance(2);
87
114
  i0.ɵɵproperty("ngIf", ctx.showLoader);
88
115
  i0.ɵɵadvance(1);
@@ -90,7 +117,7 @@ GenericBrowseListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
90
117
  } }, dependencies: [i2.NgForOf, i2.NgIf, i3.Button, i4.LoaderComponent, i5.IconComponent, i6.CardComponent, i6.CardHeaderComponent, i6.CardBodyComponent, i6.CardTitleDirective, i6.CardSubtitleDirective], styles: [".main-area[_ngcontent-%COMP%] {\r\n display: flex;\r\n height: 100%;\r\n width: 100%;\r\n gap: 24px;\r\n padding: 24px 0;\r\n}\r\n.list-view[_ngcontent-%COMP%] {\r\n padding: 16px;\r\n min-width: 300px;\r\n border-radius: 4px;\r\n background: #FAFAFA;\r\n border: none;\r\n}\r\n .list-view .k-listview-header, .list-view .k-listview-footer {\r\n border: none;\r\n}\r\n .list-view .k-listview-content {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 4px;\r\n background: #fff;\r\n padding: 16px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%], .footer[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 16px;\r\n height: auto;\r\n margin:0;\r\n}\r\n\r\n.header[_ngcontent-%COMP%] {\r\n color: #424242;\r\n margin-bottom: 16px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n.header[_ngcontent-%COMP%] .head-tag[_ngcontent-%COMP%] {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] {\r\n width: 24px;\r\n height: 24px;\r\n min-width: 24px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-size: 10px;\r\n background: rgba(0, 0, 0, 0.08);\r\n border-radius: 50%;\r\n}\r\n.footer[_ngcontent-%COMP%] {\r\n font-size: 14px;\r\n margin-top: 16px;\r\n}\r\n\r\n.list-item[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 30px;\r\n cursor: pointer;\r\n margin: 4px;\r\n}\r\n.card-container[_ngcontent-%COMP%] {\r\n margin: 0;\r\n padding: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n }\r\n .card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n .card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n }\r\n\r\n \r\n\r\n\r\n \r\n .view-card[_ngcontent-%COMP%] .view-icon[_ngcontent-%COMP%] {\r\n color: #ff6358;\r\n }\r\n .card-wrapper[_ngcontent-%COMP%] {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 6px;\r\n }\r\n .card-wrapper[_ngcontent-%COMP%] .k-card-body[_ngcontent-%COMP%] {\r\n background: #fff;\r\n padding: 12px 20px;\r\n }\r\n .card-wrapper[_ngcontent-%COMP%] .view-card[_ngcontent-%COMP%] {\r\n overflow: auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: #fafafa;\r\n padding: 4px 15px;\r\n }\r\n .view-card[_ngcontent-%COMP%] .btn-wrapper[_ngcontent-%COMP%] {\r\n display: flex;\r\n align-items: center;\r\n }\r\n \r\n .k-card-body[_ngcontent-%COMP%] .view-card-content[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n margin-bottom: 0;\r\n letter-spacing: 0.18px;\r\n }\r\n .k-card-body[_ngcontent-%COMP%] .view-card-content[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\n color: #666;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n height: 48px;\r\n margin-bottom: 0;\r\n }\r\n .card-container[_ngcontent-%COMP%] {\r\n padding: 0;\r\n margin: 0;\r\n box-shadow: none;\r\n }\r\n .card-header-entity[_ngcontent-%COMP%] {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n }\r\n \r\n .card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n }\r\n .card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n .card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n }\r\n .main-area[_ngcontent-%COMP%] .card-list[_ngcontent-%COMP%] {\r\n display: flex;\r\n gap: 20px;\r\n }"] });
91
118
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GenericBrowseListComponent, [{
92
119
  type: Component,
93
- args: [{ selector: 'app-generic-browse-list', template: "<div class=\"card-container\">\n <div class=\"card-header-entity\">\n <div class=\"title-wrap\">\n <h1>{{title}}</h1>\n </div>\n <div class=\"add-item\">\n <button kendoButton (click)=\"addButtonClicked()\" icon=\"addIcon\" [primary]=\"true\">{{addText}}</button>\n </div>\n </div>\n <div class=\"main-area\"> \n <kendo-loader *ngIf=\"showLoader\" type=\"converging-spinner\" ></kendo-loader>\n <div class=\"card-list k-d-flex k-flex-row k-h-full k-flex-wrap\" *ngIf=\"!showLoader\">\n <div *ngFor=\"let d of items\">\n <kendo-card class=\"card-wrapper\">\n <kendo-card-header class=\"k-hstack view-card\">\n <kendo-icon name=\"table\" [class]=\"iconName\"></kendo-icon>\n </kendo-card-header>\n \n <kendo-card-body (click)=\"itemClick(d)\">\n <div class=\"view-card-content k-cursor-pointer\">\n <h5 kendoCardTitle>{{ d.Name }}</h5>\n <p kendoCardSubtitle>{{ d.Description }}</p>\n </div>\n </kendo-card-body>\n </kendo-card>\n </div>\n </div>\n </div>\n</div>", styles: ["\r\n.main-area {\r\n display: flex;\r\n height: 100%;\r\n width: 100%;\r\n gap: 24px;\r\n padding: 24px 0;\r\n}\r\n.list-view {\r\n padding: 16px;\r\n min-width: 300px;\r\n border-radius: 4px;\r\n background: #FAFAFA;\r\n border: none;\r\n}\r\n::ng-deep .list-view .k-listview-header, \r\n::ng-deep .list-view .k-listview-footer {\r\n border: none;\r\n}\r\n::ng-deep .list-view .k-listview-content {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 4px;\r\n background: #fff;\r\n padding: 16px;\r\n}\r\n\r\n.header,\r\n.footer {\r\n color: #424242;\r\n font-size: 16px;\r\n height: auto;\r\n margin:0;\r\n}\r\n\r\n.header {\r\n color: #424242;\r\n margin-bottom: 16px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n.header .head-tag {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header .count {\r\n width: 24px;\r\n height: 24px;\r\n min-width: 24px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-size: 10px;\r\n background: rgba(0, 0, 0, 0.08);\r\n border-radius: 50%;\r\n}\r\n.footer {\r\n font-size: 14px;\r\n margin-top: 16px;\r\n}\r\n\r\n.list-item {\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 30px;\r\n cursor: pointer;\r\n margin: 4px;\r\n}\r\n.card-container {\r\n margin: 0;\r\n padding: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity .title-wrap h1 {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n }\r\n .card-header-entity .title-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n .card-header-entity .title-wrap p {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n }\r\n\r\n \r\n\r\n\r\n \r\n .view-card .view-icon {\r\n color: #ff6358;\r\n }\r\n .card-wrapper {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 6px;\r\n }\r\n .card-wrapper .k-card-body {\r\n background: #fff;\r\n padding: 12px 20px;\r\n }\r\n .card-wrapper .view-card {\r\n overflow: auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: #fafafa;\r\n padding: 4px 15px;\r\n }\r\n .view-card .btn-wrapper {\r\n display: flex;\r\n align-items: center;\r\n }\r\n \r\n .k-card-body .view-card-content h5 {\r\n color: #424242;\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n margin-bottom: 0;\r\n letter-spacing: 0.18px;\r\n }\r\n .k-card-body .view-card-content p {\r\n color: #666;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n height: 48px;\r\n margin-bottom: 0;\r\n }\r\n .card-container {\r\n padding: 0;\r\n margin: 0;\r\n box-shadow: none;\r\n }\r\n .card-header-entity {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n }\r\n \r\n .card-header-entity .title-wrap h1 {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n }\r\n .card-header-entity .title-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n .card-header-entity .title-wrap p {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n }\r\n .main-area .card-list {\r\n display: flex;\r\n gap: 20px;\r\n }\r\n "] }]
120
+ args: [{ selector: 'app-generic-browse-list', template: "<div class=\"card-container\">\r\n <div class=\"card-header-entity\">\r\n <div class=\"title-wrap\">\r\n <h1>{{title}}</h1>\r\n </div>\r\n <div class=\"add-item\">\r\n <button kendoButton (click)=\"addButtonClicked()\" [primary]=\"true\">\r\n <span class=\"k-icon k-font-icon k-i-plus\"></span>\r\n {{addText}}\r\n </button>\r\n <button kendoButton (click)=\"goHomeButtonClicked()\" [primary]=\"true\">\r\n <span class=\"k-icon k-font-icon k-i-chevron-left\"></span>\r\n {{backText}}\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"main-area\"> \r\n <kendo-loader *ngIf=\"showLoader\" type=\"converging-spinner\" ></kendo-loader>\r\n <div class=\"card-list k-d-flex k-flex-row k-h-full k-flex-wrap\" *ngIf=\"!showLoader\">\r\n <div *ngFor=\"let d of items\">\r\n <kendo-card class=\"card-wrapper\">\r\n <kendo-card-header class=\"k-hstack view-card\">\r\n <kendo-icon name=\"table\" [class]=\"iconName\"></kendo-icon>\r\n <div class=\"btn-wrapper\">\r\n <button kendoButton fillMode=\"flat\">\r\n <span class=\"k-icon k-i-edit\"></span>\r\n </button>\r\n <button kendoButton fillMode=\"flat\" (click)=\"deleteItem(d)\"><span\r\n class=\"k-icon k-i-delete\"></span></button>\r\n </div>\r\n </kendo-card-header>\r\n <kendo-card-body (click)=\"itemClick(d)\">\r\n <div class=\"view-card-content k-cursor-pointer\">\r\n <h5 kendoCardTitle>{{ d.Name }}</h5>\r\n <p kendoCardSubtitle>{{ d.Description }}</p>\r\n </div>\r\n </kendo-card-body>\r\n </kendo-card>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["\r\n.main-area {\r\n display: flex;\r\n height: 100%;\r\n width: 100%;\r\n gap: 24px;\r\n padding: 24px 0;\r\n}\r\n.list-view {\r\n padding: 16px;\r\n min-width: 300px;\r\n border-radius: 4px;\r\n background: #FAFAFA;\r\n border: none;\r\n}\r\n::ng-deep .list-view .k-listview-header, \r\n::ng-deep .list-view .k-listview-footer {\r\n border: none;\r\n}\r\n::ng-deep .list-view .k-listview-content {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 4px;\r\n background: #fff;\r\n padding: 16px;\r\n}\r\n\r\n.header,\r\n.footer {\r\n color: #424242;\r\n font-size: 16px;\r\n height: auto;\r\n margin:0;\r\n}\r\n\r\n.header {\r\n color: #424242;\r\n margin-bottom: 16px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n.header .head-tag {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header .count {\r\n width: 24px;\r\n height: 24px;\r\n min-width: 24px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-size: 10px;\r\n background: rgba(0, 0, 0, 0.08);\r\n border-radius: 50%;\r\n}\r\n.footer {\r\n font-size: 14px;\r\n margin-top: 16px;\r\n}\r\n\r\n.list-item {\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 30px;\r\n cursor: pointer;\r\n margin: 4px;\r\n}\r\n.card-container {\r\n margin: 0;\r\n padding: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity .title-wrap h1 {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n }\r\n .card-header-entity .title-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n .card-header-entity .title-wrap p {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n }\r\n\r\n \r\n\r\n\r\n \r\n .view-card .view-icon {\r\n color: #ff6358;\r\n }\r\n .card-wrapper {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 6px;\r\n }\r\n .card-wrapper .k-card-body {\r\n background: #fff;\r\n padding: 12px 20px;\r\n }\r\n .card-wrapper .view-card {\r\n overflow: auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: #fafafa;\r\n padding: 4px 15px;\r\n }\r\n .view-card .btn-wrapper {\r\n display: flex;\r\n align-items: center;\r\n }\r\n \r\n .k-card-body .view-card-content h5 {\r\n color: #424242;\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n margin-bottom: 0;\r\n letter-spacing: 0.18px;\r\n }\r\n .k-card-body .view-card-content p {\r\n color: #666;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n height: 48px;\r\n margin-bottom: 0;\r\n }\r\n .card-container {\r\n padding: 0;\r\n margin: 0;\r\n box-shadow: none;\r\n }\r\n .card-header-entity {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n }\r\n \r\n .card-header-entity .title-wrap h1 {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n }\r\n .card-header-entity .title-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n .card-header-entity .title-wrap p {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n }\r\n .main-area .card-list {\r\n display: flex;\r\n gap: 20px;\r\n }\r\n "] }]
94
121
  }], function () { return [{ type: i1.Router }]; }, { showLoader: [{
95
122
  type: Input
96
123
  }], itemType: [{
@@ -105,8 +132,12 @@ GenericBrowseListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
105
132
  type: Input
106
133
  }], addText: [{
107
134
  type: Input
135
+ }], backText: [{
136
+ type: Input
108
137
  }], addButtonClickEvent: [{
109
138
  type: Output
139
+ }], deleteButtonClickEvent: [{
140
+ type: Output
110
141
  }], itemClickEvent: [{
111
142
  type: Output
112
143
  }] }); })();
@@ -667,7 +667,7 @@ export class NavigationComponent {
667
667
  else {
668
668
  wsItem = tab.workspaceItem;
669
669
  }
670
- wsItem.ResourceRecordID = tab.data.ResourceRecordID;
670
+ wsItem.ResourceRecordID = tab.data.ResourceRecordID.toString();
671
671
  wsItem.Sequence = index;
672
672
  wsItem.Configuration = JSON.stringify(tab.data.Configuration); // JSON.stringify({ Entity: tab.data.Entity });
673
673
  const result = yield wsItem.Save();
@@ -154,7 +154,7 @@ export class AddItemComponent {
154
154
  title: name ? name : 'New Item - ' + id,
155
155
  col: 1,
156
156
  rowSpan: 3,
157
- colSpan: 1,
157
+ colSpan: 2,
158
158
  ResourceData: new ResourceData({
159
159
  Name: '',
160
160
  ResourceTypeID: this.resourceType.ID,
@@ -0,0 +1,13 @@
1
+ import { EventEmitter, OnInit } from '@angular/core';
2
+ import { DashboardItem } from '../../single-dashboard.component';
3
+ import * as i0 from "@angular/core";
4
+ export declare class DeleteItemComponent implements OnInit {
5
+ onClose: EventEmitter<any>;
6
+ removeDashboardItem: EventEmitter<any>;
7
+ dashboardItem: DashboardItem | null;
8
+ ngOnInit(): void;
9
+ confirmDeleteItem(): void;
10
+ closeDialog(): void;
11
+ static ɵfac: i0.ɵɵFactoryDeclaration<DeleteItemComponent, never>;
12
+ static ɵcmp: i0.ɵɵComponentDeclaration<DeleteItemComponent, "app-delete-item-dialog", never, { "dashboardItem": "dashboardItem"; }, { "onClose": "onClose"; "removeDashboardItem": "removeDashboardItem"; }, never, never, false, never>;
13
+ }
@@ -0,0 +1,59 @@
1
+ import { Component, EventEmitter, Input, Output } from '@angular/core';
2
+ import * as i0 from "@angular/core";
3
+ import * as i1 from "@progress/kendo-angular-dialog";
4
+ import * as i2 from "@progress/kendo-angular-buttons";
5
+ export class DeleteItemComponent {
6
+ constructor() {
7
+ this.onClose = new EventEmitter();
8
+ this.removeDashboardItem = new EventEmitter();
9
+ }
10
+ ngOnInit() {
11
+ }
12
+ confirmDeleteItem() {
13
+ if (this.dashboardItem) {
14
+ this.removeDashboardItem.emit(this.dashboardItem);
15
+ }
16
+ else {
17
+ console.log("item is null");
18
+ }
19
+ this.onClose.emit();
20
+ }
21
+ closeDialog() {
22
+ this.onClose.emit();
23
+ }
24
+ }
25
+ DeleteItemComponent.ɵfac = function DeleteItemComponent_Factory(t) { return new (t || DeleteItemComponent)(); };
26
+ DeleteItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DeleteItemComponent, selectors: [["app-delete-item-dialog"]], inputs: { dashboardItem: "dashboardItem" }, outputs: { onClose: "onClose", removeDashboardItem: "removeDashboardItem" }, decls: 13, vars: 1, consts: [[1, "modal-body-wrap", 3, "close"], [1, "k-m-7.5", "k-text-center"], [1, "k-actions", "k-actions-end", "popup-actions"], ["kendoButton", "", "themeColor", "primary", 3, "click"], [1, "k-icon", "k-i-check"], ["kendoButton", "", 3, "click"], [1, "k-icon", "k-i-close"]], template: function DeleteItemComponent_Template(rf, ctx) { if (rf & 1) {
27
+ i0.ɵɵelementStart(0, "kendo-dialog", 0);
28
+ i0.ɵɵlistener("close", function DeleteItemComponent_Template_kendo_dialog_close_0_listener() { return ctx.closeDialog(); });
29
+ i0.ɵɵelementStart(1, "p", 1);
30
+ i0.ɵɵtext(2, " Are you sure you want to delete ");
31
+ i0.ɵɵelementStart(3, "b");
32
+ i0.ɵɵtext(4);
33
+ i0.ɵɵelementEnd();
34
+ i0.ɵɵtext(5, "? ");
35
+ i0.ɵɵelementEnd();
36
+ i0.ɵɵelementStart(6, "div", 2)(7, "button", 3);
37
+ i0.ɵɵlistener("click", function DeleteItemComponent_Template_button_click_7_listener() { return ctx.confirmDeleteItem(); });
38
+ i0.ɵɵelement(8, "span", 4);
39
+ i0.ɵɵtext(9, " Yes ");
40
+ i0.ɵɵelementEnd();
41
+ i0.ɵɵelementStart(10, "button", 5);
42
+ i0.ɵɵlistener("click", function DeleteItemComponent_Template_button_click_10_listener() { return ctx.closeDialog(); });
43
+ i0.ɵɵelement(11, "span", 6);
44
+ i0.ɵɵtext(12, " No");
45
+ i0.ɵɵelementEnd()()();
46
+ } if (rf & 2) {
47
+ i0.ɵɵadvance(4);
48
+ i0.ɵɵtextInterpolate(ctx.dashboardItem == null ? null : ctx.dashboardItem.title);
49
+ } }, dependencies: [i1.DialogComponent, i2.Button], styles: [".popup-actions[_ngcontent-%COMP%] {\r\n width: 100%;\r\n padding: 10px;\r\n border-top: 1px solid rgba(0, 0, 0, 0.08);\r\n }\r\n .modal-body-wrap .k-window-content {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n flex: 1;\r\n padding: 0;\r\n }\r\n .resource-wrap[_ngcontent-%COMP%] {\r\n flex: 1;\r\n padding: 24px;\r\n margin: 16px;\r\n border-radius: 4px;\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n }\r\n .user-view-wrap[_ngcontent-%COMP%] {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n }\r\n .resource-wrap .k-label {\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n }\r\n .resource-wrap .k-dropdownlist {\r\n border-radius: 4px;\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n background: transparent;\r\n line-height: 32px;\r\n margin: 0;\r\n }"] });
50
+ (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DeleteItemComponent, [{
51
+ type: Component,
52
+ args: [{ selector: 'app-delete-item-dialog', template: "<kendo-dialog class=\"modal-body-wrap\" (close)=\"closeDialog()\">\r\n <p class=\"k-m-7.5 k-text-center\">\r\n Are you sure you want to delete <b>{{dashboardItem?.title}}</b>?\r\n </p>\r\n <div class=\"k-actions k-actions-end popup-actions\">\r\n <button kendoButton (click)=\"confirmDeleteItem()\" themeColor=\"primary\">\r\n <span class=\"k-icon k-i-check\"></span> Yes\r\n </button>\r\n <button kendoButton (click)=\"closeDialog()\"><span class=\"k-icon k-i-close\"></span> No</button>\r\n </div>\r\n</kendo-dialog>", styles: [".popup-actions {\r\n width: 100%;\r\n padding: 10px;\r\n border-top: 1px solid rgba(0, 0, 0, 0.08);\r\n }\r\n ::ng-deep .modal-body-wrap .k-window-content {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n flex: 1;\r\n padding: 0;\r\n }\r\n .resource-wrap {\r\n flex: 1;\r\n padding: 24px;\r\n margin: 16px;\r\n border-radius: 4px;\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n }\r\n .user-view-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n }\r\n ::ng-deep .resource-wrap .k-label {\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n }\r\n ::ng-deep .resource-wrap .k-dropdownlist {\r\n border-radius: 4px;\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n background: transparent;\r\n line-height: 32px;\r\n margin: 0;\r\n }\r\n "] }]
53
+ }], null, { onClose: [{
54
+ type: Output
55
+ }], removeDashboardItem: [{
56
+ type: Output
57
+ }], dashboardItem: [{
58
+ type: Input
59
+ }] }); })();
@@ -1,4 +1,5 @@
1
- import { EventEmitter, OnInit } from '@angular/core';
1
+ import { ElementRef, EventEmitter, OnInit } from '@angular/core';
2
+ import { TileLayoutReorderEvent, TileLayoutResizeEvent } from "@progress/kendo-angular-layout";
2
3
  import { ResourceData } from '../generic/base-resource-component';
3
4
  import { DashboardEntity, ResourceTypeEntity } from '@memberjunction/core-entities';
4
5
  import { SharedService } from '../../shared/shared.service';
@@ -6,6 +7,7 @@ import { ResourceContainerComponent } from '../generic/resource-container-compon
6
7
  import * as i0 from "@angular/core";
7
8
  export declare class SingleDashboardComponent implements OnInit {
8
9
  private sharedService;
10
+ dashboardNameInput: ElementRef<HTMLInputElement>;
9
11
  ResourceData: ResourceData;
10
12
  dashboardSaved: EventEmitter<DashboardEntity>;
11
13
  loadComplete: EventEmitter<any>;
@@ -15,7 +17,13 @@ export declare class SingleDashboardComponent implements OnInit {
15
17
  config: DashboardConfigDetails;
16
18
  isItemDialogOpened: boolean;
17
19
  isEditDialogOpened: boolean;
20
+ isEditDashboardNameDialogOpened: boolean;
21
+ isDeletingDashboardItem: boolean;
22
+ allowResize: boolean;
23
+ allowReorder: boolean;
24
+ isEditingDashboard: boolean;
18
25
  selectedResource: ResourceTypeEntity | null;
26
+ selectedDashboardItem: DashboardItem | null;
19
27
  private saveChangesSubject;
20
28
  get contentLoading(): boolean;
21
29
  constructor(sharedService: SharedService);
@@ -25,11 +33,23 @@ export declare class SingleDashboardComponent implements OnInit {
25
33
  loadingComplete(resourceComponent: ResourceContainerComponent): void;
26
34
  addItem(resourceType?: any): void;
27
35
  closeDialog(data: any): void;
28
- editDashboard(): void;
36
+ toggleEditDashboard(allowEdit: boolean): void;
37
+ onClickSaveDashboard(): Promise<void>;
38
+ onclickCancelChanges(): Promise<void>;
29
39
  closeDashboardDialog(data?: any): void;
30
40
  saveChanges(data: any): void;
31
41
  SaveDashboard(): Promise<boolean>;
32
42
  dashboardSaveComplete(entity: DashboardEntity): void;
43
+ toggleInlineNameEdit(visible: boolean): void;
44
+ saveDashboardName(): void;
45
+ cancelNameChange(): void;
46
+ closeDeleteItemComponent(): void;
47
+ showConfirmDeleteDashboardItem(item: DashboardItem): void;
48
+ deleteDashboardItem(item: DashboardItem): Promise<void>;
49
+ getIsEditingItemBodyStyle(): string;
50
+ getIsEditingItemHeaderStyle(): string;
51
+ onReorder(e: TileLayoutReorderEvent): void;
52
+ onResize(e: TileLayoutResizeEvent): void;
33
53
  static ɵfac: i0.ɵɵFactoryDeclaration<SingleDashboardComponent, never>;
34
54
  static ɵcmp: i0.ɵɵComponentDeclaration<SingleDashboardComponent, "app-single-dashboard", never, { "ResourceData": "ResourceData"; }, { "dashboardSaved": "dashboardSaved"; "loadComplete": "loadComplete"; "loadStarted": "loadStarted"; }, never, never, false, never>;
35
55
  }
@@ -7,46 +7,132 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
7
7
  step((generator = generator.apply(thisArg, _arguments || [])).next());
8
8
  });
9
9
  };
10
- import { Component, EventEmitter, Input, Output } from '@angular/core';
10
+ import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
11
11
  import { ResourceData } from '../generic/base-resource-component';
12
12
  import { Metadata } from '@memberjunction/core';
13
13
  import { Subject, debounceTime } from 'rxjs';
14
14
  import * as i0 from "@angular/core";
15
15
  import * as i1 from "../../shared/shared.service";
16
+ const _c0 = ["dashboardNameInput"];
16
17
  function SingleDashboardComponent_app_add_item_dialog_0_Template(rf, ctx) { if (rf & 1) {
17
- const _r4 = i0.ɵɵgetCurrentView();
18
+ const _r11 = i0.ɵɵgetCurrentView();
18
19
  i0.ɵɵelementStart(0, "app-add-item-dialog", 14);
19
- i0.ɵɵlistener("onClose", function SingleDashboardComponent_app_add_item_dialog_0_Template_app_add_item_dialog_onClose_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.closeDialog($event)); });
20
+ i0.ɵɵlistener("onClose", function SingleDashboardComponent_app_add_item_dialog_0_Template_app_add_item_dialog_onClose_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.closeDialog($event)); });
20
21
  i0.ɵɵelementEnd();
21
22
  } if (rf & 2) {
22
23
  const ctx_r0 = i0.ɵɵnextContext();
23
24
  i0.ɵɵproperty("selectedResource", ctx_r0.selectedResource);
24
25
  } }
25
26
  function SingleDashboardComponent_div_1_Template(rf, ctx) { if (rf & 1) {
26
- const _r6 = i0.ɵɵgetCurrentView();
27
+ const _r13 = i0.ɵɵgetCurrentView();
27
28
  i0.ɵɵelementStart(0, "div")(1, "app-edit-dashboard", 15);
28
- i0.ɵɵlistener("onClose", function SingleDashboardComponent_div_1_Template_app_edit_dashboard_onClose_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.closeDashboardDialog($event)); })("triggerAddItem", function SingleDashboardComponent_div_1_Template_app_edit_dashboard_triggerAddItem_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.addItem($event)); })("onSave", function SingleDashboardComponent_div_1_Template_app_edit_dashboard_onSave_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.saveChanges($event)); });
29
+ i0.ɵɵlistener("onClose", function SingleDashboardComponent_div_1_Template_app_edit_dashboard_onClose_1_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.closeDashboardDialog($event)); })("triggerAddItem", function SingleDashboardComponent_div_1_Template_app_edit_dashboard_triggerAddItem_1_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r14 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r14.addItem($event)); })("onSave", function SingleDashboardComponent_div_1_Template_app_edit_dashboard_onSave_1_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r15 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r15.saveChanges($event)); });
29
30
  i0.ɵɵelementEnd()();
30
31
  } if (rf & 2) {
31
32
  const ctx_r1 = i0.ɵɵnextContext();
32
33
  i0.ɵɵadvance(1);
33
34
  i0.ɵɵproperty("items", ctx_r1.items)("config", ctx_r1.config);
34
35
  } }
35
- function SingleDashboardComponent_kendo_tilelayout_item_17_Template(rf, ctx) { if (rf & 1) {
36
- const _r11 = i0.ɵɵgetCurrentView();
37
- i0.ɵɵelementStart(0, "kendo-tilelayout-item", 16)(1, "kendo-tilelayout-item-header");
36
+ function SingleDashboardComponent_app_delete_item_dialog_2_Template(rf, ctx) { if (rf & 1) {
37
+ const _r17 = i0.ɵɵgetCurrentView();
38
+ i0.ɵɵelementStart(0, "app-delete-item-dialog", 16);
39
+ i0.ɵɵlistener("removeDashboardItem", function SingleDashboardComponent_app_delete_item_dialog_2_Template_app_delete_item_dialog_removeDashboardItem_0_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r16 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r16.deleteDashboardItem($event)); })("onClose", function SingleDashboardComponent_app_delete_item_dialog_2_Template_app_delete_item_dialog_onClose_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r18 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r18.closeDeleteItemComponent()); });
40
+ i0.ɵɵelementEnd();
41
+ } if (rf & 2) {
42
+ const ctx_r2 = i0.ɵɵnextContext();
43
+ i0.ɵɵproperty("dashboardItem", ctx_r2.selectedDashboardItem);
44
+ } }
45
+ function SingleDashboardComponent_div_6_Template(rf, ctx) { if (rf & 1) {
46
+ const _r21 = i0.ɵɵgetCurrentView();
47
+ i0.ɵɵelementStart(0, "div", 8)(1, "input", 17, 18);
48
+ i0.ɵɵlistener("keydown.enter", function SingleDashboardComponent_div_6_Template_input_keydown_enter_1_listener() { i0.ɵɵrestoreView(_r21); const ctx_r20 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r20.saveDashboardName()); });
49
+ i0.ɵɵelementEnd();
50
+ i0.ɵɵelementStart(3, "kendo-button", 19);
51
+ i0.ɵɵlistener("click", function SingleDashboardComponent_div_6_Template_kendo_button_click_3_listener() { i0.ɵɵrestoreView(_r21); const ctx_r22 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r22.saveDashboardName()); });
52
+ i0.ɵɵelement(4, "span", 20);
53
+ i0.ɵɵelementEnd();
54
+ i0.ɵɵelementStart(5, "kendo-button", 19);
55
+ i0.ɵɵlistener("click", function SingleDashboardComponent_div_6_Template_kendo_button_click_5_listener() { i0.ɵɵrestoreView(_r21); const ctx_r23 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r23.cancelNameChange()); });
56
+ i0.ɵɵelement(6, "span", 21);
57
+ i0.ɵɵelementEnd()();
58
+ } }
59
+ function SingleDashboardComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
60
+ const _r25 = i0.ɵɵgetCurrentView();
61
+ i0.ɵɵelement(0, "span", 22);
62
+ i0.ɵɵelementStart(1, "h3", 19);
63
+ i0.ɵɵlistener("click", function SingleDashboardComponent_ng_template_7_Template_h3_click_1_listener() { i0.ɵɵrestoreView(_r25); const ctx_r24 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r24.toggleInlineNameEdit(true)); });
38
64
  i0.ɵɵtext(2);
39
65
  i0.ɵɵelementEnd();
40
- i0.ɵɵelementStart(3, "kendo-tilelayout-item-body")(4, "app-resource", 17);
41
- i0.ɵɵlistener("ContentLoadingStarted", function SingleDashboardComponent_kendo_tilelayout_item_17_Template_app_resource_ContentLoadingStarted_4_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.loadingStarted($event)); })("ContentLoadingComplete", function SingleDashboardComponent_kendo_tilelayout_item_17_Template_app_resource_ContentLoadingComplete_4_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.loadingComplete($event)); });
42
- i0.ɵɵelementEnd()()();
43
66
  } if (rf & 2) {
44
- const item_r9 = ctx.$implicit;
45
- i0.ɵɵproperty("col", item_r9.col)("colSpan", item_r9.colSpan)("rowSpan", item_r9.rowSpan)("id", item_r9.uniqueId);
46
- i0.ɵɵadvance(2);
47
- i0.ɵɵtextInterpolate1(" ", item_r9.title, " ");
67
+ const ctx_r5 = i0.ɵɵnextContext();
48
68
  i0.ɵɵadvance(2);
49
- i0.ɵɵproperty("Data", item_r9.ResourceData)("isVisible", true);
69
+ i0.ɵɵtextInterpolate(ctx_r5.dashboardEntity.Name);
70
+ } }
71
+ function SingleDashboardComponent_div_10_Template(rf, ctx) { if (rf & 1) {
72
+ const _r27 = i0.ɵɵgetCurrentView();
73
+ i0.ɵɵelementStart(0, "div")(1, "kendo-button", 19);
74
+ i0.ɵɵlistener("click", function SingleDashboardComponent_div_10_Template_kendo_button_click_1_listener() { i0.ɵɵrestoreView(_r27); const ctx_r26 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r26.onClickSaveDashboard()); });
75
+ i0.ɵɵelement(2, "span", 23);
76
+ i0.ɵɵtext(3, " Save ");
77
+ i0.ɵɵelementEnd();
78
+ i0.ɵɵelementStart(4, "kendo-button", 19);
79
+ i0.ɵɵlistener("click", function SingleDashboardComponent_div_10_Template_kendo_button_click_4_listener() { i0.ɵɵrestoreView(_r27); const ctx_r28 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r28.onclickCancelChanges()); });
80
+ i0.ɵɵelement(5, "span", 21);
81
+ i0.ɵɵtext(6, " Cancel ");
82
+ i0.ɵɵelementEnd()();
83
+ } }
84
+ function SingleDashboardComponent_ng_template_11_Template(rf, ctx) { if (rf & 1) {
85
+ const _r30 = i0.ɵɵgetCurrentView();
86
+ i0.ɵɵelementStart(0, "kendo-button", 19);
87
+ i0.ɵɵlistener("click", function SingleDashboardComponent_ng_template_11_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r30); const ctx_r29 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r29.addItem()); });
88
+ i0.ɵɵelement(1, "span", 24);
89
+ i0.ɵɵtext(2, " Add Item ");
90
+ i0.ɵɵelementEnd();
91
+ i0.ɵɵelementStart(3, "kendo-button", 25);
92
+ i0.ɵɵlistener("click", function SingleDashboardComponent_ng_template_11_Template_kendo_button_click_3_listener() { i0.ɵɵrestoreView(_r30); const ctx_r31 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r31.toggleEditDashboard(true)); });
93
+ i0.ɵɵelement(4, "span", 26);
94
+ i0.ɵɵtext(5, " Edit Dashboard ");
95
+ i0.ɵɵelementEnd();
96
+ } if (rf & 2) {
97
+ i0.ɵɵadvance(3);
98
+ i0.ɵɵproperty("primary", true);
99
+ } }
100
+ function SingleDashboardComponent_kendo_tilelayout_item_15_div_3_Template(rf, ctx) { if (rf & 1) {
101
+ const _r35 = i0.ɵɵgetCurrentView();
102
+ i0.ɵɵelementStart(0, "div")(1, "div", 30)(2, "button", 31);
103
+ i0.ɵɵlistener("click", function SingleDashboardComponent_kendo_tilelayout_item_15_div_3_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r35); const ctx_r34 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r34.toggleEditDashboard(true)); });
104
+ i0.ɵɵelement(3, "span", 32);
105
+ i0.ɵɵelementEnd();
106
+ i0.ɵɵelementStart(4, "button", 31);
107
+ i0.ɵɵlistener("click", function SingleDashboardComponent_kendo_tilelayout_item_15_div_3_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r35); const item_r32 = i0.ɵɵnextContext().$implicit; const ctx_r36 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r36.showConfirmDeleteDashboardItem(item_r32)); });
108
+ i0.ɵɵelement(5, "span", 33);
109
+ i0.ɵɵelementEnd()()();
110
+ } }
111
+ const _c1 = function (a1) { return ["dashboard-item-header", a1]; };
112
+ const _c2 = function (a0) { return [a0]; };
113
+ function SingleDashboardComponent_kendo_tilelayout_item_15_Template(rf, ctx) { if (rf & 1) {
114
+ const _r39 = i0.ɵɵgetCurrentView();
115
+ i0.ɵɵelementStart(0, "kendo-tilelayout-item", 27)(1, "kendo-tilelayout-item-header", 28);
116
+ i0.ɵɵtext(2);
117
+ i0.ɵɵtemplate(3, SingleDashboardComponent_kendo_tilelayout_item_15_div_3_Template, 6, 0, "div", 1);
118
+ i0.ɵɵelementEnd();
119
+ i0.ɵɵelementStart(4, "kendo-tilelayout-item-body", 28)(5, "app-resource", 29);
120
+ i0.ɵɵlistener("ContentLoadingStarted", function SingleDashboardComponent_kendo_tilelayout_item_15_Template_app_resource_ContentLoadingStarted_5_listener($event) { i0.ɵɵrestoreView(_r39); const ctx_r38 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r38.loadingStarted($event)); })("ContentLoadingComplete", function SingleDashboardComponent_kendo_tilelayout_item_15_Template_app_resource_ContentLoadingComplete_5_listener($event) { i0.ɵɵrestoreView(_r39); const ctx_r40 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r40.loadingComplete($event)); });
121
+ i0.ɵɵelementEnd()()();
122
+ } if (rf & 2) {
123
+ const item_r32 = ctx.$implicit;
124
+ const ctx_r9 = i0.ɵɵnextContext();
125
+ i0.ɵɵproperty("col", item_r32.col)("colSpan", item_r32.colSpan)("rowSpan", item_r32.rowSpan)("id", item_r32.uniqueId);
126
+ i0.ɵɵadvance(1);
127
+ i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c1, ctx_r9.getIsEditingItemHeaderStyle()));
128
+ i0.ɵɵadvance(1);
129
+ i0.ɵɵtextInterpolate1(" ", item_r32.title, " ");
130
+ i0.ɵɵadvance(1);
131
+ i0.ɵɵproperty("ngIf", !ctx_r9.isEditingDashboard);
132
+ i0.ɵɵadvance(1);
133
+ i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c2, ctx_r9.getIsEditingItemBodyStyle()));
134
+ i0.ɵɵadvance(1);
135
+ i0.ɵɵproperty("Data", item_r32.ResourceData)("isVisible", true);
50
136
  } }
51
137
  export class SingleDashboardComponent {
52
138
  get contentLoading() {
@@ -66,6 +152,11 @@ export class SingleDashboardComponent {
66
152
  this.config = new DashboardConfigDetails();
67
153
  this.isItemDialogOpened = false;
68
154
  this.isEditDialogOpened = false;
155
+ this.isEditDashboardNameDialogOpened = false;
156
+ this.isDeletingDashboardItem = false;
157
+ this.allowResize = false;
158
+ this.allowReorder = false;
159
+ this.isEditingDashboard = false;
69
160
  this.saveChangesSubject = new Subject();
70
161
  this.saveChangesSubject
71
162
  .pipe(debounceTime(500))
@@ -153,13 +244,36 @@ export class SingleDashboardComponent {
153
244
  if (data) {
154
245
  const dashboardItem = this.CreateDashboardItem(data);
155
246
  this.items.push(dashboardItem);
247
+ console.log(dashboardItem);
156
248
  this.saveChangesSubject.next(true);
157
249
  }
158
250
  this.selectedResource = null;
159
251
  this.isItemDialogOpened = false;
160
252
  }
161
- editDashboard() {
162
- this.isEditDialogOpened = true;
253
+ toggleEditDashboard(allowEdit) {
254
+ this.allowReorder = allowEdit;
255
+ this.allowResize = allowEdit;
256
+ this.isEditingDashboard = allowEdit;
257
+ this.toggleInlineNameEdit(false);
258
+ }
259
+ onClickSaveDashboard() {
260
+ return __awaiter(this, void 0, void 0, function* () {
261
+ this.toggleEditDashboard(false);
262
+ let result = yield this.SaveDashboard();
263
+ if (result) {
264
+ this.sharedService.CreateSimpleNotification("Dashboard changes have been saved.", "success");
265
+ yield this.ngOnInit();
266
+ }
267
+ else {
268
+ this.sharedService.CreateSimpleNotification("An error occured saving the dashboard changes", "error");
269
+ }
270
+ });
271
+ }
272
+ onclickCancelChanges() {
273
+ return __awaiter(this, void 0, void 0, function* () {
274
+ this.toggleEditDashboard(false);
275
+ yield this.ngOnInit();
276
+ });
163
277
  }
164
278
  closeDashboardDialog(data = null) {
165
279
  this.isEditDialogOpened = false;
@@ -198,46 +312,122 @@ export class SingleDashboardComponent {
198
312
  dashboardSaveComplete(entity) {
199
313
  this.dashboardSaved.emit(entity);
200
314
  }
315
+ toggleInlineNameEdit(visible) {
316
+ var _a, _b;
317
+ this.isEditDashboardNameDialogOpened = visible;
318
+ if (this.isEditDashboardNameDialogOpened) {
319
+ (_b = (_a = this.dashboardNameInput) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.focus();
320
+ }
321
+ }
322
+ saveDashboardName() {
323
+ this.toggleInlineNameEdit(true);
324
+ const inputValue = this.dashboardNameInput.nativeElement.value;
325
+ if (inputValue && inputValue.length > 3) {
326
+ this.dashboardEntity.Name = inputValue;
327
+ this.SaveDashboard();
328
+ }
329
+ else {
330
+ this.sharedService.CreateSimpleNotification('Invalid dashboard name: Must be at least 3 characters.', 'warning');
331
+ }
332
+ }
333
+ cancelNameChange() {
334
+ this.toggleInlineNameEdit(false);
335
+ }
336
+ closeDeleteItemComponent() {
337
+ this.selectedDashboardItem = null;
338
+ this.isDeletingDashboardItem = false;
339
+ }
340
+ showConfirmDeleteDashboardItem(item) {
341
+ this.selectedDashboardItem = item;
342
+ this.isDeletingDashboardItem = true;
343
+ }
344
+ deleteDashboardItem(item) {
345
+ return __awaiter(this, void 0, void 0, function* () {
346
+ this.items = this.items.filter(i => i.uniqueId != item.uniqueId);
347
+ let result = yield this.SaveDashboard();
348
+ if (result) {
349
+ this.sharedService.CreateSimpleNotification(`Dashboard item ${item.uniqueId} deleted successfully`, "success");
350
+ }
351
+ else {
352
+ this.sharedService.CreateSimpleNotification(`Unable to delete dashboard item ${item.uniqueId}`, "error");
353
+ }
354
+ this.selectedDashboardItem = null;
355
+ this.isDeletingDashboardItem = false;
356
+ });
357
+ }
358
+ getIsEditingItemBodyStyle() {
359
+ return this.isEditingDashboard ? "bg-light-grey" : "";
360
+ }
361
+ getIsEditingItemHeaderStyle() {
362
+ return this.isEditingDashboard ? "bg-dark-grey" : "bg-blue";
363
+ }
364
+ onReorder(e) {
365
+ const item = this.items.find(i => i.uniqueId === parseInt(e.item.elem.nativeElement.id));
366
+ if (item) {
367
+ // move the item in our config state to the new index
368
+ if (e.oldIndex !== e.newIndex) {
369
+ this.items.splice(e.oldIndex, 1);
370
+ this.items.splice(e.newIndex, 0, item);
371
+ }
372
+ //item.order = e.item.order;
373
+ item.col = e.newCol ? e.newCol : item.col;
374
+ item.row = e.newRow ? e.newRow : item.row;
375
+ }
376
+ }
377
+ onResize(e) {
378
+ const item = this.items.find(i => i.uniqueId === parseInt(e.item.elem.nativeElement.id));
379
+ if (item) {
380
+ item.colSpan = e.newColSpan;
381
+ item.rowSpan = e.newRowSpan;
382
+ }
383
+ }
201
384
  }
202
385
  SingleDashboardComponent.ɵfac = function SingleDashboardComponent_Factory(t) { return new (t || SingleDashboardComponent)(i0.ɵɵdirectiveInject(i1.SharedService)); };
203
- SingleDashboardComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SingleDashboardComponent, selectors: [["app-single-dashboard"]], inputs: { ResourceData: "ResourceData" }, outputs: { dashboardSaved: "dashboardSaved", loadComplete: "loadComplete", loadStarted: "loadStarted" }, decls: 18, vars: 9, consts: [[3, "selectedResource", "onClose", 4, "ngIf"], [4, "ngIf"], [1, "dashboard-container"], [1, "main-head-dashboard"], [1, "dashboard-title"], [1, "k-icon", "k-i-star"], [1, "dashboard-header", "k-d-flex", "k-flex-row", "k-justify-content-flex-end"], [3, "click"], [1, "k-icon", "k-i-plus"], [3, "primary", "click"], [1, "k-icon", "k-i-gear"], [1, "tile-resource-container"], [3, "columns", "rowHeight", "resizable", "reorderable"], [3, "col", "colSpan", "rowSpan", "id", 4, "ngFor", "ngForOf"], [3, "selectedResource", "onClose"], [3, "items", "config", "onClose", "triggerAddItem", "onSave"], [3, "col", "colSpan", "rowSpan", "id"], [3, "Data", "isVisible", "ContentLoadingStarted", "ContentLoadingComplete"]], template: function SingleDashboardComponent_Template(rf, ctx) { if (rf & 1) {
386
+ SingleDashboardComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SingleDashboardComponent, selectors: [["app-single-dashboard"]], viewQuery: function SingleDashboardComponent_Query(rf, ctx) { if (rf & 1) {
387
+ i0.ɵɵviewQuery(_c0, 5);
388
+ } if (rf & 2) {
389
+ let _t;
390
+ i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dashboardNameInput = _t.first);
391
+ } }, inputs: { ResourceData: "ResourceData" }, outputs: { dashboardSaved: "dashboardSaved", loadComplete: "loadComplete", loadStarted: "loadStarted" }, decls: 16, vars: 12, consts: [[3, "selectedResource", "onClose", 4, "ngIf"], [4, "ngIf"], [3, "dashboardItem", "removeDashboardItem", "onClose", 4, "ngIf"], [1, "dashboard-container"], [1, "main-head-dashboard"], [1, "dashboard-title"], ["class", "dashboard-header k-d-flex k-flex-row k-justify-content-flex-end", 4, "ngIf", "ngIfElse"], ["dashboard_name_header", ""], [1, "dashboard-header", "k-d-flex", "k-flex-row", "k-justify-content-flex-end"], [4, "ngIf", "ngIfElse"], ["edit_dashboard_buttons", ""], [1, "tile-resource-container"], [3, "columns", "rowHeight", "resizable", "reorderable", "reorder", "resize"], [3, "col", "colSpan", "rowSpan", "id", 4, "ngFor", "ngForOf"], [3, "selectedResource", "onClose"], [3, "items", "config", "onClose", "triggerAddItem", "onSave"], [3, "dashboardItem", "removeDashboardItem", "onClose"], ["type", "text", "placeholder", "Enter name here", "id", "txtDashboardName", 1, "k-textbox", "k-input", "k-input-md", "k-rounded-md", "k-input-solid", 3, "keydown.enter"], ["dashboardNameInput", ""], [3, "click"], [1, "k-i-check", "k-button-icon", "k-icon", "ng-star-inserted"], [1, "k-icon", "k-i-cancel"], [1, "k-icon", "k-i-star"], [1, "k-icon", "k-i-check"], [1, "k-icon", "k-i-plus"], [3, "primary", "click"], [1, "k-icon", "k-i-gear"], [3, "col", "colSpan", "rowSpan", "id"], [3, "ngClass"], [3, "Data", "isVisible", "ContentLoadingStarted", "ContentLoadingComplete"], [1, "btn-wrapper"], ["kendoButton", "", "fillMode", "flat", 3, "click"], [1, "k-icon", "k-i-edit"], [1, "k-icon", "k-i-delete"]], template: function SingleDashboardComponent_Template(rf, ctx) { if (rf & 1) {
204
392
  i0.ɵɵtemplate(0, SingleDashboardComponent_app_add_item_dialog_0_Template, 1, 1, "app-add-item-dialog", 0);
205
393
  i0.ɵɵtemplate(1, SingleDashboardComponent_div_1_Template, 2, 2, "div", 1);
206
- i0.ɵɵelementStart(2, "div", 2)(3, "div", 3)(4, "div", 4);
207
- i0.ɵɵelement(5, "span", 5);
208
- i0.ɵɵelementStart(6, "h3");
209
- i0.ɵɵtext(7);
210
- i0.ɵɵelementEnd()();
211
- i0.ɵɵelementStart(8, "div", 6)(9, "kendo-button", 7);
212
- i0.ɵɵlistener("click", function SingleDashboardComponent_Template_kendo_button_click_9_listener() { return ctx.addItem(); });
213
- i0.ɵɵelement(10, "span", 8);
214
- i0.ɵɵtext(11, " Add Item ");
394
+ i0.ɵɵtemplate(2, SingleDashboardComponent_app_delete_item_dialog_2_Template, 1, 1, "app-delete-item-dialog", 2);
395
+ i0.ɵɵelementStart(3, "div", 3)(4, "div", 4)(5, "div", 5);
396
+ i0.ɵɵtemplate(6, SingleDashboardComponent_div_6_Template, 7, 0, "div", 6);
397
+ i0.ɵɵtemplate(7, SingleDashboardComponent_ng_template_7_Template, 3, 1, "ng-template", null, 7, i0.ɵɵtemplateRefExtractor);
215
398
  i0.ɵɵelementEnd();
216
- i0.ɵɵelementStart(12, "kendo-button", 9);
217
- i0.ɵɵlistener("click", function SingleDashboardComponent_Template_kendo_button_click_12_listener() { return ctx.editDashboard(); });
218
- i0.ɵɵelement(13, "span", 10);
219
- i0.ɵɵtext(14, " Edit Dashboard ");
220
- i0.ɵɵelementEnd()()();
221
- i0.ɵɵelementStart(15, "div", 11)(16, "kendo-tilelayout", 12);
222
- i0.ɵɵtemplate(17, SingleDashboardComponent_kendo_tilelayout_item_17_Template, 5, 7, "kendo-tilelayout-item", 13);
399
+ i0.ɵɵelementStart(9, "div", 8);
400
+ i0.ɵɵtemplate(10, SingleDashboardComponent_div_10_Template, 7, 0, "div", 9);
401
+ i0.ɵɵtemplate(11, SingleDashboardComponent_ng_template_11_Template, 6, 1, "ng-template", null, 10, i0.ɵɵtemplateRefExtractor);
402
+ i0.ɵɵelementEnd()();
403
+ i0.ɵɵelementStart(13, "div", 11)(14, "kendo-tilelayout", 12);
404
+ i0.ɵɵlistener("reorder", function SingleDashboardComponent_Template_kendo_tilelayout_reorder_14_listener($event) { return ctx.onReorder($event); })("resize", function SingleDashboardComponent_Template_kendo_tilelayout_resize_14_listener($event) { return ctx.onResize($event); });
405
+ i0.ɵɵtemplate(15, SingleDashboardComponent_kendo_tilelayout_item_15_Template, 6, 14, "kendo-tilelayout-item", 13);
223
406
  i0.ɵɵelementEnd()()();
224
407
  } if (rf & 2) {
408
+ const _r4 = i0.ɵɵreference(8);
409
+ const _r7 = i0.ɵɵreference(12);
225
410
  i0.ɵɵproperty("ngIf", ctx.isItemDialogOpened);
226
411
  i0.ɵɵadvance(1);
227
412
  i0.ɵɵproperty("ngIf", ctx.isEditDialogOpened);
228
- i0.ɵɵadvance(6);
229
- i0.ɵɵtextInterpolate(ctx.ResourceData.Name);
230
- i0.ɵɵadvance(5);
231
- i0.ɵɵproperty("primary", true);
413
+ i0.ɵɵadvance(1);
414
+ i0.ɵɵproperty("ngIf", ctx.isDeletingDashboardItem);
415
+ i0.ɵɵadvance(4);
416
+ i0.ɵɵproperty("ngIf", ctx.isEditDashboardNameDialogOpened)("ngIfElse", _r4);
417
+ i0.ɵɵadvance(4);
418
+ i0.ɵɵproperty("ngIf", ctx.isEditingDashboard)("ngIfElse", _r7);
232
419
  i0.ɵɵadvance(4);
233
- i0.ɵɵproperty("columns", ctx.config.columns)("rowHeight", ctx.config.rowHeight)("resizable", false)("reorderable", false);
420
+ i0.ɵɵproperty("columns", ctx.config.columns)("rowHeight", ctx.config.rowHeight)("resizable", ctx.allowResize)("reorderable", ctx.allowReorder);
234
421
  i0.ɵɵadvance(1);
235
422
  i0.ɵɵproperty("ngForOf", ctx.items);
236
- } }, styles: [".dashboard-title[_ngcontent-%COMP%] {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n}\r\n.dashboard-title[_ngcontent-%COMP%] .k-icon[_ngcontent-%COMP%] {\r\n color: #ff6358;\r\n font-size: 25px;\r\n}\r\n.dashboard-title[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\r\ncolor: #424242;\r\nfont-size: 28px;\r\nfont-style: normal;\r\nfont-weight: 300;\r\nline-height: 28px;\r\n}\r\n.dashboard-header[_ngcontent-%COMP%] {\r\n display: flex;\r\n gap: 10px;\r\n align-items: center;\r\n}\r\n .dashboard-header .btn-ref .k-button-text {\r\n display: flex;\r\n gap: 10px;\r\n}\r\n .dashboard-header[_ngcontent-%COMP%] .btn-ref[_ngcontent-%COMP%] {\r\n border: none;\r\n background: transparent;\r\n}\r\n.main-head-dashboard[_ngcontent-%COMP%] {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.tile-resource-container[_ngcontent-%COMP%] .k-tilelayout[_ngcontent-%COMP%] {\r\n background: #fff;\r\n}"] });
423
+ } }, styles: [".dashboard-title[_ngcontent-%COMP%] {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n}\r\n.dashboard-title[_ngcontent-%COMP%] .k-icon[_ngcontent-%COMP%] {\r\n color: #ff6358;\r\n font-size: 25px;\r\n}\r\n.dashboard-title[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\r\ncolor: #424242;\r\nfont-size: 28px;\r\nfont-style: normal;\r\nfont-weight: 300;\r\nline-height: 28px;\r\n}\r\n.dashboard-header[_ngcontent-%COMP%] {\r\n display: flex;\r\n gap: 10px;\r\n align-items: center;\r\n}\r\n .dashboard-header .btn-ref .k-button-text {\r\n display: flex;\r\n gap: 10px;\r\n}\r\n .dashboard-header[_ngcontent-%COMP%] .btn-ref[_ngcontent-%COMP%] {\r\n border: none;\r\n background: transparent;\r\n}\r\n.main-head-dashboard[_ngcontent-%COMP%] {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.tile-resource-container[_ngcontent-%COMP%] .k-tilelayout[_ngcontent-%COMP%] {\r\n background: #fff;\r\n}\r\n\r\n.bg-light-grey[_ngcontent-%COMP%] {\r\n background-color: lightgray;\r\n}\r\n\r\n.bg-dark-grey[_ngcontent-%COMP%] {\r\n background-color: darkgray;\r\n}\r\n\r\n.bg-blue[_ngcontent-%COMP%] {\r\n background-color: #4250AD;\r\n color: white;\r\n}\r\n\r\n.dashboard-item-header[_ngcontent-%COMP%] {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n\r\n.button-spacing[_ngcontent-%COMP%] {\r\n margin-right: 8px\r\n}"] });
237
424
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SingleDashboardComponent, [{
238
425
  type: Component,
239
- args: [{ selector: 'app-single-dashboard', template: "<app-add-item-dialog *ngIf=\"isItemDialogOpened\" (onClose)=\"closeDialog($event)\" [selectedResource]=\"selectedResource\"></app-add-item-dialog>\r\n<div *ngIf=\"isEditDialogOpened\">\r\n <app-edit-dashboard (onClose)=\"closeDashboardDialog($event)\" (triggerAddItem)=\"addItem($event)\" [items]=\"items\" [config]=\"config\" (onSave)=\"saveChanges($event)\"></app-edit-dashboard>\r\n</div>\r\n\r\n\r\n<div class=\"dashboard-container\">\r\n <div class=\"main-head-dashboard\">\r\n <div class=\"dashboard-title\">\r\n <span class=\"k-icon k-i-star\"></span>\r\n <h3>{{ResourceData.Name}}</h3> \r\n </div>\r\n <div class=\"dashboard-header k-d-flex k-flex-row k-justify-content-flex-end\">\r\n <!-- <kendo-button class=\"btn-ref\" >\r\n <span class=\"k-icon k-i-reload\"></span> \r\n Refresh\r\n </kendo-button> -->\r\n <kendo-button (click)=\"addItem()\">\r\n <span class=\"k-icon k-i-plus\"></span>\r\n Add Item\r\n </kendo-button>\r\n <kendo-button (click)=\"editDashboard()\" [primary]=\"true\">\r\n <span class=\"k-icon k-i-gear\"></span>\r\n Edit Dashboard\r\n </kendo-button>\r\n </div>\r\n </div>\r\n <div class=\"tile-resource-container\">\r\n <kendo-tilelayout\r\n [columns]=\"config.columns\"\r\n [rowHeight]=\"config.rowHeight\"\r\n [resizable]=\"false\"\r\n [reorderable]=\"false\"\r\n >\r\n <kendo-tilelayout-item *ngFor=\"let item of items\" [col]=\"item.col\" [colSpan]=\"item.colSpan\" [rowSpan]=\"item.rowSpan\" [id]=\"item.uniqueId\">\r\n <kendo-tilelayout-item-header>\r\n {{item.title}}\r\n <!-- <kendo-button class=\"k-float-right\" *ngIf=\"editMode\" (click)=\"removeItem(item)\">X</kendo-button> -->\r\n </kendo-tilelayout-item-header>\r\n <kendo-tilelayout-item-body>\r\n <app-resource [Data]=\"item.ResourceData\" [isVisible]=\"true\" (ContentLoadingStarted)=\"loadingStarted($event)\" (ContentLoadingComplete)=\"loadingComplete($event)\"></app-resource>\r\n </kendo-tilelayout-item-body>\r\n </kendo-tilelayout-item>\r\n </kendo-tilelayout>\r\n </div>\r\n</div>\r\n", styles: [".dashboard-title {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n}\r\n.dashboard-title .k-icon {\r\n color: #ff6358;\r\n font-size: 25px;\r\n}\r\n.dashboard-title h3 {\r\ncolor: #424242;\r\nfont-size: 28px;\r\nfont-style: normal;\r\nfont-weight: 300;\r\nline-height: 28px;\r\n}\r\n.dashboard-header {\r\n display: flex;\r\n gap: 10px;\r\n align-items: center;\r\n}\r\n::ng-deep .dashboard-header .btn-ref .k-button-text {\r\n display: flex;\r\n gap: 10px;\r\n}\r\n .dashboard-header .btn-ref {\r\n border: none;\r\n background: transparent;\r\n}\r\n.main-head-dashboard {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.tile-resource-container .k-tilelayout {\r\n background: #fff;\r\n}"] }]
240
- }], function () { return [{ type: i1.SharedService }]; }, { ResourceData: [{
426
+ args: [{ selector: 'app-single-dashboard', template: "<app-add-item-dialog *ngIf=\"isItemDialogOpened\" (onClose)=\"closeDialog($event)\" [selectedResource]=\"selectedResource\"></app-add-item-dialog>\r\n<div *ngIf=\"isEditDialogOpened\">\r\n <app-edit-dashboard (onClose)=\"closeDashboardDialog($event)\" (triggerAddItem)=\"addItem($event)\" [items]=\"items\" [config]=\"config\" (onSave)=\"saveChanges($event)\"></app-edit-dashboard>\r\n</div>\r\n\r\n<app-delete-item-dialog *ngIf=\"isDeletingDashboardItem\" [dashboardItem]=\"selectedDashboardItem\" (removeDashboardItem)=\"deleteDashboardItem($event)\" (onClose)=\"closeDeleteItemComponent()\"></app-delete-item-dialog>\r\n\r\n<div class=\"dashboard-container\">\r\n <div class=\"main-head-dashboard\">\r\n <div class=\"dashboard-title\">\r\n <div *ngIf=\"isEditDashboardNameDialogOpened; else dashboard_name_header\" class=\"dashboard-header k-d-flex k-flex-row k-justify-content-flex-end\">\r\n <input class=\"k-textbox k-input k-input-md k-rounded-md k-input-solid\" (keydown.enter)=\"saveDashboardName()\" type=\"text\" placeholder=\"Enter name here\" id=\"txtDashboardName\" #dashboardNameInput>\r\n <kendo-button (click)=\"saveDashboardName()\">\r\n <span class=\"k-i-check k-button-icon k-icon ng-star-inserted\"></span>\r\n </kendo-button>\r\n <kendo-button (click)=\"cancelNameChange()\" >\r\n <span class=\"k-icon k-i-cancel\"></span>\r\n </kendo-button>\r\n </div>\r\n <ng-template #dashboard_name_header>\r\n <span class=\"k-icon k-i-star\"></span>\r\n <h3 (click)=\"toggleInlineNameEdit(true)\">{{dashboardEntity.Name}}</h3>\r\n </ng-template>\r\n </div>\r\n <div class=\"dashboard-header k-d-flex k-flex-row k-justify-content-flex-end\">\r\n <div *ngIf=\"isEditingDashboard; else edit_dashboard_buttons\">\r\n <kendo-button (click)=\"onClickSaveDashboard()\">\r\n <span class=\"k-icon k-i-check\"></span>\r\n Save\r\n </kendo-button>\r\n <kendo-button (click)=\"onclickCancelChanges()\">\r\n <span class=\"k-icon k-i-cancel\"></span>\r\n Cancel\r\n </kendo-button>\r\n </div>\r\n <ng-template #edit_dashboard_buttons>\r\n <kendo-button (click)=\"addItem()\">\r\n <span class=\"k-icon k-i-plus\"></span>\r\n Add Item\r\n </kendo-button>\r\n <kendo-button (click)=\"toggleEditDashboard(true)\" [primary]=\"true\">\r\n <span class=\"k-icon k-i-gear\"></span>\r\n Edit Dashboard\r\n </kendo-button>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <div class=\"tile-resource-container\">\r\n <kendo-tilelayout\r\n [columns]=\"config.columns\"\r\n [rowHeight]=\"config.rowHeight\"\r\n [resizable]=\"allowResize\"\r\n [reorderable]=\"allowReorder\"\r\n (reorder)=\"onReorder($event)\"\r\n (resize)=\"onResize($event)\"\r\n >\r\n <kendo-tilelayout-item *ngFor=\"let item of items\" [col]=\"item.col\" [colSpan]=\"item.colSpan\" [rowSpan]=\"item.rowSpan\" [id]=\"item.uniqueId\">\r\n <kendo-tilelayout-item-header [ngClass]=\"['dashboard-item-header', getIsEditingItemHeaderStyle()]\">\r\n {{item.title}}\r\n <div *ngIf=\"!isEditingDashboard\">\r\n <div class=\"btn-wrapper\">\r\n <button kendoButton fillMode=\"flat\" (click)=\"toggleEditDashboard(true)\">\r\n <span class=\"k-icon k-i-edit\"></span>\r\n </button>\r\n <button kendoButton fillMode=\"flat\" (click)=\"showConfirmDeleteDashboardItem(item)\"><span\r\n class=\"k-icon k-i-delete\"></span></button>\r\n </div>\r\n </div>\r\n </kendo-tilelayout-item-header>\r\n <kendo-tilelayout-item-body [ngClass]=\"[getIsEditingItemBodyStyle()]\">\r\n <app-resource [Data]=\"item.ResourceData\" [isVisible]=\"true\" (ContentLoadingStarted)=\"loadingStarted($event)\" (ContentLoadingComplete)=\"loadingComplete($event)\"></app-resource>\r\n </kendo-tilelayout-item-body>\r\n </kendo-tilelayout-item>\r\n </kendo-tilelayout>\r\n </div>\r\n</div>\r\n", styles: [".dashboard-title {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n}\r\n.dashboard-title .k-icon {\r\n color: #ff6358;\r\n font-size: 25px;\r\n}\r\n.dashboard-title h3 {\r\ncolor: #424242;\r\nfont-size: 28px;\r\nfont-style: normal;\r\nfont-weight: 300;\r\nline-height: 28px;\r\n}\r\n.dashboard-header {\r\n display: flex;\r\n gap: 10px;\r\n align-items: center;\r\n}\r\n::ng-deep .dashboard-header .btn-ref .k-button-text {\r\n display: flex;\r\n gap: 10px;\r\n}\r\n .dashboard-header .btn-ref {\r\n border: none;\r\n background: transparent;\r\n}\r\n.main-head-dashboard {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.tile-resource-container .k-tilelayout {\r\n background: #fff;\r\n}\r\n\r\n.bg-light-grey {\r\n background-color: lightgray;\r\n}\r\n\r\n.bg-dark-grey {\r\n background-color: darkgray;\r\n}\r\n\r\n.bg-blue {\r\n background-color: #4250AD;\r\n color: white;\r\n}\r\n\r\n.dashboard-item-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n\r\n.button-spacing {\r\n margin-right: 8px\r\n}"] }]
427
+ }], function () { return [{ type: i1.SharedService }]; }, { dashboardNameInput: [{
428
+ type: ViewChild,
429
+ args: ['dashboardNameInput']
430
+ }], ResourceData: [{
241
431
  type: Input
242
432
  }], dashboardSaved: [{
243
433
  type: Output
package/dist/module.d.ts CHANGED
@@ -33,32 +33,33 @@ import * as i31 from "./lib/user-profile/user-profile.component";
33
33
  import * as i32 from "./lib/user-view-properties/view-properties-dialog.component";
34
34
  import * as i33 from "./lib/single-dashboard/single-dashboard.component";
35
35
  import * as i34 from "./lib/single-dashboard/Components/add-item/add-item.component";
36
- import * as i35 from "./lib/single-dashboard/Components/edit-dashboard/edit-dashboard.component";
37
- import * as i36 from "./shared/urlPipe";
38
- import * as i37 from "./lib/user-notifications/user-notifications.component";
39
- import * as i38 from "@angular/common";
40
- import * as i39 from "@angular/forms";
41
- import * as i40 from "@angular/router";
42
- import * as i41 from "@progress/kendo-angular-grid";
43
- import * as i42 from "@progress/kendo-angular-dialog";
44
- import * as i43 from "@progress/kendo-angular-excel-export";
45
- import * as i44 from "@progress/kendo-angular-buttons";
46
- import * as i45 from "@memberjunction/ng-compare-records";
47
- import * as i46 from "@progress/kendo-angular-indicators";
48
- import * as i47 from "@progress/kendo-angular-charts";
49
- import * as i48 from "@progress/kendo-angular-layout";
50
- import * as i49 from "@progress/kendo-angular-inputs";
51
- import * as i50 from "@progress/kendo-angular-label";
52
- import * as i51 from "@progress/kendo-angular-icons";
53
- import * as i52 from "@memberjunction/ng-record-changes";
54
- import * as i53 from "@memberjunction/ng-container-directives";
55
- import * as i54 from "@progress/kendo-angular-listview";
56
- import * as i55 from "@memberjunction/ng-user-view-grid";
57
- import * as i56 from "@progress/kendo-angular-sortable";
58
- import * as i57 from "@progress/kendo-angular-filter";
59
- import * as i58 from "@progress/kendo-angular-dropdowns";
36
+ import * as i35 from "./lib/single-dashboard/Components/delete-item/delete-item.component";
37
+ import * as i36 from "./lib/single-dashboard/Components/edit-dashboard/edit-dashboard.component";
38
+ import * as i37 from "./shared/urlPipe";
39
+ import * as i38 from "./lib/user-notifications/user-notifications.component";
40
+ import * as i39 from "@angular/common";
41
+ import * as i40 from "@angular/forms";
42
+ import * as i41 from "@angular/router";
43
+ import * as i42 from "@progress/kendo-angular-grid";
44
+ import * as i43 from "@progress/kendo-angular-dialog";
45
+ import * as i44 from "@progress/kendo-angular-excel-export";
46
+ import * as i45 from "@progress/kendo-angular-buttons";
47
+ import * as i46 from "@memberjunction/ng-compare-records";
48
+ import * as i47 from "@progress/kendo-angular-indicators";
49
+ import * as i48 from "@progress/kendo-angular-charts";
50
+ import * as i49 from "@progress/kendo-angular-layout";
51
+ import * as i50 from "@progress/kendo-angular-inputs";
52
+ import * as i51 from "@progress/kendo-angular-label";
53
+ import * as i52 from "@progress/kendo-angular-icons";
54
+ import * as i53 from "@memberjunction/ng-record-changes";
55
+ import * as i54 from "@memberjunction/ng-container-directives";
56
+ import * as i55 from "@progress/kendo-angular-listview";
57
+ import * as i56 from "@memberjunction/ng-user-view-grid";
58
+ import * as i57 from "@progress/kendo-angular-sortable";
59
+ import * as i58 from "@progress/kendo-angular-filter";
60
+ import * as i59 from "@progress/kendo-angular-dropdowns";
60
61
  export declare class ExplorerCoreModule {
61
62
  static ɵfac: i0.ɵɵFactoryDeclaration<ExplorerCoreModule, never>;
62
- static ɵmod: i0.ɵɵNgModuleDeclaration<ExplorerCoreModule, [typeof i1.FormToolbarComponent, typeof i2.DynamicGridComponent, typeof i3.DynamicChartComponent, typeof i4.DynamicReportComponent, typeof i5.SectionLoaderComponent, typeof i6.ResourceContainerComponent, typeof i7.SkipDynamicReportComponent, typeof i8.AskSkipComponent, typeof i9.AuthButtonComponent, typeof i10.DashboardBrowserComponent, typeof i11.DataBrowserComponent, typeof i12.GenericBrowseListComponent, typeof i13.HomeComponent, typeof i14.NavigationComponent, typeof i15.ReportBrowserComponent, typeof i16.DashboardResource, typeof i17.EntityRecordResource, typeof i18.ReportResource, typeof i19.SearchResultsResource, typeof i20.UserViewResource, typeof i21.SettingsComponent, typeof i22.SingleApplicationComponent, typeof i23.FavoritesComponent, typeof i24.HeaderComponent, typeof i25.JoinGridComponent, typeof i26.SingleEntityComponent, typeof i27.SingleRecordComponent, typeof i28.SingleReportComponent, typeof i29.SingleSearchResultComponent, typeof i30.SingleViewComponent, typeof i31.UserProfileComponent, typeof i32.ViewPropertiesDialogComponent, typeof i33.SingleDashboardComponent, typeof i34.AddItemComponent, typeof i35.EditDashboardComponent, typeof i36.URLPipe, typeof i37.UserNotificationsComponent], [typeof i38.CommonModule, typeof i39.FormsModule, typeof i39.ReactiveFormsModule, typeof i40.RouterModule, typeof i41.GridModule, typeof i42.DialogsModule, typeof i43.ExcelExportModule, typeof i44.ButtonsModule, typeof i45.CompareRecordsModule, typeof i46.IndicatorsModule, typeof i38.CommonModule, typeof i39.FormsModule, typeof i41.GridModule, typeof i47.ChartsModule, typeof i44.ButtonsModule, typeof i48.TabStripModule, typeof i41.ExcelModule, typeof i41.PDFModule, typeof i46.IndicatorsModule, typeof i42.DialogsModule, typeof i49.InputsModule, typeof i50.LabelModule, typeof i51.IconModule, typeof i45.CompareRecordsModule, typeof i52.RecordChangesModule, typeof i53.ContainerDirectivesModule, typeof i54.ListViewModule, typeof i55.UserViewGridModule, typeof i56.SortableModule, typeof i48.LayoutModule, typeof i57.FilterModule, typeof i58.DropDownsModule], [typeof i1.FormToolbarComponent, typeof i2.DynamicGridComponent, typeof i3.DynamicChartComponent, typeof i4.DynamicReportComponent, typeof i5.SectionLoaderComponent, typeof i6.ResourceContainerComponent, typeof i7.SkipDynamicReportComponent, typeof i8.AskSkipComponent, typeof i9.AuthButtonComponent, typeof i10.DashboardBrowserComponent, typeof i11.DataBrowserComponent, typeof i12.GenericBrowseListComponent, typeof i13.HomeComponent, typeof i14.NavigationComponent, typeof i15.ReportBrowserComponent, typeof i16.DashboardResource, typeof i17.EntityRecordResource, typeof i18.ReportResource, typeof i19.SearchResultsResource, typeof i20.UserViewResource, typeof i21.SettingsComponent, typeof i22.SingleApplicationComponent, typeof i23.FavoritesComponent, typeof i24.HeaderComponent, typeof i25.JoinGridComponent, typeof i26.SingleEntityComponent, typeof i27.SingleRecordComponent, typeof i28.SingleReportComponent, typeof i29.SingleSearchResultComponent, typeof i30.SingleViewComponent, typeof i31.UserProfileComponent, typeof i32.ViewPropertiesDialogComponent, typeof i33.SingleDashboardComponent, typeof i34.AddItemComponent, typeof i35.EditDashboardComponent, typeof i36.URLPipe, typeof i37.UserNotificationsComponent]>;
63
+ static ɵmod: i0.ɵɵNgModuleDeclaration<ExplorerCoreModule, [typeof i1.FormToolbarComponent, typeof i2.DynamicGridComponent, typeof i3.DynamicChartComponent, typeof i4.DynamicReportComponent, typeof i5.SectionLoaderComponent, typeof i6.ResourceContainerComponent, typeof i7.SkipDynamicReportComponent, typeof i8.AskSkipComponent, typeof i9.AuthButtonComponent, typeof i10.DashboardBrowserComponent, typeof i11.DataBrowserComponent, typeof i12.GenericBrowseListComponent, typeof i13.HomeComponent, typeof i14.NavigationComponent, typeof i15.ReportBrowserComponent, typeof i16.DashboardResource, typeof i17.EntityRecordResource, typeof i18.ReportResource, typeof i19.SearchResultsResource, typeof i20.UserViewResource, typeof i21.SettingsComponent, typeof i22.SingleApplicationComponent, typeof i23.FavoritesComponent, typeof i24.HeaderComponent, typeof i25.JoinGridComponent, typeof i26.SingleEntityComponent, typeof i27.SingleRecordComponent, typeof i28.SingleReportComponent, typeof i29.SingleSearchResultComponent, typeof i30.SingleViewComponent, typeof i31.UserProfileComponent, typeof i32.ViewPropertiesDialogComponent, typeof i33.SingleDashboardComponent, typeof i34.AddItemComponent, typeof i35.DeleteItemComponent, typeof i36.EditDashboardComponent, typeof i37.URLPipe, typeof i38.UserNotificationsComponent], [typeof i39.CommonModule, typeof i40.FormsModule, typeof i40.ReactiveFormsModule, typeof i41.RouterModule, typeof i42.GridModule, typeof i43.DialogsModule, typeof i44.ExcelExportModule, typeof i45.ButtonsModule, typeof i46.CompareRecordsModule, typeof i47.IndicatorsModule, typeof i39.CommonModule, typeof i40.FormsModule, typeof i42.GridModule, typeof i48.ChartsModule, typeof i45.ButtonsModule, typeof i49.TabStripModule, typeof i42.ExcelModule, typeof i42.PDFModule, typeof i47.IndicatorsModule, typeof i43.DialogsModule, typeof i50.InputsModule, typeof i51.LabelModule, typeof i52.IconModule, typeof i46.CompareRecordsModule, typeof i53.RecordChangesModule, typeof i54.ContainerDirectivesModule, typeof i55.ListViewModule, typeof i56.UserViewGridModule, typeof i57.SortableModule, typeof i49.LayoutModule, typeof i58.FilterModule, typeof i59.DropDownsModule], [typeof i1.FormToolbarComponent, typeof i2.DynamicGridComponent, typeof i3.DynamicChartComponent, typeof i4.DynamicReportComponent, typeof i5.SectionLoaderComponent, typeof i6.ResourceContainerComponent, typeof i7.SkipDynamicReportComponent, typeof i8.AskSkipComponent, typeof i9.AuthButtonComponent, typeof i10.DashboardBrowserComponent, typeof i11.DataBrowserComponent, typeof i12.GenericBrowseListComponent, typeof i13.HomeComponent, typeof i14.NavigationComponent, typeof i15.ReportBrowserComponent, typeof i16.DashboardResource, typeof i17.EntityRecordResource, typeof i18.ReportResource, typeof i19.SearchResultsResource, typeof i20.UserViewResource, typeof i21.SettingsComponent, typeof i22.SingleApplicationComponent, typeof i23.FavoritesComponent, typeof i24.HeaderComponent, typeof i25.JoinGridComponent, typeof i26.SingleEntityComponent, typeof i27.SingleRecordComponent, typeof i28.SingleReportComponent, typeof i29.SingleSearchResultComponent, typeof i30.SingleViewComponent, typeof i31.UserProfileComponent, typeof i32.ViewPropertiesDialogComponent, typeof i33.SingleDashboardComponent, typeof i34.AddItemComponent, typeof i35.DeleteItemComponent, typeof i36.EditDashboardComponent, typeof i37.URLPipe, typeof i38.UserNotificationsComponent]>;
63
64
  static ɵinj: i0.ɵɵInjectorDeclaration<ExplorerCoreModule>;
64
65
  }
package/dist/module.js CHANGED
@@ -61,6 +61,7 @@ import { AddItemComponent } from './lib/single-dashboard/Components/add-item/add
61
61
  import { EditDashboardComponent } from './lib/single-dashboard/Components/edit-dashboard/edit-dashboard.component';
62
62
  import { URLPipe } from './shared/urlPipe';
63
63
  import { UserNotificationsComponent } from './lib/user-notifications/user-notifications.component';
64
+ import { DeleteItemComponent } from './lib/single-dashboard/Components/delete-item/delete-item.component';
64
65
  import * as i0 from "@angular/core";
65
66
  import * as i1 from "@angular/common";
66
67
  import * as i2 from "@progress/kendo-angular-buttons";
@@ -141,6 +142,7 @@ ExplorerCoreModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [Commo
141
142
  ViewPropertiesDialogComponent,
142
143
  SingleDashboardComponent,
143
144
  AddItemComponent,
145
+ DeleteItemComponent,
144
146
  EditDashboardComponent,
145
147
  URLPipe,
146
148
  UserNotificationsComponent
@@ -214,6 +216,7 @@ ExplorerCoreModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [Commo
214
216
  ViewPropertiesDialogComponent,
215
217
  SingleDashboardComponent,
216
218
  AddItemComponent,
219
+ DeleteItemComponent,
217
220
  EditDashboardComponent,
218
221
  URLPipe,
219
222
  UserNotificationsComponent
@@ -254,6 +257,7 @@ ExplorerCoreModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [Commo
254
257
  ViewPropertiesDialogComponent,
255
258
  SingleDashboardComponent,
256
259
  AddItemComponent,
260
+ DeleteItemComponent,
257
261
  EditDashboardComponent,
258
262
  URLPipe,
259
263
  UserNotificationsComponent], imports: [CommonModule,
@@ -321,12 +325,14 @@ ExplorerCoreModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [Commo
321
325
  ViewPropertiesDialogComponent,
322
326
  SingleDashboardComponent,
323
327
  AddItemComponent,
328
+ DeleteItemComponent,
324
329
  EditDashboardComponent,
325
330
  URLPipe,
326
331
  UserNotificationsComponent] }); })();
327
332
  i0.ɵɵsetComponentScope(DynamicReportComponent, [i1.NgIf, i2.Button, i3.TabStripComponent, i3.TabStripTabComponent, i3.TabContentDirective, i3.TabTitleDirective, i4.IconComponent, i5.FillContainer, DynamicGridComponent,
328
333
  DynamicChartComponent], []);
329
334
  i0.ɵɵsetComponentScope(SkipDynamicReportComponent, [DynamicReportComponent], []);
330
- i0.ɵɵsetComponentScope(SingleDashboardComponent, [i1.NgForOf, i1.NgIf, i2.Button, i3.TileLayoutComponent, i3.TileLayoutItemComponent, i3.TileLayoutItemHeaderComponent, i3.TileLayoutItemBodyComponent, ResourceContainerComponent,
335
+ i0.ɵɵsetComponentScope(SingleDashboardComponent, [i1.NgClass, i1.NgForOf, i1.NgIf, i2.Button, i3.TileLayoutComponent, i3.TileLayoutItemComponent, i3.TileLayoutItemHeaderComponent, i3.TileLayoutItemBodyComponent, ResourceContainerComponent,
331
336
  AddItemComponent,
337
+ DeleteItemComponent,
332
338
  EditDashboardComponent], []);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@memberjunction/ng-explorer-core",
3
- "version": "0.9.75",
3
+ "version": "0.9.78",
4
4
  "description": "MemberJunction Explorer: Core Angular Components",
5
5
  "main": "./dist/public-api.js",
6
6
  "typings": "./dist/public-api.d.ts",
@@ -29,10 +29,10 @@
29
29
  "dependencies": {
30
30
  "@memberjunction/global": "^0.9.117",
31
31
  "@memberjunction/core": "^0.9.128",
32
- "@memberjunction/ng-compare-records": "^0.9.125",
32
+ "@memberjunction/ng-compare-records": "^0.9.127",
33
33
  "@memberjunction/ng-record-changes": "^0.9.58",
34
34
  "@memberjunction/ng-container-directives": "^0.9.97",
35
- "@memberjunction/ng-user-view-grid": "^0.9.108",
35
+ "@memberjunction/ng-user-view-grid": "^0.9.110",
36
36
  "tslib": "^2.3.0"
37
37
  },
38
38
  "sideEffects": false