Single date picker

2.1

The single date picker is based on Bootstrap's datepicker and use to take a single date easily. To use the single date picker as pop-up style please wrap it into a pop-up menu (section 1.20).

Click on the calendar icon (left top corner) to quickly select 'today' within calendar view.
Hover and click on the selected date section to reset the selected date to empty.

Show Hide JavaScript


               $scope.customValidateForDatePicker = function (date) {
           if(moment(date).diff(moment(), 'days') < 0) {
             return "[custom validation]: can not select dates before today";
           }
         }

-

Show Hide markup


                              <h1>With week numbers</h1>
<wfm-date-picker ng-model="singleDate" show-week="true"></wfm-date-picker>
<h1>Without week numbers</h1>
<wfm-date-picker ng-model="singleDate2" show-week="false"></wfm-date-picker>
<h1>With custom validation: can not select dates before today</h1>
<wfm-date-picker ng-model="singleDate3" show-week="true" custom-validate="customValidateForDatePicker(singleDate3)"></wfm-date-picker>
<h1>Popup date picker</h1>
<wfm-date-picker ng-model="singleDate4" show-week="true" popup-mode="true"></wfm-date-picker>

With week numbers

Without week numbers

With custom validation: can not select dates before today

Popup date picker

Date range picker

2.2

The date range picker is based on Bootstrap's datepicker and all we do is wrapping it and applying some special classes to make it more compatible with material design. To use the date range picker as pop-up style please wrap it into a pop-up menu (section 1.20).

Click on the calendar icon (left top corner) to quickly select 'today' within calendar view.
Hover and click on the selected date section to reset the selected date to empty.

Attribute Name	Usage	Required
ng-model	Bind to a js-object representing the date range. The object is composed by `startDate` and `endDate` key-value pairs. The date obejct default value is `null`.	true
show-week	Bind to a Bool type `true` or `false` value to display week numbers on the side of calendar view.	false
interval-rule	select special interval rule to validate the date ranges by only `week` type or `month` type.	false
custom-validation-function	Define additional validations conditions by a binding function. The return of custom validation functions should be a $translated resource key string type that displays the validation errors/warning information.	false

-

Show Hide markup


                              <h1>With week numbers</h1>
<wfm-date-range-picker show-week="true" ng-model="dateRange1"></wfm-date-range-picker>
<h1>Without week numbers</h1>
<wfm-date-range-picker show-week="false" ng-model="dateRange2"></wfm-date-range-picker>
<h1>Pop up date range picker</h1>
<wfm-date-range-picker show-week="false" ng-model="popupDateRange1" popup-mode="true"></wfm-date-range-picker>

With week numbers

Without week numbers

Pop up date range picker

Date range picker with custom validation

2.3

The date range picker is based on Bootstrap's datepicker and all we do is wrapping it and applying some special classes to make it more compatible with material design. To use the date range picker as pop-up style please wrap it into a pop-up menu (section 1.20). Define additional validations by a binding function. The return of custom validation function should be a string that displays the validation errors/warning information. It could be a translate key supported by $translate.

Click on the calendar icon (left top corner) to quickly select 'today' within calendar view.
Hover and click on the selected date section to reset the selected date to empty.

Show Hide JavaScript


      
         $scope.customValid = function (data) {
           if(moment(data.endDate).diff(moment(data.startDate), 'days') > 7) {
             return "[custom validation]: your end date is 7 days later than your start date";
           }
         }

-

Show Hide markup


                              <wfm-date-range-picker ng-model="anotherDateRange" show-week="false" custom-validate="customValid(anotherDateRange)"></wfm-date-range-picker>

Date range picker with only weeks/monthes interval

2.4

The datepicker is based on Bootstrap's datepicker and all we do is wrapping it and applying some special classes to make it more compatible with material design. To use the date range picker as pop-up style please wrap it into a pop-up menu (section 1.20).

