osr-plastic/osr-discourse-src
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

UX: rework date time input range (#9524)

Browse Source
This commit is contained in:
Joffrey JAFFEUX
2020-04-22 22:17:53 +02:00
committed by GitHub
parent 094ddb1c1f
commit 3bbd8b1258
29 changed files with 581 additions and 612 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/javascripts/components/date-input-test.js
+3 -3
View File
@@ -18,7 +18,7 @@ async function pika(year, month, day) {
function noop() {}
const DEFAULT_DATE = new Date(2019, 0, 29);
const DEFAULT_DATE = moment("2019-01-29");
componentTest("default", {
template: `{{date-input date=date}}`,
@@ -44,7 +44,7 @@ componentTest("prevents mutations", {
await click(dateInput());
await pika(2019, 0, 2);
assert.ok(this.date.getTime() === DEFAULT_DATE.getTime());
assert.ok(this.date.isSame(DEFAULT_DATE));
}
});
@@ -60,6 +60,6 @@ componentTest("allows mutations through actions", {
await click(dateInput());
await pika(2019, 0, 2);
assert.ok(this.date.getTime() === new Date(2019, 0, 2).getTime());
assert.ok(this.date.isSame(moment("2019-01-02")));
}
});
test/javascripts/components/date-time-input-range-test.js
+11 -80
View File
@@ -3,40 +3,22 @@ import componentTest from "helpers/component-test";
moduleForComponent("date-time-input-range", { integration: true });
function fromDateInput() {
return find(".from .date-picker");
return find(".from.d-date-time-input .date-picker")[0];
}
function fromHoursInput() {
return find(".from .field.hours");
}
function fromMinutesInput() {
return find(".from .field.minutes");
function fromTimeInput() {
return find(".from.d-date-time-input .d-time-input .combo-box-header")[0];
}
function toDateInput() {
return find(".to .date-picker");
return find(".to.d-date-time-input .date-picker")[0];
}
function toHoursInput() {
return find(".to .field.hours");
function toTimeInput() {
return find(".to.d-date-time-input .d-time-input .combo-box-header")[0];
}
function toMinutesInput() {
return find(".to .field.minutes");
}
function setDates(dates) {
this.setProperties(dates);
}
async function pika(year, month, day) {
await click(
`.pika-button.pika-day[data-pika-year="${year}"][data-pika-month="${month}"][data-pika-day="${day}"]`
);
}
const DEFAULT_DATE_TIME = new Date(2019, 0, 29, 14, 45);
const DEFAULT_DATE_TIME = moment("2019-01-29 14:45");
componentTest("default", {
template: `{{date-time-input-range from=from to=to}}`,
@@ -46,60 +28,9 @@ componentTest("default", {
},
test(assert) {
assert.equal(fromDateInput().val(), "January 29, 2019");
assert.equal(fromHoursInput().val(), "14");
assert.equal(fromMinutesInput().val(), "45");
assert.equal(toDateInput().val(), "");
assert.equal(toHoursInput().val(), "");
assert.equal(toMinutesInput().val(), "");
}
});
componentTest("can switch panels", {
template: `{{date-time-input-range}}`,
async test(assert) {
assert.ok(exists(".panel.from.visible"));
assert.notOk(exists(".panel.to.visible"));
await click(".panels button.to-panel");
assert.ok(exists(".panel.to.visible"));
assert.notOk(exists(".panel.from.visible"));
}
});
componentTest("prevents toDate to be before fromDate", {
template: `{{date-time-input-range from=from to=to onChange=onChange}}`,
beforeEach() {
this.setProperties({
from: DEFAULT_DATE_TIME,
to: DEFAULT_DATE_TIME,
onChange: setDates
});
},
async test(assert) {
assert.notOk(exists(".error"), "it begins with no error");
await click(".panels button.to-panel");
await click(toDateInput());
await pika(2019, 0, 1);
assert.ok(exists(".error"), "it shows an error");
assert.deepEqual(this.to, DEFAULT_DATE_TIME, "it didnt trigger a mutation");
await click(".panels button.to-panel");
await click(toDateInput());
await pika(2019, 0, 30);
assert.notOk(exists(".error"), "it removes the error");
assert.deepEqual(
this.to,
new Date(2019, 0, 30, 14, 45),
"it has changed the date"
);
assert.equal(fromDateInput().value, "January 29, 2019");
assert.equal(fromTimeInput().dataset.name, "14:45");
assert.equal(toDateInput().value, "");
assert.equal(toTimeInput().dataset.name, "--:--");
}
});
test/javascripts/components/date-time-input-test.js
+9 -14
View File
@@ -3,15 +3,11 @@ import componentTest from "helpers/component-test";
moduleForComponent("date-time-input", { integration: true });
function dateInput() {
return find(".date-picker");
return find(".date-picker")[0];
}
function hoursInput() {
return find(".field.hours");
}
function minutesInput() {
return find(".field.minutes");
function timeInput() {
return find(".d-time-input .combo-box-header")[0];
}
function setDate(date) {
@@ -24,7 +20,7 @@ async function pika(year, month, day) {
);
}
const DEFAULT_DATE_TIME = new Date(2019, 0, 29, 14, 45);
const DEFAULT_DATE_TIME = moment("2019-01-29 14:45");
componentTest("default", {
template: `{{date-time-input date=date}}`,
@@ -34,9 +30,8 @@ componentTest("default", {
},
test(assert) {
assert.equal(dateInput().val(), "January 29, 2019");
assert.equal(hoursInput().val(), "14");
assert.equal(minutesInput().val(), "45");
assert.equal(dateInput().value, "January 29, 2019");
assert.equal(timeInput().dataset.name, "14:45");
}
});
@@ -51,7 +46,7 @@ componentTest("prevents mutations", {
await click(dateInput());
await pika(2019, 0, 2);
assert.ok(this.date.getTime() === DEFAULT_DATE_TIME.getTime());
assert.ok(this.date.isSame(DEFAULT_DATE_TIME));
}
});
@@ -67,7 +62,7 @@ componentTest("allows mutations through actions", {
await click(dateInput());
await pika(2019, 0, 2);
assert.ok(this.date.getTime() === new Date(2019, 0, 2, 14, 45).getTime());
assert.ok(this.date.isSame(moment("2019-01-02 14:45")));
}
});
@@ -79,6 +74,6 @@ componentTest("can hide time", {
},
async test(assert) {
assert.notOk(exists(hoursInput()));
assert.notOk(exists(timeInput()));
}
});
test/javascripts/components/time-input-test.js
+14 -56
View File
@@ -1,21 +1,18 @@
import selectKit from "helpers/select-kit-helper";
import componentTest from "helpers/component-test";
moduleForComponent("time-input", { integration: true });
moduleForComponent("time-input", {
integration: true,
function hoursInput() {
return find(".field.hours");
}
function minutesInput() {
return find(".field.minutes");
}
beforeEach() {
this.set("subject", selectKit());
}
});
function setTime(time) {
this.setProperties(time);
}
function noop() {}
componentTest("default", {
template: `{{time-input hours=hours minutes=minutes}}`,
@@ -24,8 +21,7 @@ componentTest("default", {
},
test(assert) {
assert.equal(hoursInput().val(), "14");
assert.equal(minutesInput().val(), "58");
assert.equal(this.subject.header().name(), "14:58");
}
});
@@ -37,11 +33,9 @@ componentTest("prevents mutations", {
},
async test(assert) {
await fillIn(hoursInput(), "12");
assert.ok(this.hours === "14");
await fillIn(minutesInput(), "36");
assert.ok(this.minutes === "58");
await this.subject.expand();
await this.subject.selectRowByIndex(3);
assert.equal(this.subject.header().name(), "14:58");
}
});
@@ -54,44 +48,8 @@ componentTest("allows mutations through actions", {
},
async test(assert) {
await fillIn(hoursInput(), "12");
assert.ok(this.hours === "12");
await fillIn(minutesInput(), "36");
assert.ok(this.minutes === "36");
}
});
componentTest("hours and minutes have boundaries", {
template: `{{time-input hours=14 minutes=58 onChange=onChange}}`,
beforeEach() {
this.set("onChange", noop);
},
async test(assert) {
await fillIn(hoursInput(), "2");
assert.equal(hoursInput().val(), "02");
await fillIn(hoursInput(), "@");
assert.equal(hoursInput().val(), "00");
await fillIn(hoursInput(), "24");
assert.equal(hoursInput().val(), "23");
await fillIn(hoursInput(), "-1");
assert.equal(hoursInput().val(), "00");
await fillIn(minutesInput(), "@");
assert.equal(minutesInput().val(), "00");
await fillIn(minutesInput(), "2");
assert.equal(minutesInput().val(), "02");
await fillIn(minutesInput(), "60");
assert.equal(minutesInput().val(), "59");
await fillIn(minutesInput(), "-1");
assert.equal(minutesInput().val(), "00");
await this.subject.expand();
await this.subject.selectRowByIndex(3);
assert.equal(this.subject.header().name(), "00:45");
}
});