Skip to content

Commit 72fd830

Browse files
ArtuomkaArtuomka
authored
Merge branch 'main' into backend_bug_fixes
2 parents 294b5bc + 890feb0 commit 72fd830

4 files changed

Lines changed: 167 additions & 24 deletions

File tree

‎frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css‎

Lines changed: 63 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -175,12 +175,69 @@
175175
}
176176

177177
.related-records__table-name {
178-
flex: 1 0 auto;
178+
flex: 1 1 auto;
179+
min-width: 0;
180+
display: flex;
181+
align-items: center;
182+
gap: 8px;
183+
margin-right: 8px;
184+
}
185+
186+
.related-records__table-name-text {
187+
overflow: hidden;
188+
text-overflow: ellipsis;
189+
white-space: nowrap;
190+
min-width: 0;
179191
}
180192

181193
.related-records__actions {
182-
flex-grow: 0;
194+
flex: 0 0 auto;
183195
justify-content: flex-end;
196+
/* Stay clickable even when the panel is disabled (no related records). */
197+
pointer-events: auto;
198+
}
199+
200+
/* Keep the action icons fully dark in every panel state (enabled or
201+
disabled), instead of Material's lighter default icon color. */
202+
.related-records__actions .mat-icon {
203+
color: rgba(0, 0, 0, 0.87);
204+
}
205+
206+
@media (prefers-color-scheme: dark) {
207+
.related-records__actions .mat-icon {
208+
color: rgba(255, 255, 255, 0.87);
209+
}
210+
}
211+
212+
.related-records__empty-mark {
213+
flex: 0 0 auto;
214+
font-size: 11px;
215+
line-height: 16px;
216+
text-transform: uppercase;
217+
letter-spacing: 0.04em;
218+
padding: 1px 6px;
219+
border-radius: 8px;
220+
color: rgba(0, 0, 0, 0.5);
221+
background: rgba(0, 0, 0, 0.06);
222+
}
223+
224+
.related-records__add-button {
225+
flex: 0 0 auto;
226+
white-space: nowrap;
227+
}
228+
229+
/* Keep header content legible when the panel is disabled (no related
230+
records) — disabling only blocks expand/collapse, not the actions. */
231+
.related-records__panel ::ng-deep .mat-expansion-panel-header[aria-disabled='true'] {
232+
color: inherit;
233+
cursor: default;
234+
}
235+
236+
@media (prefers-color-scheme: dark) {
237+
.related-records__empty-mark {
238+
color: rgba(255, 255, 255, 0.6);
239+
background: rgba(255, 255, 255, 0.1);
240+
}
184241
}
185242

186243
.related-record {
@@ -207,3 +264,7 @@
207264
.related-records__panel ::ng-deep .mat-expansion-panel-body {
208265
padding: 0 8px;
209266
}
267+
.related-record ::ng-deep .mdc-list-item__end {
268+
margin-right: -8px !important;
269+
margin-left: 4px !important;
270+
}

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

Lines changed: 30 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -31,19 +31,33 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
3131
<h3 class="related-records-section__title">Related records</h3>
3232

3333
<mat-accordion multi="true">
34-
<mat-expansion-panel *ngFor="let referencedTable of referencedTables; let i = index" class="related-records__panel">
34+
<mat-expansion-panel *ngFor="let referencedTable of referencedTables; let i = index" class="related-records__panel"
35+
[disabled]="referencedRecords[referencedTable.table_name] && !referencedRecords[referencedTable.table_name].rows.length"
36+
[hideToggle]="referencedRecords[referencedTable.table_name] && !referencedRecords[referencedTable.table_name].rows.length">
3537
<mat-expansion-panel-header class="related-records__header">
36-
<mat-panel-title class="related-records__table-name"> {{referencedTable.displayTableName}} </mat-panel-title>
38+
<mat-panel-title class="related-records__table-name">
39+
<span class="related-records__table-name-text" [matTooltip]="referencedTable.displayTableName">{{referencedTable.displayTableName}}</span>
40+
<span *ngIf="referencedRecords[referencedTable.table_name] && !referencedRecords[referencedTable.table_name].rows.length"
41+
class="related-records__empty-mark">
42+
Empty
43+
</span>
44+
</mat-panel-title>
3745
<mat-panel-description class="related-records__actions">
3846
<mat-spinner *ngIf="!referencedRecords[referencedTable.table_name]" diameter="20"></mat-spinner>
39-
<span *ngIf="referencedRecords[referencedTable.table_name] && !referencedRecords[referencedTable.table_name].rows.length">Absent</span>
40-
<a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name] && referencedRecords[referencedTable.table_name].rows.length"
47+
<a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name]" target="_blank"
48+
class="related-records__add-button"
49+
routerLink="/dashboard/{{selectedRow.connectionID}}/{{referencedTable.table_name}}/entry"
50+
matTooltip="Add a new record to {{referencedTable.displayTableName}}"
51+
(click)="handleClose(); $event.stopPropagation()">
52+
<mat-icon>add</mat-icon>
53+
</a>
54+
<!--<a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name] && referencedRecords[referencedTable.table_name].rows.length"
4155
target="_blank"
4256
[routerLink]="['/dashboard', selectedRow.connectionID, referencedTable.table_name, 'settings']"
4357
matTooltip="Set up records view"
4458
(click)="handleClose()">
4559
<mat-icon>settings</mat-icon>
46-
</a>
60+
</a>-->
4761
<a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name]" target="_blank"
4862
routerLink="/dashboard/{{selectedRow.connectionID}}/{{referencedTable.table_name}}"
4963
[queryParams]="referencedTablesURLParams[i]"
@@ -70,14 +84,17 @@ <h3 class="related-records-section__title">Related records</h3>
7084
</span>
7185
</span>
7286

