ng-tablekit 1.0.0

package/src/app/templates/master-page/master-page.component.css

@@ -0,0 +1,311 @@
+:host {
+  display: block;
+  min-width: 0;
+}
+
+/* Table Page Structure */
+.template-page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+/* Toolbar */
+.table-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  flex-wrap: wrap;
+  background: transparent;
+  padding: 0;
+}
+
+.table-toolbar__left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.table-toolbar__right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-left: auto;
+}
+
+/* Page Heading */
+.page-heading {
+  margin: 0;
+  font-family: Poppins, Arial, sans-serif;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 24px;
+  color: #1f1f1f;
+}
+
+/* Back Button */
+.back-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px !important;
+  height: 32px !important;
+  min-width: 32px !important;
+  border-radius: 50% !important;
+  padding: 0 !important;
+  border: 1px solid #d9d9d9 !important;
+  background: #ffffff !important;
+  color: #262626 !important;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.back-btn:hover {
+  border-color: #1890ff !important;
+  color: #1890ff !important;
+  background: #ffffff !important;
+}
+
+/* Compact Buttons (Filter, Excel, Actions) */
+.compact-btn {
+  height: 32px !important;
+  min-width: 32px !important;
+  border-radius: 6px !important;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 0 12px !important;
+  font-size: 12px !important;
+}
+
+.compact-btn.icon-only {
+  padding: 0 !important;
+}
+
+/* Search Field */
+.search-field {
+  width: 260px;
+  margin-bottom: 0;
+}
+
+:host ::ng-deep .search-field .ant-input {
+  height: 32px !important;
+  border-radius: 8px 0 0 8px !important;
+  font-size: 12px;
+}
+
+:host ::ng-deep .search-field .ant-input-group-addon .ant-btn {
+  height: 32px !important;
+  width: 40px !important;
+  border-radius: 0 8px 8px 0 !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Filter Panel */
+.filter-panel {
+  margin: 0 0 14px;
+  padding: 12px 10px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  background: #ffffff;
+}
+
+.filter-panel__grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(180px, 1fr));
+  gap: 12px;
+}
+
+.filter-panel__field {
+  display: inline-block;
+  margin-bottom: 5px;
+  width: 100%;
+  padding: 0 10px;
+}
+
+.filter-panel__field>label {
+  display: block;
+  font-family: Poppins, Arial, sans-serif;
+  color: #333;
+  font-size: 12px;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+:host ::ng-deep .filter-panel__field .ant-select,
+:host ::ng-deep .filter-panel__field .ant-picker,
+:host ::ng-deep .filter-panel__field .ant-input {
+  width: 100%;
+  border-radius: 4px;
+}
+
+:host ::ng-deep .filter-panel__field .ant-radio-wrapper {
+  display: inline-flex;
+  align-items: center;
+  margin-right: 16px;
+}
+
+.filter-panel__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 10px;
+  padding: 0 10px;
+}
+
+/* Table Overrides */
+.data-table {
+  width: 100%;
+}
+
+:host ::ng-deep .ant-table {
+  background: #ffffff !important;
+  font-family: Poppins, Arial, sans-serif;
+}
+
+:host ::ng-deep .ant-table-bordered .ant-table-container {
+  border: 0 !important;
+  border-left: 1px solid #e5e7eb !important;
+}
+
+:host ::ng-deep .ant-table-thead>tr>th {
+  background: #fafafa !important;
+  color: #262626 !important;
+  font-family: Poppins, Arial, sans-serif;
+  font-size: 14px !important;
+  font-weight: 600 !important;
+  white-space: nowrap;
+  padding: 8px 12px !important;
+  border-bottom: 1px solid #e5e7eb !important;
+  vertical-align: middle !important;
+  text-align: center !important;
+}
+
+:host ::ng-deep .ant-table-thead>tr>th .ant-table-filter-column-title {
+  padding: 0 !important;
+  display: flex;
+  align-items: center;
+}
+
+:host ::ng-deep .ant-table-tbody>tr:not(.ant-table-measure-now)>td {
+  color: #333 !important;
+  font-size: 12px !important;
+  font-weight: 400 !important;
+  padding: 6px 12px !important;
+  vertical-align: middle !important;
+  border-bottom: 1px solid #e5e7eb !important;
+}
+
+:host ::ng-deep .ant-table-tbody>tr:not(.ant-table-measure-now):hover>td {
+  background: #fafcff !important;
+}
+
+:host ::ng-deep tr.ant-table-measure-now,
+:host ::ng-deep tr.ant-table-measure-now>td,
+:host ::ng-deep tr.ant-table-measure-now>td>div {
+  height: 0 !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  border: 0 !important;
+  line-height: 0 !important;
+  font-size: 0 !important;
+  visibility: hidden !important;
+}
+
+/* Pagination */
+:host ::ng-deep .ant-pagination {
+  margin-top: 12px !important;
+  display: flex;
+  justify-content: flex-end;
+}
+
+:host ::ng-deep .ant-pagination-item,
+:host ::ng-deep .ant-pagination-prev,
+:host ::ng-deep .ant-pagination-next,
+:host ::ng-deep .ant-pagination-options {
+  font-size: 12px !important;
+}
+
+/* Status Tag */
+.status-tag {
+  min-width: 80px;
+  text-align: center;
+}
+
+/* Action Icons */
+.action-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+.action-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: #e6f7ff;
+  color: #1890ff;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.action-icon-btn:hover {
+  background: #1890ff;
+  color: #fff;
+}
+
+.action-icon-btn.danger {
+  background: #fff1f0;
+  color: #f5222d;
+}
+
+.action-icon-btn.danger:hover {
+  background: #f5222d;
+  color: #fff;
+}
+
+/* Responsive */
+@media (max-width: 900px) {
+  .filter-panel__grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .filter-panel__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .table-toolbar__left,
+  .table-toolbar__right {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .table-toolbar__right {
+    margin-left: 0;
+  }
+
+  .search-field {
+    width: 100%;
+  }
+}

package/src/app/templates/master-page/master-page.component.html

@@ -0,0 +1,131 @@
+<div class="template-code-actions">
+  <app-copy-template-button [sourcePaths]="[
+    { name: 'Master Page', path: 'master-page/master-page' },
+    { name: 'Record Drawer', path: 'master-page/master-record-drawer' },
+    { name: 'Map Role Drawer', path: 'master-page/master-map-drawer' }
+  ]" />
+</div>
+<section class="template-page">
+  <div class="table-toolbar">
+    <div class="table-toolbar__left"><button class="back-btn" title="Back" aria-label="Go back" type="button" (click)="goBack()"><span nz-icon
+          nzType="arrow-left"></span></button>
+      <h1 class="page-heading">{{ reportTitle }}</h1>
+    </div>
+    <div class="table-toolbar__right">
+      @if(showFilter) { <button nz-button nzType="default" class="compact-btn" type="button" (click)="toggleFilter()"><span nz-icon
+          nzType="filter"></span> Filter</button> }
+      @if(showExcel) { <button nz-button nzType="primary" class="compact-btn" type="button"
+        (click)="downloadExcel()"><span nz-icon nzType="file-excel"></span>
+        Excel</button> }
+      @if(showPdf) { <button nz-button nzType="primary" class="compact-btn" type="button" (click)="downloadPdf()"><span
+          nz-icon nzType="file-pdf"></span> PDF</button> }
+      <nz-form-item class="search-field"><nz-input-group nzSearch [nzAddOnAfter]="searchButton"><input type="text"
+            nz-input (keydown.enter)="onSearch()" placeholder="Search Records"
+            [(ngModel)]="searchText" /></nz-input-group><ng-template #searchButton><button nz-button
+            class="compact-btn icon-only" nzType="primary" type="button" (click)="onSearch()"
+            aria-label="Search records"><span nz-icon nzType="search"></span></button></ng-template></nz-form-item>
+      
+      @if(showAddAction) {
+        <button nz-button nzType="primary" class="compact-btn" type="button" (click)="openAddDrawer()">
+          <span nz-icon nzType="plus"></span> Add New
+        </button>
+      }
+    </div>
+  </div>
+  @if(filterVisible){
+  <form class="filter-panel" [formGroup]="filterForm">
+    <div class="filter-panel__grid">
+      @if (showCategoryFilter) {
+      <div class="filter-panel__field"><label>Category</label><nz-select formControlName="category" nzAllowClear
+          nzPlaceHolder="Select category">@for(option of categories;track
+          option){<nz-option [nzLabel]="option" [nzValue]="option" />}</nz-select></div>
+      }
+      @if (showMultiselectFilter) {
+      <div class="filter-panel__field"><label>Categories (Multi)</label><nz-select formControlName="categories" nzMode="multiple" nzAllowClear
+          nzPlaceHolder="Select categories">@for(option of categories;track
+          option){<nz-option [nzLabel]="option" [nzValue]="option" />}</nz-select></div>
+      }
+      @if (showDateFilter) {
+      <div class="filter-panel__field"><label>Created Date</label><nz-date-picker formControlName="date" nzPlaceHolder="Select date"></nz-date-picker></div>
+      }
+      @if (showDateRangeFilter) {
+      <div class="filter-panel__field"><label>Date Range</label><nz-range-picker formControlName="dateRange"></nz-range-picker></div>
+      }
+      @if (showRadioFilter) {
+      <div class="filter-panel__field"><label>Status</label><nz-radio-group formControlName="status">
+          @for(option of statuses;track option){<label nz-radio [nzValue]="option">{{option}}</label>}
+        </nz-radio-group></div>
+      }
+    </div>
+    <div class="filter-panel__actions"><button nz-button class="compact-btn" type="button"
+        (click)="clearFilters()">Clear</button><button nz-button nzType="primary" class="compact-btn" type="button"
+        (click)="applyFilters()">Apply Filters</button></div>
+  </form>
+  }
+  <nz-table #table nzBordered nzSize="small" [nzData]="records" [(nzPageIndex)]="pageIndex" [nzPageSize]="10"
+    [nzShowSizeChanger]="true" [nzPageSizeOptions]="pageSizeOptions" [nzScroll]="{ y: '55vh' }"
+    (nzQueryParams)="onQueryParamsChange($event)">
+    <thead>
+      <tr>
+        <th nzWidth="150px" nzAlign="center">Action</th>
+        @for(column of columns; track column.key){
+        @if(column.sortable === true){
+        <th [nzWidth]="column.width ?? null" [nzSortFn]="sortBy(column.key)">{{column.title}}</th>
+        } @else {
+        <th [nzWidth]="column.width ?? null">{{column.title}}</th>
+        }
+        }
+      </tr>
+    </thead>
+    <tbody>@for(record of table.data; track record.id){<tr>
+        <td nzAlign="center">
+          <div class="action-buttons">
+            @if(showViewAction) {
+              <button class="action-icon-btn" title="View" (click)="viewRecord(record)">
+                <span nz-icon nzType="eye"></span>
+              </button>
+            }
+            @if(showMapAction) {
+              <button class="action-icon-btn" title="Map Role" (click)="mapRecord(record)">
+                <span nz-icon nzType="form"></span>
+              </button>
+            }
+            @if(showEditAction) {
+              <button class="action-icon-btn" title="Edit" (click)="openEditDrawer(record)">
+                <span nz-icon nzType="edit"></span>
+              </button>
+            }
+            @if(showDeleteAction) {
+              <button class="action-icon-btn danger" title="Delete" nz-popconfirm nzPopconfirmTitle="Are you sure delete this record?" nzPopconfirmPlacement="left" (nzOnConfirm)="deleteRecord(record)">
+                <span nz-icon nzType="delete"></span>
+              </button>
+            }
+          </div>
+        </td>
+        
+        @for(column of
+        columns; track column.key){<td [nzAlign]="column.align || 'left'">
+          @switch(column.type){@case('date'){ {{
+          formatDateValue(record[column.key]) }} }@case('status'){<nz-tag class="status-tag"
+            [nzColor]="getStatusColor(record.status)">{{record.status}}</nz-tag>}@case('currency'){ {{ getCurrencyValue(record[column.key]) | currency }} }@default{
+          {{record[column.key]}} }}
+        </td>}
+      </tr>}</tbody>
+  </nz-table>
+</section>
+
+<app-master-record-drawer
+  [visible]="isDrawerVisible"
+  [mode]="drawerMode"
+  [title]="drawerTitle"
+  [record]="editingRecord"
+  [categories]="categories"
+  (close)="closeDrawer()"
+  (save)="saveRecord($event)"
+></app-master-record-drawer>
+
+<app-master-map-drawer
+  [visible]="isMapDrawerVisible"
+  [record]="mappingRecord"
+  (close)="closeMapDrawer()"
+></app-master-map-drawer>