Josep Piguillem
4acf629106
The owner archives a finished project (archiveProject, POST
/projects/{project}/archive) and brings it back (unarchive). While
archived it stays readable, managers still read its rules and webhooks,
but no command changes it: contributing and managing checks refuse with
422, votes and public proposals too, and automations do not run. The web
shows a read-only notice on every page of it (with «Desarchivar» for the
owner), hides what edits, marks it on the home page and lists it last.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
277 lines
8.3 KiB
TypeScript
277 lines
8.3 KiB
TypeScript
import {
|
|
ChangeDetectionStrategy,
|
|
Component,
|
|
computed,
|
|
effect,
|
|
inject,
|
|
input,
|
|
} from '@angular/core';
|
|
import {
|
|
Router,
|
|
RouterLink,
|
|
RouterLinkActive,
|
|
RouterOutlet,
|
|
} from '@angular/router';
|
|
import { AuthFacade } from '@task-stream/web/identity/application';
|
|
import { PiNoteComponent, PiSpinnerComponent } from '@pi/ui';
|
|
import {
|
|
ProjectFacade,
|
|
provideProjectFacade,
|
|
} from '@task-stream/web/tracker/application';
|
|
import { AvatarsComponent } from '../ui/avatars';
|
|
import { projectTone, PUBLIC_TONE, ROLE } from '../ui/copy';
|
|
|
|
/** /p/:key — loads the project once for all its tabs (its store and facade are scoped here). */
|
|
@Component({
|
|
selector: 'ts-project-shell',
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
imports: [
|
|
RouterOutlet,
|
|
RouterLink,
|
|
RouterLinkActive,
|
|
AvatarsComponent,
|
|
PiSpinnerComponent,
|
|
PiNoteComponent,
|
|
],
|
|
providers: [provideProjectFacade()],
|
|
template: `
|
|
@if (facade.project(); as project) {
|
|
<header class="ts-project-header" [style.--tone]="tone(project.key)">
|
|
<div class="ts-project-header__main">
|
|
<p class="ts-eyebrow">
|
|
@if (auth.isAuthenticated()) {
|
|
<a class="ts-plain-link" routerLink="/">Proyectos</a> /
|
|
} @else {
|
|
<a class="ts-plain-link" routerLink="/explorar">Explorar</a> /
|
|
}
|
|
{{ project.key }}
|
|
@if (facade.myRole(); as role) {
|
|
· {{ roleLabel(role) }}
|
|
}
|
|
@if (project.isPublic) {
|
|
<span class="ts-pill" [style.--tone]="publicTone">Público</span>
|
|
}
|
|
</p>
|
|
<h1>
|
|
<span class="ts-project-header__key">{{ project.key }}</span>
|
|
{{ project.name }}
|
|
</h1>
|
|
@if (project.description) {
|
|
<p class="ts-project-header__description">
|
|
{{ project.description }}
|
|
</p>
|
|
}
|
|
@if (project.isPublic && project.acceptsProposals) {
|
|
<a class="ts-project-header__propose" routerLink="proponer">
|
|
¿Has visto un error o tienes una idea? Cuéntanoslo →
|
|
</a>
|
|
}
|
|
</div>
|
|
<div class="ts-project-header__team">
|
|
<ts-avatars [names]="memberNames()" [max]="6" />
|
|
<a class="ts-project-header__people ts-mono" routerLink="members"
|
|
>{{ project.members.length }} en el equipo</a
|
|
>
|
|
</div>
|
|
</header>
|
|
@if (!facade.myRole()) {
|
|
<p class="ts-readonly" role="note">
|
|
Proyecto público: lo estás viendo en modo lectura.
|
|
@if (!auth.isAuthenticated()) {
|
|
<a
|
|
class="ts-plain-link"
|
|
routerLink="/login"
|
|
[queryParams]="{ returnUrl: url() }"
|
|
>Inicia sesión</a
|
|
>
|
|
si eres del equipo.
|
|
}
|
|
</p>
|
|
}
|
|
<nav class="ts-tabs" aria-label="Secciones del proyecto">
|
|
<a routerLink="board" routerLinkActive="is-active">Tablero</a>
|
|
<a routerLink="list" routerLinkActive="is-active">Lista</a>
|
|
<a routerLink="backlog" routerLinkActive="is-active">Backlog</a>
|
|
<a routerLink="sprints" routerLinkActive="is-active">Sprints</a>
|
|
<a routerLink="calendar" routerLinkActive="is-active">Calendario</a>
|
|
<a routerLink="epics" routerLinkActive="is-active">Épicas</a>
|
|
<a routerLink="roadmap" routerLinkActive="is-active">Hoja de ruta</a>
|
|
<a routerLink="releases" routerLinkActive="is-active">Releases</a>
|
|
<a routerLink="dashboard" routerLinkActive="is-active">Seguimiento</a>
|
|
<a routerLink="analytics" routerLinkActive="is-active">Estadísticas</a>
|
|
<a routerLink="activity" routerLinkActive="is-active">Actividad</a>
|
|
<a routerLink="members" routerLinkActive="is-active">Miembros</a>
|
|
@if (facade.canManage() || facade.isOwner()) {
|
|
<a routerLink="settings" routerLinkActive="is-active"
|
|
>Configuración</a
|
|
>
|
|
}
|
|
</nav>
|
|
@if (project.archivedAt) {
|
|
<p class="ts-archived" role="status">
|
|
<strong>Proyecto archivado</strong>
|
|
Se puede ver todo, pero es de solo lectura.
|
|
@if (facade.isOwner()) {
|
|
<button
|
|
type="button"
|
|
class="ts-plain-link"
|
|
(click)="facade.setArchived(false)"
|
|
>
|
|
Desarchivar
|
|
</button>
|
|
}
|
|
</p>
|
|
}
|
|
<router-outlet />
|
|
} @else if (facade.error(); as error) {
|
|
<pi-note
|
|
gap="xs"
|
|
status="error"
|
|
appearance="fill"
|
|
type="status"
|
|
title="No se pudo abrir el proyecto"
|
|
[text]="
|
|
auth.isAuthenticated()
|
|
? error
|
|
: 'No existe o no es público. Si es de tu equipo, inicia sesión.'
|
|
"
|
|
/>
|
|
@if (!auth.isAuthenticated()) {
|
|
<p class="ts-center-actions">
|
|
<a
|
|
class="ts-plain-link"
|
|
routerLink="/login"
|
|
[queryParams]="{ returnUrl: url() }"
|
|
>Iniciar sesión</a
|
|
>
|
|
·
|
|
<a class="ts-plain-link" routerLink="/explorar"
|
|
>Ver proyectos públicos</a
|
|
>
|
|
</p>
|
|
}
|
|
} @else {
|
|
<div class="ts-center">
|
|
<pi-spinner [isLoading]="true" [diameter]="40" />
|
|
</div>
|
|
}
|
|
`,
|
|
styles: `
|
|
.ts-archived {
|
|
display: flex;
|
|
align-items: baseline;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin: 0 0 1rem;
|
|
padding: 0.625rem 0.875rem;
|
|
border: 1px solid var(--ts-line);
|
|
border-radius: 0.625rem;
|
|
background: var(--ts-sunken);
|
|
color: var(--ts-ink-soft);
|
|
font-size: 0.875rem;
|
|
}
|
|
.ts-eyebrow .ts-pill {
|
|
margin-left: 0.5rem;
|
|
letter-spacing: 0;
|
|
text-transform: none;
|
|
vertical-align: middle;
|
|
}
|
|
.ts-readonly {
|
|
margin: 1rem 0 0;
|
|
padding: 0.625rem 0.875rem;
|
|
border-radius: 0.625rem;
|
|
background: color-mix(in srgb, var(--ts-c-teal) 8%, var(--ts-surface));
|
|
border: 1px solid color-mix(in srgb, var(--ts-c-teal) 25%, transparent);
|
|
font-size: 0.875rem;
|
|
color: var(--ts-ink-soft);
|
|
a {
|
|
font-weight: 600;
|
|
color: var(--ts-brand);
|
|
}
|
|
}
|
|
.ts-center-actions {
|
|
margin: 1rem 0 0;
|
|
font-size: 0.875rem;
|
|
a {
|
|
font-weight: 600;
|
|
color: var(--ts-brand);
|
|
}
|
|
}
|
|
.ts-project-header {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 1.5rem;
|
|
flex-wrap: wrap;
|
|
h1 {
|
|
display: flex;
|
|
align-items: baseline;
|
|
flex-wrap: wrap;
|
|
gap: 0.25rem 0.875rem;
|
|
margin: 0.5rem 0 0;
|
|
font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
|
|
font-weight: 700;
|
|
line-height: 1.05;
|
|
}
|
|
}
|
|
.ts-project-header__main {
|
|
min-width: 0;
|
|
}
|
|
.ts-project-header__key {
|
|
font-family: var(--ts-font-mono);
|
|
font-size: 0.55em;
|
|
font-weight: 600;
|
|
letter-spacing: -0.03em;
|
|
color: var(--tone);
|
|
}
|
|
.ts-project-header__description {
|
|
max-width: 48rem;
|
|
margin: 0.5rem 0 0;
|
|
color: var(--ts-muted);
|
|
}
|
|
.ts-project-header__propose {
|
|
display: inline-block;
|
|
margin-top: 0.625rem;
|
|
color: var(--ts-brand);
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
.ts-project-header__team {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
.ts-project-header__people {
|
|
font-size: 0.75rem;
|
|
color: var(--ts-muted);
|
|
text-decoration: none;
|
|
&:hover {
|
|
color: var(--ts-ink);
|
|
}
|
|
}
|
|
`,
|
|
})
|
|
export class ProjectShellPage {
|
|
/** Route param (`withComponentInputBinding`). */
|
|
readonly key = input.required<string>();
|
|
|
|
protected readonly facade = inject(ProjectFacade);
|
|
protected readonly auth = inject(AuthFacade);
|
|
private readonly router = inject(Router);
|
|
protected readonly publicTone = PUBLIC_TONE;
|
|
/** Where to come back after signing in. */
|
|
protected readonly url = () => this.router.url;
|
|
protected readonly roleLabel = (role: keyof typeof ROLE) => ROLE[role];
|
|
protected readonly tone = projectTone;
|
|
protected readonly memberNames = computed(() =>
|
|
this.facade.members().map((m) => m.user.name),
|
|
);
|
|
|
|
constructor() {
|
|
effect(() => this.facade.open(this.key()));
|
|
}
|
|
}
|