Added popover
gitea/salix/2138-zone_event_m3 There was a failure building this commit Details

This commit is contained in:
Joan Sanchez 2020-02-26 07:02:03 +01:00
parent 70b0143f0a
commit 9849c60651
14 changed files with 150 additions and 12 deletions

View File

@ -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>

View File

@ -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

View File

@ -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);

View File

@ -0,0 +1,25 @@
const popover = {
show: () => {
return {
then: callback => {
callback();
}
};
},
hide: () => {
return {
then: callback => {
callback();
}
};
},
relocate: () => {
return {
then: callback => {
callback();
}
};
}
};
module.exports = popover;

View File

@ -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>

View File

@ -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,

View File

@ -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'};

View File

@ -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;

View File

@ -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>

View File

@ -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', {

View File

@ -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();
});
});
});

View File

@ -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
}
}

View File

@ -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"

View File

@ -1,6 +1,6 @@
import './index.js';
describe('Agency Component vnZoneIndex', () => {
describe('Zone Component vnZoneIndex', () => {
let $componentController;
let controller;