Skip to content

Commit

Permalink
990806 refactor & bug fixes & write test
Browse files Browse the repository at this point in the history
  • Loading branch information
@alireza-ab
alireza-ab committed Nov 26, 2020
1 parent 4f18335 commit acc70f3
Show file tree
Hide file tree
Showing 5 changed files with 115 additions and 79 deletions.
36 changes: 36 additions & 0 deletions cypress/integration/other-tests.spec.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
/// <reference types="Cypress" />

describe('select date range', () => {
beforeEach(() => {
cy.changeProps('from', undefined)
cy.changeProps('to', undefined)
cy.changeSlots()
})

it('today button', () => {
cy.visit('/')
cy.get('.pdp-input').focus()
cy.get('.pdp-today').click()
cy.get('.pdp-day.today').should('have.class', 'tada')
})

it('show top of input', async () => {
await cy.visit('/')
await cy.get('.pdp').invoke('attr', 'style', 'margin-top:50rem;')
await cy.get('.pdp-input').focus()
await cy.wait(1000)
let pickerTop = await cy.$$('.pdp-picker').offset().top;
let inputTop = await cy.$$('.pdp-input').offset().top;
expect(pickerTop).lt(inputTop)
})

it('scroll in year-select section', async () => {
await cy.visit('/')
await cy.get('.pdp-input').focus()
await cy.get('.pdp-year').first().click()
await cy.wait(1000)
await expect(cy.$$('.pdp-select-year').offset().top).not.equal(0)
})


})
56 changes: 28 additions & 28 deletions cypress/integration/props.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,11 +103,11 @@ describe('show prop', () => {
it('show prop', () => {
cy.changeProps('show', false)
cy.visit('/')
cy.get('.pdp .pdp').should('not.exist')
cy.get('.pdp-picker').should('not.exist')
cy.get('.show-picker').click()
cy.get('.pdp .pdp').should('exist')
cy.get('.pdp-picker').should('exist')
cy.get('.pdp-overlay').click({ force: true })
cy.get('.pdp .pdp').should('not.exist')
cy.get('.pdp-picker').should('not.exist')
})
})

Expand All @@ -127,69 +127,69 @@ describe('clickOn prop', () => {
it('with none value', () => {
cy.changeProps('click-on', 'none')
cy.visit('/')
cy.get('.pdp .pdp').should('not.exist')
cy.get('.pdp-picker').should('not.exist')
cy.get('.pdp-input').focus()
cy.get('.pdp .pdp').should('not.exist')
cy.get('.pdp-picker').should('not.exist')

cy.get('.pdp-input').click()
cy.get('.pdp .pdp').should('not.exist')
cy.get('.pdp-picker').should('not.exist')

cy.get('.pdp-icon').click()
cy.get('.pdp .pdp').should('not.exist')
cy.get('.pdp-picker').should('not.exist')
})

it('with icon value', () => {
cy.changeProps('click-on', 'icon')
cy.visit('/')
cy.get('.pdp .pdp').should('not.exist')
cy.get('.pdp-picker').should('not.exist')
cy.get('.pdp-input').focus()
cy.get('.pdp .pdp').should('not.exist')
cy.get('.pdp-picker').should('not.exist')

cy.get('.pdp-input').click()
cy.get('.pdp .pdp').should('not.exist')
cy.get('.pdp-picker').should('not.exist')

cy.get('.pdp-icon').click()
cy.get('.pdp .pdp').should('exist')
cy.get('.pdp-picker').should('exist')
cy.get('.pdp-overlay').click({ force: true })
cy.get('.pdp .pdp').should('not.exist')
cy.get('.pdp-picker').should('not.exist')
})

it('with input value', () => {
cy.changeProps('click-on', 'input')
cy.visit('/')
cy.get('.pdp .pdp').should('not.exist')
cy.get('.pdp-picker').should('not.exist')
cy.get('.pdp-input').focus()
cy.get('.pdp .pdp').should('exist')
cy.get('.pdp-picker').should('exist')
cy.get('.pdp-overlay').click({ force: true })
cy.get('.pdp .pdp').should('not.exist')
cy.get('.pdp-picker').should('not.exist')

cy.get('.pdp-input').click()
cy.get('.pdp .pdp').should('exist')
cy.get('.pdp-picker').should('exist')
cy.get('.pdp-overlay').click({ force: true })
cy.get('.pdp .pdp').should('not.exist')
cy.get('.pdp-picker').should('not.exist')

cy.get('.pdp-icon').click()
cy.get('.pdp .pdp').should('not.exist')
cy.get('.pdp-picker').should('not.exist')
})

it('wit all value', () => {
cy.changeProps('click-on', 'all')
cy.visit('/')
cy.get('.pdp .pdp').should('not.exist')
cy.get('.pdp-picker').should('not.exist')
cy.get('.pdp-input').focus()
cy.get('.pdp .pdp').should('exist')
cy.get('.pdp-picker').should('exist')
cy.get('.pdp-overlay').click({ force: true })
cy.get('.pdp .pdp').should('not.exist')
cy.get('.pdp-picker').should('not.exist')

cy.get('.pdp-input').click()
cy.get('.pdp .pdp').should('exist')
cy.get('.pdp-picker').should('exist')
cy.get('.pdp-overlay').click({ force: true })
cy.get('.pdp .pdp').should('not.exist')
cy.get('.pdp-picker').should('not.exist')

cy.get('.pdp-icon').click()
cy.get('.pdp .pdp').should('exist')
cy.get('.pdp-picker').should('exist')
cy.get('.pdp-overlay').click({ force: true })
cy.get('.pdp .pdp').should('not.exist')
cy.get('.pdp-picker').should('not.exist')
})
})

