Skip to content

Commit c0a086c

Browse files
Diogo-FerrazDiogo-Ferraz
committed
feat: add user tasks views skeletons
1 parent 6ab436e commit c0a086c

15 files changed

Lines changed: 1135 additions & 152 deletions

‎src/app/app.routes.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,14 @@ import { HomeLoginComponent } from './features/login/components/home-login/home-
33
import { ProjectListComponent } from './features/projects/components/project-list/project-list.component';
44
import { DashboardComponent } from './features/dashboard/components/dashboard/dashboard.component';
55
import { ProjectKanbanComponent } from './features/projects/components/project-kanban/project-kanban.component';
6+
import { TaskItemListComponent } from './features/task-item/components/task-item-list/task-item-list.component';
7+
import { UserTaskItemsComponent } from './features/task-item/components/user-task-items/user-task-items.component';
68

79
export const routes: Routes = [
810
{ path: '', component: DashboardComponent },
911
{ path: 'projects', component: ProjectListComponent },
1012
{ path: 'projects/kanban', component: ProjectKanbanComponent },
13+
{ path: 'tasks', component: TaskItemListComponent },
14+
{ path: 'tasks/my-tasks', component: UserTaskItemsComponent },
1115
{ path: 'login', component: HomeLoginComponent },
1216
];

‎src/app/features/projects/components/project-kanban/project-kanban.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,8 @@ export class ProjectKanbanComponent {
106106
name: 'New Task',
107107
description: 'Add description here',
108108
status: status,
109-
createdOn: new Date()
109+
createdOn: new Date(),
110+
assignee: 'John Doe'
110111
};
111112

112113
this.todos.push(newTask);

‎src/app/features/projects/components/project-list/project-list.component.html‎

