IS442 x Quantum Project by Team 8

Link to Github Repository

https://github.com/dracolim/IS442-Quantum.git

Group Memebers

• Lim Bei Ling Cheryl
• Faisal Samudra
• Cher Kheem Thong
• Wisely Kwek
• Liao JiaXiong
• Natalie Chan
• FuWei Tian

Type of Users

1. Vendor [ link ]
2. Admin [ link ]
3. Approver [ link ]

Setting Up The Project (Spring Boot Application)

1. Ensure that you have WAMP / MAMP installed and running
2. Go to backend/src/main/resources/application.properties and edit the credentials for spring.datasource.username and spring.datasource.password to your own credentials for your WAMP/MAMP server
3. Create a database in the WAMP/MAMP server with the name qlvmsdb
4. Once created, run the build.bat file in the terminal. The build.bat file will download apache-maven-3.9.1-bin.zip and set it to your local maven environment variable. The mvn spring-boot:run command will also be executed and the Spring Boot application should load all the necessary data into the database.

Accessing the Front-End Pages

• The front-end pages are located in the frontend folder, explanation for the respective pages are shown below:
• To use the pages, firstly Login through the Login page (login_home.html) with the following correct email and password
  • For Vendor:
    • Email: vendor.3@gmail.com
    • Password: 123456
  • For Admin::
    • Email: wejustclimb@gmail.com
    • Password: 123456
  • For Approver::
    • Email: lancelim@gmail.com
    • Password: 123456

Login Page

login_home.html

• Users can login to their respective accounts with their email and password. There are total 3 user types (Approver, Admin, Vendor).
• This login page will idenitfy which users belongs to which user type, and bring them to their respective homepage.
  

Vendor

Homepage

Vendor_workflow.html

• This is the Vendor's homepage
• It displays all the pending workflows (Workflows that have formStatuses "REQUESTED") that requires Vendors to fill in the forms.
• Vendors can either click on the table row or the icon in the forms column to go to the respective workflow page.
  

Select individual workflow

Steps to select individual workflow

1. From Vendor_workflow.html, Vendors can either click on the table row or the icon in the forms column.
2. After selecting, it will bring the vendors to Vendor_form.html where it will display all the forms that belongs to that particular workflow
   
3. Form Status: "COMPLETED" and "INCOMPLETE"
   • By Default, if Vendor have not submitted form, the staus will be "INCOMPLETE"
   • If Vendor Submits form, the status will be changed from "INCOMPLETE" to "COMPLETED"
   • If Admin requests Vendor to submit/update form again, the status will be changed to "INCOMPLETE"
     

Select individual form

Steps to select individual form

1. From Vendor_workflow.html, Vendors can either click on the table row or the icon in the forms column.
2. After selecting, it will bring the vendors to Vendor_form.html where it will display all the forms that belongs to that particular workflow
   
3. From Vendor_form.html, select any forms that is displayed. It will lead to the Vendor_form_sequence.html where all the questions from the form will be shown
   

Admin

Homepage (Pending Workflows Tab)

Admin_home.html

• This is the Admin's homepage
• It displays all the pending workflows (workflow with status: IN PROGRESS) that requires the Admins to validate the form after Vendor's submission
• Admins can click on the table row to go to the respective pending workflows page Admin_individual_pendingwf.html
  

Select individual pending workflow

Steps to select individual workflow

1. From Admin_home.html, Admins can click on the table row
2. After selecting, it will bring the Admins to Admin_individual_pendingwf.html where it will display all the forms that belong to that pending workflow
   

Validate Forms

Steps to validate form

1. From Admin_home.html, Admins can click on the table row
2. After selecting, it will bring the Admins to Admin_individual_pendingwf.html where it will display all the forms that belong to that pending workflow
   
3. At Admin_individual_pendingwf.html, Admins can select "APPROVED" or "NOT APPROVED" from the dropdown menu in the Approval column.
   
   
4. Scenario 1: if Admins selects "APPROVED", the status (Status column) will change from "PENDING" to "VALIDATED".
   
   
5. Scenario 2: if Admins selects "NOT APPROVED", the status (Status column) will change from "PENDING" to "REQUESTED"
   
   

