@masterteam/workflow 0.0.32 → 0.0.34
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.
|
@@ -1673,6 +1673,12 @@ class WorkflowBuilder {
|
|
|
1673
1673
|
draftAppActionDescriptor = signal(null, ...(ngDevMode ? [{ debugName: "draftAppActionDescriptor" }] : /* istanbul ignore next */ []));
|
|
1674
1674
|
nodeFields = signal({
|
|
1675
1675
|
name: 'name.display',
|
|
1676
|
+
icon: 'icon',
|
|
1677
|
+
color: 'color',
|
|
1678
|
+
subtitle: 'subtitle',
|
|
1679
|
+
badge: 'badge',
|
|
1680
|
+
status: 'status',
|
|
1681
|
+
style: 'style',
|
|
1676
1682
|
}, ...(ngDevMode ? [{ debugName: "nodeFields" }] : /* istanbul ignore next */ []));
|
|
1677
1683
|
workflow = this.workflowFacade.workflow;
|
|
1678
1684
|
workflows = this.workflowFacade.workflows;
|
|
@@ -1790,8 +1796,9 @@ class WorkflowBuilder {
|
|
|
1790
1796
|
ar: 'خطوة النموذج',
|
|
1791
1797
|
},
|
|
1792
1798
|
targetType: '1',
|
|
1793
|
-
icon: '
|
|
1799
|
+
icon: 'file.clipboard-check',
|
|
1794
1800
|
color: '#0369A1',
|
|
1801
|
+
subtitle: this.transloco.translate('workflow.builder.stepTypeUserInput'),
|
|
1795
1802
|
},
|
|
1796
1803
|
...this.appActionDescriptors().map((descriptor) => ({
|
|
1797
1804
|
id: `AppActionStep:${descriptor.actionKey}`,
|
|
@@ -1810,8 +1817,10 @@ class WorkflowBuilder {
|
|
|
1810
1817
|
configSchemaJson: descriptor.configSchemaJson ?? null,
|
|
1811
1818
|
requiredContextKeys: descriptor.requiredContextKeys ?? [],
|
|
1812
1819
|
supportedScopes: descriptor.supportedScopes ?? [],
|
|
1813
|
-
icon: '
|
|
1820
|
+
icon: 'general.zap',
|
|
1814
1821
|
color: '#B45309',
|
|
1822
|
+
subtitle: this.transloco.translate('workflow.builder.stepTypeAppAction'),
|
|
1823
|
+
style: 'icon',
|
|
1815
1824
|
})),
|
|
1816
1825
|
], ...(ngDevMode ? [{ debugName: "availableNodes" }] : /* istanbul ignore next */ []));
|
|
1817
1826
|
nodeActions = signal([
|
|
@@ -1859,10 +1868,23 @@ class WorkflowBuilder {
|
|
|
1859
1868
|
toolbarTabs: ['functions', 'operators'],
|
|
1860
1869
|
isProcessBuilder: true,
|
|
1861
1870
|
}, ...(ngDevMode ? [{ debugName: "connectionFormulaConfig" }] : /* istanbul ignore next */ []));
|
|
1862
|
-
steps = computed(() => this.workflowFacade.steps().map((step) =>
|
|
1863
|
-
|
|
1864
|
-
|
|
1865
|
-
|
|
1871
|
+
steps = computed(() => this.workflowFacade.steps().map((step) => {
|
|
1872
|
+
const isAppAction = step.type === 'AppAction';
|
|
1873
|
+
return {
|
|
1874
|
+
...step,
|
|
1875
|
+
color: isAppAction ? '#B45309' : '#0369A1',
|
|
1876
|
+
icon: isAppAction
|
|
1877
|
+
? 'general.zap'
|
|
1878
|
+
: step.isInitial
|
|
1879
|
+
? 'map.flag-04'
|
|
1880
|
+
: 'file.clipboard-check',
|
|
1881
|
+
subtitle: this.getStepTypeLabel(step.type),
|
|
1882
|
+
badge: step.isInitial
|
|
1883
|
+
? this.transloco.translate('workflow.builder.initial')
|
|
1884
|
+
: null,
|
|
1885
|
+
style: isAppAction ? 'icon' : 'detail',
|
|
1886
|
+
};
|
|
1887
|
+
}), ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
|
|
1866
1888
|
connections = computed(() => this.workflowFacade.connections().map((connection) => ({
|
|
1867
1889
|
...connection,
|
|
1868
1890
|
from: connection.source,
|
|
@@ -2105,12 +2127,6 @@ class WorkflowBuilder {
|
|
|
2105
2127
|
getStepCardTitle(step) {
|
|
2106
2128
|
return this.resolveDisplayName(step.name);
|
|
2107
2129
|
}
|
|
2108
|
-
getStepCardSubtitle(step) {
|
|
2109
|
-
if (step.type !== 'AppAction') {
|
|
2110
|
-
return null;
|
|
2111
|
-
}
|
|
2112
|
-
return step.appAction?.displayName || step.appAction?.actionKey || null;
|
|
2113
|
-
}
|
|
2114
2130
|
getStepTypeLabel(type) {
|
|
2115
2131
|
return this.transloco.translate(type === 'AppAction'
|
|
2116
2132
|
? 'workflow.builder.stepTypeAppAction'
|
|
@@ -2482,7 +2498,7 @@ class WorkflowBuilder {
|
|
|
2482
2498
|
return '';
|
|
2483
2499
|
}
|
|
2484
2500
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkflowBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2485
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: WorkflowBuilder, isStandalone: true, selector: "mt-workflow-builder", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'workflow.builder'\">\n <div class=\"h-full flex flex-col\" id=\"workflow-builder-card\">\n <div class=\"flex justify-center w-full py-2\">\n <mt-tabs\n [active]=\"mainTab()\"\n (activeChange)=\"onMainTabChange($event)\"\n [options]=\"mainTabsList()\"\n size=\"large\"\n ></mt-tabs>\n </div>\n @switch (mainTab()) {\n @case (\"workflow\") {\n @if (!loading()) {\n <mt-structure-builder\n class=\"flex-1\"\n [availableNodes]=\"availableNodes()\"\n [availableNodesLabel]=\"t('stepTemplates')\"\n [connectionForm]=\"connectionForm()\"\n [connectionFormulaSchemaId]=\"connectionFormulaSchemaId()\"\n [connectionFormulaConfig]=\"connectionFormulaConfig()\"\n [nodeActions]=\"nodeActions()\"\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 [nodeDialogFooterConfig]=\"nodeDialogFooterConfig\"\n [appendTo]=\"'page-content'\"\n [nodeFields]=\"nodeFields()\"\n [availableTabsClass]=\"hasMultipleWorkflows() ? '!mt-28' : ''\"\n [layoutDirection]=\"'LR'\"\n >\n <div flowContent class=\"pointer-events-none\">\n @if (hasMultipleWorkflows()) {\n <div class=\"pointer-events-auto absolute top-4 start-4 z-10\">\n <mt-card class=\"w-64\">\n <mt-select-field\n [options]=\"workflows()\"\n optionLabel=\"name.display\"\n optionValue=\"id\"\n [ngModel]=\"selectedWorkflowId()\"\n (ngModelChange)=\"onWorkflowChange($event)\"\n class=\"mt-2\"\n />\n </mt-card>\n </div>\n }\n <div class=\"pointer-events-auto 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\n [severity]=\"'secondary'\"\n icon=\"dev.dataflow-01\"\n />\n <label>{{\n \"workflow.builder.enableWorkflow\" | transloco\n }}</label>\n </div>\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 <ng-template\n #nodeTemplate\n let-node\n let-actions=\"actions\"\n let-onAction=\"onAction\"\n >\n <div class=\"min-w-[17rem] overflow-hidden rounded-2xl bg-content\">\n <div class=\"space-y-3 px-4 py-4\">\n <span [class]=\"getStepBadgeClass(node.type)\">\n {{ getStepTypeLabel(node.type) }}\n </span>\n <div class=\"space-y-1\">\n <div class=\"text-base font-semibold text-surface-900\">\n {{ getStepCardTitle(node) }}\n </div>\n @if (getStepCardSubtitle(node); as subtitle) {\n <div class=\"text-sm text-muted-color\">\n {{ subtitle }}\n </div>\n }\n </div>\n </div>\n <div\n class=\"flex min-h-[3rem] items-center justify-end gap-2 border-t border-surface-200 bg-surface-50 px-4 py-3\"\n >\n @for (action of actions; track action.key) {\n <mt-button\n [size]=\"action?.size || 'small'\"\n [variant]=\"action?.variant\"\n [icon]=\"action?.icon\"\n [tooltip]=\"action?.tooltip\"\n [severity]=\"action?.severity\"\n (onClick)=\"onAction(action, node)\"\n >\n </mt-button>\n }\n </div>\n </div>\n </ng-template>\n <ng-template\n #nodeDialog\n let-close=\"close\"\n let-save=\"save\"\n let-node=\"node\"\n let-drawerController=\"drawerController\"\n >\n <div class=\"p-4\">\n @if (loadingStep()) {\n <div class=\"space-y-4\">\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 <!-- 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 <mt-tabs\n [active]=\"selectedTab()\"\n (activeChange)=\"onNodeDialogTabChange($event)\"\n [options]=\"tabsList()\"\n size=\"large\"\n ></mt-tabs>\n @switch (selectedTab()) {\n @case (\"tab1\") {\n <div class=\"mt-4 space-y-4\">\n <div class=\"grid gap-3\">\n <mt-text-field\n [label]=\"t('nameEnglish')\"\n [placeholder]=\"t('enterNameEnglish')\"\n [formControl]=\"stepForm.controls.nameEn\"\n [required]=\"true\"\n ></mt-text-field>\n <mt-text-field\n [label]=\"t('nameArabic')\"\n [placeholder]=\"t('enterNameArabic')\"\n [formControl]=\"stepForm.controls.nameAr\"\n [required]=\"true\"\n ></mt-text-field>\n </div>\n\n @if (currentStepType() === \"UserInput\") {\n @if (!isEditingInitialNode()) {\n <mt-card>\n <div class=\"space-y-4\">\n <div\n class=\"text-sm font-semibold text-surface-900\"\n >\n {{ t(\"approver\") }}\n </div>\n <mt-select-field\n [label]=\"t('approver')\"\n [options]=\"[\n { label: t('group'), value: '1' },\n { label: t('role'), value: '2' },\n ]\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [formControl]=\"stepForm.controls.targetType\"\n [required]=\"true\"\n ></mt-select-field>\n\n @if (\n stepForm.controls.targetType.value === \"1\"\n ) {\n <mt-select-field\n [label]=\"t('group')\"\n [placeholder]=\"t('selectGroup')\"\n [options]=\"groups()\"\n optionLabel=\"name.display\"\n optionValue=\"id\"\n [formControl]=\"stepForm.controls.group\"\n [required]=\"true\"\n ></mt-select-field>\n } @else {\n <mt-select-field\n [label]=\"t('role')\"\n [placeholder]=\"t('selectRole')\"\n [options]=\"roles()\"\n [group]=\"hasGroupedRoles()\"\n optionGroupLabel=\"label\"\n optionGroupChildren=\"items\"\n optionLabel=\"name.display\"\n optionValue=\"value\"\n [formControl]=\"stepForm.controls.role\"\n [required]=\"true\"\n ></mt-select-field>\n }\n\n <mt-number-field\n [label]=\"t('sla')\"\n [placeholder]=\"t('enterSla')\"\n [formControl]=\"stepForm.controls.sla\"\n [required]=\"true\"\n [min]=\"0\"\n ></mt-number-field>\n </div>\n </mt-card>\n }\n } @else {\n <mt-card>\n <div class=\"space-y-4\">\n <div class=\"grid gap-3\">\n <div class=\"grid gap-1\">\n <label\n class=\"text-sm font-medium text-surface-900\"\n >\n {{ t(\"app\") }}\n </label>\n <div\n class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-surface-700\"\n >\n {{ t(\"appLabelPplus\") }}\n </div>\n </div>\n\n <div class=\"grid gap-1\">\n <label\n class=\"text-sm font-medium text-surface-900\"\n >\n {{ t(\"action\") }}\n </label>\n <div\n class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-surface-900\"\n >\n {{ getAppActionDisplayName() }}\n </div>\n @if (getAppActionKey()) {\n <div class=\"text-xs text-muted-color\">\n {{ getAppActionKey() }}\n </div>\n }\n </div>\n\n @if (\n getAppActionDescription();\n as description\n ) {\n <div\n class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-muted-color\"\n >\n {{ description }}\n </div>\n }\n\n @if (\n getAppActionDiscoveryMessage();\n as discoveryMessage\n ) {\n <div\n class=\"rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700\"\n >\n {{ discoveryMessage }}\n </div>\n }\n </div>\n </div>\n </mt-card>\n\n <mt-card>\n <div class=\"space-y-4\">\n <div>\n <div\n class=\"text-sm font-semibold text-surface-900\"\n >\n {{ t(\"appActionConfiguration\") }}\n </div>\n <div class=\"mt-1 text-sm text-muted-color\">\n {{ t(\"appActionConfigurationDescription\") }}\n </div>\n </div>\n\n @if (\n loadingAppActionDetail() &&\n appActionSettingsForm.controls.actionKey.value\n ) {\n <div class=\"space-y-3\">\n <p-skeleton\n width=\"100%\"\n height=\"2.5rem\"\n ></p-skeleton>\n <p-skeleton\n width=\"100%\"\n height=\"6rem\"\n ></p-skeleton>\n </div>\n } @else if (\n !appActionSettingsForm.controls.actionKey.value\n ) {\n <div\n class=\"rounded-xl border border-dashed border-surface-300 px-3 py-4 text-sm text-muted-color\"\n >\n {{ t(\"appActionUnavailable\") }}\n </div>\n } @else if (\n appActionConfigDefinition().mode === \"schema\" &&\n appActionConfigDefinition().fields.length === 0\n ) {\n <div\n class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-4 text-sm text-muted-color\"\n >\n {{ t(\"appActionNoConfigRequired\") }}\n </div>\n } @else if (\n appActionConfigDefinition().mode === \"raw\"\n ) {\n <div class=\"space-y-3\">\n <div\n class=\"rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800\"\n >\n {{ t(\"appActionRawConfigFallback\") }}\n </div>\n <mt-textarea-field\n [label]=\"t('appActionConfigJson')\"\n [placeholder]=\"\n t('enterAppActionConfigJson')\n \"\n [formControl]=\"appActionRawConfigControl\"\n [rows]=\"'10'\"\n ></mt-textarea-field>\n </div>\n } @else {\n <div class=\"space-y-3\">\n @for (\n field of appActionConfigDefinition().fields;\n track field.key\n ) {\n <div class=\"space-y-2\">\n @switch (field.kind) {\n @case (\"text\") {\n <mt-text-field\n [label]=\"field.title\"\n [formControl]=\"\n getAppActionConfigControl(\n field.key\n )\n \"\n [required]=\"field.required\"\n ></mt-text-field>\n }\n @case (\"number\") {\n <mt-number-field\n [label]=\"field.title\"\n [formControl]=\"\n getAppActionConfigControl(\n field.key\n )\n \"\n [required]=\"field.required\"\n ></mt-number-field>\n }\n @case (\"toggle\") {\n <mt-toggle-field\n [label]=\"field.title\"\n [formControl]=\"\n getAppActionConfigControl(\n field.key\n )\n \"\n ></mt-toggle-field>\n }\n @case (\"select\") {\n <mt-select-field\n [label]=\"field.title\"\n [options]=\"\n getAppActionEnumOptions(field)\n \"\n optionLabel=\"label\"\n optionValue=\"value\"\n [formControl]=\"\n getAppActionConfigControl(\n field.key\n )\n \"\n [required]=\"field.required\"\n ></mt-select-field>\n }\n @case (\"json\") {\n <mt-textarea-field\n [label]=\"field.title\"\n [formControl]=\"\n getAppActionConfigControl(\n field.key\n )\n \"\n [required]=\"field.required\"\n [rows]=\"'8'\"\n ></mt-textarea-field>\n }\n }\n\n @if (field.description) {\n <div class=\"text-xs text-muted-color\">\n {{ field.description }}\n </div>\n }\n </div>\n }\n </div>\n }\n\n @if (getAppActionConfigMessages().length) {\n <div\n class=\"rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700\"\n >\n @for (\n message of getAppActionConfigMessages();\n track message\n ) {\n <div>{{ message }}</div>\n }\n </div>\n }\n </div>\n </mt-card>\n\n <mt-card>\n <div class=\"space-y-4\">\n <div\n class=\"text-sm font-semibold text-surface-900\"\n >\n {{ t(\"advancedExecution\") }}\n </div>\n\n <mt-number-field\n [label]=\"t('sla')\"\n [placeholder]=\"t('enterSla')\"\n [formControl]=\"stepForm.controls.sla\"\n [required]=\"true\"\n [min]=\"0\"\n ></mt-number-field>\n\n <mt-select-field\n [label]=\"t('failureBehavior')\"\n [options]=\"failureBehaviorOptions()\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [formControl]=\"\n appActionSettingsForm.controls.failureBehavior\n \"\n [required]=\"true\"\n ></mt-select-field>\n\n <mt-number-field\n [label]=\"t('timeoutSeconds')\"\n [formControl]=\"\n appActionSettingsForm.controls.timeoutSeconds\n \"\n [required]=\"true\"\n [min]=\"1\"\n ></mt-number-field>\n </div>\n </mt-card>\n }\n </div>\n }\n @case (\"tab2\") {\n <div class=\"mt-4\">\n <mt-card>\n <div class=\"flex items-center gap-4\">\n <div class=\"flex flex-1 items-center gap-3\">\n <mt-button\n [severity]=\"'secondary'\"\n icon=\"file.file-check-02\"\n />\n <div class=\"flex flex-col\">\n <label class=\"font-medium\">{{\n t(\"configureForm\")\n }}</label>\n <span class=\"text-sm text-muted-color\">{{\n t(\"configureForm-description\")\n }}</span>\n </div>\n </div>\n </div>\n <div class=\"mt-3\">\n <mt-button\n [label]=\"t('configureForm')\"\n size=\"small\"\n (onClick)=\"openFormModal()\"\n ></mt-button>\n </div>\n </mt-card>\n </div>\n }\n @case (\"tab3\") {\n <div class=\"mt-4\">\n <mt-toggle-field\n toggleShape=\"card\"\n [label]=\"t('show-hide')\"\n [descriptionCard]=\"t('show-hide-notifications')\"\n icon=\"general.eye\"\n [formControl]=\"showHideControl\"\n >\n <ng-template #toggleCardBottom>\n @if (showHideControl.value) {\n <div class=\"mt-3\">\n <mt-button\n [label]=\"t('configureNotifications')\"\n size=\"small\"\n (onClick)=\"openNotificationsModal()\"\n ></mt-button>\n </div>\n }\n </ng-template>\n </mt-toggle-field>\n </div>\n }\n }\n }\n </div>\n </ng-template>\n </mt-structure-builder>\n } @else {\n <p-skeleton width=\"100%\" height=\"50rem\" />\n }\n }\n @case (\"notification\") {\n <div class=\"flex-1 flex justify-center items-start p-4\">\n <div class=\"w-1/2 max-[1025px]:w-full\">\n <mt-card [title]=\"t('notifications')\">\n <mt-notification-template />\n </mt-card>\n </div>\n </div>\n }\n }\n </div>\n</ng-container>\n", dependencies: [{ kind: "component", type: StructureBuilder, selector: "mt-structure-builder", inputs: ["availableNodes", "availableNodesLabel", "nodeForm", "nodeDialogFooterConfig", "connectionForm", "connectionFormulaSchemaId", "connectionFormulaConfig", "nodeActions", "nodeFields", "isAutoLayout", "readonly", "addModalType", "updateModalType", "addModalStyleClass", "updateModalStyleClass", "addModalHeader", "updateModalHeader", "appendTo", "availableTabsClass", "layoutDirection", "nodes", "connections", "nodeTemplate"], 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", "mode", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "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: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: TextareaField, selector: "mt-textarea-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
|
|
2501
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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 <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 [availableNodesLabel]=\"t('stepTemplates')\"\r\n [connectionForm]=\"connectionForm()\"\r\n [connectionFormulaSchemaId]=\"connectionFormulaSchemaId()\"\r\n [connectionFormulaConfig]=\"connectionFormulaConfig()\"\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 [nodeDialogFooterConfig]=\"nodeDialogFooterConfig\"\r\n [appendTo]=\"'page-content'\"\r\n [nodeFields]=\"nodeFields()\"\r\n [availableTabsClass]=\"hasMultipleWorkflows() ? '!mt-28' : ''\"\r\n [layoutDirection]=\"'LR'\"\r\n >\r\n <div flowContent class=\"pointer-events-none\">\r\n @if (hasMultipleWorkflows()) {\r\n <div class=\"pointer-events-auto absolute top-4 start-4 z-10\">\r\n <mt-card class=\"w-64\">\r\n <mt-select-field\r\n [options]=\"workflows()\"\r\n optionLabel=\"name.display\"\r\n optionValue=\"id\"\r\n [ngModel]=\"selectedWorkflowId()\"\r\n (ngModelChange)=\"onWorkflowChange($event)\"\r\n class=\"mt-2\"\r\n />\r\n </mt-card>\r\n </div>\r\n }\r\n <div class=\"pointer-events-auto 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 <div class=\"space-y-4\">\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 <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 space-y-4\">\r\n <div class=\"grid gap-3\">\r\n <mt-text-field\r\n [label]=\"t('nameEnglish')\"\r\n [placeholder]=\"t('enterNameEnglish')\"\r\n [formControl]=\"stepForm.controls.nameEn\"\r\n [required]=\"true\"\r\n ></mt-text-field>\r\n <mt-text-field\r\n [label]=\"t('nameArabic')\"\r\n [placeholder]=\"t('enterNameArabic')\"\r\n [formControl]=\"stepForm.controls.nameAr\"\r\n [required]=\"true\"\r\n ></mt-text-field>\r\n </div>\r\n\r\n @if (currentStepType() === \"UserInput\") {\r\n @if (!isEditingInitialNode()) {\r\n <mt-card>\r\n <div class=\"space-y-4\">\r\n <div\r\n class=\"text-sm font-semibold text-surface-900\"\r\n >\r\n {{ t(\"approver\") }}\r\n </div>\r\n <mt-select-field\r\n [label]=\"t('approver')\"\r\n [options]=\"[\r\n { label: t('group'), value: '1' },\r\n { label: t('role'), value: '2' },\r\n ]\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n [formControl]=\"stepForm.controls.targetType\"\r\n [required]=\"true\"\r\n ></mt-select-field>\r\n\r\n @if (\r\n stepForm.controls.targetType.value === \"1\"\r\n ) {\r\n <mt-select-field\r\n [label]=\"t('group')\"\r\n [placeholder]=\"t('selectGroup')\"\r\n [options]=\"groups()\"\r\n optionLabel=\"name.display\"\r\n optionValue=\"id\"\r\n [formControl]=\"stepForm.controls.group\"\r\n [required]=\"true\"\r\n ></mt-select-field>\r\n } @else {\r\n <mt-select-field\r\n [label]=\"t('role')\"\r\n [placeholder]=\"t('selectRole')\"\r\n [options]=\"roles()\"\r\n [group]=\"hasGroupedRoles()\"\r\n optionGroupLabel=\"label\"\r\n optionGroupChildren=\"items\"\r\n optionLabel=\"name.display\"\r\n optionValue=\"value\"\r\n [formControl]=\"stepForm.controls.role\"\r\n [required]=\"true\"\r\n ></mt-select-field>\r\n }\r\n\r\n <mt-number-field\r\n [label]=\"t('sla')\"\r\n [placeholder]=\"t('enterSla')\"\r\n [formControl]=\"stepForm.controls.sla\"\r\n [required]=\"true\"\r\n [min]=\"0\"\r\n ></mt-number-field>\r\n </div>\r\n </mt-card>\r\n }\r\n } @else {\r\n <mt-card>\r\n <div class=\"space-y-4\">\r\n <div class=\"grid gap-3\">\r\n <div class=\"grid gap-1\">\r\n <label\r\n class=\"text-sm font-medium text-surface-900\"\r\n >\r\n {{ t(\"app\") }}\r\n </label>\r\n <div\r\n class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-surface-700\"\r\n >\r\n {{ t(\"appLabelPplus\") }}\r\n </div>\r\n </div>\r\n\r\n <div class=\"grid gap-1\">\r\n <label\r\n class=\"text-sm font-medium text-surface-900\"\r\n >\r\n {{ t(\"action\") }}\r\n </label>\r\n <div\r\n class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-surface-900\"\r\n >\r\n {{ getAppActionDisplayName() }}\r\n </div>\r\n @if (getAppActionKey()) {\r\n <div class=\"text-xs text-muted-color\">\r\n {{ getAppActionKey() }}\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (\r\n getAppActionDescription();\r\n as description\r\n ) {\r\n <div\r\n class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-muted-color\"\r\n >\r\n {{ description }}\r\n </div>\r\n }\r\n\r\n @if (\r\n getAppActionDiscoveryMessage();\r\n as discoveryMessage\r\n ) {\r\n <div\r\n class=\"rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700\"\r\n >\r\n {{ discoveryMessage }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </mt-card>\r\n\r\n <mt-card>\r\n <div class=\"space-y-4\">\r\n <div>\r\n <div\r\n class=\"text-sm font-semibold text-surface-900\"\r\n >\r\n {{ t(\"appActionConfiguration\") }}\r\n </div>\r\n <div class=\"mt-1 text-sm text-muted-color\">\r\n {{ t(\"appActionConfigurationDescription\") }}\r\n </div>\r\n </div>\r\n\r\n @if (\r\n loadingAppActionDetail() &&\r\n appActionSettingsForm.controls.actionKey.value\r\n ) {\r\n <div class=\"space-y-3\">\r\n <p-skeleton\r\n width=\"100%\"\r\n height=\"2.5rem\"\r\n ></p-skeleton>\r\n <p-skeleton\r\n width=\"100%\"\r\n height=\"6rem\"\r\n ></p-skeleton>\r\n </div>\r\n } @else if (\r\n !appActionSettingsForm.controls.actionKey.value\r\n ) {\r\n <div\r\n class=\"rounded-xl border border-dashed border-surface-300 px-3 py-4 text-sm text-muted-color\"\r\n >\r\n {{ t(\"appActionUnavailable\") }}\r\n </div>\r\n } @else if (\r\n appActionConfigDefinition().mode === \"schema\" &&\r\n appActionConfigDefinition().fields.length === 0\r\n ) {\r\n <div\r\n class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-4 text-sm text-muted-color\"\r\n >\r\n {{ t(\"appActionNoConfigRequired\") }}\r\n </div>\r\n } @else if (\r\n appActionConfigDefinition().mode === \"raw\"\r\n ) {\r\n <div class=\"space-y-3\">\r\n <div\r\n class=\"rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800\"\r\n >\r\n {{ t(\"appActionRawConfigFallback\") }}\r\n </div>\r\n <mt-textarea-field\r\n [label]=\"t('appActionConfigJson')\"\r\n [placeholder]=\"\r\n t('enterAppActionConfigJson')\r\n \"\r\n [formControl]=\"appActionRawConfigControl\"\r\n [rows]=\"'10'\"\r\n ></mt-textarea-field>\r\n </div>\r\n } @else {\r\n <div class=\"space-y-3\">\r\n @for (\r\n field of appActionConfigDefinition().fields;\r\n track field.key\r\n ) {\r\n <div class=\"space-y-2\">\r\n @switch (field.kind) {\r\n @case (\"text\") {\r\n <mt-text-field\r\n [label]=\"field.title\"\r\n [formControl]=\"\r\n getAppActionConfigControl(\r\n field.key\r\n )\r\n \"\r\n [required]=\"field.required\"\r\n ></mt-text-field>\r\n }\r\n @case (\"number\") {\r\n <mt-number-field\r\n [label]=\"field.title\"\r\n [formControl]=\"\r\n getAppActionConfigControl(\r\n field.key\r\n )\r\n \"\r\n [required]=\"field.required\"\r\n ></mt-number-field>\r\n }\r\n @case (\"toggle\") {\r\n <mt-toggle-field\r\n [label]=\"field.title\"\r\n [formControl]=\"\r\n getAppActionConfigControl(\r\n field.key\r\n )\r\n \"\r\n ></mt-toggle-field>\r\n }\r\n @case (\"select\") {\r\n <mt-select-field\r\n [label]=\"field.title\"\r\n [options]=\"\r\n getAppActionEnumOptions(field)\r\n \"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n [formControl]=\"\r\n getAppActionConfigControl(\r\n field.key\r\n )\r\n \"\r\n [required]=\"field.required\"\r\n ></mt-select-field>\r\n }\r\n @case (\"json\") {\r\n <mt-textarea-field\r\n [label]=\"field.title\"\r\n [formControl]=\"\r\n getAppActionConfigControl(\r\n field.key\r\n )\r\n \"\r\n [required]=\"field.required\"\r\n [rows]=\"'8'\"\r\n ></mt-textarea-field>\r\n }\r\n }\r\n\r\n @if (field.description) {\r\n <div class=\"text-xs text-muted-color\">\r\n {{ field.description }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (getAppActionConfigMessages().length) {\r\n <div\r\n class=\"rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700\"\r\n >\r\n @for (\r\n message of getAppActionConfigMessages();\r\n track message\r\n ) {\r\n <div>{{ message }}</div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </mt-card>\r\n\r\n <mt-card>\r\n <div class=\"space-y-4\">\r\n <div\r\n class=\"text-sm font-semibold text-surface-900\"\r\n >\r\n {{ t(\"advancedExecution\") }}\r\n </div>\r\n\r\n <mt-number-field\r\n [label]=\"t('sla')\"\r\n [placeholder]=\"t('enterSla')\"\r\n [formControl]=\"stepForm.controls.sla\"\r\n [required]=\"true\"\r\n [min]=\"0\"\r\n ></mt-number-field>\r\n\r\n <mt-select-field\r\n [label]=\"t('failureBehavior')\"\r\n [options]=\"failureBehaviorOptions()\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n [formControl]=\"\r\n appActionSettingsForm.controls.failureBehavior\r\n \"\r\n [required]=\"true\"\r\n ></mt-select-field>\r\n\r\n <mt-number-field\r\n [label]=\"t('timeoutSeconds')\"\r\n [formControl]=\"\r\n appActionSettingsForm.controls.timeoutSeconds\r\n \"\r\n [required]=\"true\"\r\n [min]=\"1\"\r\n ></mt-number-field>\r\n </div>\r\n </mt-card>\r\n }\r\n </div>\r\n }\r\n @case (\"tab2\") {\r\n <div class=\"mt-4\">\r\n <mt-card>\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"flex flex-1 items-center gap-3\">\r\n <mt-button\r\n [severity]=\"'secondary'\"\r\n icon=\"file.file-check-02\"\r\n />\r\n <div class=\"flex flex-col\">\r\n <label class=\"font-medium\">{{\r\n t(\"configureForm\")\r\n }}</label>\r\n <span class=\"text-sm text-muted-color\">{{\r\n t(\"configureForm-description\")\r\n }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <mt-button\r\n [label]=\"t('configureForm')\"\r\n size=\"small\"\r\n (onClick)=\"openFormModal()\"\r\n ></mt-button>\r\n </div>\r\n </mt-card>\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 } @else {\r\n <p-skeleton width=\"100%\" height=\"50rem\" />\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 max-[1025px]:w-full\">\r\n <mt-card [title]=\"t('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", "availableNodesLabel", "nodeForm", "nodeDialogFooterConfig", "connectionForm", "connectionFormulaSchemaId", "connectionFormulaConfig", "nodeActions", "nodeFields", "isAutoLayout", "readonly", "nodeStyle", "addModalType", "updateModalType", "addModalStyleClass", "updateModalStyleClass", "addModalHeader", "updateModalHeader", "appendTo", "availableTabsClass", "layoutDirection", "nodes", "connections", "nodeTemplate"], 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", "mode", "moreLabel", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "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: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: TextareaField, selector: "mt-textarea-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
|
|
2486
2502
|
}
|
|
2487
2503
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: WorkflowBuilder, decorators: [{
|
|
2488
2504
|
type: Component,
|
|
@@ -2501,7 +2517,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
2501
2517
|
TextField,
|
|
2502
2518
|
NumberField,
|
|
2503
2519
|
TextareaField,
|
|
2504
|
-
], host: {}, template: "<ng-container *transloco=\"let t; prefix: 'workflow.builder'\">\n <div class=\"h-full flex flex-col\" id=\"workflow-builder-card\">\n <div class=\"flex justify-center w-full py-2\">\n <mt-tabs\n [active]=\"mainTab()\"\n (activeChange)=\"onMainTabChange($event)\"\n [options]=\"mainTabsList()\"\n size=\"large\"\n ></mt-tabs>\n </div>\n @switch (mainTab()) {\n @case (\"workflow\") {\n @if (!loading()) {\n <mt-structure-builder\n class=\"flex-1\"\n [availableNodes]=\"availableNodes()\"\n [availableNodesLabel]=\"t('stepTemplates')\"\n [connectionForm]=\"connectionForm()\"\n [connectionFormulaSchemaId]=\"connectionFormulaSchemaId()\"\n [connectionFormulaConfig]=\"connectionFormulaConfig()\"\n [nodeActions]=\"nodeActions()\"\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 [nodeDialogFooterConfig]=\"nodeDialogFooterConfig\"\n [appendTo]=\"'page-content'\"\n [nodeFields]=\"nodeFields()\"\n [availableTabsClass]=\"hasMultipleWorkflows() ? '!mt-28' : ''\"\n [layoutDirection]=\"'LR'\"\n >\n <div flowContent class=\"pointer-events-none\">\n @if (hasMultipleWorkflows()) {\n <div class=\"pointer-events-auto absolute top-4 start-4 z-10\">\n <mt-card class=\"w-64\">\n <mt-select-field\n [options]=\"workflows()\"\n optionLabel=\"name.display\"\n optionValue=\"id\"\n [ngModel]=\"selectedWorkflowId()\"\n (ngModelChange)=\"onWorkflowChange($event)\"\n class=\"mt-2\"\n />\n </mt-card>\n </div>\n }\n <div class=\"pointer-events-auto 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\n [severity]=\"'secondary'\"\n icon=\"dev.dataflow-01\"\n />\n <label>{{\n \"workflow.builder.enableWorkflow\" | transloco\n }}</label>\n </div>\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 <ng-template\n #nodeTemplate\n let-node\n let-actions=\"actions\"\n let-onAction=\"onAction\"\n >\n <div class=\"min-w-[17rem] overflow-hidden rounded-2xl bg-content\">\n <div class=\"space-y-3 px-4 py-4\">\n <span [class]=\"getStepBadgeClass(node.type)\">\n {{ getStepTypeLabel(node.type) }}\n </span>\n <div class=\"space-y-1\">\n <div class=\"text-base font-semibold text-surface-900\">\n {{ getStepCardTitle(node) }}\n </div>\n @if (getStepCardSubtitle(node); as subtitle) {\n <div class=\"text-sm text-muted-color\">\n {{ subtitle }}\n </div>\n }\n </div>\n </div>\n <div\n class=\"flex min-h-[3rem] items-center justify-end gap-2 border-t border-surface-200 bg-surface-50 px-4 py-3\"\n >\n @for (action of actions; track action.key) {\n <mt-button\n [size]=\"action?.size || 'small'\"\n [variant]=\"action?.variant\"\n [icon]=\"action?.icon\"\n [tooltip]=\"action?.tooltip\"\n [severity]=\"action?.severity\"\n (onClick)=\"onAction(action, node)\"\n >\n </mt-button>\n }\n </div>\n </div>\n </ng-template>\n <ng-template\n #nodeDialog\n let-close=\"close\"\n let-save=\"save\"\n let-node=\"node\"\n let-drawerController=\"drawerController\"\n >\n <div class=\"p-4\">\n @if (loadingStep()) {\n <div class=\"space-y-4\">\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 <!-- 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 <mt-tabs\n [active]=\"selectedTab()\"\n (activeChange)=\"onNodeDialogTabChange($event)\"\n [options]=\"tabsList()\"\n size=\"large\"\n ></mt-tabs>\n @switch (selectedTab()) {\n @case (\"tab1\") {\n <div class=\"mt-4 space-y-4\">\n <div class=\"grid gap-3\">\n <mt-text-field\n [label]=\"t('nameEnglish')\"\n [placeholder]=\"t('enterNameEnglish')\"\n [formControl]=\"stepForm.controls.nameEn\"\n [required]=\"true\"\n ></mt-text-field>\n <mt-text-field\n [label]=\"t('nameArabic')\"\n [placeholder]=\"t('enterNameArabic')\"\n [formControl]=\"stepForm.controls.nameAr\"\n [required]=\"true\"\n ></mt-text-field>\n </div>\n\n @if (currentStepType() === \"UserInput\") {\n @if (!isEditingInitialNode()) {\n <mt-card>\n <div class=\"space-y-4\">\n <div\n class=\"text-sm font-semibold text-surface-900\"\n >\n {{ t(\"approver\") }}\n </div>\n <mt-select-field\n [label]=\"t('approver')\"\n [options]=\"[\n { label: t('group'), value: '1' },\n { label: t('role'), value: '2' },\n ]\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [formControl]=\"stepForm.controls.targetType\"\n [required]=\"true\"\n ></mt-select-field>\n\n @if (\n stepForm.controls.targetType.value === \"1\"\n ) {\n <mt-select-field\n [label]=\"t('group')\"\n [placeholder]=\"t('selectGroup')\"\n [options]=\"groups()\"\n optionLabel=\"name.display\"\n optionValue=\"id\"\n [formControl]=\"stepForm.controls.group\"\n [required]=\"true\"\n ></mt-select-field>\n } @else {\n <mt-select-field\n [label]=\"t('role')\"\n [placeholder]=\"t('selectRole')\"\n [options]=\"roles()\"\n [group]=\"hasGroupedRoles()\"\n optionGroupLabel=\"label\"\n optionGroupChildren=\"items\"\n optionLabel=\"name.display\"\n optionValue=\"value\"\n [formControl]=\"stepForm.controls.role\"\n [required]=\"true\"\n ></mt-select-field>\n }\n\n <mt-number-field\n [label]=\"t('sla')\"\n [placeholder]=\"t('enterSla')\"\n [formControl]=\"stepForm.controls.sla\"\n [required]=\"true\"\n [min]=\"0\"\n ></mt-number-field>\n </div>\n </mt-card>\n }\n } @else {\n <mt-card>\n <div class=\"space-y-4\">\n <div class=\"grid gap-3\">\n <div class=\"grid gap-1\">\n <label\n class=\"text-sm font-medium text-surface-900\"\n >\n {{ t(\"app\") }}\n </label>\n <div\n class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-surface-700\"\n >\n {{ t(\"appLabelPplus\") }}\n </div>\n </div>\n\n <div class=\"grid gap-1\">\n <label\n class=\"text-sm font-medium text-surface-900\"\n >\n {{ t(\"action\") }}\n </label>\n <div\n class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-surface-900\"\n >\n {{ getAppActionDisplayName() }}\n </div>\n @if (getAppActionKey()) {\n <div class=\"text-xs text-muted-color\">\n {{ getAppActionKey() }}\n </div>\n }\n </div>\n\n @if (\n getAppActionDescription();\n as description\n ) {\n <div\n class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-muted-color\"\n >\n {{ description }}\n </div>\n }\n\n @if (\n getAppActionDiscoveryMessage();\n as discoveryMessage\n ) {\n <div\n class=\"rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700\"\n >\n {{ discoveryMessage }}\n </div>\n }\n </div>\n </div>\n </mt-card>\n\n <mt-card>\n <div class=\"space-y-4\">\n <div>\n <div\n class=\"text-sm font-semibold text-surface-900\"\n >\n {{ t(\"appActionConfiguration\") }}\n </div>\n <div class=\"mt-1 text-sm text-muted-color\">\n {{ t(\"appActionConfigurationDescription\") }}\n </div>\n </div>\n\n @if (\n loadingAppActionDetail() &&\n appActionSettingsForm.controls.actionKey.value\n ) {\n <div class=\"space-y-3\">\n <p-skeleton\n width=\"100%\"\n height=\"2.5rem\"\n ></p-skeleton>\n <p-skeleton\n width=\"100%\"\n height=\"6rem\"\n ></p-skeleton>\n </div>\n } @else if (\n !appActionSettingsForm.controls.actionKey.value\n ) {\n <div\n class=\"rounded-xl border border-dashed border-surface-300 px-3 py-4 text-sm text-muted-color\"\n >\n {{ t(\"appActionUnavailable\") }}\n </div>\n } @else if (\n appActionConfigDefinition().mode === \"schema\" &&\n appActionConfigDefinition().fields.length === 0\n ) {\n <div\n class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-4 text-sm text-muted-color\"\n >\n {{ t(\"appActionNoConfigRequired\") }}\n </div>\n } @else if (\n appActionConfigDefinition().mode === \"raw\"\n ) {\n <div class=\"space-y-3\">\n <div\n class=\"rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800\"\n >\n {{ t(\"appActionRawConfigFallback\") }}\n </div>\n <mt-textarea-field\n [label]=\"t('appActionConfigJson')\"\n [placeholder]=\"\n t('enterAppActionConfigJson')\n \"\n [formControl]=\"appActionRawConfigControl\"\n [rows]=\"'10'\"\n ></mt-textarea-field>\n </div>\n } @else {\n <div class=\"space-y-3\">\n @for (\n field of appActionConfigDefinition().fields;\n track field.key\n ) {\n <div class=\"space-y-2\">\n @switch (field.kind) {\n @case (\"text\") {\n <mt-text-field\n [label]=\"field.title\"\n [formControl]=\"\n getAppActionConfigControl(\n field.key\n )\n \"\n [required]=\"field.required\"\n ></mt-text-field>\n }\n @case (\"number\") {\n <mt-number-field\n [label]=\"field.title\"\n [formControl]=\"\n getAppActionConfigControl(\n field.key\n )\n \"\n [required]=\"field.required\"\n ></mt-number-field>\n }\n @case (\"toggle\") {\n <mt-toggle-field\n [label]=\"field.title\"\n [formControl]=\"\n getAppActionConfigControl(\n field.key\n )\n \"\n ></mt-toggle-field>\n }\n @case (\"select\") {\n <mt-select-field\n [label]=\"field.title\"\n [options]=\"\n getAppActionEnumOptions(field)\n \"\n optionLabel=\"label\"\n optionValue=\"value\"\n [formControl]=\"\n getAppActionConfigControl(\n field.key\n )\n \"\n [required]=\"field.required\"\n ></mt-select-field>\n }\n @case (\"json\") {\n <mt-textarea-field\n [label]=\"field.title\"\n [formControl]=\"\n getAppActionConfigControl(\n field.key\n )\n \"\n [required]=\"field.required\"\n [rows]=\"'8'\"\n ></mt-textarea-field>\n }\n }\n\n @if (field.description) {\n <div class=\"text-xs text-muted-color\">\n {{ field.description }}\n </div>\n }\n </div>\n }\n </div>\n }\n\n @if (getAppActionConfigMessages().length) {\n <div\n class=\"rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700\"\n >\n @for (\n message of getAppActionConfigMessages();\n track message\n ) {\n <div>{{ message }}</div>\n }\n </div>\n }\n </div>\n </mt-card>\n\n <mt-card>\n <div class=\"space-y-4\">\n <div\n class=\"text-sm font-semibold text-surface-900\"\n >\n {{ t(\"advancedExecution\") }}\n </div>\n\n <mt-number-field\n [label]=\"t('sla')\"\n [placeholder]=\"t('enterSla')\"\n [formControl]=\"stepForm.controls.sla\"\n [required]=\"true\"\n [min]=\"0\"\n ></mt-number-field>\n\n <mt-select-field\n [label]=\"t('failureBehavior')\"\n [options]=\"failureBehaviorOptions()\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [formControl]=\"\n appActionSettingsForm.controls.failureBehavior\n \"\n [required]=\"true\"\n ></mt-select-field>\n\n <mt-number-field\n [label]=\"t('timeoutSeconds')\"\n [formControl]=\"\n appActionSettingsForm.controls.timeoutSeconds\n \"\n [required]=\"true\"\n [min]=\"1\"\n ></mt-number-field>\n </div>\n </mt-card>\n }\n </div>\n }\n @case (\"tab2\") {\n <div class=\"mt-4\">\n <mt-card>\n <div class=\"flex items-center gap-4\">\n <div class=\"flex flex-1 items-center gap-3\">\n <mt-button\n [severity]=\"'secondary'\"\n icon=\"file.file-check-02\"\n />\n <div class=\"flex flex-col\">\n <label class=\"font-medium\">{{\n t(\"configureForm\")\n }}</label>\n <span class=\"text-sm text-muted-color\">{{\n t(\"configureForm-description\")\n }}</span>\n </div>\n </div>\n </div>\n <div class=\"mt-3\">\n <mt-button\n [label]=\"t('configureForm')\"\n size=\"small\"\n (onClick)=\"openFormModal()\"\n ></mt-button>\n </div>\n </mt-card>\n </div>\n }\n @case (\"tab3\") {\n <div class=\"mt-4\">\n <mt-toggle-field\n toggleShape=\"card\"\n [label]=\"t('show-hide')\"\n [descriptionCard]=\"t('show-hide-notifications')\"\n icon=\"general.eye\"\n [formControl]=\"showHideControl\"\n >\n <ng-template #toggleCardBottom>\n @if (showHideControl.value) {\n <div class=\"mt-3\">\n <mt-button\n [label]=\"t('configureNotifications')\"\n size=\"small\"\n (onClick)=\"openNotificationsModal()\"\n ></mt-button>\n </div>\n }\n </ng-template>\n </mt-toggle-field>\n </div>\n }\n }\n }\n </div>\n </ng-template>\n </mt-structure-builder>\n } @else {\n <p-skeleton width=\"100%\" height=\"50rem\" />\n }\n }\n @case (\"notification\") {\n <div class=\"flex-1 flex justify-center items-start p-4\">\n <div class=\"w-1/2 max-[1025px]:w-full\">\n <mt-card [title]=\"t('notifications')\">\n <mt-notification-template />\n </mt-card>\n </div>\n </div>\n }\n }\n </div>\n</ng-container>\n" }]
|
|
2520
|
+
], 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 <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 [availableNodesLabel]=\"t('stepTemplates')\"\r\n [connectionForm]=\"connectionForm()\"\r\n [connectionFormulaSchemaId]=\"connectionFormulaSchemaId()\"\r\n [connectionFormulaConfig]=\"connectionFormulaConfig()\"\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 [nodeDialogFooterConfig]=\"nodeDialogFooterConfig\"\r\n [appendTo]=\"'page-content'\"\r\n [nodeFields]=\"nodeFields()\"\r\n [availableTabsClass]=\"hasMultipleWorkflows() ? '!mt-28' : ''\"\r\n [layoutDirection]=\"'LR'\"\r\n >\r\n <div flowContent class=\"pointer-events-none\">\r\n @if (hasMultipleWorkflows()) {\r\n <div class=\"pointer-events-auto absolute top-4 start-4 z-10\">\r\n <mt-card class=\"w-64\">\r\n <mt-select-field\r\n [options]=\"workflows()\"\r\n optionLabel=\"name.display\"\r\n optionValue=\"id\"\r\n [ngModel]=\"selectedWorkflowId()\"\r\n (ngModelChange)=\"onWorkflowChange($event)\"\r\n class=\"mt-2\"\r\n />\r\n </mt-card>\r\n </div>\r\n }\r\n <div class=\"pointer-events-auto 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 <div class=\"space-y-4\">\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 <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 space-y-4\">\r\n <div class=\"grid gap-3\">\r\n <mt-text-field\r\n [label]=\"t('nameEnglish')\"\r\n [placeholder]=\"t('enterNameEnglish')\"\r\n [formControl]=\"stepForm.controls.nameEn\"\r\n [required]=\"true\"\r\n ></mt-text-field>\r\n <mt-text-field\r\n [label]=\"t('nameArabic')\"\r\n [placeholder]=\"t('enterNameArabic')\"\r\n [formControl]=\"stepForm.controls.nameAr\"\r\n [required]=\"true\"\r\n ></mt-text-field>\r\n </div>\r\n\r\n @if (currentStepType() === \"UserInput\") {\r\n @if (!isEditingInitialNode()) {\r\n <mt-card>\r\n <div class=\"space-y-4\">\r\n <div\r\n class=\"text-sm font-semibold text-surface-900\"\r\n >\r\n {{ t(\"approver\") }}\r\n </div>\r\n <mt-select-field\r\n [label]=\"t('approver')\"\r\n [options]=\"[\r\n { label: t('group'), value: '1' },\r\n { label: t('role'), value: '2' },\r\n ]\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n [formControl]=\"stepForm.controls.targetType\"\r\n [required]=\"true\"\r\n ></mt-select-field>\r\n\r\n @if (\r\n stepForm.controls.targetType.value === \"1\"\r\n ) {\r\n <mt-select-field\r\n [label]=\"t('group')\"\r\n [placeholder]=\"t('selectGroup')\"\r\n [options]=\"groups()\"\r\n optionLabel=\"name.display\"\r\n optionValue=\"id\"\r\n [formControl]=\"stepForm.controls.group\"\r\n [required]=\"true\"\r\n ></mt-select-field>\r\n } @else {\r\n <mt-select-field\r\n [label]=\"t('role')\"\r\n [placeholder]=\"t('selectRole')\"\r\n [options]=\"roles()\"\r\n [group]=\"hasGroupedRoles()\"\r\n optionGroupLabel=\"label\"\r\n optionGroupChildren=\"items\"\r\n optionLabel=\"name.display\"\r\n optionValue=\"value\"\r\n [formControl]=\"stepForm.controls.role\"\r\n [required]=\"true\"\r\n ></mt-select-field>\r\n }\r\n\r\n <mt-number-field\r\n [label]=\"t('sla')\"\r\n [placeholder]=\"t('enterSla')\"\r\n [formControl]=\"stepForm.controls.sla\"\r\n [required]=\"true\"\r\n [min]=\"0\"\r\n ></mt-number-field>\r\n </div>\r\n </mt-card>\r\n }\r\n } @else {\r\n <mt-card>\r\n <div class=\"space-y-4\">\r\n <div class=\"grid gap-3\">\r\n <div class=\"grid gap-1\">\r\n <label\r\n class=\"text-sm font-medium text-surface-900\"\r\n >\r\n {{ t(\"app\") }}\r\n </label>\r\n <div\r\n class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-surface-700\"\r\n >\r\n {{ t(\"appLabelPplus\") }}\r\n </div>\r\n </div>\r\n\r\n <div class=\"grid gap-1\">\r\n <label\r\n class=\"text-sm font-medium text-surface-900\"\r\n >\r\n {{ t(\"action\") }}\r\n </label>\r\n <div\r\n class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-surface-900\"\r\n >\r\n {{ getAppActionDisplayName() }}\r\n </div>\r\n @if (getAppActionKey()) {\r\n <div class=\"text-xs text-muted-color\">\r\n {{ getAppActionKey() }}\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (\r\n getAppActionDescription();\r\n as description\r\n ) {\r\n <div\r\n class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-2 text-sm text-muted-color\"\r\n >\r\n {{ description }}\r\n </div>\r\n }\r\n\r\n @if (\r\n getAppActionDiscoveryMessage();\r\n as discoveryMessage\r\n ) {\r\n <div\r\n class=\"rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700\"\r\n >\r\n {{ discoveryMessage }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </mt-card>\r\n\r\n <mt-card>\r\n <div class=\"space-y-4\">\r\n <div>\r\n <div\r\n class=\"text-sm font-semibold text-surface-900\"\r\n >\r\n {{ t(\"appActionConfiguration\") }}\r\n </div>\r\n <div class=\"mt-1 text-sm text-muted-color\">\r\n {{ t(\"appActionConfigurationDescription\") }}\r\n </div>\r\n </div>\r\n\r\n @if (\r\n loadingAppActionDetail() &&\r\n appActionSettingsForm.controls.actionKey.value\r\n ) {\r\n <div class=\"space-y-3\">\r\n <p-skeleton\r\n width=\"100%\"\r\n height=\"2.5rem\"\r\n ></p-skeleton>\r\n <p-skeleton\r\n width=\"100%\"\r\n height=\"6rem\"\r\n ></p-skeleton>\r\n </div>\r\n } @else if (\r\n !appActionSettingsForm.controls.actionKey.value\r\n ) {\r\n <div\r\n class=\"rounded-xl border border-dashed border-surface-300 px-3 py-4 text-sm text-muted-color\"\r\n >\r\n {{ t(\"appActionUnavailable\") }}\r\n </div>\r\n } @else if (\r\n appActionConfigDefinition().mode === \"schema\" &&\r\n appActionConfigDefinition().fields.length === 0\r\n ) {\r\n <div\r\n class=\"rounded-xl border border-surface-200 bg-surface-50 px-3 py-4 text-sm text-muted-color\"\r\n >\r\n {{ t(\"appActionNoConfigRequired\") }}\r\n </div>\r\n } @else if (\r\n appActionConfigDefinition().mode === \"raw\"\r\n ) {\r\n <div class=\"space-y-3\">\r\n <div\r\n class=\"rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800\"\r\n >\r\n {{ t(\"appActionRawConfigFallback\") }}\r\n </div>\r\n <mt-textarea-field\r\n [label]=\"t('appActionConfigJson')\"\r\n [placeholder]=\"\r\n t('enterAppActionConfigJson')\r\n \"\r\n [formControl]=\"appActionRawConfigControl\"\r\n [rows]=\"'10'\"\r\n ></mt-textarea-field>\r\n </div>\r\n } @else {\r\n <div class=\"space-y-3\">\r\n @for (\r\n field of appActionConfigDefinition().fields;\r\n track field.key\r\n ) {\r\n <div class=\"space-y-2\">\r\n @switch (field.kind) {\r\n @case (\"text\") {\r\n <mt-text-field\r\n [label]=\"field.title\"\r\n [formControl]=\"\r\n getAppActionConfigControl(\r\n field.key\r\n )\r\n \"\r\n [required]=\"field.required\"\r\n ></mt-text-field>\r\n }\r\n @case (\"number\") {\r\n <mt-number-field\r\n [label]=\"field.title\"\r\n [formControl]=\"\r\n getAppActionConfigControl(\r\n field.key\r\n )\r\n \"\r\n [required]=\"field.required\"\r\n ></mt-number-field>\r\n }\r\n @case (\"toggle\") {\r\n <mt-toggle-field\r\n [label]=\"field.title\"\r\n [formControl]=\"\r\n getAppActionConfigControl(\r\n field.key\r\n )\r\n \"\r\n ></mt-toggle-field>\r\n }\r\n @case (\"select\") {\r\n <mt-select-field\r\n [label]=\"field.title\"\r\n [options]=\"\r\n getAppActionEnumOptions(field)\r\n \"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n [formControl]=\"\r\n getAppActionConfigControl(\r\n field.key\r\n )\r\n \"\r\n [required]=\"field.required\"\r\n ></mt-select-field>\r\n }\r\n @case (\"json\") {\r\n <mt-textarea-field\r\n [label]=\"field.title\"\r\n [formControl]=\"\r\n getAppActionConfigControl(\r\n field.key\r\n )\r\n \"\r\n [required]=\"field.required\"\r\n [rows]=\"'8'\"\r\n ></mt-textarea-field>\r\n }\r\n }\r\n\r\n @if (field.description) {\r\n <div class=\"text-xs text-muted-color\">\r\n {{ field.description }}\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (getAppActionConfigMessages().length) {\r\n <div\r\n class=\"rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700\"\r\n >\r\n @for (\r\n message of getAppActionConfigMessages();\r\n track message\r\n ) {\r\n <div>{{ message }}</div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </mt-card>\r\n\r\n <mt-card>\r\n <div class=\"space-y-4\">\r\n <div\r\n class=\"text-sm font-semibold text-surface-900\"\r\n >\r\n {{ t(\"advancedExecution\") }}\r\n </div>\r\n\r\n <mt-number-field\r\n [label]=\"t('sla')\"\r\n [placeholder]=\"t('enterSla')\"\r\n [formControl]=\"stepForm.controls.sla\"\r\n [required]=\"true\"\r\n [min]=\"0\"\r\n ></mt-number-field>\r\n\r\n <mt-select-field\r\n [label]=\"t('failureBehavior')\"\r\n [options]=\"failureBehaviorOptions()\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n [formControl]=\"\r\n appActionSettingsForm.controls.failureBehavior\r\n \"\r\n [required]=\"true\"\r\n ></mt-select-field>\r\n\r\n <mt-number-field\r\n [label]=\"t('timeoutSeconds')\"\r\n [formControl]=\"\r\n appActionSettingsForm.controls.timeoutSeconds\r\n \"\r\n [required]=\"true\"\r\n [min]=\"1\"\r\n ></mt-number-field>\r\n </div>\r\n </mt-card>\r\n }\r\n </div>\r\n }\r\n @case (\"tab2\") {\r\n <div class=\"mt-4\">\r\n <mt-card>\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"flex flex-1 items-center gap-3\">\r\n <mt-button\r\n [severity]=\"'secondary'\"\r\n icon=\"file.file-check-02\"\r\n />\r\n <div class=\"flex flex-col\">\r\n <label class=\"font-medium\">{{\r\n t(\"configureForm\")\r\n }}</label>\r\n <span class=\"text-sm text-muted-color\">{{\r\n t(\"configureForm-description\")\r\n }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <mt-button\r\n [label]=\"t('configureForm')\"\r\n size=\"small\"\r\n (onClick)=\"openFormModal()\"\r\n ></mt-button>\r\n </div>\r\n </mt-card>\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 } @else {\r\n <p-skeleton width=\"100%\" height=\"50rem\" />\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 max-[1025px]:w-full\">\r\n <mt-card [title]=\"t('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" }]
|
|
2505
2521
|
}], ctorParameters: () => [] });
|
|
2506
2522
|
|
|
2507
2523
|
// store/app.state.ts
|