Adding a new page

Back-end

To initiate a page, a back-end developer needs to modify corresponding route function to include page_init endpoint and define the said action.

Then in order to load the SPA take the following steps:

1. find the .py file that corresponds to the page we want to initiate (e.g. endpoints/reports/suppressions.py)
2. search for the @app.route controller with URL corresponding to the page you want to initiate e.g. @app.route('/reports/archive/', methods = ['GET', 'POST']) Inside it locate the gen_template function and within it change the path to the page template to 'vue-app/index.html'

Example commit: adding "Reports/Summary" page

Another example commit with an error and additional fix

Front-end

1. Add page component into src/views folder:
   1. create a folder corresponding to the navigation group and page name in the views folder e.g. reports/archives
   2. inside it create index.js containing the line
      export { default } from './PageName.vue';
      e.g. export { default } from './Archives.vue';
   3. add the base page template file, e.g. vue-app\src\views\reports\archives\Archives.vue
2. Add path to router which will render the added component eg. const ReportsArchivesAsync = () => import('@/views/reports/archives');
3. Also in the router create a named path object inside the routes array e.g

{
    path: 'archive',
    name: 'ReportsArchives',
    component: ReportsArchivesAsync,
    meta: {
      title: 'Archives',
    },
},

4. navigate to vue-app\src\api\methods.js, duplicate and adjust an export async function in order to initiate a page with the provided data, e.g.

export async function getReportsArchivesInitialData() {
    return camelCaseKeys((await client.get(INITIAL_DATA.endpoints.archives, {
      params: {
        action: 'page-init',
      },
    })).data.results);
}

5.Build the app (more details in this doc), commit changes upstream, test.