Lines changed: 151 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -1,140 +1,151 @@
1-
<div class="grid">
2-
<div class="col-12">
3-
<p-card>
4-
<div class="card">
5-
<p-table #dt1 [value]="projects" dataKey="id" [rows]="10" [rowsPerPageOptions]="[10, 25, 50]"
6-
[loading]="loading" [paginator]="true" styleClass="p-datatable-gridlines"
7-
[globalFilterFields]="['name', 'country.name', 'representative.name', 'status']">
8-
<ng-template pTemplate="caption">
9-
<div class="flex">
10-
<p-button label="Clear" [outlined]="true" icon="pi pi-filter-slash" (onClick)="clear(dt1)" />
11-
<span class="p-input-icon-left ml-auto">
12-
<i class="pi pi-search"></i>
13-
<input pInputText type="text" [(ngModel)]="searchValue" (input)="onGlobalFilter(dt1, $event)"
14-
placeholder="Search keyword" />
15-
</span>
16-
</div>
17-
</ng-template>
18-
<ng-template pTemplate="header">
19-
<tr>
20-
<th style="min-width:15rem">
21-
<div class="flex align-items-center">
22-
Name
23-
<p-columnFilter type="text" field="name" display="menu" />
24-
</div>
25-
</th>
26-
<th style="min-width:15rem">
27-
<div class="flex align-items-center">
28-
Owner
29-
<p-columnFilter field="representative" matchMode="in" display="menu" [showMatchModes]="false"
30-
[showOperator]="false" [showAddButton]="false">
31-
<ng-template pTemplate="header">
32-
<div class="px-3 pt-3 pb-0">
33-
<span class="font-bold">Owner Picker</span>
34-
</div>
35-
</ng-template>
36-
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
37-
<p-multiSelect [ngModel]="value" [options]="representatives" placeholder="Any"
38-
(onChange)="filter($event.value)" optionLabel="name">
39-
<ng-template let-option pTemplate="item">
40-
<div class="inline-block vertical-align-middle">
41-
<img [alt]="option.label"
42-
src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ option.image }}" width="24"
43-
class="vertical-align-middle" />
44-
<span class="ml-1 mt-1">{{ option.name }}</span>
45-
</div>
46-
</ng-template>
47-
</p-multiSelect>
48-
</ng-template>
49-
</p-columnFilter>
50-
</div>
51-
</th>
52-
<th style="min-width:10rem">
53-
<div class="flex align-items-center">
54-
Created At
55-
<p-columnFilter type="date" field="createdate" display="menu" />
56-
</div>
57-
</th>
58-
<th style="min-width:10rem">
59-
<div class="flex align-items-center">
60-
Last Modified At
61-
<p-columnFilter type="date" field="modifydate" display="menu" />
62-
</div>
63-
</th>
64-
<th style="min-width:10rem">
65-
<div class="flex align-items-center">
66-
Status
67-
<p-columnFilter field="status" matchMode="equals" display="menu">
68-
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
69-
<p-dropdown [ngModel]="value" [options]="statuses" (onChange)="filter($event.value)"
70-
placeholder="Any">
71-
<ng-template let-option pTemplate="item">
72-
<p-tag [value]="option.value" [severity]="getSeverity(option.label)" />
73-
</ng-template>
74-
</p-dropdown>
75-
</ng-template>
76-
</p-columnFilter>
77-
</div>
78-
</th>
79-
<th style="min-width:10rem">
80-
<div class="flex align-items-center">
81-
Activity
82-
<p-columnFilter field="activity" matchMode="between" display="menu" [showMatchModes]="false"
83-
[showOperator]="false" [showAddButton]="false">
84-
<ng-template pTemplate="filter" let-filter="filterCallback">
85-
<p-slider [(ngModel)]="activityValues" [range]="true" (onSlideEnd)="filter($event.values)"
86-
styleClass="m-3" />
87-
<div class="flex align-items-center px-2">
88-
<span>{{ activityValues[0] }}</span>
89-
<span>{{ activityValues[1] }}</span>
90-
</div>
91-
</ng-template>
92-
</p-columnFilter>
93-
</div>
94-
</th>
95-
<th style="width: 3rem">
96-
<div class="flex align-items-center">
97-
Verified
98-
<p-columnFilter type="boolean" field="verified" display="menu" />
99-
</div>
100-
</th>
101-
</tr>
102-
</ng-template>
103-
<ng-template pTemplate="body" let-project>
104-
<tr>
105-
<td>
106-
{{ project.name }}
107-
</td>
108-
<td>
109-
<img [alt]="project.createdBy" src="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png"
110-
width="32" style="vertical-align: middle" />
111-
<span class="ml-1 vertical-align-middle">{{ project.createdBy }}</span>
112-
</td>
113-
<td>
114-
{{ project.createdAt | date: 'MM/dd/yyyy' }}
115-
</td>
116-
<td>
117-
{{ project.lastModifiedAt | date: 'MM/dd/yyyy' }}
118-
</td>
119-
<td>
120-
<p-tag [value]="'new'" [severity]="getSeverity('new')" />
121-
</td>
122-
<td>
123-
<p-progressBar [value]="30" [showValue]="false" />
124-
</td>
125-
<td class="text-center">
126-
<i class="pi"
127-
[ngClass]="{ 'text-green-500 pi-check-circle': true, 'text-red-500 pi-times-circle': false }"></i>
128-
</td>
129-
</tr>
130-
</ng-template>
131-
<ng-template pTemplate="emptymessage">
132-
<tr>
133-
<td colspan="7">No projects found.</td>
134-
</tr>
135-
</ng-template>
136-
</p-table>
137-
</div>
138-
</p-card>
139-
</div>
140-
</div>
1+
<p-toolbar styleClass="mb-4">
2+
<ng-template pTemplate="start">
3+
<p-button label="New" icon="pi pi-plus" severity="secondary" class="mr-2" />
4+
<p-button severity="secondary" label="Delete" icon="pi pi-trash" outlined />
5+
</ng-template>
6+
7+
<ng-template pTemplate="end">
8+
<p-button label="Export" icon="pi pi-upload" severity="secondary" (onClick)="exportCSV(dt1)" />
9+
</ng-template>
10+
</p-toolbar>
11+
<p-table #dt1 [value]="projects" dataKey="id" [rows]="10" [rowsPerPageOptions]="[10, 25, 50]" [loading]="loading"
12+
[paginator]="true" [(selection)]="selectedProducts"
13+
[globalFilterFields]="['name', 'country.name', 'representative.name', 'status']">
14+
<ng-template pTemplate="caption">
15+
<div class="flex">
16+
<p-button label="Clear" [outlined]="true" icon="pi pi-filter-slash" (onClick)="clear(dt1)" />
17+
<span class="p-input-icon-left ml-auto">
18+
<i class="pi pi-search"></i>
19+
<input pInputText type="text" [(ngModel)]="searchValue" (input)="onGlobalFilter(dt1, $event)"
20+
placeholder="Search..." />
21+
</span>
22+
</div>
23+
</ng-template>
24+
<ng-template pTemplate="header">
25+
<tr>
26+
<th style="width: 3rem">
27+
<p-tableHeaderCheckbox />
28+
</th>
29+
<th style="min-width:15rem">
30+
<div class="flex align-items-center">
31+
Name
32+
<p-columnFilter type="text" field="name" display="menu" />
33+
</div>
34+
</th>
35+
<th style="min-width:15rem">
36+
<div class="flex align-items-center">
37+
Owner
38+
<p-columnFilter field="representative" matchMode="in" display="menu" [showMatchModes]="false"
39+
[showOperator]="false" [showAddButton]="false">
40+
<ng-template pTemplate="header">
41+
<div class="px-3 pt-3 pb-0">
42+
<span class="font-bold">Owner Picker</span>
43+
</div>
44+
</ng-template>
45+
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
46+
<p-multiSelect [ngModel]="value" [options]="representatives" placeholder="Any"
47+
(onChange)="filter($event.value)" optionLabel="name">
48+
<ng-template let-option pTemplate="item">
49+
<div class="inline-block vertical-align-middle">
50+
<img [alt]="option.label"
51+
src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ option.image }}" width="24"
52+
class="vertical-align-middle" />
53+
<span class="ml-1 mt-1">{{ option.name }}</span>
54+
</div>
55+
</ng-template>
56+
</p-multiSelect>
57+
</ng-template>
58+
</p-columnFilter>
59+
</div>
60+
</th>
61+
<th style="min-width:10rem">
62+
<div class="flex align-items-center">
63+
Created At
64+
<p-columnFilter type="date" field="createdate" display="menu" />
65+
</div>
66+
</th>
67+
<th style="min-width:10rem">
68+
<div class="flex align-items-center">
69+
Last Modified At
70+
<p-columnFilter type="date" field="modifydate" display="menu" />
71+
</div>
72+
</th>
73+
<th style="min-width:10rem">
74+
<div class="flex align-items-center">
75+
Status
76+
<p-columnFilter field="status" matchMode="equals" display="menu">
77+
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
78+
<p-dropdown [ngModel]="value" [options]="statuses" (onChange)="filter($event.value)" placeholder="Any">
79+
<ng-template let-option pTemplate="item">
80+
<p-tag [value]="option.value" [severity]="getSeverity(option.label)" />
81+
</ng-template>
82+
</p-dropdown>
83+
</ng-template>
84+
</p-columnFilter>
85+
</div>
86+
</th>
87+
<th style="min-width:10rem">
88+
<div class="flex align-items-center">
89+
Activity
90+
<p-columnFilter field="activity" matchMode="between" display="menu" [showMatchModes]="false"
91+
[showOperator]="false" [showAddButton]="false">
92+
<ng-template pTemplate="filter" let-filter="filterCallback">
93+
<p-slider [(ngModel)]="activityValues" [range]="true" (onSlideEnd)="filter($event.values)"
94+
styleClass="m-3" />
95+
<div class="flex align-items-center px-2">
96+
<span>{{ activityValues[0] }}</span>
97+
<span>{{ activityValues[1] }}</span>
98+
</div>
99+
</ng-template>
100+
</p-columnFilter>
101+
</div>
102+
</th>
103+
<th style="width: 3rem">
104+
<div class="flex align-items-center">
105+
Verified
106+
<p-columnFilter type="boolean" field="verified" display="menu" />
107+
</div>
108+
</th>
109+
<th style="min-width: 12rem"></th>
110+
</tr>
111+
</ng-template>
112+
<ng-template pTemplate="body" let-project>
113+
<tr>
114+
<td style="width: 3rem">
115+
<p-tableCheckbox [value]="project" />
116+
</td>
117+
<td>
118+
{{ project.name }}
119+
</td>
120+
<td>
121+
<img [alt]="project.createdBy" src="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png"
122+
width="32" style="vertical-align: middle" />
123+
<span class="ml-1 vertical-align-middle">{{ project.createdBy }}</span>
124+
</td>
125+
<td>
126+
{{ project.createdAt | date: 'MM/dd/yyyy' }}
127+
</td>
128+
<td>
129+
{{ project.lastModifiedAt | date: 'MM/dd/yyyy' }}
130+
</td>
131+
<td>
132+
<p-tag [value]="'new'" [severity]="getSeverity('new')" />
133+
</td>
134+
<td>
135+
<p-progressBar [value]="30" [showValue]="false" />
136+
</td>
137+
<td class="text-center">
138+
<i class="pi" [ngClass]="{ 'text-green-500 pi-check-circle': true, 'text-red-500 pi-times-circle': false }"></i>
139+
</td>
140+
<td>
141+
<p-button icon="pi pi-pencil" class="mr-2" [rounded]="true" [outlined]="true" />
142+
<p-button icon="pi pi-trash" severity="danger" [rounded]="true" [outlined]="true" />
143+
</td>
144+
</tr>
145+
</ng-template>
146+
<ng-template pTemplate="emptymessage">
147+
<tr>
148+
<td colspan="7">No projects found.</td>
149+
</tr>
150+
</ng-template>
151+
</p-table>

‎src/app/features/projects/components/project-list/project-list.component.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ export class ProjectListComponent implements OnInit {
2424

2525
searchValue: string | undefined;
2626

27+
selectedProducts!: any[] | null;
28+
2729
constructor(private projectService: ProjectService) { }
2830

2931
ngOnInit() {
@@ -100,4 +102,8 @@ export class ProjectListComponent implements OnInit {
100102
onGlobalFilter(table: Table, event: Event) {
101103
table.filterGlobal((event.target as HTMLInputElement).value, 'contains');
102104
}
105+
106+
exportCSV(table: Table) {
107+
table.exportCSV();
108+
}
103109
}

0 commit comments

Comments
 (0)