Click on the calendar icon (left top corner) to quickly select 'today' within calendar view.
Hover and click on the selected date section to reset the selected date to empty.

-

Show Hide markup


                              <h1>validate only exam with week interval</h1>
<wfm-date-range-picker ng-model="dateRange3" show-week="false" interval-rule="week"></wfm-date-range-picker>
<h1>validate only exam with month interval</h1>
<wfm-date-range-picker ng-model="dateRange4" show-week="false" interval-rule="month"></wfm-date-range-picker>

validate only exam with week interval

validate only exam with month interval

Date range picker with preselected date

2.5

The datepicker is based on Bootstrap's datepicker and all we do is wrap it and apply some special classes to make it more compatible with material design. To use the date range picker as pop-up style please wrap it into a pop-up menu (section 1.20).

Click on the calendar icon (left top corner) to quickly select 'today' within calendar view.
Hover and click on the selected date section to reset the selected date to empty.

-

Show Hide markup


                              <h1>Date range picker with disabling endDate selection. </h1>
<wfm-date-range-picker ng-model="dateRange5" show-week="false" disable="end-date"></wfm-date-range-picker>
<h1>Date range picker with disabling startDate selection. </h1>
<wfm-date-range-picker ng-model="dateRange6" show-week="false" disable="start-date"></wfm-date-range-picker>

Date range picker with disabling endDate selection.

Date range picker with disabling startDate selection.

Line chart

2.6

A chart used to present complex data. We use default C3 or the C3 chart directive to get nice features like legends, zoom and period selection.

Note: Column-values in the directive should be replaced with a variable to keep the html clean.

Show Hide JavaScript


              c3.generate({
              bindto: '#myChart',
              data: {
                      columns: [
                          ['data1', 30, 200, 100, 400, 150, 250],
                          ['data2', 20, 180, 240, 100, 190, 0],
                      ],
                      selection: {
                              enabled: true,
                      },
              },
              zoom: {
                      enabled: true,
              },
        });

-

Show Hide markup


                              <h3>Bind to chart with zoom and select</h3>
<div class="wfm-chart" id="myChart"></div>
<h3>c3 directive</h3>
<c3chart class="wfm-chart" bindto-id="chart2">
	<chart-column column-id="data 1"
	column-name="Data 1"
	column-color="#EF5350"
	column-values="30,200,100,400,150,250"
	column-type="line"/>
	<chart-column column-id="data 2"
	column-name="Data 2"
	column-color="#BA68C8"
	column-values="50,20,10,40,15,25"
	column-type="line"/>
</c3chart>

Bind to chart with zoom and select

c3 directive

Time range Picker

2.7

A directive for managing time range. The time range is represented by any object that have startTime and endTime keys, each with a js Date object as value. The range can be overnight if disable-next-day is set to false. In that case, a + 1 sign will be shown to indicate the end time is at the second day. The pickers are self-adjusted to the user's time-format setting, i.e. meridian will be used for 12-h format and disabled for 24-h format with correct meridian texts.

Attribute Name	Usage	Required
ng-model	Bind to time range object	true
disable-next-day	Disable next-day switch	false
max-hours-range	Max hours that allowed for the time range	false
template-url	Use a custom template	false

-

Show Hide markup


                               <div class="con-row">
   <time-range-picker ng-model="timeRange" disable-next-day="disableNextDay" max-hours-range="24"></time-range-picker>
 </div>

Pagination

2.9

Pagination is a directive which displays a list of availale pages and provides the properties for outer scope to set the pagination options and get data for the given page number.

Attribute Name	Description	Required
pagination-options	configurations about the pagination, it contains two properties. "pageNumber" is the current page number; "totalPages" is hwo many pages it sets.	true
get-data-for-page-callback	this is the function which is used by the directive to call to get the data for a given page number.	true

Show Hide JavaScript


      
$scope.paginationOptions = {pageNumber: 1, totalPages: 7};
$scope.getPageData = function(pageIndex) {
   angular.log(pageIndex);
};

