Skip to content

Commit 858864a

Browse files
author
Ihar
committed
feat: base styles for reader and modals[5018]
1 parent b068172 commit 858864a

File tree

10 files changed

+1241
-648
lines changed

10 files changed

+1241
-648
lines changed

‎frontend/src/app/modules/policy-engine/policy-viewer/blocks/global-events-reader-block/global-events-reader-block.component.html‎

Lines changed: 115 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -1,179 +1,152 @@
1-
<div class="global-events-reader-block">
2-
<div class="header">
3-
<h4>Global events</h4>
1+
<div class="ger-card">
2+
<div class="ger-header">
3+
<div class="ger-title">
4+
Global Events Reader
5+
</div>
6+
</div>
7+
8+
<div class="ger-toolbar">
9+
<div class="ger-toolbar-left"></div>
410

5-
<div class="actions">
11+
<div class="ger-header-actions">
612
<button
713
type="button"
8-
class="btn btn-sm btn-primary"
14+
pButton
15+
class="button ger-header-btn"
16+
label="Add Event Topic"
917
(click)="openAddTopicModal()"
10-
[disabled]="readonly || loading">
11-
+ Add event topic
18+
[disabled]="readonly || loading"
19+
>
1220
</button>
1321

1422
<button
1523
type="button"
16-
class="btn btn-sm btn-outline-primary"
24+
pButton
25+
class="button ger-header-btn"
26+
label="Create Topic"
1727
(click)="openCreateTopicModal()"
18-
[disabled]="readonly || loading">
19-
+ Create topic
28+
[disabled]="readonly || loading"
29+
>
2030
</button>
2131
</div>
2232
</div>
2333

24-
<table class="table table-sm table-striped table-bordered">
25-
<thead>
26-
<tr>
27-
<th style="width: 320px;">Event topic ID</th>
28-
<th style="width: 120px;">Status</th>
29-
<th style="width: 260px;">Last cursor</th>
30-
<th style="width: 80px;">Active</th>
31-
<th style="width: 90px;">Filters</th>
32-
<th style="width: 60px;"></th>
33-
</tr>
34-
</thead>
35-
36-
<tbody>
37-
<ng-container *ngFor="let row of rows; let i = index">
38-
<tr [class.row-saving]="row.saving">
39-
<td>
40-
<input
41-
type="text"
42-
class="form-control form-control-sm"
43-
[(ngModel)]="row.globalTopicId"
44-
readonly
45-
[disabled]="loading || row.saving">
46-
</td>
47-
48-
<td>
49-
<span
50-
class="badge"
51-
[ngClass]="{
52-
'badge-success': row.status === 'FREE',
53-
'badge-danger': row.status === 'ERROR',
54-
'badge-warning': row.status === 'PROCESSING'
55-
}">
56-
{{ row.status || '-' }}
57-
</span>
58-
</td>
59-
60-
<td>
61-
<span class="text-muted">{{ row.lastMessageCursor || '-' }}</span>
62-
</td>
63-
64-
<td class="text-center">
65-
<input
66-
type="checkbox"
67-
[ngModel]="row.active"
68-
(ngModelChange)="onActiveChanged(row, $event)"
69-
[disabled]="readonly || loading || row.saving">
70-
</td>
71-
72-
<td class="text-center">
73-
<button
74-
type="button"
75-
class="btn btn-sm btn-outline-primary"
76-
(click)="openFilters(row)"
77-
[disabled]="readonly || loading || row.saving">
78-
Filters
79-
</button>
80-
</td>
81-
82-
<td class="text-center">
83-
<span
84-
class="default-delete-tooltip-wrapper"
85-
[attr.title]="row.isDefault ? 'Default topics cannot be deleted' : null">
86-
<button
87-
type="button"
88-
class="btn btn-sm btn-outline-danger"
89-
(click)="removeRow(i)"
90-
[disabled]="readonly || loading || row.saving || row.isDefault">
91-
✕
92-
</button>
93-
</span>
94-
</td>
95-
</tr>
96-
</ng-container>
97-
98-
<tr *ngIf="rows.length === 0">
99-
<td colspan="6" class="text-center text-muted">
100-
No streams configured yet.
101-
</td>
102-
</tr>
103-
</tbody>
104-
</table>
105-
106-
<!-- Add Topic Modal -->
107-
<div class="modal-backdrop" *ngIf="addTopicModalOpen">
108-
<div class="modal-card">
109-
<div class="modal-title">
110-
Add existing topic
34+
<div class="ger-table">
35+
<div class="ger-row ger-row-head">
36+
<div class="ger-cell ger-col-topic">
37+
EVENT TOPIC ID
11138
</div>
11239

113-
<div class="modal-body">
114-
<div class="field">
115-
<label>Topic ID</label>
116-
<input
117-
type="text"
118-
class="form-control form-control-sm"
119-
[(ngModel)]="addTopicModalTopicId"
120-
[disabled]="loading"
121-
>
122-
</div>
40+
<div class="ger-cell ger-col-status">
41+
STATUS
42+
</div>
12343

