Y-CODE
Published: 2023-10-11 19:36:29

import { Component } from '@angular/core';

@Component({
  selector: 'app-inbox',
  template: `
    <mat-toolbar color="primary">
      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
    </mat-toolbar>

    <mat-form-field>
      <input matInput placeholder="Search" [(ngModel)]="searchText" (ngModelChange)="applyFilter()">
    </mat-form-field>

    <mat-form-field>
      <mat-select placeholder="Filter" [(ngModel)]="selectedFilters" multiple>
        <mat-option *ngFor="let filter of filters" [value]="filter">{{ filter }}</mat-option>
      </mat-select>
    </mat-form-field>

    <mat-list>
      <ng-container *ngFor="let group of groupedItems">
        <mat-divider></mat-divider>
        <mat-list-item class="group-item">{{ group.applicationName }}</mat-list-item>
        <mat-divider></mat-divider>
        <mat-list-item *ngFor="let item of group.items | filter:selectedFilters:filterPredicate | filter:searchText" (click)="onItemClick(item)" (dblclick)="onItemDoubleClick(item)" [ngClass]="{ 'clicked-item': item === clickedItem }">
          <div mat-list-avatar></div>
          <div mat-line>{{ item.projectNumber }} - {{ item.taskName }}</div>
          <div mat-line>{{ item.date | date }}</div>
          <mat-icon *ngIf="item.applicationType === 'LUPTS'">map</mat-icon>
          <mat-icon *ngIf="item.applicationType === 'Well'">local_drink</mat-icon>
          <button mat-icon-button (click)="onItemArrowClick($event)">
            <mat-icon>keyboard_arrow_right</mat-icon>
          </button>
        </mat-list-item>
        <mat-expansion-panel *ngIf="group.showPanel">
          <mat-expansion-panel-header>
            <mat-panel-title>
              {{ group.applicationName }} Details
            </mat-panel-title>
          </mat-expansion-panel-header>
          <mat-list>
            <mat-list-item>
              <div mat-line>Project Number: {{ group.projectNumber }}</div>
              <div mat-line>Task Name: {{ group.taskName }}</div>
              <div mat-line>Date: {{ group.date | date }}</div>
              <mat-icon *ngIf="group.applicationType === 'LUPTS'">map</mat-icon>
              <mat-icon *ngIf="group.applicationType === 'Well'">local_drink</mat-icon>
              <button mat-button color="primary" (click)="deleteItem(group, item)">Completed</button>
            </mat-list-item>
          </mat-list>
        </mat-expansion-panel>
      </ng-container>
    </mat-list>
  `,
  styles: [`
    mat-list-item {
      cursor: pointer;
    }

    .group-item {
      font-weight: bold;
    }

    .clicked-item {
      font-size: 0.9em;
    }
  `]
})
export class InboxComponent {
  filters = ['All', 'Unread', 'Starred', 'Important'];
  selectedFilters = ['All'];
  searchText = '';
  items = [
    { applicationName: 'App 1', projectNumber: 'Project 1', taskName: 'Task 1', date: new Date('2021-01-01'), applicationType: 'LUPTS' },
    { applicationName: 'App 2', projectNumber: 'Project 2', taskName: 'Task 2', date: new Date('2021-01-02'), applicationType: 'Well' },
    { applicationName: 'App 3', projectNumber: 'Project 3', taskName: 'Task 3', date: new Date('2021-01-03'), applicationType: 'LUPTS' },
    { applicationName: 'App 1', projectNumber: 'Project 4', taskName: 'Task 4', date: new Date('2021-01-04'), applicationType: 'Well' },
    { applicationName: 'App 2', projectNumber: 'Project 5', taskName: 'Task 5', date: new Date('2021-01-05'), applicationType: 'LUPTS' },
  ];
  clickedItem: any;

  filterPredicate(item: any, filters: string[]) {
    if (filters.includes('All')) {
      return true;
    }

    if (filters.includes('Unread') && item.unread) {
      return true;
    }

    if (filters.includes('Starred') && item.starred) {
      return true;
    }

    if (filters.includes('Important') && item.important) {
      return true;
    }

    if (filters.includes('Received Today') && item.date >= new Date(new Date().setHours(0, 0, 0, 0))) {
      return true;
    }

    return false;
  }

  get groupedItems() {
    const groups = {};

    for (const item of this.items) {
      if (!groups[item.applicationName]) {
        groups[item.applicationName] = {
          applicationName: item.applicationName,
          projectNumber: item.projectNumber,
          taskName: item.taskName,
          date: item.date,
          items: [],
          applicationType: item.applicationType,
          showPanel: false
        };
      }

      groups[item.applicationName].items.push(item);
    }

    return Object.values(groups);
  }

  onItemClick(item: any) {
    this.clickedItem = item;
  }

  onItemDoubleClick(item: any) {
    // Handle double click
  }

  onItemArrowClick(event: Event) {
    event.stopPropagation();
    const group = (event.target as HTMLElement).closest('.mat-list-item').__ngContext__[2];
    group.showPanel = !group.showPanel;
  }

  deleteItem(group: any, item: any) {
    const index = group.items.indexOf(item);
    if (index !== -1) {
      group.items.splice(index, 1);
    }
  }

  applyFilter() {
    this.items.filter(item => item.taskName.toLowerCase().includes(this.searchText.toLowerCase()));
  }
}