Specifikation

Start / Jönköping_Kommun_-_Gränssnitt / Specifikation

Specifikation: Jönköping Kommun - Gränssnitt

Variant

Vklass V2 (vklassv2).

Roller

  • Administratör (admin.html) - organisationsadministratör som hanterar två separata logotyper.
  • Rektor (rektor.html) - MainWeb-representant som ser gränssnittslogotypen när organisationen är entydig.
  • Lärare (teacher.html) - MainWeb-representant som ser gränssnittslogotypen på desktop/tablet och fallback när villkor saknas.
  • Elev (student.html) - MainWeb-representant som ser telefonundantag och fallback.
  • Vårdnadshavare (custodian.html) - CustodianWeb-representant som ser gränssnittslogotyp på desktop/tablet och fallback vid flera organisationer.

Funktionalitet i scope

  1. Administratören ser och ändrar två logotyper: Gränssnittslogotyp och Dokumentlogotyp.
  2. Dokumentlogotypen återanvänder org_{customerOrganisationUID}.png och customerOrganisation.HasLogo.
  3. Gränssnittslogotypen har separat lagringsnyckel och skriver inte över dokumentlogotypen.
  4. Båda logotyperna sparas till Azure Blob i mockupens demonstrerade framtida flöde.
  5. Dokumentlogotyp som bara finns på disk visas som migrerad/kopierad till Blob utan att diskfilen tas bort.
  6. AdminWeb visar hjälptexter, preview, validering, crop-/uppladdningsdialoger och auditstatus.
  7. MainWeb/CustodianWeb visar gränssnittslogotyp på desktop/tablet när sessionen pekar på exakt en organisation med gränssnittslogotyp.
  8. Fallback till Vklass-ordmärket visas när organisationen saknas, är flera, eller saknar gränssnittslogotyp.
  9. Telefonlayout visar inte organisationens gränssnittslogotyp.
  10. AdminWeb/APLWeb visas inte som konsumenter av gränssnittslogotypen.

Användningsfall (UC)

UC-01: Öppna logotypsidan i AdminWeb

  • Aktör: Administratör.
  • Förutsättning: Aktören är organisationsadministratör för aktuell organisation.
  • Flöde:
    1. Administratören öppnar AdminWeb och navigerar till organisationsinställningar > Logotyper.
    2. Sidan visar organisationens namn, status för lagring och två separata logotypsektioner.
    3. Dokumentlogotypens status visar om en disk-till-Blob-kopiering har skett.
  • Resultat: Administratören kan skilja mellan gränssnittslogotyp och dokumentlogotyp.
  • Acceptanskriterier:
    • Sidan visar separata sektioner för Gränssnittslogotyp och Dokumentlogotyp.
    • Dokumentlogotypens sektion nämner org_{customerOrganisationUID}.png och att diskfil inte tas bort.
    • Hjälptexter beskriver var respektive logotyp används.

UC-02: Ändra Gränssnittslogotyp

  • Aktör: Administratör.
  • Förutsättning: Logotypsidan är öppen.
  • Flöde:
    1. Administratören väljer "Ändra gränssnittslogotyp".
    2. En dialog visar filuppladdning, krav på PNG/JPG, crop ratio 4:1 och slutstorlek.
    3. Vid felaktig filtyp, tom fil, för liten upplösning eller ogiltig crop visas valideringsfel utan interna sökvägar.
    4. När värdena är giltiga sparas logotypen i separat gränssnittskontrakt.
  • Resultat: Gränssnittslogotypen uppdateras utan att dokumentlogotypen påverkas.
  • Acceptanskriterier:
    • Dialogen använder V2-dialogmönster och är dold på sidladdning.
    • Gränssnittslogotypens hjälptext anger desktop/tablet, inte mobilvy, PNG/JPG, 4:1 crop och exempelstorlek 240 x 60 px.
    • Separat lagringsnyckel visas som exempel, inte org_{customerOrganisationUID}.png.
    • Valideringssummary och fältfel visas för invalid state.
    • Auditstatus visar gränssnittslogotypbyte.

UC-03: Ändra Dokumentlogotyp

  • Aktör: Administratör.
  • Förutsättning: Logotypsidan är öppen.
  • Flöde:
    1. Administratören väljer "Ändra dokumentlogotyp".
    2. Dialogen beskriver att dokumentlogotypen används i dokument/V1-kontraktet.
    3. Sparflödet visar att customerOrganisation.HasLogo sätts efter lyckad sparning.
  • Resultat: Dokumentlogotypen uppdateras oberoende av gränssnittslogotypen.
  • Acceptanskriterier:
    • Dokumentlogotypens dialog använder dokumentlogotypens befintliga kontrakt och inte gränssnittslogotypens 4:1-krav.
    • UI-copy gör tydligt att dokumentlogotypen inte optimeras för V2-headern.
    • Auditstatus visar dokumentlogotypbyte.

UC-04: Visa gränssnittslogotyp i MainWeb/CustodianWeb

  • Aktör: Rektor, lärare, elev och vårdnadshavare.
  • Förutsättning: Sessionen har exakt en organisation med gränssnittslogotyp.
  • Flöde:
    1. Användaren öppnar V2 på desktop/tablet.
    2. App-layouten visar Vklass-symbolen och organisationens gränssnittslogotyp i stället för Vklass-ordmärket.
  • Resultat: Organisationens gränssnittslogotyp visas för rätt konsumentappar.
  • Acceptanskriterier:
    • Role views visar en desktop/tablet-preview där Vklass-symbolen finns kvar och organisationens gränssnittslogotyp ersätter ordmärket.
    • Previewn visas för MainWeb- och CustodianWeb-roller, inte som AdminWeb chrome.

