<commit_before># User Admin UX Gameplan

## Goals & Milestones

#### Create an Angular 2 Workflow & Build Process with Angular CLI

Create a development worfklow and build process with the (latest) version of Angular CLI. The latest version of this tool allows for easy creation of boilerplate Angular code along with the associated tests. 

Updating some key configs from the base package will allow us to control the build process and still provide us with some real time feedback while developing.

###### Key Configurations to ease development

In the past, developing with Angular CLI required us to jump through certain hoops and add extra steps to fit this into our development workflow. The latest version of Angular CLI allows us to configure some things that make local development much easier.

###### Update the API Proxy to Point to local development

Create a development config file to allow the application to proxy all API calls to the local server. This will allow us to develop local URLs in place of the production or staging URLs while using the 'development' server. 

A small update the the `package.json` file will allow this to affect changes in the development and testing workflows.

More information can be found here: https://github.com/angular/angular-cli#proxy-to-backend

###### Update the destination for the production build

We will also need to edit the destination for the production assets after the build step. Simply editing the `angular-cli.json` file's entry for `outDir` will allow us to set the Erdiko Theme path from which the assets will be served.

#### New Erdiko Theme

Create a new theme to provide structure from which to bootstrap an Angular 2 Application for the User Admin. This theme will be minimal but will include the required JS & CSS assets to bootstrap the Angular application.

This theme will require some additional routes to use the already built user authentication, as well as a route to host the User Admin SPA.

 * Estimate: 1h
    
#### Angular 2 SPA

Admin only, no front / end user facing routes yet. Use Angular2 CLI to create base app. 
#### Angular Routes & Components
  
##### User List - `/users/`

Display a sortable table showing a list of users, based on the provided filters. 

Route will require a 'default' user list resolved following a successful request to the `Get Users` AJAX endpoint.

* Route
* Users Component
  * Hosts the child components listed below
  * Button to Create a New User
    * Link to User Create route
* Users List Component
  * Sortable Table showing a row for each user record
  * Link to Edit User Record
  * Link to Delete a User Record
  * Search Input box
  * Pagination links
* Estimate: 13h 


![Users List Wireframe](https://raw.githubusercontent.com/Erdiko/user-admin/master/docs/users_list.png =450x)

        
##### User Create / Edit / Delete - `/user/:id`

Editable form interface to edit an existing user for a provided ID or create a new one if lacking a user ID.

* Route
* User Edit Form Component<commit_msg>one more time, with feeling<commit_after># User Admin UX Gameplan

## Goals & Milestones

#### Create an Angular 2 Workflow & Build Process with Angular CLI

Create a development worfklow and build process with the (latest) version of Angular CLI. The latest version of this tool allows for easy creation of boilerplate Angular code along with the associated tests. 

Updating some key configs from the base package will allow us to control the build process and still provide us with some real time feedback while developing.

###### Key Configurations to ease development

In the past, developing with Angular CLI required us to jump through certain hoops and add extra steps to fit this into our development workflow. The latest version of Angular CLI allows us to configure some things that make local development much easier.

###### Update the API Proxy to Point to local development

Create a development config file to allow the application to proxy all API calls to the local server. This will allow us to develop local URLs in place of the production or staging URLs while using the 'development' server. 

A small update the the `package.json` file will allow this to affect changes in the development and testing workflows.

More information can be found here: https://github.com/angular/angular-cli#proxy-to-backend

###### Update the destination for the production build

We will also need to edit the destination for the production assets after the build step. Simply editing the `angular-cli.json` file's entry for `outDir` will allow us to set the Erdiko Theme path from which the assets will be served.

#### New Erdiko Theme

Create a new theme to provide structure from which to bootstrap an Angular 2 Application for the User Admin. This theme will be minimal but will include the required JS & CSS assets to bootstrap the Angular application.

This theme will require some additional routes to use the already built user authentication, as well as a route to host the User Admin SPA.

 * Estimate: 1h
    
#### Angular 2 SPA

Admin only, no front / end user facing routes yet. Use Angular2 CLI to create base app. 
#### Angular Routes & Components
  
##### User List - `/users/`

Display a sortable table showing a list of users, based on the provided filters. 

Route will require a 'default' user list resolved following a successful request to the `Get Users` AJAX endpoint.

* Route
* Users Component
  * Hosts the child components listed below
  * Button to Create a New User
    * Link to User Create route
* Users List Component
  * Sortable Table showing a row for each user record
  * Link to Edit User Record
  * Link to Delete a User Record
  * Search Input box
  * Pagination links
* Estimate: 13h 


![Users List Wireframe](https://raw.githubusercontent.com/Erdiko/user-admin/master/docs/user_list.png =450x)

        
##### User Create / Edit / Delete - `/user/:id`

Editable form interface to edit an existing user for a provided ID or create a new one if lacking a user ID.

* Route
* User Edit Form Component
{'fraction_non_alphanumeric': 0.050814010853478045, 'fraction_numerical': 0.00328893274132544, 'mean_word_length': 4.01401483924155, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3603022', 'n_tokens_mistral': 1532, 'n_tokens_neox': 1429, 'n_words': 915}