Skip to content

Commit

Permalink
fix(admin-ui): Fix layout of Zone & CustomerGroup lists
Browse files Browse the repository at this point in the history
  • Loading branch information
@michaelbromley
michaelbromley committed Nov 23, 2021
1 parent fac803d commit cd8b93d
Show file tree
Hide file tree
Showing 2 changed files with 106 additions and 87 deletions.
98 changes: 53 additions & 45 deletions ...ui/src/lib/customer/src/components/customer-group-list/customer-group-list.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,58 +9,67 @@
</vdr-ab-right>
</vdr-action-bar>
<div class="group-wrapper">
<table class="table group-list" [class.expanded]="activeGroup$ | async" *ngIf="!(listIsEmpty$ | async); else emptyPlaceholder">
<tbody>
<tr *ngFor="let group of groups$ | async" [class.active]="group.id === (activeGroup$ | async)?.id">
<td class="left align-middle"><vdr-entity-info [entity]="group"></vdr-entity-info></td>
<td class="left align-middle"><vdr-chip [colorFrom]="group.id">{{ group.name }}</vdr-chip></td>
<td class="text-right align-middle">
<a
class="btn btn-link btn-sm"
[routerLink]="['./', { contents: group.id }]"
queryParamsHandling="preserve"
>
<clr-icon shape="view-list"></clr-icon>
{{ 'customer.view-group-members' | translate }}
</a>
</td>
<td class="align-middle">
<button class="btn btn-link btn-sm" (click)="update(group)">
<clr-icon shape="edit"></clr-icon>
{{ 'common.edit' | translate }}
</button>
</td>
<td class="align-middle">
<vdr-dropdown>
<button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger>
{{ 'common.actions' | translate }}
<clr-icon shape="caret down"></clr-icon>
<div class="group-list">
<table
class="table mt0"
[class.expanded]="activeGroup$ | async"
*ngIf="!(listIsEmpty$ | async); else emptyPlaceholder"
>
<tbody>
<tr
*ngFor="let group of groups$ | async"
[class.active]="group.id === (activeGroup$ | async)?.id"
>
<td class="left align-middle"><vdr-entity-info [entity]="group"></vdr-entity-info></td>
<td class="left align-middle">
<vdr-chip [colorFrom]="group.id">{{ group.name }}</vdr-chip>
</td>
<td class="text-right align-middle">
<a
class="btn btn-link btn-sm"
[routerLink]="['./', { contents: group.id }]"
queryParamsHandling="preserve"
>
<clr-icon shape="view-list"></clr-icon>
{{ 'customer.view-group-members' | translate }}
</a>
</td>
<td class="align-middle">
<button class="btn btn-link btn-sm" (click)="update(group)">
<clr-icon shape="edit"></clr-icon>
{{ 'common.edit' | translate }}
</button>
<vdr-dropdown-menu vdrPosition="bottom-right">
<button
class="button"
vdrDropdownItem
(click)="delete(group.id)"
[disabled]="!('DeleteCustomerGroup' | hasPermission)"
>
<clr-icon shape="trash" class="is-danger"></clr-icon>
{{ 'common.delete' | translate }}
</td>
<td class="align-middle">
<vdr-dropdown>
<button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger>
{{ 'common.actions' | translate }}
<clr-icon shape="caret down"></clr-icon>
</button>
</vdr-dropdown-menu>
</vdr-dropdown>
</td>
</tr>
</tbody>
</table>
<vdr-dropdown-menu vdrPosition="bottom-right">
<button
class="button"
vdrDropdownItem
(click)="delete(group.id)"
[disabled]="!('DeleteCustomerGroup' | hasPermission)"
>
<clr-icon shape="trash" class="is-danger"></clr-icon>
{{ 'common.delete' | translate }}
</button>
</vdr-dropdown-menu>
</vdr-dropdown>
</td>
</tr>
</tbody>
</table>
</div>
<ng-template #emptyPlaceholder>
<vdr-empty-placeholder></vdr-empty-placeholder>
</ng-template>
<div class="group-members" [class.expanded]="activeGroup$ | async">
<ng-container *ngIf="activeGroup$ | async as activeGroup">
<div class="flex">
<div class="header-title-row">
{{ activeGroup.name }} ({{ membersTotal$ | async }})
</div>
<div class="header-title-row">{{ activeGroup.name }} ({{ membersTotal$ | async }})</div>
<div class="flex-spacer"></div>
<button type="button" class="close-button" (click)="closeMembers()">
<clr-icon shape="close"></clr-icon>
Expand Down Expand Up @@ -105,4 +114,3 @@
</ng-container>
</div>
</div>