Admin Submit Forms

Steps to submit form

1. From Admin_home.html, Admins can click on the table row
2. After selecting, it will bring the Admins to Admin_individual_pendingwf.html where it will display all the forms that belong to that pending workflow
   
3. At Admin_individual_pendingwf.html, Admin can click on the table row to select the forms they want to view or submit
4. After selecting, it will bring the Admins to Admin_form_sequence.html where it will display all the questions and answers submitted
5. Admin can check the form as well as fill in the required questions (eg: Admin Evaluation) and submit form.
   

Workflows Tab

Admin_workflow.html

• This is the Admin's overview of all the existing workflows
• This page will show all the completed, in-progress and rejected workflows
• Admin can either check sequence, edit and delete workflows

Assign New Workflow

Steps to Assign New Workflow

1. At Admin_workflow.html, click on "Assign new workflow" button. A pop up will be shown on the screen.
2. Fill in the required details and submit
3. Once submitted, the new workflow will be shown on the table.
4. Error Handling:
   • Scenario 1: Empty Inputs

Check Sequence

Steps to Check Workflow Sequence

1. From Admin_workflow.html, Admin can either click on the table rows or the document icon in the "check sequence" column
2. It will lead to Admin_workflow_sequences.html, where it will show all the forms and it's statuses that belongs to that workflow
   

Edit Workflow

Steps to Edit Workflow

1. At Admin_workflow.html, click on the icon in the "Edit" column. A pop up will be shown on the screen.
2. Edit the required fields and submit
3. Once submitted, the workflow will be updated with the new details
4. Error Handling:
   • Scenario 1: Empty Inputs
     

Delete Workflow

Steps to Delete Workflow

1. At Admin_workflow.html, click on the icon in the "Delete" column.
2. After clicking, it will delete the workflow

Assign New Forms to Workflow

Steps to Assign New Forms to Workflow

1. From Admin_workflow.html, Admin can either click on the table rows or the document icon in the "check sequence" column
2. From Admin_workflow_sequences.html, click on "ASSIGN NEW FORMS" button, a pop up will be shown on the screen
3. Select on the forms, and click "Submit" button. The forms will then be added to the workflow.

Delete Forms from Workflow

Steps to Delete Form from Workflow

1. From Admin_workflow.html, Admin can either click on the table rows or the document icon in the "check sequence" column
2. At Admin_workflow_sequences.html, click on the icon in the "Delete" column.
3. After clicking, it will delete the form from workflow.

View Form

Steps to View Form

1. From Admin_workflow.html, Admin can either click on the table rows or the document icon in the "check sequence" column
2. At Admin_workflow_sequences.html, click on the any table rows.
3. It will lead to Admin_form_sequences2.html, where it will show all the questions and answers from the fomr
4. Admin CANNOT submit or edit form. If Admin would like to do so, they have to go to click on this link

Export Form

Steps to Export Form

1. From Admin_workflow.html, Admin can either click on the table rows or the document icon in the "check sequence" column
2. From Admin_workflow_sequences.html, click on the any table rows.
3. At Admin_form_sequences2.html, click on "EXPORT" button
4. The form PDF will be automatically downloaded to the desktop

Accounts Tab

Admin_accounts.html

• This is the Admin's view of the accounts page
• It displays all the accounts of all 3 types (Admin, Approver & Vendor) registered in the system.
• An Admin can create an account of any 1 of the 3 types by clicking either "CREATE VENDOR ACCOUNT", "CREATE APPROVER ACCOUNT" or "CREATE ADMIN ACCOUNT".
• An Admin can delete any existing accounts by clicking the delete button that is represented by a trash can icon.
• An Admin can update any existing accounts by clicking the update button that is represented by a document & pen icon.
  

Creating an Account

Steps to create a vendor account
For creating Admin & Approver accounts, click the appropriate "CREATE _____ ACCOUNT" under step 1 and follow the rest of the steps.

1. At Admin_accounts.html, Admins can click on "CREATE VENDOR ACCOUNT" located at the bottom right corner.
   
2. After clicking, a modal will appear that will allow the Admin to enter the necessary details to create the account.
   
