added calendar component #724
This commit is contained in:
Joan
parent
ded3fda09b
commit
b9699acd7b
|
|
@ -63,5 +63,9 @@
|
|||
"icon": "today"
|
||||
}
|
||||
}
|
||||
],
|
||||
"menu": [
|
||||
{"state": "zone.card.basicData", "icon": "settings"},
|
||||
{"state": "zone.card.deliveryDay", "icon": "today"}
|
||||
]
|
||||
}
|
||||
|
|
@ -7,9 +7,15 @@
|
|||
<vn-vertical vn-one>
|
||||
<vn-card >
|
||||
<vn-vertical>
|
||||
<vn-horizontal pad-medium>
|
||||
calendar
|
||||
</vn-horizontal>
|
||||
<vn-vertical pad-small>
|
||||
<vn-calendar
|
||||
default-date="$ctrl.defaultDate"
|
||||
on-selection="$ctrl.onSelection(value)">
|
||||
</vn-calendar>
|
||||
</vn-vertical>
|
||||
<!-- <vn-vertical pad-small>
|
||||
<vn-calendar default-date="$ctrl.defaultNexDate"></vn-calendar>
|
||||
</vn-vertical> -->
|
||||
</vn-vertical>
|
||||
</vn-card>
|
||||
</vn-vertical>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,13 @@ import ngModule from '../../module';
|
|||
class Controller {
|
||||
constructor($scope) {
|
||||
this.$scope = $scope;
|
||||
this.defaultDate = new Date();
|
||||
this.defaultNexDate = new Date(this.defaultDate);
|
||||
this.defaultNexDate.setMonth(this.defaultNexDate.getMonth() + 1);
|
||||
}
|
||||
|
||||
onSelection(value) {
|
||||
console.log(value);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<vn-watcher
|
||||
vn-id="watcher"
|
||||
data="$ctrl.zone"
|
||||
form="form"
|
||||
save="patch">
|
||||
</vn-watcher>
|
||||
<vn-crud-model
|
||||
vn-id="model"
|
||||
url="/agency/api/ZoneGeos"
|
||||
data="geos">
|
||||
</vn-crud-model>
|
||||
|
||||
<vn-horizontal>
|
||||
<vn-vertical vn-one>
|
||||
<vn-card pad-large>
|
||||
<vn-title>Delivery days</vn-title>
|
||||
a
|
||||
<vn-treeview model="model"></vn-treeview>
|
||||
</vn-card>
|
||||
</vn-vertical>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
<div>
|
||||
<vn-horizontal class="header">
|
||||
<vn-auto>
|
||||
<vn-icon icon="keyboard_arrow_left" class="pointer"
|
||||
ng-click="$ctrl.movePrevious()"
|
||||
</vn-icon>
|
||||
</vn-auto>
|
||||
<vn-one>
|
||||
<strong>{{$ctrl.defaultDate | date: 'dd/MM/yyyy'}}</strong>
|
||||
</vn-one>
|
||||
<vn-auto>
|
||||
<vn-icon icon="keyboard_arrow_right" class="pointer"
|
||||
ng-click="$ctrl.moveNext()"
|
||||
</vn-icon>
|
||||
</vn-auto>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal class="body">
|
||||
<section ng-repeat="day in $ctrl.days" class="day {{day.color}}" ng-click="$ctrl.select($index)">
|
||||
<span>{{::day.number}}</span>
|
||||
</section>
|
||||
</vn-horizontal>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
import ngModule from '../../module';
|
||||
import Component from '../../lib/component';
|
||||
import './style.scss';
|
||||
|
||||
/**
|
||||
* Calendar.
|
||||
*
|
||||
*/
|
||||
export default class Calendar extends Component {
|
||||
constructor($element, $scope) {
|
||||
super($element, $scope);
|
||||
|
||||
this.defaultDate = new Date();
|
||||
}
|
||||
|
||||
get defaultDate() {
|
||||
return this._defaultDate;
|
||||
}
|
||||
|
||||
set defaultDate(value) {
|
||||
this._defaultDate = value;
|
||||
this.buildDays();
|
||||
}
|
||||
|
||||
get lastDay() {
|
||||
let year = this.defaultDate.getYear();
|
||||
// Month starts from zero, so we increment one month
|
||||
let month = this.defaultDate.getMonth() + 1;
|
||||
|
||||
return new Date(year, month, 0).getDate();
|
||||
}
|
||||
|
||||
buildDays() {
|
||||
let firstMonthDay = new Date(this.defaultDate);
|
||||
firstMonthDay.setDate(1);
|
||||
|
||||
let weekday = firstMonthDay.getDay();
|
||||
|
||||
let year = this.defaultDate.getYear();
|
||||
let month = this.defaultDate.getMonth();
|
||||
let previousLastMonthDay = new Date(year, month, 0);
|
||||
|
||||
this.days = [];
|
||||
let day = 1;
|
||||
|
||||
let previousMonthDay = previousLastMonthDay.getDate() - (weekday - 2);
|
||||
let nextMonthDay = 1;
|
||||
|
||||
for (let d = 1; d <= 35; d++) {
|
||||
if (d < weekday) {
|
||||
let monthDay = new Date(previousLastMonthDay);
|
||||
monthDay.setDate(previousMonthDay);
|
||||
this.days.push({number: previousMonthDay, date: monthDay, color: 'gray'});
|
||||
previousMonthDay++;
|
||||
} else if (d >= weekday && day <= this.lastDay) {
|
||||
let monthDay = new Date(this.defaultDate);
|
||||
monthDay.setDate(day);
|
||||
this.days.push({number: day, date: monthDay});
|
||||
day++;
|
||||
} else if (d >= weekday && day > this.lastDay) {
|
||||
this.days.push({number: nextMonthDay, color: 'gray'});
|
||||
nextMonthDay++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
moveNext() {
|
||||
let next = this.defaultDate.getMonth() + 1;
|
||||
this.defaultDate.setMonth(next);
|
||||
this.buildDays();
|
||||
}
|
||||
|
||||
movePrevious() {
|
||||
let previous = this.defaultDate.getMonth() - 1;
|
||||
this.defaultDate.setMonth(previous);
|
||||
this.buildDays();
|
||||
}
|
||||
|
||||
select(index) {
|
||||
this.emit('selection', {value: this.days[index]});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Calendar.$inject = ['$element', '$scope', '$attrs'];
|
||||
|
||||
ngModule.component('vnCalendar', {
|
||||
template: require('./index.html'),
|
||||
controller: Calendar,
|
||||
bindings: {
|
||||
model: '<',
|
||||
defaultDate: '<?',
|
||||
onSelection: '&?'
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
@import "colors";
|
||||
|
||||
vn-calendar {
|
||||
width: 100%;
|
||||
|
||||
.header vn-one {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.body {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
|
||||
& > .day {
|
||||
box-sizing: border-box;
|
||||
padding: 0.1em;
|
||||
width: 14.2857143%;
|
||||
line-height: 1.5em;
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
font-size: 0.8vw;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
padding: 0.2em;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
& > .day:hover span {
|
||||
background-color: #DDD
|
||||
}
|
||||
|
||||
& > .day.gray {
|
||||
color: $secondary-font-color
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -44,3 +44,6 @@ import './input-number';
|
|||
import './input-time';
|
||||
import './fetched-tags';
|
||||
import './log';
|
||||
import './treeview';
|
||||
import './calendar';
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
<div>
|
||||
<ul>
|
||||
<li ng-repeat="item in $ctrl.data">
|
||||
<a href="">
|
||||
<vn-icon icon="keyboard_arrow_down"></vn-icon>
|
||||
<span>{{::item.name}}</span>
|
||||
|
||||
<section style="float:right">
|
||||
icons</section>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import ngModule from '../../module';
|
||||
import Component from '../../lib/component';
|
||||
import './style.scss';
|
||||
|
||||
/**
|
||||
* A simple tooltip.
|
||||
*
|
||||
* @property {String} position The relative position to the parent
|
||||
*/
|
||||
export default class Treeview extends Component {
|
||||
constructor($element, $scope, $timeout) {
|
||||
super($element, $scope);
|
||||
}
|
||||
|
||||
get data() {
|
||||
return this.model.data;
|
||||
}
|
||||
|
||||
set selection(value) {
|
||||
this._selection = value;
|
||||
}
|
||||
}
|
||||
|
||||
Treeview.$inject = ['$element', '$scope', '$attrs'];
|
||||
|
||||
ngModule.component('vnTreeview', {
|
||||
template: require('./index.html'),
|
||||
controller: Treeview,
|
||||
bindings: {
|
||||
model: '<'
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
vn-treeview {
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 0.5em
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > ul > li {
|
||||
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue