Y-CODE

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

@Component({
selector: 'app-inbox',
template: `

<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()));
}
}