MainLayout.vue, IndexPage.vue, UnosOpremePage.vue, PregledOpremePage.vue i OpcijePage.vue: Dokumentacija BolnicaIT aplikacije s Quasar okruženjem

Dokumentacija BolnicaIT aplikacije

MainLayout.vue

MainLayout.vue je glavni layout aplikacije BolnicaIT izrađen u Quasar okruženju s q-layout view-om koji organizira:

• q-header s q-toolbar za hamburger meni (q-btn @click), naslov, verziju 1.0 i q-select za jezik vezan na locale i localeOptions (hr-HR/en-US)
• q-drawer vezan na leftDrawerOpen koji prikazuje q-list s EssentialLink komponentama iz linksList (computed niz s prevedenim naslovima i ikonama za Home, Unos opreme, Pregled opreme, Opcije i KBC Rijeka)
• q-page-container s router-view koji prikazuje sadržaj svih stranica

Script dio organizira logiku internacionalizacije (useI18n), persistenciju jezika (onMounted učitava iz localStorage, watch(locale) sprema u localStorage), navigaciju (toggleLeftDrawer()) i reaktivne linkove linksList ovisne o t().

Jezik se mijenja globalno bez ponovnog učitavanja stranice, drawer se otvara i zatvara na klik, a izbornik se automatski ažurira na promjenu jezika.

IndexPage.vue

IndexPage.vue je uvodna dobrodošlica BolnicaIT aplikacije s centriranim logom BolnicaIT_logo.png i i18n tekstovima welcomeTitle i appDescription.

View koristi q-page s flex layoutom za responzivno centriranje, img s klasom logo te tekstove za naslov i opis. Script dio je prazan jer je stranica potpuno statička i oslanja se na globalno i18n stanje za prijevode te Quasar temu za stilove. Pozadina logo-bg definira plavi linear-gradient s min-height: 100vh za punoekranski efekt.

UnosOpremePage.vue

UnosOpremePage.vue je CRUD stranica za unos nove IT opreme s responzivnom karticom q-card flat centriranom u row justify-center.

View koristi q-form s @submit="onSubmit" za validaciju i sadrži:

• q-select za lokaciju (lokacijeOptions, required)
• q-input polja za inventurni_broj (required), klinika (required, minLength), mtRacunaloModel, snRacunaloModel (required), mtMonitorModel, snMonitorModel
• q-btn gumbe za spremanje i povratak

Script organizira API komunikaciju (axios.get /api/lokacije u onMounted za lokacijeOptions), computed modele za uppercase vrijednosti (mtRacunaloModel, snRacunaloModel itd.), validaciju (required, minLength), onSubmit s formRef.validate(), axios.post /api/oprema (JSON body s lokacija_id), resetiranje forme te Quasar notifikacije ($q.notify positive/negative) za uspjeh i grešku.

Stilovi logo-bg (plavi gradijent) i glass-card daju glassmorphism efekt.

PregledOpremePage.vue

PregledOpremePage.vue je CRUD stranica za pregled i upravljanje IT opremom s dvije glassmorphism kartice q-card:

• prva za filtere (q-select lokacija clearable, q-input klinika clearable, q-btn pretraga i očisti)
• druga za tablicu q-table s kolonama (inventurni_broj, lokacija, klinika, mt_racunalo itd.), brojem rezultata {{ oprema.length }} i gumbom za dodavanje to="/unos-opreme"

View prikazuje akcije za uređivanje i brisanje u body-cell-akcije template-u (q-btn warning za edit, negative za delete). Persistentni q-dialog editDialog služi za uređivanje s q-input poljima (inventurni_broj required, klinika, mt/sn modeli) i gumbima saveEditFn i cancel.

Script organizira API komunikaciju:

• ucitajOpremu (fetch /api/oprema s query parametrima za filtere)
• pretraziOpremu i ocistiFiltere
• editirajOpremu (popunjava editForm)
• saveEditFn (PUT /api/oprema/${id} JSON, stanje saving)
• confirmDeleteFn ($q.dialog potvrda i DELETE /api/oprema/${id})

Uključeni su još computed kolone, uppercase modeli (mtRacunaloModel itd.), onMounted inicijalizacija i Quasar notifikacije za sve operacije. Stilovi logo-bg (plavi gradijent) i glass-card (backdrop blur, rgba) osiguravaju konzistentan dizajn.

OpcijePage.vue

OpcijePage.vue je stranica postavki BolnicaIT aplikacije s dvije glassmorphism kartice q-card centrirane u row justify-center.

• Prva kartica sadrži q-radio gumbe za odabir jezika vezane na language (hr-HR, en-US), naslov i gumb saveLanguage.
• Druga kartica prikazuje trenutni jezik u q-chip.

Script sinkronizira language ref s globalnim locale (useI18n). onMounted učitava jezik iz localStorage ili postavlja 'hr-HR', saveLanguage sprema u localStorage, ažurira locale.value za globalnu promjenu i prikazuje $q.notify positive obavijest.