-

Show Hide markup


                              <wfm-pagination class="pull-pagination" pagination-options="paginationOptions" get-data-for-page-callback="getPageData"></wfm-pagination>

Working hours picker

2.10

A directive for specifying the week day and time range. It is built taking the time range picker as a dependency.

Attribute Name	Usage	Required
working-hours	The model	true
over-night-switch	Allow next-day switch	false
time-format-switch	Allow user to change between 24h/12h format	false

-

Show Hide markup


                              <work-picker working-hours="model" over-night-switch="true" time-format-switch="true">

Notices

2.11

Notices are temporary alerts that should quickly show up and disappear when appropriate. They can indicate to the user that an event or action has taken place or that something is stopping the current action. There are several different markers to make the type of notice easy to spot:

Success: Indicates successful action.
Info: Gives hints and information.
Warning: Alerts that something has to be done before they can continue.
Error: Should be triggered when something goes wrong in the background.

A notice should either self-destruct on state change, when timeout is up or be dismissable to free up space. The Notice service methods take 3 arguments: content, timeToLive and destroyOnStateChange. When creating a new notice you will get a notice object. You can destroy the notice by calling notice.destroy().

Show Hide JavaScript


      
$scope.displaySuccess = function() {
    NoticeService.success(message, 5000, true);
};

-

Show Hide markup


                              
<!-- Some examples of how triggering a notice -->
<button class="wfm-btn wfm-btn-default" ng-click="displaySuccessNew();">Trigger success</button>
<button class="wfm-btn wfm-btn-default" ng-click="displayInfoNew();">Trigger info</button>
<button class="wfm-btn wfm-btn-default" ng-click="displayWarningNew();">Trigger warning</button>
<button class="wfm-btn wfm-btn-default" ng-click="displayErrorNew();">Trigger error</button>

<!-- The code below is included by default in our index.html. NO NEED TO REPEAT IT-->
<wfm-notice notices="wfmNotices"></wfm-notice>

Numeric value

2.12

A directive for making an input[text] behave like an input[number]. Locale-aware number strings (e.g. 1.234,01 in Swedish) entered directly into the input field are accepted as text and parsed manually with the correct ng-locale (using the correct group separator and decimal separator). The directive accepts the "float-number" tag attribute. Without it the input will only accept integer values.

-

Show Hide markup


                                <form name="form" class="wfm-form">
      <label>Localized number: <input type="text" ng-model="numericValueInput" name="Example" placeholder="0 ~ 1000000" numeric-value min="0" max="1000000"/></label>
      <p>
            Integer: <span ng-bind="numericValueInputResult"></span>
      </p>
      <label>Localized float-number: <input type="text" ng-model="numericValueFloatInput" name="Example" placeholder="0 ~ 1000000" numeric-value float-number min="0" max="1000000"/></label>
      <p>
            Float number: <span ng-bind="numericValueFloatInputResult"></span>
      </p>
  </form>

Skill picker

2.13

The skill picker is used to switch between selected skills and selected skill groups.

Attribute Name	Usage
skills	Model for binding skills. Array of skill objects
skill-groups	Model for binding skill groups. Array of skillgroup objects
skill-picker-open	Property for showing and hiding the drop-down with skills. Boolean. Optional
skill-group-picker-open	Property for showing and hiding the drop-down with skillgroups. Boolean. Optional
on-skill-selected	Callback function triggered when a skill is selected. The selected skill object as the only argument.
on-skill-group-selected	Callback function triggered when a skillgroup is selected. The selected skillgroup object as the only argument.
preselected-skill	Skill object to be displayed as the component loads
preselected-skill-group	Skillgroup object to be displayed as the component loads
on-clear-skill-selection	Callback function triggered when clearing the skill selection with x.
on-clear-skill-group-selection	Callback function triggered when clearing the skillgroup selection with x.

