Display App in Dashboard

Adding the App to the Database

In order to display the app on the dashboard's main page, we need first to add it to the database. We have provided you with a script that allows you to perform this process in an easy fashion.

First step is to pull the script from the original repository (since most likely it is not available on your fork).

Open git bash or your preferred terminal, navigate to your backend repository and type the following commands:

git remote add upstream https://github.com/MedTech-CS321/smuportal-backend.git

git fetch upstream

git checkout --track upstream/app-creator

Finally, run npm run createApp and fill in the prompt with information related to your app, in this, we have done the following,

npm run createApp

> smuportal@0.0.0 createApp ~/smuportal-backend
> node models/appCreator.js

Database connection established!
Enter Application's Name: Book Management System
Enter Application's Description: Managing Lists of Books
Enter Feature n1 | (Leave Blank to Finish): Get Books
Enter Feature n2 | (Leave Blank to Finish): Add Books
Enter Feature n3 | (Leave Blank to Finish): Delete Books
Enter Feature n4 | (Leave Blank to Finish):
Choose Roles ( Current Roles: student,professor): professor,student
Book Management System Has Been Successfully Created!
Database connection closed

You can now safely run `npm start`

Caution: Do not forget to revert back to your master branch after creating your app.

Displaying the App on the Frontend Side

For this part you need to navigate to the frontend directory.

To display the app on the dashboard's main page, we need add an entry to the config.json file. You can find the file at src/assets/apps/

{
    "appName": "Book Management System",
    "iconUrl": "book.png",
    "path": "/apps/bms"
}

This is how theconfig.json file should be.

src/assets/apps/config.json

[
  {
    "appName": "Logistics Reservation",
    "iconUrl": "logistics-reservation.png",
    "path": "/apps/logistics"
  },
  {
    "appName": "Job App",
    "iconUrl": "job-applications.png",
    "path": "/apps/jobs"
  },
  {
    "appName": "Document and Services",
    "iconUrl": "docs.png",
    "path": "/apps/docs"
  },
  {
    "appName": "Admin Dashboard",
    "iconUrl": "users.png",
    "path": "/apps/admin"
  },
  {
    "appName": "Book Management System",
    "iconUrl": "book.png",
    "path": "/apps/bms"
  }
]

Finally, our app is displayed in the dashboard and the icon is clickable.