cat-qw-lib 1.0.0 → 1.0.2

package/src/lib/shared/table-secondary/components/table-secondary.component.scss

@@ -1,406 +0,0 @@
-.table-header-container {
-  padding: 20px 20px 20px 8px;
-}
-
-.table-header-title {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-color-tertiary) !important;
-}
-
-.table-header-wrapper {
-  padding: 12px 14px;
-}
-
-.table-body-wrapper {
-  padding: 14px;
-}
-
-.table-text-wrapper {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: normal;
-  max-width: 400%;
-  padding: 0.5rem;
-  box-sizing: border-box;
-}
-
-.record_username {
-  color: #0f8bfd;
-}
-
-.table-title-wrapper {
-  font-size: 20px;
-  font-weight: 700;
-}
-
-.table-action-title,
-.header-text-wrapper {
-  // border-radius: 0 10px 0 0;
-  border-right: 1px solid rgba(68, 72, 109, 0.1) !important;
-}
-
-.action-data-wrapper {
-  border-right: 1px solid rgba(68, 72, 109, 0.1) !important;
-}
-
-.enable-badge-wrapper {
-  border-radius: 4px;
-  background: var(--green-500);
-  color: var(--surface-0);
-  text-align: center;
-  padding: 5px !important;
-}
-.verified-status {
-  background-color: var(--green-500);
-}
-.disable-badge-wrapper {
-  border-radius: 4px;
-  background: #44486d;
-  color: var(--surface-0);
-  text-align: center;
-  padding: 5px !important;
-}
-
-.search-input-wrapper {
-  height: 50px;
-  border-radius: 10px;
-  border: 1px solid rgba(76, 98, 146, 0.1);
-  background: rgba(76, 98, 146, 0.04);
-}
-.Verified {
-  background-color: var(--green-400);
-  padding: 0.3rem !important;
-  border-radius: 5px;
-  color: white;
-}
-.DirectDebitDetails {
-  background-color: #b2eaf2;
-  padding: 0.3rem !important;
-  border-radius: 5px;
-  color: #00bcd4;
-}
-.Application {
-  background-color: rgba(76, 175, 80, 0.1);
-  padding: 0.3rem !important;
-  border-radius: 5px;
-  color: #4caf50;
-}
-.Property {
-  background-color: #d8dcf0;
-  padding: 0.3rem !important;
-  border-radius: 5px;
-  color: #3f51b5;
-}
-.Applicant {
-  background-color: #f6a5c0;
-  padding: 0.3rem !important;
-  border-radius: 5px;
-  color: #e91e63;
-}
-.ApplicationNote {
-  background-color: #f6a5c0;
-  padding: 0.3rem !important;
-  border-radius: 5px;
-  color: #e91e63;
-}
-.OnBoarding {
-  background-color: #d8dcf0;
-  padding: 0.3rem !important;
-  border-radius: 5px;
-  color: #3f51b5;
-}
-.PropertyDetails {
-  background-color: #d8dcf0;
-  padding: 0.3rem !important;
-  border-radius: 5px;
-  color: #3f51b5;
-}
-.Alert {
-  background-color: var(--red-500);
-  padding: 0.3rem !important;
-  border-radius: 5px;
-  color: white;
-}
-
-.Pending {
-  background-color: var(--orange-300);
-  padding: 0.3rem !important;
-  border-radius: 5px;
-  color: white;
-}
-.table-row-wrapper {
-  position: relative;
-  transition: all 0.3s ease-in-out;
-}
-
-.icon-position-wrapper {
-  position: absolute;
-  top: 50%;
-  left: 16%;
-  transform: translate(-50%, -50%);
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
-}
-
-.table-row-wrapper:hover .icon-position-wrapper {
-  opacity: 1;
-  visibility: visible;
-}
-
-.table-group-wrapper:hover .icon-position-wrapper {
-  visibility: visible;
-  opacity: 1;
-}
-
-.table-pagination-wrapper {
-  border-radius: 0px 0px 10px 10px;
-}
-
-::ng-deep {
-  .edit-icon-wrapper {
-    .p-button {
-      border-radius: 10px;
-      border: 1px solid rgba(76, 98, 146, 0.1);
-      background: #eef0f5;
-      padding: 12px 20px;
-
-      .pi-pencil {
-        color: var(--primary-color);
-      }
-    }
-  }
-
-  .delete-icon-wrapper {
-    .p-button {
-      border-radius: 10px;
-      border: 1px solid rgba(76, 98, 146, 0.1);
-      background: #eef0f5;
-      padding: 12px 20px;
-
-      .pi-trash {
-        color: var(--red-500);
-      }
-    }
-  }
-
-  .record_username {
-    color: var(--primary-color);
-  }
-
-  .table-title-wrapper {
-    font-size: 20px;
-    font-weight: 700;
-  }
-
-  .table-action-title,
-  .header-text-wrapper {
-    border-right: 1px solid var(--primary-border-color) !important;
-  }
-
-  .table-action-title {
-    border-radius: 0 10px 0 0;
-  }
-
-  .action-data-wrapper {
-    border-right: 1px solid var(--primary-border-color) !important;
-  }
-
-  .enable-badge-wrapper {
-    border-radius: 4px;
-    background: var(--green-500);
-    color: var(--surface-0);
-    text-align: center;
-    padding: 5px !important;
-  }
-  .verified-status {
-    background-color: var(--green-500);
-  }
-  .disable-badge-wrapper {
-    border-radius: 4px;
-    background: #44486d;
-    color: var(--surface-0);
-    text-align: center;
-    padding: 5px !important;
-  }
-
-  .search-input-wrapper {
-    height: 50px;
-    border-radius: 10px;
-    border: 1px solid rgba(76, 98, 146, 0.1);
-    background: rgba(76, 98, 146, 0.04);
-  }
-  .Verified {
-    background-color: var(--green-400);
-    padding: 0.3rem !important;
-    border-radius: 5px;
-    color: white;
-  }
-  .DirectDebitDetails {
-    background-color: #b2eaf2;
-    padding: 0.3rem !important;
-    border-radius: 5px;
-    color: #00bcd4;
-  }
-  .Application {
-    background-color: rgba(76, 175, 80, 0.1);
-    padding: 0.3rem !important;
-    border-radius: 5px;
-    color: #4caf50;
-  }
-  .Property {
-    background-color: #d8dcf0;
-    padding: 0.3rem !important;
-    border-radius: 5px;
-    color: #3f51b5;
-  }
-  .Applicant {
-    background-color: #f6a5c0;
-    padding: 0.3rem !important;
-    border-radius: 5px;
-    color: #e91e63;
-  }
-  .ApplicationNote {
-    background-color: #f6a5c0;
-    padding: 0.3rem !important;
-    border-radius: 5px;
-    color: #e91e63;
-  }
-  .OnBoarding {
-    background-color: #d8dcf0;
-    padding: 0.3rem !important;
-    border-radius: 5px;
-    color: #3f51b5;
-  }
-  .PropertyDetails {
-    background-color: #d8dcf0;
-    padding: 0.3rem !important;
-    border-radius: 5px;
-    color: #3f51b5;
-  }
-  .Alert {
-    background-color: var(--red-500);
-    padding: 0.3rem !important;
-    border-radius: 5px;
-    color: white;
-  }
-
-  .setting-icon-wrapper {
-    .p-button {
-      border-radius: 10px;
-      border: 1px solid rgba(76, 98, 146, 0.1);
-      background: #eef0f5;
-      padding: 24px;
-      height: 50px;
-
-      .pi-cog {
-        color: var(--primary-color);
-      }
-    }
-  }
-
-  .view-icon-wrapper {
-    .p-button {
-      border-radius: 10px;
-      border: 1px solid rgba(76, 98, 146, 0.3);
-      background: var(--surface-0);
-      padding: 20px;
-      height: 40px;
-      box-shadow: none;
-
-      .pi-eye {
-        color: #44486d;
-      }
-    }
-  }
-
-  .table-secondary-container {
-    .p-datatable-table {
-      padding: 20px 8px 12px 8px;
-      background-color: #fff;
-      table-layout: fixed;
-      .p-datatable-thead {
-        background-color: var(--color-surface);
-      }
-    }
-
-    .p-datatable-header {
-      padding: 20px 20px 0;
-      border-radius: 10px 10px 0 0 !important;
-      border: none !important;
-    }
-
-    .p-datatable-thead {
-      th {
-        border: 1px solid rgba(68, 72, 109, 0.1);
-        border-left: none;
-        border-right: none;
-        background: #f9f9fa;
-
-        &:first-child {
-          border-radius: 10px 0 0 0;
-          border-left: 1px solid rgba(68, 72, 109, 0.1);
-        }
-      }
-    }
-
-    tr {
-      td {
-        border-bottom: 1px solid rgba(68, 72, 109, 0.1);
-      }
-
-      td:first-child {
-        border-left: 1px solid rgba(68, 72, 109, 0.1);
-      }
-    }
-
-    tr:last-child {
-      td:first-child {
-        border-radius: 0 0 0 10px;
-      }
-
-      td:last-child {
-        border-radius: 0 0 10px 0;
-      }
-    }
-  }
-}
-
-:host ::ng-deep .p-checkbox-box.p-highlight {
-  background-color: var(--color-green-500) !important;
-  border-color: var(--color-green-500) !important;
-}
-
-.green-highlight {
-  background-color: var(
-    --color-green-10
-  ) !important; /* Light green background */
-}
-
-:host ::ng-deep .p-checkbox-box.p-highlight .p-checkbox-icon {
-  color: var(--color-surface-light);
-}
-
-:host ::ng-deep .p-checkbox-box:hover {
-  background-color: var(--color-surface-light) !important;
-  border: 1px solid var(--text-black) !important;
-}
-
-:host ::ng-deep .p-checkbox-box.p-highlight:hover {
-  background-color: var(--color-green-500) !important;
-  border-color: var(--color-green-500) !important;
-}
-
-@media screen and (min-width: 1200px) and (max-width: 1500px) {
-  .table-header-wrapper {
-    padding: 12px 8px;
-  }
-
-  .table-body-wrapper {
-    padding: 8px;
-  }
-} 