Expand Down Expand Up @@ -279,16 +279,16 @@ describe('autoSubmit prop', () => {
cy.changeProps('auto-submit', true)
cy.visit('/')
cy.selectRangeDate()
cy.get('.pdp .pdp').should('not.exist')
cy.get('.pdp-picker').should('not.exist')
})

it('false value', () => {
cy.changeProps('auto-submit', false)
cy.visit('/')
cy.selectRangeDate()
cy.get('.pdp .pdp').should('exist')
cy.get('.pdp-picker').should('exist')
cy.get('.pdp-submit').click()
cy.get('.pdp .pdp').should('not.exist')
cy.get('.pdp-picker').should('not.exist')
})
})

Expand Down
5 changes: 4 additions & 1 deletion src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
v-model="date"
tabindex="1"
required
from="1399"
from="1399/01/01"
to="1399/6/31"
format="YYYY-MM-DD"
input-format="jYYYY/jMM/jDD"
Expand All @@ -13,6 +13,7 @@
:show="show"
mode="range"
id="date"
:modal="false"
@input="input"
@close="close"
@blur="blur"
Expand All @@ -23,6 +24,8 @@
>
</date-picker>
<div class="show">date is: {{ date }}</div>

<date-picker> </date-picker>
</div>
</template>

Expand Down
67 changes: 31 additions & 36 deletions src/components/DatePicker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,13 @@
@focus="showPicker('input')"
v-model="displayValue"
@keydown="selectWithArrow"
ref="input"
ref="pdpInput"
/>
</div>
<slot name="after"></slot>
<div v-if="showDatePicker">
<div class="pdp-overlay" @click="showDatePicker = false"></div>
<div class="pdp" :class="{ 'pdp-top': showTopOfInput }">
<div :class="['pdp-picker', { 'pdp-top': showTopOfInput }]">
<ul class="pdp-select-month" v-show="showMonthSelect">
<li
v-for="(month, index) in months"
Expand All @@ -53,7 +53,7 @@
{{ month.label }}
</li>
</ul>
<ul class="pdp-select-year" v-show="showYearSelect">
<ul class="pdp-select-year" v-show="showYearSelect" ref="pdpSelectYear">
<li
v-for="(year, index) in years"
:key="index"
Expand Down Expand Up @@ -120,7 +120,7 @@
</button>
</div>