95 changes: 53 additions & 42 deletions packages/admin-ui/src/lib/settings/src/components/zone-list/zone-list.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,56 +2,67 @@
<vdr-ab-left> </vdr-ab-left>
<vdr-ab-right>
<vdr-action-bar-items locationId="zone-list"></vdr-action-bar-items>
<button class="btn btn-primary" *vdrIfPermissions="['CreateSettings', 'CreateZone']" (click)="create()">
<button
class="btn btn-primary"
*vdrIfPermissions="['CreateSettings', 'CreateZone']"
(click)="create()"
>
<clr-icon shape="plus"></clr-icon>
{{ 'settings.create-new-zone' | translate }}
</button>
</vdr-ab-right>
</vdr-action-bar>
<div class="zone-wrapper">
<table class="table zone-list">
<tbody>
<tr *ngFor="let zone of zones$ | async" [class.active]="zone.id === (activeZone$ | async)?.id">
<td class="left align-middle"><vdr-entity-info [entity]="zone"></vdr-entity-info></td>
<td class="left align-middle"><vdr-chip [colorFrom]="zone.name">{{ zone.name }}</vdr-chip></td>
<td class="text-right align-middle">
<a
class="btn btn-link btn-sm"
[routerLink]="['./', { contents: zone.id }]"
queryParamsHandling="preserve"
>
<clr-icon shape="view-list"></clr-icon>
{{ 'settings.view-zone-members' | translate }}
</a>
</td>
<td class="align-middle">
<button class="btn btn-link btn-sm" (click)="update(zone)">
<clr-icon shape="edit"></clr-icon>
{{ 'common.edit' | translate }}
</button>
</td>
<td class="align-middle">
<vdr-dropdown>
<button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger>
{{ 'common.actions' | translate }}
<clr-icon shape="caret down"></clr-icon>
<div class="zone-list">
<table class="table mt0">
<tbody>
<tr
*ngFor="let zone of zones$ | async"
[class.active]="zone.id === (activeZone$ | async)?.id"
>
<td class="left align-middle"><vdr-entity-info [entity]="zone"></vdr-entity-info></td>
<td class="left align-middle">
<vdr-chip [colorFrom]="zone.name">{{ zone.name }}</vdr-chip>
</td>
<td class="text-right align-middle">
<a
class="btn btn-link btn-sm"
[routerLink]="['./', { contents: zone.id }]"
queryParamsHandling="preserve"
>
<clr-icon shape="view-list"></clr-icon>
{{ 'settings.view-zone-members' | translate }}
</a>
</td>
<td class="align-middle">
<button class="btn btn-link btn-sm" (click)="update(zone)">
<clr-icon shape="edit"></clr-icon>
{{ 'common.edit' | translate }}
</button>
<vdr-dropdown-menu vdrPosition="bottom-right">
<button
class="button"
vdrDropdownItem
(click)="delete(zone.id)"
[disabled]="!(['DeleteSettings', 'DeleteZone'] | hasPermission)"
>
<clr-icon shape="trash" class="is-danger"></clr-icon>
{{ 'common.delete' | translate }}
</td>
<td class="align-middle">
<vdr-dropdown>
<button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger>
{{ 'common.actions' | translate }}
<clr-icon shape="caret down"></clr-icon>
</button>
</vdr-dropdown-menu>
</vdr-dropdown>
</td>
</tr>
</tbody>
</table>
<vdr-dropdown-menu vdrPosition="bottom-right">
<button
class="button"
vdrDropdownItem
(click)="delete(zone.id)"
[disabled]="!(['DeleteSettings', 'DeleteZone'] | hasPermission)"
>
<clr-icon shape="trash" class="is-danger"></clr-icon>
{{ 'common.delete' | translate }}
</button>
</vdr-dropdown-menu>
</vdr-dropdown>
</td>
</tr>
</tbody>
</table>
</div>
<div class="zone-members" [class.expanded]="activeZone$ | async">
<ng-container *ngIf="activeZone$ | async as activeZone">
<vdr-zone-member-list
Expand Down

0 comments on commit cd8b93d

Please sign in to comment.