verben-workflow-ui 0.5.44 → 0.5.45
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/esm2022/src/lib/components/form-response/form-response.component.mjs +52 -47
- package/esm2022/src/lib/components/form-response/form-response.service.mjs +2 -2
- package/esm2022/src/lib/components/forms/forms.component.mjs +3 -3
- package/fesm2022/verben-workflow-ui-src-lib-components-form-response.mjs +52 -47
- package/fesm2022/verben-workflow-ui-src-lib-components-form-response.mjs.map +1 -1
- package/fesm2022/verben-workflow-ui-src-lib-components-forms.mjs +2 -2
- package/fesm2022/verben-workflow-ui-src-lib-components-forms.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/components/form-response/form-response.component.d.ts +25 -24
- package/src/lib/components/form-response/form-response.service.d.ts +1 -1
- package/styles/styles.css +0 -8
|
@@ -17,7 +17,7 @@ import { FormTimerModule } from 'verben-workflow-ui/src/lib/components/form-time
|
|
|
17
17
|
|
|
18
18
|
class FormResponseService {
|
|
19
19
|
constructor() { }
|
|
20
|
-
get
|
|
20
|
+
get formColumns() {
|
|
21
21
|
return [
|
|
22
22
|
{
|
|
23
23
|
id: 'select',
|
|
@@ -90,7 +90,7 @@ class FormResponseComponent {
|
|
|
90
90
|
fb;
|
|
91
91
|
envSvc;
|
|
92
92
|
router;
|
|
93
|
-
|
|
93
|
+
formResponseSvc;
|
|
94
94
|
_location;
|
|
95
95
|
route;
|
|
96
96
|
visibleColumnDef = [];
|
|
@@ -106,6 +106,7 @@ class FormResponseComponent {
|
|
|
106
106
|
tableView;
|
|
107
107
|
application = null;
|
|
108
108
|
pageSize = 10;
|
|
109
|
+
taskCodeKey = 'taskCode';
|
|
109
110
|
skip = 0;
|
|
110
111
|
hasMore = true;
|
|
111
112
|
onViewProcessClicked = new EventEmitter();
|
|
@@ -194,18 +195,18 @@ class FormResponseComponent {
|
|
|
194
195
|
},
|
|
195
196
|
];
|
|
196
197
|
currentSearchTerm = '';
|
|
197
|
-
constructor(utilService, server, cdr, fb, envSvc, router,
|
|
198
|
+
constructor(utilService, server, cdr, fb, envSvc, router, formResponseSvc, _location, route) {
|
|
198
199
|
this.utilService = utilService;
|
|
199
200
|
this.server = server;
|
|
200
201
|
this.cdr = cdr;
|
|
201
202
|
this.fb = fb;
|
|
202
203
|
this.envSvc = envSvc;
|
|
203
204
|
this.router = router;
|
|
204
|
-
this.
|
|
205
|
+
this.formResponseSvc = formResponseSvc;
|
|
205
206
|
this._location = _location;
|
|
206
207
|
this.route = route;
|
|
207
|
-
this.visibleColumnDef =
|
|
208
|
-
this.visibleColumns =
|
|
208
|
+
this.visibleColumnDef = formResponseSvc.formColumns;
|
|
209
|
+
this.visibleColumns = formResponseSvc.formColumns.map((col) => ({
|
|
209
210
|
checked: true,
|
|
210
211
|
name: typeof col.header === 'string' ? col.header : col.id,
|
|
211
212
|
type: DataFilterType.Bool,
|
|
@@ -216,10 +217,10 @@ class FormResponseComponent {
|
|
|
216
217
|
}
|
|
217
218
|
async ngOnInit() {
|
|
218
219
|
this.active = 0;
|
|
219
|
-
this.route.
|
|
220
|
-
const
|
|
221
|
-
this.taskCode =
|
|
222
|
-
if (this.taskCode) {
|
|
220
|
+
this.route.paramMap.subscribe((params) => {
|
|
221
|
+
const code = params.get(this.taskCodeKey);
|
|
222
|
+
this.taskCode = code || '';
|
|
223
|
+
if (this.taskCode && this.taskCode.trim().length > 0) {
|
|
223
224
|
this.getForms(this.taskCode);
|
|
224
225
|
}
|
|
225
226
|
});
|
|
@@ -253,8 +254,8 @@ class FormResponseComponent {
|
|
|
253
254
|
if (res instanceof ErrorResponse) {
|
|
254
255
|
return undefined;
|
|
255
256
|
}
|
|
256
|
-
this.pageState = res;
|
|
257
|
-
const result =
|
|
257
|
+
// this.pageState = res as Form[];
|
|
258
|
+
const result = res;
|
|
258
259
|
if (this.data && Array.isArray(this.data)) {
|
|
259
260
|
this.data = [...this.data, ...result];
|
|
260
261
|
}
|
|
@@ -263,7 +264,7 @@ class FormResponseComponent {
|
|
|
263
264
|
}
|
|
264
265
|
this.data.forEach((x) => (x.id = x.Id));
|
|
265
266
|
this.skip += this.pageSize;
|
|
266
|
-
this.hasMore = this.skip <
|
|
267
|
+
this.hasMore = this.skip < result.length;
|
|
267
268
|
this.setUpCardData();
|
|
268
269
|
return result;
|
|
269
270
|
}
|
|
@@ -302,7 +303,7 @@ class FormResponseComponent {
|
|
|
302
303
|
goToCardView(data) {
|
|
303
304
|
const item = this.cardData.find((x) => x.data == data);
|
|
304
305
|
if (item) {
|
|
305
|
-
this.
|
|
306
|
+
this.cardClicked(item, true);
|
|
306
307
|
this.onClose();
|
|
307
308
|
}
|
|
308
309
|
}
|
|
@@ -332,7 +333,7 @@ class FormResponseComponent {
|
|
|
332
333
|
}
|
|
333
334
|
this.onViewProcessClicked.emit(code);
|
|
334
335
|
}
|
|
335
|
-
|
|
336
|
+
cardClicked(item, toggleView = false) {
|
|
336
337
|
this.cardData.forEach((card) => (card.selected = false));
|
|
337
338
|
item.selected = true;
|
|
338
339
|
this.setActive(0);
|
|
@@ -341,51 +342,53 @@ class FormResponseComponent {
|
|
|
341
342
|
this.dataView.toggleView();
|
|
342
343
|
}
|
|
343
344
|
}
|
|
344
|
-
async
|
|
345
|
+
async saveItem() {
|
|
345
346
|
if (this.currentData) {
|
|
346
|
-
var
|
|
347
|
+
var form = this.currentData.data;
|
|
347
348
|
if (this.currentData.data.Name.trim().length == 0) {
|
|
348
349
|
this.utilService.showInfo('Name cannot be empty');
|
|
349
350
|
return;
|
|
350
351
|
}
|
|
351
|
-
|
|
352
|
-
|
|
352
|
+
form.DataState =
|
|
353
|
+
form.DataState == ObjectState.New
|
|
353
354
|
? ObjectState.New
|
|
354
355
|
: ObjectState.Changed;
|
|
355
|
-
|
|
356
|
+
form.Id = form.DataState == ObjectState.New ? '' : form.Id;
|
|
356
357
|
this.utilService.sendBI(true);
|
|
357
|
-
const res = await this.server.post(`Form/FillForm/${this.taskCode}`,
|
|
358
|
+
const res = await this.server.post(`Form/FillForm/${this.taskCode}`, form, this.envSvc.environment.WorkFlowAPI);
|
|
358
359
|
this.utilService.sendBI(false);
|
|
359
360
|
if (res instanceof ErrorResponse) {
|
|
360
361
|
}
|
|
361
362
|
else {
|
|
362
363
|
this.utilService.showSuccess('Form entity saved successfully');
|
|
363
|
-
const result = res;
|
|
364
|
-
if (result.length > 0) {
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
364
|
+
// const result = res as Form[];
|
|
365
|
+
// if (result.length > 0) {
|
|
366
|
+
// var userResult = result[0];
|
|
367
|
+
// const itemIndex = this.data.findIndex(
|
|
368
|
+
// (x) => x == this.currentData?.data
|
|
369
|
+
// );
|
|
370
|
+
// if (itemIndex > -1) {
|
|
371
|
+
// this.data[itemIndex].Name = userResult.Name;
|
|
372
|
+
// this.data[itemIndex].Id = userResult.Id;
|
|
373
|
+
// this.data[itemIndex].id = userResult.id;
|
|
374
|
+
// this.data[itemIndex].DataState = userResult.DataState;
|
|
375
|
+
// this.data[itemIndex].Name = userResult.Name;
|
|
376
|
+
// this.data[itemIndex].Duration = userResult.Duration;
|
|
377
|
+
// this.data[itemIndex].Entities = userResult.Entities;
|
|
378
|
+
// this.data[itemIndex].ExpiryDate = userResult.ExpiryDate;
|
|
379
|
+
// this.data[itemIndex].IsValid = userResult.IsValid;
|
|
380
|
+
// this.data = this.data.map((x) => x);
|
|
381
|
+
// }
|
|
382
|
+
// }
|
|
380
383
|
}
|
|
381
384
|
}
|
|
382
385
|
}
|
|
383
|
-
async
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
386
|
+
async tableSaveItem(form, callBack) {
|
|
387
|
+
form.DataState =
|
|
388
|
+
form.DataState == ObjectState.New ? ObjectState.New : ObjectState.Changed;
|
|
389
|
+
form.Id = form.DataState == ObjectState.New ? '' : form.Id;
|
|
387
390
|
this.utilService.sendBI(true);
|
|
388
|
-
const res = await this.server.post(`Form/SaveFormEntities`, [
|
|
391
|
+
const res = await this.server.post(`Form/SaveFormEntities`, [form], this.envSvc.environment.WorkFlowAPI);
|
|
389
392
|
this.utilService.sendBI(false);
|
|
390
393
|
if (res instanceof ErrorResponse) {
|
|
391
394
|
}
|
|
@@ -394,7 +397,7 @@ class FormResponseComponent {
|
|
|
394
397
|
const result = res;
|
|
395
398
|
if (result.length > 0) {
|
|
396
399
|
var userResult = result[0];
|
|
397
|
-
const itemIndex = this.data.findIndex((x) => x ==
|
|
400
|
+
const itemIndex = this.data.findIndex((x) => x == form);
|
|
398
401
|
if (itemIndex > -1) {
|
|
399
402
|
this.data[itemIndex].Name = userResult.Name;
|
|
400
403
|
this.data[itemIndex].Id = userResult.Id;
|
|
@@ -476,7 +479,7 @@ class FormResponseComponent {
|
|
|
476
479
|
onColumnsUpdated(updatedColumns) {
|
|
477
480
|
const updatedColumnDef = [];
|
|
478
481
|
updatedColumns.forEach((col) => {
|
|
479
|
-
const matchingCol = this.
|
|
482
|
+
const matchingCol = this.formResponseSvc.formColumns.find((column) => column.header === col.name || column.id === col.name);
|
|
480
483
|
if (matchingCol) {
|
|
481
484
|
updatedColumnDef.push(matchingCol);
|
|
482
485
|
}
|
|
@@ -657,11 +660,11 @@ class FormResponseComponent {
|
|
|
657
660
|
}
|
|
658
661
|
}
|
|
659
662
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormResponseComponent, deps: [{ token: i1.UtilService }, { token: i1.HttpWebRequestService }, { token: i0.ChangeDetectorRef }, { token: i2.FormBuilder }, { token: i1.EnvironmentService }, { token: i3.Router }, { token: FormResponseService }, { token: i5.Location }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
|
|
660
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormResponseComponent, selector: "lib-form-response", inputs: { path: "path", application: "application", pageSize: "pageSize" }, outputs: { onViewProcessClicked: "onViewProcessClicked" }, viewQueries: [{ propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }, { propertyName: "tableView", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n <header\n class=\"rounded-lg shadow-lg flex justify-between items-center px-6 py-2 bg-[#D4A00773]\"\n >\n <h4 class=\"font-semibold\">{{ \"Contact Info\" }}</h4>\n <verben-svg\n (click)=\"goBack()\"\n class=\"cursor-pointer\"\n [width]=\"17\"\n [height]=\"17\"\n [icon]=\"'close'\"\n ></verben-svg>\n </header>\n <verben-data-view\n #vdv\n [viewState]=\"{\n isSearch: true,\n isColumn: true,\n isFilter: true,\n isSort: true,\n isExport: true,\n isSelect: true,\n isCreate: false,\n isToggle:true,\n \n }\"\n [buttonClass]=\"'my-custom-button-class'\"\n [iconClass]=\"'my-icon-class'\"\n [searchValue]=\"searchTerm\"\n (onSearchChange)=\"onSearch($event)\"\n [showFilterChild]=\"showFilter\"\n [activeIconClass]=\"'my-active-icon-class'\"\n [selectedColumnCount]=\"0\"\n [selectedSortCount]=\"0\"\n [selectedFilterTableCount]=\"0\"\n (viewChange)=\"onViewChange($event)\"\n (stateChange)=\"onStateChange($event)\"\n >\n <div class=\"mt-2\" table-content>\n <lib-data-table\n #dt\n [data]=\"data\"\n [columns]=\"visibleColumnDef\"\n [styleConfig]=\"styles\"\n (selectionChange)=\"onSelectionChange($event)\"\n >\n <ng-container libColumn=\"select\">\n <ng-template\n #cell\n let-isSelected=\"isSelected\"\n let-toggleRowSelection=\"toggleRowSelection\"\n >\n <input\n type=\"checkbox\"\n [checked]=\"isSelected\"\n (change)=\"toggleRowSelection()\"\n />\n </ng-template>\n <ng-template\n #header\n let-allRowsSelected=\"allRowsSelected\"\n let-someRowsSelected=\"someRowsSelected\"\n let-toggleAllRows=\"toggleAllRows\"\n >\n <input\n type=\"checkbox\"\n [checked]=\"allRowsSelected()\"\n [indeterminate]=\"someRowsSelected()\"\n (change)=\"toggleAllRows()\"\n />\n </ng-template>\n </ng-container>\n <ng-container libColumn=\"createdAt\">\n <ng-template #cell let-row=\"row\" let-value>\n {{ value | date }}\n </ng-template>\n <ng-template\n #cellEdit\n let-row=\"row\"\n let-updateValue=\"updateValue\"\n let-value\n >\n <verbena-input\n inputContainerClass=\"w-fit\"\n [(ngModel)]=\"row.Workflow\"\n ></verbena-input>\n </ng-template>\n </ng-container>\n <ng-container libColumn=\"expiryDate\">\n <ng-template #cell let-row=\"row\" let-value>\n {{ value | date }}\n </ng-template>\n <ng-template\n #cellEdit\n let-row=\"row\"\n let-updateValue=\"updateValue\"\n let-value\n >\n <verbena-input\n inputContainerClass=\"w-fit\"\n [(ngModel)]=\"row.Workflow\"\n ></verbena-input>\n </ng-template>\n </ng-container>\n <ng-container libColumn=\"name\">\n <ng-template #cell let-row=\"row\" let-value>\n {{ value }}\n </ng-template>\n <ng-template\n #cellEdit\n let-row=\"row\"\n let-updateValue=\"updateValue\"\n let-value\n >\n <verbena-input\n inputContainerClass=\"w-fit\"\n [(ngModel)]=\"row.Workflow\"\n ></verbena-input>\n </ng-template>\n </ng-container>\n <!-- <ng-container libColumn=\"status\">\n <ng-template #cell let-row=\"row\" let-value>\n <span *ngIf=\"value === 'Completed'\" class=\"bg-[#4ABB54]\">\n {{ value }}\n </span>\n <span\n *ngIf=\"value === 'Saved'\"\n class=\"bg-[#BEB8FF] rounded-xl px-4 py-1\"\n >\n {{ value }}\n </span>\n </ng-template>\n <ng-template\n #cellEdit\n let-row=\"row\"\n let-updateValue=\"updateValue\"\n let-value\n >\n <verbena-input\n inputContainerClass=\"w-fit\"\n [(ngModel)]=\"row.Workflow\"\n ></verbena-input>\n </ng-template>\n </ng-container> -->\n \n \n <ng-container libColumn=\"isValid\">\n <ng-template #cell let-row=\"row\" let-value>\n <verben-svg *ngIf=\"value===true\" [icon]=\"'check'\"></verben-svg>\n <verben-svg *ngIf=\"value===false\" [icon]=\"'error'\"></verben-svg>\n </ng-template>\n <ng-template #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n <verbena-switch [onColor]=\"'#1A237E'\" [(ngModel)]=\"row.IsValidated\"></verbena-switch>\n </ng-template>\n \n </ng-container>\n\n <ng-container libColumn=\"actions\">\n <ng-template\n #cell\n let-isEditing=\"isEditing\"\n let-toggleRowEdit=\"toggleRowEdit\"\n let-row=\"row\"\n let-value\n >\n <verben-pop-Up\n [customStyles]=\"{ 'z-index': '99' }\"\n [dropdownOpen]=\"isDropdownOpen(row)\"\n [enableMouseLeave]=\"false\"\n (close)=\"onClose()\"\n >\n <verben-svg\n class=\"cursor-pointer actions-icon\"\n (click)=\"openDropdown(row)\"\n dropdown-trigger\n icon=\"list\"\n ></verben-svg>\n <div class=\"pop-up-content flex flex-col\" dropdown-content>\n <div\n (click)=\"goToCardView(value)\"\n class=\"pop-up-value cursor-pointer\"\n >\n View Form Group\n </div>\n <div class=\"pop-up-value cursor-pointer\">Delete</div>\n </div>\n </verben-pop-Up>\n </ng-template>\n <ng-template\n #cellEdit\n let-isEditing=\"isEditing\"\n let-toggleRowEdit=\"toggleRowEdit\"\n let-row=\"row\"\n let-value\n >\n <div class=\"flex gap-2 items-center\">\n <verben-svg\n icon=\"check\"\n [width]=\"15\"\n [height]=\"15\"\n (click)=\"tableSaveUser(value, toggleRowEdit)\"\n ></verben-svg>\n <verben-svg icon=\"delete\" [width]=\"15\" [height]=\"15\"></verben-svg>\n <verben-svg\n icon=\"cardViewAlt\"\n [width]=\"15\"\n [height]=\"15\"\n (click)=\"goToCardView(value)\"\n ></verben-svg>\n </div>\n </ng-template>\n </ng-container>\n </lib-data-table>\n </div>\n <div card-content>\n <verben-card-data-view\n borderRadius=\"12px\"\n #vdcv\n dataId=\"Id\"\n border=\"5px\"\n [cardDataList]=\"cardData\"\n rbgColor=\"#f5f6f9\"\n mg=\"0px\"\n >\n <verben-left-card-data-view class=\"space-y-7\">\n <verben-left-card-data\n #vlcd\n [parent]=\"vdcv\"\n dataId=\"MailAddress\"\n class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\"\n [cardDataList]=\"cardData\"\n >\n <ng-template #card let-item>\n <div\n (click)=\"userCardClicked(item)\"\n class=\"flex cursor-pointer h-[max-content]\"\n >\n <!-- <verben-svg [width]=\"15\" [height]=\"15\" (click)=\"toggleChildren(item); $event.stopPropagation()\"\n [ngClass]=\"item.children && item.children.length?'visible':'invisible'\"\n class=\"items-center flex pr-1 cursor-pointer\" [icon]=\"item.isChildrenExpanded?'minus':'plus'\" /> -->\n <div class=\"flex w-full bg-secondary rounded-xl\">\n <div\n class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n [ngClass]=\"\n item.selected ? 'bg-primary' : 'bg-secondary-200'\n \"\n ></div>\n <div class=\"py-3 px-4 flex-1 h-[100%]\">\n <div\n class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\"\n >\n <div\n class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\"\n >\n <div class=\"flex justify-between\">\n <div>\n <h3\n class=\"my-0 font-bold text-[#404040] leading-[19.5px]\"\n >\n {{ item.data.Name??'Null' }}\n </h3>\n <span class=\"flex mt-2 items-center gap-1\">\n <span\n class=\"!text-[10px] font-light text-[#404040]\"\n >Expiry Date:</span\n >\n <span class=\"!text-[12px] font-semibold\">{{\n item.data.ExpiryDate|date\n }}</span>\n </span>\n </div>\n\n <div>\n <span class=\"!text-[10px] text-[#404040]\"\n >Duration</span\n >\n <p class=\"!text-[12px]\">{{ item.data.Duration }}</p>\n \n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n </verben-left-card-data>\n </verben-left-card-data-view>\n <verben-right-card-data-view>\n <ng-template #parent>\n <div *ngIf=\"this.currentData\">\n \n <div *ngIf=\"currentData.data.Entities[active]\" class=\"flex flex-wrap bg-[#9A9FBF80] rounded-xl px-3 py-2 w-full relative gap-6\">\n <!-- <app-form-timer></app-form-timer> -->\n <div *ngFor=\"let group of currentData.data.Entities; let index = index\">\n <p \n (click)=\"setActive(index)\" \n [ngClass]=\"{'bg-[#fff] text-primary rounded-lg shadow-lg': active === index}\" \n class=\"px-6 py-2 cursor-pointer\">\n {{ group.Name }}\n </p>\n </div>\n </div>\n \n<div *ngIf=\"currentData.data.Entities[active]; else emptyState\" class=\"mt-4\">\n <form-control [dataType]=\"dataType\" [formProperties]=\"currentData.data.Entities[active].Properties\"></form-control>\n <div class=\"flex justify-between w-full bottom-8 left-0 right-0 mt-4\">\n <verbena-button\n class=\"verben-delete-button\"\n text=\"Delete\"\n ></verbena-button>\n\n <div class=\"flex gap-3\">\n <verbena-button\n class=\"verben-switch-button\"\n (click)=\"goToTableView()\"\n text=\"Switch To Table\"\n ></verbena-button>\n <verbena-button\n class=\"verben-primary-button\"\n (click)=\"saveUser()\"\n text=\"Save\"\n ></verbena-button>\n </div>\n </div>\n</div>\n\n<!-- Empty state template -->\n<ng-template #emptyState>\n <p class=\"mt-4 p-4 text-gray-600 text-center\">\n No entries available for the selected form group.\n </p>\n</ng-template>\n\n </div>\n \n </ng-template>\n </verben-right-card-data-view>\n <!-- <verben-right-card-data-view>\n yeshhhhhh\n </verben-right-card-data-view> -->\n\n <verben-card-data-view-footer>\n <div class=\"flex gap-2 justify-between\">\n <div\n *ngIf=\"!vdcv.hasCurrentItem()\"\n class=\"message-log-button-container flex justify-between\"\n >\n <verbena-button\n [fontWeight]=\"'bold'\"\n [bgColor]=\"'#8E8D87'\"\n [borderRadius]=\"'4px'\"\n [textColor]=\"'#fff'\"\n [text]=\"'Delete'\"\n >\n </verbena-button>\n </div>\n <div\n class=\"flex {{\n vdcv.hasCurrentItem() ? 'flex-1' : ''\n }} justify-end items-center gap-5\"\n >\n <span class=\"paginator-text\"\n >{{ cardData.length }} records loaded</span\n >\n <button (click)=\"loadMore()\" class=\"load-more view-links\">\n Load more\n </button>\n </div>\n </div>\n </verben-card-data-view-footer>\n </verben-card-data-view>\n </div>\n <div column-content>\n <verben-visible-column\n (columnsUpdated)=\"onColumnsUpdated($event)\"\n [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\"\n boxShadow=\"2px 2px 2px 0px silver\"\n bgColor=\"white\"\n width=\"400px\"\n textColor=\"black\"\n pd=\"1rem\"\n primaryColor=\"#FFE681\"\n secondaryColor=\"#3479E9\"\n [columns]=\"visibleColumns\"\n [displayedColumns]=\"5\"\n ></verben-visible-column>\n </div>\n <div filter-content>\n <verben-table-filter\n (filtersApplied)=\"onFilterApplied($event)\"\n [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\"\n boxShadow=\"2px 2px 2px 0px silver\"\n bgColor=\"white\"\n width=\"420px\"\n textColor=\"black\"\n pd=\"1rem\"\n primaryColor=\"#FFE681\"\n secondaryColor=\"#3479E9\"\n tertiaryColor=\"#404040\"\n [filterOptions]=\"filterArray\"\n [maxFilterLength]=\"3\"\n ></verben-table-filter>\n </div>\n <div sort-content>\n <verben-sort-table\n (selectedOptions)=\"onSortUpdated($event)\"\n [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\"\n boxShadow=\"2px 2px 2px 0px silver\"\n bgColor=\"white\"\n width=\"400px\"\n textColor=\"black\"\n pd=\"1rem\"\n primaryColor=\"#FFE681\"\n secondaryColor=\"#3479E9\"\n tertiaryColor=\"#404040\"\n [enableDragAndDrop]=\"true\"\n [sortOptions]=\"sortOptions\"\n ></verben-sort-table>\n </div>\n <div export-content>\n <lib-data-export [data]=\"data\" (exportDataEvent)=\"handleExport($event)\">\n </lib-data-export>\n </div>\n </verben-data-view>\n <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-between\">\n <div class=\"message-log-button-container flex justify-between\">\n <verbena-button\n [fontWeight]=\"'bold'\"\n [bgColor]=\"'#8E8D87'\"\n [borderRadius]=\"'4px'\"\n [textColor]=\"'#fff'\"\n [text]=\"'Delete'\"\n >\n </verbena-button>\n </div>\n <div class=\"flex justify-end items-center gap-5\">\n <span class=\"paginator-text\">{{ cardData.length }} records loaded</span>\n <button (click)=\"loadMore()\" class=\"load-more view-links\">\n Load more\n </button>\n </div>\n </div>\n</div>\n", styles: [".view-links{font-size:14px!important;color:#00f;font-weight:600;cursor:pointer}.view-links:hover{text-decoration:underline;text-underline-offset:3px}.context-banner{background-color:#d4a00773}.card-min-height{gap:10px}::ng-deep .childrenPadding{max-height:300px;overflow-y:auto}::ng-deep .toolbar{margin-bottom:15px}::ng-deep .master-only-container{margin:0!important;padding:0!important}::ng-deep .master-detail-container{margin:0!important;padding:0!important}.pop-up-content{border-radius:4px;background-color:#fff;border:1px solid rgba(212,161,7,.5)}.pop-up-value{padding:10px 20px}.pop-up-content>div:nth-child(1){border-bottom:4px solid #FFE681}.enum-val{padding:2px 10px;width:100%;min-width:max-content;text-align:center}.enum-val.Active{background-color:#d6f3e6;color:#2db76f}.enum-val.InActive{background-color:#ffdfdf;color:#eb5757}.toggle-container{width:53px;padding:1px;color:#fff;height:22px;position:relative;background-color:#1a237e;border-radius:2rem;cursor:pointer}.toggle-circle{width:50%;height:100%;position:absolute;left:0;padding:5px;top:0;background-color:#fff;border-radius:50%;transform:scale(1);transition:transform .3s}.translate-100{transform:translate(100%)}.translate-0{transform:translate(0)}.toggle-text-on{display:block;font-size:12px;margin-left:4px}.toggle-text-off{display:block;font-size:12px;margin-right:4px;text-align:right}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "useVirtualScroll", "virtualScrollItemSize", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowRevert", "rowDelete", "selectionChange"] }, { kind: "directive", type: i6.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i6.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i6.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }, { kind: "component", type: i6.DataViewComponent, selector: "verben-data-view", inputs: ["buttonClass", "iconClass", "activeIconClass", "columnCustomClass", "filterCustomClass", "sortCustomClass", "extendCustomClass", "exportCustomClass", "selectCustomClass", "importCustomClass", "zIndex", "createCustomClass", "tableIcon", "cardIcon", "cardClass", "tableClass", "searchKey", "searchValue", "viewState", "searchTemplate", "importTemplate", "columnTemplate", "extendTemplate", "filterTemplate", "sortTemplate", "children", "exportTemplate", "createTemplate", "selectedColumnCount", "selectedSortCount", "selectedFilterTableCount", "inputWidth", "milliseconds", "showColumnChild", "showSortChild", "showFilterChild", "showImportChild", "showExportChild", "showExtendChild", "create", "showSelected", "isTableView"], outputs: ["viewChange", "stateChange", "onSearchChange"] }, { kind: "component", type: i6.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i6.CardDataViewComponent, selector: "verben-card-data-view", inputs: ["pd", "mg", "lHeight", "rHeight", "rWidth", "lWidth", "textColor", "lbgColor", "rbgColor", "border", "display", "borderRadius", "activeCss", "inActiveCss", "displayAsRow", "cardDataList", "dataId", "totalRecords", "footer", "noOfVisibleChildren", "showEditIcon", "onItemClick", "onCardChildClick"], outputs: ["editClicked", "loadMoreClick"] }, { kind: "component", type: i6.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "dataId"] }, { kind: "component", type: i6.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i6.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i6.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i6.VerbenaSwitchComponent, selector: "verbena-switch", inputs: ["label", "checked", "disabled", "offColor", "onColor", "onText", "offText", "width", "height", "customStyles"], outputs: ["change"] }, { kind: "component", type: i6.TableFilterComponent, selector: "verben-table-filter", inputs: ["filterOptions", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "maxFilterLength", "tooltip"], outputs: ["filtersApplied", "resetSortData"] }, { kind: "component", type: i6.VisibleColumnComponent, selector: "verben-visible-column", inputs: ["columns", "items", "enableDragAndDrop", "displayedColumns", "showMore", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "closeColumn"], outputs: ["columnsUpdated", "resetFilter"] }, { kind: "component", type: i6.SortTableComponent, selector: "verben-sort-table", inputs: ["enableDragAndDrop", "sortOptions", "resetText", "displayedOptions", "propertyText", "showMoreText", "sortButtonText", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "containerHeight"], outputs: ["selectedOptions", "resetSortData"] }, { kind: "component", type: i6.DataExportComponent, selector: "lib-data-export", inputs: ["columns", "data", "dataFetchUrl", "dataQueryParameters"], outputs: ["exportDataEvent"] }, { kind: "component", type: i6.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i7.FormControlComponent, selector: "form-control", inputs: ["dataType", "value", "boolInputType", "formProperties"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
|
|
663
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormResponseComponent, selector: "lib-form-response", inputs: { path: "path", application: "application", pageSize: "pageSize", taskCodeKey: "taskCodeKey" }, outputs: { onViewProcessClicked: "onViewProcessClicked" }, viewQueries: [{ propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }, { propertyName: "tableView", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n <!-- <header\n class=\"rounded-lg shadow-lg flex justify-between items-center px-6 py-2 bg-[#D4A00773]\"\n >\n <h4 class=\"font-semibold\">{{ \"Contact Info\" }}</h4>\n <verben-svg\n (click)=\"goBack()\"\n class=\"cursor-pointer\"\n [width]=\"17\"\n [height]=\"17\"\n [icon]=\"'close'\"\n ></verben-svg>\n </header> -->\n\n <div>\n <verben-card-data-view\n borderRadius=\"12px\"\n #vdcv\n dataId=\"Id\"\n border=\"5px\"\n [cardDataList]=\"cardData\"\n rbgColor=\"#f5f6f9\"\n mg=\"0px\"\n >\n <verben-left-card-data-view class=\"space-y-7\">\n <verben-left-card-data\n #vlcd\n [parent]=\"vdcv\"\n dataId=\"MailAddress\"\n class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\"\n [cardDataList]=\"cardData\"\n >\n <ng-template #card let-item>\n <div\n (click)=\"cardClicked(item)\"\n class=\"flex cursor-pointer h-[max-content]\"\n >\n <!-- <verben-svg [width]=\"15\" [height]=\"15\" (click)=\"toggleChildren(item); $event.stopPropagation()\"\n [ngClass]=\"item.children && item.children.length?'visible':'invisible'\"\n class=\"items-center flex pr-1 cursor-pointer\" [icon]=\"item.isChildrenExpanded?'minus':'plus'\" /> -->\n <div class=\"flex w-full bg-secondary rounded-xl\">\n <div\n class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n [ngClass]=\"item.selected ? 'bg-primary' : 'bg-secondary-200'\"\n ></div>\n <div class=\"py-3 px-4 flex-1 h-[100%]\">\n <div\n class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\"\n >\n <div\n class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\"\n >\n <div class=\"flex justify-between\">\n <div>\n <h3\n class=\"my-0 font-bold text-[#404040] leading-[19.5px]\"\n >\n {{ item.data.Name ?? \"Null\" }}\n </h3>\n <span class=\"flex mt-2 items-center gap-1\">\n <span class=\"!text-[10px] font-light text-[#404040]\"\n >Expiry Date:</span\n >\n <span class=\"!text-[12px] font-semibold\">{{\n item.data.ExpiryDate | date\n }}</span>\n </span>\n </div>\n\n <div>\n <span class=\"!text-[10px] text-[#404040]\"\n >Duration</span\n >\n <p class=\"!text-[12px]\">{{ item.data.Duration }}</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n </verben-left-card-data>\n </verben-left-card-data-view>\n <verben-right-card-data-view>\n <ng-template #parent>\n <div *ngIf=\"this.currentData\">\n <div\n *ngIf=\"currentData.data.Entities[active]\"\n class=\"flex flex-wrap bg-[#9A9FBF80] rounded-xl px-3 py-2 w-full relative gap-6\"\n >\n <!-- <app-form-timer></app-form-timer> -->\n <div\n *ngFor=\"\n let group of currentData.data.Entities;\n let index = index\n \"\n >\n <p\n (click)=\"setActive(index)\"\n [ngClass]=\"{\n 'bg-[#fff] text-primary rounded-lg shadow-lg':\n active === index\n }\"\n class=\"px-6 py-2 cursor-pointer\"\n >\n {{ group.Name }}\n </p>\n </div>\n </div>\n\n <div\n *ngIf=\"currentData.data.Entities[active]; else emptyState\"\n class=\"mt-4\"\n >\n <form-control\n [dataType]=\"dataType\"\n [formProperties]=\"currentData.data.Entities[active].Properties\"\n ></form-control>\n <div\n class=\"flex justify-between w-full bottom-8 left-0 right-0 mt-4\"\n >\n <!-- <verbena-button\n class=\"verben-delete-button\"\n text=\"Delete\"\n ></verbena-button> -->\n <div></div>\n\n <div class=\"flex gap-3\">\n <!-- <verbena-button\n class=\"verben-switch-button\"\n (click)=\"goToTableView()\"\n text=\"Switch To Table\"\n ></verbena-button> -->\n <verbena-button\n class=\"verben-primary-button\"\n (click)=\"saveItem()\"\n text=\"Save\"\n ></verbena-button>\n </div>\n </div>\n </div>\n\n <!-- Empty state template -->\n <ng-template #emptyState>\n <p class=\"mt-4 p-4 text-gray-600 text-center\">\n No entries available for the selected form group.\n </p>\n </ng-template>\n </div>\n </ng-template>\n </verben-right-card-data-view>\n <!-- <verben-right-card-data-view>\n yeshhhhhh\n </verben-right-card-data-view> -->\n\n <verben-card-data-view-footer>\n <!-- <div class=\"flex gap-2 justify-between\">\n <div\n *ngIf=\"!vdcv.hasCurrentItem()\"\n class=\"message-log-button-container flex justify-between\"\n >\n <verbena-button\n [fontWeight]=\"'bold'\"\n [bgColor]=\"'#8E8D87'\"\n [borderRadius]=\"'4px'\"\n [textColor]=\"'#fff'\"\n [text]=\"'Delete'\"\n >\n </verbena-button>\n </div>\n <div\n class=\"flex {{\n vdcv.hasCurrentItem() ? 'flex-1' : ''\n }} justify-end items-center gap-5\"\n >\n <span class=\"paginator-text\"\n >{{ cardData.length }} records loaded</span\n >\n <button (click)=\"loadMore()\" class=\"load-more view-links\">\n Load more\n </button>\n </div>\n </div> -->\n </verben-card-data-view-footer>\n </verben-card-data-view>\n </div>\n</div>\n", styles: [".view-links{font-size:14px!important;color:#00f;font-weight:600;cursor:pointer}.view-links:hover{text-decoration:underline;text-underline-offset:3px}.context-banner{background-color:#d4a00773}.card-min-height{gap:10px}::ng-deep .childrenPadding{max-height:300px;overflow-y:auto}::ng-deep .toolbar{margin-bottom:15px}::ng-deep .master-only-container{margin:0!important;padding:0!important}::ng-deep .master-detail-container{margin:0!important;padding:0!important}.pop-up-content{border-radius:4px;background-color:#fff;border:1px solid rgba(212,161,7,.5)}.pop-up-value{padding:10px 20px}.pop-up-content>div:nth-child(1){border-bottom:4px solid #FFE681}.enum-val{padding:2px 10px;width:100%;min-width:max-content;text-align:center}.enum-val.Active{background-color:#d6f3e6;color:#2db76f}.enum-val.InActive{background-color:#ffdfdf;color:#eb5757}.toggle-container{width:53px;padding:1px;color:#fff;height:22px;position:relative;background-color:#1a237e;border-radius:2rem;cursor:pointer}.toggle-circle{width:50%;height:100%;position:absolute;left:0;padding:5px;top:0;background-color:#fff;border-radius:50%;transform:scale(1);transition:transform .3s}.translate-100{transform:translate(100%)}.translate-0{transform:translate(0)}.toggle-text-on{display:block;font-size:12px;margin-left:4px}.toggle-text-off{display:block;font-size:12px;margin-right:4px;text-align:right}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i6.CardDataViewComponent, selector: "verben-card-data-view", inputs: ["pd", "mg", "lHeight", "rHeight", "rWidth", "lWidth", "textColor", "lbgColor", "rbgColor", "border", "display", "borderRadius", "activeCss", "inActiveCss", "displayAsRow", "cardDataList", "dataId", "totalRecords", "footer", "noOfVisibleChildren", "showEditIcon", "onItemClick", "onCardChildClick"], outputs: ["editClicked", "loadMoreClick"] }, { kind: "component", type: i6.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "dataId"] }, { kind: "component", type: i6.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i6.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i6.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i7.FormControlComponent, selector: "form-control", inputs: ["dataType", "value", "boolInputType", "formProperties"] }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
|
|
661
664
|
}
|
|
662
665
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormResponseComponent, decorators: [{
|
|
663
666
|
type: Component,
|
|
664
|
-
args: [{ selector: 'lib-form-response', template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n <header\n class=\"rounded-lg shadow-lg flex justify-between items-center px-6 py-2 bg-[#D4A00773]\"\n >\n <h4 class=\"font-semibold\">{{ \"Contact Info\" }}</h4>\n <verben-svg\n (click)=\"goBack()\"\n class=\"cursor-pointer\"\n [width]=\"17\"\n [height]=\"17\"\n [icon]=\"'close'\"\n ></verben-svg>\n </header>\n <verben-data-view\n #vdv\n [viewState]=\"{\n isSearch: true,\n isColumn: true,\n isFilter: true,\n isSort: true,\n isExport: true,\n isSelect: true,\n isCreate: false,\n isToggle:true,\n \n }\"\n [buttonClass]=\"'my-custom-button-class'\"\n [iconClass]=\"'my-icon-class'\"\n [searchValue]=\"searchTerm\"\n (onSearchChange)=\"onSearch($event)\"\n [showFilterChild]=\"showFilter\"\n [activeIconClass]=\"'my-active-icon-class'\"\n [selectedColumnCount]=\"0\"\n [selectedSortCount]=\"0\"\n [selectedFilterTableCount]=\"0\"\n (viewChange)=\"onViewChange($event)\"\n (stateChange)=\"onStateChange($event)\"\n >\n <div class=\"mt-2\" table-content>\n <lib-data-table\n #dt\n [data]=\"data\"\n [columns]=\"visibleColumnDef\"\n [styleConfig]=\"styles\"\n (selectionChange)=\"onSelectionChange($event)\"\n >\n <ng-container libColumn=\"select\">\n <ng-template\n #cell\n let-isSelected=\"isSelected\"\n let-toggleRowSelection=\"toggleRowSelection\"\n >\n <input\n type=\"checkbox\"\n [checked]=\"isSelected\"\n (change)=\"toggleRowSelection()\"\n />\n </ng-template>\n <ng-template\n #header\n let-allRowsSelected=\"allRowsSelected\"\n let-someRowsSelected=\"someRowsSelected\"\n let-toggleAllRows=\"toggleAllRows\"\n >\n <input\n type=\"checkbox\"\n [checked]=\"allRowsSelected()\"\n [indeterminate]=\"someRowsSelected()\"\n (change)=\"toggleAllRows()\"\n />\n </ng-template>\n </ng-container>\n <ng-container libColumn=\"createdAt\">\n <ng-template #cell let-row=\"row\" let-value>\n {{ value | date }}\n </ng-template>\n <ng-template\n #cellEdit\n let-row=\"row\"\n let-updateValue=\"updateValue\"\n let-value\n >\n <verbena-input\n inputContainerClass=\"w-fit\"\n [(ngModel)]=\"row.Workflow\"\n ></verbena-input>\n </ng-template>\n </ng-container>\n <ng-container libColumn=\"expiryDate\">\n <ng-template #cell let-row=\"row\" let-value>\n {{ value | date }}\n </ng-template>\n <ng-template\n #cellEdit\n let-row=\"row\"\n let-updateValue=\"updateValue\"\n let-value\n >\n <verbena-input\n inputContainerClass=\"w-fit\"\n [(ngModel)]=\"row.Workflow\"\n ></verbena-input>\n </ng-template>\n </ng-container>\n <ng-container libColumn=\"name\">\n <ng-template #cell let-row=\"row\" let-value>\n {{ value }}\n </ng-template>\n <ng-template\n #cellEdit\n let-row=\"row\"\n let-updateValue=\"updateValue\"\n let-value\n >\n <verbena-input\n inputContainerClass=\"w-fit\"\n [(ngModel)]=\"row.Workflow\"\n ></verbena-input>\n </ng-template>\n </ng-container>\n <!-- <ng-container libColumn=\"status\">\n <ng-template #cell let-row=\"row\" let-value>\n <span *ngIf=\"value === 'Completed'\" class=\"bg-[#4ABB54]\">\n {{ value }}\n </span>\n <span\n *ngIf=\"value === 'Saved'\"\n class=\"bg-[#BEB8FF] rounded-xl px-4 py-1\"\n >\n {{ value }}\n </span>\n </ng-template>\n <ng-template\n #cellEdit\n let-row=\"row\"\n let-updateValue=\"updateValue\"\n let-value\n >\n <verbena-input\n inputContainerClass=\"w-fit\"\n [(ngModel)]=\"row.Workflow\"\n ></verbena-input>\n </ng-template>\n </ng-container> -->\n \n \n <ng-container libColumn=\"isValid\">\n <ng-template #cell let-row=\"row\" let-value>\n <verben-svg *ngIf=\"value===true\" [icon]=\"'check'\"></verben-svg>\n <verben-svg *ngIf=\"value===false\" [icon]=\"'error'\"></verben-svg>\n </ng-template>\n <ng-template #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-value>\n <verbena-switch [onColor]=\"'#1A237E'\" [(ngModel)]=\"row.IsValidated\"></verbena-switch>\n </ng-template>\n \n </ng-container>\n\n <ng-container libColumn=\"actions\">\n <ng-template\n #cell\n let-isEditing=\"isEditing\"\n let-toggleRowEdit=\"toggleRowEdit\"\n let-row=\"row\"\n let-value\n >\n <verben-pop-Up\n [customStyles]=\"{ 'z-index': '99' }\"\n [dropdownOpen]=\"isDropdownOpen(row)\"\n [enableMouseLeave]=\"false\"\n (close)=\"onClose()\"\n >\n <verben-svg\n class=\"cursor-pointer actions-icon\"\n (click)=\"openDropdown(row)\"\n dropdown-trigger\n icon=\"list\"\n ></verben-svg>\n <div class=\"pop-up-content flex flex-col\" dropdown-content>\n <div\n (click)=\"goToCardView(value)\"\n class=\"pop-up-value cursor-pointer\"\n >\n View Form Group\n </div>\n <div class=\"pop-up-value cursor-pointer\">Delete</div>\n </div>\n </verben-pop-Up>\n </ng-template>\n <ng-template\n #cellEdit\n let-isEditing=\"isEditing\"\n let-toggleRowEdit=\"toggleRowEdit\"\n let-row=\"row\"\n let-value\n >\n <div class=\"flex gap-2 items-center\">\n <verben-svg\n icon=\"check\"\n [width]=\"15\"\n [height]=\"15\"\n (click)=\"tableSaveUser(value, toggleRowEdit)\"\n ></verben-svg>\n <verben-svg icon=\"delete\" [width]=\"15\" [height]=\"15\"></verben-svg>\n <verben-svg\n icon=\"cardViewAlt\"\n [width]=\"15\"\n [height]=\"15\"\n (click)=\"goToCardView(value)\"\n ></verben-svg>\n </div>\n </ng-template>\n </ng-container>\n </lib-data-table>\n </div>\n <div card-content>\n <verben-card-data-view\n borderRadius=\"12px\"\n #vdcv\n dataId=\"Id\"\n border=\"5px\"\n [cardDataList]=\"cardData\"\n rbgColor=\"#f5f6f9\"\n mg=\"0px\"\n >\n <verben-left-card-data-view class=\"space-y-7\">\n <verben-left-card-data\n #vlcd\n [parent]=\"vdcv\"\n dataId=\"MailAddress\"\n class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\"\n [cardDataList]=\"cardData\"\n >\n <ng-template #card let-item>\n <div\n (click)=\"userCardClicked(item)\"\n class=\"flex cursor-pointer h-[max-content]\"\n >\n <!-- <verben-svg [width]=\"15\" [height]=\"15\" (click)=\"toggleChildren(item); $event.stopPropagation()\"\n [ngClass]=\"item.children && item.children.length?'visible':'invisible'\"\n class=\"items-center flex pr-1 cursor-pointer\" [icon]=\"item.isChildrenExpanded?'minus':'plus'\" /> -->\n <div class=\"flex w-full bg-secondary rounded-xl\">\n <div\n class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n [ngClass]=\"\n item.selected ? 'bg-primary' : 'bg-secondary-200'\n \"\n ></div>\n <div class=\"py-3 px-4 flex-1 h-[100%]\">\n <div\n class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\"\n >\n <div\n class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\"\n >\n <div class=\"flex justify-between\">\n <div>\n <h3\n class=\"my-0 font-bold text-[#404040] leading-[19.5px]\"\n >\n {{ item.data.Name??'Null' }}\n </h3>\n <span class=\"flex mt-2 items-center gap-1\">\n <span\n class=\"!text-[10px] font-light text-[#404040]\"\n >Expiry Date:</span\n >\n <span class=\"!text-[12px] font-semibold\">{{\n item.data.ExpiryDate|date\n }}</span>\n </span>\n </div>\n\n <div>\n <span class=\"!text-[10px] text-[#404040]\"\n >Duration</span\n >\n <p class=\"!text-[12px]\">{{ item.data.Duration }}</p>\n \n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n </verben-left-card-data>\n </verben-left-card-data-view>\n <verben-right-card-data-view>\n <ng-template #parent>\n <div *ngIf=\"this.currentData\">\n \n <div *ngIf=\"currentData.data.Entities[active]\" class=\"flex flex-wrap bg-[#9A9FBF80] rounded-xl px-3 py-2 w-full relative gap-6\">\n <!-- <app-form-timer></app-form-timer> -->\n <div *ngFor=\"let group of currentData.data.Entities; let index = index\">\n <p \n (click)=\"setActive(index)\" \n [ngClass]=\"{'bg-[#fff] text-primary rounded-lg shadow-lg': active === index}\" \n class=\"px-6 py-2 cursor-pointer\">\n {{ group.Name }}\n </p>\n </div>\n </div>\n \n<div *ngIf=\"currentData.data.Entities[active]; else emptyState\" class=\"mt-4\">\n <form-control [dataType]=\"dataType\" [formProperties]=\"currentData.data.Entities[active].Properties\"></form-control>\n <div class=\"flex justify-between w-full bottom-8 left-0 right-0 mt-4\">\n <verbena-button\n class=\"verben-delete-button\"\n text=\"Delete\"\n ></verbena-button>\n\n <div class=\"flex gap-3\">\n <verbena-button\n class=\"verben-switch-button\"\n (click)=\"goToTableView()\"\n text=\"Switch To Table\"\n ></verbena-button>\n <verbena-button\n class=\"verben-primary-button\"\n (click)=\"saveUser()\"\n text=\"Save\"\n ></verbena-button>\n </div>\n </div>\n</div>\n\n<!-- Empty state template -->\n<ng-template #emptyState>\n <p class=\"mt-4 p-4 text-gray-600 text-center\">\n No entries available for the selected form group.\n </p>\n</ng-template>\n\n </div>\n \n </ng-template>\n </verben-right-card-data-view>\n <!-- <verben-right-card-data-view>\n yeshhhhhh\n </verben-right-card-data-view> -->\n\n <verben-card-data-view-footer>\n <div class=\"flex gap-2 justify-between\">\n <div\n *ngIf=\"!vdcv.hasCurrentItem()\"\n class=\"message-log-button-container flex justify-between\"\n >\n <verbena-button\n [fontWeight]=\"'bold'\"\n [bgColor]=\"'#8E8D87'\"\n [borderRadius]=\"'4px'\"\n [textColor]=\"'#fff'\"\n [text]=\"'Delete'\"\n >\n </verbena-button>\n </div>\n <div\n class=\"flex {{\n vdcv.hasCurrentItem() ? 'flex-1' : ''\n }} justify-end items-center gap-5\"\n >\n <span class=\"paginator-text\"\n >{{ cardData.length }} records loaded</span\n >\n <button (click)=\"loadMore()\" class=\"load-more view-links\">\n Load more\n </button>\n </div>\n </div>\n </verben-card-data-view-footer>\n </verben-card-data-view>\n </div>\n <div column-content>\n <verben-visible-column\n (columnsUpdated)=\"onColumnsUpdated($event)\"\n [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\"\n boxShadow=\"2px 2px 2px 0px silver\"\n bgColor=\"white\"\n width=\"400px\"\n textColor=\"black\"\n pd=\"1rem\"\n primaryColor=\"#FFE681\"\n secondaryColor=\"#3479E9\"\n [columns]=\"visibleColumns\"\n [displayedColumns]=\"5\"\n ></verben-visible-column>\n </div>\n <div filter-content>\n <verben-table-filter\n (filtersApplied)=\"onFilterApplied($event)\"\n [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\"\n boxShadow=\"2px 2px 2px 0px silver\"\n bgColor=\"white\"\n width=\"420px\"\n textColor=\"black\"\n pd=\"1rem\"\n primaryColor=\"#FFE681\"\n secondaryColor=\"#3479E9\"\n tertiaryColor=\"#404040\"\n [filterOptions]=\"filterArray\"\n [maxFilterLength]=\"3\"\n ></verben-table-filter>\n </div>\n <div sort-content>\n <verben-sort-table\n (selectedOptions)=\"onSortUpdated($event)\"\n [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\"\n boxShadow=\"2px 2px 2px 0px silver\"\n bgColor=\"white\"\n width=\"400px\"\n textColor=\"black\"\n pd=\"1rem\"\n primaryColor=\"#FFE681\"\n secondaryColor=\"#3479E9\"\n tertiaryColor=\"#404040\"\n [enableDragAndDrop]=\"true\"\n [sortOptions]=\"sortOptions\"\n ></verben-sort-table>\n </div>\n <div export-content>\n <lib-data-export [data]=\"data\" (exportDataEvent)=\"handleExport($event)\">\n </lib-data-export>\n </div>\n </verben-data-view>\n <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-between\">\n <div class=\"message-log-button-container flex justify-between\">\n <verbena-button\n [fontWeight]=\"'bold'\"\n [bgColor]=\"'#8E8D87'\"\n [borderRadius]=\"'4px'\"\n [textColor]=\"'#fff'\"\n [text]=\"'Delete'\"\n >\n </verbena-button>\n </div>\n <div class=\"flex justify-end items-center gap-5\">\n <span class=\"paginator-text\">{{ cardData.length }} records loaded</span>\n <button (click)=\"loadMore()\" class=\"load-more view-links\">\n Load more\n </button>\n </div>\n </div>\n</div>\n", styles: [".view-links{font-size:14px!important;color:#00f;font-weight:600;cursor:pointer}.view-links:hover{text-decoration:underline;text-underline-offset:3px}.context-banner{background-color:#d4a00773}.card-min-height{gap:10px}::ng-deep .childrenPadding{max-height:300px;overflow-y:auto}::ng-deep .toolbar{margin-bottom:15px}::ng-deep .master-only-container{margin:0!important;padding:0!important}::ng-deep .master-detail-container{margin:0!important;padding:0!important}.pop-up-content{border-radius:4px;background-color:#fff;border:1px solid rgba(212,161,7,.5)}.pop-up-value{padding:10px 20px}.pop-up-content>div:nth-child(1){border-bottom:4px solid #FFE681}.enum-val{padding:2px 10px;width:100%;min-width:max-content;text-align:center}.enum-val.Active{background-color:#d6f3e6;color:#2db76f}.enum-val.InActive{background-color:#ffdfdf;color:#eb5757}.toggle-container{width:53px;padding:1px;color:#fff;height:22px;position:relative;background-color:#1a237e;border-radius:2rem;cursor:pointer}.toggle-circle{width:50%;height:100%;position:absolute;left:0;padding:5px;top:0;background-color:#fff;border-radius:50%;transform:scale(1);transition:transform .3s}.translate-100{transform:translate(100%)}.translate-0{transform:translate(0)}.toggle-text-on{display:block;font-size:12px;margin-left:4px}.toggle-text-off{display:block;font-size:12px;margin-right:4px;text-align:right}\n"] }]
|
|
667
|
+
args: [{ selector: 'lib-form-response', template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n <!-- <header\n class=\"rounded-lg shadow-lg flex justify-between items-center px-6 py-2 bg-[#D4A00773]\"\n >\n <h4 class=\"font-semibold\">{{ \"Contact Info\" }}</h4>\n <verben-svg\n (click)=\"goBack()\"\n class=\"cursor-pointer\"\n [width]=\"17\"\n [height]=\"17\"\n [icon]=\"'close'\"\n ></verben-svg>\n </header> -->\n\n <div>\n <verben-card-data-view\n borderRadius=\"12px\"\n #vdcv\n dataId=\"Id\"\n border=\"5px\"\n [cardDataList]=\"cardData\"\n rbgColor=\"#f5f6f9\"\n mg=\"0px\"\n >\n <verben-left-card-data-view class=\"space-y-7\">\n <verben-left-card-data\n #vlcd\n [parent]=\"vdcv\"\n dataId=\"MailAddress\"\n class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\"\n [cardDataList]=\"cardData\"\n >\n <ng-template #card let-item>\n <div\n (click)=\"cardClicked(item)\"\n class=\"flex cursor-pointer h-[max-content]\"\n >\n <!-- <verben-svg [width]=\"15\" [height]=\"15\" (click)=\"toggleChildren(item); $event.stopPropagation()\"\n [ngClass]=\"item.children && item.children.length?'visible':'invisible'\"\n class=\"items-center flex pr-1 cursor-pointer\" [icon]=\"item.isChildrenExpanded?'minus':'plus'\" /> -->\n <div class=\"flex w-full bg-secondary rounded-xl\">\n <div\n class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n [ngClass]=\"item.selected ? 'bg-primary' : 'bg-secondary-200'\"\n ></div>\n <div class=\"py-3 px-4 flex-1 h-[100%]\">\n <div\n class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\"\n >\n <div\n class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\"\n >\n <div class=\"flex justify-between\">\n <div>\n <h3\n class=\"my-0 font-bold text-[#404040] leading-[19.5px]\"\n >\n {{ item.data.Name ?? \"Null\" }}\n </h3>\n <span class=\"flex mt-2 items-center gap-1\">\n <span class=\"!text-[10px] font-light text-[#404040]\"\n >Expiry Date:</span\n >\n <span class=\"!text-[12px] font-semibold\">{{\n item.data.ExpiryDate | date\n }}</span>\n </span>\n </div>\n\n <div>\n <span class=\"!text-[10px] text-[#404040]\"\n >Duration</span\n >\n <p class=\"!text-[12px]\">{{ item.data.Duration }}</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n </verben-left-card-data>\n </verben-left-card-data-view>\n <verben-right-card-data-view>\n <ng-template #parent>\n <div *ngIf=\"this.currentData\">\n <div\n *ngIf=\"currentData.data.Entities[active]\"\n class=\"flex flex-wrap bg-[#9A9FBF80] rounded-xl px-3 py-2 w-full relative gap-6\"\n >\n <!-- <app-form-timer></app-form-timer> -->\n <div\n *ngFor=\"\n let group of currentData.data.Entities;\n let index = index\n \"\n >\n <p\n (click)=\"setActive(index)\"\n [ngClass]=\"{\n 'bg-[#fff] text-primary rounded-lg shadow-lg':\n active === index\n }\"\n class=\"px-6 py-2 cursor-pointer\"\n >\n {{ group.Name }}\n </p>\n </div>\n </div>\n\n <div\n *ngIf=\"currentData.data.Entities[active]; else emptyState\"\n class=\"mt-4\"\n >\n <form-control\n [dataType]=\"dataType\"\n [formProperties]=\"currentData.data.Entities[active].Properties\"\n ></form-control>\n <div\n class=\"flex justify-between w-full bottom-8 left-0 right-0 mt-4\"\n >\n <!-- <verbena-button\n class=\"verben-delete-button\"\n text=\"Delete\"\n ></verbena-button> -->\n <div></div>\n\n <div class=\"flex gap-3\">\n <!-- <verbena-button\n class=\"verben-switch-button\"\n (click)=\"goToTableView()\"\n text=\"Switch To Table\"\n ></verbena-button> -->\n <verbena-button\n class=\"verben-primary-button\"\n (click)=\"saveItem()\"\n text=\"Save\"\n ></verbena-button>\n </div>\n </div>\n </div>\n\n <!-- Empty state template -->\n <ng-template #emptyState>\n <p class=\"mt-4 p-4 text-gray-600 text-center\">\n No entries available for the selected form group.\n </p>\n </ng-template>\n </div>\n </ng-template>\n </verben-right-card-data-view>\n <!-- <verben-right-card-data-view>\n yeshhhhhh\n </verben-right-card-data-view> -->\n\n <verben-card-data-view-footer>\n <!-- <div class=\"flex gap-2 justify-between\">\n <div\n *ngIf=\"!vdcv.hasCurrentItem()\"\n class=\"message-log-button-container flex justify-between\"\n >\n <verbena-button\n [fontWeight]=\"'bold'\"\n [bgColor]=\"'#8E8D87'\"\n [borderRadius]=\"'4px'\"\n [textColor]=\"'#fff'\"\n [text]=\"'Delete'\"\n >\n </verbena-button>\n </div>\n <div\n class=\"flex {{\n vdcv.hasCurrentItem() ? 'flex-1' : ''\n }} justify-end items-center gap-5\"\n >\n <span class=\"paginator-text\"\n >{{ cardData.length }} records loaded</span\n >\n <button (click)=\"loadMore()\" class=\"load-more view-links\">\n Load more\n </button>\n </div>\n </div> -->\n </verben-card-data-view-footer>\n </verben-card-data-view>\n </div>\n</div>\n", styles: [".view-links{font-size:14px!important;color:#00f;font-weight:600;cursor:pointer}.view-links:hover{text-decoration:underline;text-underline-offset:3px}.context-banner{background-color:#d4a00773}.card-min-height{gap:10px}::ng-deep .childrenPadding{max-height:300px;overflow-y:auto}::ng-deep .toolbar{margin-bottom:15px}::ng-deep .master-only-container{margin:0!important;padding:0!important}::ng-deep .master-detail-container{margin:0!important;padding:0!important}.pop-up-content{border-radius:4px;background-color:#fff;border:1px solid rgba(212,161,7,.5)}.pop-up-value{padding:10px 20px}.pop-up-content>div:nth-child(1){border-bottom:4px solid #FFE681}.enum-val{padding:2px 10px;width:100%;min-width:max-content;text-align:center}.enum-val.Active{background-color:#d6f3e6;color:#2db76f}.enum-val.InActive{background-color:#ffdfdf;color:#eb5757}.toggle-container{width:53px;padding:1px;color:#fff;height:22px;position:relative;background-color:#1a237e;border-radius:2rem;cursor:pointer}.toggle-circle{width:50%;height:100%;position:absolute;left:0;padding:5px;top:0;background-color:#fff;border-radius:50%;transform:scale(1);transition:transform .3s}.translate-100{transform:translate(100%)}.translate-0{transform:translate(0)}.toggle-text-on{display:block;font-size:12px;margin-left:4px}.toggle-text-off{display:block;font-size:12px;margin-right:4px;text-align:right}\n"] }]
|
|
665
668
|
}], ctorParameters: () => [{ type: i1.UtilService }, { type: i1.HttpWebRequestService }, { type: i0.ChangeDetectorRef }, { type: i2.FormBuilder }, { type: i1.EnvironmentService }, { type: i3.Router }, { type: FormResponseService }, { type: i5.Location }, { type: i3.ActivatedRoute }], propDecorators: { path: [{
|
|
666
669
|
type: Input
|
|
667
670
|
}], cardDataView: [{
|
|
@@ -677,6 +680,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
677
680
|
type: Input
|
|
678
681
|
}], pageSize: [{
|
|
679
682
|
type: Input
|
|
683
|
+
}], taskCodeKey: [{
|
|
684
|
+
type: Input
|
|
680
685
|
}], onViewProcessClicked: [{
|
|
681
686
|
type: Output
|
|
682
687
|
}] } });
|