This vue app is meant to showcase a small help desk ticket interface, and also serves as my first project using vue and boostrap.
There are two primary ways to run this application on your machine.
If you have Docker installed, execute this command in the root of the project directory:
docker compose up -d
The app will be available at localhost:8080
To close the container:
docker compose down
Note: this command will not delete the docker image.
To run the app locally, first install the necessary node packages:
npm install
then:
npm run dev
The url will be displayed in the terminal.
For a minimized build, run:
npm run build
Click the 'Open a Ticket' button open a new ticket form.
Select a category and type, and input the subject and description. Multiple types may be selected. Click on a selected type to remove it.
Optionally, lick 'Attach File' to simulate adding a relevant file. You may delete attached files individually.
Click 'Cancel' or the close button to clear and close the form.
Click 'Submit' to save the ticket. If required fields are empty, the form will visually indicate empty fields. If the form is properly filled, it will close. The ticket will then be added to the 'My Tickets' section.
Clicking on a ticket in the list wille expand the view, and it's details will be visible. Clicking 'Delete Ticket' will permanently remove it.
- Category: Dropdown menu with Hardware, Software, Network, In-Processing
- Type: Dropdown menu dependent on category. Must be able to select multiple types. Hardware - Laptop, Mobile, Peripherals, Desk Phone, Printers, Other Software - Teams/Zoom, Mobile Blackbury, Adobe, Outlook, Microsoft Office, Other Network - Network Access, Connectivity, VPN, Drivers, Other In-Processing: Access Badge, Common Access Card (CAC), SIPR, Trello
- Subject: An input field.
- Description: An input field.
- Ticket Files & Documents: A button that adds a pretend file named 'nameoffileattached.ext' with a file number after it so that when you press it multiple times, it will increment. i.e. 'nameoffileattached1.ext.'
- Cancel: A button that should clear the form completely.
- Submit: A button that will submit all the informtaion and return to a ticket details view.
- Have a frontpage that displays all your 'Tickets' and a button that sends you to the form. a. Have the ability to view the 'Ticket Details' of each displayed ticket by clicking on that ticket. b. Have a method to return to the main page when filling a form. c. Have the ability to delete a ticket.
- Incorporate some type of visual validation to the form fields.
- Add the trach-can icon and ability to delete pretend files.
- Add a ticket view to the Admins tab, so that a feaux admin can 'accept,' 'reject,' or 'complete' tickets submited by users.
- Add a confirmation modal when users click 'Delete Ticket.'
- Add a login-authentication system so that multiple users can submit tickets, view only their own tickets, and admins can view which user submitted which ticket.
- Add a database for the tickets and a RESTful API.
- If you switch category after selecting a type, it will remove the selected types. However, the dropdown maintains the position of the last type choice. This leads to incorrect form validation. I have tried several ways around this, but I believe the biggest issue is with my implementation of the dropdown.