Budsjett og hjelp

Denne siden dekker små, gjenbrukbare komponenter som ofte legges inn i fagflater: app-budget-card for budsjettlinjer og app-help-link for lenke til håndbok/dokumentasjon.

---

Feature-tabell

Komponent	Selector	Hovedfunksjoner	Import
BudgetCardComponent	app-budget-card	Viser budsjett/avvik, redigerer budsjettlinjer, lagrer og refresher	Standalone og SharedModule
HelpLinkComponent	app-help-link	Slår opp dokumentasjons-URL, viser ?-knapp, åpner i ny fane	Standalone og SharedModule

---

Budget-card

Del	Sti
Komponent	ui/ePortal.ui/src/app/shared/budget-card/budget-card.component.ts
Modeller	BudgetLine, BudgetSummary, BudgetSaveEvent i komponentfilen

Bruk komponenten når en fagflate skal vise og vedlikeholde budsjettlinjer med faktisk beløp, budsjettbeløp, timer og avvik.

Brukseksempel

<app-budget-card
  [budgetSummary]="budgetSummary"
  [loading]="budgetLoading"
  [saving]="budgetSaving"
  (budgetSave)="saveBudget($event)"
  (refresh)="loadBudget()">
</app-budget-card>

budgetSummary: BudgetSummary | null = null;
budgetLoading = false;
budgetSaving = false;

saveBudget(event: BudgetSaveEvent): void {
  this.budgetSaving = true;
  this.projectService.saveBudget(this.projectId, event.lines).subscribe({
    next: () => this.loadBudget(),
    complete: () => (this.budgetSaving = false),
  });
}

API

Type	Navn	Beskrivelse
Input	budgetSummary	Summer og linjer som skal vises.
Input	loading	Viser lastestatus.
Input	saving	Deaktiverer/markerer lagring.
Output	budgetSave	Emitter linjer som parent skal lagre.
Output	refresh	Ber parent laste budsjettet på nytt.

---

Help-link

Del	Sti
Komponent	ui/ePortal.ui/src/app/shared/help/help-link.component.ts
Service	ui/ePortal.ui/src/app/shared/help/help.service.ts

app-help-link resolver dokumentasjons-URL fra aktiv rute eller eksplisitt path. Den skjuler seg hvis dokumentasjons-URL ikke er konfigurert.

Brukseksempel

<div class="d-flex align-items-center gap-2">
  <h1 class="h4 mb-0">{{ 'Project.Detail.Title' | translate }}</h1>
  <app-help-link path="/prosjekt/detaljer"></app-help-link>
</div>

Hvis path utelates, brukes aktiv rute:

<app-help-link></app-help-link>

API

Type	Navn	Beskrivelse
Input	path	Valgfri dokumentasjonssti som overstyrer aktiv rute.

---

Kjente fallgruver

Fallgruve	Riktig mønster
Lagre budsjett direkte i komponenten	Parent eier lagring via budgetSave.
Sette budgetSummary til tomt objekt uten linjer	Bruk null eller korrekt BudgetSummary mens data lastes.
Hardkode dokumentasjons-URL i fagkomponent	Bruk app-help-link og mapping i HelpService.
Bruke help-link som vanlig navigasjonslenke	Den er ment for dokumentasjon og åpner i ny fane.

---

Relaterte sider

• Komponenter
• Utility-komponenter