@masterteam/workflow 0.0.16 → 0.0.18
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 +10 -10
- package/assets/i18n/ar.json +35 -30
- package/assets/i18n/en.json +35 -30
- package/assets/workflow.css +2 -2
- package/fesm2022/masterteam-workflow.mjs +95 -75
- package/fesm2022/masterteam-workflow.mjs.map +1 -1
- package/package.json +6 -5
- package/types/masterteam-workflow.d.ts +18 -6
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, Injectable, computed, signal, linkedSignal, effect
|
|
2
|
+
import { inject, Injectable, computed, Component, signal, linkedSignal, effect } from '@angular/core';
|
|
3
3
|
import { Card } from '@masterteam/components/card';
|
|
4
4
|
import { StructureBuilder } from '@masterteam/structure-builder';
|
|
5
5
|
import { Action, Selector, State, Store, select } from '@ngxs/store';
|
|
@@ -17,6 +17,8 @@ import { Button } from '@masterteam/components/button';
|
|
|
17
17
|
import * as i2 from '@jsverse/transloco';
|
|
18
18
|
import { TranslocoService, TranslocoModule } from '@jsverse/transloco';
|
|
19
19
|
import { ConfirmationService } from '@masterteam/components/confirmation';
|
|
20
|
+
import { NotificationTemplate, NotificationFacade } from '@masterteam/notification';
|
|
21
|
+
import { ModalService } from '@masterteam/components/modal';
|
|
20
22
|
|
|
21
23
|
class SetModuleInfo {
|
|
22
24
|
moduleType;
|
|
@@ -921,9 +923,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
921
923
|
|
|
922
924
|
// shared/models/api.model.ts
|
|
923
925
|
|
|
926
|
+
class WorkflowNotificationsDrawer {
|
|
927
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkflowNotificationsDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
928
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: WorkflowNotificationsDrawer, isStandalone: true, selector: "mt-workflow-notifications-drawer", ngImport: i0, template: "<div class=\"overflow-hidden h-full w-full\">\r\n <div\r\n class=\"flex-1 flex justify-center items-start p-4 h-full overflow-y-auto\"\r\n >\r\n <div class=\"w-2/3\">\r\n <mt-card headless>\r\n <mt-notification-template />\r\n </mt-card>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: NotificationTemplate, selector: "mt-notification-template" }] });
|
|
929
|
+
}
|
|
930
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkflowNotificationsDrawer, decorators: [{
|
|
931
|
+
type: Component,
|
|
932
|
+
args: [{ selector: 'mt-workflow-notifications-drawer', imports: [Card, NotificationTemplate, Card], template: "<div class=\"overflow-hidden h-full w-full\">\r\n <div\r\n class=\"flex-1 flex justify-center items-start p-4 h-full overflow-y-auto\"\r\n >\r\n <div class=\"w-2/3\">\r\n <mt-card headless>\r\n <mt-notification-template />\r\n </mt-card>\r\n </div>\r\n </div>\r\n</div>\r\n" }]
|
|
933
|
+
}] });
|
|
934
|
+
|
|
924
935
|
class WorkflowBuilder {
|
|
925
936
|
workflowFacade = inject(WorkflowFacade);
|
|
937
|
+
notificationFacade = inject(NotificationFacade);
|
|
926
938
|
transloco = inject(TranslocoService);
|
|
939
|
+
modal = inject(ModalService);
|
|
940
|
+
// Main tabs for Workflow and Notification
|
|
941
|
+
mainTab = signal('workflow', ...(ngDevMode ? [{ debugName: "mainTab" }] : []));
|
|
942
|
+
mainTabsList = [
|
|
943
|
+
{
|
|
944
|
+
label: this.transloco.translate('workflow.builder.workflow'),
|
|
945
|
+
value: 'workflow',
|
|
946
|
+
},
|
|
947
|
+
{
|
|
948
|
+
label: this.transloco.translate('workflow.builder.notification'),
|
|
949
|
+
value: 'notification',
|
|
950
|
+
},
|
|
951
|
+
];
|
|
927
952
|
groups = this.workflowFacade.groups;
|
|
928
953
|
roles = this.workflowFacade.roles;
|
|
929
954
|
workflows = this.workflowFacade.workflows;
|
|
@@ -977,16 +1002,27 @@ class WorkflowBuilder {
|
|
|
977
1002
|
type: 'boolean',
|
|
978
1003
|
},
|
|
979
1004
|
], ...(ngDevMode ? [{ debugName: "propertiesColumns" }] : []));
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
1005
|
+
// Dynamic tabs list - notification tab only shown for non-initial nodes
|
|
1006
|
+
tabsList = computed(() => {
|
|
1007
|
+
const baseTabs = [
|
|
1008
|
+
{
|
|
1009
|
+
label: this.transloco.translate('workflow.builder.tabSettings'),
|
|
1010
|
+
value: 'tab1',
|
|
1011
|
+
},
|
|
1012
|
+
{
|
|
1013
|
+
label: this.transloco.translate('workflow.builder.tabProperties'),
|
|
1014
|
+
value: 'tab2',
|
|
1015
|
+
},
|
|
1016
|
+
];
|
|
1017
|
+
// Add notification tab only for non-initial nodes
|
|
1018
|
+
if (!this.isEditingInitialNode()) {
|
|
1019
|
+
baseTabs.push({
|
|
1020
|
+
label: this.transloco.translate('workflow.builder.notification'),
|
|
1021
|
+
value: 'tab3',
|
|
1022
|
+
});
|
|
1023
|
+
}
|
|
1024
|
+
return baseTabs;
|
|
1025
|
+
}, ...(ngDevMode ? [{ debugName: "tabsList" }] : []));
|
|
990
1026
|
availableNodes = [
|
|
991
1027
|
{
|
|
992
1028
|
id: 'FormStep',
|
|
@@ -1024,7 +1060,7 @@ class WorkflowBuilder {
|
|
|
1024
1060
|
};
|
|
1025
1061
|
// Approver section with dynamic options
|
|
1026
1062
|
approverSection = computed(() => ({
|
|
1027
|
-
key: '
|
|
1063
|
+
key: 'approver',
|
|
1028
1064
|
type: 'header',
|
|
1029
1065
|
label: this.transloco.translate('workflow.builder.approver'),
|
|
1030
1066
|
headerClass: 'rounded-t-xl bg-slate-50 px-4 py-3 text-sm font-semibold text-slate-900 border border-slate-200 border-b-0',
|
|
@@ -1167,6 +1203,7 @@ class WorkflowBuilder {
|
|
|
1167
1203
|
condition: (node) => !node.isInitial,
|
|
1168
1204
|
},
|
|
1169
1205
|
], ...(ngDevMode ? [{ debugName: "nodeActions" }] : []));
|
|
1206
|
+
showHideControl = new FormControl(false);
|
|
1170
1207
|
constructor() {
|
|
1171
1208
|
// Effect to initialize isPublished from workflow.isPublished
|
|
1172
1209
|
effect(() => {
|
|
@@ -1200,29 +1237,39 @@ class WorkflowBuilder {
|
|
|
1200
1237
|
};
|
|
1201
1238
|
});
|
|
1202
1239
|
this._propertiesTableData.set(updatedTableData);
|
|
1240
|
+
this.showHideControl.patchValue(step.hasNotification ?? false);
|
|
1203
1241
|
}
|
|
1204
1242
|
});
|
|
1205
1243
|
}
|
|
1206
|
-
|
|
1207
|
-
|
|
1244
|
+
// Handle main tab change (Workflow/Notification)
|
|
1245
|
+
onMainTabChange(tab) {
|
|
1246
|
+
this.mainTab.set(tab);
|
|
1247
|
+
if (tab === 'notification') {
|
|
1248
|
+
const workflowId = this.workflow()?.id;
|
|
1249
|
+
if (workflowId) {
|
|
1250
|
+
this.notificationFacade.setModuleInfo('request', workflowId);
|
|
1251
|
+
this.notificationFacade.loadAllData();
|
|
1252
|
+
}
|
|
1253
|
+
}
|
|
1254
|
+
}
|
|
1255
|
+
// Handle node dialog tab change (Settings/Properties/Notification)
|
|
1256
|
+
onNodeDialogTabChange(tab) {
|
|
1257
|
+
this.selectedTab.set(tab);
|
|
1208
1258
|
}
|
|
1209
1259
|
onPublishToggle(isPublished) {
|
|
1210
1260
|
// Prevent publishing if workflow is not valid
|
|
1211
1261
|
if (isPublished && !this.isFlowValid()) {
|
|
1212
|
-
console.warn('Cannot publish: Workflow is not valid');
|
|
1213
1262
|
this.isPublished.set(false);
|
|
1214
1263
|
return;
|
|
1215
1264
|
}
|
|
1216
1265
|
this.workflowFacade.publishWorkflow(isPublished).subscribe({
|
|
1217
|
-
error: (
|
|
1218
|
-
console.error('Failed to update workflow publish status:', error);
|
|
1266
|
+
error: () => {
|
|
1219
1267
|
// Revert the toggle on error
|
|
1220
1268
|
this.isPublished.set(!isPublished);
|
|
1221
1269
|
},
|
|
1222
1270
|
});
|
|
1223
1271
|
}
|
|
1224
1272
|
onWorkflowChange(workflowId) {
|
|
1225
|
-
console.log('Workflow changed to:', workflowId);
|
|
1226
1273
|
this.workflowFacade.selectWorkflow(workflowId);
|
|
1227
1274
|
}
|
|
1228
1275
|
clearForm() {
|
|
@@ -1248,7 +1295,6 @@ class WorkflowBuilder {
|
|
|
1248
1295
|
this._propertiesTableData.set(resetTableData);
|
|
1249
1296
|
// Reset to first tab
|
|
1250
1297
|
this.selectedTab.set('tab1');
|
|
1251
|
-
console.log('Form and properties cleared for new step');
|
|
1252
1298
|
}
|
|
1253
1299
|
onPropertyCellChange(event) {
|
|
1254
1300
|
if (event.type !== 'boolean')
|
|
@@ -1265,7 +1311,6 @@ class WorkflowBuilder {
|
|
|
1265
1311
|
}
|
|
1266
1312
|
}
|
|
1267
1313
|
onStructureAction(event) {
|
|
1268
|
-
console.log('Structure action received:', event);
|
|
1269
1314
|
switch (event.action) {
|
|
1270
1315
|
case 'createNode':
|
|
1271
1316
|
if (event.data) {
|
|
@@ -1286,16 +1331,10 @@ class WorkflowBuilder {
|
|
|
1286
1331
|
targetValue: formValue.targetType === '1' ? formValue.group : formValue.role,
|
|
1287
1332
|
sla: formValue.sla || 0,
|
|
1288
1333
|
properties: propertiesPayload,
|
|
1334
|
+
hasNotification: this.showHideControl.value,
|
|
1289
1335
|
};
|
|
1290
1336
|
// Create step via facade
|
|
1291
|
-
this.workflowFacade.createStep(stepPayload)
|
|
1292
|
-
next: () => {
|
|
1293
|
-
console.log('Step created successfully:', stepPayload);
|
|
1294
|
-
},
|
|
1295
|
-
error: (error) => {
|
|
1296
|
-
console.error('Failed to create step:', error);
|
|
1297
|
-
},
|
|
1298
|
-
});
|
|
1337
|
+
this.workflowFacade.createStep(stepPayload);
|
|
1299
1338
|
}
|
|
1300
1339
|
break;
|
|
1301
1340
|
case 'startUpdating':
|
|
@@ -1307,6 +1346,10 @@ class WorkflowBuilder {
|
|
|
1307
1346
|
this.isEditingInitialNode.set(!!event.data.isInitial);
|
|
1308
1347
|
// Load step data
|
|
1309
1348
|
this.workflowFacade.loadStep(stepId);
|
|
1349
|
+
if (stepId) {
|
|
1350
|
+
this.notificationFacade.setModuleInfo('step', stepId);
|
|
1351
|
+
this.notificationFacade.loadAllData();
|
|
1352
|
+
}
|
|
1310
1353
|
}
|
|
1311
1354
|
break;
|
|
1312
1355
|
case 'startCreating':
|
|
@@ -1334,18 +1377,10 @@ class WorkflowBuilder {
|
|
|
1334
1377
|
targetValue: formValue.targetType === '1' ? formValue.group : formValue.role,
|
|
1335
1378
|
sla: formValue.sla || event.data.sla,
|
|
1336
1379
|
properties: propertiesPayload,
|
|
1380
|
+
hasNotification: this.showHideControl.value,
|
|
1337
1381
|
};
|
|
1338
1382
|
// Update step via facade, passing isInitial flag
|
|
1339
|
-
this.workflowFacade
|
|
1340
|
-
.updateStep(stepId, stepPayload, isInitial)
|
|
1341
|
-
.subscribe({
|
|
1342
|
-
next: () => {
|
|
1343
|
-
console.log('Step updated successfully:', stepPayload);
|
|
1344
|
-
},
|
|
1345
|
-
error: (error) => {
|
|
1346
|
-
console.error('Failed to update step:', error);
|
|
1347
|
-
},
|
|
1348
|
-
});
|
|
1383
|
+
this.workflowFacade.updateStep(stepId, stepPayload, isInitial);
|
|
1349
1384
|
}
|
|
1350
1385
|
break;
|
|
1351
1386
|
case 'deleteNode':
|
|
@@ -1354,14 +1389,7 @@ class WorkflowBuilder {
|
|
|
1354
1389
|
this.confirmationService.confirmDelete({
|
|
1355
1390
|
type: 'dialog',
|
|
1356
1391
|
accept: () => {
|
|
1357
|
-
this.workflowFacade.deleteStep(nodeIdToDelete)
|
|
1358
|
-
next: () => {
|
|
1359
|
-
console.log('Node deleted:', nodeIdToDelete);
|
|
1360
|
-
},
|
|
1361
|
-
error: (error) => {
|
|
1362
|
-
console.error('Failed to delete node:', error);
|
|
1363
|
-
},
|
|
1364
|
-
});
|
|
1392
|
+
this.workflowFacade.deleteStep(nodeIdToDelete);
|
|
1365
1393
|
},
|
|
1366
1394
|
reject: () => { },
|
|
1367
1395
|
});
|
|
@@ -1376,14 +1404,7 @@ class WorkflowBuilder {
|
|
|
1376
1404
|
priority: event.data.priority ?? 1,
|
|
1377
1405
|
formula: event.data.formula ?? [],
|
|
1378
1406
|
};
|
|
1379
|
-
this.workflowFacade.createConnection(connectionPayload)
|
|
1380
|
-
next: () => {
|
|
1381
|
-
console.log('Connection created:', event.data);
|
|
1382
|
-
},
|
|
1383
|
-
error: (error) => {
|
|
1384
|
-
console.error('Failed to create connection:', error);
|
|
1385
|
-
},
|
|
1386
|
-
});
|
|
1407
|
+
this.workflowFacade.createConnection(connectionPayload);
|
|
1387
1408
|
}
|
|
1388
1409
|
break;
|
|
1389
1410
|
case 'updateConnection':
|
|
@@ -1396,38 +1417,36 @@ class WorkflowBuilder {
|
|
|
1396
1417
|
priority: event.data.priority ?? 1,
|
|
1397
1418
|
formula: event.data.formula ?? [],
|
|
1398
1419
|
};
|
|
1399
|
-
this.workflowFacade
|
|
1400
|
-
.updateConnection(connectionId, updatePayload)
|
|
1401
|
-
.subscribe({
|
|
1402
|
-
next: () => {
|
|
1403
|
-
console.log('Connection updated:', event.data);
|
|
1404
|
-
},
|
|
1405
|
-
error: (error) => {
|
|
1406
|
-
console.error('Failed to update connection:', error);
|
|
1407
|
-
},
|
|
1408
|
-
});
|
|
1420
|
+
this.workflowFacade.updateConnection(connectionId, updatePayload);
|
|
1409
1421
|
}
|
|
1410
1422
|
break;
|
|
1411
1423
|
case 'deleteConnection':
|
|
1412
1424
|
if (event.data) {
|
|
1413
1425
|
const connectionIdToDelete = event.data.id;
|
|
1414
1426
|
// Delete connection from store
|
|
1415
|
-
this.workflowFacade.deleteConnection(connectionIdToDelete)
|
|
1416
|
-
next: () => {
|
|
1417
|
-
console.log('Connection deleted:', connectionIdToDelete);
|
|
1418
|
-
},
|
|
1419
|
-
error: (error) => {
|
|
1420
|
-
console.error('Failed to delete connection:', error);
|
|
1421
|
-
},
|
|
1422
|
-
});
|
|
1427
|
+
this.workflowFacade.deleteConnection(connectionIdToDelete);
|
|
1423
1428
|
}
|
|
1424
1429
|
break;
|
|
1425
1430
|
default:
|
|
1426
|
-
|
|
1431
|
+
break;
|
|
1427
1432
|
}
|
|
1428
1433
|
}
|
|
1434
|
+
openNotificationsModal() {
|
|
1435
|
+
const notificationsDialogRef = this.modal.openModal(WorkflowNotificationsDrawer, 'drawer', {
|
|
1436
|
+
header: this.transloco.translate('workflow.builder.notification'),
|
|
1437
|
+
styleClass: '!w-[calc(100%-25rem)] !absolute',
|
|
1438
|
+
position: 'start',
|
|
1439
|
+
modal: true,
|
|
1440
|
+
appendTo: '#page-content',
|
|
1441
|
+
inputValues: {},
|
|
1442
|
+
});
|
|
1443
|
+
notificationsDialogRef.onClose.subscribe((result) => {
|
|
1444
|
+
if (result?.saved) {
|
|
1445
|
+
}
|
|
1446
|
+
});
|
|
1447
|
+
}
|
|
1429
1448
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkflowBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1430
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkflowBuilder, isStandalone: true, selector: "mt-workflow-builder", ngImport: i0, template: "<div class=\"h-full relative\" id=\"workflow-builder-card\">\n @if (!loading()) {\n <mt-structure-builder\n class=\"flex-1\"\n [availableNodes]=\"availableNodes\"\n [connectionForm]=\"connectionForm()\"\n [nodeActions]=\"nodeActions()\"\n (nodeActionsEvent)=\"onNodeActionsEvent($event)\"\n [nodes]=\"steps()\"\n [connections]=\"connections()\"\n (action)=\"onStructureAction($event)\"\n [addModalType]=\"'drawer'\"\n [addModalStyleClass]=\"'!w-[25rem] !absolute !shadow-none'\"\n [updateModalStyleClass]=\"'!w-[25rem] !absolute !shadow-none'\"\n [addModalHeader]=\"'workflow.builder.addStep' | transloco\"\n [updateModalHeader]=\"'workflow.builder.editStep' | transloco\"\n [appendTo]=\"'workflow-builder-card'\"\n [nodeFields]=\"nodeFields()\"\n >\n <div flowContent>\n <!-- <div class=\"absolute top-4 left-4 z-10\">\n @if (workflows().length > 1) {\n <div class=\"flex flex-col gap-2 w-80\">\n <mt-card>\n <mt-select-field\n [options]=\"workflows()\"\n [ngModel]=\"selectedWorkflowId()\"\n (ngModelChange)=\"onWorkflowChange($event)\"\n optionLabel=\"displayName\"\n optionValue=\"id\"\n placeholder=\"Select Workflow\"\n />\n </mt-card>\n </div>\n }\n </div> -->\n <div class=\"absolute top-4 end-4 z-10\">\n <div class=\"flex flex-col gap-2 w-80\">\n <mt-card>\n <div class=\"flex items-center gap-10\">\n <div class=\"flex items-center gap-2\">\n <mt-button [severity]=\"'secondary'\" icon=\"dev.dataflow-01\" />\n <label>{{\n \"workflow.builder.enableWorkflow\" | transloco\n }}</label>\n </div>\n\n <mt-toggle-field\n [ngModel]=\"isPublished()\"\n (ngModelChange)=\"onPublishToggle($event)\"\n [disabled]=\"isPublishDisabled()\"\n ></mt-toggle-field>\n </div>\n </mt-card>\n </div>\n </div>\n </div>\n\n <ng-template\n #nodeDialog\n let-close=\"close\"\n let-save=\"save\"\n let-node=\"node\"\n >\n <div class=\"p-4\">\n @if (loadingStep()) {\n <!-- Loading skeleton -->\n <div class=\"space-y-4\">\n <!-- Tabs skeleton -->\n <div class=\"flex gap-2 mb-4\">\n <p-skeleton\n width=\"6rem\"\n height=\"2.5rem\"\n borderRadius=\"0.5rem\"\n ></p-skeleton>\n <p-skeleton\n width=\"8rem\"\n height=\"2.5rem\"\n borderRadius=\"0.5rem\"\n ></p-skeleton>\n </div>\n\n <!-- Form fields skeleton -->\n <div class=\"space-y-4\">\n <div>\n <p-skeleton\n width=\"8rem\"\n height=\"1rem\"\n styleClass=\"mb-2\"\n ></p-skeleton>\n <p-skeleton\n width=\"100%\"\n height=\"2.5rem\"\n borderRadius=\"0.5rem\"\n ></p-skeleton>\n </div>\n <div>\n <p-skeleton\n width=\"8rem\"\n height=\"1rem\"\n styleClass=\"mb-2\"\n ></p-skeleton>\n <p-skeleton\n width=\"100%\"\n height=\"2.5rem\"\n borderRadius=\"0.5rem\"\n ></p-skeleton>\n </div>\n <div>\n <p-skeleton\n width=\"10rem\"\n height=\"1rem\"\n styleClass=\"mb-2\"\n ></p-skeleton>\n <p-skeleton\n width=\"100%\"\n height=\"3rem\"\n borderRadius=\"0.5rem\"\n ></p-skeleton>\n </div>\n <div>\n <p-skeleton\n width=\"6rem\"\n height=\"1rem\"\n styleClass=\"mb-2\"\n ></p-skeleton>\n <p-skeleton\n width=\"100%\"\n height=\"2.5rem\"\n borderRadius=\"0.5rem\"\n ></p-skeleton>\n </div>\n <div>\n <p-skeleton\n width=\"4rem\"\n height=\"1rem\"\n styleClass=\"mb-2\"\n ></p-skeleton>\n <p-skeleton\n width=\"100%\"\n height=\"2.5rem\"\n borderRadius=\"0.5rem\"\n ></p-skeleton>\n </div>\n </div>\n </div>\n } @else {\n <!-- Actual content -->\n <mt-tabs\n [(active)]=\"selectedTab\"\n [options]=\"tabsList\"\n fluid\n size=\"large\"\n ></mt-tabs>\n @switch (selectedTab()) {\n @case (\"tab1\") {\n <div class=\"mt-4\">\n <mt-dynamic-form\n [formConfig]=\"nodeForm()\"\n [formControl]=\"nodeFormControl\"\n ></mt-dynamic-form>\n </div>\n }\n @case (\"tab2\") {\n <div class=\"mt-4\">\n <mt-table\n [data]=\"propertiesTableData()\"\n [columns]=\"propertiesColumns()\"\n [selectableRows]=\"false\"\n [showGridlines]=\"true\"\n [stripedRows]=\"true\"\n (cellChange)=\"onPropertyCellChange($event)\"\n ></mt-table>\n </div>\n }\n }\n }\n </div>\n </ng-template>\n </mt-structure-builder>\n }\n</div>\n", dependencies: [{ kind: "component", type: StructureBuilder, selector: "mt-structure-builder", inputs: ["availableNodes", "nodeForm", "connectionForm", "nodeActions", "nodeFields", "isAutoLayout", "addModalType", "updateModalType", "addModalStyleClass", "updateModalStyleClass", "addModalHeader", "updateModalHeader", "appendTo", "nodes", "connections"], outputs: ["nodeActionsEvent", "action", "nodesChange", "connectionsChange"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "generalSearch", "showFilters", "loading", "updating", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required"], outputs: ["onChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
|
|
1449
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: WorkflowBuilder, isStandalone: true, selector: "mt-workflow-builder", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'workflow.builder'\">\r\n <div class=\"h-full flex flex-col\" id=\"workflow-builder-card\">\r\n <!-- Main Tabs at top center -->\r\n <div class=\"flex justify-center w-full py-2\">\r\n <mt-tabs\r\n [active]=\"mainTab()\"\r\n (activeChange)=\"onMainTabChange($event)\"\r\n [options]=\"mainTabsList\"\r\n size=\"large\"\r\n ></mt-tabs>\r\n </div>\r\n @switch (mainTab()) {\r\n @case (\"workflow\") {\r\n @if (!loading()) {\r\n <mt-structure-builder\r\n class=\"flex-1\"\r\n [availableNodes]=\"availableNodes\"\r\n [connectionForm]=\"connectionForm()\"\r\n [nodeActions]=\"nodeActions()\"\r\n [nodes]=\"steps()\"\r\n [connections]=\"connections()\"\r\n (action)=\"onStructureAction($event)\"\r\n [addModalType]=\"'drawer'\"\r\n [addModalStyleClass]=\"'!w-[25rem] !absolute !shadow-none'\"\r\n [updateModalStyleClass]=\"'!w-[25rem] !absolute !shadow-none'\"\r\n [addModalHeader]=\"'workflow.builder.addStep' | transloco\"\r\n [updateModalHeader]=\"'workflow.builder.editStep' | transloco\"\r\n [appendTo]=\"'workflow-builder-card'\"\r\n [nodeFields]=\"nodeFields()\"\r\n >\r\n <div flowContent>\r\n <div class=\"absolute top-4 end-4 z-10\">\r\n <div class=\"flex flex-col gap-2 w-80\">\r\n <mt-card>\r\n <div class=\"flex items-center gap-10\">\r\n <div class=\"flex items-center gap-2\">\r\n <mt-button\r\n [severity]=\"'secondary'\"\r\n icon=\"dev.dataflow-01\"\r\n />\r\n <label>{{\r\n \"workflow.builder.enableWorkflow\" | transloco\r\n }}</label>\r\n </div>\r\n <mt-toggle-field\r\n [ngModel]=\"isPublished()\"\r\n (ngModelChange)=\"onPublishToggle($event)\"\r\n [disabled]=\"isPublishDisabled()\"\r\n ></mt-toggle-field>\r\n </div>\r\n </mt-card>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-template\r\n #nodeDialog\r\n let-close=\"close\"\r\n let-save=\"save\"\r\n let-node=\"node\"\r\n let-drawerController=\"drawerController\"\r\n >\r\n <div class=\"p-4\">\r\n @if (loadingStep()) {\r\n <!-- Loading skeleton -->\r\n <div class=\"space-y-4\">\r\n <!-- Tabs skeleton -->\r\n <div class=\"flex gap-2 mb-4\">\r\n <p-skeleton\r\n width=\"6rem\"\r\n height=\"2.5rem\"\r\n borderRadius=\"0.5rem\"\r\n ></p-skeleton>\r\n <p-skeleton\r\n width=\"8rem\"\r\n height=\"2.5rem\"\r\n borderRadius=\"0.5rem\"\r\n ></p-skeleton>\r\n </div>\r\n <!-- Form fields skeleton -->\r\n <div class=\"space-y-4\">\r\n <div>\r\n <p-skeleton\r\n width=\"8rem\"\r\n height=\"1rem\"\r\n styleClass=\"mb-2\"\r\n ></p-skeleton>\r\n <p-skeleton\r\n width=\"100%\"\r\n height=\"2.5rem\"\r\n borderRadius=\"0.5rem\"\r\n ></p-skeleton>\r\n </div>\r\n <div>\r\n <p-skeleton\r\n width=\"8rem\"\r\n height=\"1rem\"\r\n styleClass=\"mb-2\"\r\n ></p-skeleton>\r\n <p-skeleton\r\n width=\"100%\"\r\n height=\"2.5rem\"\r\n borderRadius=\"0.5rem\"\r\n ></p-skeleton>\r\n </div>\r\n <div>\r\n <p-skeleton\r\n width=\"10rem\"\r\n height=\"1rem\"\r\n styleClass=\"mb-2\"\r\n ></p-skeleton>\r\n <p-skeleton\r\n width=\"100%\"\r\n height=\"3rem\"\r\n borderRadius=\"0.5rem\"\r\n ></p-skeleton>\r\n </div>\r\n <div>\r\n <p-skeleton\r\n width=\"6rem\"\r\n height=\"1rem\"\r\n styleClass=\"mb-2\"\r\n ></p-skeleton>\r\n <p-skeleton\r\n width=\"100%\"\r\n height=\"2.5rem\"\r\n borderRadius=\"0.5rem\"\r\n ></p-skeleton>\r\n </div>\r\n <div>\r\n <p-skeleton\r\n width=\"4rem\"\r\n height=\"1rem\"\r\n styleClass=\"mb-2\"\r\n ></p-skeleton>\r\n <p-skeleton\r\n width=\"100%\"\r\n height=\"2.5rem\"\r\n borderRadius=\"0.5rem\"\r\n ></p-skeleton>\r\n </div>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Actual content -->\r\n <mt-tabs\r\n [active]=\"selectedTab()\"\r\n (activeChange)=\"onNodeDialogTabChange($event)\"\r\n [options]=\"tabsList()\"\r\n size=\"large\"\r\n ></mt-tabs>\r\n @switch (selectedTab()) {\r\n @case (\"tab1\") {\r\n <div class=\"mt-4\">\r\n <mt-dynamic-form\r\n [formConfig]=\"nodeForm()\"\r\n [formControl]=\"nodeFormControl\"\r\n ></mt-dynamic-form>\r\n </div>\r\n }\r\n @case (\"tab2\") {\r\n <div class=\"mt-4\">\r\n <mt-table\r\n [data]=\"propertiesTableData()\"\r\n [columns]=\"propertiesColumns()\"\r\n [selectableRows]=\"false\"\r\n [showGridlines]=\"true\"\r\n [stripedRows]=\"true\"\r\n (cellChange)=\"onPropertyCellChange($event)\"\r\n ></mt-table>\r\n </div>\r\n }\r\n @case (\"tab3\") {\r\n <div class=\"mt-4\">\r\n <mt-toggle-field\r\n toggleShape=\"card\"\r\n [label]=\"t('show-hide')\"\r\n [descriptionCard]=\"t('show-hide-notifications')\"\r\n icon=\"general.eye\"\r\n [formControl]=\"showHideControl\"\r\n >\r\n <ng-template #toggleCardBottom>\r\n @if (showHideControl.value) {\r\n <div class=\"mt-3\">\r\n <mt-button\r\n [label]=\"t('configureNotifications')\"\r\n size=\"small\"\r\n (onClick)=\"openNotificationsModal()\"\r\n ></mt-button>\r\n </div>\r\n }\r\n </ng-template>\r\n </mt-toggle-field>\r\n </div>\r\n }\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n </mt-structure-builder>\r\n }\r\n }\r\n @case (\"notification\") {\r\n <div class=\"flex-1 flex justify-center items-start p-4\">\r\n <div class=\"w-1/2\">\r\n <mt-card [title]=\"'Notifications'\">\r\n <mt-notification-template />\r\n </mt-card>\r\n </div>\r\n </div>\r\n }\r\n }\r\n </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "component", type: StructureBuilder, selector: "mt-structure-builder", inputs: ["availableNodes", "nodeForm", "connectionForm", "nodeActions", "nodeFields", "isAutoLayout", "addModalType", "updateModalType", "addModalStyleClass", "updateModalStyleClass", "addModalHeader", "updateModalHeader", "appendTo", "nodes", "connections"], outputs: ["nodeActionsEvent", "action", "nodesChange", "connectionsChange"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "generalSearch", "showFilters", "loading", "updating", "lazy", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i2.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: NotificationTemplate, selector: "mt-notification-template" }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
|
|
1431
1450
|
}
|
|
1432
1451
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: WorkflowBuilder, decorators: [{
|
|
1433
1452
|
type: Component,
|
|
@@ -1443,8 +1462,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
1443
1462
|
ToggleField,
|
|
1444
1463
|
Button,
|
|
1445
1464
|
TranslocoModule,
|
|
1465
|
+
NotificationTemplate,
|
|
1446
1466
|
// SelectField,
|
|
1447
|
-
], host: {}, template: "<div class=\"h-full
|
|
1467
|
+
], host: {}, template: "<ng-container *transloco=\"let t; prefix: 'workflow.builder'\">\r\n <div class=\"h-full flex flex-col\" id=\"workflow-builder-card\">\r\n <!-- Main Tabs at top center -->\r\n <div class=\"flex justify-center w-full py-2\">\r\n <mt-tabs\r\n [active]=\"mainTab()\"\r\n (activeChange)=\"onMainTabChange($event)\"\r\n [options]=\"mainTabsList\"\r\n size=\"large\"\r\n ></mt-tabs>\r\n </div>\r\n @switch (mainTab()) {\r\n @case (\"workflow\") {\r\n @if (!loading()) {\r\n <mt-structure-builder\r\n class=\"flex-1\"\r\n [availableNodes]=\"availableNodes\"\r\n [connectionForm]=\"connectionForm()\"\r\n [nodeActions]=\"nodeActions()\"\r\n [nodes]=\"steps()\"\r\n [connections]=\"connections()\"\r\n (action)=\"onStructureAction($event)\"\r\n [addModalType]=\"'drawer'\"\r\n [addModalStyleClass]=\"'!w-[25rem] !absolute !shadow-none'\"\r\n [updateModalStyleClass]=\"'!w-[25rem] !absolute !shadow-none'\"\r\n [addModalHeader]=\"'workflow.builder.addStep' | transloco\"\r\n [updateModalHeader]=\"'workflow.builder.editStep' | transloco\"\r\n [appendTo]=\"'workflow-builder-card'\"\r\n [nodeFields]=\"nodeFields()\"\r\n >\r\n <div flowContent>\r\n <div class=\"absolute top-4 end-4 z-10\">\r\n <div class=\"flex flex-col gap-2 w-80\">\r\n <mt-card>\r\n <div class=\"flex items-center gap-10\">\r\n <div class=\"flex items-center gap-2\">\r\n <mt-button\r\n [severity]=\"'secondary'\"\r\n icon=\"dev.dataflow-01\"\r\n />\r\n <label>{{\r\n \"workflow.builder.enableWorkflow\" | transloco\r\n }}</label>\r\n </div>\r\n <mt-toggle-field\r\n [ngModel]=\"isPublished()\"\r\n (ngModelChange)=\"onPublishToggle($event)\"\r\n [disabled]=\"isPublishDisabled()\"\r\n ></mt-toggle-field>\r\n </div>\r\n </mt-card>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-template\r\n #nodeDialog\r\n let-close=\"close\"\r\n let-save=\"save\"\r\n let-node=\"node\"\r\n let-drawerController=\"drawerController\"\r\n >\r\n <div class=\"p-4\">\r\n @if (loadingStep()) {\r\n <!-- Loading skeleton -->\r\n <div class=\"space-y-4\">\r\n <!-- Tabs skeleton -->\r\n <div class=\"flex gap-2 mb-4\">\r\n <p-skeleton\r\n width=\"6rem\"\r\n height=\"2.5rem\"\r\n borderRadius=\"0.5rem\"\r\n ></p-skeleton>\r\n <p-skeleton\r\n width=\"8rem\"\r\n height=\"2.5rem\"\r\n borderRadius=\"0.5rem\"\r\n ></p-skeleton>\r\n </div>\r\n <!-- Form fields skeleton -->\r\n <div class=\"space-y-4\">\r\n <div>\r\n <p-skeleton\r\n width=\"8rem\"\r\n height=\"1rem\"\r\n styleClass=\"mb-2\"\r\n ></p-skeleton>\r\n <p-skeleton\r\n width=\"100%\"\r\n height=\"2.5rem\"\r\n borderRadius=\"0.5rem\"\r\n ></p-skeleton>\r\n </div>\r\n <div>\r\n <p-skeleton\r\n width=\"8rem\"\r\n height=\"1rem\"\r\n styleClass=\"mb-2\"\r\n ></p-skeleton>\r\n <p-skeleton\r\n width=\"100%\"\r\n height=\"2.5rem\"\r\n borderRadius=\"0.5rem\"\r\n ></p-skeleton>\r\n </div>\r\n <div>\r\n <p-skeleton\r\n width=\"10rem\"\r\n height=\"1rem\"\r\n styleClass=\"mb-2\"\r\n ></p-skeleton>\r\n <p-skeleton\r\n width=\"100%\"\r\n height=\"3rem\"\r\n borderRadius=\"0.5rem\"\r\n ></p-skeleton>\r\n </div>\r\n <div>\r\n <p-skeleton\r\n width=\"6rem\"\r\n height=\"1rem\"\r\n styleClass=\"mb-2\"\r\n ></p-skeleton>\r\n <p-skeleton\r\n width=\"100%\"\r\n height=\"2.5rem\"\r\n borderRadius=\"0.5rem\"\r\n ></p-skeleton>\r\n </div>\r\n <div>\r\n <p-skeleton\r\n width=\"4rem\"\r\n height=\"1rem\"\r\n styleClass=\"mb-2\"\r\n ></p-skeleton>\r\n <p-skeleton\r\n width=\"100%\"\r\n height=\"2.5rem\"\r\n borderRadius=\"0.5rem\"\r\n ></p-skeleton>\r\n </div>\r\n </div>\r\n </div>\r\n } @else {\r\n <!-- Actual content -->\r\n <mt-tabs\r\n [active]=\"selectedTab()\"\r\n (activeChange)=\"onNodeDialogTabChange($event)\"\r\n [options]=\"tabsList()\"\r\n size=\"large\"\r\n ></mt-tabs>\r\n @switch (selectedTab()) {\r\n @case (\"tab1\") {\r\n <div class=\"mt-4\">\r\n <mt-dynamic-form\r\n [formConfig]=\"nodeForm()\"\r\n [formControl]=\"nodeFormControl\"\r\n ></mt-dynamic-form>\r\n </div>\r\n }\r\n @case (\"tab2\") {\r\n <div class=\"mt-4\">\r\n <mt-table\r\n [data]=\"propertiesTableData()\"\r\n [columns]=\"propertiesColumns()\"\r\n [selectableRows]=\"false\"\r\n [showGridlines]=\"true\"\r\n [stripedRows]=\"true\"\r\n (cellChange)=\"onPropertyCellChange($event)\"\r\n ></mt-table>\r\n </div>\r\n }\r\n @case (\"tab3\") {\r\n <div class=\"mt-4\">\r\n <mt-toggle-field\r\n toggleShape=\"card\"\r\n [label]=\"t('show-hide')\"\r\n [descriptionCard]=\"t('show-hide-notifications')\"\r\n icon=\"general.eye\"\r\n [formControl]=\"showHideControl\"\r\n >\r\n <ng-template #toggleCardBottom>\r\n @if (showHideControl.value) {\r\n <div class=\"mt-3\">\r\n <mt-button\r\n [label]=\"t('configureNotifications')\"\r\n size=\"small\"\r\n (onClick)=\"openNotificationsModal()\"\r\n ></mt-button>\r\n </div>\r\n }\r\n </ng-template>\r\n </mt-toggle-field>\r\n </div>\r\n }\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n </mt-structure-builder>\r\n }\r\n }\r\n @case (\"notification\") {\r\n <div class=\"flex-1 flex justify-center items-start p-4\">\r\n <div class=\"w-1/2\">\r\n <mt-card [title]=\"'Notifications'\">\r\n <mt-notification-template />\r\n </mt-card>\r\n </div>\r\n </div>\r\n }\r\n }\r\n </div>\r\n</ng-container>\r\n" }]
|
|
1448
1468
|
}], ctorParameters: () => [] });
|
|
1449
1469
|
|
|
1450
1470
|
// store/app.state.ts
|