Gå til innhold

Tags

Tag-komponentene gir felles UI for å vise og velge tags på tvers av fagmoduler. De håndterer både eksisterende lagrede koblinger og pending tags før parent-objektet er opprettet.

Feature-tabell

Komponent Selector Hovedfunksjoner Import
TagSelectorComponent app-tag-selector Velg, opprett og fjern tags, pending mode, parent scope Standalone
TagBadgeComponent app-tag-badge Viser TagLinkDto[] som fargede badges Standalone
KanbanTagBadgesComponent app-kanban-tag-badges Kompakt badgevisning fra kommaseparerte navn/farger Standalone

Tag-selector

Del Sti
Komponent ui/ePortal.ui/src/app/shared/tag-selector/tag-selector.component.ts

Bruk app-tag-selector når brukeren skal velge tags på et objekt. For nye objekter kan pending brukes slik at tag-id-er holdes lokalt til objektet er lagret.

Brukseksempel for lagret objekt

<app-tag-selector
  objectType="Project"
  [objectId]="projectId"
  [assignedTags]="projectTags"
  [readonly]="!canEdit"
  (tagsChanged)="projectTags = $event">
</app-tag-selector>

Brukseksempel for nytt objekt

<app-tag-selector
  objectType="Project"
  [objectId]="0"
  [assignedTags]="[]"
  [pending]="true"
  [(pendingTagIds)]="pendingTagIds">
</app-tag-selector>

pendingTagIds: number[] = [];

saveProject(): void {
  this.projectService.createProject({
    ...this.form.value,
    tagIds: this.pendingTagIds,
  }).subscribe();
}

API

Type Navn Default Beskrivelse
Input objectType påkrevd Objekttype taggene kobles til.
Input objectId påkrevd Objekt-id.
Input parentObjectType undefined Valgfri parent scope.
Input parentObjectId undefined Valgfri parent id.
Input assignedTags [] Nåværende tag-koblinger.
Input showAssignedTags true Viser valgte tags.
Input readonly false Skrur av redigering.
Input pending false Emitter id-er uten å lagre kobling.
Input pendingTagIds [] Lokale tag-id-er for nye objekter.
Output tagsChanged Emitter oppdatert TagLinkDto[].
Output pendingTagIdsChanged Emitter oppdatert id-liste i pending mode.

Tag-badge

Viser en liste av TagLinkDto med farger og kontrastjustert tekst.

<app-tag-badge [tags]="projectTags"></app-tag-badge>
Type Navn Default Beskrivelse
Input tags [] Tag-lenker som skal vises.

Kanban-tag-badges

Kanban-komponenten brukes når tags allerede ligger som kommaseparerte felter i en radmodell.

<app-kanban-tag-badges
  [tagNames]="card.tagNames"
  [tagColors]="card.tagColors"
  [maxVisible]="2">
</app-kanban-tag-badges>
Type Navn Default Beskrivelse
Input tagNames undefined Kommaseparerte tag-navn.
Input tagColors undefined Kommaseparerte farger i samme rekkefølge.
Input maxVisible 2 Antall badges før overflow.

Kjente fallgruver

Fallgruve Riktig mønster
Bruke normal modus før objektet finnes Bruk pending og lagre tag-id-er sammen med objektet.
Blande assignedTags og pendingTagIds uten kontroll Velg modus basert på om objektet har permanent id.
Vise mange tags i kanban-kort Sett lav maxVisible og la overflow indikere resten.
Hardkode tag-farger i template Bruk farger fra tag-data eller tag-service.

Relaterte sider