Skip to content

Commit 3f3de48

Browse files
lyubov-voloshkolyubov-voloshko
committed
Automations: refactor layout
1 parent e7d6cd8 commit 3f3de48

1 file changed

Lines changed: 17 additions & 184 deletions

File tree

‎frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.html‎

Lines changed: 17 additions & 184 deletions
Original file line numberDiff line numberDiff line change
@@ -31,17 +31,25 @@ <h1 class="mat-h1">Automations</h1>
3131
<app-breadcrumbs [crumbs]="getCrumbs(currentConnection.title || currentConnection.database)" class="actions-breadcrumbs"></app-breadcrumbs>
3232
<app-content-loader *ngIf="!rules"></app-content-loader>
3333

34-
<div class="creation-flow" *ngIf="selectedRule && rules.length && !isCreationMode">
34+
<div class="creation-flow" *ngIf="selectedRule && rules.length">
3535
<form (ngSubmit)="handleRuleSubmitting()" (input)="isSaved = false" class="creation-flow__form">
3636
<div class="creation-flow__name-row">
3737
<mat-form-field appearance="outline" class="creation-flow__name">
38-
<mat-label>Name</mat-label>
39-
<input matInput #ruleNameInput [(ngModel)]="selectedRuleTitle" name="rule-title">
38+
<mat-label>Automation name</mat-label>
39+
<input matInput #ruleNameInput [(ngModel)]="selectedRuleTitle" name="rule-title"
40+
(ngModelChange)="isCreationMode ? selectedRule.title = $event : null">
4041
</mat-form-field>
41-
<button mat-button color="warn" type="button"
42-
(click)="handleRemoveRule()">
43-
Delete
44-
</button>
42+
@if (isCreationMode) {
43+
<button mat-button color="warn" type="button"
44+
(click)="undoRule()">
45+
Cancel
46+
</button>
47+
} @else {
48+
<button mat-button color="warn" type="button"
49+
(click)="handleRemoveRule()">
50+
Delete
51+
</button>
52+
}
4553
</div>
4654

4755
<!-- Triggers -->
@@ -86,15 +94,15 @@ <h1 class="mat-h1">Automations</h1>
8694
<div class="custom-event-inline">
8795
<mat-form-field appearance="outline">
8896
<mat-label>Button label</mat-label>
89-
<input matInput name="action-title" [(ngModel)]="selectedRuleCustomEvent.title">
97+
<input matInput name="custom-event-title" [(ngModel)]="selectedRuleCustomEvent.title">
9098
</mat-form-field>
9199
<app-icon-picker
92100
[icon]="selectedRuleCustomEvent.icon"
93101
[defaultIcons]="defaultIcons"
94102
tooltip="Choose an icon"
95103
(onFieldChange)="updateIcon($event)">
96104
</app-icon-picker>
97-
<mat-checkbox name="action-confirmation"
105+
<mat-checkbox name="custom-event-confirmation"
98106
labelPosition="after"
99107
[(ngModel)]="selectedRuleCustomEvent.require_confirmation">
100108
Request confirmation
@@ -203,181 +211,6 @@ <h1 class="mat-h1">Automations</h1>
203211
</form>
204212
</div>
205213

