CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

WEB-754 Add drop-down bar for name editing (#3183)

Browse Source
This commit is contained in:
Soni Jay
2026-02-18 18:28:30 -06:00
committed by GitHub
parent b7e9068556
commit 5fa1166f4f
4 changed files with 156 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/system/manage-data-tables/create-data-table/create-data-table.component.html
+26 -8
View File
@@ -193,14 +193,32 @@
</ng-container> </ng-container>
<ng-container matColumnDef="actions"> <ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Actions' | translate }}</th> <th mat-header-cell *matHeaderCellDef class="actions-column">
<td mat-cell *matCellDef="let column" class="gap-15percent"> {{ 'labels.inputs.Actions' | translate }}
<button type="button" color="primary" mat-icon-button (click)="editColumn(column)"> </th>
<fa-icon icon="edit" size="lg"></fa-icon> <td mat-cell *matCellDef="let column" class="actions-column">
</button> <div class="actions-wrapper">
<button type="button" color="warn" mat-icon-button (click)="deleteColumn(column)"> <button
<fa-icon icon="trash" size="lg"></fa-icon> type="button"
</button> color="primary"
mat-icon-button
(click)="editColumn(column)"
matTooltip="{{ 'labels.buttons.Edit' | translate }}"
aria-label="{{ 'labels.buttons.Edit' | translate }}"
>
<fa-icon icon="edit" size="sm"></fa-icon>
</button>
<button
type="button"
color="warn"
mat-icon-button
(click)="deleteColumn(column)"
matTooltip="{{ 'labels.buttons.Delete' | translate }}"
aria-label="{{ 'labels.buttons.Delete' | translate }}"
>
<fa-icon icon="trash" size="sm"></fa-icon>
</button>
</div>
</td> </td>
</ng-container> </ng-container>
src/app/system/manage-data-tables/create-data-table/create-data-table.component.scss
+53 -1
View File
@@ -19,6 +19,58 @@
} }
} }
table { .mat-mdc-table {
width: 100%; width: 100%;
overflow-x: auto;
display: block;
}
.mat-mdc-header-row,
.mat-mdc-row {
display: table;
width: 100%;
table-layout: fixed;
min-width: 800px;
}
.actions-column {
width: 100px !important;
min-width: 100px !important;
max-width: 100px !important;
text-align: center;
position: sticky;
right: 0;
background: #fff;
z-index: 1;
}
.actions-wrapper {
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
}
.actions-wrapper .mat-mdc-icon-button {
width: 36px;
height: 36px;
padding: 6px;
}
.actions-wrapper fa-icon {
font-size: 14px;
}
th.mat-mdc-header-cell:first-child,
td.mat-mdc-cell:first-child {
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
th.mat-mdc-header-cell:not(.actions-column, :first-child),
td.mat-mdc-cell:not(.actions-column, :first-child) {
width: 80px;
min-width: 80px;
} }
src/app/system/manage-data-tables/edit-data-table/edit-data-table.component.html
+24 -10
View File
@@ -168,19 +168,33 @@
</ng-container> </ng-container>
<ng-container matColumnDef="actions"> <ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="center"> <th mat-header-cell *matHeaderCellDef class="center actions-column">
{{ 'labels.inputs.Actions' | translate }} {{ 'labels.inputs.Actions' | translate }}
</th> </th>
<td mat-cell *matCellDef="let column" class="center gap-15percent"> <td mat-cell *matCellDef="let column" class="center actions-column">
@if (!column.system) { @if (!column.system) {
<button type="button" color="primary" mat-icon-button (click)="editColumn(column)"> <div class="actions-wrapper">
<fa-icon icon="edit" size="lg"></fa-icon> <button
</button> type="button"
} color="primary"
@if (!column.system) { mat-icon-button
<button type="button" color="warn" mat-icon-button (click)="deleteColumn(column)"> (click)="editColumn(column)"
<fa-icon icon="trash" size="lg"></fa-icon> matTooltip="{{ 'labels.buttons.Edit' | translate }}"
</button> aria-label="{{ 'labels.buttons.Edit' | translate }}"
>
<fa-icon icon="edit" size="sm"></fa-icon>
</button>
<button
type="button"
color="warn"
mat-icon-button
(click)="deleteColumn(column)"
matTooltip="{{ 'labels.buttons.Delete' | translate }}"
aria-label="{{ 'labels.buttons.Delete' | translate }}"
>
<fa-icon icon="trash" size="sm"></fa-icon>
</button>
</div>
} }
</td> </td>
</ng-container> </ng-container>
src/app/system/manage-data-tables/edit-data-table/edit-data-table.component.scss
+53 -1
View File
@@ -6,6 +6,58 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. * file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/ */
table { .mat-mdc-table {
width: 100%; width: 100%;
overflow-x: auto;
display: block;
}
.mat-mdc-header-row,
.mat-mdc-row {
display: table;
width: 100%;
table-layout: fixed;
min-width: 800px;
}
.actions-column {
width: 100px !important;
min-width: 100px !important;
max-width: 100px !important;
text-align: center;
position: sticky;
right: 0;
background: #fff;
z-index: 1;
}
.actions-wrapper {
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
}
.actions-wrapper .mat-mdc-icon-button {
width: 36px;
height: 36px;
padding: 6px;
}
.actions-wrapper fa-icon {
font-size: 14px;
}
th.mat-mdc-header-cell:first-child,
td.mat-mdc-cell:first-child {
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
th.mat-mdc-header-cell:not(.actions-column, :first-child),
td.mat-mdc-cell:not(.actions-column, :first-child) {
width: 80px;
min-width: 80px;
} }