data-grid-workspace 0.0.120

package/src/app/dropdown-filter/dropdown-filter.component.html

@@ -0,0 +1,118 @@
+<div class="filter-panel w-100">
+  <ng-container *ngIf="column.type !== 'dropdown' && column.type !== 'array'">
+    <div class="filter-group">
+      <label class="filter-label">Condition</label>
+      <select class="filter-select" [(ngModel)]="column.query.first_condition">
+        <option>Contains</option>
+        <option>Less than or equal</option>
+        <option>Greater than or equal</option>
+        <option>Less Than</option>
+        <option>Greater Than</option>
+        <option>Does not contain</option>
+        <option>Blank</option>
+      </select>
+    </div>
+
+    <div class="filter-group">
+      <label class="filter-label">Value</label>
+      <input
+        class="filter-input"
+        [(ngModel)]="column.query.first_value"
+        type="text"
+        placeholder="Enter value"
+      />
+    </div>
+
+    <div class="filter-logic">
+      <label class="logic-option">
+        <input type="radio" [(ngModel)]="column.query.condition" value="and" />
+        <span>AND</span>
+      </label>
+
+      <label class="logic-option">
+        <input type="radio" [(ngModel)]="column.query.condition" value="or" />
+        <span>OR</span>
+      </label>
+
+      <label class="logic-option">
+        <input type="radio" [(ngModel)]="column.query.condition" value="none" />
+        <span>NONE</span>
+      </label>
+    </div>
+
+    <ng-container
+      *ngIf="column.query.first_value && column.query.condition !== 'none'"
+    >
+      <div class="filter-divider"></div>
+
+      <div class="filter-group">
+        <label class="filter-label">Second Condition</label>
+        <select
+          class="filter-select"
+          [(ngModel)]="column.query.second_condition"
+        >
+          <option>Contains</option>
+          <option>Less than or equal</option>
+          <option>Greater than or equal</option>
+          <option>Less Than</option>
+          <option>Greater Than</option>
+          <option>Does not contain</option>
+          <option>Blank</option>
+        </select>
+      </div>
+
+      <div class="filter-group">
+        <label class="filter-label">Second Value</label>
+        <input
+          class="filter-input"
+          [(ngModel)]="column.query.second_value"
+          type="text"
+          placeholder="Enter value"
+        />
+      </div>
+    </ng-container>
+
+  </ng-container>
+
+  <ng-container *ngIf="column.type === 'dropdown' || column.type === 'array'">
+    <input
+      type="text"
+      class="form-control mt-2"
+      placeholder="Search..."
+      [(ngModel)]="dropdownSearch"
+    />
+    <div class="d-flex align-items-center gap-2 mb-2 ps-1 mt-2">
+      <input
+        type="checkbox"
+        class="form-check-input"
+        [checked]="isAllSelected()"
+        [indeterminate]="isIndeterminate()"
+        (change)="toggleSelectAll($event)"
+        id="select-all"
+      />
+      <label class="mb-0" for="select-all">Select All</label>
+    </div>
+
+    <div class="dropdown-options overflow-auto" style="max-height: 400px">
+      <div
+        class="d-flex align-items-center gap-2 mb-1 ps-1"
+        *ngFor="let option of filteredDropdownValues()"
+      >
+        <input
+          type="checkbox"
+          class="form-check-input"
+          [checked]="isOptionSelected(option)"
+          (change)="toggleOption(option)"
+          id="{{option.value}}"
+        />
+        <label class="mb-0 w-100" for="{{option.value}}">{{ getTransformedValue(option.value) }}</label>
+      </div>
+    </div>
+  </ng-container>
+
+  
+    <div class="filter-actions">
+      <button class="btn-clear" (click)="clearFilter()">Clear</button>
+      <button class="btn-apply" (click)="applyFilter()">Apply</button>
+    </div>
+</div>

