116 lines
2.7 KiB
TypeScript
116 lines
2.7 KiB
TypeScript
import { Component, computed, inject, resource, signal } from '@angular/core';
|
|
import { TaskItem } from './task-item';
|
|
import { Task } from './task';
|
|
import { TaskService } from './task-service';
|
|
import { RouterLink } from '@angular/router';
|
|
import { FormsModule } from '@angular/forms';
|
|
import { NgIcon, provideIcons } from '@ng-icons/core';
|
|
import { lucideCircleX, lucideSquarePlus } from '@ng-icons/lucide';
|
|
|
|
@Component({
|
|
selector: 'ksk-crm-home-page',
|
|
imports: [TaskItem, RouterLink, FormsModule, NgIcon],
|
|
providers: [provideIcons({ lucideSquarePlus, lucideCircleX })],
|
|
template: `
|
|
<section class="topBar">
|
|
<div class="input-wrapper">
|
|
<input [(ngModel)]="filterInput" type="text" placeholder="Поиск по задачам" />
|
|
<button (click)="filterInput.set('')">
|
|
<ng-icon name="lucideCircleX" size="20" strokeWidth="1.5" />
|
|
</button>
|
|
</div>
|
|
<a routerLink="/new">
|
|
<ng-icon name="lucideSquarePlus" size="36" />
|
|
</a>
|
|
</section>
|
|
<section class="result">
|
|
@for (task of filteredTasks(); track task.id) {
|
|
<ksk-crm-task-item [task]="task" />
|
|
@if (!$last) {
|
|
<hr />
|
|
}
|
|
} @empty {
|
|
<p>Список пуст</p>
|
|
}
|
|
</section>
|
|
`,
|
|
styles: `
|
|
.topBar {
|
|
display: flex;
|
|
|
|
.input-wrapper {
|
|
display: inline-flex;
|
|
flex-grow: 1;
|
|
position: relative;
|
|
|
|
input {
|
|
width: 100%;
|
|
margin: auto 0;
|
|
}
|
|
|
|
button {
|
|
border: none;
|
|
background: none;
|
|
position: absolute;
|
|
top: 55%;
|
|
right: 1em;
|
|
transform: translateY(-50%);
|
|
cursor: pointer;
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
input:placeholder-shown + button {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 0.5em;
|
|
}
|
|
}
|
|
|
|
.result {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
> p {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
hr {
|
|
border: 1px solid var(--color-primary);
|
|
opacity: 0.3;
|
|
}
|
|
`,
|
|
})
|
|
export class TaskList {
|
|
taskService: TaskService = inject(TaskService);
|
|
|
|
tasks = resource<Task[], null>({
|
|
loader: () => this.taskService.getAllTasks(),
|
|
});
|
|
|
|
filterInput = signal('');
|
|
|
|
filteredTasks = computed<Task[]>(() => {
|
|
const s = this.filterInput();
|
|
const tasks = this.tasks.value();
|
|
|
|
if (!tasks) return [];
|
|
if (s === '') return tasks;
|
|
|
|
return tasks.filter(
|
|
(task) =>
|
|
task.name.includes(s) ||
|
|
task.city.includes(s) ||
|
|
task.streetAddress.includes(s) ||
|
|
task.numberPhone.includes(s),
|
|
);
|
|
});
|
|
}
|