Code Review Frontend

[wasdJens]

This issue collects my feedback for the frontend implementations.

Use higher-order-components for methods that need to run everytime

Example: At the moment in all views we have the implementation changeLanguage that is basically copied - over to each view. Instad of copy pasting the same methods use a higher order component that is wrapped around all views that handle methods and other stuff like this.

What I mean: At the moment on each route (e.g. / or /cms) the main component gets rendered. Instead create a new component that is wrapped around before each view (Like App.vue does) with shared logic (like language switching) inside. The component tree should look like this afterwards:

<App>
 <wrapper>
  <router-view-content />
  </wrapper> 
</App>

This behavior can be applied to also stuff found inside created hooks that is "duplicate"

Dont use window.location to navigate if no token is found

Example: Currently the following line of code is provided

    if (!window.localStorage.getItem('mnb_atok')) { window.location = '/login' }

While it is working and not wrong we should rather utilize the features that vue-router provides to us. Instead of using the window.<> to navigate use vue-router to navigate.

Possible Change: At the moment we are always checking in the created hook for the token. Instead we can create a router guard with vue-router that gets applied to all routes that are protected before they are visited.

• https://router.vuejs.org/guide/advanced/navigation-guards.html

Use children routes instead of switching between views with a large v-if (related #256)

Example: The following code-line can be considered as bad practice:

        <!-- Show user list if selected -->
        <div
          v-if="selected === 'user list'"
        >
          <UserList />
        </div>

        <!-- Show user creation if selected -->
        <div
          v-if="selected === 'new user'"
        >
          <AddUser />
        </div>

Instead split each content in multiple components and provide use a router-view to switch between them. This also allows us to link to possible admin pages via an url.

What I mean: Utilize components and create one parent view and multiple smaller views that include the content on the page

<cms>
 <users>
   <user-list />
   <user-create />
 </users>

<permissions />

<notice boards>
  <general />
  <something else />
</notice-boards>
</cms>

and so on