@memberjunction/ng-data-context 2.43.0 → 2.45.0
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.
- package/README.md +170 -44
- package/dist/lib/module.d.ts +8 -5
- package/dist/lib/module.d.ts.map +1 -1
- package/dist/lib/module.js +15 -3
- package/dist/lib/module.js.map +1 -1
- package/dist/lib/ng-data-context-dialog.component.d.ts +8 -3
- package/dist/lib/ng-data-context-dialog.component.d.ts.map +1 -1
- package/dist/lib/ng-data-context-dialog.component.js +44 -11
- package/dist/lib/ng-data-context-dialog.component.js.map +1 -1
- package/dist/lib/ng-data-context.component.d.ts +27 -2
- package/dist/lib/ng-data-context.component.d.ts.map +1 -1
- package/dist/lib/ng-data-context.component.js +477 -47
- package/dist/lib/ng-data-context.component.js.map +1 -1
- package/package.json +5 -4
|
@@ -10,56 +10,353 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
10
10
|
import { Component, Input } from '@angular/core';
|
|
11
11
|
import { LogError, Metadata, RunView } from '@memberjunction/core';
|
|
12
12
|
import * as i0 from "@angular/core";
|
|
13
|
-
import * as i1 from "@angular/
|
|
14
|
-
import * as i2 from "@progress/kendo-angular-
|
|
13
|
+
import * as i1 from "@angular/forms";
|
|
14
|
+
import * as i2 from "@progress/kendo-angular-buttons";
|
|
15
15
|
import * as i3 from "@progress/kendo-angular-indicators";
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
import * as i4 from "@progress/kendo-angular-inputs";
|
|
17
|
+
import * as i5 from "@angular/common";
|
|
18
|
+
const _forTrack0 = ($index, $item) => $item.ID;
|
|
19
|
+
function DataContextComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
20
|
+
i0.ɵɵelementStart(0, "div", 1);
|
|
21
|
+
i0.ɵɵelement(1, "kendo-loader", 3);
|
|
22
|
+
i0.ɵɵelementStart(2, "p", 4);
|
|
23
|
+
i0.ɵɵtext(3, "Loading data context...");
|
|
24
|
+
i0.ɵɵelementEnd()();
|
|
25
|
+
} }
|
|
26
|
+
function DataContextComponent_Conditional_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
|
|
27
|
+
i0.ɵɵelementStart(0, "p", 9);
|
|
28
|
+
i0.ɵɵtext(1);
|
|
29
|
+
i0.ɵɵelementEnd();
|
|
30
|
+
} if (rf & 2) {
|
|
31
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
32
|
+
i0.ɵɵadvance();
|
|
33
|
+
i0.ɵɵtextInterpolate(ctx_r1.dataContextRecord.Description);
|
|
34
|
+
} }
|
|
35
|
+
function DataContextComponent_Conditional_2_Conditional_23_Template(rf, ctx) { if (rf & 1) {
|
|
36
|
+
i0.ɵɵelementStart(0, "div", 21);
|
|
37
|
+
i0.ɵɵelement(1, "i", 28);
|
|
18
38
|
i0.ɵɵtext(2);
|
|
19
39
|
i0.ɵɵelementEnd();
|
|
20
|
-
|
|
21
|
-
i0.ɵɵ
|
|
40
|
+
} if (rf & 2) {
|
|
41
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
42
|
+
i0.ɵɵadvance(2);
|
|
43
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r1.errorMessage, " ");
|
|
44
|
+
} }
|
|
45
|
+
function DataContextComponent_Conditional_2_ng_template_26_Template(rf, ctx) { if (rf & 1) {
|
|
46
|
+
i0.ɵɵelement(0, "i", 29);
|
|
47
|
+
} }
|
|
48
|
+
function DataContextComponent_Conditional_2_For_29_Conditional_7_Template(rf, ctx) { if (rf & 1) {
|
|
49
|
+
i0.ɵɵelementStart(0, "span", 34);
|
|
50
|
+
i0.ɵɵtext(1);
|
|
51
|
+
i0.ɵɵelementEnd();
|
|
52
|
+
} if (rf & 2) {
|
|
53
|
+
const item_r4 = i0.ɵɵnextContext().$implicit;
|
|
54
|
+
i0.ɵɵadvance();
|
|
55
|
+
i0.ɵɵtextInterpolate(item_r4.Description);
|
|
56
|
+
} }
|
|
57
|
+
function DataContextComponent_Conditional_2_For_29_Conditional_11_Template(rf, ctx) { if (rf & 1) {
|
|
58
|
+
const _r5 = i0.ɵɵgetCurrentView();
|
|
59
|
+
i0.ɵɵelementStart(0, "div", 37)(1, "div", 44)(2, "h4");
|
|
60
|
+
i0.ɵɵelement(3, "i", 45);
|
|
61
|
+
i0.ɵɵtext(4, " SQL Query");
|
|
62
|
+
i0.ɵɵelementEnd();
|
|
63
|
+
i0.ɵɵelementStart(5, "div", 46)(6, "button", 47);
|
|
64
|
+
i0.ɵɵlistener("click", function DataContextComponent_Conditional_2_For_29_Conditional_11_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r5); const item_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.copyToClipboard(item_r4.SQL, "sql-" + item_r4.ID)); });
|
|
65
|
+
i0.ɵɵelement(7, "i", 14);
|
|
66
|
+
i0.ɵɵtext(8);
|
|
67
|
+
i0.ɵɵelementEnd();
|
|
68
|
+
i0.ɵɵelementStart(9, "button", 48);
|
|
69
|
+
i0.ɵɵlistener("click", function DataContextComponent_Conditional_2_For_29_Conditional_11_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r5); const item_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.previewSQLCode(item_r4.SQL)); });
|
|
70
|
+
i0.ɵɵelement(10, "i", 49);
|
|
71
|
+
i0.ɵɵtext(11, " Expand ");
|
|
72
|
+
i0.ɵɵelementEnd()()();
|
|
73
|
+
i0.ɵɵelementStart(12, "pre", 50)(13, "code");
|
|
74
|
+
i0.ɵɵtext(14);
|
|
75
|
+
i0.ɵɵelementEnd()()();
|
|
76
|
+
} if (rf & 2) {
|
|
77
|
+
const item_r4 = i0.ɵɵnextContext().$implicit;
|
|
78
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
79
|
+
i0.ɵɵadvance(7);
|
|
80
|
+
i0.ɵɵclassProp("fa-copy", ctx_r1.copiedField !== "sql-" + item_r4.ID)("fa-check", ctx_r1.copiedField === "sql-" + item_r4.ID);
|
|
81
|
+
i0.ɵɵadvance();
|
|
82
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r1.copiedField === "sql-" + item_r4.ID ? "Copied!" : "Copy", " ");
|
|
83
|
+
i0.ɵɵadvance(6);
|
|
84
|
+
i0.ɵɵtextInterpolate(item_r4.SQL);
|
|
85
|
+
} }
|
|
86
|
+
function DataContextComponent_Conditional_2_For_29_Conditional_14_Template(rf, ctx) { if (rf & 1) {
|
|
87
|
+
const _r6 = i0.ɵɵgetCurrentView();
|
|
88
|
+
i0.ɵɵelementStart(0, "div", 40)(1, "span", 51);
|
|
89
|
+
i0.ɵɵtext(2, "Entity");
|
|
90
|
+
i0.ɵɵelementEnd();
|
|
91
|
+
i0.ɵɵelementStart(3, "div", 52)(4, "span");
|
|
92
|
+
i0.ɵɵtext(5);
|
|
93
|
+
i0.ɵɵelementEnd();
|
|
94
|
+
i0.ɵɵelementStart(6, "button", 53);
|
|
95
|
+
i0.ɵɵlistener("click", function DataContextComponent_Conditional_2_For_29_Conditional_14_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r6); const item_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.navigateToEntity(item_r4.EntityID)); });
|
|
96
|
+
i0.ɵɵelement(7, "i", 54);
|
|
97
|
+
i0.ɵɵelementEnd()()();
|
|
98
|
+
} if (rf & 2) {
|
|
99
|
+
const item_r4 = i0.ɵɵnextContext().$implicit;
|
|
100
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
101
|
+
i0.ɵɵadvance(5);
|
|
102
|
+
i0.ɵɵtextInterpolate(ctx_r1.getEntityName(item_r4.EntityID) || "Unknown");
|
|
103
|
+
} }
|
|
104
|
+
function DataContextComponent_Conditional_2_For_29_Conditional_15_Template(rf, ctx) { if (rf & 1) {
|
|
105
|
+
const _r7 = i0.ɵɵgetCurrentView();
|
|
106
|
+
i0.ɵɵelementStart(0, "div", 40)(1, "span", 51);
|
|
107
|
+
i0.ɵɵtext(2, "View");
|
|
108
|
+
i0.ɵɵelementEnd();
|
|
109
|
+
i0.ɵɵelementStart(3, "div", 52)(4, "span", 55);
|
|
110
|
+
i0.ɵɵtext(5);
|
|
111
|
+
i0.ɵɵpipe(6, "slice");
|
|
112
|
+
i0.ɵɵelementEnd();
|
|
113
|
+
i0.ɵɵelementStart(7, "button", 56);
|
|
114
|
+
i0.ɵɵlistener("click", function DataContextComponent_Conditional_2_For_29_Conditional_15_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r7); const item_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.navigateToView(item_r4.ViewID)); });
|
|
115
|
+
i0.ɵɵelement(8, "i", 54);
|
|
116
|
+
i0.ɵɵelementEnd()()();
|
|
117
|
+
} if (rf & 2) {
|
|
118
|
+
const item_r4 = i0.ɵɵnextContext().$implicit;
|
|
119
|
+
i0.ɵɵadvance(4);
|
|
120
|
+
i0.ɵɵpropertyInterpolate("title", item_r4.ViewID);
|
|
121
|
+
i0.ɵɵadvance();
|
|
122
|
+
i0.ɵɵtextInterpolate2("", i0.ɵɵpipeBind3(6, 3, item_r4.ViewID, 0, 20), "", item_r4.ViewID.length > 20 ? "..." : "", "");
|
|
123
|
+
} }
|
|
124
|
+
function DataContextComponent_Conditional_2_For_29_Conditional_16_Template(rf, ctx) { if (rf & 1) {
|
|
125
|
+
const _r8 = i0.ɵɵgetCurrentView();
|
|
126
|
+
i0.ɵɵelementStart(0, "div", 40)(1, "span", 51);
|
|
127
|
+
i0.ɵɵtext(2, "Query");
|
|
128
|
+
i0.ɵɵelementEnd();
|
|
129
|
+
i0.ɵɵelementStart(3, "div", 52)(4, "span", 55);
|
|
130
|
+
i0.ɵɵtext(5);
|
|
131
|
+
i0.ɵɵpipe(6, "slice");
|
|
132
|
+
i0.ɵɵelementEnd();
|
|
133
|
+
i0.ɵɵelementStart(7, "button", 57);
|
|
134
|
+
i0.ɵɵlistener("click", function DataContextComponent_Conditional_2_For_29_Conditional_16_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r8); const item_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.navigateToQuery(item_r4.QueryID)); });
|
|
135
|
+
i0.ɵɵelement(8, "i", 54);
|
|
136
|
+
i0.ɵɵelementEnd()()();
|
|
137
|
+
} if (rf & 2) {
|
|
138
|
+
const item_r4 = i0.ɵɵnextContext().$implicit;
|
|
139
|
+
i0.ɵɵadvance(4);
|
|
140
|
+
i0.ɵɵpropertyInterpolate("title", item_r4.QueryID);
|
|
141
|
+
i0.ɵɵadvance();
|
|
142
|
+
i0.ɵɵtextInterpolate2("", i0.ɵɵpipeBind3(6, 3, item_r4.QueryID, 0, 20), "", item_r4.QueryID.length > 20 ? "..." : "", "");
|
|
143
|
+
} }
|
|
144
|
+
function DataContextComponent_Conditional_2_For_29_Conditional_17_Template(rf, ctx) { if (rf & 1) {
|
|
145
|
+
const _r9 = i0.ɵɵgetCurrentView();
|
|
146
|
+
i0.ɵɵelementStart(0, "div", 40)(1, "span", 51);
|
|
147
|
+
i0.ɵɵtext(2, "Record ID");
|
|
148
|
+
i0.ɵɵelementEnd();
|
|
149
|
+
i0.ɵɵelementStart(3, "div", 52)(4, "code");
|
|
150
|
+
i0.ɵɵtext(5);
|
|
151
|
+
i0.ɵɵelementEnd();
|
|
152
|
+
i0.ɵɵelementStart(6, "button", 58);
|
|
153
|
+
i0.ɵɵlistener("click", function DataContextComponent_Conditional_2_For_29_Conditional_17_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r9); const item_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.copyToClipboard(item_r4.RecordID, "record-" + item_r4.ID)); });
|
|
154
|
+
i0.ɵɵelement(7, "i", 14);
|
|
155
|
+
i0.ɵɵelementEnd()()();
|
|
156
|
+
} if (rf & 2) {
|
|
157
|
+
const item_r4 = i0.ɵɵnextContext().$implicit;
|
|
158
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
159
|
+
i0.ɵɵadvance(5);
|
|
160
|
+
i0.ɵɵtextInterpolate(item_r4.RecordID);
|
|
161
|
+
i0.ɵɵadvance(2);
|
|
162
|
+
i0.ɵɵclassProp("fa-copy", ctx_r1.copiedField !== "record-" + item_r4.ID)("fa-check", ctx_r1.copiedField === "record-" + item_r4.ID);
|
|
163
|
+
} }
|
|
164
|
+
function DataContextComponent_Conditional_2_For_29_Conditional_23_Template(rf, ctx) { if (rf & 1) {
|
|
165
|
+
i0.ɵɵelementStart(0, "span", 42);
|
|
166
|
+
i0.ɵɵelement(1, "i", 59);
|
|
167
|
+
i0.ɵɵtext(2);
|
|
168
|
+
i0.ɵɵpipe(3, "date");
|
|
22
169
|
i0.ɵɵelementEnd();
|
|
23
|
-
|
|
170
|
+
} if (rf & 2) {
|
|
171
|
+
const item_r4 = i0.ɵɵnextContext().$implicit;
|
|
172
|
+
i0.ɵɵadvance(2);
|
|
173
|
+
i0.ɵɵtextInterpolate1(" Updated ", i0.ɵɵpipeBind2(3, 1, item_r4.__mj_UpdatedAt, "short"), " ");
|
|
174
|
+
} }
|
|
175
|
+
function DataContextComponent_Conditional_2_For_29_Template(rf, ctx) { if (rf & 1) {
|
|
176
|
+
const _r3 = i0.ɵɵgetCurrentView();
|
|
177
|
+
i0.ɵɵelementStart(0, "div", 30)(1, "div", 31);
|
|
178
|
+
i0.ɵɵlistener("click", function DataContextComponent_Conditional_2_For_29_Template_div_click_1_listener() { const item_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleItemExpansion(item_r4.ID)); });
|
|
179
|
+
i0.ɵɵelementStart(2, "div", 32)(3, "div", 33);
|
|
180
|
+
i0.ɵɵelement(4, "i");
|
|
181
|
+
i0.ɵɵelementStart(5, "span");
|
|
24
182
|
i0.ɵɵtext(6);
|
|
25
183
|
i0.ɵɵelementEnd()();
|
|
184
|
+
i0.ɵɵtemplate(7, DataContextComponent_Conditional_2_For_29_Conditional_7_Template, 2, 1, "span", 34);
|
|
185
|
+
i0.ɵɵelementEnd();
|
|
186
|
+
i0.ɵɵelementStart(8, "button", 35);
|
|
187
|
+
i0.ɵɵelement(9, "i", 14);
|
|
188
|
+
i0.ɵɵelementEnd()();
|
|
189
|
+
i0.ɵɵelementStart(10, "div", 36);
|
|
190
|
+
i0.ɵɵtemplate(11, DataContextComponent_Conditional_2_For_29_Conditional_11_Template, 15, 6, "div", 37);
|
|
191
|
+
i0.ɵɵelementStart(12, "div", 38)(13, "div", 39);
|
|
192
|
+
i0.ɵɵtemplate(14, DataContextComponent_Conditional_2_For_29_Conditional_14_Template, 8, 1, "div", 40)(15, DataContextComponent_Conditional_2_For_29_Conditional_15_Template, 9, 7, "div", 40)(16, DataContextComponent_Conditional_2_For_29_Conditional_16_Template, 9, 7, "div", 40)(17, DataContextComponent_Conditional_2_For_29_Conditional_17_Template, 8, 5, "div", 40);
|
|
193
|
+
i0.ɵɵelementEnd()();
|
|
194
|
+
i0.ɵɵelementStart(18, "div", 41)(19, "span", 42);
|
|
195
|
+
i0.ɵɵelement(20, "i", 43);
|
|
196
|
+
i0.ɵɵtext(21);
|
|
197
|
+
i0.ɵɵpipe(22, "date");
|
|
198
|
+
i0.ɵɵelementEnd();
|
|
199
|
+
i0.ɵɵtemplate(23, DataContextComponent_Conditional_2_For_29_Conditional_23_Template, 4, 4, "span", 42);
|
|
200
|
+
i0.ɵɵelementEnd()()();
|
|
26
201
|
} if (rf & 2) {
|
|
27
|
-
const
|
|
202
|
+
const item_r4 = ctx.$implicit;
|
|
203
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
204
|
+
i0.ɵɵclassProp("expanded", ctx_r1.expandedItems[item_r4.ID]);
|
|
205
|
+
i0.ɵɵadvance(3);
|
|
206
|
+
i0.ɵɵstyleProp("background-color", ctx_r1.getTypeColor(item_r4.Type) + "20")("color", ctx_r1.getTypeColor(item_r4.Type));
|
|
207
|
+
i0.ɵɵadvance();
|
|
208
|
+
i0.ɵɵclassMap(ctx_r1.getTypeIcon(item_r4.Type));
|
|
28
209
|
i0.ɵɵadvance(2);
|
|
29
|
-
i0.ɵɵ
|
|
210
|
+
i0.ɵɵtextInterpolate(item_r4.Type);
|
|
211
|
+
i0.ɵɵadvance();
|
|
212
|
+
i0.ɵɵconditional(item_r4.Description ? 7 : -1);
|
|
30
213
|
i0.ɵɵadvance(2);
|
|
31
|
-
i0.ɵɵ
|
|
214
|
+
i0.ɵɵclassProp("fa-chevron-down", !ctx_r1.expandedItems[item_r4.ID])("fa-chevron-up", ctx_r1.expandedItems[item_r4.ID]);
|
|
32
215
|
i0.ɵɵadvance(2);
|
|
33
|
-
i0.ɵɵ
|
|
216
|
+
i0.ɵɵconditional(item_r4.SQL ? 11 : -1);
|
|
217
|
+
i0.ɵɵadvance(3);
|
|
218
|
+
i0.ɵɵconditional(item_r4.EntityID ? 14 : -1);
|
|
219
|
+
i0.ɵɵadvance();
|
|
220
|
+
i0.ɵɵconditional(item_r4.ViewID ? 15 : -1);
|
|
221
|
+
i0.ɵɵadvance();
|
|
222
|
+
i0.ɵɵconditional(item_r4.QueryID ? 16 : -1);
|
|
223
|
+
i0.ɵɵadvance();
|
|
224
|
+
i0.ɵɵconditional(item_r4.RecordID ? 17 : -1);
|
|
225
|
+
i0.ɵɵadvance(4);
|
|
226
|
+
i0.ɵɵtextInterpolate1(" Created ", i0.ɵɵpipeBind2(22, 21, item_r4.__mj_CreatedAt, "short"), " ");
|
|
227
|
+
i0.ɵɵadvance(2);
|
|
228
|
+
i0.ɵɵconditional(item_r4.__mj_UpdatedAt && item_r4.__mj_UpdatedAt !== item_r4.__mj_CreatedAt ? 23 : -1);
|
|
34
229
|
} }
|
|
35
|
-
function
|
|
36
|
-
i0.ɵɵelementStart(0, "div",
|
|
37
|
-
i0.ɵɵ
|
|
38
|
-
i0.ɵɵelementStart(2, "
|
|
39
|
-
i0.ɵɵtext(
|
|
230
|
+
function DataContextComponent_Conditional_2_Conditional_30_Template(rf, ctx) { if (rf & 1) {
|
|
231
|
+
i0.ɵɵelementStart(0, "div", 27);
|
|
232
|
+
i0.ɵɵelement(1, "i", 60);
|
|
233
|
+
i0.ɵɵelementStart(2, "p");
|
|
234
|
+
i0.ɵɵtext(3, "No items found");
|
|
40
235
|
i0.ɵɵelementEnd()();
|
|
41
|
-
|
|
42
|
-
|
|
236
|
+
} }
|
|
237
|
+
function DataContextComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
238
|
+
const _r1 = i0.ɵɵgetCurrentView();
|
|
239
|
+
i0.ɵɵelementStart(0, "div", 5)(1, "div", 6)(2, "div", 7);
|
|
240
|
+
i0.ɵɵelement(3, "i", 8);
|
|
241
|
+
i0.ɵɵelementStart(4, "h2");
|
|
242
|
+
i0.ɵɵtext(5);
|
|
43
243
|
i0.ɵɵelementEnd()();
|
|
244
|
+
i0.ɵɵtemplate(6, DataContextComponent_Conditional_2_Conditional_6_Template, 2, 1, "p", 9);
|
|
245
|
+
i0.ɵɵelementStart(7, "div", 10)(8, "span", 11);
|
|
246
|
+
i0.ɵɵelement(9, "i", 12);
|
|
247
|
+
i0.ɵɵtext(10);
|
|
248
|
+
i0.ɵɵelementStart(11, "button", 13);
|
|
249
|
+
i0.ɵɵlistener("click", function DataContextComponent_Conditional_2_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.copyToClipboard((ctx_r1.dataContextRecord == null ? null : ctx_r1.dataContextRecord.ID) || "", "context-id")); });
|
|
250
|
+
i0.ɵɵelement(12, "i", 14);
|
|
251
|
+
i0.ɵɵelementEnd()();
|
|
252
|
+
i0.ɵɵelementStart(13, "span", 11);
|
|
253
|
+
i0.ɵɵelement(14, "i", 15);
|
|
254
|
+
i0.ɵɵtext(15);
|
|
255
|
+
i0.ɵɵelementEnd()()();
|
|
256
|
+
i0.ɵɵelementStart(16, "div", 16)(17, "button", 17);
|
|
257
|
+
i0.ɵɵlistener("click", function DataContextComponent_Conditional_2_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.refresh()); });
|
|
258
|
+
i0.ɵɵelement(18, "i", 18);
|
|
259
|
+
i0.ɵɵtext(19, " Refresh ");
|
|
260
|
+
i0.ɵɵelementEnd();
|
|
261
|
+
i0.ɵɵelementStart(20, "button", 19);
|
|
262
|
+
i0.ɵɵlistener("click", function DataContextComponent_Conditional_2_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.exportToCSV()); });
|
|
263
|
+
i0.ɵɵelement(21, "i", 20);
|
|
264
|
+
i0.ɵɵtext(22, " Export ");
|
|
265
|
+
i0.ɵɵelementEnd()()();
|
|
266
|
+
i0.ɵɵtemplate(23, DataContextComponent_Conditional_2_Conditional_23_Template, 3, 1, "div", 21);
|
|
267
|
+
i0.ɵɵelementStart(24, "div", 22)(25, "kendo-textbox", 23);
|
|
268
|
+
i0.ɵɵtwoWayListener("ngModelChange", function DataContextComponent_Conditional_2_Template_kendo_textbox_ngModelChange_25_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.searchTerm, $event) || (ctx_r1.searchTerm = $event); return i0.ɵɵresetView($event); });
|
|
269
|
+
i0.ɵɵlistener("ngModelChange", function DataContextComponent_Conditional_2_Template_kendo_textbox_ngModelChange_25_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSearchChange()); });
|
|
270
|
+
i0.ɵɵtemplate(26, DataContextComponent_Conditional_2_ng_template_26_Template, 1, 0, "ng-template", 24);
|
|
271
|
+
i0.ɵɵelementEnd()();
|
|
272
|
+
i0.ɵɵelementStart(27, "div", 25);
|
|
273
|
+
i0.ɵɵrepeaterCreate(28, DataContextComponent_Conditional_2_For_29_Template, 24, 24, "div", 26, _forTrack0);
|
|
274
|
+
i0.ɵɵtemplate(30, DataContextComponent_Conditional_2_Conditional_30_Template, 4, 0, "div", 27);
|
|
275
|
+
i0.ɵɵelementEnd();
|
|
44
276
|
} if (rf & 2) {
|
|
45
|
-
const
|
|
46
|
-
i0.ɵɵadvance();
|
|
47
|
-
i0.ɵɵproperty("ngIf", ctx_r0.dataContextRecord);
|
|
277
|
+
const ctx_r1 = i0.ɵɵnextContext();
|
|
48
278
|
i0.ɵɵadvance(5);
|
|
49
|
-
i0.ɵɵ
|
|
279
|
+
i0.ɵɵtextInterpolate((ctx_r1.dataContextRecord == null ? null : ctx_r1.dataContextRecord.Name) || "Data Context");
|
|
280
|
+
i0.ɵɵadvance();
|
|
281
|
+
i0.ɵɵconditional(ctx_r1.dataContextRecord && ctx_r1.dataContextRecord.Description ? 6 : -1);
|
|
282
|
+
i0.ɵɵadvance(4);
|
|
283
|
+
i0.ɵɵtextInterpolate1(" ID: ", ctx_r1.dataContextRecord == null ? null : ctx_r1.dataContextRecord.ID, " ");
|
|
284
|
+
i0.ɵɵadvance(2);
|
|
285
|
+
i0.ɵɵclassProp("fa-copy", ctx_r1.copiedField !== "context-id")("fa-check", ctx_r1.copiedField === "context-id");
|
|
286
|
+
i0.ɵɵadvance(3);
|
|
287
|
+
i0.ɵɵtextInterpolate2(" ", ctx_r1.itemCount, " ", ctx_r1.itemCount === 1 ? "item" : "items", " ");
|
|
288
|
+
i0.ɵɵadvance(8);
|
|
289
|
+
i0.ɵɵconditional(ctx_r1.errorMessage ? 23 : -1);
|
|
290
|
+
i0.ɵɵadvance(2);
|
|
291
|
+
i0.ɵɵtwoWayProperty("ngModel", ctx_r1.searchTerm);
|
|
292
|
+
i0.ɵɵproperty("clearButton", true);
|
|
293
|
+
i0.ɵɵadvance(3);
|
|
294
|
+
i0.ɵɵrepeater(ctx_r1.filteredItems);
|
|
295
|
+
i0.ɵɵadvance(2);
|
|
296
|
+
i0.ɵɵconditional(ctx_r1.filteredItems.length === 0 ? 30 : -1);
|
|
50
297
|
} }
|
|
51
|
-
function
|
|
52
|
-
i0.ɵɵ
|
|
298
|
+
function DataContextComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
299
|
+
const _r10 = i0.ɵɵgetCurrentView();
|
|
300
|
+
i0.ɵɵelementStart(0, "div", 61);
|
|
301
|
+
i0.ɵɵlistener("click", function DataContextComponent_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeSQLPreview()); });
|
|
302
|
+
i0.ɵɵelementStart(1, "div", 62);
|
|
303
|
+
i0.ɵɵlistener("click", function DataContextComponent_Conditional_3_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r10); return i0.ɵɵresetView($event.stopPropagation()); });
|
|
304
|
+
i0.ɵɵelementStart(2, "div", 63)(3, "h3");
|
|
305
|
+
i0.ɵɵtext(4, "SQL Preview");
|
|
306
|
+
i0.ɵɵelementEnd();
|
|
307
|
+
i0.ɵɵelementStart(5, "button", 64);
|
|
308
|
+
i0.ɵɵlistener("click", function DataContextComponent_Conditional_3_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeSQLPreview()); });
|
|
309
|
+
i0.ɵɵelement(6, "i", 65);
|
|
310
|
+
i0.ɵɵelementEnd()();
|
|
311
|
+
i0.ɵɵelementStart(7, "div", 66)(8, "pre")(9, "code");
|
|
312
|
+
i0.ɵɵtext(10);
|
|
313
|
+
i0.ɵɵelementEnd()()();
|
|
314
|
+
i0.ɵɵelementStart(11, "div", 67)(12, "button", 68);
|
|
315
|
+
i0.ɵɵlistener("click", function DataContextComponent_Conditional_3_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.copyToClipboard(ctx_r1.previewSQL, "preview-sql")); });
|
|
316
|
+
i0.ɵɵelement(13, "i", 14);
|
|
317
|
+
i0.ɵɵtext(14);
|
|
318
|
+
i0.ɵɵelementEnd()()()();
|
|
319
|
+
} if (rf & 2) {
|
|
320
|
+
const ctx_r1 = i0.ɵɵnextContext();
|
|
321
|
+
i0.ɵɵadvance(10);
|
|
322
|
+
i0.ɵɵtextInterpolate(ctx_r1.previewSQL);
|
|
323
|
+
i0.ɵɵadvance(3);
|
|
324
|
+
i0.ɵɵclassProp("fa-copy", ctx_r1.copiedField !== "preview-sql")("fa-check", ctx_r1.copiedField === "preview-sql");
|
|
325
|
+
i0.ɵɵadvance();
|
|
326
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r1.copiedField === "preview-sql" ? "Copied!" : "Copy SQL", " ");
|
|
53
327
|
} }
|
|
54
328
|
export class DataContextComponent {
|
|
55
329
|
constructor() {
|
|
56
330
|
this.Provider = null;
|
|
57
331
|
this.dataContextItems = [];
|
|
58
332
|
this.showLoader = false;
|
|
333
|
+
this.errorMessage = '';
|
|
334
|
+
this.searchTerm = '';
|
|
335
|
+
// UI state
|
|
336
|
+
this.showSQLPreview = false;
|
|
337
|
+
this.previewSQL = '';
|
|
338
|
+
this.copiedField = '';
|
|
339
|
+
this.expandedItems = {};
|
|
59
340
|
}
|
|
60
341
|
get ProviderToUse() {
|
|
61
342
|
return this.Provider || Metadata.Provider;
|
|
62
343
|
}
|
|
344
|
+
get filteredItems() {
|
|
345
|
+
if (!this.searchTerm) {
|
|
346
|
+
return this.dataContextItems;
|
|
347
|
+
}
|
|
348
|
+
const term = this.searchTerm.toLowerCase();
|
|
349
|
+
return this.dataContextItems.filter(item => {
|
|
350
|
+
var _a, _b, _c, _d;
|
|
351
|
+
return ((_a = item.Type) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(term)) ||
|
|
352
|
+
((_b = item.SQL) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(term)) ||
|
|
353
|
+
(item.EntityID ? (_c = this.getEntityName(item.EntityID)) === null || _c === void 0 ? void 0 : _c.toLowerCase().includes(term) : false) ||
|
|
354
|
+
((_d = item.Description) === null || _d === void 0 ? void 0 : _d.toLowerCase().includes(term));
|
|
355
|
+
});
|
|
356
|
+
}
|
|
357
|
+
get itemCount() {
|
|
358
|
+
return this.filteredItems.length;
|
|
359
|
+
}
|
|
63
360
|
ngOnInit() {
|
|
64
361
|
if (this.dataContextId) {
|
|
65
362
|
this.showLoader = true;
|
|
@@ -68,40 +365,173 @@ export class DataContextComponent {
|
|
|
68
365
|
}
|
|
69
366
|
LoadDataContext(dataContextId) {
|
|
70
367
|
return __awaiter(this, void 0, void 0, function* () {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
368
|
+
try {
|
|
369
|
+
if (dataContextId) {
|
|
370
|
+
const p = this.ProviderToUse;
|
|
371
|
+
this.dataContextRecord = yield p.GetEntityObject("Data Contexts", p.CurrentUser);
|
|
372
|
+
yield this.dataContextRecord.Load(dataContextId);
|
|
373
|
+
const rv = new RunView(p);
|
|
374
|
+
const response = yield rv.RunView({
|
|
375
|
+
EntityName: "Data Context Items",
|
|
376
|
+
ExtraFilter: `DataContextID='${dataContextId}'`,
|
|
377
|
+
OrderBy: '__mj_CreatedAt DESC',
|
|
378
|
+
ResultType: 'entity_object'
|
|
379
|
+
});
|
|
380
|
+
if (response.Success) {
|
|
381
|
+
this.dataContextItems = response.Results;
|
|
382
|
+
this.showLoader = false;
|
|
383
|
+
}
|
|
384
|
+
else {
|
|
385
|
+
this.errorMessage = response.ErrorMessage || 'Failed to load data context items';
|
|
386
|
+
LogError(response.ErrorMessage);
|
|
387
|
+
this.showLoader = false;
|
|
388
|
+
}
|
|
88
389
|
}
|
|
89
390
|
}
|
|
391
|
+
catch (error) {
|
|
392
|
+
this.errorMessage = 'An error occurred while loading the data context';
|
|
393
|
+
LogError(error);
|
|
394
|
+
this.showLoader = false;
|
|
395
|
+
}
|
|
90
396
|
});
|
|
91
397
|
}
|
|
398
|
+
getTypeIcon(type) {
|
|
399
|
+
const typeIcons = {
|
|
400
|
+
'sql': 'fa-solid fa-database',
|
|
401
|
+
'view': 'fa-solid fa-table',
|
|
402
|
+
'query': 'fa-solid fa-magnifying-glass',
|
|
403
|
+
'entity': 'fa-solid fa-cube',
|
|
404
|
+
'record': 'fa-solid fa-file'
|
|
405
|
+
};
|
|
406
|
+
return typeIcons[type === null || type === void 0 ? void 0 : type.toLowerCase()] || 'fa-solid fa-question';
|
|
407
|
+
}
|
|
408
|
+
getTypeColor(type) {
|
|
409
|
+
const typeColors = {
|
|
410
|
+
'sql': '#2196f3',
|
|
411
|
+
'view': '#4caf50',
|
|
412
|
+
'query': '#ff9800',
|
|
413
|
+
'entity': '#9c27b0',
|
|
414
|
+
'record': '#f44336'
|
|
415
|
+
};
|
|
416
|
+
return typeColors[type === null || type === void 0 ? void 0 : type.toLowerCase()] || '#757575';
|
|
417
|
+
}
|
|
418
|
+
getEntityName(entityId) {
|
|
419
|
+
var _a;
|
|
420
|
+
if (!entityId)
|
|
421
|
+
return undefined;
|
|
422
|
+
const md = new Metadata();
|
|
423
|
+
return (_a = md.Entities.find(e => e.ID === entityId)) === null || _a === void 0 ? void 0 : _a.Name;
|
|
424
|
+
}
|
|
425
|
+
getViewName(viewId) {
|
|
426
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
427
|
+
try {
|
|
428
|
+
const p = this.ProviderToUse;
|
|
429
|
+
const view = yield p.GetEntityObject("Views", p.CurrentUser);
|
|
430
|
+
yield view.Load(viewId);
|
|
431
|
+
return view.Get('Name');
|
|
432
|
+
}
|
|
433
|
+
catch (_a) {
|
|
434
|
+
return undefined;
|
|
435
|
+
}
|
|
436
|
+
});
|
|
437
|
+
}
|
|
438
|
+
getQueryName(queryId) {
|
|
439
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
440
|
+
try {
|
|
441
|
+
const p = this.ProviderToUse;
|
|
442
|
+
const query = yield p.GetEntityObject("Queries", p.CurrentUser);
|
|
443
|
+
yield query.Load(queryId);
|
|
444
|
+
return query.Get('Name');
|
|
445
|
+
}
|
|
446
|
+
catch (_a) {
|
|
447
|
+
return undefined;
|
|
448
|
+
}
|
|
449
|
+
});
|
|
450
|
+
}
|
|
451
|
+
onSearchChange() {
|
|
452
|
+
// Reset expanded items when searching
|
|
453
|
+
this.expandedItems = {};
|
|
454
|
+
}
|
|
455
|
+
toggleItemExpansion(itemId) {
|
|
456
|
+
this.expandedItems[itemId] = !this.expandedItems[itemId];
|
|
457
|
+
}
|
|
458
|
+
copyToClipboard(text, fieldName) {
|
|
459
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
460
|
+
try {
|
|
461
|
+
yield navigator.clipboard.writeText(text);
|
|
462
|
+
this.copiedField = fieldName;
|
|
463
|
+
setTimeout(() => {
|
|
464
|
+
this.copiedField = '';
|
|
465
|
+
}, 2000);
|
|
466
|
+
}
|
|
467
|
+
catch (err) {
|
|
468
|
+
LogError(`Failed to copy to clipboard: ${err}`);
|
|
469
|
+
}
|
|
470
|
+
});
|
|
471
|
+
}
|
|
472
|
+
previewSQLCode(sql) {
|
|
473
|
+
this.previewSQL = sql;
|
|
474
|
+
this.showSQLPreview = true;
|
|
475
|
+
}
|
|
476
|
+
closeSQLPreview() {
|
|
477
|
+
this.showSQLPreview = false;
|
|
478
|
+
this.previewSQL = '';
|
|
479
|
+
}
|
|
480
|
+
navigateToEntity(entityId) {
|
|
481
|
+
// This would be implemented based on your navigation system
|
|
482
|
+
console.log('Navigate to entity:', entityId);
|
|
483
|
+
}
|
|
484
|
+
navigateToView(viewId) {
|
|
485
|
+
// This would be implemented based on your navigation system
|
|
486
|
+
console.log('Navigate to view:', viewId);
|
|
487
|
+
}
|
|
488
|
+
navigateToQuery(queryId) {
|
|
489
|
+
// This would be implemented based on your navigation system
|
|
490
|
+
console.log('Navigate to query:', queryId);
|
|
491
|
+
}
|
|
492
|
+
refresh() {
|
|
493
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
494
|
+
this.showLoader = true;
|
|
495
|
+
yield this.LoadDataContext(this.dataContextId);
|
|
496
|
+
});
|
|
497
|
+
}
|
|
498
|
+
exportToCSV() {
|
|
499
|
+
var _a;
|
|
500
|
+
// Implement CSV export functionality
|
|
501
|
+
const headers = ['Type', 'SQL', 'View', 'Query', 'Entity', 'Record ID', 'Description'];
|
|
502
|
+
const rows = this.filteredItems.map(item => [
|
|
503
|
+
item.Type,
|
|
504
|
+
item.SQL,
|
|
505
|
+
item.ViewID,
|
|
506
|
+
item.QueryID,
|
|
507
|
+
this.getEntityName(item.EntityID) || item.EntityID,
|
|
508
|
+
item.RecordID,
|
|
509
|
+
item.Description || ''
|
|
510
|
+
]);
|
|
511
|
+
const csv = [headers, ...rows].map(row => row.map(cell => `"${cell}"`).join(',')).join('\n');
|
|
512
|
+
const blob = new Blob([csv], { type: 'text/csv' });
|
|
513
|
+
const url = window.URL.createObjectURL(blob);
|
|
514
|
+
const a = document.createElement('a');
|
|
515
|
+
a.href = url;
|
|
516
|
+
a.download = `data-context-${((_a = this.dataContextRecord) === null || _a === void 0 ? void 0 : _a.Name) || this.dataContextId}.csv`;
|
|
517
|
+
a.click();
|
|
518
|
+
window.URL.revokeObjectURL(url);
|
|
519
|
+
}
|
|
92
520
|
}
|
|
93
521
|
DataContextComponent.ɵfac = function DataContextComponent_Factory(t) { return new (t || DataContextComponent)(); };
|
|
94
|
-
DataContextComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DataContextComponent, selectors: [["mj-data-context"]], inputs: { dataContextId: "dataContextId", Provider: "Provider" }, decls:
|
|
95
|
-
i0.ɵɵelementStart(0, "div");
|
|
96
|
-
i0.ɵɵtemplate(1, DataContextComponent_Conditional_1_Template,
|
|
522
|
+
DataContextComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DataContextComponent, selectors: [["mj-data-context"]], inputs: { dataContextId: "dataContextId", Provider: "Provider" }, decls: 4, vars: 2, consts: [[1, "data-context-viewer"], [1, "loading-container"], [1, "sql-preview-overlay"], ["type", "converging-spinner", "size", "large"], [1, "loading-text"], [1, "data-context-header"], [1, "header-info"], [1, "header-title"], [1, "fa-solid", "fa-layer-group", "header-icon"], [1, "header-description"], [1, "header-meta"], [1, "meta-item"], [1, "fa-solid", "fa-fingerprint"], ["title", "Copy ID", 1, "copy-btn", 3, "click"], [1, "fa-solid"], [1, "fa-solid", "fa-list-ol"], [1, "header-actions"], ["kendoButton", "", "look", "flat", "title", "Refresh", 3, "click"], [1, "fa-solid", "fa-rotate"], ["kendoButton", "", "look", "flat", "title", "Export to CSV", 3, "click"], [1, "fa-solid", "fa-download"], [1, "error-message"], [1, "search-container"], ["placeholder", "Search items by type, SQL, entity name, or description...", 1, "search-input", 3, "ngModelChange", "ngModel", "clearButton"], ["kendoTextBoxPrefixTemplate", ""], [1, "items-container"], [1, "data-context-card", 3, "expanded"], [1, "no-items"], [1, "fa-solid", "fa-circle-exclamation"], [1, "fa-solid", "fa-magnifying-glass", "search-icon"], [1, "data-context-card"], [1, "card-header", 3, "click"], [1, "card-header-left"], [1, "type-badge"], [1, "card-description"], [1, "expand-btn"], [1, "card-content"], [1, "sql-section"], [1, "metadata-section"], [1, "metadata-grid"], [1, "metadata-item"], [1, "card-footer"], [1, "timestamp"], [1, "fa-solid", "fa-clock"], [1, "section-header"], [1, "fa-solid", "fa-code"], [1, "sql-actions"], ["title", "Copy SQL", 1, "action-btn", 3, "click"], ["title", "Expand", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-expand"], [1, "sql-code"], [1, "metadata-label"], [1, "metadata-value"], ["title", "View entity", 1, "link-btn", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [3, "title"], ["title", "View details", 1, "link-btn", 3, "click"], ["title", "View query", 1, "link-btn", 3, "click"], ["title", "Copy", 1, "link-btn", 3, "click"], [1, "fa-solid", "fa-pen"], [1, "fa-solid", "fa-inbox"], [1, "sql-preview-overlay", 3, "click"], [1, "sql-preview-dialog", 3, "click"], [1, "sql-preview-header"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "sql-preview-content"], [1, "sql-preview-actions"], ["kendoButton", "", 3, "click"]], template: function DataContextComponent_Template(rf, ctx) { if (rf & 1) {
|
|
523
|
+
i0.ɵɵelementStart(0, "div", 0);
|
|
524
|
+
i0.ɵɵtemplate(1, DataContextComponent_Conditional_1_Template, 4, 0, "div", 1)(2, DataContextComponent_Conditional_2_Template, 31, 13)(3, DataContextComponent_Conditional_3_Template, 15, 6, "div", 2);
|
|
97
525
|
i0.ɵɵelementEnd();
|
|
98
526
|
} if (rf & 2) {
|
|
99
527
|
i0.ɵɵadvance();
|
|
100
|
-
i0.ɵɵconditional(
|
|
101
|
-
|
|
528
|
+
i0.ɵɵconditional(ctx.showLoader ? 1 : 2);
|
|
529
|
+
i0.ɵɵadvance(2);
|
|
530
|
+
i0.ɵɵconditional(ctx.showSQLPreview ? 3 : -1);
|
|
531
|
+
} }, dependencies: [i1.NgControlStatus, i1.NgModel, i2.ButtonComponent, i3.LoaderComponent, i4.TextBoxComponent, i4.TextBoxPrefixTemplateDirective, i5.SlicePipe, i5.DatePipe], styles: [".data-context-viewer[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n background-color: #f8f9fa;\n border-radius: 8px;\n overflow: hidden;\n min-height: 0;\n}\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n min-height: 400px;\n}\n\n.loading-text[_ngcontent-%COMP%] {\n margin-top: 16px;\n color: #656565;\n font-size: 14px;\n}\n\n\n\n.data-context-header[_ngcontent-%COMP%] {\n background-color: #ffffff;\n padding: 24px;\n border-bottom: 1px solid #e2e8f0;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 24px;\n flex-shrink: 0;\n}\n\n.header-info[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.header-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.header-icon[_ngcontent-%COMP%] {\n font-size: 24px;\n color: #2196f3;\n}\n\n.header-title[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 24px;\n font-weight: 500;\n color: #333333;\n}\n\n.header-description[_ngcontent-%COMP%] {\n margin: 8px 0 16px 0;\n color: #656565;\n font-size: 14px;\n line-height: 1.5;\n}\n\n.header-meta[_ngcontent-%COMP%] {\n display: flex;\n gap: 24px;\n flex-wrap: wrap;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n color: #656565;\n}\n\n.meta-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #9e9e9e;\n}\n\n.copy-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n padding: 4px;\n cursor: pointer;\n color: #656565;\n transition: color 0.2s;\n margin-left: 4px;\n}\n\n.copy-btn[_ngcontent-%COMP%]:hover {\n color: #2196f3;\n}\n\n.copy-btn[_ngcontent-%COMP%] .fa-check[_ngcontent-%COMP%] {\n color: #4caf50;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n\n\n.error-message[_ngcontent-%COMP%] {\n background-color: #fee;\n color: #c62828;\n padding: 12px 16px;\n margin: 16px 24px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n}\n\n.error-message[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n}\n\n\n\n.search-container[_ngcontent-%COMP%] {\n padding: 16px 24px;\n background-color: #ffffff;\n border-bottom: 1px solid #e2e8f0;\n flex-shrink: 0;\n}\n\n.search-input[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n.search-icon[_ngcontent-%COMP%] {\n color: #9e9e9e;\n margin-right: 8px;\n}\n\n\n\n.items-container[_ngcontent-%COMP%] {\n height: 100%;\n padding: 24px;\n overflow-y: auto;\n overflow-x: hidden;\n min-height: 0;\n}\n\n\n\n.data-context-card[_ngcontent-%COMP%] {\n background-color: #ffffff;\n border-radius: 8px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n margin-bottom: 16px;\n transition: all 0.3s ease;\n overflow: hidden;\n}\n\n.data-context-card[_ngcontent-%COMP%]:hover {\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n.data-context-card.expanded[_ngcontent-%COMP%] {\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n}\n\n\n\n.card-header[_ngcontent-%COMP%] {\n padding: 20px 24px;\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n transition: background-color 0.2s;\n gap: 16px;\n}\n\n.card-header[_ngcontent-%COMP%]:hover {\n background-color: #f8f9fa;\n}\n\n.card-header-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n flex: 1;\n}\n\n.type-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 6px 12px;\n border-radius: 20px;\n font-size: 14px;\n font-weight: 500;\n text-transform: uppercase;\n flex-shrink: 0;\n}\n\n.type-badge[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.card-description[_ngcontent-%COMP%] {\n color: #656565;\n font-size: 14px;\n flex: 1;\n line-height: 1.4;\n word-wrap: break-word;\n overflow-wrap: break-word;\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n padding: 8px;\n cursor: pointer;\n color: #656565;\n transition: all 0.2s;\n font-size: 16px;\n flex-shrink: 0;\n margin-top: -4px; \n\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n color: #2196f3;\n}\n\n\n\n.card-content[_ngcontent-%COMP%] {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease;\n}\n\n.data-context-card.expanded[_ngcontent-%COMP%] .card-content[_ngcontent-%COMP%] {\n max-height: 2000px;\n}\n\n\n\n.sql-section[_ngcontent-%COMP%] {\n padding: 0 24px 20px;\n}\n\n.section-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n}\n\n.section-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 500;\n color: #333333;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.section-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #656565;\n}\n\n.sql-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n background-color: #f5f5f5;\n border: 1px solid #e0e0e0;\n padding: 6px 12px;\n border-radius: 4px;\n cursor: pointer;\n font-size: 13px;\n color: #333333;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n background-color: #e3f2fd;\n border-color: #2196f3;\n color: #2196f3;\n}\n\n.action-btn[_ngcontent-%COMP%] .fa-check[_ngcontent-%COMP%] {\n color: #4caf50;\n}\n\n.sql-code[_ngcontent-%COMP%] {\n background-color: #f5f5f5;\n padding: 16px;\n border-radius: 6px;\n margin: 0;\n overflow-x: auto;\n border: 1px solid #e0e0e0;\n}\n\n.sql-code[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 14px;\n line-height: 1.6;\n color: #333333;\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n\n\n.metadata-section[_ngcontent-%COMP%] {\n padding: 0 24px 20px;\n}\n\n.metadata-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 16px;\n}\n\n.metadata-item[_ngcontent-%COMP%] {\n background-color: #f8f9fa;\n padding: 12px;\n border-radius: 6px;\n border: 1px solid #e2e8f0;\n}\n\n.metadata-label[_ngcontent-%COMP%] {\n display: block;\n font-size: 12px;\n font-weight: 500;\n color: #656565;\n text-transform: uppercase;\n margin-bottom: 6px;\n}\n\n.metadata-value[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n font-size: 14px;\n color: #333333;\n}\n\n.metadata-value[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 13px;\n background-color: #ffffff;\n padding: 2px 6px;\n border-radius: 3px;\n border: 1px solid #e0e0e0;\n}\n\n.link-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n padding: 4px 6px;\n cursor: pointer;\n color: #656565;\n transition: all 0.2s;\n border-radius: 3px;\n font-size: 13px;\n}\n\n.link-btn[_ngcontent-%COMP%]:hover {\n color: #2196f3;\n background-color: #e3f2fd;\n}\n\n.link-btn[_ngcontent-%COMP%] .fa-check[_ngcontent-%COMP%] {\n color: #4caf50;\n}\n\n\n\n.card-footer[_ngcontent-%COMP%] {\n padding: 16px 24px;\n background-color: #f8f9fa;\n border-top: 1px solid #e2e8f0;\n display: flex;\n gap: 20px;\n font-size: 12px;\n color: #656565;\n}\n\n.timestamp[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.timestamp[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n}\n\n\n\n.no-items[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 80px 20px;\n color: #9e9e9e;\n}\n\n.no-items[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 16px;\n}\n\n.no-items[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 16px;\n margin: 0;\n}\n\n\n\n.sql-preview-overlay[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n.sql-preview-dialog[_ngcontent-%COMP%] {\n background-color: #ffffff;\n border-radius: 8px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n width: 90%;\n max-width: 1000px;\n max-height: 80vh;\n display: flex;\n flex-direction: column;\n}\n\n.sql-preview-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 24px;\n border-bottom: 1px solid #e2e8f0;\n}\n\n.sql-preview-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 18px;\n font-weight: 500;\n color: #333333;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n padding: 8px;\n cursor: pointer;\n color: #656565;\n transition: color 0.2s;\n font-size: 18px;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n color: #333333;\n}\n\n.sql-preview-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow: auto;\n padding: 24px;\n background-color: #f5f5f5;\n}\n\n.sql-preview-content[_ngcontent-%COMP%] pre[_ngcontent-%COMP%] {\n margin: 0;\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n.sql-preview-content[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 16px;\n color: #333333;\n line-height: 1.6;\n}\n\n.sql-preview-actions[_ngcontent-%COMP%] {\n padding: 16px 24px;\n border-top: 1px solid #e2e8f0;\n display: flex;\n justify-content: flex-end;\n}\n\n\n\n@media (max-width: 768px) {\n .data-context-header[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 16px;\n }\n \n .header-actions[_ngcontent-%COMP%] {\n width: 100%;\n justify-content: flex-start;\n }\n \n .items-container[_ngcontent-%COMP%] {\n padding: 16px;\n }\n \n .card-header[_ngcontent-%COMP%] {\n padding: 16px;\n }\n \n .sql-section[_ngcontent-%COMP%], \n .metadata-section[_ngcontent-%COMP%] {\n padding: 0 16px 16px;\n }\n \n .metadata-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n \n .sql-preview-dialog[_ngcontent-%COMP%] {\n width: 95%;\n margin: 16px;\n }\n}"] });
|
|
102
532
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DataContextComponent, [{
|
|
103
533
|
type: Component,
|
|
104
|
-
args: [{ selector: 'mj-data-context', template: "<div>\n @if (!showLoader) {\n <div class=\"k-d-flex k-flex-col k-justify-content-between k-h-full\">\n <div *ngIf=\"dataContextRecord\">\n <div>\n ID: {{dataContextRecord.ID}}\n </div>\n <div>\n Name: {{dataContextRecord.Name}}\n </div>\n <div>\n Description: {{dataContextRecord.Description}}\n </div>\n </div>\n <div style=\"margin-top: 10px;\">\n <b>Items</b>\n </div>\n <div class=\"kendo-grid-container\">\n <kendo-grid \n [kendoGridBinding]=\"dataContextItems\" \n scrollable=\"virtual\" \n [pageSize]=\"100\" \n [sortable]=\"true\"\n [loading]=\"showLoader\" \n [resizable]=\"true\" \n [navigable]=\"true\"\n >\n </kendo-grid>\n </div>\n </div> \n }\n @else {\n <kendo-loader type=\"converging-spinner\" ></kendo-loader>\n }\n</div>" }]
|
|
534
|
+
args: [{ selector: 'mj-data-context', template: "<div class=\"data-context-viewer\">\n @if (showLoader) {\n <div class=\"loading-container\">\n <kendo-loader type=\"converging-spinner\" size=\"large\"></kendo-loader>\n <p class=\"loading-text\">Loading data context...</p>\n </div>\n } @else {\n <!-- Header Section -->\n <div class=\"data-context-header\">\n <div class=\"header-info\">\n <div class=\"header-title\">\n <i class=\"fa-solid fa-layer-group header-icon\"></i>\n <h2>{{ dataContextRecord?.Name || 'Data Context' }}</h2>\n </div>\n @if (dataContextRecord && dataContextRecord.Description) {\n <p class=\"header-description\">{{ dataContextRecord.Description }}</p>\n }\n <div class=\"header-meta\">\n <span class=\"meta-item\">\n <i class=\"fa-solid fa-fingerprint\"></i>\n ID: {{ dataContextRecord?.ID }}\n <button class=\"copy-btn\" (click)=\"copyToClipboard(dataContextRecord?.ID || '', 'context-id')\" title=\"Copy ID\">\n <i class=\"fa-solid\" [class.fa-copy]=\"copiedField !== 'context-id'\" [class.fa-check]=\"copiedField === 'context-id'\"></i>\n </button>\n </span>\n <span class=\"meta-item\">\n <i class=\"fa-solid fa-list-ol\"></i>\n {{ itemCount }} {{ itemCount === 1 ? 'item' : 'items' }}\n </span>\n </div>\n </div>\n <div class=\"header-actions\">\n <button kendoButton look=\"flat\" (click)=\"refresh()\" title=\"Refresh\">\n <i class=\"fa-solid fa-rotate\"></i>\n Refresh\n </button>\n <button kendoButton look=\"flat\" (click)=\"exportToCSV()\" title=\"Export to CSV\">\n <i class=\"fa-solid fa-download\"></i>\n Export\n </button>\n </div>\n </div>\n\n @if (errorMessage) {\n <div class=\"error-message\">\n <i class=\"fa-solid fa-circle-exclamation\"></i>\n {{ errorMessage }}\n </div>\n }\n\n <!-- Search Bar -->\n <div class=\"search-container\">\n <kendo-textbox \n [(ngModel)]=\"searchTerm\" \n (ngModelChange)=\"onSearchChange()\"\n placeholder=\"Search items by type, SQL, entity name, or description...\"\n [clearButton]=\"true\"\n class=\"search-input\">\n <ng-template kendoTextBoxPrefixTemplate>\n <i class=\"fa-solid fa-magnifying-glass search-icon\"></i>\n </ng-template>\n </kendo-textbox>\n </div>\n\n <!-- Data Context Items as Cards -->\n <div class=\"items-container\">\n @for (item of filteredItems; track item.ID; let i = $index) {\n <div class=\"data-context-card\" [class.expanded]=\"expandedItems[item.ID]\">\n <!-- Card Header -->\n <div class=\"card-header\" (click)=\"toggleItemExpansion(item.ID)\">\n <div class=\"card-header-left\">\n <div class=\"type-badge\" [style.background-color]=\"getTypeColor(item.Type) + '20'\" [style.color]=\"getTypeColor(item.Type)\">\n <i [class]=\"getTypeIcon(item.Type)\"></i>\n <span>{{ item.Type }}</span>\n </div>\n @if (item.Description) {\n <span class=\"card-description\">{{ item.Description }}</span>\n }\n </div>\n <button class=\"expand-btn\">\n <i class=\"fa-solid\" [class.fa-chevron-down]=\"!expandedItems[item.ID]\" [class.fa-chevron-up]=\"expandedItems[item.ID]\"></i>\n </button>\n </div>\n\n <!-- Card Content -->\n <div class=\"card-content\">\n <!-- SQL Section -->\n @if (item.SQL) {\n <div class=\"sql-section\">\n <div class=\"section-header\">\n <h4><i class=\"fa-solid fa-code\"></i> SQL Query</h4>\n <div class=\"sql-actions\">\n <button class=\"action-btn\" (click)=\"copyToClipboard(item.SQL, 'sql-' + item.ID)\" title=\"Copy SQL\">\n <i class=\"fa-solid\" [class.fa-copy]=\"copiedField !== 'sql-' + item.ID\" [class.fa-check]=\"copiedField === 'sql-' + item.ID\"></i>\n {{ copiedField === 'sql-' + item.ID ? 'Copied!' : 'Copy' }}\n </button>\n <button class=\"action-btn\" (click)=\"previewSQLCode(item.SQL)\" title=\"Expand\">\n <i class=\"fa-solid fa-expand\"></i>\n Expand\n </button>\n </div>\n </div>\n <pre class=\"sql-code\"><code>{{ item.SQL }}</code></pre>\n </div>\n }\n\n <!-- Metadata Section -->\n <div class=\"metadata-section\">\n <div class=\"metadata-grid\">\n @if (item.EntityID) {\n <div class=\"metadata-item\">\n <span class=\"metadata-label\">Entity</span>\n <div class=\"metadata-value\">\n <span>{{ getEntityName(item.EntityID) || 'Unknown' }}</span>\n <button class=\"link-btn\" (click)=\"navigateToEntity(item.EntityID)\" title=\"View entity\">\n <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n </button>\n </div>\n </div>\n }\n @if (item.ViewID) {\n <div class=\"metadata-item\">\n <span class=\"metadata-label\">View</span>\n <div class=\"metadata-value\">\n <span title=\"{{ item.ViewID }}\">{{ item.ViewID | slice:0:20 }}{{ item.ViewID.length > 20 ? '...' : '' }}</span>\n <button class=\"link-btn\" (click)=\"navigateToView(item.ViewID)\" title=\"View details\">\n <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n </button>\n </div>\n </div>\n }\n @if (item.QueryID) {\n <div class=\"metadata-item\">\n <span class=\"metadata-label\">Query</span>\n <div class=\"metadata-value\">\n <span title=\"{{ item.QueryID }}\">{{ item.QueryID | slice:0:20 }}{{ item.QueryID.length > 20 ? '...' : '' }}</span>\n <button class=\"link-btn\" (click)=\"navigateToQuery(item.QueryID)\" title=\"View query\">\n <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n </button>\n </div>\n </div>\n }\n @if (item.RecordID) {\n <div class=\"metadata-item\">\n <span class=\"metadata-label\">Record ID</span>\n <div class=\"metadata-value\">\n <code>{{ item.RecordID }}</code>\n <button class=\"link-btn\" (click)=\"copyToClipboard(item.RecordID, 'record-' + item.ID)\" title=\"Copy\">\n <i class=\"fa-solid\" [class.fa-copy]=\"copiedField !== 'record-' + item.ID\" [class.fa-check]=\"copiedField === 'record-' + item.ID\"></i>\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- Footer -->\n <div class=\"card-footer\">\n <span class=\"timestamp\">\n <i class=\"fa-solid fa-clock\"></i>\n Created {{ item.__mj_CreatedAt | date:'short' }}\n </span>\n @if (item.__mj_UpdatedAt && item.__mj_UpdatedAt !== item.__mj_CreatedAt) {\n <span class=\"timestamp\">\n <i class=\"fa-solid fa-pen\"></i>\n Updated {{ item.__mj_UpdatedAt | date:'short' }}\n </span>\n }\n </div>\n </div>\n </div>\n }\n\n @if (filteredItems.length === 0) {\n <div class=\"no-items\">\n <i class=\"fa-solid fa-inbox\"></i>\n <p>No items found</p>\n </div>\n }\n </div>\n }\n\n <!-- SQL Preview Dialog -->\n @if (showSQLPreview) {\n <div class=\"sql-preview-overlay\" (click)=\"closeSQLPreview()\">\n <div class=\"sql-preview-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"sql-preview-header\">\n <h3>SQL Preview</h3>\n <button class=\"close-btn\" (click)=\"closeSQLPreview()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"sql-preview-content\">\n <pre><code>{{ previewSQL }}</code></pre>\n </div>\n <div class=\"sql-preview-actions\">\n <button kendoButton (click)=\"copyToClipboard(previewSQL, 'preview-sql')\">\n <i class=\"fa-solid\" [class.fa-copy]=\"copiedField !== 'preview-sql'\" [class.fa-check]=\"copiedField === 'preview-sql'\"></i>\n {{ copiedField === 'preview-sql' ? 'Copied!' : 'Copy SQL' }}\n </button>\n </div>\n </div>\n </div>\n }\n</div>", styles: [".data-context-viewer {\n display: flex;\n flex-direction: column;\n height: 100%;\n background-color: #f8f9fa;\n border-radius: 8px;\n overflow: hidden;\n min-height: 0;\n}\n\n/* Loading State */\n.loading-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n min-height: 400px;\n}\n\n.loading-text {\n margin-top: 16px;\n color: #656565;\n font-size: 14px;\n}\n\n/* Header Section */\n.data-context-header {\n background-color: #ffffff;\n padding: 24px;\n border-bottom: 1px solid #e2e8f0;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 24px;\n flex-shrink: 0;\n}\n\n.header-info {\n flex: 1;\n}\n\n.header-title {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.header-icon {\n font-size: 24px;\n color: #2196f3;\n}\n\n.header-title h2 {\n margin: 0;\n font-size: 24px;\n font-weight: 500;\n color: #333333;\n}\n\n.header-description {\n margin: 8px 0 16px 0;\n color: #656565;\n font-size: 14px;\n line-height: 1.5;\n}\n\n.header-meta {\n display: flex;\n gap: 24px;\n flex-wrap: wrap;\n}\n\n.meta-item {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n color: #656565;\n}\n\n.meta-item i {\n font-size: 12px;\n color: #9e9e9e;\n}\n\n.copy-btn {\n background: none;\n border: none;\n padding: 4px;\n cursor: pointer;\n color: #656565;\n transition: color 0.2s;\n margin-left: 4px;\n}\n\n.copy-btn:hover {\n color: #2196f3;\n}\n\n.copy-btn .fa-check {\n color: #4caf50;\n}\n\n.header-actions {\n display: flex;\n gap: 8px;\n}\n\n/* Error Message */\n.error-message {\n background-color: #fee;\n color: #c62828;\n padding: 12px 16px;\n margin: 16px 24px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n}\n\n.error-message i {\n font-size: 16px;\n}\n\n/* Search Container */\n.search-container {\n padding: 16px 24px;\n background-color: #ffffff;\n border-bottom: 1px solid #e2e8f0;\n flex-shrink: 0;\n}\n\n.search-input {\n width: 100%;\n}\n\n.search-icon {\n color: #9e9e9e;\n margin-right: 8px;\n}\n\n/* Items Container */\n.items-container {\n height: 100%;\n padding: 24px;\n overflow-y: auto;\n overflow-x: hidden;\n min-height: 0;\n}\n\n/* Data Context Card */\n.data-context-card {\n background-color: #ffffff;\n border-radius: 8px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n margin-bottom: 16px;\n transition: all 0.3s ease;\n overflow: hidden;\n}\n\n.data-context-card:hover {\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n.data-context-card.expanded {\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n}\n\n/* Card Header */\n.card-header {\n padding: 20px 24px;\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n transition: background-color 0.2s;\n gap: 16px;\n}\n\n.card-header:hover {\n background-color: #f8f9fa;\n}\n\n.card-header-left {\n display: flex;\n align-items: center;\n gap: 16px;\n flex: 1;\n}\n\n.type-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 6px 12px;\n border-radius: 20px;\n font-size: 14px;\n font-weight: 500;\n text-transform: uppercase;\n flex-shrink: 0;\n}\n\n.type-badge i {\n font-size: 14px;\n}\n\n.card-description {\n color: #656565;\n font-size: 14px;\n flex: 1;\n line-height: 1.4;\n word-wrap: break-word;\n overflow-wrap: break-word;\n}\n\n.expand-btn {\n background: none;\n border: none;\n padding: 8px;\n cursor: pointer;\n color: #656565;\n transition: all 0.2s;\n font-size: 16px;\n flex-shrink: 0;\n margin-top: -4px; /* Align with top of content */\n}\n\n.expand-btn:hover {\n color: #2196f3;\n}\n\n/* Card Content */\n.card-content {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease;\n}\n\n.data-context-card.expanded .card-content {\n max-height: 2000px;\n}\n\n/* SQL Section */\n.sql-section {\n padding: 0 24px 20px;\n}\n\n.section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n}\n\n.section-header h4 {\n margin: 0;\n font-size: 16px;\n font-weight: 500;\n color: #333333;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.section-header h4 i {\n font-size: 14px;\n color: #656565;\n}\n\n.sql-actions {\n display: flex;\n gap: 8px;\n}\n\n.action-btn {\n background-color: #f5f5f5;\n border: 1px solid #e0e0e0;\n padding: 6px 12px;\n border-radius: 4px;\n cursor: pointer;\n font-size: 13px;\n color: #333333;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.action-btn:hover {\n background-color: #e3f2fd;\n border-color: #2196f3;\n color: #2196f3;\n}\n\n.action-btn .fa-check {\n color: #4caf50;\n}\n\n.sql-code {\n background-color: #f5f5f5;\n padding: 16px;\n border-radius: 6px;\n margin: 0;\n overflow-x: auto;\n border: 1px solid #e0e0e0;\n}\n\n.sql-code code {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 14px;\n line-height: 1.6;\n color: #333333;\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n/* Metadata Section */\n.metadata-section {\n padding: 0 24px 20px;\n}\n\n.metadata-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 16px;\n}\n\n.metadata-item {\n background-color: #f8f9fa;\n padding: 12px;\n border-radius: 6px;\n border: 1px solid #e2e8f0;\n}\n\n.metadata-label {\n display: block;\n font-size: 12px;\n font-weight: 500;\n color: #656565;\n text-transform: uppercase;\n margin-bottom: 6px;\n}\n\n.metadata-value {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n font-size: 14px;\n color: #333333;\n}\n\n.metadata-value code {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 13px;\n background-color: #ffffff;\n padding: 2px 6px;\n border-radius: 3px;\n border: 1px solid #e0e0e0;\n}\n\n.link-btn {\n background: none;\n border: none;\n padding: 4px 6px;\n cursor: pointer;\n color: #656565;\n transition: all 0.2s;\n border-radius: 3px;\n font-size: 13px;\n}\n\n.link-btn:hover {\n color: #2196f3;\n background-color: #e3f2fd;\n}\n\n.link-btn .fa-check {\n color: #4caf50;\n}\n\n/* Card Footer */\n.card-footer {\n padding: 16px 24px;\n background-color: #f8f9fa;\n border-top: 1px solid #e2e8f0;\n display: flex;\n gap: 20px;\n font-size: 12px;\n color: #656565;\n}\n\n.timestamp {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.timestamp i {\n font-size: 11px;\n}\n\n/* No Items */\n.no-items {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 80px 20px;\n color: #9e9e9e;\n}\n\n.no-items i {\n font-size: 48px;\n margin-bottom: 16px;\n}\n\n.no-items p {\n font-size: 16px;\n margin: 0;\n}\n\n/* SQL Preview Modal */\n.sql-preview-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n.sql-preview-dialog {\n background-color: #ffffff;\n border-radius: 8px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n width: 90%;\n max-width: 1000px;\n max-height: 80vh;\n display: flex;\n flex-direction: column;\n}\n\n.sql-preview-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 24px;\n border-bottom: 1px solid #e2e8f0;\n}\n\n.sql-preview-header h3 {\n margin: 0;\n font-size: 18px;\n font-weight: 500;\n color: #333333;\n}\n\n.close-btn {\n background: none;\n border: none;\n padding: 8px;\n cursor: pointer;\n color: #656565;\n transition: color 0.2s;\n font-size: 18px;\n}\n\n.close-btn:hover {\n color: #333333;\n}\n\n.sql-preview-content {\n flex: 1;\n overflow: auto;\n padding: 24px;\n background-color: #f5f5f5;\n}\n\n.sql-preview-content pre {\n margin: 0;\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n.sql-preview-content code {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 16px;\n color: #333333;\n line-height: 1.6;\n}\n\n.sql-preview-actions {\n padding: 16px 24px;\n border-top: 1px solid #e2e8f0;\n display: flex;\n justify-content: flex-end;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n .data-context-header {\n flex-direction: column;\n gap: 16px;\n }\n \n .header-actions {\n width: 100%;\n justify-content: flex-start;\n }\n \n .items-container {\n padding: 16px;\n }\n \n .card-header {\n padding: 16px;\n }\n \n .sql-section,\n .metadata-section {\n padding: 0 16px 16px;\n }\n \n .metadata-grid {\n grid-template-columns: 1fr;\n }\n \n .sql-preview-dialog {\n width: 95%;\n margin: 16px;\n }\n}"] }]
|
|
105
535
|
}], null, { dataContextId: [{
|
|
106
536
|
type: Input
|
|
107
537
|
}], Provider: [{
|