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

style(audit-trails): align search filters inside one box layout (#2904)

Browse Source
This commit is contained in:
Shubham Kumar
2025-12-15 12:37:08 -06:00
committed by GitHub
parent e9376f6305
commit b2abb26904
2 changed files with 131 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/system/audit-trails/audit-trails.component.html
+126 -108
View File
@@ -5,127 +5,145 @@
</button> </button>
</div> </div>
<div class="container layout-row-wrap gap-8px responsive-column"> <mat-card class="container audit-filters-card">
<mat-form-field class="flex-48"> <mat-card-content>
<mat-label>{{ 'labels.inputs.Resource ID' | translate }}</mat-label> <div class="layout-row-wrap gap-8px responsive-column">
<input matInput [formControl]="resourceId" /> <mat-form-field class="flex-48">
</mat-form-field> <mat-label>{{ 'labels.inputs.Resource ID' | translate }}</mat-label>
<input matInput [formControl]="resourceId" />
</mat-form-field>
<mat-form-field class="flex-48"> <mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Status' | translate }}</mat-label> <mat-label>{{ 'labels.inputs.Status' | translate }}</mat-label>
<mat-select [formControl]="processingResult" (selectionChange)="applyFilter($event.value, 'processingResult')"> <mat-select [formControl]="processingResult" (selectionChange)="applyFilter($event.value, 'processingResult')">
@for (processingResult of auditTrailSearchTemplateData.processingResults; track processingResult) { @for (processingResult of auditTrailSearchTemplateData.processingResults; track processingResult) {
<mat-option [value]="processingResult.id"> <mat-option [value]="processingResult.id">
{{ processingResult.processingResult }} {{ processingResult.processingResult }}
</mat-option> </mat-option>
} }
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field class="flex-48"> <mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.User' | translate }}</mat-label> <mat-label>{{ 'labels.inputs.User' | translate }}</mat-label>
<input matInput [formControl]="user" [matAutocomplete]="userNameAutocomplete" /> <input matInput [formControl]="user" [matAutocomplete]="userNameAutocomplete" />
</mat-form-field> </mat-form-field>
<mat-form-field class="flex-48"> <mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Action' | translate }}</mat-label> <mat-label>{{ 'labels.inputs.Action' | translate }}</mat-label>
<input matInput [formControl]="actionName" [matAutocomplete]="actionNameAutocomplete" /> <input matInput [formControl]="actionName" [matAutocomplete]="actionNameAutocomplete" />
</mat-form-field> </mat-form-field>
<mat-form-field class="flex-48"> <mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Entity' | translate }}</mat-label> <mat-label>{{ 'labels.inputs.Entity' | translate }}</mat-label>
<input matInput [formControl]="entityName" [matAutocomplete]="entityNameAutocomplete" /> <input matInput [formControl]="entityName" [matAutocomplete]="entityNameAutocomplete" />
</mat-form-field> </mat-form-field>
<mat-form-field class="flex-48"> <mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Checker' | translate }}</mat-label> <mat-label>{{ 'labels.inputs.Checker' | translate }}</mat-label>
<input matInput [formControl]="checker" [matAutocomplete]="checkerAutocomplete" /> <input matInput [formControl]="checker" [matAutocomplete]="checkerAutocomplete" />
</mat-form-field> </mat-form-field>
<div class="flex-48 layout-row-wrap gap-8px"> <div class="flex-48 layout-row-wrap gap-8px">
<mat-form-field class="flex-60" (click)="fromDatePicker.open()"> <mat-form-field class="flex-60" (click)="fromDatePicker.open()">
<mat-label>{{ 'labels.inputs.Maker From Date' | translate }}</mat-label> <mat-label>{{ 'labels.inputs.Maker From Date' | translate }}</mat-label>
<input <input
matInput matInput
[min]="minDate" [min]="minDate"
[max]="maxDate" [max]="maxDate"
[matDatepicker]="fromDatePicker" [matDatepicker]="fromDatePicker"
[formControl]="fromDate" [formControl]="fromDate"
placeholder="yyyy-MM-dd" placeholder="yyyy-MM-dd"
/> />
<mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
<mat-datepicker #fromDatePicker></mat-datepicker> <mat-datepicker #fromDatePicker></mat-datepicker>
</mat-form-field> </mat-form-field>
<mat-form-field class="flex-38"> <mat-form-field class="flex-38">
<mat-label>{{ 'labels.inputs.Time' | translate }}</mat-label> <mat-label>{{ 'labels.inputs.Time' | translate }}</mat-label>
<input matInput type="time" step="1" [formControl]="fromTime" placeholder="HH:MM:SS" class="time-input" /> <input matInput type="time" step="1" [formControl]="fromTime" placeholder="HH:MM:SS" class="time-input" />
</mat-form-field> </mat-form-field>
</div> </div>
<div class="flex-48 layout-row-wrap gap-8px"> <div class="flex-48 layout-row-wrap gap-8px">
<mat-form-field class="flex-60" (click)="toDatePicker.open()"> <mat-form-field class="flex-60" (click)="toDatePicker.open()">
<mat-label>{{ 'labels.inputs.Maker To Date' | translate }}</mat-label> <mat-label>{{ 'labels.inputs.Maker To Date' | translate }}</mat-label>
<input <input
matInput matInput
[min]="minDate" [min]="minDate"
[max]="maxDate" [max]="maxDate"
[matDatepicker]="toDatePicker" [matDatepicker]="toDatePicker"
[formControl]="toDate" [formControl]="toDate"
placeholder="yyyy-MM-dd" placeholder="yyyy-MM-dd"
/> />
<mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
<mat-datepicker #toDatePicker></mat-datepicker> <mat-datepicker #toDatePicker></mat-datepicker>
</mat-form-field> </mat-form-field>
<mat-form-field class="flex-38"> <mat-form-field class="flex-38">
<mat-label>{{ 'labels.inputs.Time' | translate }}</mat-label> <mat-label>{{ 'labels.inputs.Time' | translate }}</mat-label>
<input matInput type="time" step="1" [formControl]="toTime" placeholder="HH:MM:SS" class="time-input" /> <input matInput type="time" step="1" [formControl]="toTime" placeholder="HH:MM:SS" class="time-input" />
</mat-form-field> </mat-form-field>
</div> </div>
<div class="flex-48 layout-row-wrap gap-8px"> <div class="flex-48 layout-row-wrap gap-8px">
<mat-form-field class="flex-60" (click)="checkedFromDatePicker.open()"> <mat-form-field class="flex-60" (click)="checkedFromDatePicker.open()">
<mat-label>{{ 'labels.inputs.Checker From Date' | translate }}</mat-label> <mat-label>{{ 'labels.inputs.Checker From Date' | translate }}</mat-label>
<input <input
matInput matInput
[min]="minDate" [min]="minDate"
[max]="maxDate" [max]="maxDate"
[matDatepicker]="checkedFromDatePicker" [matDatepicker]="checkedFromDatePicker"
[formControl]="checkedFromDate" [formControl]="checkedFromDate"
placeholder="yyyy-MM-dd" placeholder="yyyy-MM-dd"
/> />
<mat-datepicker-toggle matSuffix [for]="checkedFromDatePicker"></mat-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="checkedFromDatePicker"></mat-datepicker-toggle>
<mat-datepicker #checkedFromDatePicker></mat-datepicker> <mat-datepicker #checkedFromDatePicker></mat-datepicker>
</mat-form-field> </mat-form-field>
<mat-form-field class="flex-38"> <mat-form-field class="flex-38">
<mat-label>{{ 'labels.inputs.Time' | translate }}</mat-label> <mat-label>{{ 'labels.inputs.Time' | translate }}</mat-label>
<input matInput type="time" step="1" [formControl]="checkedFromTime" placeholder="HH:MM:SS" class="time-input" /> <input
</mat-form-field> matInput
</div> type="time"
step="1"
[formControl]="checkedFromTime"
placeholder="HH:MM:SS"
class="time-input"
/>
</mat-form-field>
</div>
<div class="flex-48 layout-row-wrap gap-8px"> <div class="flex-48 layout-row-wrap gap-8px">
<mat-form-field class="flex-60" (click)="checkedToDatePicker.open()"> <mat-form-field class="flex-60" (click)="checkedToDatePicker.open()">
<mat-label>{{ 'labels.inputs.Checked To Date' | translate }}</mat-label> <mat-label>{{ 'labels.inputs.Checked To Date' | translate }}</mat-label>
<input <input
matInput matInput
[min]="minDate" [min]="minDate"
[max]="maxDate" [max]="maxDate"
[matDatepicker]="checkedToDatePicker" [matDatepicker]="checkedToDatePicker"
[formControl]="checkedToDate" [formControl]="checkedToDate"
placeholder="yyyy-MM-dd" placeholder="yyyy-MM-dd"
/> />
<mat-datepicker-toggle matSuffix [for]="checkedToDatePicker"></mat-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="checkedToDatePicker"></mat-datepicker-toggle>
<mat-datepicker #checkedToDatePicker></mat-datepicker> <mat-datepicker #checkedToDatePicker></mat-datepicker>
</mat-form-field> </mat-form-field>
<mat-form-field class="flex-38"> <mat-form-field class="flex-38">
<mat-label>{{ 'labels.inputs.Time' | translate }}</mat-label> <mat-label>{{ 'labels.inputs.Time' | translate }}</mat-label>
<input matInput type="time" step="1" [formControl]="checkedToTime" placeholder="HH:MM:SS" class="time-input" /> <input
</mat-form-field> matInput
</div> type="time"
</div> step="1"
[formControl]="checkedToTime"
placeholder="HH:MM:SS"
class="time-input"
/>
</mat-form-field>
</div>
</div>
</mat-card-content>
</mat-card>
<!-- Autocomplete data --> <!-- Autocomplete data -->
<mat-autocomplete autoActiveFirstOption #userNameAutocomplete="matAutocomplete" [displayWith]="displayUserName"> <mat-autocomplete autoActiveFirstOption #userNameAutocomplete="matAutocomplete" [displayWith]="displayUserName">
src/app/system/audit-trails/audit-trails.component.scss
+5
View File
@@ -16,3 +16,8 @@ table {
.gap-8px { .gap-8px {
gap: 8px; gap: 8px;
} }
.audit-filters-card {
margin-bottom: 1.5rem;
padding: 0.75rem 1rem;
}