Mention

Mention-komponentene gir felles mønster for å skrive og vise brukeromtaler. Input-komponenten lagrer omtaler som stabile tokens, mens render-komponenten viser tokens som lesbare chips.

---

Feature-tabell

Komponent	Selector	Hovedfunksjoner	Import
MentionInputComponent	app-mention-input	CVA, candidates, søkeevent, submit-event, tokenisering	Standalone
MentionRenderComponent	app-mention-render	Viser tokenisert tekst med brukerchips	Standalone
Mention token helper	mention-token.ts	Bygger og parser [@user:N] tokens	TypeScript helper

---

Mention-input

Del	Sti
Komponent	ui/ePortal.ui/src/app/shared/mention/mention-input.component.ts
Token helper	ui/ePortal.ui/src/app/shared/mention/mention-token.ts

app-mention-input implementerer ControlValueAccessor. Den rå verdien i formfeltet inneholder tokens som [@user:123].

Brukseksempel

<app-mention-input
  formControlName="comment"
  [placeholder]="'Comment.Placeholder' | translate"
  [rows]="3"
  [maxRows]="8"
  [candidates]="mentionCandidates"
  (search)="loadMentionCandidates($event)"
  (submit)="saveComment($event)">
</app-mention-input>

mentionCandidates: MentionCandidate[] = [];

loadMentionCandidates(query: string): void {
  this.userService.searchUsers(query).subscribe(users => {
    this.mentionCandidates = users.map(user => ({
      userId: user.userId,
      userFullName: user.fullName,
      userEmail: user.email,
    }));
  });
}

saveComment(value: string): void {
  this.commentService.createComment({
    body: value,
    mentionedUserIds: parseMentionTokens(value).map(token => token.userId),
  }).subscribe();
}

API

Type	Navn	Default	Beskrivelse
Input	placeholder	''	Placeholder-tekst. Bruk translate pipe i parent.
Input	rows	2	Minimum antall rader.
Input	maxRows	10	Maks rader før scroll.
Input	disabled	false	Deaktiverer input.
Input	candidates	[]	Søkeresultater parent gjør tilgjengelig.
Output	search		Emitter søketekst når bruker skriver mention.
Output	submit		Emitter rå tekstverdi ved submit.

---

Mention-render

Del	Sti
Komponent	ui/ePortal.ui/src/app/shared/mention/mention-render.component.ts

Bruk render-komponenten der lagrede kommentarer eller meldinger vises.

<app-mention-render
  [text]="comment.body"
  [mentions]="comment.mentions">
</app-mention-render>

Type	Navn	Default	Beskrivelse
Input	text	null	Tekst som kan inneholde mention tokens.
Input	mentions	[]	Brukeroppslag med userId og userFullName.

---

Token-format

Token	Betydning
[@user:123]	Omtale av bruker med id 123.

Bruk helperne i mention-token.ts i stedet for å bygge tokens med strengkonkatenering.

const token = buildMentionToken(123);
const userIds = parseMentionTokens(commentBody).map(item => item.userId);

---

Kjente fallgruver

Fallgruve	Riktig mønster
Lagre visningsnavn som omtale	Lagre token og bruk mentions for rendering.
La input-komponenten hente brukere selv	Parent eier søk via (search).
Tolke mention tokens med regex i fagkode	Bruk helperne i mention-token.ts.
Glemme disabled-state i reactive forms	Bruk Angular Forms API eller bind [disabled].

---

Relaterte sider

• Komponenter
• Tags
• Bruker og tenant