73-
<a matListItemMeta mat-icon-button
74-
class="related-record__open"
75-
matTooltip="Open record"
76-
[routerLink]="['/dashboard', selectedRow.connectionID, referencedTable.table_name, 'entry']"
77-
[queryParams]="referencedRecords[referencedTable.table_name]?.links[i]"
78-
(click)="handleClose()">
79-
<mat-icon>chevron_right</mat-icon>
80-
</a>
87+
<div matListItemMeta>
88+
<a mat-icon-button
89+
class="related-record__open"
90+
matTooltip="Open record"
91+
[routerLink]="['/dashboard', selectedRow.connectionID, referencedTable.table_name, 'entry']"
92+
[queryParams]="referencedRecords[referencedTable.table_name]?.links[i]"
93+
(click)="handleClose()">
94+
<mat-icon>chevron_right</mat-icon>
95+
</a>
96+
</div>
97+
8198
</mat-list-item>
8299
</mat-list>
83100
</mat-expansion-panel>

‎frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css‎

Lines changed: 58 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -156,12 +156,68 @@
156156
}
157157

158158
.related-records__table-name {
159-
flex: 1 0 auto;
159+
flex: 1 1 auto;
160+
min-width: 0;
161+
display: flex;
162+
align-items: center;
163+
gap: 8px;
164+
margin-right: 8px;
165+
}
166+
167+
.related-records__table-name-text {
168+
overflow: hidden;
169+
text-overflow: ellipsis;
170+
white-space: nowrap;
171+
min-width: 0;
160172
}
161173

162174
.related-records__actions {
163-
flex-grow: 0;
175+
flex: 0 0 auto;
164176
justify-content: flex-end;
177+
/* Stay clickable even when the panel is disabled (no related records). */
178+
pointer-events: auto;
179+
}
180+
181+
/* Keep the action icons fully dark in every panel state (enabled or
182+
disabled), instead of Material's lighter default icon color. */
183+
.related-records__actions .mat-icon {
184+
color: rgba(0, 0, 0, 0.87);
185+
}
186+
187+
@media (prefers-color-scheme: dark) {
188+
.related-records__actions .mat-icon {
189+
color: rgba(255, 255, 255, 0.87);
190+
}
191+
}
192+
193+
/* Keep header content legible when the panel is disabled (no related
194+
records) — disabling only blocks expand/collapse, not the actions. */
195+
.related-records__panel ::ng-deep .mat-expansion-panel-header[aria-disabled='true'] {
196+
color: inherit;
197+
cursor: default;
198+
}
199+
200+
.related-records__empty-mark {
201+
flex: 0 0 auto;
202+
font-size: 11px;
203+
line-height: 16px;
204+
text-transform: uppercase;
205+
letter-spacing: 0.04em;
206+
padding: 1px 6px;
207+
border-radius: 8px;
208+
color: rgba(0, 0, 0, 0.5);
209+
background: rgba(0, 0, 0, 0.06);
210+
}
211+
212+
.related-records__add-button {
213+
flex: 0 0 auto;
214+
}
215+
216+
@media (prefers-color-scheme: dark) {
217+
.related-records__empty-mark {
218+
color: rgba(255, 255, 255, 0.6);
219+
background: rgba(255, 255, 255, 0.1);
220+
}
165221
}
166222

167223
.related-record {

‎frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.html‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -77,16 +77,25 @@ <h3>
7777
</h3>
7878

7979
<mat-accordion multi="true">
80-
<mat-expansion-panel *ngFor="let referencedTable of referencedTables; let i = index" class="related-records__panel">
80+
<mat-expansion-panel *ngFor="let referencedTable of referencedTables; let i = index" class="related-records__panel"
81+
[disabled]="referencedRecords[referencedTable.table_name] && !referencedRecords[referencedTable.table_name].rawRows.length"
82+
[hideToggle]="referencedRecords[referencedTable.table_name] && !referencedRecords[referencedTable.table_name].rawRows.length">
8183
<mat-expansion-panel-header>
82-
<mat-panel-title class="related-records__table-name"> {{referencedTable.displayTableName}} </mat-panel-title>
84+
<mat-panel-title class="related-records__table-name">
85+
<span class="related-records__table-name-text" [matTooltip]="referencedTable.displayTableName">{{referencedTable.displayTableName}}</span>
86+
<span *ngIf="referencedRecords[referencedTable.table_name] && !referencedRecords[referencedTable.table_name].rawRows.length"
87+
class="related-records__empty-mark">
88+
Empty
89+
</span>
90+
</mat-panel-title>
8391
<mat-panel-description class="related-records__actions">
8492
<mat-spinner *ngIf="!referencedRecords[referencedTable.table_name]" diameter="20"></mat-spinner>
85-
<span *ngIf="referencedRecords[referencedTable.table_name] && !referencedRecords[referencedTable.table_name].rawRows.length">Absent</span>
86-
<a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name] && referencedRecords[referencedTable.table_name].rawRows.length"
87-
[routerLink]="['/dashboard', connectionID, referencedTable.table_name, 'settings']"
88-
matTooltip="Set up records view">
89-
<mat-icon>settings</mat-icon>
93+
<a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name]" target="_blank"
94+
class="related-records__add-button"
95+
routerLink="/dashboard/{{connectionID}}/{{referencedTable.table_name}}/entry"
96+
matTooltip="Add a new record to {{referencedTable.displayTableName}}"
97+
(click)="$event.stopPropagation()">
98+
<mat-icon>add</mat-icon>
9099
</a>
91100
<a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name]"
92101
routerLink="/dashboard/{{connectionID}}/{{referencedTable.table_name}}"

0 commit comments

Comments
 (0)