---
title: SPIKE-Sub-categories
description: Tech survey of requirements for adding sub-category capability
tags: ToolWatch
---
## Overview Thoughts
-In order to solve the big bang issue, perhaps we could put the sub-category feature behind a feature flag temporarily to implement it iteratively with the customer who requested the feature. I'm not sure how much that would complicate the UI changes though.

-Where category is displayed, it would be preferred to show the full category 'path' (this can be returned from backend):
* Equipment-> Excavation-> Loaders-> 4WD
* Hand Tools-> Drills-> Cordless
* Hand Tools-> Grinders-> Corded

-Where category is reported in a graph, it might be useful to aggregate under top level categories. Alternatively, we could develop new graphs to group categories in some way.

-Do we want sub-categories for template categories? My assumption is no.

# UX

## Proposed New Vue Components

### CategorySelector
Tree based selector component with expandable leaves.

-Features:
* The top level category in component can be any category not just root/parentless categories (for showing a category and it's sub-categories).
* Two selection modes, single selection (no check boxes) and multiple selection (check boxes)
* Three category type modes, Tools, Materials, and both. Both would not be needed if we change the behavior of the screens indicated below with [1] to not allow both types and instead require the user to choose either Tools or Materials.
* 'OnSelect' event handled by hosting component to facilitate expected behavior for screen.

## Proposed Screen Changes

#### Portals:
* B - Back Office
* W - Warehouse/Yard
* J - Job Site

| Portal | Screen | Work Needed |
| ------ | ----- | ---- |
| B/W/J | [Catalog](https://cloud.toolwatch.com/catalog/) | [1] Replace bottom of page with a **CategorySelector** (single mode). OnSelect -> show search results. |
| B/W/J | [Catalog Search Results](https://cloud.toolwatch.com/catalog/search?assetKind=A&category=Drills) | Replace middle pane with **CategorySelector** (multiple mode). OnSelect -> update search results. |
| B/W/J | [Item Browser](https://cloud.toolwatch.com/items/) | Replace middle pane with **CategorySelector** (multiple mode). OnSelect -> update search results. |
| B/W/J | [Low Level Browser](https://cloud.toolwatch.com/low-level/) | Category is displayed. |
| W | [Retired Tools](https://cloud.toolwatch.com/retired-tools/) | Category is displayed. |
| W | [Service & Calibration->Dashboard](https://cloud.toolwatch.com/service/dashboard) | Work order counts are reported by Category in the *Overdue Workorders by Category* graph|
| J | [Requisitions & Returns->Requisitions Home](https://cloud.toolwatch.com/requisitions/) | [1] Replace bottom of page with a **CategorySelector** (single mode). OnSelect -> show search results. |
| J | [Requisitions & Returns->Requisitions Home -> Search results](https://cloud.toolwatch.com/requisitions/search?assetKind=A&category=Drills) | Replace middle pane with **CategorySelector** (multiple mode). OnSelect -> update search results. |
| J | [Requisitions & Returns->Returns Home](https://cloud.toolwatch.com/returns/) | [1] Replace bottom of page with a **CategorySelector** (single mode). OnSelect -> show search results. |
| J | [Requisitions & Returns->Returns Home -> Search results](https://cloud.toolwatch.com/returns/search?assetKind=T&category=cc3f5331-0263-451c-867a-a6cc30050e9c) | Replace middle pane with **CategorySelector** (multiple mode). OnSelect -> update search results. Category is displayed. |
| J | [Scheduling->Scheduling Home](https://cloud.toolwatch.com/reservations/) | [1] Replace bottom of page with a **CategorySelector** (single mode). OnSelect -> show search results. |
| J | [Scheduling->Scheduling Home -> Search results](https://cloud.toolwatch.com/requisitions/search?assetKind=A&category=Drills) | Replace middle pane with **CategorySelector** (multiple mode). OnSelect -> update search results. |
| W | [Pick Tickets & Transfers->Dashboard](https://cloud.toolwatch.com/tickets/dashboard) | Transfer counts are reported by Category in the *Number of Transfers by Category* graph|
| B | [Administration->Lists->Tools & Materials->Categories](https://cloud.toolwatch.com/administration/lists/categories) | This screen is already a UX nightmare :/ It needs to be redesigned to reflect the hierarchical nature of categories with add, edit, visibility and deleted functionality integrated rather than modal dialogs for visibility/creation. |

# Backend/Services

| Portal | Screen | API Changes |
| -------- | -------- | -------- |
| B | [Administration->Lists->Tools & Materials->Categories](https://cloud.toolwatch.com/administration/lists/categories) | Instead of using the generic ListService API, we will need to call the CategoriesService with modified or new method(s) with parameters for topLevelCategory, includeSubCategories, and other category specific needs.|

## New API endpoints

###