task-stream/libs/web/tracker/presenters/src/lib/pages/projects.page.ts

import {
  ChangeDetectionStrategy,
  Component,
  computed,
  DestroyRef,
  DOCUMENT,
  inject,
  OnInit,
  signal,
  TemplateRef,
  viewChild,
} from '@angular/core';
import {
  form,
  FormField,
  maxLength,
  pattern,
  required,
} from '@angular/forms/signals';
import {
  PiActionButtonComponent,
  PiCheckboxComponent,
  PiEmptyStateComponent,
  PiLabelDirective,
  PiSelectFieldComponent,
  PiSkeletonComponent,
  PiTextareaComponent,
  PiTextFieldComponent,
  type PiSelectFieldOption,
} from '@pi/ui';
import { DrawerService } from '@task-stream/web/shared/ui';
import {
  HomeFacade,
  InboxFacade,
  MyHomeFacade,
  ProjectsFacade,
} from '@task-stream/web/tracker/application';
import {
  NotificationKind,
  ProjectRole,
  StatusCategory,
} from '@task-stream/web/tracker/domain';
import { AuthFacade } from '@task-stream/web/identity/application';
import { GoToComponent } from '../ui/go-to';
import { ProjectCardComponent } from '../ui/project-card';
import { MyWorkComponent } from './my-work';
import { ActivityFeedComponent } from '../ui/home/activity-feed';
import { DaySummaryComponent } from '../ui/home/day-summary';
import { FirstStepsComponent } from '../ui/home/first-steps';
import { HomeSprintsComponent } from '../ui/home/home-sprints';
import { OnlineNowComponent } from '../ui/home/online-now';
import { ResumeComponent } from '../ui/home/resume';
import { WeekAgendaComponent } from '../ui/home/week-agenda';
import { HomeKpisComponent } from '../ui/home/kpis';
import { MyViewsComponent } from '../ui/my-views';
import { PinnedComponent } from '../ui/home/pinned';

/** How often the home page refreshes its reading while open. */
const REFRESH_MS = 60_000;

@Component({
  selector: 'ts-projects-page',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
    PiCheckboxComponent,
    FormField,
    GoToComponent,
    ProjectCardComponent,
    MyWorkComponent,
    ActivityFeedComponent,
    DaySummaryComponent,
    FirstStepsComponent,
    HomeSprintsComponent,
    OnlineNowComponent,
    ResumeComponent,
    WeekAgendaComponent,
    HomeKpisComponent,
    MyViewsComponent,
    PinnedComponent,
    PiActionButtonComponent,
    PiEmptyStateComponent,
    PiSkeletonComponent,
    PiTextFieldComponent,
    PiTextareaComponent,
    PiLabelDirective,
    PiSelectFieldComponent,
  ],
  template: `
    <header class="ts-page-header">
      <ts-day-summary
        [firstName]="firstName()"
        [dueToday]="dueToday()"
        [overdue]="overdue()"
        [qaFailed]="home.qaFailed()"
        [mentions]="unreadMentions()"
      />
      <div class="ts-home-actions">
        <ts-go-to />
        <pi-action-button
          color="primary"
          text="Nuevo proyecto"
          (execute)="openCreate()"
        />
      </div>
    </header>

    @if (myHome.home(); as h) {
      <ts-first-steps
        [steps]="h.firstSteps"
        [firstKey]="facade.sorted()[0]?.key ?? null"
        (createProject)="openCreate()"
      />
    }

    <!-- My projects first: what most visits come to open. -->
    <section class="ts-home-projects" aria-labelledby="projects-title">
      @if (facade.projects().length) {
        <div class="ts-section-header">
          <h2 id="projects-title">
            Proyectos
            <span class="ts-mono ts-muted">{{
              pad(facade.projects().length)
            }}</span>
          </h2>
        </div>
      } @else {
        <h2 id="projects-title" class="visually-hidden">Proyectos</h2>
      }
      @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) {
            <ts-project-card
              [project]="project"
              [stats]="statsOf().get(project.id) ?? null"
            />
          }
        </div>
      }
    </section>

    @if (facade.projects().length) {
      <ts-pinned />
      @if (myHome.home(); as h) {
        <ts-home-kpis
          [mine]="home.mineTotal()"
          [dueToday]="dueToday()"
          [overdue]="overdue()"
          [awaitingQa]="home.awaitingQaTotal()"
          [me]="h.me"
          [team]="h.team"
        />
        <ts-week-agenda [items]="h.agenda" />
      }
      <ts-my-views />
      <!-- Two columns that stack on their own: no gaps between rows. -->
      <div class="ts-home">
        <div class="ts-home__column">
          <ts-my-work />
          @if (myHome.home(); as h) {
            <ts-activity-feed
              [activity]="h.activity"
              [projectKeys]="projectKeys()"
            />
          }
        </div>
        <div class="ts-home__column">
          @if (myHome.home()?.sprints?.length) {
            <ts-home-sprints [sprints]="myHome.home()!.sprints" />
          }
          <ts-my-work part="side" />
          @if (myHome.home(); as h) {
            <ts-online-now [online]="h.online" />
          }
          <ts-resume />
        </div>
      </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>
        @if (templateOptions().length > 1) {
          <pi-select-field
            [formField]="f.template"
            [options]="templateOptions()"
          >
            <pi-label>Empezar con la configuración de</pi-label>
          </pi-select-field>
          <p class="ts-hint">
            Copia sus estados, transiciones, tipos, áreas, campos y
            automatizaciones. Después, cada proyecto cambia por su cuenta.
          </p>
        }
        <div class="ts-public-check">
          <pi-checkbox label="Proyecto público" [formField]="f.isPublic" />
          <p>
            Cualquiera, también sin iniciar sesión, podrá verlo (solo lectura).
            Se puede cambiar después en Configuración.
          </p>
        </div>
        <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-home-actions {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex-wrap: wrap;
      @media (max-width: 640px) {
        width: 100%;
        ts-go-to {
          flex: 1;
        }
      }
    }
    .ts-section-header h2 {
      display: flex;
      align-items: baseline;
      gap: 0.625rem;
      .ts-mono {
        font-size: 0.875rem;
        font-weight: 400;
      }
    }
    .ts-hint {
      margin: -0.5rem 0 0;
      color: var(--ts-muted);
      font-size: 0.8125rem;
    }
    .ts-home-projects {
      margin-bottom: 2rem;
    }
    ts-first-steps,
    ts-pinned,
    ts-home-kpis,
    ts-week-agenda,
    ts-my-views {
      margin-bottom: 1.25rem;
    }
    .ts-home {
      display: grid;
      grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
      gap: 1.25rem;
      align-items: start;
      margin-bottom: 2.5rem;
      @media (max-width: 960px) {
        grid-template-columns: minmax(0, 1fr);
      }
    }
    .ts-home__column {
      display: grid;
      gap: 1.25rem;
      min-width: 0;
    }
    .ts-public-check {
      p {
        /* Under the checkbox's text, past the box. */
        margin: 0 0 0 2.5rem;
        color: var(--ts-muted);
        font-size: 0.8125rem;
      }
    }
    .ts-projects {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
      gap: 1.25rem;
    }
  `,
})
export class ProjectsPage implements OnInit {
  protected readonly facade = inject(ProjectsFacade);
  private readonly auth = inject(AuthFacade);
  protected readonly firstName = computed(
    () => this.auth.user()?.name.split(/\s+/)[0] ?? '',
  );
  private readonly drawer = inject(DrawerService);
  private readonly createForm =
    viewChild.required<TemplateRef<unknown>>('createForm');

