Skip to content
This repository was archived by the owner on Aug 7, 2020. It is now read-only.

feat(oui-timepicker): add timepicker component #344

Merged
merged 1 commit into from
Jan 10, 2019
Merged

feat(oui-timepicker): add timepicker component #344

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/oui-angular/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ import Switch from "@ovh-ui/oui-switch";
import Tabs from "@ovh-ui/oui-tabs";
import Textarea from "@ovh-ui/oui-textarea";
import Tile from "@ovh-ui/oui-tile";
import Timepicker from "@ovh-ui/oui-timepicker";
import Tooltip from "@ovh-ui/oui-tooltip";

export default angular
Expand Down Expand Up @@ -84,6 +85,7 @@ export default angular
Tabs,
Textarea,
Tile,
Timepicker,
Tooltip
])
.name;
16 changes: 13 additions & 3 deletions packages/oui-calendar/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,16 @@ Use `mode` to set a different selection mode for the calendar
* `selectedDates` returns an array of Date objects selected by the user. When there are no dates selected, the array is empty.
* `dateStr` returns a string representation of the latest selected Date object by the user. The string is formatted as per the `dateFormat` option.

## Variants

### Timepicker

See <a href="#!/oui-angular/timepicker">Action menu component</a>.

```html:preview
<oui-timepicker model="$ctrl.timepickerModel" placeholder="HH:MM"></oui-timepicker>
```

## API