Show Hide JavaScript


       
$scope.mockSkills = [
 {
      Id: '-1',
      Name: 'no skills (test)',
      SkillType: 'SkillTypeChat',
      DoDisplayData: true
 },
 {
   Id: 'XYZ',
   Name: 'skill1',
   SkillType: 'SkillTypeChat',
   DoDisplayData: true
 },
 {
   Id: 'ABC',
   Name: 'skill2',
   SkillType: 'SkillTypeEmail',
   DoDisplayData: true
 },
 {
   Id: 'XYZ1',
   Name: 'skill3',
   SkillType: 'SkillTypeInboundTelephony',
   DoDisplayData: true
 },
 {
   Id: 'ABC2',
   Name: 'skill4',
   SkillType: 'SkillTypeRetail',
   DoDisplayData: true
 },
 {
   Id: 'XYZ3',
   Name: 'skill5',
   SkillType: 'SkillTypeBackoffice',
   DoDisplayData: true
 },
 {
   Id: 'ABC4',
   Name: 'skill6',
   SkillType: 'SkillTypeProject',
   DoDisplayData: true
 },
 {
   Id: 'XYZ5',
   Name: 'skill7',
   SkillType: 'SkillTypeFax',
   DoDisplayData: true
 },
 {
   Id: 'ABC6',
   Name: 'skill8',
   SkillType: 'SkillTypeTime',
   DoDisplayData: true
 }
];

$scope.mockedSkillGroups = [
 {
   Name: 'No skillgroup found (test)',
   Id: '-1',
   Skills: []
 },
 {
   Name: 'SkillArea1',
   Id: '123',
   Skills: [
     {
       Id: 'XYZ',
       Name: 'skill1'
     }
   ]
 },
 {
   Name: 'SkillArea2',
   Id: '321',
   Skills: [
     {
       Id: 'ABC',
       Name: 'skill2'
     }
   ]
 }
];

-

Show Hide markup


                              <the-skill-picker class="con-flex"
     skills="mockSkills"
     skill-groups="mockedSkillGroups"
     skill-picker-open="skillPickerOpen"
     skill-group-picker-open="skillGroupPickerOpen"
     on-skill-selected="clickedSkillInPicker(skill)"
     on-skill-group-selected="clickedSkillGroupInPicker(skillGroup)"
     preselected-skill="selectedSkill"
     preselected-skill-group="selectedSkillGroup"
     on-clear-skill-selection="clearSkillSelection()"
     on-clear-skill-group-selection="clearSkillGroupSelection()">
</the-skill-picker>
<p ng-if="selectedSkill">Selected skill: <span ng-bind="selectedSkill.Name"></span></p>
<p ng-if="selectedSkillGroup">Selected skillgroup: <span ng-bind="selectedSkillGroup.Name"></span></p>

Selected skill:

Selected skillgroup:

Skill picker - old

2.14

This will be soon depricated, we are keeping it for now for backwards compatibility. Please use the new one. The skill picker is used to switch between selected skills and selected skill groups.

Attribute Name	Usage
skills	Model for binding skills
skill-areas	Model for binding skill groups
item-to-return	The currently selected item (skill or group) returned as a callback function
preselected	Send the id of a skill that should be preselected on load

Show Hide JavaScript


       
$scope.preselectedSkillOld = { skillIds: ['XYZ1'] };
$scope.preselectedSkillGroupOld = { skillAreaId: ['XYZ'] };

$scope.outputOld = function(selectedItem) {
$scope.filterOutputOld = selectedItem;
};

-

Show Hide markup


                              <skill-picker skills="mockSkillsOld" skill-areas="mockedSkillGroupsOld" item-to-return="outputOld" preselected-item="preselectedSkillOld"></skill-picker>
<p ng-if="filterOutputOld">Selected skill/group: <span ng-bind="filterOutputOld.Name"></span></p>

Selected skill/group: