Affilium ERP

Backend

Clone the repository with SSH https://git.mentortechies.com/affilium/affilium-erp-backend

Once the repo is cloned, please read README.md file at the root of the repo to setup the backend.

NestJS architecture

https://medium.com/geekculture/nest-js-architectural-pattern-controllers-providers-and-modules-406d9b192a3a

https://betterprogramming.pub/clean-node-js-architecture-with-nestjs-and-typescript-34b9398d790f

QuickBooks

We have the possibility to link the ERP to QuickBooks. For more information to use the QuickBooks API:

https://developer.intuit.com/app/developer/qbo/docs/api/accounting/all-entities/account

MikroORM

https://docs.nestjs.com/recipes/mikroorm

https://mikro-orm.io/

• Even if MikroORM uses the principle of entities objects, it's possible to make pure SQL queries. Here is an example:

  constructor(private readonly em: EntityManager) {}
  

  const queryResult = await this.em.execute(`
  SELECT * FROM accounting_table;
  `);
  

Frontend

Clone the repository with SSH https://git.mentortechies.com/affilium/affilium-erp-frontend

Once the repo is cloned, please read README.md file at the root of the repo to setup the frontend.

NuxtJS structure

There are 7 main sub directories in NuxtJs:

• Components: In this directory, we can store all the components that we are going to use in our main app. Unlike NextJs or ReactJs we don’t have to manually import the components in our pages in NuxtJs. NuxtJs will automatically scan and import your components into your pages.

• Pages: In this directory, we can create pages for our NuxtJs app. You just have to create a new .vue file inside the page’s directory to create a new page. After that NuxtJs will automatically scan the pages and create the router for the app. You can also create nested pages by creating new folders inside the pages directory.

• Assets: In this directory, we can store different types of assets that we are going to use in our app like images, fonts, audio files, logo, and styles.

• Note: If this directory does not exist in your app then you can create it by simply adding a folder with the name ‘assets’.

• Plugins: In this directory, we can add the plugins that we are going to use in our NuxtJs app. After installing the plugins we have to create a new file for that plugin inside our Plugins directory.

• Static: In this directory, we will store the static files that are not going to change like robot.txt, sitemaps, or favicons.

https://nuxtjs.org/

Vuetify

Vuetify is a UI framework for Vue.js to provide clean and reusable components (comparable to Bootstrap). It's simple to use, for more information: https://vuetifyjs.com/en/

To change padding and margin on layouts with Vuetify: https://vuetifyjs.com/en/styles/spacing/#how-it-works

Axios

To make multiple asynchronous HTTP requests with Axios in frontend, do not use async/await tags, because the await keyword ensure that the asynchronous data was received before continuing. Here is an example to follow:

this.$axios
    .$get("uri")
    .then((response) => {
        this.numberOfActiveInvestors = response;
    })
    .catch((error) => {
        console.log(error);
    });

Read HTTP errors when response type is a blob

When we want to download a report and an error occurs on the server side, no error message is displayed. This is because the received response is a blob, so we need to convert it to json to read the returned error message

Here is how to catch error when we download a file:

.catch(async (error) => {
            const response = await error.response.data.text();
            const jsonResponse = JSON.parse(response);

            self.overlay = false;
            self.$swal.fire({
              icon: "error",
              title: jsonResponse.message,
            });
          });