feat: per-project workflow settings, statistics and "my work" home
Per-project settings (owners/admins, «Configuración» tab):
- Statuses with category (TODO, IN_PROGRESS, QA, DONE, CANCELLED), colour and
"requires reason"; configurable transitions; ticket types (icon, colour) and
areas. Defaults are the previous fixed values; projects created before keep
them without migration.
- Values are archived, never deleted: tickets, history and statistics keep
referring to them. Validated in the domain (ProjectSettingsChangedEvent).
- Releases, board, tracking and "my work" use categories, so custom statuses
keep working. Status changes carry name/category metadata for history.
- GraphQL: status/type/area are strings (breaking for clients sending enum
literals); Project.settings, updateProjectSettings, statusCategory,
myIssues(categories). REST: PUT /projects/{project}/settings, category filters.
- Read model: statusCategory on issues (backfilled at startup).
Statistics («Estadísticas» tab):
- New issue_timeline projection; pure functions compute created vs resolved,
cumulative flow, cycle/lead time (avg + p85), throughput per person, QA
pass/fail and release burnup. GraphQL Project.analytics(days),
Release.burnup; REST /projects/{project}/analytics, /releases/{id}/burnup.
- Web: SVG charts with validated light/dark palette, crosshair tooltip,
keyboard navigation, legend and data table.
Home "Mi trabajo": my open tickets across projects grouped by category (QA
failures first), tickets waiting for QA, upcoming releases and "Ir a…".
Tests: domain/application specs, e2e scenario for settings and analytics,
facade tests. Docs, READMEs, schema.gql/openapi.json and Word/PDF updated.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
947
libs/web/tracker/presenters/src/lib/pages/settings.page.ts
Normal file
947
libs/web/tracker/presenters/src/lib/pages/settings.page.ts
Normal file
@@ -0,0 +1,947 @@
|
||||
import {
|
||||
CdkDrag,
|
||||
CdkDragDrop,
|
||||
CdkDragHandle,
|
||||
CdkDropList,
|
||||
moveItemInArray,
|
||||
} from '@angular/cdk/drag-drop';
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
computed,
|
||||
effect,
|
||||
inject,
|
||||
signal,
|
||||
untracked,
|
||||
} from '@angular/core';
|
||||
import { NgTemplateOutlet } from '@angular/common';
|
||||
import { PiIconComponent, PiNoteComponent } from '@pi/ui';
|
||||
import { ProjectFacade } from '@task-stream/web/tracker/application';
|
||||
import {
|
||||
ProjectSettings,
|
||||
SETTING_COLORS,
|
||||
StatusCategory,
|
||||
TYPE_ICONS,
|
||||
} from '@task-stream/web/tracker/domain';
|
||||
import { CATEGORY, COLOR_LABEL, ICON_LABEL, tone } from '../ui/copy';
|
||||
|
||||
type Section = 'statuses' | 'issueTypes' | 'areas';
|
||||
|
||||
const CATEGORIES = Object.values(StatusCategory);
|
||||
|
||||
/** "Datos y análisis" → "DATOS_Y_ANALISIS": ids of new values (they never change after saving). */
|
||||
function idFrom(name: string): string {
|
||||
const slug = name
|
||||
.normalize('NFD')
|
||||
.replace(/[̀-ͯ]/g, '')
|
||||
.toUpperCase()
|
||||
.replace(/[^A-Z0-9]+/g, '_')
|
||||
.replace(/^_+|_+$/g, '')
|
||||
.replace(/^[^A-Z]+/, '')
|
||||
.slice(0, 30);
|
||||
return slug || 'NUEVO';
|
||||
}
|
||||
|
||||
/**
|
||||
* "Configuración" (owners and admins): the project's statuses, how tickets
|
||||
* move between them, ticket types and areas. Edits a local draft, saved in
|
||||
* one go; values can be archived but not removed once saved.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'ts-settings-page',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [
|
||||
CdkDropList,
|
||||
CdkDrag,
|
||||
CdkDragHandle,
|
||||
NgTemplateOutlet,
|
||||
PiIconComponent,
|
||||
PiNoteComponent,
|
||||
],
|
||||
template: `
|
||||
<div class="ts-section-header">
|
||||
<div>
|
||||
<h2>Configuración</h2>
|
||||
<p>
|
||||
Estados, transiciones, tipos de ticket y áreas de este proyecto. Lo
|
||||
que ya se usa no se borra: se archiva y deja de ofrecerse.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (!facade.canManage()) {
|
||||
<pi-note
|
||||
gap="xs"
|
||||
status="info"
|
||||
appearance="fill"
|
||||
type="status"
|
||||
title="Solo lectura"
|
||||
text="Solo el propietario y los admins pueden cambiar la configuración."
|
||||
/>
|
||||
}
|
||||
|
||||
@if (draft(); as d) {
|
||||
<form
|
||||
class="ts-settings"
|
||||
(submit)="$event.preventDefault(); save()"
|
||||
novalidate
|
||||
>
|
||||
<fieldset [disabled]="!facade.canManage()">
|
||||
<!-- Statuses -->
|
||||
<section class="ts-panel ts-block" aria-labelledby="st-title">
|
||||
<header class="ts-block__head">
|
||||
<div>
|
||||
<h3 id="st-title">Estados</h3>
|
||||
<p class="ts-muted">
|
||||
En el orden de las columnas del tablero. La categoría dice qué
|
||||
significa cada uno para releases, «Mi trabajo» y estadísticas.
|
||||
</p>
|
||||
</div>
|
||||
<button type="button" class="ts-add" (click)="addStatus()">
|
||||
+ Añadir estado
|
||||
</button>
|
||||
</header>
|
||||
<div class="ts-rows-head ts-status-grid" aria-hidden="true">
|
||||
<span></span><span>Nombre</span><span>Categoría</span
|
||||
><span>Color</span><span>Pide motivo</span><span></span>
|
||||
</div>
|
||||
<ol
|
||||
class="ts-rows"
|
||||
cdkDropList
|
||||
[cdkDropListDisabled]="!facade.canManage()"
|
||||
(cdkDropListDropped)="reorder($event)"
|
||||
>
|
||||
@for (status of d.statuses; track $index; let i = $index) {
|
||||
<li
|
||||
class="ts-row ts-status-grid"
|
||||
cdkDrag
|
||||
[class.is-archived]="status.archived"
|
||||
[style.--tone]="toneOf(status.color)"
|
||||
>
|
||||
<span
|
||||
class="ts-grip"
|
||||
cdkDragHandle
|
||||
title="Arrastra para reordenar"
|
||||
aria-hidden="true"
|
||||
>⠿</span
|
||||
>
|
||||
<span class="ts-name">
|
||||
<span class="ts-swatch" aria-hidden="true"></span>
|
||||
<input
|
||||
class="ts-input"
|
||||
maxlength="40"
|
||||
[attr.aria-label]="'Nombre del estado ' + (i + 1)"
|
||||
[value]="status.name"
|
||||
(input)="setStatusName(i, $any($event.target).value)"
|
||||
/>
|
||||
<code class="ts-id">{{ status.id }}</code>
|
||||
</span>
|
||||
<select
|
||||
class="ts-input"
|
||||
aria-label="Categoría"
|
||||
[value]="status.category"
|
||||
[attr.title]="categoryHint(status.category)"
|
||||
(change)="
|
||||
edit('statuses', i, {
|
||||
category: $any($event.target).value,
|
||||
})
|
||||
"
|
||||
>
|
||||
@for (c of categories; track c) {
|
||||
<option [value]="c" [selected]="c === status.category">
|
||||
{{ categoryLabel(c) }}
|
||||
</option>
|
||||
}
|
||||
</select>
|
||||
<select
|
||||
class="ts-input"
|
||||
aria-label="Color"
|
||||
(change)="
|
||||
edit('statuses', i, { color: $any($event.target).value })
|
||||
"
|
||||
>
|
||||
@for (c of colors; track c) {
|
||||
<option [value]="c" [selected]="c === status.color">
|
||||
{{ colorLabel(c) }}
|
||||
</option>
|
||||
}
|
||||
</select>
|
||||
<label class="ts-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
[checked]="status.requiresReason"
|
||||
(change)="
|
||||
edit('statuses', i, {
|
||||
requiresReason: $any($event.target).checked,
|
||||
})
|
||||
"
|
||||
/>
|
||||
<span class="visually-hidden">Pide motivo</span>
|
||||
</label>
|
||||
<ng-container
|
||||
[ngTemplateOutlet]="archive"
|
||||
[ngTemplateOutletContext]="{
|
||||
section: 'statuses',
|
||||
index: i,
|
||||
item: status,
|
||||
}"
|
||||
/>
|
||||
</li>
|
||||
}
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<!-- Transitions -->
|
||||
<section class="ts-panel ts-block" aria-labelledby="tr-title">
|
||||
<header class="ts-block__head">
|
||||
<div>
|
||||
<h3 id="tr-title">Transiciones</h3>
|
||||
<p class="ts-muted">
|
||||
A qué estados puede pasar un ticket desde cada uno (fila →
|
||||
columna). Los archivados no reciben tickets.
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
<div class="ts-matrix-wrap">
|
||||
<table class="ts-matrix">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">
|
||||
<span class="visually-hidden">Desde</span>
|
||||
</th>
|
||||
@for (to of activeStatuses(); track to.id) {
|
||||
<th scope="col">
|
||||
<span
|
||||
class="ts-pill"
|
||||
[style.--tone]="toneOf(to.color)"
|
||||
>{{ to.name }}</span
|
||||
>
|
||||
</th>
|
||||
}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (from of d.statuses; track from.id) {
|
||||
<tr [class.is-archived]="from.archived">
|
||||
<th scope="row">
|
||||
<span
|
||||
class="ts-pill"
|
||||
[style.--tone]="toneOf(from.color)"
|
||||
>{{ from.name }}</span
|
||||
>
|
||||
</th>
|
||||
@for (to of activeStatuses(); track to.id) {
|
||||
<td>
|
||||
@if (from.id !== to.id) {
|
||||
<input
|
||||
type="checkbox"
|
||||
[attr.aria-label]="from.name + ' → ' + to.name"
|
||||
[checked]="allows(from.id, to.id)"
|
||||
(change)="
|
||||
toggleTransition(
|
||||
from.id,
|
||||
to.id,
|
||||
$any($event.target).checked
|
||||
)
|
||||
"
|
||||
/>
|
||||
}
|
||||
</td>
|
||||
}
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="ts-settings__pair">
|
||||
<!-- Ticket types -->
|
||||
<section class="ts-panel ts-block" aria-labelledby="ty-title">
|
||||
<header class="ts-block__head">
|
||||
<div>
|
||||
<h3 id="ty-title">Tipos de ticket</h3>
|
||||
<p class="ts-muted">
|
||||
Los de icono de paleta piden un frame de Figma.
|
||||
</p>
|
||||
</div>
|
||||
<button type="button" class="ts-add" (click)="addType()">
|
||||
+ Añadir tipo
|
||||
</button>
|
||||
</header>
|
||||
<ol class="ts-rows">
|
||||
@for (type of d.issueTypes; track $index; let i = $index) {
|
||||
<li
|
||||
class="ts-row ts-type-grid"
|
||||
[class.is-archived]="type.archived"
|
||||
[style.--tone]="toneOf(type.color)"
|
||||
>
|
||||
<span class="ts-type-icon" aria-hidden="true">
|
||||
<pi-icon [icon]="type.icon" size="small" />
|
||||
</span>
|
||||
<span class="ts-name">
|
||||
<input
|
||||
class="ts-input"
|
||||
maxlength="40"
|
||||
[attr.aria-label]="'Nombre del tipo ' + (i + 1)"
|
||||
[value]="type.name"
|
||||
(input)="
|
||||
setName('issueTypes', i, $any($event.target).value)
|
||||
"
|
||||
/>
|
||||
<code class="ts-id">{{ type.id }}</code>
|
||||
</span>
|
||||
<select
|
||||
class="ts-input"
|
||||
aria-label="Icono"
|
||||
(change)="
|
||||
edit('issueTypes', i, {
|
||||
icon: $any($event.target).value,
|
||||
})
|
||||
"
|
||||
>
|
||||
@for (icon of icons; track icon) {
|
||||
<option [value]="icon" [selected]="icon === type.icon">
|
||||
{{ iconLabel(icon) }}
|
||||
</option>
|
||||
}
|
||||
</select>
|
||||
<select
|
||||
class="ts-input"
|
||||
aria-label="Color"
|
||||
(change)="
|
||||
edit('issueTypes', i, {
|
||||
color: $any($event.target).value,
|
||||
})
|
||||
"
|
||||
>
|
||||
@for (c of colors; track c) {
|
||||
<option [value]="c" [selected]="c === type.color">
|
||||
{{ colorLabel(c) }}
|
||||
</option>
|
||||
}
|
||||
</select>
|
||||
<ng-container
|
||||
[ngTemplateOutlet]="archive"
|
||||
[ngTemplateOutletContext]="{
|
||||
section: 'issueTypes',
|
||||
index: i,
|
||||
item: type,
|
||||
}"
|
||||
/>
|
||||
</li>
|
||||
}
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<!-- Areas -->
|
||||
<section class="ts-panel ts-block" aria-labelledby="ar-title">
|
||||
<header class="ts-block__head">
|
||||
<div>
|
||||
<h3 id="ar-title">Áreas</h3>
|
||||
<p class="ts-muted">Equipo o capa a la que va el ticket.</p>
|
||||
</div>
|
||||
<button type="button" class="ts-add" (click)="addArea()">
|
||||
+ Añadir área
|
||||
</button>
|
||||
</header>
|
||||
<ol class="ts-rows">
|
||||
@for (area of d.areas; track $index; let i = $index) {
|
||||
<li
|
||||
class="ts-row ts-area-grid"
|
||||
[class.is-archived]="area.archived"
|
||||
>
|
||||
<span class="ts-name">
|
||||
<input
|
||||
class="ts-input"
|
||||
maxlength="40"
|
||||
[attr.aria-label]="'Nombre del área ' + (i + 1)"
|
||||
[value]="area.name"
|
||||
(input)="setName('areas', i, $any($event.target).value)"
|
||||
/>
|
||||
<code class="ts-id">{{ area.id }}</code>
|
||||
</span>
|
||||
<ng-container
|
||||
[ngTemplateOutlet]="archive"
|
||||
[ngTemplateOutletContext]="{
|
||||
section: 'areas',
|
||||
index: i,
|
||||
item: area,
|
||||
}"
|
||||
/>
|
||||
</li>
|
||||
}
|
||||
</ol>
|
||||
</section>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
@if (facade.canManage() && (dirty() || facade.savingSettings())) {
|
||||
<footer class="ts-savebar" [class.is-dirty]="dirty()">
|
||||
<div class="ts-savebar__status" aria-live="polite">
|
||||
@if (problems().length) {
|
||||
<ul class="ts-problems">
|
||||
@for (problem of problems(); track problem) {
|
||||
<li>
|
||||
<pi-icon icon="exclamation" size="x-small" />
|
||||
{{ problem }}
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
} @else {
|
||||
<span>Cambios sin guardar</span>
|
||||
}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="ts-secondary"
|
||||
[disabled]="!dirty() || facade.savingSettings()"
|
||||
(click)="discard()"
|
||||
>
|
||||
Descartar
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="ts-primary"
|
||||
[disabled]="
|
||||
!dirty() || !!problems().length || facade.savingSettings()
|
||||
"
|
||||
>
|
||||
{{ facade.savingSettings() ? 'Guardando…' : 'Guardar cambios' }}
|
||||
</button>
|
||||
</footer>
|
||||
}
|
||||
</form>
|
||||
}
|
||||
|
||||
<ng-template
|
||||
#archive
|
||||
let-section="section"
|
||||
let-index="index"
|
||||
let-item="item"
|
||||
>
|
||||
@if (isNew(section, item.id)) {
|
||||
<button
|
||||
type="button"
|
||||
class="ts-icon-button"
|
||||
title="Quitar (aún no se ha guardado)"
|
||||
[attr.aria-label]="'Quitar ' + item.name"
|
||||
(click)="remove(section, index)"
|
||||
>
|
||||
<pi-icon icon="trash" size="small" />
|
||||
</button>
|
||||
} @else if (item.archived) {
|
||||
<button
|
||||
type="button"
|
||||
class="ts-archive is-archived"
|
||||
[attr.aria-label]="'Restaurar ' + item.name"
|
||||
(click)="edit(section, index, { archived: false })"
|
||||
>
|
||||
Restaurar
|
||||
</button>
|
||||
} @else {
|
||||
<button
|
||||
type="button"
|
||||
class="ts-archive"
|
||||
[attr.aria-label]="'Archivar ' + item.name"
|
||||
(click)="edit(section, index, { archived: true })"
|
||||
>
|
||||
Archivar
|
||||
</button>
|
||||
}
|
||||
</ng-template>
|
||||
`,
|
||||
styles: `
|
||||
.ts-settings {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
fieldset {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
.ts-settings__pair {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
|
||||
gap: 1rem;
|
||||
align-items: start;
|
||||
}
|
||||
.ts-block {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
min-width: 0;
|
||||
padding: 1.25rem;
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
.ts-block__head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
p {
|
||||
margin: 0.25rem 0 0;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
.ts-rows {
|
||||
display: grid;
|
||||
gap: 0.375rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.ts-rows-head {
|
||||
padding: 0 0.5rem;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ts-muted);
|
||||
}
|
||||
.ts-status-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.25rem minmax(10rem, 1fr) 9rem 8rem 5.5rem 6.5rem;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.ts-type-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 2rem minmax(8rem, 1fr) 7rem 7rem 6.5rem;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.ts-area-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(8rem, 1fr) 6.5rem;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.ts-row {
|
||||
--tone: var(--ts-muted);
|
||||
padding: 0.375rem 0.5rem;
|
||||
border-radius: 0.625rem;
|
||||
background: var(--ts-surface);
|
||||
border: 1px solid var(--ts-line);
|
||||
&.is-archived {
|
||||
background: var(--ts-sunken);
|
||||
.ts-input,
|
||||
.ts-type-icon {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cdk-drag-preview {
|
||||
box-shadow: var(--ts-lift);
|
||||
}
|
||||
.cdk-drag-placeholder {
|
||||
opacity: 0.35;
|
||||
}
|
||||
.ts-grip {
|
||||
cursor: grab;
|
||||
color: var(--ts-muted);
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
}
|
||||
.ts-name {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
min-width: 0;
|
||||
.ts-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
.ts-swatch {
|
||||
flex: none;
|
||||
width: 0.625rem;
|
||||
height: 0.625rem;
|
||||
border-radius: 50%;
|
||||
background: var(--tone);
|
||||
}
|
||||
.ts-id {
|
||||
flex: 0 0 5.5rem;
|
||||
text-align: right;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-family: var(--ts-font-mono);
|
||||
font-size: 0.625rem;
|
||||
color: var(--ts-muted);
|
||||
}
|
||||
.ts-input {
|
||||
box-sizing: border-box;
|
||||
height: 2.125rem;
|
||||
width: 100%;
|
||||
padding: 0 0.5rem;
|
||||
border: 1px solid var(--ts-line);
|
||||
border-radius: 0.5rem;
|
||||
background: var(--ts-surface);
|
||||
color: var(--ts-ink);
|
||||
font: inherit;
|
||||
font-size: 0.875rem;
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--ts-brand);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
&:disabled {
|
||||
color: var(--ts-ink-soft);
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
.ts-check {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
input[type='checkbox'] {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
accent-color: var(--ts-brand);
|
||||
cursor: pointer;
|
||||
}
|
||||
.ts-type-icon {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 0.5rem;
|
||||
color: var(--tone);
|
||||
background: color-mix(in srgb, var(--tone) 12%, var(--ts-surface));
|
||||
}
|
||||
.ts-matrix-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.ts-matrix {
|
||||
border-collapse: collapse;
|
||||
font-size: 0.8125rem;
|
||||
th,
|
||||
td {
|
||||
padding: 0.375rem 0.5rem;
|
||||
border-bottom: 1px solid var(--ts-line);
|
||||
text-align: center;
|
||||
}
|
||||
th[scope='row'] {
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
thead th {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
tr.is-archived th[scope='row'] {
|
||||
opacity: 0.6;
|
||||
}
|
||||
td:hover {
|
||||
background: var(--pi-color-primary-25);
|
||||
}
|
||||
}
|
||||
/* @pi/ui styles every <button>: these opt back into a compact look. */
|
||||
.ts-add,
|
||||
.ts-archive,
|
||||
.ts-primary,
|
||||
.ts-secondary {
|
||||
min-width: 0 !important;
|
||||
height: 2.125rem;
|
||||
padding: 0 0.875rem !important;
|
||||
border-radius: 999px !important;
|
||||
font: inherit;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
.ts-add,
|
||||
.ts-archive,
|
||||
.ts-secondary {
|
||||
border: 1px solid var(--ts-line-strong) !important;
|
||||
background: var(--ts-surface) !important;
|
||||
color: var(--ts-ink-soft) !important;
|
||||
}
|
||||
.ts-archive.is-archived {
|
||||
border-style: dashed !important;
|
||||
}
|
||||
.ts-primary {
|
||||
border: 0 !important;
|
||||
background: var(--ts-brand) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.ts-savebar {
|
||||
position: sticky;
|
||||
bottom: 1rem;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 999px;
|
||||
background: var(--ts-surface-raised);
|
||||
border: 1px solid var(--ts-line-strong);
|
||||
box-shadow: var(--ts-lift);
|
||||
font-size: 0.875rem;
|
||||
&.is-dirty {
|
||||
border-color: var(--ts-brand);
|
||||
}
|
||||
}
|
||||
.ts-savebar__status {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.ts-problems {
|
||||
display: grid;
|
||||
gap: 0.125rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
color: var(--ts-c-red);
|
||||
font-size: 0.8125rem;
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
.ts-rows-head {
|
||||
display: none;
|
||||
}
|
||||
.ts-status-grid,
|
||||
.ts-type-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.ts-grip,
|
||||
.ts-type-icon {
|
||||
display: none;
|
||||
}
|
||||
.ts-name {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.ts-savebar {
|
||||
flex-wrap: wrap;
|
||||
border-radius: var(--ts-radius);
|
||||
}
|
||||
}
|
||||
`,
|
||||
})
|
||||
export class SettingsPage {
|
||||
protected readonly facade = inject(ProjectFacade);
|
||||
protected readonly categories = CATEGORIES;
|
||||
protected readonly colors = SETTING_COLORS;
|
||||
protected readonly icons = TYPE_ICONS;
|
||||
|
||||
/** What the API has; the draft is compared against it. */
|
||||
private readonly saved = computed(
|
||||
() => this.facade.project()?.settings ?? null,
|
||||
);
|
||||
protected readonly draft = signal<ProjectSettings | null>(null);
|
||||
|
||||
protected readonly dirty = computed(
|
||||
() =>
|
||||
!!this.draft() &&
|
||||
JSON.stringify(this.draft()) !== JSON.stringify(this.saved()),
|
||||
);
|
||||
|
||||
protected readonly activeStatuses = computed(
|
||||
() => this.draft()?.statuses.filter((s) => !s.archived) ?? [],
|
||||
);
|
||||
|
||||
/** The same rules the API enforces, shown before saving. */
|
||||
protected readonly problems = computed(() => {
|
||||
const d = this.draft();
|
||||
if (!d) return [];
|
||||
const problems: string[] = [];
|
||||
const lists = [d.statuses, d.issueTypes, d.areas];
|
||||
if (lists.some((list) => list.some((item) => !item.name.trim())))
|
||||
problems.push('Hay nombres vacíos');
|
||||
if (
|
||||
lists.some((list) => {
|
||||
const ids = list.map((item) => item.id);
|
||||
return ids.some((id, i) => ids.indexOf(id) !== i);
|
||||
})
|
||||
)
|
||||
problems.push('Hay dos valores con el mismo nombre');
|
||||
const active = d.statuses.filter((s) => !s.archived);
|
||||
if (!active.some((s) => s.category === StatusCategory.TODO))
|
||||
problems.push(
|
||||
'Falta un estado activo «Pendiente» donde entren los tickets',
|
||||
);
|
||||
if (!active.some((s) => s.category === StatusCategory.DONE))
|
||||
problems.push('Falta un estado activo «Hecho»');
|
||||
if (!d.issueTypes.some((t) => !t.archived))
|
||||
problems.push('Hace falta al menos un tipo de ticket activo');
|
||||
return problems;
|
||||
});
|
||||
|
||||
constructor() {
|
||||
// Follow the saved settings while there is nothing pending (after saving,
|
||||
// the project comes back equal to the draft, so it is clean again).
|
||||
effect(() => {
|
||||
const saved = this.saved();
|
||||
if (saved && !untracked(this.dirty))
|
||||
this.draft.set(structuredClone(saved));
|
||||
});
|
||||
}
|
||||
|
||||
protected readonly toneOf = tone;
|
||||
protected readonly categoryLabel = (c: StatusCategory) => CATEGORY[c].label;
|
||||
protected readonly categoryHint = (c: StatusCategory) => CATEGORY[c].hint;
|
||||
protected readonly iconLabel = (icon: string) => ICON_LABEL[icon] ?? icon;
|
||||
protected readonly colorLabel = (c: (typeof SETTING_COLORS)[number]) =>
|
||||
COLOR_LABEL[c];
|
||||
|
||||
/** Values the API does not have yet: they can still be removed or have their id follow the name. */
|
||||
protected isNew(section: Section, id: string): boolean {
|
||||
return !this.saved()?.[section].some((item) => item.id === id);
|
||||
}
|
||||
|
||||
protected allows(from: string, to: string): boolean {
|
||||
return !!this.draft()
|
||||
?.transitions.find((t) => t.from === from)
|
||||
?.to.includes(to);
|
||||
}
|
||||
|
||||
protected edit(section: Section, index: number, changes: object): void {
|
||||
this.patch((d) => Object.assign(d[section][index], changes));
|
||||
}
|
||||
|
||||
protected setName(section: Section, index: number, name: string): void {
|
||||
this.patch((d) => {
|
||||
const item = d[section][index];
|
||||
item.name = name;
|
||||
if (this.isNew(section, item.id)) {
|
||||
const id = this.uniqueId(d[section], idFrom(name), index);
|
||||
if (section === 'statuses') this.renameStatus(d, item.id, id);
|
||||
item.id = id;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
protected setStatusName(index: number, name: string): void {
|
||||
this.setName('statuses', index, name);
|
||||
}
|
||||
|
||||
protected toggleTransition(from: string, to: string, on: boolean): void {
|
||||
this.patch((d) => {
|
||||
let row = d.transitions.find((t) => t.from === from);
|
||||
if (!row) {
|
||||
row = { from, to: [] };
|
||||
d.transitions.push(row);
|
||||
}
|
||||
row.to = on
|
||||
? [...new Set([...row.to, to])]
|
||||
: row.to.filter((target) => target !== to);
|
||||
});
|
||||
}
|
||||
|
||||
protected reorder(event: CdkDragDrop<unknown>): void {
|
||||
this.patch((d) =>
|
||||
moveItemInArray(d.statuses, event.previousIndex, event.currentIndex),
|
||||
);
|
||||
}
|
||||
|
||||
protected addStatus(): void {
|
||||
this.patch((d) => {
|
||||
const id = this.uniqueId(d.statuses, 'NUEVO_ESTADO');
|
||||
// Before the done/cancelled statuses, so it lands mid-board.
|
||||
const at = d.statuses.findIndex(
|
||||
(s) =>
|
||||
s.category === StatusCategory.DONE ||
|
||||
s.category === StatusCategory.CANCELLED,
|
||||
);
|
||||
d.statuses.splice(at === -1 ? d.statuses.length : at, 0, {
|
||||
id,
|
||||
name: 'Nuevo estado',
|
||||
category: StatusCategory.IN_PROGRESS,
|
||||
color: 'teal',
|
||||
requiresReason: false,
|
||||
archived: false,
|
||||
});
|
||||
d.transitions.push({ from: id, to: [] });
|
||||
});
|
||||
}
|
||||
|
||||
protected addType(): void {
|
||||
this.patch((d) =>
|
||||
d.issueTypes.push({
|
||||
id: this.uniqueId(d.issueTypes, 'NUEVO_TIPO'),
|
||||
name: 'Nuevo tipo',
|
||||
icon: 'flag',
|
||||
color: 'teal',
|
||||
archived: false,
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
protected addArea(): void {
|
||||
this.patch((d) =>
|
||||
d.areas.push({
|
||||
id: this.uniqueId(d.areas, 'NUEVA_AREA'),
|
||||
name: 'Nueva área',
|
||||
archived: false,
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
/** Only for values never saved; saved ones are archived instead. */
|
||||
protected remove(section: Section, index: number): void {
|
||||
this.patch((d) => {
|
||||
const [item] = d[section].splice(index, 1);
|
||||
if (section === 'statuses') {
|
||||
d.transitions = d.transitions
|
||||
.filter((t) => t.from !== item.id)
|
||||
.map((t) => ({ ...t, to: t.to.filter((to) => to !== item.id) }));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
protected discard(): void {
|
||||
const saved = this.saved();
|
||||
if (saved) this.draft.set(structuredClone(saved));
|
||||
}
|
||||
|
||||
protected save(): void {
|
||||
const draft = this.draft();
|
||||
if (!draft || !this.dirty() || this.problems().length) return;
|
||||
this.facade.saveSettings({
|
||||
...draft,
|
||||
// Only rows with targets; unknown ids would be rejected anyway.
|
||||
transitions: draft.transitions.filter((t) => t.to.length),
|
||||
});
|
||||
}
|
||||
|
||||
private patch(change: (draft: ProjectSettings) => void): void {
|
||||
this.draft.update((d) => {
|
||||
if (!d) return d;
|
||||
const next = structuredClone(d);
|
||||
change(next);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
private uniqueId(list: { id: string }[], base: string, except = -1): string {
|
||||
const taken = new Set(
|
||||
list.filter((_, i) => i !== except).map((item) => item.id),
|
||||
);
|
||||
let id = base;
|
||||
for (let n = 2; taken.has(id); n++) id = `${base.slice(0, 27)}_${n}`;
|
||||
return id;
|
||||
}
|
||||
|
||||
private renameStatus(d: ProjectSettings, from: string, to: string): void {
|
||||
for (const row of d.transitions) {
|
||||
if (row.from === from) row.from = to;
|
||||
row.to = row.to.map((target) => (target === from ? to : target));
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user