HAM Admin

Explain the structure and how to modify or add page.

Introduction

HAM or Happenn Admin Management or just Happenn Admin is a web application for handling data relate to most of Happenn Product. The system using Vue.js as a static HTML while using History and .htaccess for handling the routing that happen inside the website. The application using 2 other applications which are Happenn API and Happenn IO.

Directory Structure

• assets

  • fonts

  • images

  • styles

    • components - Contains specific element styling such as <button>, <input>, etc.

    • mixins - Contains scss mixins to @include in styling as a function in coding.

    • slim - is an admin template framework. url
    • animation.scss - Include the transition styling use for <transition> of Vue.js

    • style.scss - Main custom styling file for modifying or adding new style. Any new styling that is not relate to specific component will be put here.

    • variables.scss - A global variable that can be used in any scss file.

• components - Contain Vue.js components which can be import into any vue file. Mostly contains common code like <button> that will most of the time use the same code and the same class or only has slight different in class or text which can be dynamic by pass the data vie props. However, some file also here just to reduce the amount of code in a single file or only share between a few file such as in modules folder.

• i18n - Contain language string. Currently is not in used, but was once plan to be used it as a multilingual application.

• layouts - Contain a layout of the page which commonly share across the page such as <header> or <footer>.

• public - Contain the files in which will be put at root of the directory when build (dist) the project.

• stores - Contain all Vuex relate files.

  • modules - Contain all the modules of Vuex.

  • actions.js - For root action of Vuex which let the other modules to be able to call for.

  • index.js

  • mutations.js - For root mutation of Vuex.

  • state.js - For root state of Vuex.

• views - Contain all the view of the projects in Vue file.

• css.js - Contain import of all the css/scss use in the project. Newer project no longer has this file, instead, will import the file inside main scss file.

• global-components.js - For calling Vue components without import in the Vue file. Only for mainly use component across the file.

• index.js - For bootstrap or any code that need to be executed before Vue takes place.

• index.pug - Base layout HTML

• routes.js - All the routes of the project.

• utils.js - Function for using across the project.

Routing

locate: src/routes.js

Dynamic Import on Routing

Compare to other projects, the routing of HAM is a bit different in a way of calling the view.

Normal

import ViewIndex from '@views/Index'

export default [
  {
    path: ``,
    component: ViewIndex
  }
]

HAM

export default [
  {
    path: ``,
    componen: () => import(`@views/Index`)
  }
]

The reason for using import as a function is way to tell webpack to build this a dynamic import. This will make the view file split from the main js file when build and will be called only when need.

Adding New Page

1. Create a new Vue file at /views in any folder. This is just to group up all the view together.

2. Add code for what the page should look like.

3. Add a view Vue file to route on /src/routes.js