Gagandeep/syscom-master-admin-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new design implement for login screen, organization onboarding form changes, new filter implement in all screens, remove icons from validation,

Browse Source
This commit is contained in:
Gagan7900
2026-07-29 19:12:51 +05:30
parent 0907e0f5dc
commit 4838e16dc8
40 changed files with 2407 additions and 793 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/features/global-masters/cities/pages/city-list/city-list.html
+73 -61
View File
@@ -1,63 +1,3 @@
<app-filter-card title="Filter" titleIcon="ti ti-filter" headerClass="!py-2" bodyClass="!px-4 !py-2.5">
<form [formGroup]="filterForm" (ngSubmit)="onApplyFilter($event)" autocomplete="off" class="grid w-full grid-cols-12 items-end gap-3">
<div class="col-span-12 sm:col-span-5 lg:col-span-2">
<app-autocomplete
formControlName="countryId"
inputId="city-country-filter"
variant="floating"
size="sm"
label="Country"
placeholder="Search country"
[searchFn]="filterCountrySearchFn"
[valueWith]="filterCountryValueFn"
[displayWith]="filterCountryDisplayFn"
[selectedItem]="selectedCountry()"
[minSearchLength]="0"
[debounceTime]="300"
[limit]="50"
[clearable]="true"
[hideValidation]="true"
wrapperClass="!mb-0 w-full"
(itemSelected)="onFilterCountryChanged($event)"
/>
</div>
<div class="col-span-12 sm:col-span-5 lg:col-span-2">
<app-autocomplete
formControlName="stateId"
inputId="city-state-filter"
variant="floating"
size="sm"
label="State"
placeholder="Search state"
[searchFn]="filterStateSearchFn"
[valueWith]="filterStateValueFn"
[displayWith]="filterStateDisplayFn"
[selectedItem]="selectedFilterState()"
[minSearchLength]="0"
[debounceTime]="300"
[limit]="50"
[clearable]="true"
[hideValidation]="true"
wrapperClass="!mb-0 w-full"
(itemSelected)="onFilterStateChanged($event)"
/>
</div>
<div class="col-span-12 sm:col-span-2 lg:col-span-1">
<app-button
action="custom"
label="Filter"
icon="ti ti-filter"
variant="primary-full"
type="button"
size="sm"
className="!rounded-full shadow-sm !mb-0 min-h-8 w-full md:!w-auto"
(buttonClicked)="onApplyFilter($event)"
/>
</div>
</form>
</app-filter-card>
<app-data-table
[columns]="columns()"
[rows]="tableStore.rows()"
@@ -69,6 +9,8 @@
buttonTitle="Add"
[showSearch]="true"
[showAddButton]="true"
[showFilterButton]="true"
[filterActive]="showFilters()"
searchPlaceholder="Search cities..."
[searchDebounceTime]="300"
toolTip="Add City"
@@ -77,7 +19,77 @@
(pageChanged)="tableStore.onPageChange($event)"
(sortChanged)="tableStore.onSortChange($event)"
(actionClicked)="onActionClick($event)"
/>
(filterClicked)="onToggleFilters()">
<ng-template appDataTableToolbar>
<form [formGroup]="filterForm" (ngSubmit)="onApplyFilter($event)" autocomplete="off"
class="flex flex-wrap items-end gap-3 w-full">
<div class="w-64 min-w-[200px]">
<app-autocomplete
formControlName="countryId"
inputId="city-country-filter"
variant="floating"
size="sm"
label="Country"
placeholder="Search country"
[searchFn]="filterCountrySearchFn"
[valueWith]="filterCountryValueFn"
[displayWith]="filterCountryDisplayFn"
[selectedItem]="selectedCountry()"
[minSearchLength]="0"
[debounceTime]="300"
[limit]="50"
[clearable]="true"
[hideValidation]="true"
wrapperClass="!mb-0 w-full"
(itemSelected)="onFilterCountryChanged($event)"
/>
</div>
<div class="w-64 min-w-[200px]">
<app-autocomplete
formControlName="stateId"
inputId="city-state-filter"
variant="floating"
size="sm"
label="State"
placeholder="Search state"
[searchFn]="filterStateSearchFn"
[valueWith]="filterStateValueFn"
[displayWith]="filterStateDisplayFn"
[selectedItem]="selectedFilterState()"
[minSearchLength]="0"
[debounceTime]="300"
[limit]="50"
[clearable]="true"
[hideValidation]="true"
wrapperClass="!mb-0 w-full"
(itemSelected)="onFilterStateChanged($event)"
/>
</div>
<div class="flex items-center gap-2">
<app-button
action="custom"
label="Apply"
icon="ti ti-filter"
variant="primary-full"
type="submit"
size="sm"
className="!rounded-full shadow-sm !mb-0 min-h-8"
/>
<app-button
action="custom"
label="Reset"
icon="ti ti-refresh"
variant="outline-primary"
type="button"
size="sm"
className="!rounded-full shadow-sm !mb-0 min-h-8"
(buttonClicked)="onResetFilter()"
/>
</div>
</form>
</ng-template>
</app-data-table>
<app-confirm-dialog
title="Delete City"
src/app/features/global-masters/cities/pages/city-list/city-list.ts
+9 -3
View File
@@ -11,7 +11,7 @@ import { StateLookupDto } from '../../../states/models/state.model';
import { CityService } from '../../data-access/city.service';
import { CountryService } from '../../../countries/data-access/country.service';
import { StateService } from '../../../states/data-access/state.service';
import { DataTable } from '../../../../../shared/components/data-table/data-table';
import { DataTable, DataTableToolbarDirective } from '../../../../../shared/components/data-table/data-table';
import { DataTableStore } from '../../../../../shared/components/data-table/data-table.store';
import {
DataTableAction,
@@ -25,7 +25,6 @@ import {
AutocompleteSearchFn,
AutocompleteValueFn
} from '../../../../../shared/components/form/autocomplete/autocomplete.types';
import { FilterCard } from '../../../../../shared/components/filter-card/filter-card';
import { Button } from '../../../../../shared/components/button/button';
import { ConfirmDialog } from '../../../../../shared/components/confirm-dialog/confirm-dialog';
import { CityFormModalComponent } from '../../components/city-form-modal/city-form-modal';
@@ -51,9 +50,9 @@ interface CityTableRow extends DataTableRecord {
standalone: true,
imports: [
DataTable,
DataTableToolbarDirective,
ReactiveFormsModule,
Autocomplete,
FilterCard,
Button,
ConfirmDialog,
CityFormModalComponent
@@ -78,6 +77,8 @@ export class CityList implements OnInit {
readonly pendingDeleteCity = signal<CityTableRow | null>(null);
readonly deleteConfirmDialog = viewChild(ConfirmDialog);
readonly showFilters = signal(false);
readonly filterForm = this.formBuilder.nonNullable.group({
countryId: [''],
stateId: [{ value: '', disabled: true }]
@@ -258,4 +259,9 @@ export class CityList implements OnInit {
}
});
}
onToggleFilters(): void {
this.showFilters.update(value => !value);
}
}
src/app/features/global-masters/states/pages/state-list/state-list.html
+32 -73
View File
@@ -1,75 +1,34 @@
<app-filter-card title="Filter" titleIcon="ti ti-filter" headerClass="!py-2" bodyClass="!px-4 !py-2.5">
<form [formGroup]="countryFilterForm" (ngSubmit)="onApplyFilter()" autocomplete="off" class="grid w-full grid-cols-12 items-end gap-3">
<div class="col-span-12 sm:col-span-5 lg:col-span-2">
<app-autocomplete
formControlName="countryId"
inputId="state-country-filter"
variant="floating"
size="sm"
label="Country"
placeholder="Search"
[searchFn]="searchCountries"
[displayWith]="displayCountry"
[valueWith]="countryValue"
[selectedItem]="selectedCountryLookup()"
[minSearchLength]="1"
[debounceTime]="300"
[limit]="50"
[clearable]="true"
[hideValidation]="true"
wrapperClass="!mb-0 w-full"
(itemSelected)="onFilterCountrySelected($event)"
/>
</div>
<div class="col-span-12 sm:col-span-3 lg:col-span-1">
<app-button
action="custom"
label="Filter"
icon="ti ti-filter"
variant="primary-full"
type="button"
size="sm"
className="!rounded-full shadow-sm !mb-0 min-h-8 w-full md:!w-auto"
(buttonClicked)="onApplyFilter()"
></app-button>
</div>
</form>
</app-filter-card>
<app-data-table [columns]="columns()" [rows]="tableStore.rows()" [actions]="actions()"
[totalRecords]="tableStore.totalRecords()" [pageIndex]="tableStore.queryState.pageIndex()"
[pageSize]="tableStore.queryState.pageSize()" tableTitle="States" buttonTitle="Add" [showSearch]="true"
[showAddButton]="true" [showFilterButton]="true" [filterActive]="showFilters()" searchPlaceholder="Search states..."
[searchDebounceTime]="300" toolTip="Add State" (addClicked)="onAddState()"
(searchChanged)="tableStore.onSearch($event)" (pageChanged)="tableStore.onPageChange($event)"
(sortChanged)="tableStore.onSortChange($event)" (actionClicked)="onActionClick($event)"
(filterClicked)="onToggleFilters()">
<ng-template appDataTableToolbar>
<form [formGroup]="countryFilterForm" (ngSubmit)="onApplyFilter()" autocomplete="off"
class="flex flex-wrap items-end gap-3 w-full">
<div class="w-64 min-w-[200px]">
<app-autocomplete formControlName="countryId" inputId="state-country-filter" variant="floating" size="sm"
label="Country" placeholder="Search country" [searchFn]="searchCountries" [displayWith]="displayCountry"
[valueWith]="countryValue" [selectedItem]="selectedCountryLookup()" [minSearchLength]="1" [debounceTime]="300"
[limit]="50" [clearable]="true" [hideValidation]="true" wrapperClass="!mb-0 w-full"
(itemSelected)="onFilterCountrySelected($event)" />
</div>
<div class="flex items-center gap-2">
<app-button action="custom" label="Apply" icon="ti ti-filter" variant="primary-full" type="submit" size="sm"
className="!rounded-full shadow-sm !mb-0 min-h-8" />
<app-button action="custom" label="Reset" icon="ti ti-refresh" variant="outline-primary" type="button" size="sm"
className="!rounded-full shadow-sm !mb-0 min-h-8" (buttonClicked)="onResetFilter()" />
</div>
</form>
</ng-template>
</app-data-table>
<app-data-table
[columns]="columns()"
[rows]="tableStore.rows()"
[actions]="actions()"
[totalRecords]="tableStore.totalRecords()"
[pageIndex]="tableStore.queryState.pageIndex()"
[pageSize]="tableStore.queryState.pageSize()"
tableTitle="States"
buttonTitle="Add"
[showSearch]="true"
[showAddButton]="true"
searchPlaceholder="Search states..."
[searchDebounceTime]="300"
toolTip="Add State"
(addClicked)="onAddState()"
(searchChanged)="tableStore.onSearch($event)"
(pageChanged)="tableStore.onPageChange($event)"
(sortChanged)="tableStore.onSortChange($event)"
(actionClicked)="onActionClick($event)"
/>
<app-confirm-dialog title="Delete State" text="Do you really want to delete this state?" confirmButtonText="Delete"
cancelButtonText="Cancel" (confirmed)="onDeleteConfirmed()" (cancelled)="onDeleteCancelled()" />
<app-confirm-dialog
title="Delete State"
text="Do you really want to delete this state?"
confirmButtonText="Delete"
cancelButtonText="Cancel"
(confirmed)="onDeleteConfirmed()"
(cancelled)="onDeleteCancelled()"
/>
<app-state-form-modal
[open]="tableStore.showModal()"
[mode]="tableStore.modalMode()"
[stateId]="tableStore.selectedItem()?.id ?? null"
(saved)="tableStore.refresh(); tableStore.closeModal()"
(closed)="tableStore.closeModal()"
/>
<app-state-form-modal [open]="tableStore.showModal()" [mode]="tableStore.modalMode()"
[stateId]="tableStore.selectedItem()?.id ?? null" (saved)="tableStore.refresh(); tableStore.closeModal()"
(closed)="tableStore.closeModal()" />
src/app/features/global-masters/states/pages/state-list/state-list.ts
+8 -3
View File
@@ -8,7 +8,7 @@ import { catchError, finalize, map } from 'rxjs/operators';
import { CountryLookupDto, CountryService } from '../../../countries/public-api';
import { StateDto, UpdateStateRequest } from '../../models/state.model';
import { StateService } from '../../data-access/state.service';
import { DataTable } from '../../../../../shared/components/data-table/data-table';
import { DataTable, DataTableToolbarDirective } from '../../../../../shared/components/data-table/data-table';
import { DataTableStore } from '../../../../../shared/components/data-table/data-table.store';
import {
DataTableAction,
@@ -24,7 +24,6 @@ import {
AutocompleteValueFn
} from '../../../../../shared/components/form/autocomplete/autocomplete.types';
import { ConfirmDialog } from '../../../../../shared/components/confirm-dialog/confirm-dialog';
import { FilterCard } from '../../../../../shared/components/filter-card/filter-card';
import { Button as AppButton } from '../../../../../shared/components/button/button';
import { StateFormModalComponent } from '../../components/state-form-modal/state-form-modal';
@@ -44,10 +43,10 @@ interface StateTableRow extends DataTableRecord {
standalone: true,
imports: [
DataTable,
DataTableToolbarDirective,
ReactiveFormsModule,
Autocomplete,
ConfirmDialog,
FilterCard,
AppButton,
StateFormModalComponent
],
@@ -69,6 +68,8 @@ export class StateList implements OnInit {
readonly pendingDeleteState = signal<StateTableRow | null>(null);
readonly deleteConfirmDialog = viewChild(ConfirmDialog);
readonly showFilters = signal(false);
readonly countryFilterForm = this.formBuilder.nonNullable.group({
countryId: ['']
});
@@ -203,4 +204,8 @@ export class StateList implements OnInit {
}
});
}
onToggleFilters(): void {
this.showFilters.update(value => !value);
}
}