| Attribute | Type | Binding | One-time Binding | Values | Default | Description
Expand All @@ -168,19 +178,19 @@ Use `mode` to set a different selection mode for the calendar
| `id` | string | @? | yes | n/a | n/a | id attribute of the field
| `name` | string | @? | yes | n/a | n/a | name attribute of the field
| `placeholder` | string | @? | yes | n/a | n/a | placeholder text
| `inline` | boolean | <? | no | `true`, `false` | `false` | show the calendar below the input
| `static` | boolean | <? | no | `true`, `false` | `false` | position the calendar relatively to the input
| `mode` | string | @? | yes | `single`, `multiple`, `range` | `single` | selection mode
| `format` | string | @? | yes | See [Formatting Tokens](https://flatpickr.js.org/formatting/) | `Y-m-d` | format the date of the model
| `alt-format` | string | @? | yes | See [Formatting Tokens](https://flatpickr.js.org/formatting/) | `Y-m-d` | format the date of the field. `format` is used if undefined
| `append-to-body` | boolean | <? | yes | `true`, `false` | `false` | append the calendar to the body of the page
| `inline` | boolean | <? | yes | `true`, `false` | `false` | show the calendar below the input in `inline-block`
| `inline` | boolean | <? | no | `true`, `false` | `false` | show the calendar below the input
| `static` | boolean | <? | no | `true`, `false` | `false` | position the calendar relatively to the input
| `max-date` | object | <? | yes | See [Supplying Dates](https://flatpickr.js.org/examples/#supplying-dates-for-flatpickr) | n/a | specifies the maximum/latest date (inclusively) allowed for selection
| `min-date` | object | <? | yes | See [Supplying Dates](https://flatpickr.js.org/examples/#supplying-dates-for-flatpickr) | n/a | specifies the minimum/earliest date (inclusively) allowed for selection
| `disable-date` | array | <? | yes | See [Supplying Dates](https://flatpickr.js.org/examples/#supplying-dates-for-flatpickr) | n/a | make certain dates unavailable for selection
| `enable-date` | array | <? | yes | See [Supplying Dates](https://flatpickr.js.org/examples/#supplying-dates-for-flatpickr) | n/a | make certain dates only available for selection
| `enable-time` | boolean | <? | yes | `true`, `false` | `false` | enables time selection
| `week-numbers` | boolean | <? | yes | `true`, `false` | `false` | week numbers flag
| `options` | object | <? | yes | See [Options](https://flatpickr.js.org/options/) | n/a | flatpickr options for more advanced configuration
| `disabled` | boolean | <? | no | `true`, `false` | `false` | disabled flag
| `required` | boolean | <? | no | `true`, `false` | `false` | required flag
| `on-change` | function | & | no | n/a | n/a | handler triggered when the user selects a date, or changes the time on a selected date
Expand Down
6 changes: 4 additions & 2 deletions packages/oui-calendar/src/calendar.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,18 @@ export default {

appendToBody: "<?",
inline: "<?",
"static": "<?",
maxDate: "<?",
minDate: "<?",
disableDate: "<?",
enableDate: "<?",

enableTime: "<?",
weekNumbers: "<?",

options: "<?",

disabled: "<?",
required: "<?",
weekNumbers: "<?",

onChange: "&",
onClose: "&",
Expand Down
32 changes: 23 additions & 9 deletions packages/oui-calendar/src/calendar.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
import { addBooleanParameter } from "@ovh-ui/common/component-utils";
import { addBooleanParameter, addDefaultParameter } from "@ovh-ui/common/component-utils";
import Flatpickr from "flatpickr";
import merge from "lodash/merge";

export default class {
constructor ($attrs, $element, $timeout, ouiCalendarConfiguration) {
constructor ($attrs, $element, $scope, $timeout, ouiCalendarConfiguration) {
"ngInject";

this.$attrs = $attrs;
this.$element = $element;
this.$id = $scope.$id;
this.$timeout = $timeout;
this.locale = ouiCalendarConfiguration.locale;
this.options = angular.copy(ouiCalendarConfiguration.options);
this.config = angular.copy(ouiCalendarConfiguration.options);
}

setModelValue (value) {
Expand All @@ -19,7 +21,7 @@ export default class {
setEventHooks (hooks) {
// Add a callback for each events
hooks.forEach((hook) => {
this.options[hook] = (selectedDates, dateStr) => {
this.config[hook] = (selectedDates, dateStr) => {
this.model = dateStr;
this.$timeout(this[hook]({ selectedDates, dateStr }));
};
Expand All @@ -28,11 +30,15 @@ export default class {

setOptionsProperty (property, value) {
if (angular.isDefined(value)) {
this.options[property] = value;
this.config[property] = value;
}
}

initCalendarInstance () {
if (this.options) {
this.config = merge(this.config, this.options);
}

// Set options from attributes
this.setOptionsProperty("appendTo", this.appendTo);
this.setOptionsProperty("defaultDate", this.model);
Expand All @@ -50,7 +56,7 @@ export default class {
this.setOptionsProperty("dateFormat", this.format);

if (angular.isDefined(this.altFormat)) {
this.setOptionsProperty("altInput", true);
this.setOptionsProperty("altInput", !this.disabled);
this.setOptionsProperty("altFormat", this.altFormat);
}

Expand All @@ -76,18 +82,22 @@ export default class {
});

// Init the flatpickr instance
this.flatpickr = new Flatpickr(this.$element.find("input")[0], this.options);
this.flatpickr = new Flatpickr(this.$element.find("input")[0], this.config);
}

$onInit () {
addBooleanParameter(this, "appendToBody");
addBooleanParameter(this, "disabled");
addBooleanParameter(this, "enableTime");
addBooleanParameter(this, "inline");
addBooleanParameter(this, "noCalendar");
addBooleanParameter(this, "required");
addBooleanParameter(this, "static");
addBooleanParameter(this, "weekNumbers");

addDefaultParameter(this, "id", `ouiCalendar${this.$id}`);
addDefaultParameter(this, "name", `ouiCalendar${this.$id}`);

this.initCalendarInstance();
}

Expand All @@ -96,16 +106,20 @@ export default class {
}

$postLink () {
// Avoid $element DOM unsync for jqLite methods
this.$timeout(() => {
const controls = angular.element(this.$element[0].querySelectorAll(".oui-calendar__control"));

this.$element
.addClass("oui-calendar")
.removeAttr("id")
.removeAttr("name");

// Add class for `inline`
// Avoid 'alt-input' to take bad value of placeholder
controls.attr("placeholder", this.placeholder);

if (this.inline) {
this.$element.addClass("oui-calendar_inline");
controls.attr("type", "hidden");
}
});
}
Expand Down
13 changes: 0 additions & 13 deletions packages/oui-calendar/src/calendar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,7 @@
autocomplete="off"
ng-attr-id="{{::$ctrl.id}}"
ng-attr-name="{{::$ctrl.name}}"
ng-attr-placeholder="{{::$ctrl.placeholder}}"
ng-model="$ctrl.model"
ng-disabled="$ctrl.disabled"
ng-required="$ctrl.required" />
</div>
<!-- TEMP: Waiting for UI (Uncomment specs too)
<button type="button"
ng-disabled="$ctrl.disabled"
ng-click="$ctrl.setModelValue('today')">
Today
</button>
<button type="button"
ng-disabled="$ctrl.disabled"
ng-show="$ctrl.model.length"
ng-click="$ctrl.setModelValue()">
Reset
</button> -->
39 changes: 10 additions & 29 deletions packages/oui-calendar/src/index.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ describe("ouiCalendar", () => {

$timeout.flush();

expect(controller.options.inline).toBe(true);
expect(controller.config.inline).toBe(true);
expect(component.hasClass("oui-calendar_inline")).toBe(true);
});

Expand All @@ -76,7 +76,7 @@ describe("ouiCalendar", () => {

$timeout.flush();

expect(controller.options.appendTo).toBeUndefined();
expect(controller.config.appendTo).toBeUndefined();
expect(calendar).toBeNull();
});

Expand All @@ -98,6 +98,8 @@ describe("ouiCalendar", () => {
const component = testUtils.compileTemplate('<oui-calendar model="$ctrl.model" placeholder="foo"></oui-calendar>');
const input = component.find("input");

$timeout.flush();

expect(input.attr("placeholder")).toBe("foo");
});

Expand All @@ -106,7 +108,7 @@ describe("ouiCalendar", () => {
const ctrl = component.controller("ouiCalendar");

ctrl.setOptionsProperty("foo", "bar");
expect(ctrl.options.foo).toBe("bar");
expect(ctrl.config.foo).toBe("bar");
});

it("should change the value formatting of the model and the input", () => {
Expand All @@ -124,9 +126,9 @@ describe("ouiCalendar", () => {
const input = component[0].querySelector(".oui-calendar__control");
const altInput = component[0].querySelector(".oui-calendar__control_alt");

expect(ctrl.options.dateFormat).toBe(format);
expect(ctrl.options.altInput).toBe(true);
expect(ctrl.options.altFormat).toBe(altFormat);
expect(ctrl.config.dateFormat).toBe(format);
expect(ctrl.config.altInput).toBe(true);
expect(ctrl.config.altFormat).toBe(altFormat);
expect(input.value).toBe(formatDate);
expect(altInput.value).toBe(altFormatDate);
});
Expand All @@ -136,7 +138,7 @@ describe("ouiCalendar", () => {
const ctrl = component.controller("ouiCalendar");

ctrl.setEventHooks(["foo"]);
expect(typeof ctrl.options.foo).toBe("function");
expect(typeof ctrl.config.foo).toBe("function");
});

it("should call function of events attributes", () => {
Expand All @@ -153,7 +155,7 @@ describe("ouiCalendar", () => {
onOpenSpy
});
const ctrl = component.controller("ouiCalendar");
const today = ctrl.flatpickr.parseDate("today", ctrl.options.dateFormat);
const today = ctrl.flatpickr.parseDate("today", ctrl.config.dateFormat);

ctrl.setModelValue(today);
expect(onChangeSpy).toHaveBeenCalledWith([today], ctrl.model);
Expand All @@ -162,26 +164,5 @@ describe("ouiCalendar", () => {
ctrl.flatpickr.close();
expect(onCloseSpy).toHaveBeenCalledWith([today], ctrl.model);
});

// it("should set the value to today's date when 'today' button is clicked", () => {
// const component = testUtils.compileTemplate('<oui-calendar model="$ctrl.model"></oui-calendar>');
// const ctrl = component.controller("ouiCalendar");
// const button = component.find("button").eq(0);
// const today = ctrl.flatpickr.formatDate(new Date(), ctrl.options.dateFormat);

// button.triggerHandler("click");
// expect(ctrl.model).toBe(today);
// });

// it("should reset the value when 'reset' button is clicked", () => {
// const component = testUtils.compileTemplate('<oui-calendar model="$ctrl.model"></oui-calendar>', {
// model: "today"
// });
// const ctrl = component.controller("ouiCalendar");
// const button = component.find("button").eq(1);

// button.triggerHandler("click");
// expect(ctrl.model).toBe("");
// });
});
});
Loading