MT-work-fronted/src/app/modules/human-resource/human-list/human-list.component.ts

import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

export interface PeriodicElement {
  user: any;
  contract_type: string;
  salary: string;
  invoice_date: string;
  vacation_days: string;
  teams: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {
    user: {
      name: 'Mai Ghoneim',
      img: 'assets/images/avatar.png',
      email: 'ebrahimnour186@gmail.com',
      position: 'Senior UI/UX Designer',
    },
    contract_type: 'Full Time',
    salary: '2500$',
    invoice_date: '1 ST',
    vacation_days: '5',
    teams: 'Development',
  },
  {
    user: {
      name: 'Mai Ghoneim',
      img: 'assets/images/avatar.png',
      email: 'ebrahimnour186@gmail.com',
      position: 'Senior UI/UX Designer',
    },
    contract_type: 'Full Time',
    salary: '2500$',
    invoice_date: '1 ST',
    vacation_days: '1',
    teams: 'Development',
  },
  {
    user: {
      name: 'Mai Ghoneim',
      img: 'assets/images/avatar.png',
      email: 'ebrahimnour186@gmail.com',
      position: 'Senior UI/UX Designer',
    },
    contract_type: 'Part Time',
    salary: '2500$',
    invoice_date: '1 ST',
    vacation_days: '6',
    teams: 'Development',
  },
  {
    user: {
      name: 'Mai Ghoneim',
      img: 'assets/images/avatar.png',
      email: 'ebrahimnour186@gmail.com',
      position: 'Senior UI/UX Designer',
    },
    contract_type: 'Part Time',
    salary: '2500$',
    invoice_date: '1 ST',
    vacation_days: '10',
    teams: 'Development',
  },
];

@Component({
  selector: 'app-human-list',
  templateUrl: './human-list.component.html',
  styleUrls: ['./human-list.component.scss'],
})
export class HumanListComponent {
  displayedColumns: string[] = [
    'user',
    'contract_type',
    'salary',
    'invoice_date',
    'vacation_days',
  ];
  dataSource = ELEMENT_DATA;

  constructor(
    private readonly router: Router,
    private readonly route: ActivatedRoute
  ) {}

  onOpenDetails(): void {
    this.router.navigate(['./details'], { relativeTo: this.route });
  }
}