Root Comp (app.vue)

Root Comp (app.vue)

1. Components declared in app.vue

   • <Hoofdmenu> from main-menu.vue
     • app.js
     • import <menubar> from /menubar/menubar.vue
       • main-menu.js
       • import menubar.vue
         • menubar.js
       • globalTypes
         • in menu-bar.vue import all * functions as globalTypes from mutation-types.js

2. /startpagina.html

   • startpagina.js First page after automatic login for DKO students
   • import globalTypes
     • in startpagina.js&nbsp; import all * functions as globalTypes from mutation-types.js&nbsp;
     • why import this which is already in main.js import * as globalTypes from 'wisaapp/src/store/global/mutation-types.js'
   • import as Types from mutation-types
     • why?
     • Mutations
       • ZET_INSCHRIJVINGSGEGEVENS] (state, waarden)
         • chekcs if waarden obj is undefined&nbsp;
         • import class GlobalHelperService()
           • datumNaarDate(datum)
             • Split a string into an array of substrings usign /: 'datum is the string brithday of a child Also checks that is and int (11/02/1988)
             • returns new DATE() object: date of birth of child
               • EX: Thu Jun 24 1999 00:00:00 GMT+0200 (Romance Daylight Time)
             • isMinderjarig(date of birthd child , todays date)
               • berekenLeeftijd()
                 • returns age of student&nbsp;
               • returns true if child is > 18
               • returns false if student is <18
                 • STATE
                   • ADDS TRUE OR FALSE TO&nbsp; state.isMinderjarig
   • import ValidationService
     • why?
     • isRijksregisternummer (n)
       • to ---isFormValid()
   • computed: functions
     • is_naamgebruiker () --incomplete
   • methods
     • isFormValid() ?--
       • user types name, birthdya etcc...and checks for sintax correctly. References&nbsp; isRijksregisternummer (n) in Validation.service.js
       • yes
         • naarPersonalia () "Buttom"Verder . checking for validatoin
           • changes the path to&nbsp; this.$router.push('/personalia')
           • /personalia.html
             • methods:
               • gemeenteGeselecteerd (val)
               • gemeenteLeegmaken ()
               • terugNaarStartpagina ()
               • naarPersonaliaOuders ()
             • mounted:
               • commits a mutation and passes an object to $store
                 • to&nbsp;globalTypes.SET_ITEMS_TITELBALK
             • computed:
               • gemeenten ()
               • is_naamgebruiker ()
           • commits a change in state thru mutation
             • waarden is the object (student registration from startpagina) passing as a payload from naarPersonalia()
       • no (error) showFormErrorMessage ()
   • mounted
     • commits a mutation and passes an object to $store
       • this.$store.commit(globalTypes.SET_ITEMS_TITELBALK, { links: [], titel: 'Startpagina', rechts: []} )

3. global components declared in main.js

   • import globalTypes
     • in main.js import all * functions as globalTypes from mutation-types.js
   • import VueSweetAlert
   • import Vuex
   • import VueAxios
   • Axios
   • import store
   • import router
   • import vSelect

4. computed: functions

   • Computed Properties tl;dr –&nbsp;Use a computed property when you want to mutate a property that is dependent upon another property being changed. Computed properties are typically&nbsp;dependent on other data properties. Any change to the dependent properties will trigger the logic for the computed property. Computed properties are cached based on their dependencies so they will only rerun if a dependency changes. (For example, a computed property that returns a new Date() will never rerun because the logic will never run more than 1 time) Computed properties are getters by default but a setter function can be set if needed to achieve similar functionality.
   • isScreenLocked ()
     • goes to the central Store and returns Screenlocked
       • Screenlocked()
   • lockedScreenClassIfApplied ()
   • mainMenuLinks ()
   • showMenu ()

5. <router-view>