<div class="pdp-main">
<div class="pdp-main" ref="pdpMain">
<div
class="pdp-column"
v-for="(item, i) in columnCount"
Expand Down Expand Up @@ -202,7 +202,6 @@
//TODO: add props for disable some dates
//TODO: add clearable props
//TODO: add close button for months and years
//TODO: add resize function
//TODO: add style must be optional
//TODO: refactor and write comment
Expand Down Expand Up @@ -386,7 +385,7 @@
showDatePicker(val) {
if (val) this.$emit("open");
else {
document.removeEventListener("scroll", this.locate);
if (!this.modal) document.removeEventListener("scroll", this.locate);
this.$emit("close");
}
},
Expand All @@ -411,7 +410,6 @@
attrs() {
let attrs = { ...this.$attrs };
delete attrs.value;
attrs.id = attrs.id || "date-" + this.createUniqeNumber();
return attrs;
},
years() {
Expand Down Expand Up @@ -455,6 +453,7 @@
month[week][day] = { empty: true };
--emptyCells;
} else if (daysOfMonthNumber) {
//FIXME: refactor
month[week][day] = {
friday: day == 6,
key: this.onDisplay
Expand Down Expand Up @@ -521,7 +520,6 @@
Object.keys(this.column)
.sort((a, b) => b - a)
.some((breakpoint) => {
console.log(this.column[breakpoint]);
if (this.documentWidth <= breakpoint)
column = this.column[breakpoint];
});
Expand All @@ -536,11 +534,7 @@
this.setModel();
} else {
this.setModel();
let today = new PersianDate()
.hour(0)
.minute(0)
.second(0)
.millisecond(0);
let today = new PersianDate().startOf("date");
if (await this.checkDate(today.toString())) this.onDisplay = today;
else {
this.onDisplay = this.nearestDate(today);
Expand All @@ -556,12 +550,13 @@
this.showYearSelect = !this.showYearSelect;
if (this.showYearSelect) {
this.$nextTick(() => {
let selectedYearTop = document.querySelector(
".pdp-select-year li.selected"
let selectedYearTop = this.$refs.pdpSelectYear.querySelector(
"li.selected"
).offsetTop;
document
.querySelector(".pdp-select-year")
.scroll({ top: selectedYearTop, behavior: "smooth" });
this.$refs.pdpSelectYear.scroll({
top: selectedYearTop,
behavior: "smooth",
});
});
}
} else if (part == "month") {
Expand Down Expand Up @@ -633,13 +628,15 @@
//FIXME: show in Rages in hover when datepicker closed and opened
this.$emit("select", onDisplay);
if (this.mode === "range" && !this.endRange) {
document
.querySelector(".pdp .pdp-main")
.addEventListener("mouseover", this.selectInRangeDate);
this.$refs.pdpMain.addEventListener(
"mouseover",
this.selectInRangeDate
);
} else if (this.endRange) {
document
.querySelector(".pdp .pdp-main")
.removeEventListener("mouseover", this.selectInRangeDate);
this.$refs.pdpMain.removeEventListener(
"mouseover",
this.selectInRangeDate
);
}
}
},
Expand All @@ -649,6 +646,7 @@
goToToday() {
this.onDisplay = new PersianDate();
this.$nextTick(() => {
//FIXME:
document.querySelector(".pdp-day.today").classList.add("tada");
});
setTimeout(() => {
Expand All @@ -671,12 +669,14 @@
},
showPicker(el) {
if (this.clickOn == "all" || this.clickOn == el) {
document.getElementById(this.attrs.id).focus();
this.$refs.pdpInput.focus();
this.showDatePicker = true;
this.$nextTick(() => {
this.locate();
});
document.addEventListener("scroll", this.locate);
if (!this.modal) {
this.$nextTick(() => {
this.locate();
});
document.addEventListener("scroll", this.locate);
}
}
},
async selectWithArrow({ keyCode }) {
Expand Down Expand Up @@ -793,22 +793,17 @@
getColumn({ parentNode }) {
return parentNode.parentNode.parentNode.dataset.column;
},
createUniqeNumber() {
return (
new Date().getMilliseconds() + "" + Math.floor(Math.random() * 100)
);
},
nearestDate(date) {
return Math.abs(date.diff(this.fromDate)) <=
Math.abs(date.diff(this.toDate))
? this.fromDate.clone()
: this.toDate.clone();
},
locate() {
let input = document.querySelector("#" + this.attrs.id);
let input = this.$refs.pdpInput;
let inputOffset =
input.offsetHeight + input.getBoundingClientRect().top;
let picker = document.querySelector(".pdp .pdp");
let picker = document.querySelector(".pdp-picker");
let pickerOffset = picker.offsetHeight + 10;
if (inputOffset < pickerOffset) this.showTopOfInput = false;
else if (window.innerHeight - (inputOffset + pickerOffset) < 0)
Expand Down
Loading

0 comments on commit acc70f3

Please sign in to comment.