shubhamsharma9199
6f5dee83fb
fix(ui): move inline styles to scss and fix spacing fix(ui): redesign card component, move inline styles to scss, and fix spacing
55 lines
2.0 KiB
HTML
55 lines
2.0 KiB
HTML
<div class="container layout-row gap-3percent">
|
|
<mat-card class="group-card flex-fill layout-column gap-2percent">
|
|
<mat-form-field class="flex-30">
|
|
<mat-label>{{ 'labels.inputs.Add Groups' | translate }}</mat-label>
|
|
<input matInput [formControl]="groupChoice" [matAutocomplete]="groupsAutocomplete" />
|
|
</mat-form-field>
|
|
|
|
<mat-autocomplete autoActiveFirstOption #groupsAutocomplete="matAutocomplete" [displayWith]="displayGroup">
|
|
<mat-option *ngFor="let group of groupsData" [value]="group">
|
|
{{ group.name }}
|
|
</mat-option>
|
|
</mat-autocomplete>
|
|
|
|
<div class="mat-table">
|
|
<div class="mat-header-row">
|
|
<div class="mat-header-cell">{{ 'labels.inputs.Group Details' | translate }}</div>
|
|
<button mat-icon-button (click)="addGroup()">
|
|
<fa-icon icon="plus"></fa-icon>
|
|
</button>
|
|
</div>
|
|
<div class="mat-row">
|
|
<div class="mat-cell">{{ 'labels.inputs.name' | translate }}</div>
|
|
<div class="mat-cell">{{ groupChoice.value.name }}</div>
|
|
</div>
|
|
<div class="mat-row">
|
|
<div class="mat-cell">{{ 'labels.inputs.Id' | translate }}</div>
|
|
<div class="mat-cell">{{ groupChoice.value.id }}</div>
|
|
</div>
|
|
<div class="mat-row">
|
|
<div class="mat-cell">{{ 'labels.inputs.Office' | translate }}</div>
|
|
<div class="mat-cell">{{ groupChoice.value.officeName }}</div>
|
|
</div>
|
|
</div>
|
|
</mat-card>
|
|
|
|
<mat-card class="flex-50">
|
|
<h3 matSubheader>{{ 'labels.heading.Group Members' | translate }}</h3>
|
|
|
|
<mat-nav-list *ngIf="groupMembers?.length">
|
|
<div mat-list-item class="member-item center-gap" *ngFor="let group of groupMembers; index as i">
|
|
<span matLine class="p-t-10">{{ group.name }}</span>
|
|
<button
|
|
mat-icon-button
|
|
color="warn"
|
|
class="delete-btn"
|
|
aria-label="Remove group"
|
|
(click)="removeGroup(i, group)"
|
|
>
|
|
<fa-icon icon="trash"></fa-icon>
|
|
</button>
|
|
</div>
|
|
</mat-nav-list>
|
|
</mat-card>
|
|
</div>
|