UC-05: Fallback när organisation inte är entydig eller saknar gränssnittslogotyp

  • Aktör: Rektor, lärare, elev och vårdnadshavare.
  • Förutsättning: Sessionen har flera organisationer, ingen organisation eller organisation utan gränssnittslogotyp.
  • Flöde:
    1. Användaren öppnar V2.
    2. App-layouten använder befintligt Vklass-ordmärke.
  • Resultat: Ingen felaktig tenant-logotyp visas.
  • Acceptanskriterier:
    • Role views visar fallback-stater med "Flera organisationer" och "Saknar gränssnittslogotyp".
    • Copy förklarar tenant boundary: logotypdata hämtas bara från sessionens organisationer.

UC-06: Telefonlayout döljer gränssnittslogotyp

  • Aktör: Elev och vårdnadshavare, samt övriga V2-konsumenter på telefon.
  • Förutsättning: Organisationen har gränssnittslogotyp.
  • Flöde:
    1. Användaren öppnar telefonlayout.
    2. Organisationens gränssnittslogotyp visas inte.
  • Resultat: Mobilvy behåller befintligt beteende utan separat organisationslogotyp.
  • Acceptanskriterier:
    • Mockupen visar en phone-preview där organisationens gränssnittslogotyp är dold.
    • Befintlig Vklass-symbol får vara kvar där layouten redan visar symbol.

UC-07: Audit och historik

  • Aktör: Administratör.
  • Förutsättning: Minst en logotypändring har skett.
  • Flöde:
    1. Administratören läser auditlistan.
    2. Listan skiljer mellan gränssnittslogotypbyte, dokumentlogotypbyte och dokumentlogotypmigrering.
  • Resultat: Administratören kan verifiera vad som ändrades utan att hemliga sökvägar exponeras.
  • Acceptanskriterier:
    • Auditlistan har minst 10 rader.
    • Rader visar kategori, tid, aktör och resultat.
    • Inga fulla diskvägar, SAS-länkar eller filinnehåll visas.

Datamodell

  • OrganisationLogoConfiguration
    • organisationId (number)
    • organisationName (string)
    • organisationUid (string)
    • hasDocumentLogo (boolean)
    • documentLogoKey (string, org_{customerOrganisationUID}.png)
    • documentLogoMigratedToBlob (boolean)
    • hasInterfaceLogo (boolean)
    • interfaceLogoKey (string, e.g. org_{customerOrganisationUID}_interface.png)
    • interfaceLogoFinalSize (string, e.g. 240 x 60 px)
    • interfaceLogoRatio (string, 4:1)
  • LogoAuditEntry
    • auditId (string)
    • logoType (interface | document | migration)
    • changedAt (ISO date/time)
    • actorUserID (string)
    • result (string)
    • safeDescription (string)
  • LogoConsumerScenario
    • role (rektor | teacher | student | custodian)
    • app (MainWeb | CustodianWeb)
    • sessionOrganisationCount (number)
    • hasInterfaceLogo (boolean)
    • viewport (desktop | tablet | phone)
    • expectedLogoMode (interface-logo | vklass-wordmark | symbol-only)
  • Admin: AdminWeb > Inställningar > Organisation > Logotyper.
  • Rektor/lärare/elev: MainWeb role view; mockup page is reached from index.html.
  • Vårdnadshavare: CustodianWeb role view; mockup page is reached from index.html.

Tillgänglighetskontrakt

  • Dialogmodaler i flödet: #interface-logo-dialog, #document-logo-dialog, #not-implemented-dialog. They must use shared window.vklassDialogManager.openDialog(id, opener), role="dialog", aria-modal="true", aria-labelledby, focus trap, Escape close and opener focus return.
  • Tabs/sub-tabs i flödet: None required. Role views use cards and state previews, not tab widgets.
  • Filter/sök i flödet: Audit table has status buttons with aria-pressed and a polite result-count live region.
  • Toolbar flyouts: Teacher/student/custodian/rektor toolbar flyouts must sync aria-expanded; admin drawer uses admin-app-nav--open and admin-menu-overlay--visible.
  • Form validation: Both logo dialogs demonstrate invalid submit with validation summary, inline field errors, aria-describedby, aria-invalid only when invalid, and actionable Swedish error text.
  • Skip-link: Role pages use <a class="skip-link" href="#main-menu"> and <a class="skip-link" href="#main-content">; main id="main-content" tabindex="-1".
  • Keyboard test scope: Open/close both dialogs, invalid submit, audit filter buttons, toolbar flyouts and admin drawer.
  • Mobile safe area: Dialog bodies and footers use 100dvh and env(safe-area-inset-bottom, 0px).

Bilder/sketcher

No screenshots are present. See 1/epic-files/CLASSIFICATION.md for the markdown-only reference classification.

Öppna frågor

  • Ska delete/removal av någon logotyp ingå i en senare version?
  • Vilken publik Blob URL-/cache-bustingmodell ska produktionen använda?
  • Vilka exakta historiska begränsningar gäller för dokumentlogotypen?