3. After filling in the information, the Admin can click on the blue Save button that's located at the bottom of the modal.
   
4. If no fields are left empty and all fields are valid, the account is now successfully created.
   

Updating an Account

Steps to update an account
Example given is for updating Vendor account, but the steps apply to all 3 types of accounts

1. At Admin_accounts.html, under a particular account, Admins can click on the update button (represented by a document & pen icon) associated to the account to update account information.
   
2. After clicking, a modal will appear that will allow the Admin to edit the necessary details to update the account.
   
3. After filling in the information, the Admin can click on the blue Save button that's located at the bottom of the modal.
   
4. If no fields are left empty and all fields are valid, the account is now successfully updated.
   

Forms Tab

Admin_form.html

• This page shows all the forms that exists
• Admin can either view , edit or delete form
  

Delete Form

Steps to Delete Form

1. At Admin_form.html, click on the icon in "DELETE" column to delete form
2. After clicking, the form will be removed from the table

View Question Details

Steps to View Question Details

1. At Admin_form.html, either click on the icon in "FORM DOCUMENT" column or any table rows
2. It will lead to Admin_Individual_form.html, where all the questions details (Eg: Field Type, Field Name) will be shown

Create New Form

Steps to Create New Form

1. At Admin_form.html, click on "CREATE NEW FORM" button. A pop up will be shown on the screen
2. Fill in the Form Name field and click on the "Submit" button
3. Form will be created and added to the table

Edit Form Name

Steps to Edit Form Name

1. At Admin_form.html, either click on the icon in "FORM DOCUMENT" column or any table rows
2. It will lead to Admin_Individual_form.html, where all the questions details (Eg: Field Type, Field Name) will be shown
3. Click on the Input beside Form Name, and fill in the new form name. It will edit the form name accordingly
   

Edit Section Title, ID, Description

Steps to Edit Section Title, ID, Description

1. At Admin_form.html, either click on the icon in "FORM DOCUMENT" column or any table rows
2. It will lead to Admin_Individual_form.html, where all the questions details (Eg: Field Type, Field Name) will be shown
3. At Admin_Individual_form.html,
   • Section Title: Click on the Input from "SECTION TITLE" column and edit accordingly
   • Section Description: Click on the Input from "SECTION DESCRIPTION" column and edit accordingly
   • Section ID: Click on the dropdown and select the section Ids from "SECTION ID" column

Edit Field Name, Field Type, Input Options, Required

Steps to Edit Field Name, Field Type, Input Options, Required

1. At Admin_form.html, either click on the icon in "FORM DOCUMENT" column or any table rows
2. It will lead to Admin_Individual_form.html, where all the questions details (Eg: Field Type, Field Name) will be shown
3. At Admin_Individual_form.html,

• Field Name: Click on the Input from "FIELD NAME" column and edit accordingly
• Field Type: Click on the dropdown and select the field types
• Required: Click on the dropdown and select the option (True: it is required; False: It is not required)
• Input Options:
  • "Edit Options" will only appear if the field types are either Radio or Checkbox
  • To Edit the Options:
    1. Click on the "Edit Options"; A pop up will be shown on the screen
    2. Select the Number of Input Options
    3. Click on the "->"
    4. The options input will be shown; fill it in and click submit
    5. The new options will be shown in the "INPUT OPTIONS" column
    6. Error Handling:
       • Scenario 1: Input cannot be empty
       • Scenario 2: Input cannot be the same
    7. (EXTRA) if "others" is added into the Input Options, it will automatically create a "(Others) _[Field Name] " question and added to the section that belongs to that question.
       
       

Delete Field

Steps to Delete Field

1. At Admin_form.html, either click on the icon in "FORM DOCUMENT" column or any table rows
2. It will lead to Admin_Individual_form.html, where all the questions details (Eg: Field Type, Field Name) will be shown
3. At Admin_Individual_form.html, click on the icon in "DELETE" column to delete the field.

Create New Field/Question

Steps to Create New Field/Question

