InternalSearchPlugin Demo

Detta demo visar InternalSearchPlugin som ger intern sökfunktionalitet med autocomplete för organisationer, ärenden och områden.

Funktioner

Debounced search (300ms fördröjning)
Autocomplete dropdown med grupperade resultat
Senaste sökningar sparade i localStorage
GUID direct lookup (36 tecken)
Tangentbordsnavigering (piltangenter, Enter, Escape)
Söker i tre kategorier: Ärenden, Organisationer, Områden
Responsiv design (dold på mobila enheter)

API Integration

Pluginen integrerar med följande API-endpoints:

/search/orgs?q={query} - Sök organisationer
/search/assignments?q={query} - Sök ärenden
/search/areas?query={query} - Sök områden
/organisations/{guid} - GUID lookup för organisationer
/assignments/{guid} - GUID lookup för ärenden
/offices/{guid} - GUID lookup för kontor

Användning

          // Inkludera ../navbar/navbar.js i din HTML
<script src="../navbar/navbar.js"></script>

<script>
  // Skapa en funktion som hämtar auth token
  function getAuthToken() {
    // Returnera auth token från din session/cookie
    return localStorage.getItem('authToken');
  }

  // Aktivera internal search via PublicAPI
  SweNavbar.enableInternalSearch({
    apiBaseUrl: 'https://api.swedac.se',
    apiKey: 'your-api-key', // Valfritt
    getAuthToken: getAuthToken,
    placeholder: 'Sök organisation, ärende, område...',
    minQueryLength: 2,
    debounceDelay: 300,
    maxSuggestions: 5,
  });
</script>
        

Alternativ användning (TypeScript/ES6):

            import { NavbarCore, InternalSearchPlugin } from '@swedac/navbar';

const navbar = new NavbarCore({
  parentText: 'Swedac',
  parentUrl: '/',
});

navbar.plugins.register(new InternalSearchPlugin({
  apiBaseUrl: 'https://api.swedac.se',
  getAuthToken: () => localStorage.getItem('authToken'),
}));

navbar.mount();
          

Konfiguration

InternalSearchPlugin accepterar följande konfigurationsalternativ:

apiBaseUrl (required): Bas-URL för API:et
apiKey (optional): API-nyckel för autentisering
getAuthToken (optional): Funktion som returnerar auth token
placeholder (optional): Placeholder-text för sökfältet
minQueryLength (optional): Minsta antal tecken för sökning (default: 2)
debounceDelay (optional): Fördröjning i ms (default: 300)
maxSuggestions (optional): Max antal senaste sökningar (default: 5)

Tangentbordsnavigering

Pil Ner - Navigera till nästa resultat
Pil Upp - Navigera till föregående resultat
Enter - Välj markerat resultat (eller första om inget är markerat)
Escape - Stäng dropdown

OBS: Detta är en demo-sida. För att pluginen ska fungera fullt ut behöver den konfigureras med riktiga API-endpoints och autentisering. I denna demo visas endast UI:et och grundläggande funktionalitet.

API Toggle & Environment Indicator

Detta demo stöder växling mellan mockad data och riktigt API genom URL-parametrar:

?useMock=true (eller utelämnad) - Använder mockad data för offline-demo
?useMock=false - Anropar riktigt api.swedac.se för CORS och integrationstestning

Tips: Använd ?useMock=false för att testa CORS-konfiguration och API-integration mot produktionsmiljön.

EnvironmentIndicatorPlugin visar automatiskt en indikator i övre högra hörnet när applikationen körs mot testmiljö eller använder mockad data. Indikatorn visas endast för API:er som inte är produktionsmiljöer (api.swedac.se eller api2int.swedac.se).