first commit
This commit is contained in:
258
libs/web/tracker/presenters/src/lib/pages/projects.page.ts
Normal file
258
libs/web/tracker/presenters/src/lib/pages/projects.page.ts
Normal file
@@ -0,0 +1,258 @@
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
inject,
|
||||
OnInit,
|
||||
signal,
|
||||
TemplateRef,
|
||||
viewChild,
|
||||
} from '@angular/core';
|
||||
import {
|
||||
form,
|
||||
FormField,
|
||||
maxLength,
|
||||
pattern,
|
||||
required,
|
||||
} from '@angular/forms/signals';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import {
|
||||
PiActionButtonComponent,
|
||||
PiEmptyStateComponent,
|
||||
PiLabelDirective,
|
||||
PiSkeletonComponent,
|
||||
PiTextareaComponent,
|
||||
PiTextFieldComponent,
|
||||
} from '@pi/ui';
|
||||
import { DrawerService } from '@task-stream/web/shared/ui';
|
||||
import { ProjectsFacade } from '@task-stream/web/tracker/application';
|
||||
import { AvatarsComponent } from '../ui/avatars';
|
||||
import { projectTone, timeAgo } from '../ui/copy';
|
||||
|
||||
@Component({
|
||||
selector: 'ts-projects-page',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [
|
||||
RouterLink,
|
||||
FormField,
|
||||
AvatarsComponent,
|
||||
PiActionButtonComponent,
|
||||
PiEmptyStateComponent,
|
||||
PiSkeletonComponent,
|
||||
PiTextFieldComponent,
|
||||
PiTextareaComponent,
|
||||
PiLabelDirective,
|
||||
],
|
||||
template: `
|
||||
<header class="ts-page-header">
|
||||
<div>
|
||||
<p class="ts-eyebrow">
|
||||
Tus proyectos ·
|
||||
<span class="ts-mono">{{ pad(facade.projects().length) }}</span>
|
||||
</p>
|
||||
<h1>Proyectos</h1>
|
||||
<p>Los proyectos de los que formas parte, al día en tiempo real.</p>
|
||||
</div>
|
||||
<pi-action-button
|
||||
color="primary"
|
||||
text="Nuevo proyecto"
|
||||
(execute)="openCreate()"
|
||||
/>
|
||||
</header>
|
||||
|
||||
@if (facade.loading() && !facade.projects().length) {
|
||||
<div class="ts-projects">
|
||||
@for (i of [1, 2, 3]; track i) {
|
||||
<pi-skeleton shape="block" height="12rem" />
|
||||
}
|
||||
</div>
|
||||
} @else if (!facade.projects().length) {
|
||||
<pi-empty-state
|
||||
icon="kanban"
|
||||
title="Aún no tienes proyectos"
|
||||
description="Crea uno o pide que te añadan a un proyecto existente."
|
||||
>
|
||||
<pi-action-button
|
||||
color="primary"
|
||||
text="Crear el primero"
|
||||
(execute)="openCreate()"
|
||||
/>
|
||||
</pi-empty-state>
|
||||
} @else {
|
||||
<div class="ts-projects">
|
||||
@for (project of facade.sorted(); track project.id) {
|
||||
<a
|
||||
class="ts-project ts-card-link"
|
||||
[routerLink]="['/p', project.key]"
|
||||
[style.--tone]="tone(project.key)"
|
||||
>
|
||||
<div class="ts-project__top">
|
||||
<span class="ts-project__key">{{ project.key }}</span>
|
||||
<span class="ts-project__updated ts-mono">{{
|
||||
ago(project.updatedAt)
|
||||
}}</span>
|
||||
</div>
|
||||
<h2 class="ts-project__name">{{ project.name }}</h2>
|
||||
@if (project.description) {
|
||||
<p class="ts-project__description">{{ project.description }}</p>
|
||||
}
|
||||
<div class="ts-project__bottom">
|
||||
<ts-avatars [names]="memberNames(project.members)" />
|
||||
<span class="ts-project__count ts-mono"
|
||||
>{{ project.members.length }}
|
||||
{{
|
||||
project.members.length === 1 ? 'persona' : 'personas'
|
||||
}}</span
|
||||
>
|
||||
<span class="ts-project__go" aria-hidden="true">→</span>
|
||||
</div>
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<ng-template #createForm>
|
||||
<form
|
||||
class="ts-form"
|
||||
(submit)="$event.preventDefault(); create()"
|
||||
novalidate
|
||||
>
|
||||
<pi-text-field [formField]="f.key" placeholder="TS">
|
||||
<pi-label [isRequired]="true"
|
||||
>Clave (prefijo de los tickets)</pi-label
|
||||
>
|
||||
</pi-text-field>
|
||||
<pi-text-field [formField]="f.name" placeholder="Checkout revamp">
|
||||
<pi-label [isRequired]="true">Nombre</pi-label>
|
||||
</pi-text-field>
|
||||
<pi-textarea
|
||||
[formField]="f.description"
|
||||
placeholder="¿De qué va el proyecto?"
|
||||
>
|
||||
<pi-label>Descripción</pi-label>
|
||||
</pi-textarea>
|
||||
<pi-action-button
|
||||
size="w100"
|
||||
color="primary"
|
||||
[text]="facade.creating() ? 'Creando…' : 'Crear proyecto'"
|
||||
[disabled]="f().invalid() || facade.creating()"
|
||||
(execute)="create()"
|
||||
/>
|
||||
</form>
|
||||
</ng-template>
|
||||
`,
|
||||
styles: `
|
||||
.ts-projects {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
|
||||
gap: 1.25rem;
|
||||
}
|
||||
.ts-project {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 1fr auto;
|
||||
gap: 0.375rem;
|
||||
min-height: 12rem;
|
||||
padding: 1.5rem 1.5rem 1.25rem;
|
||||
&:hover .ts-project__go {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
.ts-project__top {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
.ts-project__key {
|
||||
font-family: var(--ts-font-mono);
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.04em;
|
||||
color: var(--tone);
|
||||
}
|
||||
.ts-project__updated {
|
||||
font-size: 0.75rem;
|
||||
color: var(--ts-muted);
|
||||
}
|
||||
.ts-project__name {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.15;
|
||||
}
|
||||
.ts-project__description {
|
||||
margin: 0;
|
||||
color: var(--ts-muted);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.45;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ts-project__bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
margin-top: 0.75rem;
|
||||
padding-top: 0.875rem;
|
||||
border-top: 1px dashed var(--ts-line);
|
||||
}
|
||||
.ts-project__count {
|
||||
font-size: 0.75rem;
|
||||
color: var(--ts-muted);
|
||||
}
|
||||
.ts-project__go {
|
||||
margin-left: auto;
|
||||
font-size: 1.125rem;
|
||||
color: var(--tone);
|
||||
opacity: 0;
|
||||
transform: translateX(-4px);
|
||||
transition:
|
||||
opacity 0.18s ease,
|
||||
transform 0.18s ease;
|
||||
}
|
||||
`,
|
||||
})
|
||||
export class ProjectsPage implements OnInit {
|
||||
protected readonly facade = inject(ProjectsFacade);
|
||||
private readonly drawer = inject(DrawerService);
|
||||
private readonly createForm =
|
||||
viewChild.required<TemplateRef<unknown>>('createForm');
|
||||
|
||||
private readonly model = signal({ key: '', name: '', description: '' });
|
||||
protected readonly f = form(this.model, (p) => {
|
||||
required(p.key);
|
||||
pattern(p.key, /^[A-Za-z][A-Za-z0-9]{1,9}$/, {
|
||||
message: '2-10 letras/números, empezando por letra',
|
||||
});
|
||||
required(p.name);
|
||||
maxLength(p.name, 120);
|
||||
});
|
||||
|
||||
protected readonly ago = timeAgo;
|
||||
protected readonly tone = projectTone;
|
||||
protected readonly pad = (n: number) => String(n).padStart(2, '0');
|
||||
protected readonly memberNames = (members: { user: { name: string } }[]) =>
|
||||
members.map((m) => m.user.name);
|
||||
|
||||
ngOnInit(): void {
|
||||
this.facade.load();
|
||||
}
|
||||
|
||||
protected openCreate(): void {
|
||||
this.model.set({ key: '', name: '', description: '' });
|
||||
this.drawer.open('Nuevo proyecto', this.createForm());
|
||||
}
|
||||
|
||||
protected create(): void {
|
||||
if (this.f().invalid()) return;
|
||||
const { key, name, description } = this.model();
|
||||
this.facade.create({
|
||||
key: key.toUpperCase(),
|
||||
name,
|
||||
description: description || null,
|
||||
});
|
||||
this.drawer.closeAll();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user