package/src/lib/shared/table-secondary/components/table-secondary.component.spec.ts

@@ -1,95 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { TableSecondaryComponent } from './table-secondary.component';
-import { Router } from '@angular/router';
-import { ActivatedRoute } from '@angular/router';
-import { BaseService } from '../../state/base.service';
-import { BaseQuery } from '../../state/base.query';
-import { of } from 'rxjs';
-import { SHARED } from '../../constants/SHARED';
-
-describe('TableSecondaryComponent', () => {
-  let component: TableSecondaryComponent;
-  let fixture: ComponentFixture<TableSecondaryComponent>;
-  let mockRouter = {
-    url: '/app/test',
-    navigate: jasmine.createSpy('navigate')
-  };
-  let mockService = {
-    getPaginatedList: jasmine.createSpy('getPaginatedList').and.returnValue(of({
-      data: [],
-      metadata: { currentPage: 1, itemsPerPage: 10, totalItems: 0 }
-    }))
-  };
-  let mockBaseQuery = {
-    selectPage: () => of({})
-  };
-  let mockActivatedRoute = {};
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [TableSecondaryComponent],
-      providers: [
-        { provide: Router, useValue: mockRouter },
-        { provide: BaseService, useValue: mockService },
-        { provide: ActivatedRoute, useValue: mockActivatedRoute },
-        { provide: BaseQuery, useValue: mockBaseQuery },
-      ]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(TableSecondaryComponent);
-    component = fixture.componentInstance;
-    component.table = { headers: [], dataKey: 'id' } as any;
-    component.metaData = { currentPage: 1, itemsPerPage: 10, totalItems: 50 } as any;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should initialize recordNumber correctly in ngOnInit', () => {
-    component.table.headers = [{}];
-    component.ngOnInit();
-    expect(component.recordNumber).toBe(10);
-  });
-
-  it('should clear global filter and call clear on table', () => {
-    const mockTable = { clear: jasmine.createSpy('clear') };
-    component.clearSearch(mockTable);
-    expect(component.globalFilter).toBe(SHARED.EMPTY);
-    expect(mockTable.clear).toHaveBeenCalled();
-  });
-
-  it('should navigate on handleCreate', () => {
-    component.handleCreate();
-    expect(mockRouter.navigate).toHaveBeenCalledWith(['/app/test/0']);
-  });
-
-  it('should navigate on handleEditClick', () => {
-    component.handleEditClick(123);
-    expect(mockRouter.navigate).toHaveBeenCalledWith(['/app/test/123']);
-  });
-
-  it('should return valid data key', () => {
-    expect(component.validDataKey).toBe('id');
-  });
-
-  it('should return row class if defined', () => {
-    const col = { name: 'status' };
-    const rowData = { status: { class: 'highlight' } };
-    const result = component.getRowClass(col, rowData);
-    expect(result).toBe('highlight');
-  });
-
-  it('should call service and update table on handleLoadRecords', () => {
-    component.pathName = 'sample';
-    component.table.headers = [{}];
-    component.builder = {
-      buildTable: jasmine.createSpy('buildTable').and.returnValue({ headers: [] })
-    };
-    const event = { first: 0, rows: 10 };
-    component.handleLoadRecords(event);
-    expect(mockService.getPaginatedList).toHaveBeenCalled();
-    expect(component.recordNumber).toBe(0);
-  });
-});