Gå til innhold

Komponenter

Denne seksjonen dokumenterer ePortal sine egne Angular-komponenter. Den er skrevet for utviklere, konsulenter og tekniske forvaltere som skal bruke, feilsøke eller videreutvikle felleskomponentene i ui/ePortal.ui/src/app/shared og ui/ePortal.ui/src/app/components/shared.

Hver detaljside beskriver faktisk API, anbefalte bruksmønstre, feature-tabell, kodeeksempel og kjente fallgruver. Eksemplene viser Angular-bruk med engelske symbolnavn og i18n-nøkler for brukerrettet tekst.

Feature-tabell

Område Komponenter Hovedfunksjoner Detaljside
Data og tabell konti-smart-grid Sortering, filter, gruppering, paging, Excel, mobilkort, inline edit Smart-grid
Produkt og linje app-product-search-modal Produktsøk, struktur-utvidelse, malpakke- og produktpakke-innsetting (masterordre + tilbud) Produktsøk-modal
Plan og tidslinje konti-schedule-grid, app-gantt-chart Kalenderperioder, grupper, custom templates, range select, oppgaveflytting Schedule-grid, Gantt-chart
Rapport app-report Grupper, summer, PDF-/Excel-eksport, søk, indeks, custom celler Report
Skjema og oppsett app-cron-builder, app-menu-route-picker, app-country-select, app-delivery-address-picker, app-address-autocomplete, ngb-datepicker-i18n ControlValueAccessor, cron preview, meny-rutevalg, landvalg med flagg og søk, leveringsadresse-velger, Google Places-adressesøk, i18n-datepicker Cron-builder, Meny-rutevelger, Land-velger, Leveringsadresse-velger, Adressesøk, Utility
Bruker, ansvar og tenant app-user-avatar, app-user-assignment, app-tenant-selector, app-tenant-selector-header Avatar, ansvarlige, fallback-navn, tenantbytte Bruker og tenant
Tags og omtaler app-tag-selector, app-tag-badge, app-kanban-tag-badges, app-mention-input, app-mention-render Tagging, pending mode, fargebadges, mention-tokenisering Tags, Mention
Dokumenter app-document-card, app-sharepoint-documents, app-sharepoint-picker CRM-dokumenter, SharePoint-tilkobling, opplasting, mappenavigasjon Dokumenter og SharePoint
KAI og innsikt app-ai-chat, app-kai-validation-result, app-kai-disclosure, app-time-insights AI-chat, valideringspanel, KAI-merke, endringshistorikk KAI-komponenter, Utility
Shell og drift app-pwa-install-prompt, app-update-notification PWA-installasjon og service worker-oppdatering Utility
Små hjelpere app-budget-card, app-help-link, app-copy-btn, direktiver og pipes Budsjettkort, dokumentasjonslenker, kopier-knapp, auto-resize, required-markering, formatering Budsjett og hjelp, Kopier-knapp, Utility
Tilgang og lisens app-module-gate, *appModuleGate Vis innhold/side kun når modulen er lisensiert, ellers kontaktboks eller skjul stille Modul-sperre

Detaljsider

Importmønstre

Komponentene brukes på tre ulike måter:

Mønster Bruk
Eksportert fra SharedModule Feature-moduler som allerede importerer SharedModule, kan bruke komponenten uten ekstra import. Dette gjelder blant annet smart-grid, schedule-grid, budget-card og help-link.
Standalone-komponent Standalone-sider importerer komponentklassen direkte i imports. Dette gjelder blant annet cron-builder, tag-selector, mention-input, document-card og menu-route-picker.
Modulkomponent app-ai-chat ligger i AiChatModule og brukes via den modulen.

Sjekk alltid komponentens TypeScript-fil før ny bruk. Flere komponenter er standalone selv om de ligger i en delt mappe.

Standard for nye sider

Når flere komponenter dokumenteres senere, bruk samme struktur:

  1. Hva komponenten gjør og når den skal brukes.
  2. Kilde- og importpunkt.
  3. Feature-tabell.
  4. Brukseksempel.
  5. Viktigste inputs, outputs og modelltyper.
  6. Template-/modal-/service-mønstre der det er relevant.
  7. Ytelse, tilgjengelighet og mobiloppførsel.
  8. Kjente fallgruver.
  9. Verifiseringspunkter før komponenten tas i bruk på en ny side.

For brukerrettede tekster i eksempelkode skal i18n-nøkler brukes, ikke hardkodet norsk tekst.