-
-
-
-
-
-
-
-
-
+
+
-
+
+
+
+
+
+
+
diff --git a/src/app/features/global-masters/cities/pages/city-list/city-list.ts b/src/app/features/global-masters/cities/pages/city-list/city-list.ts
index 3260e29b..c15fe4d8 100644
--- a/src/app/features/global-masters/cities/pages/city-list/city-list.ts
+++ b/src/app/features/global-masters/cities/pages/city-list/city-list.ts
@@ -1,54 +1,34 @@
-import { Component, DestroyRef, ElementRef, computed, inject, signal } from '@angular/core';
+import { Component, DestroyRef, OnInit, inject, signal, viewChild } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
-import {
- Subject,
- catchError,
- debounceTime,
- distinctUntilChanged,
- finalize,
- map,
- of,
- switchMap,
- take
-} from 'rxjs';
+import { of } from 'rxjs';
+import { catchError, finalize } from 'rxjs/operators';
-import {
- CityDto,
- CityModalMode,
- CreateCityRequest,
- UpdateCityRequest
-} from '../../models/city.model';
+import { CityDto, UpdateCityRequest } from '../../models/city.model';
import { CountryLookupDto } from '../../../countries/models/country.model';
import { StateLookupDto } from '../../../states/models/state.model';
-import { TimezoneDto, TimezoneLookupDto } from '../../../timezones/models/timezone.model';
-import { CityService } from '../../../cities/data-access/city.service';
+import { CityService } from '../../data-access/city.service';
import { CountryService } from '../../../countries/data-access/country.service';
import { StateService } from '../../../states/data-access/state.service';
-import { TimezoneService } from '../../../timezones/data-access/timezone.service';
import { DataTable } from '../../../../../shared/components/data-table/data-table';
-import { DataTableQueryState } from '../../../../../shared/components/data-table/data-table-query.state';
+import { DataTableStore } from '../../../../../shared/components/data-table/data-table.store';
import {
DataTableAction,
DataTableActionEvent,
DataTableColumn,
- DataTablePageEvent,
- DataTableQuery,
- DataTableRecord,
- DataTableSortEvent
+ DataTableRecord
} from '../../../../../shared/components/data-table/data-table.types';
-import { FormInput } from '../../../../../shared/components/form/form-input/form-input';
import { Autocomplete } from '../../../../../shared/components/form/autocomplete/autocomplete';
import {
AutocompleteDisplayFn,
- AutocompleteResolveValueFn,
AutocompleteSearchFn,
AutocompleteValueFn
} from '../../../../../shared/components/form/autocomplete/autocomplete.types';
-import { Modal } from '../../../../../shared/components/modal/modal';
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';
interface CityTableRow extends DataTableRecord {
id: string;
@@ -60,6 +40,8 @@ interface CityTableRow extends DataTableRecord {
serialNumber: number;
state: string;
country: string;
+ stateName: string;
+ countryName: string;
createdOn?: string;
modifiedOn?: string | null;
}
@@ -67,495 +49,213 @@ interface CityTableRow extends DataTableRecord {
@Component({
selector: 'city-list',
standalone: true,
- imports: [DataTable, Modal, ReactiveFormsModule, FormInput, Autocomplete, FilterCard, Button],
+ imports: [
+ DataTable,
+ ReactiveFormsModule,
+ Autocomplete,
+ FilterCard,
+ Button,
+ ConfirmDialog,
+ CityFormModalComponent
+ ],
+ providers: [DataTableStore],
templateUrl: './city-list.html',
styleUrl: './city-list.scss'
})
-export class CityList {
+export class CityList implements OnInit {
private readonly destroyRef = inject(DestroyRef);
private readonly cityApi = inject(CityService);
private readonly countryApi = inject(CountryService);
private readonly stateApi = inject(StateService);
- private readonly timezoneApi = inject(TimezoneService);
private readonly formBuilder = inject(FormBuilder);
- private readonly elementRef = inject
>(ElementRef);
private readonly toastr = inject(ToastrService);
- private readonly cityQueryRequests$ = new Subject();
+ readonly tableStore = inject(DataTableStore);
- readonly queryState = new DataTableQueryState();
- readonly cities = signal([]);
- readonly selectedCountryId = signal(null);
- readonly selectedStateId = signal(null);
- readonly appliedCountryId = signal(null);
- readonly appliedStateId = signal(null);
readonly selectedCountry = signal(null);
readonly selectedFilterState = signal(null);
- readonly selectedFormCountry = signal(null);
- readonly selectedFormState = signal(null);
- readonly totalRecords = signal(0);
- readonly saving = signal(false);
- readonly showCityModal = signal(false);
- readonly modalMode = signal('create');
- readonly selectedCity = signal(null);
- readonly submitAttempted = signal(false);
+ readonly statusChangingId = signal(null);
+ readonly deletingId = signal(null);
+ readonly pendingDeleteCity = signal(null);
+ readonly deleteConfirmDialog = viewChild(ConfirmDialog);
readonly filterForm = this.formBuilder.nonNullable.group({
countryId: [''],
stateId: [{ value: '', disabled: true }]
});
- readonly cityForm = this.formBuilder.nonNullable.group({
- countryId: ['', Validators.required],
- stateId: ['', Validators.required],
- name: ['', [Validators.required, Validators.maxLength(150)]],
- code: [
- '',
- [
- Validators.required,
- Validators.maxLength(16),
- Validators.pattern(/^[A-Za-z0-9_-]+$/)
- ]
- ],
- timezoneId: this.formBuilder.control(null)
- });
-
- readonly searchTimezones: AutocompleteSearchFn =
- (term, limit) => this.timezoneApi.autocomplete(term, limit);
- readonly searchCountries: AutocompleteSearchFn =
- (term, limit) => this.countryApi.autocomplete(term, limit).pipe(
- catchError(() => {
- this.toastr.error('Unable to load countries.');
- return of([]);
- })
- );
- readonly searchFilterStates: AutocompleteSearchFn =
- (term, limit) => {
- const countryId = this.selectedCountryId();
- if (!countryId) return of([]);
- return this.stateApi.autocomplete(countryId, term, limit).pipe(
- catchError(() => {
- this.toastr.error('Unable to load states.');
- return of([]);
- })
- );
- };
- readonly searchFormStates: AutocompleteSearchFn =
- (term, limit) => {
- const countryId = this.cityForm.controls.countryId.value;
- if (!countryId) return of([]);
- return this.stateApi.autocomplete(countryId, term, limit).pipe(
- catchError(() => {
- this.toastr.error('Unable to load states.');
- return of([]);
- })
- );
- };
- readonly displayCountry: AutocompleteDisplayFn = country => country.name;
- readonly countryValue: AutocompleteValueFn = country => country.id;
- readonly resolveCountry: AutocompleteResolveValueFn =
- value => this.countryApi.getCountryById(value).pipe(
- map(country => ({ id: country.id, iso2: country.iso2, name: country.name }))
- );
- readonly displayState: AutocompleteDisplayFn = state => state.name;
- readonly stateValue: AutocompleteValueFn = state => state.id;
- readonly resolveState: AutocompleteResolveValueFn =
- value => this.stateApi.getStateById(value).pipe(
- map(state => ({ id: state.id, name: state.name, code: state.code ?? '' }))
- );
- readonly displayTimezone: AutocompleteDisplayFn =
- timezone => `${timezone.ianaId} — ${timezone.displayName}`;
- readonly timezoneValue: AutocompleteValueFn =
- timezone => timezone.id;
- readonly resolveTimezone: AutocompleteResolveValueFn =
- value => this.timezoneApi.getById(value).pipe(map(timezone => this.toTimezoneLookup(timezone)));
- readonly filterStatePlaceholder = computed(() =>
- this.selectedCountryId() ? 'Search' : 'Select a country first'
- );
- readonly formStatePlaceholder = computed(() =>
- this.cityForm.controls.countryId.value ? 'Search' : 'Search'
- );
- readonly emptyMessage = computed(() =>
- this.appliedCountryId() && this.appliedStateId()
- ? 'No cities found'
- : 'Select a country and state'
- );
-
- readonly emptyDescription = computed(() =>
- this.appliedCountryId() && this.appliedStateId()
- ? 'There are no cities available for the selected state.'
- : 'Choose a country and state to view available cities.'
- );
- readonly modalTitle = computed(() => {
- const mode = this.modalMode();
- return mode === 'create' ? 'Add City' : mode === 'edit' ? 'Edit City' : 'View City';
- });
- readonly submitLabel = computed(() =>
- this.modalMode() === 'create' ? 'Save' : 'Update'
- );
- readonly loadingLabel = computed(() =>
- this.modalMode() === 'create' ? 'Saving...' : 'Updating...'
- );
-
readonly columns = signal[]>([
- { key: 'serialNumber', label: 'Sr. No.', header: 'Sr. No.', sortable: false, width: '70px' },
- { key: 'name', label: 'City Name', header: 'City Name', sortable: true, align: 'left' },
- { key: 'code', label: 'Code', header: 'Code', sortable: true },
- { key: 'stateName', label: 'State', header: 'State', sortable: false },
- { key: 'countryName', label: 'Country', header: 'Country', sortable: false },
+ { key: 'serialNumber', label: 'Sr. No.', header: 'Sr.No.', sortable: false, width: '90px' },
+ { key: 'name', label: 'City Name', header: 'City Name', sortable: true, headerAlign: 'center', align: 'left' },
+ { key: 'code', label: 'Code', header: 'Code', sortable: true, headerAlign: 'center', align: 'center', badge: true, badgeClass: value => value ? 'badge bg-primary/10 text-primary' : 'badge bg-secondary/10 text-secondary' },
+ { key: 'stateName', label: 'State', header: 'State', sortable: true, headerAlign: 'center', align: 'left' },
+ { key: 'countryName', label: 'Country', header: 'Country', sortable: true, headerAlign: 'center', align: 'center' },
{
- key: 'isActive',
- label: 'Status',
- header: 'Status',
- sortable: true,
- badge: true,
- width: '100px',
- formatter: value => value ? 'Active' : 'Inactive',
- badgeClass: value => value === true
- ? 'badge bg-success/10 text-success'
- : 'badge bg-danger/10 text-danger'
+ key: 'isActive', label: 'Status', header: 'Status', sortable: true, badge: true,
+ badgeClass: value => value === true ? 'badge bg-success/10 text-success' : 'badge bg-danger/10 text-danger',
+ formatter: value => value ? 'Active' : 'Inactive'
}
]);
readonly actions = signal[]>([
- // { type: 'view', label: 'View', icon: 'ti ti-eye', className: 'text-info' },
{ type: 'edit', label: 'Edit', icon: 'ti ti-edit', className: 'text-primary' },
{
- type: 'deactivate',
- label: 'Deactivate',
- icon: 'ti ti-ban',
- className: 'text-danger',
- visible: row => row.isActive
+ type: 'deactivate', label: 'Deactivate', icon: 'ti ti-toggle-right', className: 'text-warning',
+ visible: row => row.isActive, disabled: row => this.statusChangingId() === row.id || this.deletingId() === row.id
},
{
- type: 'activate',
- label: 'Activate',
- icon: 'ti ti-check',
- className: 'text-success',
- visible: row => !row.isActive
+ type: 'activate', label: 'Activate', icon: 'ti ti-toggle-left', className: 'text-success',
+ visible: row => !row.isActive, disabled: row => this.statusChangingId() === row.id || this.deletingId() === row.id
+ },
+ {
+ type: 'delete', label: 'Delete', icon: 'ti ti-trash', className: 'text-danger',
+ disabled: row => this.statusChangingId() === row.id || this.deletingId() === row.id
}
]);
- constructor() {
- this.configureCityQueries();
- this.configureFilterChanges();
- this.configureFormChanges();
- }
+ readonly filterCountrySearchFn: AutocompleteSearchFn = (term, page) =>
+ this.countryApi.autocomplete(term, page);
+ readonly filterCountryValueFn: AutocompleteValueFn = c => c.id;
+ readonly filterCountryDisplayFn: AutocompleteDisplayFn = c => c.name;
+
+ readonly filterStateSearchFn: AutocompleteSearchFn = (term, page) => {
+ const countryId = this.filterForm.controls.countryId.value || this.selectedCountry()?.id || '';
+ if (!countryId) return of([]);
+ return this.stateApi.autocomplete(countryId, term || '', page);
+ };
+ readonly filterStateValueFn: AutocompleteValueFn = s => s.id;
+ readonly filterStateDisplayFn: AutocompleteDisplayFn = s => s.name;
ngOnInit(): void {
- this.loadCities(this.queryState.getQuery());
+ this.tableStore.initialize({
+ fetcher: query => {
+ const countryId = this.filterForm.controls.countryId.value || null;
+ const stateId = this.filterForm.controls.stateId.value || null;
+ return this.cityApi.getCityDataTable(query, countryId, stateId);
+ },
+ mapRow: (city, serialNumber) => {
+ const resolvedStateName = city.stateName
+ || (typeof city.state === 'string' ? city.state : city.state?.name)
+ || '—';
+ const resolvedCountryName = city.countryName
+ || (typeof city.country === 'string' ? city.country : city.country?.name)
+ || '—';
+
+ return {
+ id: city.id,
+ stateId: city.stateId,
+ name: city.name,
+ code: city.code,
+ timezoneId: city.timezoneId,
+ isActive: city.isActive,
+ serialNumber,
+ state: resolvedStateName,
+ country: resolvedCountryName,
+ stateName: resolvedStateName,
+ countryName: resolvedCountryName,
+ createdOn: city.createdOn,
+ modifiedOn: city.modifiedOn
+ };
+ }
+ });
}
- onFilterCountrySelected(country: CountryLookupDto): void {
+ onFilterCountryChanged(country: CountryLookupDto | null): void {
this.selectedCountry.set(country);
+ this.filterForm.controls.countryId.setValue(country ? country.id : '');
+ this.filterForm.controls.stateId.setValue('');
+ this.selectedFilterState.set(null);
+ if (country) {
+ this.filterForm.controls.stateId.enable();
+ } else {
+ this.filterForm.controls.stateId.disable();
+ }
}
- onFilterCountryCleared(): void {
- this.selectedCountry.set(null);
- }
-
- onFilterStateSelected(state: StateLookupDto): void {
+ onFilterStateChanged(state: StateLookupDto | null): void {
this.selectedFilterState.set(state);
}
- onFilterStateCleared(): void {
- this.selectedFilterState.set(null);
- }
-
- applyCityFilters(): void {
- const countryId = this.filterForm.controls.countryId.value || null;
- const stateId = this.filterForm.controls.stateId.value || null;
-
- this.appliedCountryId.set(countryId);
- this.appliedStateId.set(stateId);
-
- this.loadCities(this.queryState.setPage({
- pageIndex: 1,
- pageSize: this.queryState.pageSize()
- }));
- }
-
- onFormCountrySelected(country: CountryLookupDto): void {
- this.selectedFormCountry.set(country);
- }
-
- onFormCountryCleared(): void {
- this.selectedFormCountry.set(null);
- }
-
- onFormStateSelected(state: StateLookupDto): void {
- this.selectedFormState.set(state);
- }
-
- onFormStateCleared(): void {
- this.selectedFormState.set(null);
- }
-
- loadCities(query: DataTableQuery): void {
- this.cityQueryRequests$.next(query);
- }
-
- onSearch(value: string): void {
- this.loadCities(this.queryState.setSearch(value.trim()));
- }
-
- onPageChange(event: DataTablePageEvent): void {
- this.loadCities(this.queryState.setPage(event));
- }
-
- onSortChange(event: DataTableSortEvent): void {
- this.loadCities(this.queryState.setSort(event));
- }
-
- onActionClick(event: DataTableActionEvent): void {
- const city = this.toCityDto(event.row);
- switch (event.action.type) {
- case 'edit':
- this.openExistingCity(city, 'edit');
- break;
- case 'activate':
- this.updateCityStatus(city, true);
- break;
- case 'deactivate':
- this.updateCityStatus(city, false);
- break;
+ onApplyFilter(event?: Event): void {
+ event?.preventDefault();
+ event?.stopPropagation();
+ if (document.activeElement instanceof HTMLElement) {
+ document.activeElement.blur();
}
+ this.tableStore.refresh();
+ }
+
+ onResetFilter(): void {
+ this.filterForm.reset({ countryId: '', stateId: '' });
+ this.filterForm.controls.stateId.disable();
+ this.selectedCountry.set(null);
+ this.selectedFilterState.set(null);
+ this.tableStore.reset();
}
onAddCity(): void {
- this.modalMode.set('create');
- this.selectedCity.set(null);
- this.submitAttempted.set(false);
- this.selectedFormCountry.set(null);
- this.selectedFormState.set(null);
- this.cityForm.enable({ emitEvent: false });
- this.cityForm.reset({ countryId: '', stateId: '', name: '', code: '', timezoneId: null }, { emitEvent: false });
- this.resetFormState();
- this.showCityModal.set(true);
+ this.tableStore.openCreateModal();
}
- closeCityModal(): void {
- if (this.saving()) return;
- this.showCityModal.set(false);
- this.selectedCity.set(null);
- this.selectedFormCountry.set(null);
- this.selectedFormState.set(null);
- this.submitAttempted.set(false);
+ onActionClick(event: DataTableActionEvent): void {
+ if (event.action.type === 'view') this.tableStore.openViewModal(event.row);
+ if (event.action.type === 'edit') this.tableStore.openEditModal(event.row);
+ if (event.action.type === 'delete') this.requestDeleteCity(event.row);
+ if (event.action.type === 'activate') this.changeCityStatus(event.row, true);
+ if (event.action.type === 'deactivate') this.changeCityStatus(event.row, false);
}
- saveCity(): void {
- if (this.saving()) return;
- if (this.cityForm.invalid) {
- this.submitAttempted.set(true);
- this.cityForm.markAllAsTouched();
- this.focusFirstInvalidControl();
- return;
- }
+ onDeleteConfirmed(): void {
+ const city = this.pendingDeleteCity();
+ if (!city) return;
+ this.pendingDeleteCity.set(null);
+ this.deletingId.set(city.id);
- this.saving.set(true);
- const city = this.selectedCity();
- const request$ = this.modalMode() === 'create'
- ? this.cityApi.createCity(this.buildCreateRequest())
- : city
- ? this.cityApi.updateCity(city.id, this.buildUpdateRequest(city.isActive))
- : null;
-
- if (!request$) {
- this.saving.set(false);
- return;
- }
-
- request$.pipe(finalize(() => this.saving.set(false))).subscribe({
+ this.cityApi.delete(city.id).pipe(
+ finalize(() => this.deletingId.set(null)),
+ takeUntilDestroyed(this.destroyRef)
+ ).subscribe({
next: () => {
- this.toastr.success(
- this.modalMode() === 'create'
- ? 'City saved successfully.'
- : 'City updated successfully.'
- );
- this.showCityModal.set(false);
- this.selectedCity.set(null);
- this.loadCities(this.queryState.getQuery());
+ this.toastr.success('City deleted successfully.');
+ this.tableStore.refresh();
+ },
+ error: (err) => {
+ let errorMsg = 'Unable to delete city.';
+ if (err?.status === 409) {
+ errorMsg = err?.error?.message || err?.error?.detail || 'Cannot delete city because it is currently in use or referenced by other records.';
+ } else if (err?.status === 404) {
+ errorMsg = err?.error?.message || 'City not found or has already been deleted.';
+ } else if (err?.error?.message || err?.error?.title) {
+ errorMsg = err.error.message || err.error.title;
+ }
+ this.toastr.error(errorMsg);
}
});
}
- private configureCityQueries(): void {
- this.cityQueryRequests$.pipe(
- switchMap(query => {
- const stateId = this.appliedStateId();
- const countryId = this.appliedCountryId();
- return this.cityApi.getCityDataTable(query, countryId, stateId).pipe(
- catchError(() => {
- this.toastr.error('Unable to load cities.');
- this.clearGrid();
- return of(null);
- })
- );
- }),
- takeUntilDestroyed(this.destroyRef)
- ).subscribe(response => {
- if (!response) return;
- const query = this.queryState.getQuery();
- if (response.draw !== query.draw) return;
-
- this.cities.set(response.rows.map((city, index) => ({
- ...city,
- serialNumber: (query.page - 1) * query.pageSize + index + 1
- })));
- this.totalRecords.set(response.filtered);
- });
+ onDeleteCancelled(): void {
+ this.pendingDeleteCity.set(null);
}
- private configureFilterChanges(): void {
- this.filterForm.controls.countryId.valueChanges.pipe(
- distinctUntilChanged(),
+ private requestDeleteCity(city: CityTableRow): void {
+ this.pendingDeleteCity.set(city);
+ this.deleteConfirmDialog()?.open();
+ }
+
+ private changeCityStatus(city: CityTableRow, activate: boolean): void {
+ this.statusChangingId.set(city.id);
+
+ this.cityApi.updateStatus(city.id, { isActive: activate }).pipe(
+ finalize(() => this.statusChangingId.set(null)),
takeUntilDestroyed(this.destroyRef)
- ).subscribe(countryId => {
- if (!countryId || this.selectedCountry()?.id !== countryId) {
- this.selectedCountry.set(null);
+ ).subscribe({
+ next: () => {
+ this.toastr.success(`City ${activate ? 'activated' : 'deactivated'} successfully.`);
+ this.tableStore.refresh();
+ },
+ error: (err) => {
+ const msg = err?.error?.message || err?.error?.title || `Unable to ${activate ? 'activate' : 'deactivate'} city.`;
+ this.toastr.error(msg);
}
-
- this.selectedCountryId.set(countryId || null);
- this.selectedStateId.set(null);
- this.selectedFilterState.set(null);
-
- this.filterForm.controls.stateId.reset('', { emitEvent: false });
- countryId
- ? this.filterForm.controls.stateId.enable({ emitEvent: false })
- : this.filterForm.controls.stateId.disable({ emitEvent: false });
-
});
-
- this.filterForm.controls.stateId.valueChanges.pipe(
- distinctUntilChanged(),
- takeUntilDestroyed(this.destroyRef)
- ).subscribe(stateId => {
- if (!stateId || this.selectedFilterState()?.id !== stateId) {
- this.selectedFilterState.set(null);
- }
-
- this.selectedStateId.set(stateId || null);
- });
- }
-
- private configureFormChanges(): void {
- this.cityForm.controls.countryId.valueChanges.pipe(
- distinctUntilChanged(),
- takeUntilDestroyed(this.destroyRef)
- ).subscribe(countryId => {
- if (!this.showCityModal() || this.modalMode() !== 'create') return;
-
- if (!countryId || this.selectedFormCountry()?.id !== countryId) {
- this.selectedFormCountry.set(null);
- }
-
- this.selectedFormState.set(null);
- this.cityForm.controls.stateId.reset('', { emitEvent: false });
- this.cityForm.controls.stateId.enable({ emitEvent: false });
- });
- }
-
- private openExistingCity(city: CityDto, mode: 'edit'): void {
- this.cityApi.getCityById(city.id).pipe(
- switchMap(details => this.stateApi.getStateById(details.stateId).pipe(
- map(stateDetails => ({ details, countryId: stateDetails.countryId }))
- )),
- take(1)
- ).subscribe(({ details, countryId }) => {
- this.selectedCity.set(details);
- this.modalMode.set(mode);
- this.submitAttempted.set(false);
- this.selectedFormCountry.set(null);
- this.selectedFormState.set(null);
- this.cityForm.enable({ emitEvent: false });
- this.cityForm.reset({
- countryId,
- stateId: details.stateId,
- name: details.name ?? '',
- code: details.code ?? '',
- timezoneId: details.timezoneId
- }, { emitEvent: false });
- // this.cityForm.controls.countryId.disable({ emitEvent: false });
- // this.cityForm.controls.stateId.disable({ emitEvent: false });
- this.resetFormState();
- this.showCityModal.set(true);
- });
- }
-
- private updateCityStatus(city: CityDto, isActive: boolean): void {
- this.cityApi.updateCity(city.id, {
- name: city.name.trim(),
- code: city.code?.trim().toUpperCase() ?? '',
- timezoneId: city.timezoneId,
- isActive
- }).subscribe(() => {
- this.toastr.success(
- isActive ? 'City activated successfully.' : 'City deactivated successfully.'
- );
- this.loadCities(this.queryState.getQuery());
- });
- }
-
- private buildCreateRequest(): CreateCityRequest {
- const value = this.cityForm.getRawValue();
- return {
- stateId: value.stateId,
- name: value.name.trim(),
- code: value.code.trim().toUpperCase(),
- timezoneId: value.timezoneId
- };
- }
-
- private buildUpdateRequest(isActive: boolean): UpdateCityRequest {
- const value = this.cityForm.getRawValue();
- return {
- name: value.name.trim(),
- code: value.code.trim().toUpperCase(),
- timezoneId: value.timezoneId,
- isActive
- };
- }
-
- private clearGrid(): void {
- this.cities.set([]);
- this.totalRecords.set(0);
- }
-
- private resetFormState(): void {
- this.cityForm.markAsPristine();
- this.cityForm.markAsUntouched();
- this.cityForm.updateValueAndValidity();
- }
-
- private focusFirstInvalidControl(): void {
- queueMicrotask(() => {
- const control = this.elementRef.nativeElement.querySelector(
- 'modal [data-form-control][aria-invalid="true"]'
- );
- control?.focus();
- control?.scrollIntoView({ behavior: 'smooth', block: 'center' });
- });
- }
-
- private toCityDto(row: CityTableRow): CityDto {
- return {
- id: row.id,
- stateId: row.stateId,
- name: row.name,
- state: row.state,
- country: row.country,
- code: row.code,
- timezoneId: row.timezoneId,
- isActive: row.isActive,
- createdOn: row.createdOn,
- modifiedOn: row.modifiedOn
- };
- }
-
- private toTimezoneLookup(timezone: TimezoneDto): TimezoneLookupDto {
- return {
- id: timezone.id,
- ianaId: timezone.ianaId,
- displayName: timezone.displayName
- };
}
}
diff --git a/src/app/features/global-masters/countries/components/country-form-modal/country-form-modal.html b/src/app/features/global-masters/countries/components/country-form-modal/country-form-modal.html
new file mode 100644
index 00000000..f19802ab
--- /dev/null
+++ b/src/app/features/global-masters/countries/components/country-form-modal/country-form-modal.html
@@ -0,0 +1,96 @@
+
+ @if (modalLoading()) {
+
+
+ Loading country...
+
+ } @else {
+
+ }
+
\ No newline at end of file
diff --git a/src/app/features/global-masters/countries/components/country-form-modal/country-form-modal.ts b/src/app/features/global-masters/countries/components/country-form-modal/country-form-modal.ts
new file mode 100644
index 00000000..f5eccd98
--- /dev/null
+++ b/src/app/features/global-masters/countries/components/country-form-modal/country-form-modal.ts
@@ -0,0 +1,211 @@
+import {
+ ChangeDetectionStrategy,
+ Component,
+ DestroyRef,
+ computed,
+ effect,
+ inject,
+ input,
+ output,
+ signal
+} from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { HttpErrorResponse } from '@angular/common/http';
+import { ToastrService } from 'ngx-toastr';
+import { of } from 'rxjs';
+import { catchError, finalize, map, switchMap } from 'rxjs/operators';
+
+import {
+ CountryDto,
+ CountryModalMode,
+ CreateCountryRequest,
+ UpdateCountryRequest
+} from '../../models/country.model';
+import { CurrencyLookupDto, CurrencyService } from '../../../currencies/public-api';
+import { CountryService } from '../../data-access/country.service';
+import { FormInput } from '../../../../../shared/components/form/form-input/form-input';
+import { Autocomplete } from '../../../../../shared/components/form/autocomplete/autocomplete';
+import {
+ AutocompleteDisplayFn,
+ AutocompleteSearchFn,
+ AutocompleteValueFn
+} from '../../../../../shared/components/form/autocomplete/autocomplete.types';
+import { Modal } from '../../../../../shared/components/modal/modal';
+
+@Component({
+ selector: 'app-country-form-modal',
+ standalone: true,
+ imports: [Modal, ReactiveFormsModule, FormInput, Autocomplete],
+ templateUrl: './country-form-modal.html',
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CountryFormModalComponent {
+ private readonly destroyRef = inject(DestroyRef);
+ private readonly formBuilder = inject(FormBuilder);
+ private readonly countryApi = inject(CountryService);
+ private readonly currencyApi = inject(CurrencyService);
+ private readonly toastr = inject(ToastrService);
+
+ readonly open = input(false);
+ readonly mode = input('create');
+ readonly countryId = input(null);
+
+ readonly saved = output();
+ readonly closed = output();
+
+ readonly modalLoading = signal(false);
+ readonly saving = signal(false);
+ readonly countrySubmitAttempted = signal(false);
+ readonly selectedCountry = signal(null);
+ readonly selectedCurrency = signal(null);
+
+ readonly countryForm = this.formBuilder.nonNullable.group({
+ name: ['', [Validators.required, Validators.maxLength(150)]],
+ iso2: ['', [Validators.required, Validators.pattern(/^[A-Za-z]{2}$/)]],
+ iso3: ['', [Validators.required, Validators.pattern(/^[A-Za-z]{3}$/)]],
+ phoneCode: [
+ '',
+ [Validators.maxLength(16), Validators.pattern(/^\+?[0-9]{1,15}$/)]
+ ],
+ defaultCurrencyId: this.formBuilder.control(null)
+ });
+
+ readonly isViewMode = computed(() => this.mode() === 'view');
+ readonly modalTitle = computed(() => {
+ switch (this.mode()) {
+ case 'create': return 'Add Country';
+ case 'edit': return 'Edit Country';
+ case 'view': return 'View Country';
+ }
+ });
+
+ readonly currencySearchFn: AutocompleteSearchFn = (term, page) =>
+ this.currencyApi.autocomplete(term, page);
+ readonly currencyValueFn: AutocompleteValueFn = currency => currency.id;
+ readonly currencyDisplayFn: AutocompleteDisplayFn = currency =>
+ `${currency.code} - ${currency.name}`;
+
+ constructor() {
+ effect(() => {
+ if (this.open()) {
+ this.prepareModal(this.countryId());
+ }
+ });
+ }
+
+ prepareModal(id: string | null): void {
+ this.countrySubmitAttempted.set(false);
+ this.countryForm.reset({ name: '', iso2: '', iso3: '', phoneCode: '', defaultCurrencyId: null });
+ this.selectedCurrency.set(null);
+
+ if (!id || this.mode() === 'create') {
+ this.selectedCountry.set(null);
+ this.modalLoading.set(false);
+ return;
+ }
+
+ this.modalLoading.set(true);
+ this.countryApi.getCountryById(id).pipe(
+ switchMap(country => {
+ this.selectedCountry.set(country);
+ if (!country.defaultCurrencyId) return of({ country, currency: null });
+ return this.currencyApi.getCurrencyById(country.defaultCurrencyId).pipe(
+ map(currency => ({ country, currency })),
+ catchError(() => of({ country, currency: null }))
+ );
+ }),
+ finalize(() => this.modalLoading.set(false)),
+ takeUntilDestroyed(this.destroyRef)
+ ).subscribe({
+ next: ({ country, currency }) => {
+ if (currency) {
+ this.selectedCurrency.set({ id: currency.id, code: currency.code, name: currency.name, symbol: currency.symbol });
+ }
+ this.countryForm.patchValue({
+ name: country.name,
+ iso2: country.iso2,
+ iso3: country.iso3,
+ phoneCode: country.phoneCode ?? '',
+ defaultCurrencyId: country.defaultCurrencyId
+ });
+ },
+ error: () => {
+ this.toastr.error('Unable to load country details.');
+ this.closeModal();
+ }
+ });
+ }
+
+ saveCountry(): void {
+ if (this.isViewMode()) {
+ this.closeModal();
+ return;
+ }
+
+ this.countrySubmitAttempted.set(true);
+ if (this.countryForm.invalid || this.saving()) return;
+
+ this.saving.set(true);
+ if (this.mode() === 'create') {
+ const request: CreateCountryRequest = {
+ name: this.countryForm.controls.name.value.trim(),
+ iso2: this.countryForm.controls.iso2.value.trim().toUpperCase(),
+ iso3: this.countryForm.controls.iso3.value.trim().toUpperCase(),
+ phoneCode: this.countryForm.controls.phoneCode.value.trim() || null,
+ defaultCurrencyId: this.countryForm.controls.defaultCurrencyId.value || null
+ };
+
+ this.countryApi.createCountry(request).pipe(
+ finalize(() => this.saving.set(false)),
+ takeUntilDestroyed(this.destroyRef)
+ ).subscribe({
+ next: () => {
+ this.saving.set(false);
+ this.toastr.success('Country created successfully.');
+ this.saved.emit();
+ this.closed.emit();
+ },
+ error: err => this.handleSaveError(err, 'create')
+ });
+ } else {
+ const id = this.countryId();
+ if (!id) return;
+
+ const request: UpdateCountryRequest = {
+ name: this.countryForm.controls.name.value.trim(),
+ iso2: this.countryForm.controls.iso2.value.trim().toUpperCase(),
+ iso3: this.countryForm.controls.iso3.value.trim().toUpperCase(),
+ phoneCode: this.countryForm.controls.phoneCode.value.trim() || null,
+ defaultCurrencyId: this.countryForm.controls.defaultCurrencyId.value || null,
+ isActive: this.selectedCountry()?.isActive ?? true
+ };
+
+ this.countryApi.updateCountry(id, request).pipe(
+ finalize(() => this.saving.set(false)),
+ takeUntilDestroyed(this.destroyRef)
+ ).subscribe({
+ next: () => {
+ this.saving.set(false);
+ this.toastr.success('Country updated successfully.');
+ this.saved.emit();
+ this.closed.emit();
+ },
+ error: err => this.handleSaveError(err, 'update')
+ });
+ }
+ }
+
+ closeModal(): void {
+ if (this.saving()) return;
+ this.closed.emit();
+ }
+
+ private handleSaveError(error: HttpErrorResponse, action: 'create' | 'update'): void {
+ if (error.status === 409) {
+ this.toastr.error('A country with this ISO code already exists.');
+ return;
+ }
+ this.toastr.error(`Unable to ${action} country. Please try again.`);
+ }
+}
diff --git a/src/app/features/global-masters/countries/data-access/country.service.ts b/src/app/features/global-masters/countries/data-access/country.service.ts
index 10d406b0..3865932a 100644
--- a/src/app/features/global-masters/countries/data-access/country.service.ts
+++ b/src/app/features/global-masters/countries/data-access/country.service.ts
@@ -11,6 +11,7 @@ import {
CountryLookupDto,
CreateCountryRequest,
UpdateCountryRequest,
+ UpdateCountryStatusRequest,
} from '../models/country.model';
import { COUNTRY_ENDPOINTS } from './country.endpoints';
@@ -32,6 +33,14 @@ export class CountryService {
return this.http.put(COUNTRY_ENDPOINTS.update(id), request);
}
+ updateStatus(id: string, request: UpdateCountryStatusRequest): Observable {
+ return this.http.patch(COUNTRY_ENDPOINTS.changeStatus(id), request);
+ }
+
+ delete(id: string): Observable {
+ return this.http.delete(COUNTRY_ENDPOINTS.delete(id));
+ }
+
getCountryById(id: string): Observable {
return this.http.get(COUNTRY_ENDPOINTS.getById(id));
}
@@ -42,3 +51,4 @@ export class CountryService {
});
}
}
+
diff --git a/src/app/features/global-masters/countries/models/country.model.ts b/src/app/features/global-masters/countries/models/country.model.ts
index 9c4b220f..9020295f 100644
--- a/src/app/features/global-masters/countries/models/country.model.ts
+++ b/src/app/features/global-masters/countries/models/country.model.ts
@@ -28,4 +28,9 @@ export interface UpdateCountryRequest extends CreateCountryRequest {
isActive: boolean;
}
-export type CountryModalMode = 'create' | 'edit';
+export interface UpdateCountryStatusRequest {
+ isActive: boolean;
+}
+
+export type CountryModalMode = 'create' | 'edit' | 'view';
+
diff --git a/src/app/features/global-masters/countries/pages/country-list/country-list.html b/src/app/features/global-masters/countries/pages/country-list/country-list.html
index 43a71e14..1bfbf840 100644
--- a/src/app/features/global-masters/countries/pages/country-list/country-list.html
+++ b/src/app/features/global-masters/countries/pages/country-list/country-list.html
@@ -1,19 +1,34 @@
-
+
@if (getFlagUrl(row.iso2); as flagUrl) {
-
![]()
+
![]()
}
-
-
- {{ value }}
-
+
{{ value }}