206-
@if (selectedRule && isCreationMode) {
207-
<div class="creation-flow">
208-
<form (ngSubmit)="handleRuleSubmitting()" (input)="isSaved = false" class="creation-flow__form">
209-
<div class="creation-flow__name-row">
210-
<mat-form-field appearance="outline" class="creation-flow__name">
211-
<mat-label>Automation name</mat-label>
212-
<input matInput #ruleNameInput [(ngModel)]="selectedRuleTitle" name="rule-title"
213-
(ngModelChange)="selectedRule.title = $event">
214-
</mat-form-field>
215-
<button mat-button color="warn" type="button"
216-
(click)="undoRule()">
217-
Cancel
218-
</button>
219-
</div>
220-
221-
<!-- Triggers -->
222-
<div class="creation-card creation-card--trigger">
223-
<span class="creation-card__label"><span class="step-label__badge step-label__badge--when">WHEN</span> Trigger</span>
224-
225-
<div class="trigger-pills">
226-
<label class="trigger-pill trigger-pill--add-row" [class.trigger-pill--active]="selectedEvents.includes('ADD_ROW')">
227-
<input type="checkbox" class="trigger-pill__checkbox"
228-
[checked]="selectedEvents.includes('ADD_ROW')"
229-
(change)="toggleTriggerTile(availableEvents[0].value)">
230-
<mat-icon class="trigger-pill__icon">add_circle_outline</mat-icon>
231-
<span>Add row</span>
232-
</label>
233-
<span class="trigger-pills__or">or</span>
234-
<label class="trigger-pill trigger-pill--update-row" [class.trigger-pill--active]="selectedEvents.includes('UPDATE_ROW')">
235-
<input type="checkbox" class="trigger-pill__checkbox"
236-
[checked]="selectedEvents.includes('UPDATE_ROW')"
237-
(change)="toggleTriggerTile(availableEvents[1].value)">
238-
<mat-icon class="trigger-pill__icon">edit</mat-icon>
239-
<span>Update row</span>
240-
</label>
241-
<span class="trigger-pills__or">or</span>
242-
<label class="trigger-pill trigger-pill--delete-row" [class.trigger-pill--active]="selectedEvents.includes('DELETE_ROW')">
243-
<input type="checkbox" class="trigger-pill__checkbox"
244-
[checked]="selectedEvents.includes('DELETE_ROW')"
245-
(change)="toggleTriggerTile(availableEvents[2].value)">
246-
<mat-icon class="trigger-pill__icon">delete_outline</mat-icon>
247-
<span>Delete row</span>
248-
</label>
249-
<span class="trigger-pills__or">or</span>
250-
<label class="trigger-pill trigger-pill--custom" [class.trigger-pill--active]="selectedEvents.includes('CUSTOM')">
251-
<input type="checkbox" class="trigger-pill__checkbox"
252-
[checked]="selectedEvents.includes('CUSTOM')"
253-
(change)="toggleTriggerTile(availableEvents[3].value)">
254-
<mat-icon class="trigger-pill__icon">tune</mat-icon>
255-
<span>Custom</span>
256-
</label>
257-
</div>
258-
259-
@if (selectedRuleCustomEvent) {
260-
<div class="custom-event-inline">
261-
<mat-form-field appearance="outline">
262-
<mat-label>Button label</mat-label>
263-
<input matInput name="custom-title" [(ngModel)]="selectedRuleCustomEvent.title">
264-
</mat-form-field>
265-
<app-icon-picker
266-
[icon]="selectedRuleCustomEvent.icon"
267-
[defaultIcons]="defaultIcons"
268-
tooltip="Choose an icon"
269-
(onFieldChange)="updateIcon($event)">
270-
</app-icon-picker>
271-
<mat-checkbox name="custom-confirmation"
272-
labelPosition="after"
273-
[(ngModel)]="selectedRuleCustomEvent.require_confirmation">
274-
Request confirmation
275-
</mat-checkbox>
276-
<div class="affects-row">
277-
<span class="affects-row__label">Affects</span>
278-
<mat-button-toggle-group [value]="selectedRuleCustomEvent.type"
279-
(change)="setCustomEventType($event.value)"
280-
hideSingleSelectionIndicator>
281-
<mat-button-toggle value="single">Single row</mat-button-toggle>
282-
<mat-button-toggle value="multiple">Multiple rows</mat-button-toggle>
283-
</mat-button-toggle-group>
284-
</div>
285-
</div>
286-
}
287-
</div>
288-
289-
<div class="card-connector"></div>
290-
291-
<!-- Action card -->
292-
<div class="creation-card" [class.creation-card--disabled]="!hasTriggersSelected">
293-
<span class="creation-card__label"><span class="step-label__badge step-label__badge--then">THEN</span> Action</span>
294-
@if (!hasTriggersSelected) {
295-
<span class="creation-card__hint">Add a trigger first</span>
296-
} @else {
297-
<mat-button-toggle-group class="action-methods"
298-
[value]="$any(selectedRule.table_actions[0]).method"
299-
(change)="selectActionMethod($event.value)"
300-
hideSingleSelectionIndicator>
301-
<mat-button-toggle value="URL">
302-
<mat-icon>link</mat-icon> URL webhook
303-
</mat-button-toggle>
304-
<mat-button-toggle value="EMAIL">
305-
<mat-icon>email</mat-icon> Email
306-
</mat-button-toggle>
307-
<mat-button-toggle value="SLACK">
308-
<mat-icon>tag</mat-icon> Slack
309-
</mat-button-toggle>
310-
</mat-button-toggle-group>
311-
312-
<div class="action-fields">
313-
@if ($any(selectedRule.table_actions[0]).method === 'URL') {
314-
<mat-form-field appearance="outline" class="action-fields__input">
315-
<mat-label>Webhook URL</mat-label>
316-
<input matInput [(ngModel)]="selectedRule.table_actions[0].url" name="action-url">
317-
</mat-form-field>
318-
319-
320-
<div class="code-snippet-box">
321-
<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" animationDuration="0ms">
322-
<mat-tab *ngFor="let lang of codeSnippets | keyvalue"
323-
[label]="lang.value.langName">
324-
<button type="button"
325-
mat-icon-button
326-
class="copy-button"
327-
matTooltip="Copy code"
328-
[cdkCopyToClipboard]="lang.value.snippet"
329-
(cdkCopyToClipboardCopied)="showCopyNotification(lang.value.langName + ' code snippet was copied to clipboard.')">
330-
<mat-icon>content_copy</mat-icon>
331-
</button>
332-
<ngs-code-editor
333-
[theme]="codeEditorTheme"
334-
[codeModel]="{
335-
language: lang.value.mode,
336-
uri: 'create-snippet.' + (lang.value.mode || 'txt'),
337-
value: lang.value.snippet
338-
}"
339-
[options]="codeViewerOptions">
340-
</ngs-code-editor>
341-
</mat-tab>
342-
</mat-tab-group>
343-
</div>
344-
}
345-
346-
@if ($any(selectedRule.table_actions[0]).method === 'EMAIL') {
347-
<mat-form-field appearance="outline" class="action-fields__input">
348-
<mat-label>Notification emails</mat-label>
349-
<mat-select multiple [(ngModel)]="selectedRule.table_actions[0].emails" name="notification-emails">
350-
<mat-option *ngFor="let companyMember of companyMembers" [value]="companyMember.email">
351-
<span *ngIf="companyMember.name">{{companyMember.name}} | </span> {{companyMember.email}}
352-
</mat-option>
353-
</mat-select>
354-
</mat-form-field>
355-
}
356-
357-
@if ($any(selectedRule.table_actions[0]).method === 'SLACK') {
358-
<mat-form-field appearance="outline" class="action-fields__input">
359-
<mat-label>Slack webhook URL</mat-label>
360-
<input matInput [(ngModel)]="$any(selectedRule.table_actions[0]).slack_url" name="action-slack-url">
361-
</mat-form-field>
362-
}
363-
</div>
364-
}
365-
</div>
366-
367-
<div class="actions">
368-
<a mat-stroked-button routerLink="/dashboard/{{connectionID}}/{{tableName}}">
369-
Back
370-
</a>
371-
372-
<button mat-flat-button color="primary" type="submit"
373-
[disabled]="submitting || isSaved">
374-
{{ isSaved ? 'Saved' : 'Save' }}
375-
</button>
376-
</div>
377-
</form>
378-
</div>
379-
}
380-
381214
<div *ngIf="(!selectedRule || !rules.length) && !isCreationMode" class="empty-state">
382215
<p class="actions-hint">
383216
<strong class="actions-hint__title">Configure custom triggers and actions for database records</strong>

0 commit comments

Comments
 (0)