# Systems 📇

This view is made up using two files `Systems.vue` and `SystemOverviewTable.vue`

{% hint style="info" %}
<http://localhost:8080/#/systems>
{% endhint %}

## System Overview Table (Systems.vue)

This view provides the general information about the Systems, such as the System Name, Number of Tasks, Number of Findings within each System, Progress of the System and Created date when the System was created. The System Overview Table page is composed of two files, `Systems.vue` and `SystemOverviewTable.vue`

| System Name | No. of Tasks | No. of Findings | Progress |
| ----------- | ------------ | --------------- | -------- |
| Foo         | 2            | 3               | 100%     |
| Other       | 1            | 5               | 60%      |

### Computed Values

| Name            | Description                                                      |
| --------------- | ---------------------------------------------------------------- |
| trashObjectName | Returns the name of the name of the system which will be deleted |

### Methods

| Name                 | Parameter | Description                                                                                                                                 |
| -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| data()               |           | Is the private memory of each component where you can store any variables you need.                                                         |
| created()            |           | Called synchronously after the instance is created.                                                                                         |
| getSystemData()      |           | Load all systems and renders it to the table                                                                                                |
| getEventData()       |           | Gets the current event from the  database.                                                                                                  |
| deleteSystem()       |           | Removes the selected system from the database                                                                                               |
| trashModal()         |           | Activates the trash model, which then displays a confirmation.                                                                              |
| displayError()       | e         | Handles displaying the error with its proper message. Where 'e' is an object that contains the message (e.message)                          |
| removeRow()          |           | Handles removing the instance of the item from the table.                                                                                   |
| removeFromEvent()    |           | Removes the selected system from the current event.                                                                                         |
| trashConfirm()       |           | Gets called when user confirms action from snackbar, which then removes system from database and from table.                                |
| trashCancel()        |           | Gets called when user cancel action from snackbar and table information stays the same.                                                     |
| logAction()          |           | Logs user's action after archiving a system by storing it into the database.                                                                |
| removeItemAction()   |           | Checks if user is on the System page or Archive page and returns 'System  Archive' or 'Delete System' as a string.                          |
| iconType()           |           | This is used to display an icon depending if user is on the Systems page or Archive page                                                    |
| setRemoveItemColor() |           | This is used to display the color of either delete system or archive system button depending if user is on the Systems page or Archive page |

## System.vue

#### Methods:

| Name             | Description                                                           |
| ---------------- | --------------------------------------------------------------------- |
| eventHelp()      | Displays an alert with helpful information about the systems artifact |
| onSearchToggle() | Loads results after a search term is entered                          |
