Added popover
gitea/salix/2138-zone_event_m3 There was a failure building this commit
Details
gitea/salix/2138-zone_event_m3 There was a failure building this commit
Details
This commit is contained in:
parent
70b0143f0a
commit
9849c60651
|
@ -23,7 +23,7 @@
|
|||
<section
|
||||
ng-repeat="day in ::$ctrl.weekDays"
|
||||
translate-attr="::{title: day.name}"
|
||||
ng-click="$ctrl.selectWeekDay(day.index)">
|
||||
ng-click="$ctrl.selectWeekDay($event, day.index)">
|
||||
<span>{{::day.localeChar}}</span>
|
||||
</section>
|
||||
</div>
|
||||
|
@ -38,7 +38,7 @@
|
|||
on-last="$ctrl.repeatLast()">
|
||||
<div
|
||||
class="day-number"
|
||||
ng-click="$ctrl.select(day)">
|
||||
ng-click="$ctrl.select($event, day)">
|
||||
{{::day | date: 'd'}}
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
@ -127,10 +127,11 @@ export default class Calendar extends FormInput {
|
|||
/*
|
||||
* Day selection event
|
||||
*/
|
||||
select(day) {
|
||||
select($event, day) {
|
||||
if (!this.editable) return;
|
||||
this.change(day);
|
||||
this.emit('selection', {
|
||||
$event: $event,
|
||||
$days: [day],
|
||||
$type: 'day'
|
||||
});
|
||||
|
@ -140,7 +141,7 @@ export default class Calendar extends FormInput {
|
|||
/*
|
||||
* WeekDay selection event
|
||||
*/
|
||||
selectWeekDay(weekday) {
|
||||
selectWeekDay($event, weekday) {
|
||||
if (!this.editable) return;
|
||||
let days = [];
|
||||
for (let day of this.days) {
|
||||
|
@ -149,6 +150,7 @@ export default class Calendar extends FormInput {
|
|||
}
|
||||
this.field = days[0];
|
||||
this.emit('selection', {
|
||||
$event: $event,
|
||||
$days: days,
|
||||
$type: 'weekday',
|
||||
$weekday: weekday
|
||||
|
|
|
@ -37,6 +37,21 @@ export default class Popover extends Popup {
|
|||
super.hide();
|
||||
}
|
||||
|
||||
get parent() {
|
||||
return this.__parent;
|
||||
}
|
||||
|
||||
set parent(value) {
|
||||
this.__parent = value;
|
||||
|
||||
if (!value) return;
|
||||
|
||||
const parentRect = value.getBoundingClientRect();
|
||||
this.parentRect = {};
|
||||
for (let prop in parentRect)
|
||||
this.parentRect[prop] = parentRect[prop];
|
||||
}
|
||||
|
||||
/**
|
||||
* Repositions the popover to a correct location relative to the parent.
|
||||
*/
|
||||
|
@ -55,7 +70,7 @@ export default class Popover extends Popup {
|
|||
arrowStyle.top = '';
|
||||
arrowStyle.bottom = '';
|
||||
|
||||
let parentRect = this.parent.getBoundingClientRect();
|
||||
let parentRect = this.parentRect;
|
||||
let popoverRect = this.windowEl.getBoundingClientRect();
|
||||
let arrowRect = arrow.getBoundingClientRect();
|
||||
let clamp = (value, min, max) => Math.min(Math.max(value, min), max);
|
||||
|
|
|
@ -0,0 +1,25 @@
|
|||
const popover = {
|
||||
show: () => {
|
||||
return {
|
||||
then: callback => {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
},
|
||||
hide: () => {
|
||||
return {
|
||||
then: callback => {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
},
|
||||
relocate: () => {
|
||||
return {
|
||||
then: callback => {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = popover;
|
|
@ -25,7 +25,7 @@
|
|||
hide-contiguous="true"
|
||||
has-events="$ctrl.hasEvents($day)"
|
||||
get-class="$ctrl.getClass($day)"
|
||||
on-selection="$ctrl.onSelection($days, $type, $weekday)"
|
||||
on-selection="$ctrl.onSelection($event, $days, $type, $weekday)"
|
||||
class="vn-pa-md"
|
||||
style="min-width: 250px; flex: 1;">
|
||||
</vn-calendar>
|
||||
|
|
|
@ -130,7 +130,7 @@ class Controller extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
onSelection($days, $type, $weekday) {
|
||||
onSelection($event, $days, $type, $weekday) {
|
||||
let $events = [];
|
||||
let $exclusions = [];
|
||||
|
||||
|
@ -141,6 +141,7 @@ class Controller extends Component {
|
|||
}
|
||||
|
||||
this.emit('selection', {
|
||||
$event,
|
||||
$days,
|
||||
$type,
|
||||
$weekday,
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import './index.js';
|
||||
|
||||
describe('Agency Component vnZoneCard', () => {
|
||||
describe('Zone Component vnZoneCard', () => {
|
||||
let controller;
|
||||
let $httpBackend;
|
||||
let data = {id: 1, name: 'fooName'};
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import './index';
|
||||
import watcher from 'core/mocks/watcher';
|
||||
|
||||
describe('Agency Component vnZoneCreate', () => {
|
||||
describe('Zone Component vnZoneCreate', () => {
|
||||
let $scope;
|
||||
let $state;
|
||||
let controller;
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
<div class="vn-w-md">
|
||||
<vn-zone-calendar
|
||||
data="data">
|
||||
data="data"
|
||||
on-selection="$ctrl.onSelection($event, $events)">
|
||||
</vn-zone-calendar>
|
||||
</div>
|
||||
<vn-side-menu side="right">
|
||||
|
@ -31,3 +32,11 @@
|
|||
<vn-submit label="Query" class="vn-mt-sm"></vn-submit>
|
||||
</form>
|
||||
</vn-side-menu>
|
||||
|
||||
<!-- Zone Popover -->
|
||||
<vn-popover vn-id="zoneEvents">
|
||||
<div class="zoneEvents">
|
||||
<div class="header vn-pa-sm" translate>Zones</div>
|
||||
<vn-zone-index vn-id="zoneIndex"></vn-zone-index>
|
||||
</div>
|
||||
</vn-popover>
|
|
@ -17,6 +17,27 @@ class Controller extends Section {
|
|||
this.vnApp.showMessage(this.$t('No service for the specified zone'));
|
||||
});
|
||||
}
|
||||
|
||||
onSelection($event, $events) {
|
||||
if (!$events.length) return;
|
||||
|
||||
const zones = [];
|
||||
for (let event of $events)
|
||||
zones.push(event.zoneFk);
|
||||
|
||||
this.$.zoneEvents.show($event.target);
|
||||
const zoneIndex = this.$.zoneIndex;
|
||||
const zoneModel = zoneIndex.$scope.model;
|
||||
zoneModel.applyFilter({
|
||||
include: {
|
||||
relation: 'agencyMode',
|
||||
scope: {fields: ['name']}
|
||||
},
|
||||
where: {
|
||||
id: {inq: zones}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
ngModule.component('vnZoneDeliveryDays', {
|
||||
|
|
|
@ -0,0 +1,41 @@
|
|||
import './index.js';
|
||||
import popover from 'core/mocks/popover';
|
||||
import crudModel from 'core/mocks/crud-model';
|
||||
|
||||
fdescribe('Zone Component vnZoneDeliveryDays', () => {
|
||||
let $componentController;
|
||||
let controller;
|
||||
let $element;
|
||||
|
||||
beforeEach(ngModule('zone'));
|
||||
|
||||
beforeEach(angular.mock.inject(_$componentController_ => {
|
||||
$componentController = _$componentController_;
|
||||
$element = angular.element('<vn-zone-delivery-days></vn-zone-delivery-days');
|
||||
controller = $componentController('vnZoneDeliveryDays', {$element});
|
||||
controller.$.zoneEvents = popover;
|
||||
controller.$.zoneIndex = {
|
||||
$scope: {
|
||||
model: crudModel
|
||||
}
|
||||
};
|
||||
}));
|
||||
|
||||
describe('onSelection()', () => {
|
||||
it('should return', () => {
|
||||
jest.spyOn(controller.$.zoneEvents, 'show');
|
||||
|
||||
const $event = new Event('click');
|
||||
const target = angular.element('<div>My target</div>'); // crear con DOM?
|
||||
target.dispatchEvent($event);
|
||||
const $events = [
|
||||
{zoneFk: 1},
|
||||
{zoneFk: 2},
|
||||
{zoneFk: 8}
|
||||
];
|
||||
controller.onSelection($event, $events);
|
||||
|
||||
expect(controller.$.zoneEvents.show).toHaveBeenCalledWith();
|
||||
});
|
||||
});
|
||||
});
|
|
@ -1,3 +1,4 @@
|
|||
@import "variables";
|
||||
|
||||
vn-zone-delivery-days {
|
||||
vn-zone-calendar {
|
||||
|
@ -13,4 +14,27 @@ vn-zone-delivery-days {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.zoneEvents {
|
||||
width: 700px;
|
||||
max-height: 450px;
|
||||
|
||||
vn-float-button {
|
||||
display: none
|
||||
}
|
||||
|
||||
vn-data-viewer {
|
||||
margin-bottom: 0;
|
||||
vn-pagination {
|
||||
padding: 0
|
||||
}
|
||||
}
|
||||
|
||||
& > .header {
|
||||
background-color: $color-main;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-align: center
|
||||
}
|
||||
}
|
|
@ -4,7 +4,7 @@
|
|||
filter="::$ctrl.filter"
|
||||
limit="20"
|
||||
data="zones"
|
||||
auto-load="true">
|
||||
auto-load="false">
|
||||
</vn-crud-model>
|
||||
<vn-auto-search
|
||||
model="model"
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import './index.js';
|
||||
|
||||
describe('Agency Component vnZoneIndex', () => {
|
||||
describe('Zone Component vnZoneIndex', () => {
|
||||
let $componentController;
|
||||
let controller;
|
||||
|
||||
|
|
Loading…
Reference in New Issue