1. At Admin_form.html, either click on the icon in "FORM DOCUMENT" column or any table rows
2. It will lead to Admin_Individual_form.html, where all the questions details (Eg: Field Type, Field Name) will be shown
3. At Admin_Individual_form.html, click on "CREATE NEW FIELDS" button. A pop up will be shown
4. Admin can either add the new field to a existing section or to a new section.
   • If Admin wants to add new field to the new section, click on "Add New Sections" button. A New Section ID will automatically be assigned, and the Section Title and Description will be shown for Admin to fill in
     
   • If Admin wants to add new field to an existing section, click on "Add Existing Sections"
     
   • However, if there is no existing sections, the "Add to Existing Sections" button will be disabled.
5. Error Handling:
   • Scenario 1: Input cannot be empty
   • Scenario 2: Input cannot be the same
6. (EXTRA) if "others" is added as an Input Options, it will automatically create a "(Others) _[Field Name] " question and added to the section that belongs to that question.

View Form Format

Steps to View Form Format

1. At Admin_form.html, either click on the icon in "FORM DOCUMENT" column or any table rows
2. It will lead to Admin_Individual_form.html, where all the questions details (Eg: Field Type, Field Name) will be shown
3. At Admin_Individual_form.html, click on "VIEW FORM" button
4. It will lead to Admin_overview_form.html, where Admin can get an overview of how the form will look like

(EXTRA) Adjust Table Column Size

Steps to Adjust Table Column Size

1. At Admin_Individual_form.html, click and drag the lines in between the columns (applicable for table header and row 1 only)
2. Once it is dragged, the table column will change its size accordingly
   

Approver

Homepage (Validated Workflows Tab)

Approver_home.html

• This is the Approver's homepage
• It displays all the validated workflows (Form status is "VALIDATED") that requires the Approvers to validate the form after Admin Approval
• Approvers can click on the table row to go to the respective validated workflows page Approver_individual_pendingwf.html
  

Select individual pending workflow

Steps to select individual workflow

1. From Approver_home.html, Approvers can click on the table row
2. After selecting, it will bring the Approvers to Approver_individual_pendingwf.html where it will display all the forms that belong to that validated workflow
   

Validate Forms

Steps to validate form

1. From Approver_home.html, Approvers can click on the table row
2. After selecting, it will bring the Approvers to Approver_individual_pendingwf.html where it will display all the forms that belong to that validated workflow
   
3. At Approver_individual_pendingwf.html, Approvers can select "APPROVED" or "NOT APPROVED" from the dropdown menu in the Approval column.
   

4. **Scenario 1:** if Approvers selects "APPROVED", the status (Status column) will change from "VALIDATED" to "APPROVED"

5. **Scenario 2:** if Approvers selects "NOT APPROVED", the status (Status column) will change from "VALIDATED" to "REJECTED"

Approver Submit Forms

Steps to submit form

1. From Approver_home.html, Approvers can click on the table row
2. After selecting, it will bring the Approvers to Approver_individual_pendingwf.html where it will display all the forms that belong to that validated workflow
   
3. At Approver_individual_pendingwf.html, Approvers can click on the table row to select the forms they want to view or submit
4. After selecting, it lead to Approver_form_sequence.html where it will display all the questions and answers submitted
5. Approver can check the form as well as fill in the required questions (eg: Admin Evaluation) and submit form.
   

Workflows Tab

Apporver_workflow.html

• This is the Approver's overview of all the existing workflows
• This page will show all the completed, in-progress and rejected workflows
• Approver can either check sequence, edit and delete workflows

Assign New Workflow

Steps to Assign New Workflow

1. At Approver_workflow.html, click on "Assign new workflow" button. A pop up will be shown on the screen.
2. Fill in the required details and submit
3. Once submitted, the new workflow will be shown on the table.
4. Error Handling:
   • Scenario 1: Empty Inputs

Check Sequence

Steps to Check Workflow Sequence

1. From Approver_workflow.html, Approver can either click on the table rows or the document icon in the "check sequence" column
2. It will lead to Approver_workflow_sequences.html, where it will show all the forms and it's statuses that belongs to that workflow
   

Edit Workflow

Steps to Edit Workflow

