Initial commit

src/app/features/global-masters/states/pages/state-list/state-list.html

@@ -0,0 +1,19 @@
+<app-data-table 
+  [columns]="columns()"
+  [rows]="states()"
+  [actions]="actions()"
+  [loading]="loading()"
+  [totalRecords]="totalRecords()"
+  [pageIndex]="queryState.pageIndex()"
+  [pageSize]="queryState.pageSize()"
+  [pageSizeOptions]="[5, 10, 20, 50]"
+  title="States"
+  [showSearch]="true"
+  searchPlaceholder="Search states..."
+  [searchDebounceTime]="300"
+
+  (searchChanged)="onSearch($event)"
+  (pageChanged)="onPageChange($event)"
+  (sortChanged)="onSortChange($event)"
+  (actionClicked)="onActionClick($event)">
+</app-data-table>

src/app/features/global-masters/states/pages/state-list/state-list.ts

@@ -0,0 +1,181 @@
+import { Component } from '@angular/core';
+import { inject, signal } from '@angular/core';
+import {  StateService } from '../../../../../core/services/state/state.service';
+import { DataTableQueryState } from '../../../../../shared/components/data-table/data-table-query.state';
+import { DataTablePageEvent, DataTableSortEvent, DataTableQuery, DataTableColumn, DataTableAction, DataTableActionEvent } from '../../../../../shared/components/data-table/data-table.types';
+import { DataTable } from '../../../../../shared/components/data-table/data-table';
+import { finalize} from 'rxjs/operators';
+
+@Component({
+  selector: 'state-list',
+  imports: [DataTable],
+  templateUrl: './state-list.html',
+  styleUrl: './state-list.scss',
+})
+export class StateList {
+
+
+  private readonly stateApi: StateService = inject(StateService);
+
+  readonly queryState = new DataTableQueryState();
+
+  readonly states = signal<any[]>([]);
+  readonly totalRecords = signal(0);
+  readonly filteredRecords = signal(0);
+  readonly loading = signal(false);
+
+
+  readonly columns = signal<DataTableColumn[]>([
+    { key: 'serialNumber', label: 'Sr.No.', header: 'Sr.No.', sortable: false, width: '60px' },
+    { key: 'name', header: 'Name', label: 'Name', sortable: true },
+    { key: 'code', header: 'Code', label: 'Code', sortable: true },
+    { 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',
+      width: '100px',
+      formatter: (value) => value ? 'Active' : 'Inactive'
+    }
+  ]);
+
+   readonly actions = signal<DataTableAction[]>([
+    {
+      type: 'view',
+      label: 'View',
+      icon: 'ti ti-eye',
+      className: 'text-info'
+    },
+    {
+      type: 'edit',
+      label: 'Edit',
+      icon: 'ti ti-edit',
+      className: 'text-primary'
+    },
+    {
+      type: 'delete',
+      label: 'Delete',
+      icon: 'ti ti-trash',
+      className: 'text-danger',
+      visible: (row: any) => row.isActive
+    },
+    {
+      type: 'activate',
+      label: 'Activate',
+      icon: 'ti ti-check',
+      className: 'text-success',
+      visible: (row: any) => !row.isActive
+    }
+  ]);
+
+  ngOnInit(): void {
+    this.loadStates(this.queryState.getQuery(), 'a9d18090-f76a-489f-bfc7-9d97d3d2d7da');
+  }
+  loadStates(query: DataTableQuery, countryId: any): void {
+    this.loading.set(true);
+
+    this.stateApi
+      .getStateDataTable(query, countryId)
+      .pipe(
+        finalize(() => {
+          this.loading.set(false);
+        })
+      )
+      .subscribe({
+        next: (response: any) => {
+          console.log('State data loaded:', response);
+          if (response.draw !== this.queryState.getQuery().draw) {
+            return;
+          }
+
+          // Add serial numbers to states
+          const statesWithSerialNumbers = response.rows.map((state: any, index: number) => ({
+            ...state,
+            serialNumber: (query.page - 1) * query.pageSize + index + 1
+          }));
+
+          this.states.set(statesWithSerialNumbers);
+          this.totalRecords.set(response.total);
+          this.filteredRecords.set(response.filtered);
+        },
+        error: (error: any) => {
+          console.error('Unable to load states.', error);
+
+          this.states.set([]);
+          this.totalRecords.set(0);
+          this.filteredRecords.set(0);
+        }
+      });
+  }
+
+  onSearch(value: string): void {
+    const query = this.queryState.setSearch(value.trim());
+    this.loadStates(query, 'a9d18090-f76a-489f-bfc7-9d97d3d2d7da');
+  }
+
+  onPageChange(event: DataTablePageEvent): void {
+    const query = this.queryState.setPage(event);
+    this.loadStates(query, 'a9d18090-f76a-489f-bfc7-9d97d3d2d7da');
+  }
+
+  onSortChange(event: DataTableSortEvent): void {
+    const query = this.queryState.setSort(event);
+    this.loadStates(query, 'a9d18090-f76a-489f-bfc7-9d97d3d2d7da');
+  }
+
+  onRefresh(): void {
+    const currentQuery = this.queryState.getQuery();
+
+    const query: DataTableQuery = {
+      ...currentQuery,
+      draw: currentQuery.draw + 1
+    };
+
+    this.loadStates(query, 'a9d18090-f76a-489f-bfc7-9d97d3d2d7da');
+  }
+
+  onReset(): void {
+    const query = this.queryState.reset();
+    this.loadStates(query, 'a9d18090-f76a-489f-bfc7-9d97d3d2d7da');
+  }
+
+  onActionClick(event: DataTableActionEvent): void {
+    const action = event.action.type;
+    const state = event.row;
+
+    switch (action) {
+      case 'view':
+        this.viewState(state);
+        break;
+      case 'edit':
+        this.editState(state);
+        break;
+      case 'delete':
+        this.deleteState(state);
+        break;
+      case 'activate':
+        this.activateState(state);
+        break;
+    }
+  }
+
+  private viewState(state: any): void {
+    console.log('Viewing state:', state);
+    // TODO: Implement view logic (open modal, navigate to details page, etc.)
+  }
+
+  private editState(state: any): void {
+    console.log('Editing state:', state);
+    // TODO: Implement edit logic (open modal, navigate to edit page, etc.)
+  }
+
+  private deleteState(state: any): void {
+    console.log('Deleting state:', state);
+    // TODO: Implement delete logic (API call to delete state)
+  }
+
+  private activateState(state: any): void {
+    console.log('Activating state:', state);
+    // TODO: Implement activate logic (API call to activate state)
+  }
+
+}