# e5core-angular-ui in 1.2.4
Copyright 2018 e5 Workflow Inc

This package contains a collection of UI components for use with the  e5 Workflow Inc e5 Anywhere system. This library requires the e5core-angular-services in order to communicate with the REST API. Please see [e5core-angular-services](https://www.npmjs.com/package/e5core-angular-services) for information and instructions on installing and configuring that library. 

## Quick Start

The following is a quick example of how to add the e5 Anywhere Components to your application.

1. Install the following NPM packages
```cmd
npm install --save e5core-angular-services e5core-angular-ui
npm install --save @angular/material @angular/cdk @angular/animations 
npm install --save highcharts highcharts-angular 
npm install --save ngx-material-timepicker
npm install --save priming primeicons
```
2. Setup the e5core-angular-services as described in [https://www.npmjs.com/package/e5core-angular-services]().
3. Add the following models to the ```app.module.ts```
```typescript
import { CommonModule } from '@angular/common';
import { E5coreAngularUiModule } from 'e5core-angular-ui' ;
import { BrowserAnimationsModule } from '@angular/platform-browser/animations' ;
```
4. Add the following linked to the ```index.html```.
```html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
```
5. Add the following to the ```styles.css```.
```css
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import "~primeicons/primeicons.css";
@import "~primeng/resources/themes/nova-light/theme.css";
@import "~primeng/resources/primeng.min.css";
```


## Work Related Items [Added 1.2.4]

The work related items component can be inserted into a page using the ```<e5core-ui-work-related-items>``` tag as shown below. The component requires a work item observable as a parameter and will respond to changes in the work item. By default the Category 1, Category 2, Category 3 and Status of the child work item are displayed. The number of items on page can be changed by the “items per page” drop down in the bottom right corner, and the sort order can be changes by clicking on the column heading.

```html
<e5core-ui-work-related-items [workItem$]='workItem$' [showDefinedChildrenOnly]="false" [findId]="3" [fieldsToShow]="workRelatedItemFields" (workItemSelectEvent)="onWorkItemSelect($event)" (attachmentSelectEvent)="onAttachmentSelect($event)" ></e5core-ui-work-related-items>
```

Component|Field|Description
-|-|-
e5core-ui-work-related-items|workItemSelectEvent|Method called when a child work item is selected. Event of type ```OpenWorkEvent``` is passed.
-|attachmentSelectEvent|Method called when a child work item's attachment button is clicked. Event of type ```ViewerDisplayEvent``` is passed.
-|categorisationChangeEvent|Method called when a category has been selected for new child creation. Event of type ```CategorizationChangeEvent``` is passed.
-|createChildWorkItemEvent|Method called when a new child work item has been created. Event of type ```OpenWorkEvent``` is passed.
-|workItem$|Observable so that the component knows which work item to display children for.
-|showDefinedChildrenOnly|Either display only the pre-configured WorkClass Children categories ```(true)``` as specified in the e5 Taxonomy or the entire category hierarchy ```(false)```.
-|findId|(optional) An e5 Find from which to select additional columns to display.
-|fieldsToShow|(optional) List of columns to show from the e5 Find specified above, and/or to override the column name given in the e5 Taxonomy with one that may be more relavant for this instance of the work related items component.
-|showCreateChildButton|(optional) Show the "Create" child work item button. Default ```(true)```
-|pagesizes|(optional) An array of page size numbers to use.
-|readonly|(optional) The component is in read only mode and the dropdowns are disabled.

Example code
```typescript
  //define columns to pick from the e5 Find and rename them if required
  workRelatedItemFields: KeyValuePair[] = [
    {key: "Category1Name", value: "Product"}, 
    {key: "Category2Name", value: "Business Unit"}, 
    {key: "Category3Name", value: "Category"}, 
    {key: "StatusName", value: "Status"},
    {key: "Reference", value: ""},
    {key: "HealthFundNumber", value: ""},
    {key: "CreationDate", value: ""},
    {key: "AssignedUser", value: ""}
  ];

  //Get the attachment viewer control to view attachments with
  @ViewChildren(E5coreUiWorkAttachmentViewerComponent)
  public attachmentViewerComponents: QueryList<E5coreUiWorkAttachmentViewerComponent>;
  
  //Handle the onAttachmentSelect method call by loading the attachments in the attachment viewer
  onAttachmentSelect(event) : void {
    const viewerModel = CreateBlankViewer() ;
    viewerModel.id = event.attachmentId;
    viewerModel.workId = event.workId;

    this.attachmentViewerComponents.forEach(element => {
      if (element.viewerType == "0")
        element.showViewer(viewerModel);
    });
  }
    
  //Handle the onWorkItemSelect method call
  onWorkItemSelect(event) {
    alert("You are opening : "+ event.workId);
  }
    
  //Handle the onCategorizationChange method call
  onCategorizationChange(event) {
    alert("You have selected the category : "+ event.category3Id);
  }
```


## Diarise Work [Added 1.2.2]
The work diarise component will diarise the work item associated with the current ```workItem$``` observable.
And also save a diarise reason text for the associated work item.
The ```[periodOptions]``` parameter is used to display diarise options to the end user.  
An example of intialising the ```[periodOptions]``` parameter is as follows 
```html
[periodOptions]='[
{ label:"Tomorrow", diariseUnit:"Days", value:"1" },
{ label:"2 Days",   diariseUnit:"Days", value:"2" },
{ label:"Next Week", diariseUnit:"Weeks", value:"1" }]'
```

In the above example :

```label``` is the text to be displayed to the end user such as ```1 Day``` ```2 Days``` ```3 Days```
```diariseUnit``` can have the following possible values :
```Days, Weeks, Months, Year, Tomorrow```
value is a number to be used in conjuction with the diariseUnit .
For eg: diariseUnits:"Days", value:"1" evaluates to diarise period of 1 day
        diariseUnits:"Weeks", value:"1" evaluates to diarise period of 1 week
        diariseUnits:"Months", value:"1" evaluates to diarise period of 1 month

The ```[displayedDate]``` parameter can be used to set pre-defined datetime value , it is set to the current date by default.

The ```[displayedDate]``` parameter can be used to set pre-defined datetime value , it is set to the current date by default.

The ```[diariseReasonPropertyId]``` parameter is the e5 Field Definition Id to the input type Field that will store the diarise reason for a work item. 

The ```[diariseReasonPlaceHolder]``` parameter can be used to set a placeholder text for the end user

The  ```[diariseReasonTextValue]``` parameter can be used to display the diarise reason for a work item that is in diarised state and is associated with the current ```workItem$``` observable. 

If the ```[showDiariseButton]``` parameter is set to true then the diarise button will be shown on the control, otherwise the ```DiariseWork()``` function can be used to diarise the work item.

If the ```[showDiariseTime]``` parameter is set to true then the Time picker control will be displayed else it will be hidden and the current time will be used when diarising the work item

The ```[showDiariseReasonDropdown]``` parameter can be set to false to hide a diarise reason dropdown.
If set to true the work diarise component then displays a dropdown populated with pre-configured diarise reasons.

The work diarise component emits the following events : 
```periodChange```     : emits a ```WorkDiariseEvent```, on selecting a Diarise option
```dateChange```       : emits a ```WorkDiariseEvent```, on selecting a date from the date picker 
```reasonTextChange``` : emits a ```WorkDiariseEvent```, when the Diarise Reason in the Diarise Reason text          area changes.
The ```(diariseClick)``` event is emitted when the Diarise button is clicked. 
It emits a ```WorkDiariseEvent``` event , that contains :
 the diariseOption (if selected), 
The selected diariseUntilDate, diariseHours, diariseMinutes, diariseReasonText and
 the source of the event value, in this case the value is "button".

```html
<e5core-ui-work-diarise #diarise
[workItem$]="workItem$"
[periodOptions]='[
{ label:"Tomorrow", diariseUnit:"Days", value:"1" },
{ label:"2 Days", diariseUnit:"Days", value:"2" },
{ label:"Next Week", diariseUnit:"Weeks", value:"1" }]' 
[displayedDate] ='displayedDate' 
[displayedTime] = 'displayedTime' 
[diariseReasonPropertyId] ='"AssessmentExplanationcode"' 
[diariseReasonPlaceHolder] ='"Enter the diarise reason here"' 
[diariseReasonTextValue]='diariseReasonTextValue' 
[showDiariseButton]=true 
[showDiariseTime]=true 
[showDiariseReasonDropdown] = false
(periodChange)='onDiarisePeriodOptionClick($event)' 
(diariseClick)='onDiariseButtonClick($event)' 
(dateChange)='onDateChange($event)' 
(reasonTextChange)='onDiariseReasonTextChange($event)'>
</e5core-ui-work-diarise>

```

A public method  ```DiariseWorkItem(workDiariseEvent:WorkDiariseEvent):void```
that can be used to diarise an associated work item if the developer wants to implement their own diarise event or use the component as part of a larger transaction.

```typescript
@ViewChild("diarise") diarise!:E5coreUiWorkDiariseComponent 
diariseData:WorkDiariseEvent ;
onDiariseReasonTextChange(diariseInfo:WorkDiariseEvent) { 
    this.diariseData = diariseInfo
}
onMyDiarise() {
    this.diarise.DiariseWorkItem(this.diariseData) ;
}
```

In the module definition you will have to add the following cod.
```typescript
import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';
...
@NgModule({
    imports: [
        NgxMaterialTimepickerModule.forRoot()
    ]
})
```


# SLA Monitor and find results (added 1.2.1)
An SLA monitor can be added to the page using the ```e5core-ui-monitor-sla``` directive. The SLA monitor emits a ```(categoryChange)``` event when drilling down into a lover level of the taxonomy and a ```(slaSelect)``` when an area of the SLA monitor is selected. These events can be linked to a ```e5core-ui-search-result``` directive using the code below to display the work items in the selected categorization and SLA status.

```html
<e5core-ui-monitor-sla 
    [slaInDays]="true" 
    (slaSelect)="onSlaSelect($event)" 
    (categoryChange)="onCategoryChange($event)">
</e5core-ui-monitor-sla>
<e5core-ui-search-results #searchResults 
    [includeSla]='true' 
    [searchDefinitionId]="1"
    (open)="onOpen($event)">
</e5core-ui-search-results>
```
Us the following code link the SLA monitor the a ```e5core-ui-search-result``` directive.

```typescript
@ViewChild("searchResults") searchResultComponent!: E5coreUiSearchResultsComponent ;
onSlaSelect($event:MonitorSlaSelectEvent) {
    let query = CreateSlaQuery.fromMonitorSlaSelectEvent($event) ;
    console.log(query) ;
    this.searchResultComponent.search(query) ;
}

onCategoryChange($event:MonitorSlaChangeEvent) {
    let query = CreateSlaQuery.fromMonitorSlaChangeEvent($event) ;
    console.log(query) ;
    this.searchResultComponent.search(query) ;
}

onOpen($event) {
    var id = $event.Id ;
    this.router.navigate(['/work', id]); 
}
```


# Breaking Changes in 1.2.0
As part of release 1.2.0 release there are couple of breaking changes, that are designed to make the UI componets more consistent and easier to use.
1. The WorkItemModel "id" field has been renamed to "workId" or type string containing a GUID.
2. The ```FindResultsModel``` has been removed from the ```e5core-search-results``` and the communication between the components has been chnaged to use function calls instead of observables. See [below](#SearchComponent).
3. The ```e5core-search-results``` now has a ```[autoSearch]``` directive that controlls if the search is performed automatcially when the component is displayed.
3. The search components ```searchId``` directive has been changes to ```searchDefinitionId```.
4. The ```e5core-search-form``` and ```e5core-search-results``` components have been updated to use the standard angular data functions. The code below should be added to the ```app.module.ts``` in order to change the data format. The components now required the "moment" packages.

```
npm install --save moment @angular/material-moment-adapter
``` 
in ```app.module.ts```
```typescript
import { MAT_DATE_LOCALE, DateAdapter, MAT_DATE_FORMATS } from '@angular/material';
import { MAT_MOMENT_DATE_FORMATS, MomentDateAdapter } from '@angular/material-moment-adapter'
import { registerLocaleData } from '@angular/common';
import localeAu from '@angular/common/locales/en-AU';
registerLocaleData(localeAu, 'en-AU');

@NgModule({
    ...
    providers: [
        { provide: LOCALE_ID, useValue: "en-AU" },
        {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
        {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS}
    ]
})
```

## Conversation viewer [Added 1.1.10]
The conversation viewer component is used as a place holder for a conversation view either inline on the page when ```[behaviourType]="1"``` or as a popup when ```[behaviourType]="0"```. The component can be placed anywhere on the page and is activated by calling the ```showViewer()``` function on the component.

```html
<e5core-ui-conversation-viewer [behaviourType]="1" ></e5core-ui-conversation-viewer>
<button (click)="openConversationViewer()">Open</button>
```

The view can be opened by getting the component object view ```ViewChild()``` and then called the  ```showViewer()``` function and passing in a ```ViewerModel``` with the id of the corresponding work item set.

```typescript
@ViewChild(E5coreUiConversationViewerComponent) conversationView !: E5coreUiConversationViewerComponent;
openConversationViewer() {
    let vm = new ViewerModel() ;
    vm.id = this.id ;
    this.conversationView.showViewer(vm)
}
```

## File Upload [Added 1.1.10]
The file upload component is used to add attachments to a work item. The component required a ```workItem$$``` observable so that it knows which work item to attach the files to. The ```fileUpload$``` is used to notify any other components on the page (e.g. the ```e5core-ui-work-attachment-viewer``` component) that an upload event has occured and the the corresponding component should be updated.

The observables to the componment can be initialized using the following code. Note that the component can share a ```workItem$``` with other components on the page.

```html
<e5core-ui-file-upload [workItem$]="workItem$" (fileUpload$)="fileUpload$" ></e5core-ui-file-upload>
```

Component|Field|Description
-|-|-
e5core-ui-file-upload|uploadEvent|Method called when a new attachment has been uploaded and attached to the work item. Event of type ```WorkAttachmentAddEvent``` is passed.
-|uploadToUrl|(optional) The Url to send the upload file contents to. Default behaviour will upload to the e5 Anywhere api.
-|acceptedFileExtensions|(optional)A comma concatnated list of file extensions that are allowed to be uplaoded. Default allowed extensions are ".pdf,.doc,.docx,.text,.txt,.jpg,.jpeg,.tif,.tiff,.png,.gif,.xls,.xslx,.ppt,.pptx,.vsd,.vsdx"
-|maxFileSize|(optional) The maximum file size that will be uploaded. Default is 20971520 bytes (~20MB)

```typescript
this.workItem$ = new BehaviorSubject<WorkItemModel>(CreateBlankWorkItem()) ;
this.fileUpload$ = new BehaviorSubject<FileUploadModel>(CreateBlankFileUpload()) ;
```

## Generate Document [Added 1.1.10]
The generate document component is used to automatically create documents and attach them to the current work item. The component can be used standalone, in which can the current can be shown and initiated it by the user or the document generation can be externaly triggered using the ```generateDocument()``` function. 

```html
<e5core-ui-generate-document 
    [workItem$]='workItem$' 
    [fileUpload$]="fileUpload$" 
    [showGenerateButton]="true" 
    [readonly]='readonly'></e5core-ui-generate-document>
```

```typescript
@ViewChild(E5coreUiGenerateDocumentComponent) generateDocument !: E5coreUiGenerateDocumentComponent;
onGenerateDocument() {
    this.generateDocument.onGenerateDocument(null) ;
}
```

## Assign Work To User [Added 1.1.10]
The assign user component will assign the work item associated with the current ```workItem$``` observable to a user depending on the work item state and the users profiling. If the ```[showAssignButton]``` parameter is defined then the assign button will be shown on the control, otherwise the ```assignUser()``` function can be used to assign the work item.

```html
<e5core-ui-work-assign-user 
    [workItem$]="workItem$" 
    [showAssignButton]="true"></e5core-ui-work-assign-user>
```

To manually assign the work item call the ```assignUser()``` function on the component.
```typescript
@ViewChild(E5coreUiAssignUserComponent) assignUser !: E5coreUiAssignUserComponent;
onAssignUser() {
    this.assignUser.assignUser(null) ;
}
```

## Attachments [Added 1.1.10]
The attachment viewer grid component lists all the attachments corresponding to the work item in the current ```workItem$``` observable. A common ```fileUpload$``` observable (i.e. the same one used with the ```e5core-ui-file-upload``` component) is used to notify the component that there may be a new attachment and the list should be updated. 

```html
<e5core-ui-work-attachments 
    [workItem$]="workItem$" 
    [fileUpload$]="fileUpload$"></e5core-ui-work-attachments>
```

## Attachment Viewer [Added 1.1.10]
The attachment viewer component is used as a place holder for a attachment view, either inline on the page when ```[behaviourType]="1"``` or as a popup when ```[behaviourType]="0"```. The component can be placed anywhere on the page and is activated by calling the ```showViewer()``` function on the component.

```html
<e5core-ui-work-attachment-viewer 
    [viewerType]="0" 
    [viewerBehaviourType]="0" 
    [popupWindowFeatures]="width=500"
    [readonly]='false'
    (viewerDisplayedEvent)="viewerDisplayedEvent($event)"></e5core-ui-work-attachment-viewer>
<button (click)="openAttachmentViewer()">Open</button>
```
```typescript
@ViewChild(E5coreUiWorkAttachmentViewerComponent) attachmentViewer !: E5coreUiWorkAttachmentViewerComponent;
openAttacmentViewer(event:ViewerDisplayEvent) {
    const viewerModel = CreateBlankViewer() ;
    viewerModel.id = event.attachmentId;
    viewerModel.workId = event.workId;
    this.attachmentViewer.showViewer(viewerModel) ;
}
```
Component|Field|Description
-|-|-
e5core-ui-work-attachment-viewer|viewerType| 0 = E5Sharepoint, 1 = WebUri
-|viewerBehaviourType|0 = Popup, 1 = Inline
-|viewerDisplayedEvent|Called when the attachment is opened passing a ViewerDisplayEvent.
-|readonly|Put the component in readonly mode.
-|popupWindowFeatures|(optional) Flags passed to the window.open() function.


The view can be opened by getting the component object view ```ViewChild()``` and then called the  ```showViewer()``` function and passing in a ```ViewerModel``` with the id of the corresponding work item set.

```typescript
@ViewChild(E5coreUiConversationViewerComponent) conversationView !: E5coreUiConversationViewerComponent;
openConversationViewer() {
    let vm = new ViewerModel() ;
    vm.id = this.id ;
    this.conversationView.showViewer(vm)
}
```

## Categorization (added 1.1.9, last updated in 1.2.3) [ Requires e5core-angular-services 1.1.9+]
The categorization component is used to selection a work item allocation (category 1 id, category 2 id and Category 3 id) using 3 drop down boxes. The component exposes a callback event  categorizationChange that provides a CategorizationChangeEvent object contains the category1Id, category2Id and category3Id or the selected categorization. 

```html
<e5core-ui-categorization 
    (categorizationChange)="onCategorizationChange($event)" 
    [hideToLevel]='0' 
    [categorization]='[2,2,3]' 
    [readonly]='true'
    [labels]='["My Business","My Product","My Category"]'
    ></e5core-ui-categorization>
```
Component|Field|Description
-|-|-
e5core-ui-categorization|categorizationChange|Method called when selection changes.
-|hideToLevel|(optional) Hide all the levels less of equal to this value. e.g. 1 will hide the business area.
-|categorization|(optional) The default display categorization.
-|readonly|(optional) The component is in read only mode and the dropdowns are disabled.
-|labels|(optional) Override the category labels

Example event code
```typescript
catOut = [undefined, undefined, undefined] ;
onCategorizationChange($event:CategorizationChangeEvent) {
    this.catOut = [$event.category1Id, $event.category2Id, $event.category3Id] ;
}
```
The optional ```[categorization]``` attribute can be used to set the initial selection in the component. The optional ```[hideToLevel]``` attribute can be used to hide the Business Area and/or the Product in the case where the component selection need to be restricted to a predefined area. If the ```[hideToLevel]``` attribute is used then the ```[categorization]``` __MUST__ contain a value default category 1, 2 and 3.

## Search (added in 1.1.8, Updated 1.2.0) <a name="SearchComponent"></a>

The search component can be inserted into a page using the &lt;e5core-ui-search-form&gt;, &lt;e5core-ui-search-menu&gt; and &lt;e5core-ui-search-results&gt;tag as shown below. The &lt;e5core-ui-search-form&gt; component requires a "searchDefinitionId" which can be determined with the e5 find class admin the e5 studio or the admin web part. The import parameters to the search and the columns displayed in the results are all defined in the corresponding find class.

As of version (1.2.0) the components no longer use observables to communicate and not use outputs and functions as shown below. 

```html
<e5core-ui-search-menu (search)="onSearch()" (reset)="onSearchReset()" (refresh)="onSearchRefresh()"></e5core-ui-search-menu>
<e5core-ui-search-form #searchForm
    [searchDefinitionId]="1"
    [searchForm$]="searchForm$"  
    (queryChange)="onQueryChange($event)" 
    [defaultValues]='{"Reference":"26"}'
    ></e5core-ui-search-form>
<e5core-ui-search-results #searchResults 
    [searchDefinitionId]="1" 
    [autoSearch]="false"
    [query]="{Expressions:[{'Field':'AssignedUser','Value':'me'}]}" 
    [includeSla]='true'  
    [includeNextDueTask]='true' 
    (open)="onOpen($event)" (link)="onLink($event)"
    ></e5core-ui-search-results> 
```

Component|Field|Description
-|-|-
e5core-ui-search-menu|(search)|(optional) event fired when search button pressed.
-|(reset)|(optional) event fired when search button pressed.
-|(refresh)|(optional) event fired when search button pressed.
e5core-ui-search-form | [searchDefinitionId] | (required) The e5 find class id.
-|[searchForm$]|The current state of the form.
-|[queryChange]|An event containing a DataSourceQuery, fired when the form data changes.
-|(defaultValues)|(optional) An default values for the search form.
e5core-ui-search-results | [searchDefinitionId] | (required) The e5 find class id.
-|[autoSearch]|(optional)Perform a default query when the component loads.
-|[query]|(optional)The default query used by the search results, needs to be of type DataSourceQuery.
-|[includeSla]|(Optional) Include SLA icon in results.
-|[includeNextDueTask]|(Optional) Include next due task information in results.
-|(open)|(optional) An event called when the user clicks on the folder icon. The contents of the row will be passed to the event.
-|(link)|(optiona) An event when the user clicks on a hypelink field in the results.


Example initilization code.
```typescript
const blankForm = CreateBlankSearchForm() ;
this.searchForm$ = new BehaviorSubject<SearchFormModel>(blankForm) ;
```

In order to implement interaction between the components, the following "boiler plate" code  should be used. This is provided in order to give the devloper more control over the components.
1. When the fields in the ```5core-ui-search-form``` change the component issues a ```(queryChange)``` event contains the new field values. These should be stored for later.
2. When then user clicks on the menu "search" button the ```e5core-ui-search-menu``` calls the ```onSearch()``` function.
3. The developers code then calls the ```search()``` function on the results component and passes in the query from the search form. 

The developer can implement their own menu using this method. If they want to manually inject a query into the search results, then constrcut a ```DataSourceQuery``` object and call ```search()```.

```typescript
  @ViewChild("searchResults") searchResultComponent!: E5coreUiSearchResultsComponent ;
  @ViewChild("searchForm") searchFormComponent!: E5coreUiSearchFormComponent ;
  searchForm$: BehaviorSubject<SearchFormModel> ;
  dsQuery : DataSourceQuery;

  // trigger by searchFormComponent when query changes
  onQueryChange(query:DataSourceQuery) {
    this.dsQuery = query ;
  }

  onSearch() {
    this.searchResultComponent.search(this.dsQuery) ;
  }

  onSearchReset() {
    this.dsQuery = null ;
    this.searchResultComponent.reset() ;
    this.searchFormComponent.reset() ;
  }

  onSearchRefresh() {
    this.searchResultComponent.refresh() ;
  }
```

The following is an example of an open event handler. When the user clicks on the open icon to at the left of the search results the ```e5core-ui-search-results``` fires a ```(open)``` event that can be handled by the parent application. The information passed to the handler are all the details in the row of the table, most importantly, the ```id``` of the work item.
```typescript
onOpen($event) {
    var id = $event.Id ;
    this.router.navigate(['/work', id]); 
}
```

## History (added in 1.1.7)
*This component requires that the e5 Anywhere API have the UI and OData routes enabled.*

The history component can be inserted into a page using the &lt;e5core-ui-work-history&gt; tag as shown below. The component requires a work item observable as a parameter and will respond to changes in the work item. The Date, User Event, Status and Details of the work item history are displayed, the number of items on page can be changed by the “items per page” drop down in the bottom right corner, and the sort order can be changes by clicking on the column heading.
```
<e5core-ui-work-history [workItem$]="workItem$"></e5core-ui-work-history>
```

# Components
## Casenotes (added in 1.1.7)
*This component requires that the e5 Anywhere API have the UI and OData routes enabled.*

The case notes component can be inserted into a page using the &lt;e5core-ui-work-casenotes&gt; tag as shown below. The component requires a work item observable as a parameter and will respond to changes in the work item. The Date, User, Type and Details of the case note are displayed, the number of items on page can be changed by the “items per page” drop down in the bottom right corner, and the sort order can be changes by clicking on the column heading.
```
<e5core-ui-work-casenotes [workItem$]="workItem$"></e5core-ui-work-casenotes>
```

## Change Log

Version|Changes
-|-
1.2.4|Added Work Related Items
1.2.3|WorkDeliveryService responds with null workId when there is no work available. Added readonly, and labels directives to e5core-ui-categorization component.
1.2.2|Diarise Component
1.2.1|Addition of SLA monitor and link to Search Results Component
1.2.0| Breaking change to WorkItemModel and enhancements to Searhc Work components
1.1.12|Fixed bug in Categorization component that clears category 1 and 2 when category 3 is selected.
1.1.11|Fixed bug in search dropdown lists
1.1.10|Added Conversaion viewer, file uploader, generate document, assign work to user, work attachments and attachment viewer components.
1.1.9|Added Categorization Component
1.1.8|Added Search Menu, forms and results ,Attachment and SLA monitor (WIP)
1.1.7|Added Casenotes and History UI Components.
1.1.6|Made the "lock" parameter optional on LegacyWorkDeliveryService.
1.1.5|Fixed typo in LegacyWorkDeliveryService, added "lock" option to getNextWorkItem() method and formatted current output field.
1.1.4|Exposed LegacyWorkDeliveryService
1.1.3|Added Read only list field.
1.1.2|Removed BrowserModule. You now have to import that into your main app module.
1.1.1|Exported classes.
1.1.0|Added work item comnponents.