124-
<div *ngIf="addTopicModalError" class="error">
125-
{{ addTopicModalError }}
126-
</div>
44+
<div class="ger-cell ger-col-update">
45+
LAST UPDATE
12746
</div>
12847

129-
<div class="modal-actions">
130-
<button
131-
type="button"
132-
class="btn btn-sm btn-outline-secondary"
133-
(click)="closeAddTopicModal()"
134-
[disabled]="loading">
135-
Cancel
136-
</button>
48+
<div class="ger-cell ger-col-active">
49+
ACTIVE
50+
</div>
13751

138-
<button
139-
type="button"
140-
class="btn btn-sm btn-primary"
141-
(click)="confirmAddTopicModal()"
142-
[disabled]="loading">
143-
Add
144-
</button>
52+
<div class="ger-cell ger-col-conditions">
53+
CONDITIONS
14554
</div>
55+
56+
<div class="ger-cell ger-col-save">
57+
SAVE
58+
</div>
59+
60+
<div class="ger-cell ger-col-actions"></div>
14661
</div>
147-
</div>
14862

149-
<!-- Create Topic Confirm Modal -->
150-
<div class="modal-backdrop" *ngIf="createTopicModalOpen">
151-
<div class="modal-card">
152-
<div class="modal-title">
153-
Create new topic
63+
<div
64+
class="ger-row"
65+
*ngFor="let row of rows; let i = index"
66+
[class.ger-row-saving]="row.saving"
67+
>
68+
<div class="ger-cell ger-col-topic">
69+
<div class="ger-topic-value" [title]="row.globalTopicId">
70+
{{ row.globalTopicId }}
71+
</div>
72+
73+
<span class="ger-default-pill" *ngIf="row.isDefault">
74+
DEFAULT
75+
</span>
15476
</div>
15577

156-
<div class="modal-body">
157-
This will create a new Hedera topic and add it to your list.
78+
<div class="ger-cell ger-col-status">
79+
<span
80+
class="ger-status-pill"
81+
[class.ger-status-processing]="row.status === 'PROCESSING'"
82+
[class.ger-status-error]="row.status === 'ERROR'"
83+
>
84+
{{ row.status }}
85+
</span>
15886
</div>
15987

160-
<div class="modal-actions">
88+
<div class="ger-cell ger-col-update">
89+
<div class="ger-muted">
90+
{{ formatLastUpdate(row.lastMessageCursor) }}
91+
</div>
92+
</div>
93+
94+
<div class="ger-cell ger-col-active">
95+
<label class="ger-checkbox">
96+
<input
97+
type="checkbox"
98+
[checked]="row.active"
99+
(change)="onActiveChanged(row, $any($event.target).checked)"
100+
[disabled]="readonly || loading || row.saving"
101+
/>
102+
<span></span>
103+
</label>
104+
</div>
105+
106+
<div class="ger-cell ger-col-conditions">
107+
<span
108+
class="ger-conditions-pill"
109+
[class.ger-conditions-custom]="getFiltersCount(row) > 0"
110+
>
111+
{{ getFiltersLabel(row) }}
112+
</span>
113+
161114
<button
162115
type="button"
163-
class="btn btn-sm btn-outline-secondary"
164-
(click)="closeCreateTopicModal()"
165-
[disabled]="loading">
166-
Cancel
116+
class="ger-icon-btn ger-icon-btn-edit"
117+
(click)="openFilters(row)"
118+
[disabled]="readonly || loading || row.saving"
119+
aria-label="Edit conditions"
120+
title="Edit"
121+
>
122+
<i class="pi pi-pencil"></i>
167123
</button>
124+
</div>
168125

126+
<div class="ger-cell ger-col-actions">
169127
<button
170128
type="button"
171-
class="btn btn-sm btn-outline-primary"
172-
(click)="confirmCreateTopic()"
173-
[disabled]="loading">
174-
Create
129+
class="ger-icon-btn ger-icon-btn-danger"
130+
(click)="removeRow(i)"
131+
[disabled]="readonly || loading || row.saving || row.isDefault"
132+
aria-label="Delete topic"
133+
title="Delete"
134+
>
135+
<i class="pi pi-trash"></i>
175136
</button>
176137
</div>
177138
</div>
139+
140+
<div class="ger-empty" *ngIf="!rows.length">
141+
No topics configured yet.
142+
</div>
178143
</div>
179144
</div>
145+
146+
<app-add-event-topic-modal
147+
[visible]="addTopicModalOpen"
148+
[loading]="loading"
149+
(cancel)="closeAddTopicModal()"
150+
(add)="confirmAddTopicModal()"
151+
>
152+
</app-add-event-topic-modal>

0 commit comments

Comments
 (0)