1. At Approver_workflow.html, click on the icon in the "Edit" column. A pop up will be shown on the screen.
2. Edit the required fields and submit
3. Once submitted, the workflow will be updated with the new details
4. Error Handling:
   • Scenario 1: Empty Inputs

Delete Workflow

Steps to Delete Workflow

1. At Approver_workflow.html, click on the icon in the "Delete" column.
2. After clicking, it will delete the workflow

Assign New Forms to Workflow

Steps to Assign New Forms to Workflow

1. From Approver_workflow.html, Approver can either click on the table rows or the document icon in the "check sequence" column
2. From Approver_workflow_sequences.html, click on "ASSIGN NEW FORMS" button, a pop up will be shown on the screen
3. Select on the forms, and click "Submit" button. The forms will then be added to the workflow.

Delete Forms from Workflow

Steps to Delete Form from Workflow

1. From Approver_workflow.html, Approver can either click on the table rows or the document icon in the "check sequence" column
2. At Approver_workflow_sequences.html, click on the icon in the "Delete" column.
3. After clicking, it will delete the form from workflow.

View Form

Steps to View Form

1. From Approver_workflow.html, Approver can either click on the table rows or the document icon in the "check sequence" column
2. At Approver_workflow_sequences.html, click on the any table rows.
3. It will lead to Approver_form_sequences2.html, where it will show all the questions and answers from the fomr
4. Approver CANNOT submit or edit form. If Approver would like to do so, they have to go to click on this link

Export Form

Steps to Export Form

1. From Approver_workflow.html, Approver can either click on the table rows or the document icon in the "check sequence" column
2. At Approver_workflow_sequences.html, click on the any table rows.
3. At Approver_form_sequences2.html, click on "EXPORT" button
4. The form PDF will be automatically downloaded to the desktop
   

Accounts Tab

Approver_accounts.html

• This is the Approver's view of the accounts page
• It displays all the accounts of all 3 types (Admin, Approver & Vendor) registered in the system.
• An Approver can create an account of any 1 of the 3 types by clicking either "CREATE VENDOR ACCOUNT", "CREATE APPROVER ACCOUNT" or "CREATE ADMIN ACCOUNT".
• An Approver can delete any existing accounts by clicking the delete button that is represented by a trash can icon.
• An Approver can update any existing accounts by clicking the update button that is represented by a document & pen icon.
  

Creating an Account

Steps to create a vendor account
For creating Admin & Approver accounts, click the appropriate "CREATE _____ ACCOUNT" under step 1 and follow the rest of the steps.

1. At Approver_accounts.html, Approver can click on "CREATE VENDOR ACCOUNT" located at the bottom right corner.
   
2. After clicking, a modal will appear that will allow the Approver to enter the necessary details to create the account.
   
3. After filling in the information, the Approver can click on the blue Save button that's located at the bottom of the modal.
   
4. If no fields are left empty and all fields are valid, the account is now successfully created.
   

Updating an Account

Steps to update an account
Example given is for updating Vendor account, but the steps apply to all 3 types of accounts

1. At Approver_accounts.html, under a particular account, Approver can click on the update button (represented by a document & pen icon) associated to the account to update account information.
   
2. After clicking, a modal will appear that will allow the Approver to edit the necessary details to update the account.
   
3. After filling in the information, the Approver can click on the blue Save button that's located at the bottom of the modal.
   
4. If no fields are left empty and all fields are valid, the account is now successfully updated.
   

Forms Tab

Approver_form.html

• This page shows all the forms that exists
• Approver can either view , edit or delete form
  

Delete Form

Steps to Delete Form

1. At Approver_form.html, click on the icon in "DELETE" column to delete form
2. After clicking, the form will be removed from the table

View Question Details

Steps to View Question Details

1. At Approver_form.html, either click on the icon in "FORM DOCUMENT" column or any table rows
2. It will lead to Approver_Individual_form.html, where all the questions details (Eg: Field Type, Field Name) will be shown

Create New Form

Steps to Create New Form

1. At Approver_form.html, click on "CREATE NEW FORM" button. A pop up will be shown on the screen
2. Fill in the Form Name field and click on the "Submit" button
3. Form will be created and added to the table

Edit Form Name