  private readonly model = signal({
    key: '',
    name: '',
    description: '',
    isPublic: false,
    template: '',
  });

  /** Projects I own or administer: the ones whose configuration I can copy. */
  protected readonly templateOptions = computed<PiSelectFieldOption<string>[]>(
    () => {
      const me = this.auth.user()?.id;
      return [
        { value: '', label: 'La de por defecto' },
        ...this.facade
          .sorted()
          .filter((p) =>
            p.members.some(
              (m) =>
                m.user.id === me &&
                (m.role === ProjectRole.OWNER || m.role === ProjectRole.ADMIN),
            ),
          )
          .map((p) => ({ value: p.id, label: `${p.key} · ${p.name}` })),
      ];
    },
  );
  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 pad = (n: number) => String(n).padStart(2, '0');

  /* The home reading: agenda, activity, the week… refreshed while open. */
  protected readonly myHome = inject(MyHomeFacade);
  protected readonly home = inject(HomeFacade);
  private readonly inbox = inject(InboxFacade);
  private readonly document = inject(DOCUMENT);
  private readonly destroyRef = inject(DestroyRef);

  private readonly todayStr = new Date().toISOString().slice(0, 10);
  private readonly openMine = computed(() =>
    this.home
      .mine()
      .filter(
        (i) =>
          i.statusCategory !== StatusCategory.DONE &&
          i.statusCategory !== StatusCategory.CANCELLED,
      ),
  );
  protected readonly dueToday = computed(
    () =>
      this.openMine().filter((i) => i.dueDate?.slice(0, 10) === this.todayStr)
        .length,
  );
  protected readonly overdue = computed(
    () =>
      this.openMine().filter(
        (i) => !!i.dueDate && i.dueDate.slice(0, 10) < this.todayStr,
      ).length,
  );
  protected readonly unreadMentions = computed(
    () =>
      this.inbox
        .items()
        .filter((n) => n.kind === NotificationKind.MENTIONED && !n.readAt)
        .length,
  );
  protected readonly projectKeys = computed(
    () => new Map(this.facade.projects().map((p) => [p.id, p.key])),
  );
  protected readonly statsOf = computed(
    () =>
      new Map(
        (this.myHome.home()?.projects ?? []).map((p) => [p.projectId, p]),
      ),
  );

  ngOnInit(): void {
    this.facade.load();
    this.myHome.refresh();
    const timer = setInterval(() => this.myHome.refresh(), REFRESH_MS);
    const onVisible = () => {
      if (this.document.visibilityState === 'visible') this.myHome.refresh();
    };
    this.document.addEventListener('visibilitychange', onVisible);
    this.destroyRef.onDestroy(() => {
      clearInterval(timer);
      this.document.removeEventListener('visibilitychange', onVisible);
    });
  }

  protected openCreate(): void {
    this.f().reset({
      key: '',
      name: '',
      description: '',
      isPublic: false,
      template: '',
    });
    this.drawer.open('Nuevo proyecto', this.createForm());
  }

  protected create(): void {
    if (this.f().invalid()) return;
    const { key, name, description, isPublic, template } = this.model();
    this.facade.create({
      key: key.toUpperCase(),
      name,
      description: description || null,
      isPublic,
      templateProjectId: template || null,
    });
    this.drawer.closeAll();
  }
}