package/src/app/dropdown-filter/dropdown-filter.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { DropdownFilterComponent } from './dropdown-filter.component';
+
+describe('DropdownFilterComponent', () => {
+  let component: DropdownFilterComponent;
+  let fixture: ComponentFixture<DropdownFilterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DropdownFilterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DropdownFilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/dropdown-filter/dropdown-filter.component.ts

@@ -0,0 +1,139 @@
+import { Component, OnInit } from '@angular/core';
+import { DataGridComponent } from 'projects/data-grid/src/lib/data-grid/data-grid.component';
+
+@Component({
+  selector: 'app-dropdown-filter',
+  templateUrl: './dropdown-filter.component.html',
+  styleUrls: ['./dropdown-filter.component.css']
+})
+export class DropdownFilterComponent {
+
+  constructor() { }
+  column: any
+  dataGridComponent!: DataGridComponent
+  params: any;
+  gridInit(params: any) {
+    this.params = params;
+    this.column = params?.col;
+    if (!this.column.query) {
+      this.column.query = {
+        first_condition: 'Contains',
+        first_value: '',
+        condition: 'AND',
+        second_condition: 'Contains',
+        second_value: ''
+      }
+    }
+    if (this.column.type === 'number') {
+      this.column.query.first_condition = 'Less than or equal';
+      this.column.query.second_condition = 'Less than or equal';
+      this.column.query.condition = this.column.query.condition || 'none';
+    }
+    if (this.column.type === 'date') {
+      this.column.query.first_condition = 'Less than or equal';
+      this.column.query.second_condition = 'Less than or equal';
+      this.column.query.condition = this.column.query.condition || 'none';
+    }
+
+    if (this.column.type === 'boolean') {
+      this.column.query.first_condition = 'Equals';
+      this.column.query.second_condition = 'Equals';
+      this.column.query.condition = this.column.query.condition || 'none';
+    }
+    if (this.column.type === 'string') {
+      this.column.query.first_condition = 'conatains';
+      this.column.query.second_condition = 'contains';
+      this.column.query.condition = this.column.query.condition || 'none';
+    }
+    if (this.column.type === 'dropdown' || this.column.type === 'array') {
+      this.column.query.first_condition = null;
+      this.column.query.second_condition = null;
+      this.column.query.first_value = null;
+      this.column.query.second_value = null;
+      this.column._ids = this.column._ids || [];
+    }
+
+    console.log('Dropdown Filter Init Params:', params);
+  }
+
+
+  applyFilter() {
+    this.params.context.applyFilter(this.column);
+  }
+
+  clearFilter() {
+    this.params.context.clearFilter(this.column);
+  }
+
+
+  dropdownSearch: string = '';
+
+  filteredDropdownValues() {
+    return (this.column.column_dropdown_value || []).filter((o: any) =>
+      o.value.toLowerCase().includes(this.dropdownSearch.toLowerCase())
+    );
+  }
+
+  // Check if option is selected
+  isOptionSelected(option: any) {
+    const id = option.id ?? option._id;
+    return this.column.query._ids?.includes(id);
+  }
+
+  // Toggle single option
+  toggleOption(option: any) {
+    const id = option.id ?? option._id;
+    if (!this.column.query._ids) this.column.query._ids = [];
+
+    const index = this.column.query._ids.indexOf(id);
+    if (index > -1) {
+      this.column.query._ids.splice(index, 1);
+    } else {
+      this.column.query._ids.push(id);
+    }
+  }
+
+  // Select All / Deselect All
+  toggleSelectAll(event: any) {
+    const allIds = (this.column.column_dropdown_value || []).map(
+      (o: any) => o.id ?? o._id
+    );
+
+    if (event.target.checked) {
+      this.column.query._ids = [...allIds];
+    } else {
+      this.column.query._ids = [];
+    }
+  }
+
+  // Is Select All fully checked?
+  isAllSelected(): boolean {
+    const allIds = (this.column.column_dropdown_value || []).map(
+      (o: any) => o.id ?? o._id
+    );
+    return (
+      this.column.query._ids?.length === allIds.length &&
+      allIds.length > 0
+    );
+  }
+
+  // Is Select All indeterminate?
+  isIndeterminate(): boolean {
+    const allIds = (this.column.column_dropdown_value || []).map(
+      (o: any) => o.id ?? o._id
+    );
+    return (
+      this.column.query._ids?.length > 0 &&
+      this.column.query._ids?.length < allIds.length
+    );
+  }
+
+
+  getTransformedValue(value: any): any {
+    if(value == 'true') return "Yes"
+    else if(value == 'false') return "No"
+    else return value
+  }
+
+
+}

package/src/app/status-cell/status-cell.component.html

@@ -0,0 +1 @@
+{{params?.value == true || params.value == 'true' ? 'Yes' : (params?.value == false || params.value == 'false' ? 'No' : params?.value || '-')}}

package/src/app/status-cell/status-cell.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { StatusCellComponent } from './status-cell.component';
+
+describe('StatusCellComponent', () => {
+  let component: StatusCellComponent;
+  let fixture: ComponentFixture<StatusCellComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StatusCellComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StatusCellComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/status-cell/status-cell.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-status-cell',
+  templateUrl: './status-cell.component.html',
+  styleUrls: ['./status-cell.component.css']
+})
+export class StatusCellComponent {
+
+  params: any;
+ gridInit(params: any) {
+    this.params = params;
+  }
+
+   gridRefresh(params: any) {
+    this.params = params;
+  }
+}

package/src/app/status-cell-editor/status-cell-editor.component.html

@@ -0,0 +1,12 @@
+<select
+  class="form-select form-select-sm"
+  [(ngModel)]="currentValue"
+  (blur)="onBlur()"
+>
+  <option 
+    *ngFor="let option of cellValue?.options || [{ value: 'Active', label: 'Active' }, { value: 'Inactive', label: 'Inactive' }]" 
+    [ngValue]="option"
+  >
+    {{ option.label || option.value }}
+  </option>
+</select>

package/src/app/status-cell-editor/status-cell-editor.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { StatusCellEditorComponent } from './status-cell-editor.component';
+
+describe('StatusCellEditorComponent', () => {
+  let component: StatusCellEditorComponent;
+  let fixture: ComponentFixture<StatusCellEditorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StatusCellEditorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StatusCellEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/status-cell-editor/status-cell-editor.component.ts

@@ -0,0 +1,77 @@
+import { Component, OnInit, Inject, EventEmitter, Output, HostListener } from '@angular/core';
+
+@Component({
+  selector: 'app-status-cell-editor',
+  templateUrl: './status-cell-editor.component.html',
+  styleUrls: ['./status-cell-editor.component.css']
+})
+export class StatusCellEditorComponent implements OnInit {
+
+  // --------- Inputs injected via directive ----------------
+  constructor(
+    @Inject('rowData') public rowData: any,
+    @Inject('colData') public colData: any,
+    @Inject('cellValue') public cellValue: any,
+  ) {}
+
+  // --------- Local state for editing ----------------
+  public currentValue: any;
+
+  ngOnInit(): void {
+    // Initialize editor with current value
+    this.currentValue = this.cellValue;
+
+    // Optional: run custom lifecycle hook if provided
+    if (typeof (this as any).editorInit === 'function') {
+      (this as any).editorInit({
+        row: this.rowData,
+        col: this.colData,
+        value: this.cellValue
+      });
+    }
+  }
+
+  // --------- Outputs / Events ----------------
+  @Output() valueChanged = new EventEmitter<any>();
+  @Output() editingDone = new EventEmitter<void>();
+  @Output() editingCancelled = new EventEmitter<void>();
+  @Output() focusLost = new EventEmitter<void>();
+  @Output() validationFailed = new EventEmitter<string>();
+  @Output() dropdownOpened = new EventEmitter<void>();
+  @Output() dropdownClosed = new EventEmitter<void>();
+
+  // --------- Methods for cell editor lifecycle ---------
+  save() {
+    this.valueChanged.emit(this.currentValue);
+    this.editingDone.emit();
+  }
+
+  cancel() {
+    this.editingCancelled.emit();
+  }
+
+  onBlur() {
+    this.focusLost.emit();
+    this.save();
+  }
+  // Optional: handle Enter / Escape
+  @HostListener('keydown.enter')
+  onEnter() {
+    // if (this.validate()) this.save();
+  }
+
+  @HostListener('keydown.esc')
+  onEsc() {
+    this.cancel();
+  }
+
+  // Dropdown open/close events
+  openDropdown() {
+    this.dropdownOpened.emit();
+  }
+
+  closeDropdown() {
+    this.dropdownClosed.emit();
+  }
+
+}

package/src/app/sub-category-cell-component/sub-category-cell-component.component.css

@@ -0,0 +1,6 @@
+.sub-category-cell {
+  display: flex;
+  align-items: center;
+  font-weight: bold; /* 👈 makes category text bold */
+  color: #222; /* optional styling */
+}

package/src/app/sub-category-cell-component/sub-category-cell-component.component.html

@@ -0,0 +1,3 @@
+<div class="sub-category-cell" style="font-size:20px" [class.text-info]="value == 'Computer Desks'" [class.text-success]="value == 'I Phone 15'" [class.text-danger]="value == 'Samsung A16'">
+  <strong>Open | {{ value || '-' }}</strong>
+</div>

package/src/app/sub-category-cell-component/sub-category-cell-component.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { SubCategoryCellComponentComponent } from './sub-category-cell-component.component';
+
+describe('SubCategoryCellComponentComponent', () => {
+  let component: SubCategoryCellComponentComponent;
+  let fixture: ComponentFixture<SubCategoryCellComponentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SubCategoryCellComponentComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SubCategoryCellComponentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/sub-category-cell-component/sub-category-cell-component.component.ts

@@ -0,0 +1,26 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-sub-category-cell',
+  templateUrl: './sub-category-cell-component.component.html',
+  styleUrls: ['./sub-category-cell-component.component.css']
+})
+export class SubCategoryCellComponentComponent  {
+ value: any;
+ row: any = {};
+ col: any = {};
+
+  constructor() {}
+
+
+
+  gridInit(params: any): void {
+    this.value = params.value;
+    this.row = params.row;
+    this.col = params.col;
+  }
+
+   getNestedValue(obj: any, field: string): any {
+    return field?.split('.').reduce((acc, part) => acc && acc[part], obj);
+  }
+}