Steps to Edit Form Name

1. At Approver_form.html, either click on the icon in "FORM DOCUMENT" column or any table rows
2. It will lead to Approver_individual_form.html, where all the questions details (Eg: Field Type, Field Name) will be shown
3. Click on the Input beside Form Name, and fill in the new form name. It will edit the form name accordingly
   

Edit Section Title, ID, Description

Steps to Edit Section Title, ID, Description

1. At Approver_form.html, either click on the icon in "FORM DOCUMENT" column or any table rows
2. It will lead to Approver_individual_form.html, where all the questions details (Eg: Field Type, Field Name) will be shown
3. At Approver_Individual_form.html,
   • Section Title: Click on the Input from "SECTION TITLE" column and edit accordingly
   • Section Description: Click on the Input from "SECTION DESCRIPTION" column and edit accordingly
   • Section ID: Click on the dropdown and select the section Ids from "SECTION ID" column

Edit Field Name, Field Type, Input Options, Required

Steps to Edit Field Name, Field Type, Input Options, Required

1. At Approver_form.html, either click on the icon in "FORM DOCUMENT" column or any table rows
2. It will lead to Approver_individual_form.html, where all the questions details (Eg: Field Type, Field Name) will be shown
3. At Approver_Individual_form.html,

• Field Name: Click on the Input from "FIELD NAME" column and edit accordingly
• Field Type: Click on the dropdown and select the field types
• Required: Click on the dropdown and select the option (True: it is required; False: It is not required)
• Input Options:
  • "Edit Options" will only appear if the field types are either Radio or Checkbox
  • To Edit the Options:
    1. Click on the "Edit Options"; A pop up will be shown on the screen
    2. Select the Number of Input Options
    3. Click on the "->"
    4. The options input will be shown; fill it in and click submit
    5. The new options will be shown in the "INPUT OPTIONS" column
    6. Error Handling:
       • Scenario 1: Input cannot be empty
       • Scenario 2: Input cannot be the same
    7. (EXTRA) if "others" is added into the Input Options, it will automatically create a "(Others) _[Field Name] " question and added to the section that belongs to that question.
       
       

Delete Field

Steps to Delete Field

1. At Approver_form.html, either click on the icon in "FORM DOCUMENT" column or any table rows
2. It will lead to Approver_Individual_form.html, where all the questions details (Eg: Field Type, Field Name) will be shown
3. At Approver_Individual_form.html, click on the icon in "DELETE" column to delete the field.

Create New Field/Question

Steps to Create New Field/Question

1. At Approver_form.html, either click on the icon in "FORM DOCUMENT" column or any table rows
2. It will lead to Approver_Individual_form.html, where all the questions details (Eg: Field Type, Field Name) will be shown
3. At Approver_Individual_form.html, click on "CREATE NEW FIELDS" button. A pop up will be shown
4. Approver can either add the new field to a existing section or to a new section.
   • If Approver wants to add new field to the new section, click on "Add New Sections" button. A New Section ID will automatically be assigned, and the Section Title and Description will be shown for Admin to fill in
     
   • If Approver wants to add new field to an existing section, click on "Add Existing Sections"
     
   • However, if there is no existing sections, the "Add to Existing Sections" button will be disabled.
5. Error Handling:
   • Scenario 1: Input cannot be empty
   • Scenario 2: Input cannot be the same
6. (EXTRA) if "others" is added as an Input Options, it will automatically create a "(Others) _[Field Name] " question and added to the section that belongs to that question.

View Form Format

Steps to View Form Format

1. At Approver_form.html, either click on the icon in "FORM DOCUMENT" column or any table rows
2. It will lead to Approver_Individual_form.html, where all the questions details (Eg: Field Type, Field Name) will be shown
3. At Approver_Individual_form.html, click on "VIEW FORM" button
4. It will lead to Approver_overview_form.html, where Approver can get an overview of how the form will look like
   

(EXTRA) Adjust Table Column Size

Steps to Adjust Table Column Size

1. At Approver_Individual_form.html, click and drag the lines in between the columns (applicable for table header and row 1 only)
2. Once it is dragged, the table column will change its size accordingly