Agency events - First stable version
This commit is contained in:
parent
72017a64ac
commit
2436bf9488
|
|
@ -136,7 +136,7 @@ export default {
|
||||||
addCreditFloatButton: `vn-float-button`,
|
addCreditFloatButton: `vn-float-button`,
|
||||||
creditInput: `vn-input-number input[name="credit"]`,
|
creditInput: `vn-input-number input[name="credit"]`,
|
||||||
saveButton: `button[type=submit]`,
|
saveButton: `button[type=submit]`,
|
||||||
firstCreditText: 'vn-client-credit-index vn-card > div vn-table vn-tbody > vn-tr'
|
firstCreditText: 'vn-client-credit-index vn-card vn-table vn-tbody > vn-tr'
|
||||||
},
|
},
|
||||||
clientGreuge: {
|
clientGreuge: {
|
||||||
addGreugeFloatButton: `vn-float-button`,
|
addGreugeFloatButton: `vn-float-button`,
|
||||||
|
|
@ -144,13 +144,13 @@ export default {
|
||||||
descriptionInput: `vn-textfield input[name="description"]`,
|
descriptionInput: `vn-textfield input[name="description"]`,
|
||||||
typeAutocomplete: 'vn-autocomplete[ng-model="$ctrl.greuge.greugeTypeFk"]',
|
typeAutocomplete: 'vn-autocomplete[ng-model="$ctrl.greuge.greugeTypeFk"]',
|
||||||
saveButton: `button[type=submit]`,
|
saveButton: `button[type=submit]`,
|
||||||
firstGreugeText: 'vn-client-greuge-index vn-card > div vn-table vn-tbody > vn-tr'
|
firstGreugeText: 'vn-client-greuge-index vn-card vn-table vn-tbody > vn-tr'
|
||||||
},
|
},
|
||||||
clientMandate: {
|
clientMandate: {
|
||||||
firstMandateText: 'vn-client-mandate vn-card > div vn-table vn-tbody > vn-tr'
|
firstMandateText: 'vn-client-mandate vn-card vn-table vn-tbody > vn-tr'
|
||||||
},
|
},
|
||||||
clientInvoices: {
|
clientInvoices: {
|
||||||
firstInvoiceText: 'vn-client-invoice vn-card > div vn-table vn-tbody > vn-tr'
|
firstInvoiceText: 'vn-client-invoice vn-card vn-table vn-tbody > vn-tr'
|
||||||
},
|
},
|
||||||
clientLog: {
|
clientLog: {
|
||||||
logButton: 'vn-left-menu a[ui-sref="client.card.log"]',
|
logButton: 'vn-left-menu a[ui-sref="client.card.log"]',
|
||||||
|
|
@ -307,7 +307,7 @@ export default {
|
||||||
fifthLineCreatedProperty: 'vn-item-log > vn-log vn-tbody > vn-tr:nth-child(5) > vn-td > vn-one:nth-child(3) > div span:nth-child(3)',
|
fifthLineCreatedProperty: 'vn-item-log > vn-log vn-tbody > vn-tr:nth-child(5) > vn-td > vn-one:nth-child(3) > div span:nth-child(3)',
|
||||||
},
|
},
|
||||||
ticketSummary: {
|
ticketSummary: {
|
||||||
header: 'vn-ticket-summary > vn-card > div > h5',
|
header: 'vn-ticket-summary > vn-card > h5',
|
||||||
state: 'vn-ticket-summary vn-label-value[label="State"] > section > span',
|
state: 'vn-ticket-summary vn-label-value[label="State"] > section > span',
|
||||||
route: 'vn-ticket-summary vn-label-value[label="Route"] > section > a',
|
route: 'vn-ticket-summary vn-label-value[label="Route"] > section > a',
|
||||||
total: 'vn-ticket-summary vn-one.taxes > p:nth-child(3) > strong',
|
total: 'vn-ticket-summary vn-one.taxes > p:nth-child(3) > strong',
|
||||||
|
|
@ -319,14 +319,14 @@ export default {
|
||||||
popoverDiaryButton: '.vn-popover.shown vn-item-descriptor vn-icon[icon="icon-transaction"]',
|
popoverDiaryButton: '.vn-popover.shown vn-item-descriptor vn-icon[icon="icon-transaction"]',
|
||||||
firstSaleQuantity: 'vn-ticket-summary [name="sales"] vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(3)',
|
firstSaleQuantity: 'vn-ticket-summary [name="sales"] vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(3)',
|
||||||
firstSaleDiscount: 'vn-ticket-summary [name="sales"] vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(6)',
|
firstSaleDiscount: 'vn-ticket-summary [name="sales"] vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(6)',
|
||||||
invoiceOutRef: 'vn-ticket-summary > vn-card > div > vn-horizontal > vn-one:nth-child(1) > vn-label-value:nth-child(6) > section > span',
|
invoiceOutRef: 'vn-ticket-summary > vn-card > vn-horizontal > vn-one:nth-child(1) > vn-label-value:nth-child(6) > section > span',
|
||||||
setOk: 'vn-ticket-summary vn-button[label="SET OK"] > button'
|
setOk: 'vn-ticket-summary vn-button[label="SET OK"] > button'
|
||||||
},
|
},
|
||||||
ticketsIndex: {
|
ticketsIndex: {
|
||||||
openAdvancedSearchButton: 'vn-ticket-index vn-searchbar .append vn-icon[icon="arrow_drop_down"]',
|
openAdvancedSearchButton: 'vn-ticket-index vn-searchbar .append vn-icon[icon="arrow_drop_down"]',
|
||||||
advancedSearchInvoiceOut: 'vn-ticket-search-panel vn-textfield[ng-model="filter.refFk"] input',
|
advancedSearchInvoiceOut: 'vn-ticket-search-panel vn-textfield[ng-model="filter.refFk"] input',
|
||||||
newTicketButton: 'vn-ticket-index > a',
|
newTicketButton: 'vn-ticket-index > a',
|
||||||
searchResult: 'vn-ticket-index vn-card > div > vn-table > div > vn-tbody > a.vn-tr',
|
searchResult: 'vn-ticket-index vn-card > vn-table > div > vn-tbody > a.vn-tr',
|
||||||
searchWeeklyResult: 'vn-ticket-weekly-index vn-table vn-tbody > vn-tr',
|
searchWeeklyResult: 'vn-ticket-weekly-index vn-table vn-tbody > vn-tr',
|
||||||
searchResultDate: 'vn-ticket-index vn-table vn-tbody > a:nth-child(1) > vn-td:nth-child(5)',
|
searchResultDate: 'vn-ticket-index vn-table vn-tbody > a:nth-child(1) > vn-td:nth-child(5)',
|
||||||
searchTicketInput: `vn-ticket-index vn-textfield input`,
|
searchTicketInput: `vn-ticket-index vn-textfield input`,
|
||||||
|
|
@ -403,7 +403,7 @@ export default {
|
||||||
saleDescriptorPopoverSummaryButton: '.vn-popover.shown vn-item-descriptor a[ui-sref="item.card.summary({id: $ctrl.item.id})"]',
|
saleDescriptorPopoverSummaryButton: '.vn-popover.shown vn-item-descriptor a[ui-sref="item.card.summary({id: $ctrl.item.id})"]',
|
||||||
descriptorItemDiaryButton: 'vn-item-descriptor .quicklinks.ng-scope > vn-horizontal > a > vn-icon > i',
|
descriptorItemDiaryButton: 'vn-item-descriptor .quicklinks.ng-scope > vn-horizontal > a > vn-icon > i',
|
||||||
newItemFromCatalogButton: 'vn-ticket-sale vn-float-button[icon="add"]',
|
newItemFromCatalogButton: 'vn-ticket-sale vn-float-button[icon="add"]',
|
||||||
newItemButton: 'vn-ticket-sale > vn-vertical > vn-card > div > vn-vertical > vn-one > vn-icon-button > button > vn-icon > i',
|
newItemButton: 'vn-ticket-sale > vn-vertical > vn-card > vn-vertical > vn-one > vn-icon-button > button > vn-icon > i',
|
||||||
moreMenu: 'vn-ticket-sale vn-tool-bar > vn-button-menu[vn-id="more-button"] > div > button',
|
moreMenu: 'vn-ticket-sale vn-tool-bar > vn-button-menu[vn-id="more-button"] > div > button',
|
||||||
moreMenuCreateClaim: '.vn-popover.shown .vn-drop-down li[name="Add claim"]',
|
moreMenuCreateClaim: '.vn-popover.shown .vn-drop-down li[name="Add claim"]',
|
||||||
moreMenuReserve: '.vn-popover.shown .vn-drop-down li[name="Mark as reserved"]',
|
moreMenuReserve: '.vn-popover.shown .vn-drop-down li[name="Mark as reserved"]',
|
||||||
|
|
@ -443,7 +443,7 @@ export default {
|
||||||
secondSaleQuantity: 'vn-ticket-sale vn-table vn-tr:nth-child(2) vn-input-number input',
|
secondSaleQuantity: 'vn-ticket-sale vn-table vn-tr:nth-child(2) vn-input-number input',
|
||||||
secondSaleConceptCell: 'vn-ticket-sale vn-table vn-tbody > vn-tr:nth-child(2) > vn-td-editable:nth-child(6)',
|
secondSaleConceptCell: 'vn-ticket-sale vn-table vn-tbody > vn-tr:nth-child(2) > vn-td-editable:nth-child(6)',
|
||||||
secondSaleConceptInput: 'vn-ticket-sale vn-table vn-tr:nth-child(2) > vn-td-editable.ng-isolate-scope.selected vn-textfield input',
|
secondSaleConceptInput: 'vn-ticket-sale vn-table vn-tr:nth-child(2) > vn-td-editable.ng-isolate-scope.selected vn-textfield input',
|
||||||
totalImport: 'vn-ticket-sale > vn-vertical > vn-card > div > vn-vertical > vn-horizontal > vn-one > p:nth-child(3) > strong',
|
totalImport: 'vn-ticket-sale > vn-vertical > vn-card > vn-vertical > vn-horizontal > vn-one > p:nth-child(3) > strong',
|
||||||
selectAllSalesCheckbox: 'vn-ticket-sale vn-thead vn-check',
|
selectAllSalesCheckbox: 'vn-ticket-sale vn-thead vn-check',
|
||||||
secondSaleCheckbox: 'vn-ticket-sale vn-tr:nth-child(2) vn-check[ng-model="sale.checked"]',
|
secondSaleCheckbox: 'vn-ticket-sale vn-tr:nth-child(2) vn-check[ng-model="sale.checked"]',
|
||||||
thirdSaleCheckbox: 'vn-ticket-sale vn-tr:nth-child(3) vn-check[ng-model="sale.checked"]',
|
thirdSaleCheckbox: 'vn-ticket-sale vn-tr:nth-child(3) vn-check[ng-model="sale.checked"]',
|
||||||
|
|
@ -472,7 +472,7 @@ export default {
|
||||||
zoneAutocomplete: 'vn-autocomplete[ng-model="$ctrl.zoneId"]',
|
zoneAutocomplete: 'vn-autocomplete[ng-model="$ctrl.zoneId"]',
|
||||||
nextStepButton: 'vn-step-control .buttons > section:last-child vn-button',
|
nextStepButton: 'vn-step-control .buttons > section:last-child vn-button',
|
||||||
finalizeButton: 'vn-step-control .buttons > section:last-child button[type=submit]',
|
finalizeButton: 'vn-step-control .buttons > section:last-child button[type=submit]',
|
||||||
stepTwoTotalPriceDif: 'vn-ticket-basic-data-step-two > form > vn-card > div > vn-horizontal > table > tfoot > tr > td:nth-child(4)',
|
stepTwoTotalPriceDif: 'vn-ticket-basic-data-step-two > form > vn-card > vn-horizontal > table > tfoot > tr > td:nth-child(4)',
|
||||||
chargesReasonAutocomplete: 'vn-autocomplete[ng-model="$ctrl.ticket.option"]',
|
chargesReasonAutocomplete: 'vn-autocomplete[ng-model="$ctrl.ticket.option"]',
|
||||||
},
|
},
|
||||||
ticketComponents: {
|
ticketComponents: {
|
||||||
|
|
@ -481,7 +481,7 @@ export default {
|
||||||
ticketRequests: {
|
ticketRequests: {
|
||||||
addRequestButton: 'vn-ticket-request-index > a > vn-float-button > button',
|
addRequestButton: 'vn-ticket-request-index > a > vn-float-button > button',
|
||||||
request: 'vn-ticket-request-index vn-table vn-tr',
|
request: 'vn-ticket-request-index vn-table vn-tr',
|
||||||
descriptionInput: 'vn-ticket-request-create > form > div > vn-card > div > vn-horizontal:nth-child(1) > vn-textfield input',
|
descriptionInput: 'vn-ticket-request-create > form > div > vn-card > vn-horizontal:nth-child(1) > vn-textfield input',
|
||||||
atenderAutocomplete: 'vn-ticket-request-create vn-autocomplete[ng-model="$ctrl.ticketRequest.atenderFk"]',
|
atenderAutocomplete: 'vn-ticket-request-create vn-autocomplete[ng-model="$ctrl.ticketRequest.atenderFk"]',
|
||||||
quantityInput: 'vn-ticket-request-create vn-input-number input[name=quantity]',
|
quantityInput: 'vn-ticket-request-create vn-input-number input[name=quantity]',
|
||||||
priceInput: 'vn-ticket-request-create vn-input-number input[name=price]',
|
priceInput: 'vn-ticket-request-create vn-input-number input[name=price]',
|
||||||
|
|
@ -505,7 +505,7 @@ export default {
|
||||||
firstVatTypeAutocomplete: 'vn-ticket-service vn-autocomplete[label="Tax class"]',
|
firstVatTypeAutocomplete: 'vn-ticket-service vn-autocomplete[label="Tax class"]',
|
||||||
fistDeleteServiceButton: 'vn-ticket-service form vn-horizontal:nth-child(1) vn-icon-button[icon="delete"]',
|
fistDeleteServiceButton: 'vn-ticket-service form vn-horizontal:nth-child(1) vn-icon-button[icon="delete"]',
|
||||||
newDescriptionInput: 'vn-ticket-service > vn-dialog vn-textfield[ng-model="$ctrl.newServiceType.name"] input',
|
newDescriptionInput: 'vn-ticket-service > vn-dialog vn-textfield[ng-model="$ctrl.newServiceType.name"] input',
|
||||||
serviceLine: 'vn-ticket-service > form > vn-card > div > vn-one:nth-child(2) > vn-horizontal',
|
serviceLine: 'vn-ticket-service > form > vn-card > vn-one:nth-child(2) > vn-horizontal',
|
||||||
saveServiceButton: `button[type=submit]`,
|
saveServiceButton: `button[type=submit]`,
|
||||||
saveDescriptionButton: 'vn-ticket-service > vn-dialog[vn-id="createServiceTypeDialog"] > div > form > div.buttons > tpl-buttons > button'
|
saveDescriptionButton: 'vn-ticket-service > vn-dialog[vn-id="createServiceTypeDialog"] > div > form > div.buttons > tpl-buttons > button'
|
||||||
},
|
},
|
||||||
|
|
@ -517,7 +517,7 @@ export default {
|
||||||
},
|
},
|
||||||
claimsIndex: {
|
claimsIndex: {
|
||||||
searchClaimInput: `vn-claim-index vn-textfield input`,
|
searchClaimInput: `vn-claim-index vn-textfield input`,
|
||||||
searchResult: 'vn-claim-index vn-card > div > vn-table > div > vn-tbody > a',
|
searchResult: 'vn-claim-index vn-card > vn-table > div > vn-tbody > a',
|
||||||
searchButton: 'vn-claim-index vn-searchbar vn-icon[icon="search"]'
|
searchButton: 'vn-claim-index vn-searchbar vn-icon[icon="search"]'
|
||||||
},
|
},
|
||||||
claimDescriptor: {
|
claimDescriptor: {
|
||||||
|
|
@ -526,7 +526,7 @@ export default {
|
||||||
acceptDeleteClaim: 'vn-claim-descriptor > vn-confirm[vn-id="confirm-delete-claim"] button[response="ACCEPT"]'
|
acceptDeleteClaim: 'vn-claim-descriptor > vn-confirm[vn-id="confirm-delete-claim"] button[response="ACCEPT"]'
|
||||||
},
|
},
|
||||||
claimSummary: {
|
claimSummary: {
|
||||||
header: 'vn-claim-summary > vn-card > div > h5',
|
header: 'vn-claim-summary > vn-card > h5',
|
||||||
state: 'vn-claim-summary vn-label-value[label="State"] > section > span',
|
state: 'vn-claim-summary vn-label-value[label="State"] > section > span',
|
||||||
observation: 'vn-claim-summary vn-textarea[ng-model="$ctrl.summary.claim.observation"] textarea',
|
observation: 'vn-claim-summary vn-textarea[ng-model="$ctrl.summary.claim.observation"] textarea',
|
||||||
firstSaleItemId: 'vn-claim-summary vn-horizontal > vn-auto:nth-child(4) vn-table > div > vn-tbody > vn-tr:nth-child(1) > vn-td:nth-child(1) > span',
|
firstSaleItemId: 'vn-claim-summary vn-horizontal > vn-auto:nth-child(4) vn-table > div > vn-tbody > vn-tr:nth-child(1) > vn-td:nth-child(1) > span',
|
||||||
|
|
@ -535,7 +535,7 @@ export default {
|
||||||
itemDescriptorPopoverItemDiaryButton: '.vn-popover.shown vn-item-descriptor a[href="#!/item/2/diary"]',
|
itemDescriptorPopoverItemDiaryButton: '.vn-popover.shown vn-item-descriptor a[href="#!/item/2/diary"]',
|
||||||
firstDevelopmentWorker: 'vn-claim-summary vn-horizontal > vn-auto:nth-child(5) vn-table > div > vn-tbody > vn-tr:nth-child(1) > vn-td:nth-child(4) > span',
|
firstDevelopmentWorker: 'vn-claim-summary vn-horizontal > vn-auto:nth-child(5) vn-table > div > vn-tbody > vn-tr:nth-child(1) > vn-td:nth-child(4) > span',
|
||||||
firstDevelopmentWorkerGoToClientButton: '.vn-popover.shown vn-worker-descriptor div.quicklinks > a[href="#!/client/21/summary"]',
|
firstDevelopmentWorkerGoToClientButton: '.vn-popover.shown vn-worker-descriptor div.quicklinks > a[href="#!/client/21/summary"]',
|
||||||
firstActionTicketId: 'vn-claim-summary > vn-card > div > vn-horizontal > vn-auto:nth-child(6) vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(2) > span',
|
firstActionTicketId: 'vn-claim-summary > vn-card > vn-horizontal > vn-auto:nth-child(6) vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(2) > span',
|
||||||
firstActionTicketDescriptor: '.vn-popover.shown vn-ticket-descriptor'
|
firstActionTicketDescriptor: '.vn-popover.shown vn-ticket-descriptor'
|
||||||
},
|
},
|
||||||
claimBasicData: {
|
claimBasicData: {
|
||||||
|
|
@ -545,19 +545,19 @@ export default {
|
||||||
saveButton: `button[type=submit]`
|
saveButton: `button[type=submit]`
|
||||||
},
|
},
|
||||||
claimDetail: {
|
claimDetail: {
|
||||||
secondItemDiscount: 'vn-claim-detail > vn-vertical > vn-card > div > vn-vertical > vn-table > div > vn-tbody > vn-tr:nth-child(2) > vn-td:nth-child(6) > span',
|
secondItemDiscount: 'vn-claim-detail > vn-vertical > vn-card > vn-vertical > vn-table > div > vn-tbody > vn-tr:nth-child(2) > vn-td:nth-child(6) > span',
|
||||||
discountInput: '.vn-popover.shown vn-input-number[ng-model="$ctrl.newDiscount"] input',
|
discountInput: '.vn-popover.shown vn-input-number[ng-model="$ctrl.newDiscount"] input',
|
||||||
discoutPopoverMana: '.vn-popover.shown .content > div > vn-horizontal > h5',
|
discoutPopoverMana: '.vn-popover.shown .content > div > vn-horizontal > h5',
|
||||||
addItemButton: 'vn-claim-detail a vn-float-button',
|
addItemButton: 'vn-claim-detail a vn-float-button',
|
||||||
firstClaimableSaleFromTicket: 'vn-claim-detail > vn-dialog vn-tbody > vn-tr',
|
firstClaimableSaleFromTicket: 'vn-claim-detail > vn-dialog vn-tbody > vn-tr',
|
||||||
claimDetailLine: 'vn-claim-detail > vn-vertical > vn-card > div > vn-vertical > vn-table > div > vn-tbody > vn-tr',
|
claimDetailLine: 'vn-claim-detail > vn-vertical > vn-card > vn-vertical > vn-table > div > vn-tbody > vn-tr',
|
||||||
firstItemQuantityInput: 'vn-claim-detail vn-tr:nth-child(1) vn-input-number[ng-model="saleClaimed.quantity"] input',
|
firstItemQuantityInput: 'vn-claim-detail vn-tr:nth-child(1) vn-input-number[ng-model="saleClaimed.quantity"] input',
|
||||||
totalClaimed: 'vn-claim-detail > vn-vertical > vn-card > div > vn-vertical > vn-horizontal > div > vn-label-value:nth-child(2) > section > span',
|
totalClaimed: 'vn-claim-detail > vn-vertical > vn-card > vn-vertical > vn-horizontal > div > vn-label-value:nth-child(2) > section > span',
|
||||||
secondItemDeleteButton: 'vn-claim-detail > vn-vertical > vn-card > div > vn-vertical > vn-table > div > vn-tbody > vn-tr:nth-child(2) > vn-td:nth-child(8) > vn-icon-button > button > vn-icon > i'
|
secondItemDeleteButton: 'vn-claim-detail > vn-vertical > vn-card > vn-vertical > vn-table > div > vn-tbody > vn-tr:nth-child(2) > vn-td:nth-child(8) > vn-icon-button > button > vn-icon > i'
|
||||||
},
|
},
|
||||||
claimDevelopment: {
|
claimDevelopment: {
|
||||||
addDevelopmentButton: 'vn-claim-development > vn-vertical > vn-card > div > vn-vertical > vn-one > vn-icon-button > button > vn-icon',
|
addDevelopmentButton: 'vn-claim-development > vn-vertical > vn-card > vn-vertical > vn-one > vn-icon-button > button > vn-icon',
|
||||||
firstDeleteDevelopmentButton: 'vn-claim-development > vn-vertical > vn-card > div > vn-vertical > form > vn-horizontal:nth-child(2) > vn-icon-button > button > vn-icon',
|
firstDeleteDevelopmentButton: 'vn-claim-development > vn-vertical > vn-card > vn-vertical > form > vn-horizontal:nth-child(2) > vn-icon-button > button > vn-icon',
|
||||||
firstClaimReasonAutocomplete: 'vn-claim-development vn-horizontal:nth-child(1) vn-autocomplete[ng-model="claimDevelopment.claimReasonFk"]',
|
firstClaimReasonAutocomplete: 'vn-claim-development vn-horizontal:nth-child(1) vn-autocomplete[ng-model="claimDevelopment.claimReasonFk"]',
|
||||||
firstClaimResultAutocomplete: 'vn-claim-development vn-horizontal:nth-child(1) vn-autocomplete[ng-model="claimDevelopment.claimResultFk"]',
|
firstClaimResultAutocomplete: 'vn-claim-development vn-horizontal:nth-child(1) vn-autocomplete[ng-model="claimDevelopment.claimResultFk"]',
|
||||||
firstClaimResponsibleAutocomplete: 'vn-claim-development vn-horizontal:nth-child(1) vn-autocomplete[ng-model="claimDevelopment.claimResponsibleFk"]',
|
firstClaimResponsibleAutocomplete: 'vn-claim-development vn-horizontal:nth-child(1) vn-autocomplete[ng-model="claimDevelopment.claimResponsibleFk"]',
|
||||||
|
|
@ -580,7 +580,7 @@ export default {
|
||||||
isPaidWithManaCheckbox: 'vn-check[ng-model="$ctrl.claim.isChargedToMana"]'
|
isPaidWithManaCheckbox: 'vn-check[ng-model="$ctrl.claim.isChargedToMana"]'
|
||||||
},
|
},
|
||||||
ordersIndex: {
|
ordersIndex: {
|
||||||
searchResult: 'vn-order-index vn-card > div > vn-table > div > vn-tbody > a.vn-tr',
|
searchResult: 'vn-order-index vn-card > vn-table > div > vn-tbody > a.vn-tr',
|
||||||
searchResultDate: 'vn-order-index vn-table vn-tbody > a:nth-child(1) > vn-td:nth-child(4)',
|
searchResultDate: 'vn-order-index vn-table vn-tbody > a:nth-child(1) > vn-td:nth-child(4)',
|
||||||
searchResultAddress: 'vn-order-index vn-table vn-tbody > a:nth-child(1) > vn-td:nth-child(6)',
|
searchResultAddress: 'vn-order-index vn-table vn-tbody > a:nth-child(1) > vn-td:nth-child(6)',
|
||||||
searchOrderInput: `vn-order-index vn-textfield input`,
|
searchOrderInput: `vn-order-index vn-textfield input`,
|
||||||
|
|
@ -641,7 +641,7 @@ export default {
|
||||||
volume: 'vn-route-descriptor vn-label-value[label="Volume"] > section > span'
|
volume: 'vn-route-descriptor vn-label-value[label="Volume"] > section > span'
|
||||||
},
|
},
|
||||||
routeSummary: {
|
routeSummary: {
|
||||||
routeId: 'vn-route-summary > vn-card > div > vn-horizontal > vn-one:nth-child(1) > vn-label-value:nth-child(1) > section > span'
|
routeId: 'vn-route-summary > vn-card > vn-horizontal > vn-one:nth-child(1) > vn-label-value:nth-child(1) > section > span'
|
||||||
},
|
},
|
||||||
routeBasicData: {
|
routeBasicData: {
|
||||||
workerAutoComplete: 'vn-route-basic-data vn-autocomplete[ng-model="$ctrl.route.workerFk"]',
|
workerAutoComplete: 'vn-route-basic-data vn-autocomplete[ng-model="$ctrl.route.workerFk"]',
|
||||||
|
|
@ -671,57 +671,57 @@ export default {
|
||||||
},
|
},
|
||||||
workerTimeControl: {
|
workerTimeControl: {
|
||||||
timeDialogInput: '.vn-dialog.shown [ng-model="$ctrl.newTime"]',
|
timeDialogInput: '.vn-dialog.shown [ng-model="$ctrl.newTime"]',
|
||||||
mondayAddTimeButton: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tfoot > vn-tr:nth-child(2) > vn-td:nth-child(1) > vn-icon-button > button > vn-icon',
|
mondayAddTimeButton: 'vn-worker-time-control vn-table > div > vn-tfoot > vn-tr:nth-child(2) > vn-td:nth-child(1) > vn-icon-button',
|
||||||
tuesdayAddTimeButton: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tfoot > vn-tr:nth-child(2) > vn-td:nth-child(2) > vn-icon-button > button > vn-icon',
|
tuesdayAddTimeButton: 'vn-worker-time-control vn-table > div > vn-tfoot > vn-tr:nth-child(2) > vn-td:nth-child(2) > vn-icon-button',
|
||||||
wednesdayAddTimeButton: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tfoot > vn-tr:nth-child(2) > vn-td:nth-child(3) > vn-icon-button > button > vn-icon',
|
wednesdayAddTimeButton: 'vn-worker-time-control vn-table > div > vn-tfoot > vn-tr:nth-child(2) > vn-td:nth-child(3) > vn-icon-button',
|
||||||
thursdayAddTimeButton: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tfoot > vn-tr:nth-child(2) > vn-td:nth-child(4) > vn-icon-button > button > vn-icon',
|
thursdayAddTimeButton: 'vn-worker-time-control vn-table > div > vn-tfoot > vn-tr:nth-child(2) > vn-td:nth-child(4) > vn-icon-button',
|
||||||
fridayAddTimeButton: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tfoot > vn-tr:nth-child(2) > vn-td:nth-child(5) > vn-icon-button > button > vn-icon',
|
fridayAddTimeButton: 'vn-worker-time-control vn-table > div > vn-tfoot > vn-tr:nth-child(2) > vn-td:nth-child(5) > vn-icon-button',
|
||||||
saturdayAddTimeButton: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tfoot > vn-tr:nth-child(2) > vn-td:nth-child(6) > vn-icon-button > button > vn-icon',
|
saturdayAddTimeButton: 'vn-worker-time-control vn-table > div > vn-tfoot > vn-tr:nth-child(2) > vn-td:nth-child(6) > vn-icon-button',
|
||||||
sundayAddTimeButton: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tfoot > vn-tr:nth-child(2) > vn-td:nth-child(7) > vn-icon-button > button > vn-icon',
|
sundayAddTimeButton: 'vn-worker-time-control vn-table > div > vn-tfoot > vn-tr:nth-child(2) > vn-td:nth-child(7) > vn-icon-button',
|
||||||
confirmButton: 'vn-worker-time-control > vn-dialog > div > form > div.buttons > tpl-buttons > button',
|
confirmButton: 'vn-worker-time-control > vn-dialog > div > form > div.buttons > tpl-buttons > button',
|
||||||
firstEntryOfMonday: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(1) > section:nth-child(1) > span',
|
firstEntryOfMonday: 'vn-worker-time-control vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(1) > section:nth-child(1) > span',
|
||||||
firstEntryOfTuesday: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(2) > section:nth-child(1) > span',
|
firstEntryOfTuesday: 'vn-worker-time-control vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(2) > section:nth-child(1) > span',
|
||||||
firstEntryOfWednesday: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(3) > section:nth-child(1) > span',
|
firstEntryOfWednesday: 'vn-worker-time-control vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(3) > section:nth-child(1) > span',
|
||||||
firstEntryOfThursday: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(4) > section:nth-child(1) > span',
|
firstEntryOfThursday: 'vn-worker-time-control vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(4) > section:nth-child(1) > span',
|
||||||
firstEntryOfFriday: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(5) > section:nth-child(1) > span',
|
firstEntryOfFriday: 'vn-worker-time-control vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(5) > section:nth-child(1) > span',
|
||||||
firstEntryOfSaturday: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(6) > section:nth-child(1) > span',
|
firstEntryOfSaturday: 'vn-worker-time-control vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(6) > section:nth-child(1) > span',
|
||||||
firstEntryOfSunday: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(7) > section:nth-child(1) > span',
|
firstEntryOfSunday: 'vn-worker-time-control vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(7) > section:nth-child(1) > span',
|
||||||
secondEntryOfMonday: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(1) > section:nth-child(2) > span',
|
secondEntryOfMonday: 'vn-worker-time-control vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(1) > section:nth-child(2) > span',
|
||||||
secondEntryOfTuesday: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(2) > section:nth-child(2) > span',
|
secondEntryOfTuesday: 'vn-worker-time-control vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(2) > section:nth-child(2) > span',
|
||||||
secondEntryOfWednesday: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(3) > section:nth-child(2) > span',
|
secondEntryOfWednesday: 'vn-worker-time-control vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(3) > section:nth-child(2) > span',
|
||||||
secondEntryOfThursday: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(4) > section:nth-child(2) > span',
|
secondEntryOfThursday: 'vn-worker-time-control vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(4) > section:nth-child(2) > span',
|
||||||
secondEntryOfFriday: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(5) > section:nth-child(2) > span',
|
secondEntryOfFriday: 'vn-worker-time-control vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(5) > section:nth-child(2) > span',
|
||||||
secondEntryOfSaturday: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(6) > section:nth-child(2) > span',
|
secondEntryOfSaturday: 'vn-worker-time-control vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(6) > section:nth-child(2) > span',
|
||||||
secondEntryOfSunday: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(7) > section:nth-child(2) > span',
|
secondEntryOfSunday: 'vn-worker-time-control vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(7) > section:nth-child(2) > span',
|
||||||
thirdEntryOfMonday: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(1) > section:nth-child(3) > span',
|
thirdEntryOfMonday: 'vn-worker-time-control vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(1) > section:nth-child(3) > span',
|
||||||
thirdEntryOfTuesday: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(2) > section:nth-child(3) > span',
|
thirdEntryOfTuesday: 'vn-worker-time-control vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(2) > section:nth-child(3) > span',
|
||||||
thirdEntryOfWednesday: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(3) > section:nth-child(3) > span',
|
thirdEntryOfWednesday: 'vn-worker-time-control vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(3) > section:nth-child(3) > span',
|
||||||
thirdEntryOfThursday: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(4) > section:nth-child(3) > span',
|
thirdEntryOfThursday: 'vn-worker-time-control vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(4) > section:nth-child(3) > span',
|
||||||
thirdEntryOfFriday: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(5) > section:nth-child(3) > span',
|
thirdEntryOfFriday: 'vn-worker-time-control vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(5) > section:nth-child(3) > span',
|
||||||
thirdEntryOfSaturday: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(6) > section:nth-child(3) > span',
|
thirdEntryOfSaturday: 'vn-worker-time-control vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(6) > section:nth-child(3) > span',
|
||||||
thirdEntryOfSunday: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(7) > section:nth-child(3) > span',
|
thirdEntryOfSunday: 'vn-worker-time-control vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(7) > section:nth-child(3) > span',
|
||||||
fourthEntryOfMonday: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(1) > section:nth-child(4) > span',
|
fourthEntryOfMonday: 'vn-worker-time-control vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(1) > section:nth-child(4) > span',
|
||||||
fourthEntryOfTuesday: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(2) > section:nth-child(4) > span',
|
fourthEntryOfTuesday: 'vn-worker-time-control vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(2) > section:nth-child(4) > span',
|
||||||
fourthEntryOfWednesday: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(3) > section:nth-child(4) > span',
|
fourthEntryOfWednesday: 'vn-worker-time-control vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(3) > section:nth-child(4) > span',
|
||||||
fourthEntryOfThursday: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(4) > section:nth-child(4) > span',
|
fourthEntryOfThursday: 'vn-worker-time-control vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(4) > section:nth-child(4) > span',
|
||||||
fourthEntryOfFriday: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(5) > section:nth-child(4) > span',
|
fourthEntryOfFriday: 'vn-worker-time-control vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(5) > section:nth-child(4) > span',
|
||||||
fourthEntryOfSaturday: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(6) > section:nth-child(4) > span',
|
fourthEntryOfSaturday: 'vn-worker-time-control vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(6) > section:nth-child(4) > span',
|
||||||
fourthEntryOfSunday: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(7) > section:nth-child(4) > span',
|
fourthEntryOfSunday: 'vn-worker-time-control vn-table > div > vn-tbody > vn-tr > vn-td:nth-child(7) > section:nth-child(4) > span',
|
||||||
mondayWorkedHours: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tfoot > vn-tr:nth-child(1) > vn-td:nth-child(1)',
|
mondayWorkedHours: 'vn-worker-time-control vn-table > div > vn-tfoot > vn-tr:nth-child(1) > vn-td:nth-child(1)',
|
||||||
tuesdayWorkedHours: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tfoot > vn-tr:nth-child(1) > vn-td:nth-child(2)',
|
tuesdayWorkedHours: 'vn-worker-time-control vn-table > div > vn-tfoot > vn-tr:nth-child(1) > vn-td:nth-child(2)',
|
||||||
wednesdayWorkedHours: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tfoot > vn-tr:nth-child(1) > vn-td:nth-child(3)',
|
wednesdayWorkedHours: 'vn-worker-time-control vn-table > div > vn-tfoot > vn-tr:nth-child(1) > vn-td:nth-child(3)',
|
||||||
thursdayWorkedHours: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tfoot > vn-tr:nth-child(1) > vn-td:nth-child(4)',
|
thursdayWorkedHours: 'vn-worker-time-control vn-table > div > vn-tfoot > vn-tr:nth-child(1) > vn-td:nth-child(4)',
|
||||||
fridayWorkedHours: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tfoot > vn-tr:nth-child(1) > vn-td:nth-child(5)',
|
fridayWorkedHours: 'vn-worker-time-control vn-table > div > vn-tfoot > vn-tr:nth-child(1) > vn-td:nth-child(5)',
|
||||||
saturdayWorkedHours: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tfoot > vn-tr:nth-child(1) > vn-td:nth-child(6)',
|
saturdayWorkedHours: 'vn-worker-time-control vn-table > div > vn-tfoot > vn-tr:nth-child(1) > vn-td:nth-child(6)',
|
||||||
sundayWorkedHours: 'vn-worker-time-control > div > vn-card > div > vn-horizontal > vn-table > div > vn-tfoot > vn-tr:nth-child(1) > vn-td:nth-child(7)',
|
sundayWorkedHours: 'vn-worker-time-control vn-table > div > vn-tfoot > vn-tr:nth-child(1) > vn-td:nth-child(7)',
|
||||||
weekWorkedHours: 'vn-worker-time-control > div > vn-side-menu > div > vn-vertical > vn-vertical > vn-label-value > section > span',
|
weekWorkedHours: 'vn-worker-time-control vn-side-menu vn-label-value > section > span',
|
||||||
nextMonthButton: 'vn-worker-time-control > div > vn-side-menu > div > vn-calendar > div > vn-horizontal > vn-auto:nth-child(3) > vn-icon',
|
nextMonthButton: 'vn-worker-time-control vn-side-menu vn-calendar vn-button[icon=keyboard_arrow_right]',
|
||||||
navigateBackToIndex: 'vn-worker-descriptor vn-icon[icon="chevron_left"]'
|
navigateBackToIndex: 'vn-worker-descriptor vn-icon[icon="chevron_left"]'
|
||||||
},
|
},
|
||||||
invoiceOutIndex: {
|
invoiceOutIndex: {
|
||||||
searchInvoiceOutInput: `vn-invoice-out-index vn-textfield input`,
|
searchInvoiceOutInput: `vn-invoice-out-index vn-textfield input`,
|
||||||
searchButton: 'vn-invoice-out-index vn-searchbar vn-icon[icon="search"]',
|
searchButton: 'vn-invoice-out-index vn-searchbar vn-icon[icon="search"]',
|
||||||
searchResult: 'vn-invoice-out-index vn-card > div > vn-table > div > vn-tbody > a.vn-tr',
|
searchResult: 'vn-invoice-out-index vn-card > vn-table > div > vn-tbody > a.vn-tr',
|
||||||
},
|
},
|
||||||
invoiceOutDescriptor: {
|
invoiceOutDescriptor: {
|
||||||
moreMenu: 'vn-invoice-out-descriptor vn-icon-menu[icon=more_vert]',
|
moreMenu: 'vn-invoice-out-descriptor vn-icon-menu[icon=more_vert]',
|
||||||
|
|
@ -732,6 +732,6 @@ export default {
|
||||||
acceptBookingButton: 'vn-invoice-out-descriptor > vn-confirm[vn-id="bookConfirmation"] button[response="ACCEPT"]'
|
acceptBookingButton: 'vn-invoice-out-descriptor > vn-confirm[vn-id="bookConfirmation"] button[response="ACCEPT"]'
|
||||||
},
|
},
|
||||||
invoiceOutSummary: {
|
invoiceOutSummary: {
|
||||||
bookedLabel: 'vn-invoice-out-summary > vn-card > div > vn-horizontal > vn-one > vn-label-value:nth-child(4) > section > span'
|
bookedLabel: 'vn-invoice-out-summary > vn-card > vn-horizontal > vn-one > vn-label-value:nth-child(4) > section > span'
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,82 +1,46 @@
|
||||||
<div>
|
<div>
|
||||||
<vn-horizontal class="header">
|
<div class="header">
|
||||||
<vn-auto>
|
<vn-button
|
||||||
<vn-icon
|
icon="keyboard_arrow_left"
|
||||||
icon="keyboard_arrow_left"
|
class="flat"
|
||||||
class="pointer"
|
ng-click="$ctrl.movePrevious()"
|
||||||
ng-click="$ctrl.movePrevious($ctrl.skip)"
|
translate-attr="::{title: 'Previous'}"
|
||||||
ng-show="$ctrl.displayControls"/>
|
ng-if="$ctrl.displayControls"/>
|
||||||
</vn-icon>
|
</vn-button>
|
||||||
</vn-auto>
|
<div class="title">
|
||||||
<vn-one>
|
<span translate>{{$ctrl.defaultDate | date: 'MMMM'}}</span>
|
||||||
<div>
|
<span ng-hide="::$ctrl.hideYear">{{$ctrl.defaultDate | date: 'yyyy'}}</span>
|
||||||
<span translate>{{$ctrl.defaultDate | date: 'MMMM'}}</span>
|
</div>
|
||||||
<span>{{$ctrl.defaultDate | date: 'yyyy'}}</span>
|
<vn-button
|
||||||
|
icon="keyboard_arrow_right"
|
||||||
|
class="flat"
|
||||||
|
ng-click="$ctrl.moveNext()"
|
||||||
|
translate-attr="::{title: 'Next'}"
|
||||||
|
ng-if="$ctrl.displayControls">
|
||||||
|
</vn-button>
|
||||||
|
</div>
|
||||||
|
<div class="weekdays">
|
||||||
|
<section
|
||||||
|
ng-repeat="day in ::$ctrl.weekDays"
|
||||||
|
translate-attr="::{title: day.name}"
|
||||||
|
ng-click="$ctrl.selectWeekDay(day.index)">
|
||||||
|
<span>{{::day.localeChar}}</span>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="days"
|
||||||
|
ng-class="{'hide-contiguous': $ctrl.hideContiguous}">
|
||||||
|
<section
|
||||||
|
ng-repeat="day in $ctrl.days"
|
||||||
|
class="day"
|
||||||
|
ng-class="::$ctrl.getDayClasses(day)"
|
||||||
|
vn-repeat-last
|
||||||
|
on-last="$ctrl.repeatLast()">
|
||||||
|
<div
|
||||||
|
class="day-number"
|
||||||
|
ng-click="$ctrl.select(day)">
|
||||||
|
{{::day | date: 'd'}}
|
||||||
</div>
|
</div>
|
||||||
</vn-one>
|
</section>
|
||||||
<vn-auto>
|
</div>
|
||||||
<vn-icon
|
|
||||||
icon="keyboard_arrow_right"
|
|
||||||
class="pointer"
|
|
||||||
ng-click="$ctrl.moveNext($ctrl.skip)"
|
|
||||||
ng-show="$ctrl.displayControls">
|
|
||||||
</vn-icon>
|
|
||||||
</vn-auto>
|
|
||||||
</vn-horizontal>
|
|
||||||
<vn-vertical class="body">
|
|
||||||
<vn-horizontal class="weekdays">
|
|
||||||
<section title="{{'Monday' | translate}}"
|
|
||||||
ng-click="$ctrl.selectAll(1)">
|
|
||||||
<span>L</span>
|
|
||||||
</section>
|
|
||||||
<section title="{{'Tuesday' | translate}}"
|
|
||||||
ng-click="$ctrl.selectAll(2)">
|
|
||||||
<span>M</span>
|
|
||||||
</section>
|
|
||||||
<section title="{{'Wednesday' | translate}}"
|
|
||||||
ng-click="$ctrl.selectAll(3)">
|
|
||||||
<span>X</span>
|
|
||||||
</section>
|
|
||||||
<section title="{{'Thursday' | translate}}"
|
|
||||||
ng-click="$ctrl.selectAll(4)">
|
|
||||||
<span>J</span>
|
|
||||||
</section>
|
|
||||||
<section title="{{'Friday' | translate}}"
|
|
||||||
ng-click="$ctrl.selectAll(5)">
|
|
||||||
<span>V</span>
|
|
||||||
</section>
|
|
||||||
<section title="{{'Saturday' | translate}}"
|
|
||||||
ng-click="$ctrl.selectAll(6)">
|
|
||||||
<span>S</span>
|
|
||||||
</section>
|
|
||||||
<section title="{{'Sunday' | translate}}"
|
|
||||||
ng-click="$ctrl.selectAll(0)">
|
|
||||||
<span>D</span>
|
|
||||||
</section>
|
|
||||||
</vn-horizontal>
|
|
||||||
<vn-horizontal class="days">
|
|
||||||
<section
|
|
||||||
ng-repeat="day in $ctrl.days"
|
|
||||||
class="day {{::$ctrl.getClass({$day: day.dated})}}"
|
|
||||||
ng-class="::{primary: day.events.length > 0 || $ctrl.hasEvents({$day: day.dated})}">
|
|
||||||
<div class="content">
|
|
||||||
<div class="day-number"
|
|
||||||
title="{{(day.eventName) | translate}}"
|
|
||||||
ng-style="$ctrl.renderStyle(day.style)"
|
|
||||||
ng-click="$ctrl.select($index)">
|
|
||||||
{{::day.dated | date: 'd'}}
|
|
||||||
</div>
|
|
||||||
<div ng-if="day.events" class="events">
|
|
||||||
<div ng-repeat="event in day.events" class="event"
|
|
||||||
title="{{(event.description || event.name) | translate}}">
|
|
||||||
<span class="chip ellipsize"
|
|
||||||
ng-style="::$ctrl.renderStyle(event.style)">
|
|
||||||
{{::event.name}}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</vn-horizontal>
|
|
||||||
</vn-vertical>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1,43 +1,26 @@
|
||||||
import ngModule from '../../module';
|
import ngModule from '../../module';
|
||||||
import Component from '../../lib/component';
|
import FormInput from '../form-input';
|
||||||
import './style.scss';
|
import './style.scss';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Flat calendar.
|
* Flat calendar.
|
||||||
*
|
*
|
||||||
* @property {Array} data Array of events
|
* @property {Array} defaultDate Array of events
|
||||||
* @property {Function} hasEvents Determines if an events exists for a day
|
* @property {Function} hasEvents Determines if an events exists for a day
|
||||||
* @property {Function} getClass Class to apply to specific day
|
* @property {Function} getClass Class to apply to specific day
|
||||||
|
* @event selection Emitted when day or weekday is selected
|
||||||
|
* @event move Emitted when month changes
|
||||||
*/
|
*/
|
||||||
export default class Calendar extends Component {
|
export default class Calendar extends FormInput {
|
||||||
constructor($element, $scope) {
|
constructor($element, $scope, vnWeekDays) {
|
||||||
super($element, $scope);
|
super($element, $scope);
|
||||||
this.events = [];
|
this.weekDays = vnWeekDays.locales;
|
||||||
this.defaultDate = new Date();
|
this.defaultDate = new Date();
|
||||||
this.displayControls = true;
|
this.displayControls = true;
|
||||||
this.disabled = false;
|
|
||||||
this.skip = 1;
|
|
||||||
|
|
||||||
this.window.addEventListener('resize', () => {
|
|
||||||
this.checkSize();
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Resizes the calendar
|
* The initial date
|
||||||
* based on component height
|
|
||||||
*/
|
|
||||||
checkSize() {
|
|
||||||
const height = this.$element[0].clientHeight;
|
|
||||||
|
|
||||||
if (height < 530)
|
|
||||||
this.$element.addClass('small');
|
|
||||||
else
|
|
||||||
this.$element.removeClass('small');
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns the initial date
|
|
||||||
*
|
*
|
||||||
* @return {Date} - Default date
|
* @return {Date} - Default date
|
||||||
*/
|
*/
|
||||||
|
|
@ -45,11 +28,6 @@ export default class Calendar extends Component {
|
||||||
return this._defaultDate;
|
return this._defaultDate;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Sets a new initial date
|
|
||||||
*
|
|
||||||
* @param {Date} value - New default date
|
|
||||||
*/
|
|
||||||
set defaultDate(value) {
|
set defaultDate(value) {
|
||||||
if (value) {
|
if (value) {
|
||||||
value = new Date(value);
|
value = new Date(value);
|
||||||
|
|
@ -58,67 +36,10 @@ export default class Calendar extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
this._defaultDate = value;
|
this._defaultDate = value;
|
||||||
|
this.month = value.getMonth();
|
||||||
this.repaint();
|
this.repaint();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Sets events
|
|
||||||
*
|
|
||||||
* @param {Array} value - Array of events
|
|
||||||
* @param {Date} event.dated - Day to add event
|
|
||||||
* @param {String} event.name - Tooltip description
|
|
||||||
* @param {String} event.className - ClassName style
|
|
||||||
* @param {Object} event.style - Style properties
|
|
||||||
*/
|
|
||||||
set data(value) {
|
|
||||||
if (!value) return;
|
|
||||||
|
|
||||||
this.events = [];
|
|
||||||
|
|
||||||
value.forEach(event => {
|
|
||||||
event.dated = new Date(event.dated);
|
|
||||||
event.dated.setHours(0, 0, 0, 0);
|
|
||||||
this.events.push(event);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (this.defaultDate) {
|
|
||||||
this.repaint();
|
|
||||||
this.checkSize();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Gets current month date
|
|
||||||
*/
|
|
||||||
|
|
||||||
get currentMonth() {
|
|
||||||
return this.defaultDate;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Gets next month date
|
|
||||||
*
|
|
||||||
* @return {Date}
|
|
||||||
*/
|
|
||||||
get nextMonth() {
|
|
||||||
const newDate = new Date(this.currentMonth);
|
|
||||||
newDate.setMonth(this.currentMonth.getMonth() + 1);
|
|
||||||
|
|
||||||
return newDate;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Gets previous month date
|
|
||||||
*
|
|
||||||
* @return {Date}
|
|
||||||
*/
|
|
||||||
get previousMonth() {
|
|
||||||
const newDate = new Date(this.currentMonth);
|
|
||||||
newDate.setMonth(this.currentMonth.getMonth() - 1);
|
|
||||||
|
|
||||||
return newDate;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Returns first day of month from a given date
|
* Returns first day of month from a given date
|
||||||
*
|
*
|
||||||
|
|
@ -126,185 +47,113 @@ export default class Calendar extends Component {
|
||||||
* @return {Integer}
|
* @return {Integer}
|
||||||
*/
|
*/
|
||||||
firstDay(date) {
|
firstDay(date) {
|
||||||
const newDate = new Date(
|
return new Date(
|
||||||
date.getFullYear(),
|
date.getFullYear(),
|
||||||
date.getMonth(), 1);
|
date.getMonth(),
|
||||||
|
1
|
||||||
return newDate;
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Returns last day of month from a given date
|
* Repaints the calendar.
|
||||||
*
|
|
||||||
* @param {Date} date - Origin date
|
|
||||||
* @return {Integer}
|
|
||||||
*/
|
*/
|
||||||
lastDay(date) {
|
|
||||||
const newDate = new Date(
|
|
||||||
date.getFullYear(),
|
|
||||||
date.getMonth() + 1, 0);
|
|
||||||
|
|
||||||
return newDate;
|
|
||||||
}
|
|
||||||
|
|
||||||
repaint() {
|
repaint() {
|
||||||
const firstWeekday = this.firstDay(this.currentMonth).getDay();
|
const firstWeekday = this.firstDay(this.defaultDate).getDay() - 1;
|
||||||
const previousLastDay = this.lastDay(this.previousMonth).getDate();
|
let weekdayOffset = firstWeekday >= 0 ? firstWeekday : 6;
|
||||||
const currentLastDay = this.lastDay(this.currentMonth).getDate();
|
|
||||||
const maxFields = 42; // Max field limit
|
|
||||||
|
|
||||||
let weekdayOffset = firstWeekday > 0 ? firstWeekday : 7;
|
let dayIndex = new Date(this.defaultDate.getTime());
|
||||||
let dayPrevious = previousLastDay - (weekdayOffset - 2);
|
dayIndex.setDate(1 - weekdayOffset);
|
||||||
let dayCurrent = 1;
|
|
||||||
let dayNext = 1;
|
|
||||||
|
|
||||||
this.days = [];
|
this.days = [];
|
||||||
|
|
||||||
for (let fieldIndex = 1; fieldIndex < maxFields; fieldIndex++) {
|
for (let i = 1; i <= 42; i++) {
|
||||||
// Insert previous month days
|
this.days.push(new Date(dayIndex.getTime()));
|
||||||
if (fieldIndex < weekdayOffset) {
|
dayIndex.setDate(dayIndex.getDate() + 1);
|
||||||
const dated = new Date(
|
|
||||||
this.previousMonth.getFullYear(),
|
|
||||||
this.previousMonth.getMonth(), dayPrevious);
|
|
||||||
|
|
||||||
this.insertDay(dated, 'gray');
|
|
||||||
dayPrevious++;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Insert current month days
|
|
||||||
if (fieldIndex >= weekdayOffset && dayCurrent <= currentLastDay) {
|
|
||||||
const dated = new Date(
|
|
||||||
this.currentMonth.getFullYear(),
|
|
||||||
this.currentMonth.getMonth(), dayCurrent);
|
|
||||||
|
|
||||||
this.insertDay(dated);
|
|
||||||
dayCurrent++;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Insert next month days
|
|
||||||
if (fieldIndex >= weekdayOffset && dayCurrent > currentLastDay) {
|
|
||||||
const dated = new Date(
|
|
||||||
this.nextMonth.getFullYear(),
|
|
||||||
this.nextMonth.getMonth(), dayNext);
|
|
||||||
|
|
||||||
this.insertDay(dated, 'gray');
|
|
||||||
dayNext++;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Inserts a date on an array of month days
|
* Gets CSS classes to apply to the specified day.
|
||||||
*
|
*
|
||||||
* @param {Date} dated - Date of month
|
* @param {Date} day The day
|
||||||
* @param {String} className - Default class style
|
* @return {Object} The CSS classes to apply
|
||||||
*/
|
*/
|
||||||
insertDay(dated) {
|
getDayClasses(day) {
|
||||||
let events = this.events.filter(event => {
|
let wday = day.getDay();
|
||||||
return event.dated >= dated && event.dated <= dated;
|
let month = day.getMonth();
|
||||||
});
|
|
||||||
|
|
||||||
const params = {dated: dated, events: events /**/, style: {}};
|
let classes = {
|
||||||
const isSaturday = dated.getDay() === 6;
|
weekend: wday === 6 || wday === 0,
|
||||||
const isSunday = dated.getDay() === 0;
|
previous: month < this.month,
|
||||||
const isCurrentMonth = dated.getMonth() === this.currentMonth.getMonth();
|
current: month == this.month,
|
||||||
const hasEvents = events.length > 0;
|
next: month > this.month,
|
||||||
|
event: this.hasEvents({$day: day})
|
||||||
|
};
|
||||||
|
|
||||||
if (isCurrentMonth && isSunday && !hasEvents)
|
let userClass = this.getClass({$day: day});
|
||||||
params.style = {color: '#999'};
|
if (userClass) classes[userClass] = true;
|
||||||
|
|
||||||
if (isCurrentMonth && isSaturday && !hasEvents)
|
return classes;
|
||||||
params.style = {color: '#999'};
|
|
||||||
|
|
||||||
if (!isCurrentMonth)
|
|
||||||
params.style = {opacity: '0.5'};
|
|
||||||
|
|
||||||
if (events.length > 0) {
|
|
||||||
const eventStyle = events[0].style;
|
|
||||||
const eventName = events[0].description || events[0].name;
|
|
||||||
if (eventStyle)
|
|
||||||
Object.assign(params.style, eventStyle);
|
|
||||||
if (eventName)
|
|
||||||
params.eventName = eventName;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.days.push(params);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Moves to next month(s)
|
* Moves to next month(s)
|
||||||
*
|
|
||||||
* @param {Integer} skip - Months to skip at once
|
|
||||||
*/
|
*/
|
||||||
moveNext(skip = 1) {
|
moveNext() {
|
||||||
let next = this.defaultDate.getMonth() + skip;
|
this.move(1);
|
||||||
this.defaultDate.setMonth(next);
|
|
||||||
this.repaint();
|
|
||||||
this.emit('moveNext');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Moves to previous month(s)
|
* Moves to previous month(s)
|
||||||
*
|
|
||||||
* @param {Integer} skip - Months to skip at once
|
|
||||||
*/
|
*/
|
||||||
movePrevious(skip = 1) {
|
movePrevious() {
|
||||||
let previous = this.defaultDate.getMonth() - skip;
|
this.move(-1);
|
||||||
this.defaultDate.setMonth(previous);
|
|
||||||
this.repaint();
|
|
||||||
this.emit('movePrevious');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Day selection event
|
* Moves @direction months backwards/forwards.
|
||||||
*
|
*
|
||||||
* @param {Integer} index - Index from days array
|
* @param {Number} direction Negative to move backwards, positive forwards
|
||||||
*/
|
*/
|
||||||
select(index) {
|
move(direction) {
|
||||||
if (this.disabled) return;
|
let date = new Date(this.defaultDate.getTime());
|
||||||
let day = this.days[index].dated;
|
date.setMonth(date.getMonth() + direction);
|
||||||
|
this.defaultDate = date;
|
||||||
|
|
||||||
|
this.repaint();
|
||||||
|
this.emit('move', {$date: date});
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Day selection event
|
||||||
|
*/
|
||||||
|
select(day) {
|
||||||
|
if (!this.editable) return;
|
||||||
|
this.field = day;
|
||||||
this.emit('selection', {
|
this.emit('selection', {
|
||||||
$days: [day],
|
$days: [day],
|
||||||
$type: 'day'
|
$type: 'day'
|
||||||
});
|
});
|
||||||
|
this.repaint();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/*
|
||||||
* WeekDay selection event
|
* WeekDay selection event
|
||||||
*
|
|
||||||
* @param {Integer} weekday - weekday index
|
|
||||||
*/
|
*/
|
||||||
selectAll(weekday) {
|
selectWeekDay(weekday) {
|
||||||
if (this.disabled) return;
|
if (!this.editable) return;
|
||||||
|
|
||||||
let days = [];
|
let days = [];
|
||||||
for (let i in this.days) {
|
for (let day of this.days) {
|
||||||
const day = this.days[i].dated;
|
if (day.getDay() === weekday && day.getMonth() == this.month)
|
||||||
if (day.getDay() === weekday && day.getMonth() == this.defaultDate.getMonth())
|
|
||||||
days.push(day);
|
days.push(day);
|
||||||
}
|
}
|
||||||
|
this.field = days[0];
|
||||||
this.emit('selection', {
|
this.emit('selection', {
|
||||||
$days: days,
|
$days: days,
|
||||||
$type: 'weekday',
|
$type: 'weekday',
|
||||||
$weekday: weekday
|
$weekday: weekday
|
||||||
});
|
});
|
||||||
}
|
this.repaint();
|
||||||
|
|
||||||
renderStyle(style) {
|
|
||||||
const normalizedStyle = {};
|
|
||||||
|
|
||||||
if (style) {
|
|
||||||
const properties = Object.keys(style);
|
|
||||||
properties.forEach(attribute => {
|
|
||||||
const attrName = attribute.split(/(?=[A-Z])/).
|
|
||||||
join('-').toLowerCase();
|
|
||||||
|
|
||||||
normalizedStyle[attrName] = style[attribute];
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return normalizedStyle;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
hasEvents() {
|
hasEvents() {
|
||||||
|
|
@ -314,24 +163,31 @@ export default class Calendar extends Component {
|
||||||
getClass() {
|
getClass() {
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
repeatLast() {
|
||||||
|
if (!this.formatDay) return;
|
||||||
|
|
||||||
|
let days = this.element.querySelectorAll('.days > .day');
|
||||||
|
for (let i = 0; i < days.length; i++) {
|
||||||
|
this.formatDay({
|
||||||
|
$day: this.days[i],
|
||||||
|
$element: days[i]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Calendar.$inject = ['$element', '$scope', 'vnWeekDays'];
|
||||||
|
|
||||||
Calendar.$inject = ['$element', '$scope'];
|
ngModule.vnComponent('vnCalendar', {
|
||||||
|
|
||||||
ngModule.component('vnCalendar', {
|
|
||||||
template: require('./index.html'),
|
template: require('./index.html'),
|
||||||
controller: Calendar,
|
controller: Calendar,
|
||||||
bindings: {
|
bindings: {
|
||||||
model: '<',
|
|
||||||
data: '<?',
|
|
||||||
defaultDate: '=?',
|
defaultDate: '=?',
|
||||||
onSelection: '&?',
|
|
||||||
onMoveNext: '&?',
|
|
||||||
onMovePrevious: '&?',
|
|
||||||
hasEvents: '&?',
|
hasEvents: '&?',
|
||||||
getClass: '&?',
|
getClass: '&?',
|
||||||
|
formatDay: '&?',
|
||||||
displayControls: '<?',
|
displayControls: '<?',
|
||||||
disabled: '<?',
|
hideYear: '<?',
|
||||||
skip: '<?'
|
hideContiguous: '<?'
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,10 @@ describe('Component vnCalendar', () => {
|
||||||
let controller;
|
let controller;
|
||||||
let $element;
|
let $element;
|
||||||
|
|
||||||
|
let date = new Date();
|
||||||
|
date.setHours(0, 0, 0, 0);
|
||||||
|
date.setDate(1);
|
||||||
|
|
||||||
beforeEach(angular.mock.module('vnCore', $translateProvider => {
|
beforeEach(angular.mock.module('vnCore', $translateProvider => {
|
||||||
$translateProvider.translations('en', {});
|
$translateProvider.translations('en', {});
|
||||||
}));
|
}));
|
||||||
|
|
@ -9,79 +13,55 @@ describe('Component vnCalendar', () => {
|
||||||
beforeEach(inject(($compile, $rootScope) => {
|
beforeEach(inject(($compile, $rootScope) => {
|
||||||
$element = $compile(`<vn-calendar></vn-calendar`)($rootScope);
|
$element = $compile(`<vn-calendar></vn-calendar`)($rootScope);
|
||||||
controller = $element.controller('vnCalendar');
|
controller = $element.controller('vnCalendar');
|
||||||
controller.defaultDate = new Date();
|
controller.defaultDate = date;
|
||||||
}));
|
}));
|
||||||
|
|
||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
$element.remove();
|
$element.remove();
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('data() setter', () => {
|
|
||||||
it(`should set an array of events and convert string dates to string object, then call repaint() method`, () => {
|
|
||||||
spyOn(controller, 'repaint');
|
|
||||||
|
|
||||||
let currentDate = new Date().toString();
|
|
||||||
controller.data = [
|
|
||||||
{dated: currentDate, name: 'Event 1'},
|
|
||||||
{dated: currentDate, name: 'Event 2'},
|
|
||||||
];
|
|
||||||
|
|
||||||
expect(controller.events[0].dated instanceof Object).toBeTruthy();
|
|
||||||
expect(controller.repaint).toHaveBeenCalledWith();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('moveNext()', () => {
|
describe('moveNext()', () => {
|
||||||
it(`should shift to the next n months, then emit a 'moveNext' event`, () => {
|
it(`should shift to the next month, then emit a 'move' event`, () => {
|
||||||
spyOn(controller, 'emit');
|
spyOn(controller, 'emit');
|
||||||
const currentMonth = controller.defaultDate.getMonth();
|
let nextMonth = new Date(date.getTime());
|
||||||
let nextMonth = currentMonth + 1;
|
nextMonth.setMonth(nextMonth.getMonth() + 1);
|
||||||
|
|
||||||
controller.moveNext(1);
|
controller.moveNext();
|
||||||
|
|
||||||
expect(controller.defaultDate.getMonth()).toEqual(nextMonth);
|
expect(controller.month).toEqual(nextMonth.getMonth());
|
||||||
expect(controller.emit).toHaveBeenCalledWith('moveNext');
|
expect(controller.emit).toHaveBeenCalledWith('move', {$date: nextMonth});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('movePrevious()', () => {
|
describe('movePrevious()', () => {
|
||||||
it(`should shift to the previous n months, then emit a 'movePrevious' event`, () => {
|
it(`should shift to the previous month, then emit a 'move' event`, () => {
|
||||||
spyOn(controller, 'emit');
|
spyOn(controller, 'emit');
|
||||||
const currentMonth = controller.defaultDate.getMonth();
|
let previousMonth = new Date(date.getTime());
|
||||||
let previousMonth = currentMonth - 1;
|
previousMonth.setMonth(previousMonth.getMonth() - 1);
|
||||||
|
|
||||||
controller.movePrevious(1);
|
controller.movePrevious();
|
||||||
|
|
||||||
expect(controller.defaultDate.getMonth()).toEqual(previousMonth);
|
expect(controller.month).toEqual(previousMonth.getMonth());
|
||||||
expect(controller.emit).toHaveBeenCalledWith('movePrevious');
|
expect(controller.emit).toHaveBeenCalledWith('move', {$date: previousMonth});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('select()', () => {
|
describe('select()', () => {
|
||||||
it(`should return the selected element, then emit a 'selection' event`, () => {
|
it(`should return the selected element, then emit a 'selection' event`, () => {
|
||||||
spyOn(controller, 'emit');
|
spyOn(controller, 'emit');
|
||||||
const dated = new Date();
|
|
||||||
const days = [{dated}];
|
const day = new Date();
|
||||||
controller.days = days;
|
day.setHours(0, 0, 0, 0);
|
||||||
controller.select(0);
|
controller.select(day);
|
||||||
|
|
||||||
let res = {
|
let res = {
|
||||||
$days: [dated],
|
$days: [day],
|
||||||
$type: 'day'
|
$type: 'day'
|
||||||
};
|
};
|
||||||
|
|
||||||
|
expect(controller.field).toEqual(day);
|
||||||
expect(controller.emit).toHaveBeenCalledWith('selection', res);
|
expect(controller.emit).toHaveBeenCalledWith('selection', res);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('renderStyle()', () => {
|
|
||||||
it(`should normalize CSS attributes`, () => {
|
|
||||||
const result = controller.renderStyle({
|
|
||||||
backgroundColor: 'red'
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(result['background-color']).toEqual('red');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,103 +1,97 @@
|
||||||
@import "variables";
|
@import "variables";
|
||||||
|
|
||||||
vn-calendar.small {
|
|
||||||
.events {
|
|
||||||
display: none
|
|
||||||
}
|
|
||||||
}
|
|
||||||
vn-calendar {
|
vn-calendar {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
.header vn-one {
|
& > div {
|
||||||
text-align: center;
|
& > .header {
|
||||||
padding: 0.2em 0;
|
display: flex;
|
||||||
height: 1.5em
|
margin-bottom: 0.5em;
|
||||||
}
|
align-items: center;
|
||||||
.weekdays {
|
height: 2.4em;
|
||||||
color: $color-font-secondary;
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
padding: 0.5em 0;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 0.8em;
|
|
||||||
}
|
|
||||||
.weekdays section {
|
|
||||||
cursor: pointer
|
|
||||||
}
|
|
||||||
.weekdays section, .day {
|
|
||||||
position: relative;
|
|
||||||
text-align: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 14.28%;
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
.days {
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: flex-start;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.day {
|
|
||||||
.content {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
top: 0
|
|
||||||
}
|
|
||||||
.day-number {
|
|
||||||
transition: background-color 0.3s;
|
|
||||||
text-align:center;
|
|
||||||
float:inline-end;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 50%;
|
|
||||||
font-size: 0.85em;
|
|
||||||
width:2.2em;
|
|
||||||
height: 1.2em;
|
|
||||||
padding: 0.5em 0;
|
|
||||||
cursor: pointer;
|
|
||||||
outline: 0
|
|
||||||
}
|
|
||||||
.day-number:hover {
|
|
||||||
background-color: lighten($color-font-secondary, 20%);
|
|
||||||
opacity: 0.8
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.day::after {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
padding-top: 100%;
|
|
||||||
}
|
|
||||||
.day.primary .day-number {
|
|
||||||
background-color: $color-main;
|
|
||||||
color: $color-font-dark;
|
|
||||||
}
|
|
||||||
.events {
|
|
||||||
margin-top: 0.5em;
|
|
||||||
font-size: 0.6em
|
|
||||||
}
|
|
||||||
.events {
|
|
||||||
color: $color-font-secondary;
|
|
||||||
|
|
||||||
.event {
|
& > .title {
|
||||||
margin-bottom: .1em;
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0.2em 0;
|
||||||
|
}
|
||||||
|
& > .vn-button {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& > .weekdays {
|
||||||
|
display: flex;
|
||||||
|
color: $color-font-secondary;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
padding: 0.5em 0;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 0.8em;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
& > section {
|
||||||
|
width: 14.28%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& > .days {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
& > .day {
|
||||||
|
width: 14.28%;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&.weekend {
|
||||||
|
color: $color-font-secondary;
|
||||||
|
}
|
||||||
|
&.previous,
|
||||||
|
&.next {
|
||||||
|
opacity: .5;
|
||||||
|
}
|
||||||
|
&.event .day-number {
|
||||||
|
background-color: $color-main;
|
||||||
|
color: $color-font-dark;
|
||||||
|
}
|
||||||
|
& > .day-number {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: 14px;
|
||||||
|
width: 2.2em;
|
||||||
|
height: 2.2em;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: 0;
|
||||||
|
transition: background-color 300ms ease-in-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: lighten($color-font-secondary, 20%);
|
||||||
|
opacity: .8
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.hide-contiguous > .day {
|
||||||
|
&.previous,
|
||||||
|
&.next {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.chip {
|
&.disabled,
|
||||||
background-color: $color-main;
|
&.readonly {
|
||||||
color: $color-font-bg;
|
& > div {
|
||||||
display: inline-block;
|
& > .weekdays > section {
|
||||||
border-radius: .3em;
|
cursor: initial;
|
||||||
padding: 0.3em .8em;
|
}
|
||||||
max-width: 5em;
|
& > .days > .day > .day-number {
|
||||||
}
|
cursor: initial;
|
||||||
.day.gray {
|
}
|
||||||
.day-number {
|
|
||||||
color: $color-font-secondary
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.day.sunday {
|
|
||||||
.day-number {
|
|
||||||
color: $color-alert;
|
|
||||||
font-weight: bold
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,12 +5,11 @@ export default function directive() {
|
||||||
return {
|
return {
|
||||||
restrict: 'E',
|
restrict: 'E',
|
||||||
transclude: true,
|
transclude: true,
|
||||||
template: require('./card.html'),
|
|
||||||
link: function($scope, $element, $attrs, $ctrl, $transclude) {
|
link: function($scope, $element, $attrs, $ctrl, $transclude) {
|
||||||
$element.addClass('demo-card-wide vn-shadow bg-panel');
|
$element[0].classList.add('vn-shadow', 'bg-panel');
|
||||||
|
|
||||||
$transclude($scope, function(clone) {
|
$transclude($scope, function(clone) {
|
||||||
angular.element($element[0].querySelector('div')).append(clone);
|
$element.append(clone);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<h6>Debug info</h6>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
{{$ctrl.env}}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span ng-class="{alert: $root.$$watchersCount > 500}">{{$root.$$watchersCount}}</span> watchers
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
import ngModule from '../../module';
|
||||||
|
import './style.scss';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Floating box displaying debugging information.
|
||||||
|
* Enabled only in development environment.
|
||||||
|
*/
|
||||||
|
export default class Controller {
|
||||||
|
constructor($element, $) {
|
||||||
|
this.env = process.env.NODE_ENV || 'development';
|
||||||
|
|
||||||
|
if (this.env == 'development')
|
||||||
|
this.interval = setInterval(() => $.$digest(), 2000);
|
||||||
|
else
|
||||||
|
$element[0].style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
$onDestroy() {
|
||||||
|
clearInterval(this.interval);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Controller.$inject = ['$element', '$scope'];
|
||||||
|
|
||||||
|
ngModule.component('vnDebugInfo', {
|
||||||
|
template: require('./index.html'),
|
||||||
|
controller: Controller
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
@import "variables";
|
||||||
|
|
||||||
|
vn-debug-info {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 1em;
|
||||||
|
left: 1em;
|
||||||
|
padding: 1em;
|
||||||
|
min-width: 8em;
|
||||||
|
background-color: #3f51b5;
|
||||||
|
color: $color-font-dark;
|
||||||
|
border-radius: 4px;
|
||||||
|
z-index: 999;
|
||||||
|
box-shadow: $shadow;
|
||||||
|
transition: opacity 400ms ease-in-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: .5;
|
||||||
|
}
|
||||||
|
& > h6 {
|
||||||
|
font-weight: normal;
|
||||||
|
color: rgba(255, 255, 255, .5);
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
& > li {
|
||||||
|
margin-top: .2em;
|
||||||
|
font-size: .95em;
|
||||||
|
|
||||||
|
& > span {
|
||||||
|
padding: .05em .2em;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background-color 200ms ease-in-out;
|
||||||
|
|
||||||
|
&.alert {
|
||||||
|
background-color: $color-alert;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -31,7 +31,7 @@
|
||||||
|
|
||||||
tpl-body {
|
tpl-body {
|
||||||
display: block;
|
display: block;
|
||||||
min-width: 20em;
|
min-width: 16em;
|
||||||
}
|
}
|
||||||
& > button.close {
|
& > button.close {
|
||||||
@extend %clickable;
|
@extend %clickable;
|
||||||
|
|
|
||||||
|
|
@ -153,10 +153,6 @@ export default class Field extends FormInput {
|
||||||
fix.innerText = text || '';
|
fix.innerText = text || '';
|
||||||
}
|
}
|
||||||
|
|
||||||
refreshTabIndex() {
|
|
||||||
this.input.tabIndex = this.disabled ? -1 : this.tabIndex;
|
|
||||||
}
|
|
||||||
|
|
||||||
onClick() {
|
onClick() {
|
||||||
// if (event.defaultPrevented) return;
|
// if (event.defaultPrevented) return;
|
||||||
// event.preventDefault();
|
// event.preventDefault();
|
||||||
|
|
@ -182,14 +178,6 @@ export default class Field extends FormInput {
|
||||||
this.input.dispatchEvent(new Event('change'));
|
this.input.dispatchEvent(new Event('change'));
|
||||||
}
|
}
|
||||||
|
|
||||||
focus() {
|
|
||||||
this.input.focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
select() {
|
|
||||||
this.input.select();
|
|
||||||
}
|
|
||||||
|
|
||||||
buildInput(type) {
|
buildInput(type) {
|
||||||
let template = `<input type="${type}" ng-model="$ctrl.field"></input>`;
|
let template = `<input type="${type}" ng-model="$ctrl.field"></input>`;
|
||||||
this.input = this.$compile(template)(this.$)[0];
|
this.input = this.$compile(template)(this.$)[0];
|
||||||
|
|
|
||||||
|
|
@ -49,8 +49,9 @@ export default class FormInput extends Component {
|
||||||
|
|
||||||
set disabled(value) {
|
set disabled(value) {
|
||||||
this._disabled = boolTag(value);
|
this._disabled = boolTag(value);
|
||||||
this.input.disabled = this._disabled;
|
|
||||||
this.classList.toggle('disabled', this._disabled);
|
this.classList.toggle('disabled', this._disabled);
|
||||||
|
if (this.input)
|
||||||
|
this.input.disabled = this._disabled;
|
||||||
this.refreshTabIndex();
|
this.refreshTabIndex();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -60,8 +61,9 @@ export default class FormInput extends Component {
|
||||||
|
|
||||||
set readonly(value) {
|
set readonly(value) {
|
||||||
this._readonly = boolTag(value);
|
this._readonly = boolTag(value);
|
||||||
this.input.readOnly = this._readonly;
|
|
||||||
this.classList.toggle('readonly', this._readonly);
|
this.classList.toggle('readonly', this._readonly);
|
||||||
|
if (this.input)
|
||||||
|
this.input.readOnly = this._readonly;
|
||||||
}
|
}
|
||||||
|
|
||||||
get readonly() {
|
get readonly() {
|
||||||
|
|
@ -77,16 +79,24 @@ export default class FormInput extends Component {
|
||||||
return this._tabIndex;
|
return this._tabIndex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get inputEl() {
|
||||||
|
return this.input || this.element;
|
||||||
|
}
|
||||||
|
|
||||||
|
get editable() {
|
||||||
|
return !(this.readonly || this.disabled);
|
||||||
|
}
|
||||||
|
|
||||||
select() {
|
select() {
|
||||||
this.input.select();
|
this.inputEl.select();
|
||||||
}
|
}
|
||||||
|
|
||||||
focus() {
|
focus() {
|
||||||
this.input.focus();
|
this.inputEl.focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
refreshTabIndex() {
|
refreshTabIndex() {
|
||||||
this.element.tabIndex = this.disabled ? -1 : this.tabIndex;
|
this.inputEl.tabIndex = this.disabled ? -1 : this.tabIndex;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -28,6 +28,7 @@ import './check';
|
||||||
import './chip';
|
import './chip';
|
||||||
import './data-viewer';
|
import './data-viewer';
|
||||||
import './date-picker';
|
import './date-picker';
|
||||||
|
import './debug-info';
|
||||||
import './field';
|
import './field';
|
||||||
import './float-button';
|
import './float-button';
|
||||||
import './icon-menu';
|
import './icon-menu';
|
||||||
|
|
@ -44,3 +45,4 @@ import './td-editable';
|
||||||
import './textarea';
|
import './textarea';
|
||||||
import './th';
|
import './th';
|
||||||
import './treeview';
|
import './treeview';
|
||||||
|
import './wday-picker';
|
||||||
|
|
|
||||||
|
|
@ -18,32 +18,13 @@ export default class Toggle extends FormInput {
|
||||||
element.classList.add('vn-toggle');
|
element.classList.add('vn-toggle');
|
||||||
}
|
}
|
||||||
|
|
||||||
set disabled(value) {
|
|
||||||
this._disabled = value;
|
|
||||||
this.classList.toggle('disabled', Boolean(value));
|
|
||||||
this.refreshTabIndex();
|
|
||||||
}
|
|
||||||
|
|
||||||
get disabled() {
|
|
||||||
return this._disabled;
|
|
||||||
}
|
|
||||||
|
|
||||||
set readonly(value) {
|
|
||||||
this._readonly = value;
|
|
||||||
this.classList.toggle('readonly', Boolean(value));
|
|
||||||
}
|
|
||||||
|
|
||||||
get readonly() {
|
|
||||||
return this._readonly;
|
|
||||||
}
|
|
||||||
|
|
||||||
onKeydown(event) {
|
onKeydown(event) {
|
||||||
if (event.code == 'Space')
|
if (event.code == 'Space')
|
||||||
this.onClick(event);
|
this.onClick(event);
|
||||||
}
|
}
|
||||||
|
|
||||||
onClick(event) {
|
onClick(event) {
|
||||||
if (this.disabled || event.defaultPrevented)
|
if (!this.editable || event.defaultPrevented)
|
||||||
return true;
|
return true;
|
||||||
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
|
||||||
|
<span
|
||||||
|
ng-repeat="day in $ctrl.days"
|
||||||
|
translate-attr="::{title: day.name}"
|
||||||
|
ng-class="{marked: $ctrl.field[day.code]}"
|
||||||
|
ng-click="$ctrl.field[day.code] = !$ctrl.field[day.code]">
|
||||||
|
{{day.localeChar}}
|
||||||
|
</span>
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
import ngModule from '../../module';
|
||||||
|
import FormInput from '../form-input';
|
||||||
|
import './style.scss';
|
||||||
|
|
||||||
|
export default class WdayPicker extends FormInput {
|
||||||
|
constructor($element, $scope, vnWeekDays) {
|
||||||
|
super($element, $scope);
|
||||||
|
this.input = {};
|
||||||
|
this.days = vnWeekDays.locales;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
WdayPicker.$inject = ['$element', '$scope', 'vnWeekDays'];
|
||||||
|
|
||||||
|
ngModule.vnComponent('vnWdayPicker', {
|
||||||
|
template: require('./index.html'),
|
||||||
|
controller: WdayPicker
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
@import "effects";
|
||||||
|
|
||||||
|
vn-wday-picker {
|
||||||
|
margin-top: $spacing-sm;
|
||||||
|
margin-bottom: $spacing-md;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
& > span {
|
||||||
|
@extend %clickable;
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: .4em;
|
||||||
|
margin: .2em;
|
||||||
|
display: inline-flex;
|
||||||
|
width: 1.5em;
|
||||||
|
height: 1.5em;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
outline: none;
|
||||||
|
background-color: rgba(0, 0, 0, .05);
|
||||||
|
|
||||||
|
&.marked {
|
||||||
|
background: $color-main;
|
||||||
|
color: $color-font-dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -6,3 +6,4 @@ import './token';
|
||||||
import './modules';
|
import './modules';
|
||||||
import './interceptor';
|
import './interceptor';
|
||||||
import './config';
|
import './config';
|
||||||
|
import './week-days';
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
import ngModule from '../module';
|
||||||
|
|
||||||
|
class WeekDays {
|
||||||
|
constructor($translate) {
|
||||||
|
this.$translate = $translate;
|
||||||
|
|
||||||
|
this.days = [
|
||||||
|
{
|
||||||
|
code: 'sun',
|
||||||
|
name: 'Sunday'
|
||||||
|
}, {
|
||||||
|
code: 'mon',
|
||||||
|
name: 'Monday'
|
||||||
|
}, {
|
||||||
|
code: 'tue',
|
||||||
|
name: 'Tuesday'
|
||||||
|
}, {
|
||||||
|
code: 'wed',
|
||||||
|
name: 'Wednesday'
|
||||||
|
}, {
|
||||||
|
code: 'thu',
|
||||||
|
name: 'Thursday'
|
||||||
|
}, {
|
||||||
|
code: 'fri',
|
||||||
|
name: 'Friday'
|
||||||
|
}, {
|
||||||
|
code: 'sat',
|
||||||
|
name: 'Saturday'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
this.map = {};
|
||||||
|
for (let i = 0; i < this.days.length; i++) {
|
||||||
|
let day = this.days[i];
|
||||||
|
day.index = i;
|
||||||
|
day.char = day.name.substr(0, 1);
|
||||||
|
day.abr = day.name.substr(0, 3);
|
||||||
|
this.map[day.code] = day;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.getLocales();
|
||||||
|
}
|
||||||
|
|
||||||
|
getLocales() {
|
||||||
|
for (let day of this.days) {
|
||||||
|
let locale = this.$translate.instant(day.name);
|
||||||
|
Object.assign(day, {
|
||||||
|
locale,
|
||||||
|
localeChar: locale.substr(0, 1),
|
||||||
|
localeAbr: locale.substr(0, 3)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.localeCodes = [
|
||||||
|
'mon',
|
||||||
|
'tue',
|
||||||
|
'wed',
|
||||||
|
'thu',
|
||||||
|
'fri',
|
||||||
|
'sat',
|
||||||
|
'sun'
|
||||||
|
];
|
||||||
|
|
||||||
|
this.locales = [];
|
||||||
|
for (let code of this.localeCodes)
|
||||||
|
this.locales.push(this.map[code]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
WeekDays.$inject = ['$translate'];
|
||||||
|
|
||||||
|
ngModule.service('vnWeekDays', WeekDays);
|
||||||
|
|
@ -42,13 +42,13 @@
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: .2em;
|
margin-bottom: .3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Colors */
|
/* Colors */
|
||||||
|
|
||||||
.text-primary {
|
.text-primary {
|
||||||
color: $color-font;
|
color: $color-main;
|
||||||
}
|
}
|
||||||
.text-secondary {
|
.text-secondary {
|
||||||
color: $color-font-secondary;
|
color: $color-font-secondary;
|
||||||
|
|
|
||||||
|
|
@ -25,4 +25,5 @@
|
||||||
ng-class="{padding: $ctrl.showTopbar}">
|
ng-class="{padding: $ctrl.showTopbar}">
|
||||||
<vn-home></vn-home>
|
<vn-home></vn-home>
|
||||||
</div>
|
</div>
|
||||||
<vn-snackbar vn-id="snackbar"></vn-snackbar>
|
<vn-snackbar vn-id="snackbar"></vn-snackbar>
|
||||||
|
<vn-debug-info></vn-debug-info>
|
||||||
|
|
@ -18,6 +18,9 @@ vn-main-menu {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-right: .2em;
|
margin-right: .2em;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
& > .vn-button {
|
& > .vn-button {
|
||||||
|
|
|
||||||
|
|
@ -4,50 +4,48 @@
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 950px;
|
max-width: 950px;
|
||||||
|
|
||||||
& > div {
|
& > h5 {
|
||||||
& > h5 {
|
padding: $spacing-sm;
|
||||||
padding: $spacing-sm;
|
border: none;
|
||||||
border: none;
|
background: $color-main;
|
||||||
background: $color-main;
|
color: $color-font-dark;
|
||||||
color: $color-font-dark;
|
margin: 0;
|
||||||
margin: 0;
|
text-align: center;
|
||||||
text-align: center;
|
line-height: 1.3em;
|
||||||
line-height: 1.3em;
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
& > vn-horizontal {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: $spacing-md;
|
||||||
|
overflow: hidden;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
margin-bottom: $spacing-md;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 15pt;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 7px;
|
||||||
|
padding-bottom: 4px; /* Bottom line-height fix */
|
||||||
|
font-weight: lighter;
|
||||||
|
background-color: $color-main-light;
|
||||||
|
border-bottom: .1em solid $color-main;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
& > vn-horizontal {
|
& > * {
|
||||||
flex-wrap: wrap;
|
margin: $spacing-sm;
|
||||||
padding: $spacing-md;
|
min-width: 14em;
|
||||||
overflow: hidden;
|
padding: 0;
|
||||||
align-items: flex-start;
|
}
|
||||||
|
& > vn-auto {
|
||||||
h4 {
|
width: 100%;
|
||||||
margin-bottom: $spacing-md;
|
}
|
||||||
text-transform: uppercase;
|
vn-label-value > section {
|
||||||
font-size: 15pt;
|
margin-bottom: .3em;
|
||||||
line-height: 1;
|
|
||||||
padding: 7px;
|
|
||||||
padding-bottom: 4px; /* Bottom line-height fix */
|
|
||||||
font-weight: lighter;
|
|
||||||
background-color: $color-main-light;
|
|
||||||
border-bottom: .1em solid $color-main;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
& > * {
|
|
||||||
margin: $spacing-sm;
|
|
||||||
min-width: 14em;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
& > vn-auto {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
vn-label-value > section {
|
|
||||||
margin-bottom: .3em;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
p:after {
|
p:after {
|
||||||
|
|
|
||||||
|
|
@ -61,11 +61,11 @@ vn-bg-title {
|
||||||
}
|
}
|
||||||
.totalBox {
|
.totalBox {
|
||||||
border: 1px solid #CCC;
|
border: 1px solid #CCC;
|
||||||
text-align: right !important;
|
text-align: right;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 18px;
|
padding: $spacing-md;
|
||||||
max-width: 12em;
|
max-width: 14em;
|
||||||
}
|
}
|
||||||
.form {
|
.form {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
width: 28em;
|
width: 28em;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
& > vn-card > div {
|
& > vn-card {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 12em;
|
height: 12em;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,28 @@
|
||||||
<vn-calendar
|
<vn-card>
|
||||||
vn-id="stMonth"
|
<div class="header">
|
||||||
skip="2"
|
<vn-button
|
||||||
has-events="$ctrl.hasEvents($day)"
|
icon="navigate_before"
|
||||||
get-class="$ctrl.getClass($day)"
|
ng-click="$ctrl.step(-1)"
|
||||||
on-selection="$ctrl.onSelection($days, $type, $weekday)"
|
class="flat">
|
||||||
on-move-next="ndMonth.moveNext(2)"
|
</vn-button>
|
||||||
on-move-previous="ndMonth.movePrevious(2)"
|
<span>{{$ctrl.firstDay | date:'MMMM yyyy'}} - {{$ctrl.lastDay | date:'MMMM yyyy'}}</span>
|
||||||
vn-acl="deliveryBoss"
|
<vn-button
|
||||||
class="vn-pa-md">
|
icon="navigate_next"
|
||||||
</vn-calendar>
|
ng-click="$ctrl.step(1)"
|
||||||
<vn-calendar
|
class="flat">
|
||||||
vn-id="ndMonth"
|
</vn-button>
|
||||||
skip="2"
|
</div>
|
||||||
has-events="$ctrl.hasEvents($day)"
|
<div class="calendars vn-pa-md">
|
||||||
get-class="$ctrl.getClass($day)"
|
<vn-calendar
|
||||||
on-selection="$ctrl.onSelection($days, $type, $weekday)"
|
ng-repeat="date in $ctrl.months track by date.getTime()"
|
||||||
default-date="$ctrl.ndMonthDate"
|
default-date="date"
|
||||||
vn-acl="deliveryBoss"
|
display-controls="false"
|
||||||
display-controls="false"
|
hide-contiguous="true"
|
||||||
class="vn-pa-md">
|
has-events="$ctrl.hasEvents($day)"
|
||||||
</vn-calendar>
|
get-class="$ctrl.getClass($day)"
|
||||||
|
on-selection="$ctrl.onSelection($days, $type, $weekday)"
|
||||||
|
class="vn-pa-md"
|
||||||
|
style="min-width: 250px; flex: 1;">
|
||||||
|
</vn-calendar>
|
||||||
|
</div>
|
||||||
|
</vn-card>
|
||||||
|
|
@ -5,96 +5,151 @@ import './style.scss';
|
||||||
class Controller extends Section {
|
class Controller extends Section {
|
||||||
constructor($el, $, $t, $http, $state) {
|
constructor($el, $, $t, $http, $state) {
|
||||||
super($el, $, $t, $http, $state);
|
super($el, $, $t, $http, $state);
|
||||||
|
this.nMonths = 4;
|
||||||
|
|
||||||
this.excls = {};
|
let date = new Date();
|
||||||
this.resetEvents();
|
date.setDate(1);
|
||||||
this.ndMonthDate = new Date();
|
date.setHours(0, 0, 0, 0);
|
||||||
this.ndMonthDate.setMonth(this.ndMonthDate.getMonth() + 1);
|
this.date = date;
|
||||||
|
}
|
||||||
|
|
||||||
|
get date() {
|
||||||
|
return this._date;
|
||||||
|
}
|
||||||
|
|
||||||
|
set date(value) {
|
||||||
|
this._date = value;
|
||||||
|
let stamp = value.getTime();
|
||||||
|
|
||||||
|
let firstDay = new Date(stamp);
|
||||||
|
firstDay.setDate(1);
|
||||||
|
this.firstDay = firstDay;
|
||||||
|
|
||||||
|
let lastDay = new Date(stamp);
|
||||||
|
lastDay.setMonth(lastDay.getMonth() + this.nMonths);
|
||||||
|
lastDay.setDate(0);
|
||||||
|
this.lastDay = lastDay;
|
||||||
|
|
||||||
|
this.months = [];
|
||||||
|
for (let i = 0; i < this.nMonths; i++) {
|
||||||
|
let monthDate = new Date(stamp);
|
||||||
|
monthDate.setMonth(value.getMonth() + i);
|
||||||
|
this.months.push(monthDate);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.refreshEvents();
|
||||||
|
}
|
||||||
|
|
||||||
|
step(direction) {
|
||||||
|
let date = new Date(this.date.getTime());
|
||||||
|
date.setMonth(date.getMonth() + (this.nMonths * direction));
|
||||||
|
this.date = date;
|
||||||
|
}
|
||||||
|
|
||||||
|
get data() {
|
||||||
|
return this._data;
|
||||||
|
}
|
||||||
|
|
||||||
|
set data(value) {
|
||||||
|
this._data = value;
|
||||||
|
|
||||||
|
value = value || {};
|
||||||
|
this.events = value.events;
|
||||||
|
this.exclusions = value.exclusions;
|
||||||
|
|
||||||
|
if (this.events) {
|
||||||
|
let codes = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
|
||||||
|
for (event of this.events) {
|
||||||
|
if (!event.weekDays) continue;
|
||||||
|
let weekDays = event.weekDays.split(',');
|
||||||
|
event.wdays = [];
|
||||||
|
for (let wday of weekDays) {
|
||||||
|
let index = codes.indexOf(wday);
|
||||||
|
if (index !== -1) event.wdays[index] = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.refreshEvents();
|
||||||
|
|
||||||
|
let calendars = this.element.querySelectorAll('vn-calendar');
|
||||||
|
for (let calendar of calendars)
|
||||||
|
calendar.$ctrl.repaint();
|
||||||
|
}
|
||||||
|
|
||||||
|
refreshEvents() {
|
||||||
|
function getDate(date) {
|
||||||
|
return date && new Date(date).setHours(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
let exclusionsMap = {};
|
||||||
|
if (this.exclusions) {
|
||||||
|
for (let exclusion of this.exclusions)
|
||||||
|
exclusionsMap[getDate(exclusion.day)] = exclusion;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.days = {};
|
||||||
|
let day = new Date(this.firstDay.getTime());
|
||||||
|
|
||||||
|
while (day < this.lastDay) {
|
||||||
|
let stamp = day.getTime();
|
||||||
|
let wday = day.getDay();
|
||||||
|
let dayEvents = [];
|
||||||
|
|
||||||
|
if (this.events) {
|
||||||
|
for (let event of this.events) {
|
||||||
|
let match;
|
||||||
|
let from = getDate(event.from);
|
||||||
|
let to = getDate(event.to);
|
||||||
|
|
||||||
|
if (event.from && event.to) {
|
||||||
|
match = stamp >= from && stamp <= to
|
||||||
|
&& event.wdays[wday];
|
||||||
|
} else if (event.from)
|
||||||
|
match = from == stamp;
|
||||||
|
else
|
||||||
|
match = event.wdays[wday];
|
||||||
|
|
||||||
|
if (match)
|
||||||
|
dayEvents.push(event);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let exclusion = exclusionsMap[stamp];
|
||||||
|
|
||||||
|
if (dayEvents.length || exclusion) {
|
||||||
|
let dayData = {};
|
||||||
|
if (dayEvents.length) dayData.events = dayEvents;
|
||||||
|
if (exclusion) dayData.exclusion = exclusion;
|
||||||
|
this.days[stamp] = dayData;
|
||||||
|
}
|
||||||
|
|
||||||
|
day.setDate(day.getDate() + 1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onSelection($days, $type, $weekday) {
|
onSelection($days, $type, $weekday) {
|
||||||
this.emit('selection', {$days, $type, $weekday});
|
let $data = [];
|
||||||
}
|
for (let day of $days) {
|
||||||
|
let dayData = this.days[day.getTime()];
|
||||||
resetEvents() {
|
if (dayData) $data.push(dayData);
|
||||||
this.wdays = [];
|
|
||||||
this.days = {};
|
|
||||||
this.ranges = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
get events() {
|
|
||||||
return this._events;
|
|
||||||
}
|
|
||||||
|
|
||||||
set events(value) {
|
|
||||||
this._events = value;
|
|
||||||
this.resetEvents();
|
|
||||||
if (!value) return;
|
|
||||||
|
|
||||||
function setWdays(wdays, weekDays) {
|
|
||||||
let codes = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
|
|
||||||
if (!weekDays) return [];
|
|
||||||
weekDays = weekDays.split(',');
|
|
||||||
for (let wday of weekDays)
|
|
||||||
wdays[codes.indexOf(wday)] = true;
|
|
||||||
return wdays;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
for (let event of value) {
|
this.emit('selection', {
|
||||||
if (event.from && event.to) {
|
$days,
|
||||||
this.ranges.push({
|
$type,
|
||||||
from: new Date(event.from).setHours(0, 0, 0, 0),
|
$weekday,
|
||||||
to: new Date(event.to).setHours(0, 0, 0, 0),
|
$data
|
||||||
wdays: setWdays([], event.weekDays)
|
|
||||||
});
|
|
||||||
} else if (event.from) {
|
|
||||||
let day = new Date(event.from).setHours(0, 0, 0, 0);
|
|
||||||
this.days[day] = true;
|
|
||||||
} else
|
|
||||||
setWdays(this.wdays, event.weekDays);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.repaint();
|
|
||||||
}
|
|
||||||
|
|
||||||
get exclusions() {
|
|
||||||
return this._exclusions;
|
|
||||||
}
|
|
||||||
|
|
||||||
set exclusions(value) {
|
|
||||||
this._exclusions = value;
|
|
||||||
this.excls = {};
|
|
||||||
if (!value) return;
|
|
||||||
|
|
||||||
value.forEach(exclusion => {
|
|
||||||
let day = new Date(exclusion.day).setHours(0, 0, 0, 0);
|
|
||||||
this.excls[day] = true;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
this.repaint();
|
|
||||||
}
|
|
||||||
|
|
||||||
hasRange(time, wday) {
|
|
||||||
let range = this.ranges.find(e => e.from <= time && e.to >= time);
|
|
||||||
return range && range.wdays[wday];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
hasEvents(day) {
|
hasEvents(day) {
|
||||||
let time = day.getTime();
|
return this.days[day.getTime()] != null;
|
||||||
let wday = day.getDay();
|
|
||||||
return this.wdays[wday]
|
|
||||||
|| this.days[time]
|
|
||||||
|| this.hasRange(time, wday);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
getClass(day) {
|
getClass(day) {
|
||||||
if (this.excls[day.getTime()])
|
let dayData = this.days[day.getTime()];
|
||||||
return 'excluded';
|
return dayData && dayData.exclusion ? 'excluded' : '';
|
||||||
}
|
|
||||||
|
|
||||||
repaint() {
|
|
||||||
this.$.stMonth.repaint();
|
|
||||||
this.$.ndMonth.repaint();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -102,7 +157,6 @@ ngModule.component('vnZoneCalendar', {
|
||||||
template: require('./index.html'),
|
template: require('./index.html'),
|
||||||
controller: Controller,
|
controller: Controller,
|
||||||
bindings: {
|
bindings: {
|
||||||
events: '<?',
|
data: '<?'
|
||||||
exclusions: '<?'
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,40 @@
|
||||||
@import "variables";
|
@import "variables";
|
||||||
|
|
||||||
vn-zone-calendar {
|
vn-zone-calendar {
|
||||||
vn-calendar .day {
|
display: block;
|
||||||
&.primary .day-number {
|
|
||||||
background-color: $color-success;
|
& > vn-card {
|
||||||
|
& > .header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: $color-main;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
height: 45px;
|
||||||
|
|
||||||
|
& > .vn-button {
|
||||||
|
color: inherit;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&.excluded .day-number {
|
& > .calendars {
|
||||||
background-color: $color-alert;
|
display: flex;
|
||||||
color: $color-font-dark;
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
|
||||||
|
& > vn-calendar {
|
||||||
|
max-width: 18em;
|
||||||
|
|
||||||
|
.day {
|
||||||
|
&.event .day-number {
|
||||||
|
background-color: $color-success;
|
||||||
|
}
|
||||||
|
&.excluded .day-number {
|
||||||
|
background-color: $color-alert;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,47 +1,43 @@
|
||||||
<div style="margin: 0 auto; max-width: 40em;">
|
<div class="vn-w-md">
|
||||||
<form ng-submit="$ctrl.onSubmit()">
|
<form ng-submit="$ctrl.onSubmit()">
|
||||||
<vn-card class="vn-pa-md">
|
<vn-card class="vn-pa-lg">
|
||||||
<vn-vertical>
|
<vn-horizontal>
|
||||||
<vn-horizontal>
|
<vn-autocomplete
|
||||||
<vn-autocomplete
|
vn-one
|
||||||
vn-one
|
label="Agency"
|
||||||
label="Agency"
|
ng-model="$ctrl.params.agencyModeFk"
|
||||||
ng-model="$ctrl.params.agencyModeFk"
|
url="/api/AgencyModes/isActive">
|
||||||
url="/api/AgencyModes/isActive">
|
</vn-autocomplete>
|
||||||
</vn-autocomplete>
|
</vn-horizontal>
|
||||||
</vn-horizontal>
|
<vn-horizontal>
|
||||||
<vn-horizontal>
|
<vn-autocomplete
|
||||||
<vn-autocomplete
|
vn-one
|
||||||
vn-one
|
label="Province"
|
||||||
label="Province"
|
ng-model="$ctrl.params.provinceFk"
|
||||||
ng-model="$ctrl.params.provinceFk"
|
url="/api/Provinces"
|
||||||
url="/api/Provinces"
|
fields="['countryFk']"
|
||||||
fields="['countryFk']"
|
include="'country'"
|
||||||
include="'country'"
|
style="margin-right: .5em;">
|
||||||
style="margin-right: .5em;">
|
<tpl-item>
|
||||||
<tpl-item>
|
<div>{{name}}</div>
|
||||||
<div>{{name}}</div>
|
<div style="font-size: .9em; color: gray; line-height: .8em;">
|
||||||
<div style="font-size: .9em; color: gray; line-height: .8em;">
|
{{country.country}}
|
||||||
{{country.country}}
|
</div>
|
||||||
</div>
|
</tpl-item>
|
||||||
</tpl-item>
|
</vn-autocomplete>
|
||||||
</vn-autocomplete>
|
<vn-textfield
|
||||||
<vn-textfield
|
vn-one
|
||||||
vn-one
|
label="Postcode"
|
||||||
label="Postcode"
|
ng-model="$ctrl.params.postCode">
|
||||||
ng-model="$ctrl.params.postCode">
|
</vn-textfield>
|
||||||
</vn-textfield>
|
</vn-horizontal>
|
||||||
</vn-horizontal>
|
|
||||||
</vn-vertical>
|
|
||||||
</vn-card>
|
</vn-card>
|
||||||
<vn-button-bar>
|
<vn-button-bar>
|
||||||
<vn-submit label="Query"></vn-submit>
|
<vn-submit label="Query"></vn-submit>
|
||||||
</vn-button-bar>
|
</vn-button-bar>
|
||||||
</form>
|
</form>
|
||||||
<vn-card class="vn-pa-md vn-mt-md">
|
<vn-zone-calendar
|
||||||
<vn-zone-calendar
|
data="data"
|
||||||
events="events.events"
|
class="vn-mt-md">
|
||||||
exclusions="events.exclusions">
|
</vn-zone-calendar>
|
||||||
</vn-zone-calendar>
|
|
||||||
</vn-card>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ class Controller {
|
||||||
|
|
||||||
onSubmit() {
|
onSubmit() {
|
||||||
this.$http.get(`/api/Zones/getEvents`, {params: this.params})
|
this.$http.get(`/api/Zones/getEvents`, {params: this.params})
|
||||||
.then(res => this.$.events = res.data);
|
.then(res => this.$.data = res.data);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Controller.$inject = ['$scope', '$http'];
|
Controller.$inject = ['$scope', '$http'];
|
||||||
|
|
|
||||||
|
|
@ -1,27 +1,60 @@
|
||||||
<div class="main-with-right-menu">
|
<div class="main-with-right-menu">
|
||||||
<vn-data-viewer
|
<vn-zone-calendar
|
||||||
|
id="calendar"
|
||||||
data="data"
|
data="data"
|
||||||
is-loading="!data"
|
on-selection="$ctrl.onSelection($days, $type, $weekday, $data)"
|
||||||
|
class="vn-w-md">
|
||||||
|
</vn-zone-calendar>
|
||||||
|
</div>
|
||||||
|
<vn-side-menu side="right">
|
||||||
|
<div class="vn-pa-md">
|
||||||
|
<h6
|
||||||
|
class="text-secondary"
|
||||||
|
style="font-weight: normal;"
|
||||||
|
translate>
|
||||||
|
Edit mode
|
||||||
|
</h6>
|
||||||
|
<vn-vertical>
|
||||||
|
<vn-radio
|
||||||
|
label="Include"
|
||||||
|
val="include"
|
||||||
|
ng-model="$ctrl.editMode">
|
||||||
|
</vn-radio>
|
||||||
|
<vn-radio
|
||||||
|
label="Exclude"
|
||||||
|
val="exclude"
|
||||||
|
ng-model="$ctrl.editMode">
|
||||||
|
</vn-radio>
|
||||||
|
</vn-vertical>
|
||||||
|
</div>
|
||||||
|
<h6
|
||||||
|
class="text-secondary vn-px-md"
|
||||||
|
style="font-weight: normal;"
|
||||||
|
translate>
|
||||||
|
Events
|
||||||
|
</h6>
|
||||||
|
<vn-data-viewer
|
||||||
|
data="data.events"
|
||||||
|
is-loading="!data.events"
|
||||||
class="vn-w-sm">
|
class="vn-w-sm">
|
||||||
<vn-card>
|
|
||||||
<div class="vn-list">
|
<div class="vn-list">
|
||||||
<a
|
<a
|
||||||
ng-repeat="row in data"
|
ng-repeat="row in data.events"
|
||||||
translate-attr="{title: 'Edit'}"
|
translate-attr="{title: 'Edit'}"
|
||||||
ng-click="$ctrl.onEdit(row, $event)"
|
ng-click="$ctrl.onEditClick(row, $event)"
|
||||||
class="vn-list-item">
|
class="vn-list-item">
|
||||||
<vn-horizontal>
|
<vn-horizontal>
|
||||||
<vn-one>
|
<vn-one>
|
||||||
<div
|
<div
|
||||||
ng-if="::row.from && !row.to"
|
ng-if="::row.from && !row.to"
|
||||||
class="vn-mb-sm">
|
class="vn-mb-sm">
|
||||||
{{::row.from | date:'dd/MM/yyyy'}}
|
{{::row.from | date:'dd/MM/yy'}}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
ng-if="::!row.from || row.to"
|
ng-if="::!row.from || row.to"
|
||||||
class="vn-mb-sm">
|
class="vn-mb-sm ellipsize">
|
||||||
<span ng-if="row.to">
|
<span ng-if="row.to">
|
||||||
{{::row.from | date:'dd/MM/yyyy'}} - {{::row.to | date:'dd/MM/yyyy'}}
|
{{::row.from | date:'dd/MM/yy'}} - {{::row.to | date:'dd/MM/yy'}}
|
||||||
</span>
|
</span>
|
||||||
<span ng-if="!row.to" translate>
|
<span ng-if="!row.to" translate>
|
||||||
Indefinitely
|
Indefinitely
|
||||||
|
|
@ -51,21 +84,13 @@
|
||||||
<vn-icon-button
|
<vn-icon-button
|
||||||
icon="delete"
|
icon="delete"
|
||||||
translate-attr="{title: 'Delete'}"
|
translate-attr="{title: 'Delete'}"
|
||||||
ng-click="$ctrl.onDelete(row.id, $event)">
|
ng-click="$ctrl.onDeleteClick(row.id, $event)">
|
||||||
</vn-icon-button>
|
</vn-icon-button>
|
||||||
</vn-horizontal>
|
</vn-horizontal>
|
||||||
</vn-horizontal>
|
</vn-horizontal>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</vn-card>
|
|
||||||
</vn-data-viewer>
|
</vn-data-viewer>
|
||||||
</div>
|
|
||||||
<vn-side-menu side="right">
|
|
||||||
<vn-zone-calendar
|
|
||||||
events="data"
|
|
||||||
exclusions="exclusions"
|
|
||||||
on-selection="$ctrl.onCreate($days, $type, $weekday)">
|
|
||||||
</vn-zone-calendar>
|
|
||||||
</vn-side-menu>
|
</vn-side-menu>
|
||||||
<vn-dialog
|
<vn-dialog
|
||||||
vn-id="dialog"
|
vn-id="dialog"
|
||||||
|
|
@ -89,16 +114,10 @@
|
||||||
val="range">
|
val="range">
|
||||||
</vn-radio>
|
</vn-radio>
|
||||||
</vn-vertical>
|
</vn-vertical>
|
||||||
<div
|
<vn-wday-picker
|
||||||
ng-if="$ctrl.eventType != 'day'"
|
ng-if="$ctrl.eventType != 'day'"
|
||||||
class="week-days">
|
ng-model="$ctrl.selected.wdays">
|
||||||
<span
|
</vn-wday-picker>
|
||||||
ng-repeat="wday in $ctrl.wdays"
|
|
||||||
ng-class="{marked: $ctrl.selected.wdays[wday.code]}"
|
|
||||||
ng-click="$ctrl.selected.wdays[wday.code] = !$ctrl.selected.wdays[wday.code]">
|
|
||||||
{{wday.abr}}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<vn-date-picker
|
<vn-date-picker
|
||||||
ng-if="$ctrl.eventType == 'day'"
|
ng-if="$ctrl.eventType == 'day'"
|
||||||
label="Day"
|
label="Day"
|
||||||
|
|
@ -140,8 +159,21 @@
|
||||||
</vn-vertical>
|
</vn-vertical>
|
||||||
</tpl-body>
|
</tpl-body>
|
||||||
<tpl-buttons>
|
<tpl-buttons>
|
||||||
<input type="button" response="CANCEL" translate-attr="{value: 'Cancel'}"/>
|
<input
|
||||||
<button response="ACCEPT" translate>Save</button>
|
type="button"
|
||||||
|
response="CANCEL"
|
||||||
|
translate-attr="{value: 'Cancel'}">
|
||||||
|
</input>
|
||||||
|
<button
|
||||||
|
ng-if="!$ctrl.isNew"
|
||||||
|
response="DELETE"
|
||||||
|
translate>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
<button response="ACCEPT">
|
||||||
|
<span ng-if="$ctrl.isNew" translate>Add</span>
|
||||||
|
<span ng-if="!$ctrl.isNew" translate>Save</span>
|
||||||
|
</button>
|
||||||
</tpl-buttons>
|
</tpl-buttons>
|
||||||
</vn-dialog>
|
</vn-dialog>
|
||||||
<vn-confirm
|
<vn-confirm
|
||||||
|
|
|
||||||
|
|
@ -1,53 +1,28 @@
|
||||||
import ngModule from '../module';
|
import ngModule from '../module';
|
||||||
import Section from 'core/lib/section';
|
import Section from 'core/lib/section';
|
||||||
import './style.scss';
|
|
||||||
|
|
||||||
class Controller extends Section {
|
class Controller extends Section {
|
||||||
constructor($el, $, $t, $http, $state) {
|
constructor($el, $, $t, $http, $state, $q, vnWeekDays) {
|
||||||
super($el, $, $t, $http, $state);
|
super($el, $, $t, $http, $state);
|
||||||
|
this.$q = $q;
|
||||||
|
this.vnWeekDays = vnWeekDays;
|
||||||
|
this.editMode = 'include';
|
||||||
|
|
||||||
this.wdays = [
|
this.path = `api/Zones/${this.$stateParams.id}/events`;
|
||||||
{
|
this.exclusionsPath = `api/Zones/${this.$stateParams.id}/exclusions`;
|
||||||
code: 'mon',
|
|
||||||
name: 'Monday'
|
|
||||||
}, {
|
|
||||||
code: 'tue',
|
|
||||||
name: 'Tuesday'
|
|
||||||
}, {
|
|
||||||
code: 'wed',
|
|
||||||
name: 'Wednesday'
|
|
||||||
}, {
|
|
||||||
code: 'thu',
|
|
||||||
name: 'Thursday'
|
|
||||||
}, {
|
|
||||||
code: 'fri',
|
|
||||||
name: 'Friday'
|
|
||||||
}, {
|
|
||||||
code: 'sat',
|
|
||||||
name: 'Saturday'
|
|
||||||
}, {
|
|
||||||
code: 'sun',
|
|
||||||
name: 'Sunday'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
this.abrWdays = {};
|
|
||||||
for (let wday of this.wdays) {
|
|
||||||
let locale = this._(wday.name);
|
|
||||||
this.abrWdays[wday.code] = locale.substr(0, 3);
|
|
||||||
wday.abr = locale.substr(0, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.$http.get(`/api/Zones/${this.$stateParams.id}/exclusions`)
|
|
||||||
.then(res => this.$.exclusions = res.data);
|
|
||||||
|
|
||||||
this.path = `/api/Zones/${this.$stateParams.id}/events`;
|
|
||||||
this.refresh();
|
this.refresh();
|
||||||
}
|
}
|
||||||
|
|
||||||
refresh() {
|
refresh() {
|
||||||
this.$http.get(this.path)
|
let data = {};
|
||||||
.then(res => this.$.data = res.data);
|
this.$q.all([
|
||||||
|
this.$http.get(this.path)
|
||||||
|
.then(res => data.events = res.data),
|
||||||
|
this.$http.get(this.exclusionsPath)
|
||||||
|
.then(res => data.exclusions = res.data)
|
||||||
|
]).finally(() => {
|
||||||
|
this.$.data = data;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
formatWdays(weekDays) {
|
formatWdays(weekDays) {
|
||||||
|
|
@ -55,16 +30,43 @@ class Controller extends Section {
|
||||||
|
|
||||||
let abrWdays = [];
|
let abrWdays = [];
|
||||||
for (let wday of weekDays.split(','))
|
for (let wday of weekDays.split(','))
|
||||||
abrWdays.push(this.abrWdays[wday]);
|
abrWdays.push(this.vnWeekDays.map[wday].localeAbr);
|
||||||
|
|
||||||
return abrWdays.length < 7
|
return abrWdays.length < 7
|
||||||
? abrWdays.join(', ')
|
? abrWdays.join(', ')
|
||||||
: this._('Everyday');
|
: this._('Everyday');
|
||||||
}
|
}
|
||||||
|
|
||||||
onEdit(row, event) {
|
onSelection(days, type, weekday, data) {
|
||||||
if (event.defaultPrevented) return;
|
if (this.editMode == 'include') {
|
||||||
|
let dayData = data[0] || {};
|
||||||
|
let event = dayData.events && dayData.events[0];
|
||||||
|
|
||||||
|
if (event)
|
||||||
|
this.edit(event);
|
||||||
|
else
|
||||||
|
this.create(days, type, weekday);
|
||||||
|
} else {
|
||||||
|
let exclusions = [];
|
||||||
|
for (let dayData of data) {
|
||||||
|
if (dayData.exclusion)
|
||||||
|
exclusions.push(dayData.exclusion.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (exclusions.length)
|
||||||
|
this.exclusionDelete(exclusions);
|
||||||
|
else
|
||||||
|
this.exclusionCreate(days);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onEditClick(row, event) {
|
||||||
|
if (event.defaultPrevented) return;
|
||||||
|
event.preventDefault();
|
||||||
|
this.edit(row);
|
||||||
|
}
|
||||||
|
|
||||||
|
edit(row) {
|
||||||
this.isNew = false;
|
this.isNew = false;
|
||||||
|
|
||||||
if (row.from && !row.to)
|
if (row.from && !row.to)
|
||||||
|
|
@ -86,67 +88,74 @@ class Controller extends Section {
|
||||||
this.$.dialog.show();
|
this.$.dialog.show();
|
||||||
}
|
}
|
||||||
|
|
||||||
onCreate($day, $type, $weekday) {
|
create(days, type, weekday) {
|
||||||
this.isNew = true;
|
this.isNew = true;
|
||||||
this.eventType = $type == 'day' ? 'day' : 'indefinitely';
|
this.eventType = type == 'day' ? 'day' : 'indefinitely';
|
||||||
|
|
||||||
if ($type == 'weekday') {
|
if (type == 'weekday') {
|
||||||
let wdays = [];
|
let wdays = [];
|
||||||
let index = $weekday - 1;
|
let code = this.vnWeekDays.days[weekday].code;
|
||||||
if (index < 0) index = 7 - index;
|
wdays[code] = true;
|
||||||
wdays[this.wdays[index].code] = true;
|
|
||||||
this.selected = {wdays};
|
this.selected = {wdays};
|
||||||
} else
|
} else
|
||||||
this.selected = {from: $day[0]};
|
this.selected = {from: days[0]};
|
||||||
|
|
||||||
this.$.dialog.show();
|
this.$.dialog.show();
|
||||||
}
|
}
|
||||||
|
|
||||||
onSave(response) {
|
onSave(response) {
|
||||||
if (response != 'ACCEPT') return;
|
if (response == 'ACCEPT') {
|
||||||
|
let selected = this.selected;
|
||||||
|
|
||||||
let selected = this.selected;
|
if (this.eventType == 'indefinitely') {
|
||||||
|
selected.from = null;
|
||||||
if (this.eventType == 'indefinitely') {
|
selected.to = null;
|
||||||
selected.from = null;
|
|
||||||
selected.to = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.eventType != 'day') {
|
|
||||||
let weekDays = [];
|
|
||||||
|
|
||||||
for (let wday in selected.wdays) {
|
|
||||||
if (selected.wdays[wday])
|
|
||||||
weekDays.push(wday);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
selected.weekDays = weekDays.join(',');
|
if (this.eventType != 'day') {
|
||||||
} else {
|
let weekDays = [];
|
||||||
selected.to = null;
|
|
||||||
selected.weekDays = '';
|
for (let wday in selected.wdays) {
|
||||||
|
if (selected.wdays[wday])
|
||||||
|
weekDays.push(wday);
|
||||||
|
}
|
||||||
|
|
||||||
|
selected.weekDays = weekDays.join(',');
|
||||||
|
} else {
|
||||||
|
selected.to = null;
|
||||||
|
selected.weekDays = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
let req;
|
||||||
|
|
||||||
|
if (this.isNew)
|
||||||
|
req = this.$http.post(this.path, selected);
|
||||||
|
else
|
||||||
|
req = this.$http.put(`${this.path}/${selected.id}`, selected);
|
||||||
|
|
||||||
|
req.then(() => {
|
||||||
|
this.selected = null;
|
||||||
|
this.isNew = null;
|
||||||
|
this.$.dialog.hide();
|
||||||
|
this.refresh();
|
||||||
|
});
|
||||||
|
|
||||||
|
return false;
|
||||||
|
} else if (response == 'DELETE') {
|
||||||
|
this.onDelete(this.selected.id);
|
||||||
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
let req;
|
|
||||||
|
|
||||||
if (this.isNew)
|
|
||||||
req = this.$http.post(this.path, selected);
|
|
||||||
else
|
|
||||||
req = this.$http.put(`${this.path}/${selected.id}`, selected);
|
|
||||||
|
|
||||||
req.then(() => {
|
|
||||||
this.selected = null;
|
|
||||||
this.isNew = null;
|
|
||||||
this.$.dialog.hide();
|
|
||||||
this.refresh();
|
|
||||||
});
|
|
||||||
|
|
||||||
return false;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onDelete(id, event) {
|
onDeleteClick(id, event) {
|
||||||
|
if (event.defaultPrevented) return;
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
this.$.confirm.show();
|
this.onDelete(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
onDelete(id) {
|
||||||
this.deleteId = id;
|
this.deleteId = id;
|
||||||
|
this.$.confirm.show();
|
||||||
}
|
}
|
||||||
|
|
||||||
delete(response) {
|
delete(response) {
|
||||||
|
|
@ -156,9 +165,33 @@ class Controller extends Section {
|
||||||
.then(() => {
|
.then(() => {
|
||||||
this.refresh();
|
this.refresh();
|
||||||
this.deleteId = null;
|
this.deleteId = null;
|
||||||
|
this.$.dialog.hide();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
exclusionCreate(days) {
|
||||||
|
let exclusions = days.map(day => {
|
||||||
|
return {day};
|
||||||
|
});
|
||||||
|
|
||||||
|
this.$http.post(this.exclusionsPath, exclusions)
|
||||||
|
.then(() => this.refresh());
|
||||||
|
}
|
||||||
|
|
||||||
|
exclusionDelete(ids) {
|
||||||
|
let promises = [];
|
||||||
|
|
||||||
|
for (let id of ids) {
|
||||||
|
promises.push(
|
||||||
|
this.$http.delete(`${this.exclusionsPath}/${id}`)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$q.all(promises)
|
||||||
|
.then(() => this.refresh());
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Controller.$inject = ['$element', '$scope', '$translate', '$http', '$state', '$q', 'vnWeekDays'];
|
||||||
|
|
||||||
ngModule.component('vnZoneEvents', {
|
ngModule.component('vnZoneEvents', {
|
||||||
template: require('./index.html'),
|
template: require('./index.html'),
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
Edit mode: Modo de edición
|
||||||
|
Include: Incluir
|
||||||
|
Exclude: Excluir
|
||||||
|
Events: Eventos
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
@import "effects";
|
|
||||||
|
|
||||||
vn-zone-events {
|
|
||||||
.week-days {
|
|
||||||
margin-top: $spacing-sm;
|
|
||||||
margin-bottom: $spacing-md;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
& > span {
|
|
||||||
@extend %clickable;
|
|
||||||
border-radius: 50%;
|
|
||||||
padding: .4em;
|
|
||||||
margin: .2em;
|
|
||||||
display: inline-flex;
|
|
||||||
width: 1.5em;
|
|
||||||
height: 1.5em;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
outline: none;
|
|
||||||
background-color: rgba(0, 0, 0, .05);
|
|
||||||
|
|
||||||
&.marked {
|
|
||||||
background: $color-main;
|
|
||||||
color: $color-font-dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
<div class="main-with-right-menu">
|
|
||||||
<vn-data-viewer
|
|
||||||
data="data"
|
|
||||||
is-loading="!data"
|
|
||||||
class="vn-w-xs">
|
|
||||||
<vn-card>
|
|
||||||
<vn-table>
|
|
||||||
<vn-tbody>
|
|
||||||
<vn-tr ng-repeat="row in data | orderBy:'day'">
|
|
||||||
<vn-td>{{::row.day | date:'dd/MM/yyyy'}}</vn-td>
|
|
||||||
<vn-td shrink>
|
|
||||||
<vn-icon-button
|
|
||||||
icon="delete"
|
|
||||||
translate-attr="{title: 'Delete'}"
|
|
||||||
ng-click="$ctrl.onDelete(row.id)">
|
|
||||||
</vn-icon-button>
|
|
||||||
</vn-td>
|
|
||||||
</vn-tr>
|
|
||||||
</vn-tbody>
|
|
||||||
</vn-table>
|
|
||||||
</vn-card>
|
|
||||||
</vn-data-viewer>
|
|
||||||
</div>
|
|
||||||
<vn-side-menu side="right">
|
|
||||||
<vn-zone-calendar
|
|
||||||
events="events"
|
|
||||||
exclusions="data"
|
|
||||||
on-selection="$ctrl.onCreate($days)">
|
|
||||||
</vn-zone-calendar>
|
|
||||||
</vn-side-menu>
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
import ngModule from '../module';
|
|
||||||
import Section from 'core/lib/section';
|
|
||||||
|
|
||||||
class Controller extends Section {
|
|
||||||
constructor($el, $, $t, $http, $state) {
|
|
||||||
super($el, $, $t, $http, $state);
|
|
||||||
|
|
||||||
this.$http.get(`/api/Zones/${this.$stateParams.id}/events`)
|
|
||||||
.then(res => this.$.events = res.data);
|
|
||||||
|
|
||||||
this.path = `/api/Zones/${this.$stateParams.id}/exclusions`;
|
|
||||||
this.refresh();
|
|
||||||
}
|
|
||||||
|
|
||||||
refresh() {
|
|
||||||
this.$http.get(this.path)
|
|
||||||
.then(res => this.$.data = res.data);
|
|
||||||
}
|
|
||||||
|
|
||||||
onCreate($days) {
|
|
||||||
this.$http.post(this.path, {day: $days[0]})
|
|
||||||
.then(() => this.refresh());
|
|
||||||
}
|
|
||||||
|
|
||||||
onDelete(id) {
|
|
||||||
if (!id) return;
|
|
||||||
this.$http.delete(`${this.path}/${id}`)
|
|
||||||
.then(() => this.refresh());
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ngModule.component('vnZoneExclusions', {
|
|
||||||
template: require('./index.html'),
|
|
||||||
controller: Controller
|
|
||||||
});
|
|
||||||
|
|
@ -12,6 +12,5 @@ import './basic-data';
|
||||||
import './warehouses';
|
import './warehouses';
|
||||||
import './events';
|
import './events';
|
||||||
import './calendar';
|
import './calendar';
|
||||||
import './exclusions';
|
|
||||||
import './location';
|
import './location';
|
||||||
import './calendar';
|
import './calendar';
|
||||||
|
|
|
||||||
|
|
@ -8,8 +8,7 @@
|
||||||
{"state": "zone.card.basicData", "icon": "settings"},
|
{"state": "zone.card.basicData", "icon": "settings"},
|
||||||
{"state": "zone.card.location", "icon": "my_location"},
|
{"state": "zone.card.location", "icon": "my_location"},
|
||||||
{"state": "zone.card.warehouses", "icon": "home"},
|
{"state": "zone.card.warehouses", "icon": "home"},
|
||||||
{"state": "zone.card.events", "icon": "today"},
|
{"state": "zone.card.events", "icon": "today"}
|
||||||
{"state": "zone.card.exclusions", "icon": "block"}
|
|
||||||
],
|
],
|
||||||
"routes": [
|
"routes": [
|
||||||
{
|
{
|
||||||
|
|
@ -65,11 +64,6 @@
|
||||||
"state": "zone.card.events",
|
"state": "zone.card.events",
|
||||||
"component": "vn-zone-events",
|
"component": "vn-zone-events",
|
||||||
"description": "Calendar"
|
"description": "Calendar"
|
||||||
}, {
|
|
||||||
"url": "/exclusions",
|
|
||||||
"state": "zone.card.exclusions",
|
|
||||||
"component": "vn-zone-exclusions",
|
|
||||||
"description": "Exclusions"
|
|
||||||
}, {
|
}, {
|
||||||
"url": "/location?q",
|
"url": "/location?q",
|
||||||
"state": "zone.card.location",
|
"state": "zone.card.location",
|
||||||
|
|
|
||||||
|
|
@ -1,36 +1,39 @@
|
||||||
<vn-crud-model
|
<vn-crud-model
|
||||||
url="/api/AbsenceTypes"
|
url="api/AbsenceTypes"
|
||||||
data="$ctrl.absenceTypes" auto-load="true">
|
data="absenceTypes"
|
||||||
|
auto-load="true">
|
||||||
</vn-crud-model>
|
</vn-crud-model>
|
||||||
<div class="main-with-right-menu">
|
<div class="main-with-right-menu">
|
||||||
<vn-card class="vn-pa-sm">
|
<div>
|
||||||
<vn-horizontal class="calendar-list">
|
<vn-card class="vn-pa-sm vn-w-xl calendars">
|
||||||
<section class="calendar" ng-repeat="month in $ctrl.months">
|
<vn-calendar
|
||||||
<vn-calendar
|
ng-repeat="month in $ctrl.months"
|
||||||
data="$ctrl.events"
|
data="$ctrl.events"
|
||||||
default-date="month"
|
default-date="month"
|
||||||
display-controls="false">
|
format-day="$ctrl.formatDay($day, $element)"
|
||||||
</vn-calendar>
|
display-controls="false"
|
||||||
</section>
|
hide-contiguous="true"
|
||||||
</vn-horizontal>
|
hide-year="true">
|
||||||
</vn-card>
|
</vn-calendar>
|
||||||
<vn-side-menu side="right">
|
</vn-card>
|
||||||
<vn-vertical class="vn-pa-sm">
|
</div>
|
||||||
<vn-vertical class="totalBox">
|
</div>
|
||||||
<h6 translate>Holidays</h6>
|
<vn-side-menu side="right">
|
||||||
<vn-auto>
|
<div class="vn-pa-md">
|
||||||
{{'Used' | translate}} {{$ctrl.calendar.holidaysEnjoyed}}
|
<div class="totalBox" style="text-align: center;">
|
||||||
{{'of' | translate}} {{$ctrl.calendar.totalHolidays}} {{'days' | translate}}
|
<h6 translate>Holidays</h6>
|
||||||
</vn-auto>
|
|
||||||
</vn-vertical>
|
|
||||||
<div>
|
<div>
|
||||||
<vn-chip ng-repeat="legend in $ctrl.legends">
|
{{'Used' | translate}} {{$ctrl.calendar.holidaysEnjoyed}}
|
||||||
<vn-avatar
|
{{'of' | translate}} {{$ctrl.calendar.totalHolidays}} {{'days' | translate}}
|
||||||
ng-style="{backgroundColor: legend.color}">
|
|
||||||
</vn-avatar>
|
|
||||||
{{legend.name}}
|
|
||||||
</vn-chip>
|
|
||||||
</div>
|
</div>
|
||||||
</vn-vertical>
|
</div>
|
||||||
</vn-side-menu>
|
<div class="vn-pt-md">
|
||||||
</div>
|
<vn-chip ng-repeat="absenceType in absenceTypes">
|
||||||
|
<vn-avatar
|
||||||
|
ng-style="{backgroundColor: absenceType.rgb}">
|
||||||
|
</vn-avatar>
|
||||||
|
{{absenceType.name}}
|
||||||
|
</vn-chip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</vn-side-menu>
|
||||||
|
|
@ -2,11 +2,39 @@ import ngModule from '../module';
|
||||||
import './style.scss';
|
import './style.scss';
|
||||||
|
|
||||||
class Controller {
|
class Controller {
|
||||||
constructor($scope, $http) {
|
constructor($element, $http) {
|
||||||
this.$scope = $scope;
|
this.element = $element[0];
|
||||||
this.$http = $http;
|
this.$http = $http;
|
||||||
this.months = this.monthsOfYear();
|
this.date = new Date();
|
||||||
this.events = [];
|
this.events = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
get date() {
|
||||||
|
return this._date;
|
||||||
|
}
|
||||||
|
|
||||||
|
set date(value) {
|
||||||
|
this._date = value;
|
||||||
|
value.setHours(0, 0, 0, 0);
|
||||||
|
|
||||||
|
const started = new Date(value.getTime());
|
||||||
|
started.setMonth(0);
|
||||||
|
started.setDate(1);
|
||||||
|
this.started = started;
|
||||||
|
|
||||||
|
const ended = new Date(value.getTime());
|
||||||
|
ended.setMonth(12);
|
||||||
|
ended.setDate(0);
|
||||||
|
this.ended = ended;
|
||||||
|
|
||||||
|
this.months = new Array(12);
|
||||||
|
|
||||||
|
for (let i = 0; i < this.months.length; i++) {
|
||||||
|
const now = new Date(value.getTime());
|
||||||
|
now.setDate(1);
|
||||||
|
now.setMonth(i);
|
||||||
|
this.months[i] = now;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
get worker() {
|
get worker() {
|
||||||
|
|
@ -15,118 +43,67 @@ class Controller {
|
||||||
|
|
||||||
set worker(value) {
|
set worker(value) {
|
||||||
this._worker = value;
|
this._worker = value;
|
||||||
|
|
||||||
if (!value) return;
|
if (!value) return;
|
||||||
|
|
||||||
let params = {params: {
|
let params = {
|
||||||
workerFk: this.worker.id,
|
workerFk: this.worker.id,
|
||||||
started: this.started,
|
started: this.started,
|
||||||
ended: this.ended
|
ended: this.ended
|
||||||
}};
|
};
|
||||||
|
this.$http.get(`api/WorkerCalendars/absences`, {params})
|
||||||
let query = `/worker/api/WorkerCalendars/absences`;
|
.then(res => this.onData(res.data));
|
||||||
this.$http.get(query, params).then(res => {
|
|
||||||
if (!res.data) return;
|
|
||||||
|
|
||||||
this.setHolidays(res.data);
|
|
||||||
this.setWorkerCalendar(res.data);
|
|
||||||
this.calendar = res.data.calendar;
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
setHolidays(data) {
|
onData(data) {
|
||||||
if (!data.holidays) return;
|
this.events = {};
|
||||||
|
this.calendar = data.calendar;
|
||||||
|
|
||||||
const holidays = data.holidays;
|
let addEvent = (day, event) => {
|
||||||
const events = [];
|
this.events[new Date(day).getTime()] = event;
|
||||||
holidays.forEach(holiday => {
|
};
|
||||||
const holidayDetail = holiday.detail && holiday.detail.description;
|
|
||||||
const holidayType = holiday.type && holiday.type.name;
|
|
||||||
const holidayName = holidayDetail || holidayType;
|
|
||||||
|
|
||||||
events.push({
|
if (data.holidays) {
|
||||||
name: holidayName,
|
data.holidays.forEach(holiday => {
|
||||||
description: holidayName,
|
const holidayDetail = holiday.detail && holiday.detail.description;
|
||||||
dated: holiday.dated,
|
const holidayType = holiday.type && holiday.type.name;
|
||||||
isRemovable: false,
|
const holidayName = holidayDetail || holidayType;
|
||||||
style: {backgroundColor: '#FFFF00'}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
this.events = this.events.concat(events);
|
|
||||||
}
|
|
||||||
|
|
||||||
setWorkerCalendar(data) {
|
addEvent(holiday.dated, {
|
||||||
if (!data.absences) return;
|
name: holidayName,
|
||||||
|
color: '#ff0'
|
||||||
const absences = data.absences;
|
});
|
||||||
const events = [];
|
|
||||||
absences.forEach(absence => {
|
|
||||||
const absenceType = absence.absenceType;
|
|
||||||
events.push({
|
|
||||||
name: absenceType.name,
|
|
||||||
description: absenceType.name,
|
|
||||||
dated: absence.dated,
|
|
||||||
style: {backgroundColor: absenceType.rgb}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
this.events = this.events.concat(events);
|
|
||||||
}
|
|
||||||
|
|
||||||
get started() {
|
|
||||||
const started = new Date();
|
|
||||||
started.setHours(0, 0, 0, 0);
|
|
||||||
started.setMonth(0);
|
|
||||||
started.setDate(1);
|
|
||||||
|
|
||||||
return started;
|
|
||||||
}
|
|
||||||
|
|
||||||
get ended() {
|
|
||||||
const monthIndex = 11;
|
|
||||||
const ended = new Date();
|
|
||||||
ended.setHours(0, 0, 0, 0);
|
|
||||||
ended.setMonth(monthIndex + 1);
|
|
||||||
// Last day of previous month (January)
|
|
||||||
ended.setDate(0);
|
|
||||||
|
|
||||||
return ended;
|
|
||||||
}
|
|
||||||
|
|
||||||
monthsOfYear() {
|
|
||||||
let months = new Array(12);
|
|
||||||
|
|
||||||
for (let i = 0; i < months.length; i++) {
|
|
||||||
const now = new Date();
|
|
||||||
now.setHours(0, 0, 0, 0);
|
|
||||||
now.setDate(1);
|
|
||||||
now.setMonth(i);
|
|
||||||
|
|
||||||
months[i] = now;
|
|
||||||
}
|
|
||||||
|
|
||||||
return months;
|
|
||||||
}
|
|
||||||
|
|
||||||
get absenceTypes() {
|
|
||||||
return this._absenceTypes;
|
|
||||||
}
|
|
||||||
|
|
||||||
set absenceTypes(value) {
|
|
||||||
if (value) {
|
|
||||||
this._absenceTypes = value;
|
|
||||||
this.legends = [];
|
|
||||||
this._absenceTypes.forEach(absenceType => {
|
|
||||||
let legend = {};
|
|
||||||
legend.id = absenceType.id;
|
|
||||||
legend.color = absenceType.rgb;
|
|
||||||
legend.name = absenceType.name;
|
|
||||||
this.legends.push(legend);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
if (data.absences) {
|
||||||
|
data.absences.forEach(absence => {
|
||||||
|
let type = absence.absenceType;
|
||||||
|
addEvent(absence.dated, {
|
||||||
|
name: type.name,
|
||||||
|
color: type.rgb
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.repaint();
|
||||||
|
}
|
||||||
|
|
||||||
|
repaint() {
|
||||||
|
let calendars = this.element.querySelectorAll('vn-calendar');
|
||||||
|
for (let calendar of calendars)
|
||||||
|
calendar.$ctrl.repaint();
|
||||||
|
}
|
||||||
|
|
||||||
|
formatDay(day, element) {
|
||||||
|
let event = this.events[day.getTime()];
|
||||||
|
if (!event) return;
|
||||||
|
|
||||||
|
let dayNumber = element.firstElementChild;
|
||||||
|
dayNumber.title = event.name;
|
||||||
|
dayNumber.style.backgroundColor = event.color;
|
||||||
|
dayNumber.style.color = 'white';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Controller.$inject = ['$element', '$http'];
|
||||||
Controller.$inject = ['$scope', '$http'];
|
|
||||||
|
|
||||||
ngModule.component('vnWorkerCalendar', {
|
ngModule.component('vnWorkerCalendar', {
|
||||||
template: require('./index.html'),
|
template: require('./index.html'),
|
||||||
|
|
|
||||||
|
|
@ -2,147 +2,111 @@ import './index';
|
||||||
|
|
||||||
describe('Worker', () => {
|
describe('Worker', () => {
|
||||||
describe('Component vnWorkerCalendar', () => {
|
describe('Component vnWorkerCalendar', () => {
|
||||||
let $componentController;
|
|
||||||
let $httpParamSerializer;
|
|
||||||
let $httpBackend;
|
let $httpBackend;
|
||||||
let $scope;
|
let $scope;
|
||||||
|
let $element;
|
||||||
let controller;
|
let controller;
|
||||||
|
let year = new Date().getFullYear();
|
||||||
|
|
||||||
beforeEach(angular.mock.module('worker', $translateProvider => {
|
beforeEach(angular.mock.module('worker', $translateProvider => {
|
||||||
$translateProvider.translations('en', {});
|
$translateProvider.translations('en', {});
|
||||||
}));
|
}));
|
||||||
|
|
||||||
beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$httpBackend_, _$httpParamSerializer_) => {
|
beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_) => {
|
||||||
$componentController = _$componentController_;
|
|
||||||
$scope = $rootScope.$new();
|
$scope = $rootScope.$new();
|
||||||
$httpBackend = _$httpBackend_;
|
$httpBackend = _$httpBackend_;
|
||||||
$httpParamSerializer = _$httpParamSerializer_;
|
$element = angular.element('<div></div>');
|
||||||
controller = $componentController('vnWorkerCalendar', {$scope, $httpBackend});
|
controller = $componentController('vnWorkerCalendar', {$element, $scope});
|
||||||
}));
|
}));
|
||||||
|
|
||||||
describe('started() getter', () => {
|
afterEach(() => {
|
||||||
it(`should return first day and month of current year`, () => {
|
$element.remove();
|
||||||
let started = new Date();
|
$scope.$destroy();
|
||||||
started.setHours(0, 0, 0, 0);
|
});
|
||||||
started.setMonth(0);
|
|
||||||
started.setDate(1);
|
|
||||||
|
|
||||||
|
describe('started property', () => {
|
||||||
|
it(`should return first day and month of current year`, () => {
|
||||||
|
let started = new Date(year, 0, 1);
|
||||||
|
|
||||||
expect(controller.started).toEqual(started);
|
expect(controller.started).toEqual(started);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('ended() getter', () => {
|
describe('ended property', () => {
|
||||||
it(`should return last day and month of current year`, () => {
|
it(`should return last day and month of current year`, () => {
|
||||||
const monthIndex = 11;
|
let ended = new Date(year, 11, 31);
|
||||||
const ended = new Date();
|
|
||||||
ended.setHours(0, 0, 0, 0);
|
|
||||||
ended.setMonth(monthIndex + 1);
|
|
||||||
// Last day of previous month (January)
|
|
||||||
ended.setDate(0);
|
|
||||||
|
|
||||||
expect(controller.ended).toEqual(ended);
|
expect(controller.ended).toEqual(ended);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('monthsOfYear()', () => {
|
describe('months property', () => {
|
||||||
it(`should return an array of twelve months length`, () => {
|
it(`should return an array of twelve months length`, () => {
|
||||||
const months = controller.monthsOfYear();
|
const ended = new Date(year, 11, 1);
|
||||||
const ended = new Date();
|
|
||||||
ended.setHours(0, 0, 0, 0);
|
|
||||||
ended.setMonth(11);
|
|
||||||
ended.setDate(1);
|
|
||||||
|
|
||||||
expect(months.length).toEqual(12);
|
expect(controller.months.length).toEqual(12);
|
||||||
expect(months[0]).toEqual(controller.started);
|
expect(controller.months[0]).toEqual(controller.started);
|
||||||
expect(months[11]).toEqual(ended);
|
expect(controller.months[11]).toEqual(ended);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('worker() setter', () => {
|
describe('worker() setter', () => {
|
||||||
it(`should perform a get query and call setHolidays() and setWorkerCalendar() methods`, () => {
|
it(`should perform a get query and set the reponse data on the model`, () => {
|
||||||
const worker = {id: 106};
|
let today = new Date();
|
||||||
spyOn(controller, 'setHolidays');
|
|
||||||
spyOn(controller, 'setWorkerCalendar');
|
|
||||||
|
|
||||||
const expectedData = {
|
let tomorrow = new Date(today.getTime());
|
||||||
calendar: {},
|
tomorrow.setDate(tomorrow.getDate() + 1);
|
||||||
absences: {}
|
|
||||||
};
|
|
||||||
let params = $httpParamSerializer({
|
|
||||||
workerFk: worker.id,
|
|
||||||
started: controller.started,
|
|
||||||
ended: controller.ended
|
|
||||||
});
|
|
||||||
$httpBackend.when('GET', `/worker/api/WorkerCalendars/absences?${params}`).respond(expectedData);
|
|
||||||
$httpBackend.expect('GET', `/worker/api/WorkerCalendars/absences?${params}`);
|
|
||||||
|
|
||||||
controller.worker = worker;
|
let yesterday = new Date(today.getTime());
|
||||||
|
yesterday.setDate(yesterday.getDate() - 1);
|
||||||
|
|
||||||
|
let path = `api/WorkerCalendars/absences`;
|
||||||
|
$httpBackend.whenGET(url => url.startsWith(path))
|
||||||
|
.respond({
|
||||||
|
holidays: [
|
||||||
|
{dated: today, detail: {description: 'New year'}},
|
||||||
|
{dated: tomorrow, detail: {description: 'Easter'}}
|
||||||
|
],
|
||||||
|
absences: [
|
||||||
|
{dated: today, absenceType: {name: 'Holiday', rgb: '#aaa'}},
|
||||||
|
{dated: yesterday, absenceType: {name: 'Leave', rgb: '#bbb'}}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
controller.worker = {id: 1};
|
||||||
$httpBackend.flush();
|
$httpBackend.flush();
|
||||||
|
|
||||||
expect(controller.setHolidays).toHaveBeenCalledWith(expectedData);
|
let events = controller.events;
|
||||||
expect(controller.setHolidays).toHaveBeenCalledWith(expectedData);
|
|
||||||
|
expect(events[today.getTime()].name).toEqual('Holiday');
|
||||||
|
expect(events[tomorrow.getTime()].name).toEqual('Easter');
|
||||||
|
expect(events[yesterday.getTime()].name).toEqual('Leave');
|
||||||
|
expect(events[yesterday.getTime()].color).toEqual('#bbb');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('setHolidays()', () => {
|
describe('formatDay()', () => {
|
||||||
it(`should set holidays`, () => {
|
it(`should set the day element style`, () => {
|
||||||
const data = {holidays: [
|
let today = new Date();
|
||||||
{dated: new Date(), detail: {description: 'New year'}},
|
|
||||||
{dated: new Date(), detail: {description: 'Easter'}}
|
|
||||||
]};
|
|
||||||
controller.setHolidays(data);
|
|
||||||
|
|
||||||
expect(controller.events.length).toEqual(2);
|
let path = `api/WorkerCalendars/absences`;
|
||||||
expect(controller.events[0].name).toEqual('New year');
|
$httpBackend.whenGET(url => url.startsWith(path))
|
||||||
expect(controller.events[0].isRemovable).toEqual(false);
|
.respond({
|
||||||
});
|
absences: [
|
||||||
});
|
{dated: today, absenceType: {name: 'Holiday', rgb: '#000'}}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
describe('setWorkerCalendar()', () => {
|
controller.worker = {id: 1};
|
||||||
it(`should set absences of differente types`, () => {
|
$httpBackend.flush();
|
||||||
const data = {absences: [
|
|
||||||
{dated: new Date(), absenceType: {name: 'Holiday', rgb: '#000'}},
|
|
||||||
{dated: new Date(), absenceType: {name: 'Leave', rgb: '#000'}}
|
|
||||||
]};
|
|
||||||
controller.setWorkerCalendar(data);
|
|
||||||
|
|
||||||
expect(controller.events.length).toEqual(2);
|
let dayElement = angular.element('<div><section></section></div>')[0];
|
||||||
expect(controller.events[0].name).toEqual('Holiday');
|
let dayNumber = dayElement.firstElementChild;
|
||||||
expect(controller.events[0].style).toBeDefined();
|
|
||||||
expect(controller.events[1].name).toEqual('Leave');
|
|
||||||
expect(controller.events[1].style).toBeDefined();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('absenceTypes() setter', () => {
|
controller.formatDay(today, dayElement);
|
||||||
it(`should set the absence types in the controller`, () => {
|
|
||||||
const absenceTypes = [
|
|
||||||
{id: 1, name: 'Holiday', rgb: '#000'},
|
|
||||||
{id: 2, name: 'Leave', rgb: '#000'}
|
|
||||||
];
|
|
||||||
|
|
||||||
expect(controller._absenceTypes).not.toBeDefined();
|
expect(dayNumber.title).toEqual('Holiday');
|
||||||
|
expect(dayNumber.style.backgroundColor).toEqual('rgb(0, 0, 0)');
|
||||||
controller.absenceTypes = absenceTypes;
|
|
||||||
|
|
||||||
expect(controller._absenceTypes.length).toEqual(2);
|
|
||||||
});
|
|
||||||
|
|
||||||
it(`should set the absence types in the controller as formated legends`, () => {
|
|
||||||
const absenceTypes = [
|
|
||||||
{id: 1, name: 'Holiday', rgb: '#000'},
|
|
||||||
{id: 2, name: 'Leave', rgb: '#000'}
|
|
||||||
];
|
|
||||||
|
|
||||||
expect(controller.legends).not.toBeDefined();
|
|
||||||
|
|
||||||
controller.absenceTypes = absenceTypes;
|
|
||||||
|
|
||||||
expect(controller.legends.length).toEqual(2);
|
|
||||||
expect(controller.legends[0].color).toBeDefined();
|
|
||||||
expect(controller.legends[1].color).toBeDefined();
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,34 +1,19 @@
|
||||||
@import "variables";
|
@import "variables";
|
||||||
|
|
||||||
|
vn-worker-calendar {
|
||||||
/* .calendar-list .calendar:nth-child(2n + 1) {
|
.calendars {
|
||||||
border-right:1px solid #ddd
|
display: flex;
|
||||||
} */
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
.calendar-list {
|
align-items: center;
|
||||||
align-items: flex-start;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.calendar {
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: $spacing-md;
|
padding: $spacing-md;
|
||||||
overflow: hidden;
|
|
||||||
min-width: 18em;
|
& > vn-calendar {
|
||||||
width: 25%;
|
|
||||||
|
|
||||||
vn-calendar {
|
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
padding: 0.5em
|
margin: $spacing-md;
|
||||||
|
padding: $spacing-xs;
|
||||||
|
max-width: 18em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
vn-horizontal.header {
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
|
|
||||||
.totalBox {
|
|
||||||
max-width: 15em
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,76 +1,73 @@
|
||||||
<vn-crud-model
|
<vn-crud-model
|
||||||
vn-id="model"
|
vn-id="model"
|
||||||
url="/worker/api/WorkerTimeControls/filter"
|
url="api/WorkerTimeControls/filter"
|
||||||
filter="::$ctrl.filter"
|
filter="::$ctrl.filter"
|
||||||
data="$ctrl.hours">
|
data="$ctrl.hours">
|
||||||
</vn-crud-model>
|
</vn-crud-model>
|
||||||
<div class="main-with-right-menu">
|
<div class="main-with-right-menu">
|
||||||
<vn-card class="compact vn-pa-lg">
|
<vn-card class="vn-pa-lg vn-w-md">
|
||||||
<vn-horizontal>
|
<vn-table model="model" auto-load="false">
|
||||||
<vn-table model="model" auto-load="false" vn-one>
|
<vn-thead>
|
||||||
<vn-thead>
|
|
||||||
<vn-tr>
|
|
||||||
<vn-td ng-repeat="weekday in $ctrl.weekDays" center>
|
|
||||||
<div translate>{{::$ctrl.weekdayNames[$index].name}}</div>
|
|
||||||
<span>{{::weekday.dated | date: 'dd'}}</span>
|
|
||||||
<span title="{{::weekday.dated | date: 'MMMM' | translate}}" translate>
|
|
||||||
{{::weekday.dated | date: 'MMMM'}}
|
|
||||||
</span>
|
|
||||||
</vn-td>
|
|
||||||
</vn-tr>
|
|
||||||
</vn-thead>
|
|
||||||
<vn-tbody>
|
|
||||||
<vn-tr>
|
|
||||||
<vn-td ng-repeat="weekday in $ctrl.weekDays" class="hours vn-pa-none" center>
|
|
||||||
<section ng-repeat="hour in weekday.hours" center>
|
|
||||||
<vn-icon
|
|
||||||
icon="arrow_{{($index % 2) == 0 ? 'forward' : 'back'}}"
|
|
||||||
title="{{(($index % 2) == 0 ? 'In' : 'Out') | translate}}">
|
|
||||||
</vn-icon>
|
|
||||||
<span class="chip {{$ctrl.hourColor(hour)}}">{{hour.timed | date: 'HH:mm'}}</span>
|
|
||||||
</section>
|
|
||||||
</vn-td>
|
|
||||||
</vn-tr>
|
|
||||||
</vn-tbody>
|
|
||||||
<vn-tfoot>
|
|
||||||
<vn-tr>
|
<vn-tr>
|
||||||
<vn-td center ng-repeat="weekday in $ctrl.weekDays">
|
<vn-td ng-repeat="weekday in $ctrl.weekDays" center>
|
||||||
|
<div translate>{{::$ctrl.weekdayNames[$index].name}}</div>
|
||||||
|
<span>{{::weekday.dated | date: 'dd'}}</span>
|
||||||
|
<span title="{{::weekday.dated | date: 'MMMM' | translate}}" translate>
|
||||||
|
{{::weekday.dated | date: 'MMMM'}}
|
||||||
|
</span>
|
||||||
|
</vn-td>
|
||||||
|
</vn-tr>
|
||||||
|
</vn-thead>
|
||||||
|
<vn-tbody>
|
||||||
|
<vn-tr>
|
||||||
|
<vn-td ng-repeat="weekday in $ctrl.weekDays" class="hours vn-pa-none" center>
|
||||||
|
<section ng-repeat="hour in weekday.hours" center>
|
||||||
|
<vn-icon
|
||||||
|
icon="arrow_{{($index % 2) == 0 ? 'forward' : 'back'}}"
|
||||||
|
title="{{(($index % 2) == 0 ? 'In' : 'Out') | translate}}">
|
||||||
|
</vn-icon>
|
||||||
|
<span class="chip {{$ctrl.hourColor(hour)}}">{{hour.timed | date: 'HH:mm'}}</span>
|
||||||
|
</section>
|
||||||
|
</vn-td>
|
||||||
|
</vn-tr>
|
||||||
|
</vn-tbody>
|
||||||
|
<vn-tfoot>
|
||||||
|
<vn-tr>
|
||||||
|
<vn-td ng-repeat="weekday in $ctrl.weekDays" center>
|
||||||
{{$ctrl.getWeekdayTotalHours(weekday)}} h.
|
{{$ctrl.getWeekdayTotalHours(weekday)}} h.
|
||||||
</vn-td>
|
</vn-td>
|
||||||
</vn-tr>
|
</vn-tr>
|
||||||
<vn-tr>
|
<vn-tr>
|
||||||
<vn-td center ng-repeat="weekday in $ctrl.weekDays">
|
<vn-td center ng-repeat="weekday in $ctrl.weekDays">
|
||||||
<vn-icon-button icon="add_circle"
|
<vn-icon-button
|
||||||
vn-tooltip="Add time"
|
icon="add_circle"
|
||||||
ng-click="$ctrl.showAddTimeDialog(weekday)">
|
vn-tooltip="Add time"
|
||||||
</vn-icon-button>
|
ng-click="$ctrl.showAddTimeDialog(weekday)">
|
||||||
</vn-td>
|
</vn-icon-button>
|
||||||
</vn-tr>
|
</vn-td>
|
||||||
</vn-tfoot>
|
</vn-tr>
|
||||||
</vn-table>
|
</vn-tfoot>
|
||||||
</vn-horizontal>
|
</vn-table>
|
||||||
</vn-card>
|
</vn-card>
|
||||||
<vn-side-menu side="right">
|
<vn-side-menu side="right">
|
||||||
<vn-vertical class="vn-pa-sm">
|
<div class="vn-pa-md">
|
||||||
<vn-vertical class="totalBox">
|
<div class="totalBox" style="text-align: center;">
|
||||||
<h6 translate>Hours</h6>
|
<h6 translate>Hours</h6>
|
||||||
<vn-label-value
|
<vn-label-value
|
||||||
label="Week total"
|
label="Week total"
|
||||||
value="{{$ctrl.weekTotalHours}} {{'Hours' | translate}}">
|
value="{{$ctrl.weekTotalHours}} h.">
|
||||||
</vn-label-value>
|
</vn-label-value>
|
||||||
</vn-vertical>
|
</div>
|
||||||
</vn-vertical>
|
<vn-calendar
|
||||||
<vn-calendar class="vn-pa-sm"
|
class="vn-pt-md"
|
||||||
data="$ctrl.currentWeek"
|
ng-model="$ctrl.date"
|
||||||
default-date="$ctrl.defaultDate"
|
has-events="$ctrl.hasEvents($day)">
|
||||||
on-selection="$ctrl.onSelection($days)"
|
</vn-calendar>
|
||||||
on-move-next="$ctrl.onMoveNext()"
|
</div>
|
||||||
on-move-previous="$ctrl.onMovePrevious()">
|
|
||||||
</vn-calendar>
|
|
||||||
</vn-side-menu>
|
</vn-side-menu>
|
||||||
</div>
|
</div>
|
||||||
|
<vn-dialog
|
||||||
<vn-dialog vn-id="addTimeDialog"
|
vn-id="addTimeDialog"
|
||||||
on-response="$ctrl.addTime(response)">
|
on-response="$ctrl.addTime(response)">
|
||||||
<tpl-body>
|
<tpl-body>
|
||||||
<div>
|
<div>
|
||||||
|
|
|
||||||
|
|
@ -2,155 +2,91 @@ import ngModule from '../module';
|
||||||
import './style.scss';
|
import './style.scss';
|
||||||
|
|
||||||
class Controller {
|
class Controller {
|
||||||
constructor($scope, $http, $stateParams, $element) {
|
constructor($scope, $http, $stateParams, $element, vnWeekDays) {
|
||||||
this.$stateParams = $stateParams;
|
this.$stateParams = $stateParams;
|
||||||
this.$ = $scope;
|
this.$ = $scope;
|
||||||
this.$http = $http;
|
this.$http = $http;
|
||||||
this.$element = $element;
|
this.$element = $element;
|
||||||
this.defaultDate = new Date();
|
|
||||||
this.currentWeek = [];
|
|
||||||
this.weekDays = [];
|
this.weekDays = [];
|
||||||
this.weekdayNames = [
|
this.weekdayNames = vnWeekDays.locales;
|
||||||
{name: 'Monday'},
|
|
||||||
{name: 'Tuesday'},
|
|
||||||
{name: 'Wednesday'},
|
|
||||||
{name: 'Thursday'},
|
|
||||||
{name: 'Friday'},
|
|
||||||
{name: 'Saturday'},
|
|
||||||
{name: 'Sunday'}
|
|
||||||
];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$postLink() {
|
||||||
|
this.date = new Date();
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Gets worker data
|
* The current selected date
|
||||||
*/
|
*/
|
||||||
get worker() {
|
get date() {
|
||||||
return this._worker;
|
return this._date;
|
||||||
|
}
|
||||||
|
|
||||||
|
set date(value) {
|
||||||
|
this._date = value;
|
||||||
|
value.setHours(0, 0, 0, 0);
|
||||||
|
|
||||||
|
let weekOffset = value.getDay() - 1;
|
||||||
|
if (weekOffset < 0) weekOffset = 6;
|
||||||
|
|
||||||
|
let started = new Date(value.getTime());
|
||||||
|
started.setDate(started.getDate() - weekOffset);
|
||||||
|
this.started = started;
|
||||||
|
|
||||||
|
let ended = new Date(started.getTime());
|
||||||
|
ended.setDate(ended.getDate() + 7);
|
||||||
|
this.ended = ended;
|
||||||
|
|
||||||
|
this.fetchHours();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Sets worker data and retrieves
|
* Worker hours data
|
||||||
* worker hours
|
|
||||||
*
|
|
||||||
* @param {Object} value - Worker data
|
|
||||||
*/
|
|
||||||
set worker(value) {
|
|
||||||
this._worker = value;
|
|
||||||
|
|
||||||
if (value) {
|
|
||||||
this.$.$applyAsync(() => {
|
|
||||||
this.getHours();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Gets worker hours data
|
|
||||||
*
|
|
||||||
*/
|
*/
|
||||||
get hours() {
|
get hours() {
|
||||||
return this._hours;
|
return this._hours;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Gets worker hours data
|
|
||||||
*
|
|
||||||
* @param {Object} value - Hours data
|
|
||||||
*/
|
|
||||||
set hours(value) {
|
set hours(value) {
|
||||||
this._hours = value;
|
this._hours = value;
|
||||||
if (value) this.build();
|
this.weekDays = [];
|
||||||
|
if (!this.hours) return;
|
||||||
|
|
||||||
|
let dayIndex = new Date(this.started.getTime());
|
||||||
|
|
||||||
|
while (dayIndex < this.ended) {
|
||||||
|
let weekDay = dayIndex.getDay();
|
||||||
|
|
||||||
|
let hours = this.hours
|
||||||
|
.filter(hour => new Date(hour.timed).getDay() == weekDay)
|
||||||
|
.sort((a, b) => new Date(a.timed) - new Date(b.timed));
|
||||||
|
|
||||||
|
this.weekDays.push({
|
||||||
|
dated: new Date(dayIndex.getTime()),
|
||||||
|
hours
|
||||||
|
});
|
||||||
|
dayIndex.setDate(dayIndex.getDate() + 1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
getHours() {
|
fetchHours() {
|
||||||
const params = {workerFk: this.worker.id};
|
const params = {workerFk: this.$stateParams.id};
|
||||||
const filter = {
|
const filter = {
|
||||||
where: {
|
where: {and: [
|
||||||
timed: {between: [this.started, this.ended]}
|
{timed: {gte: this.started}},
|
||||||
}
|
{timed: {lt: this.ended}}
|
||||||
|
]}
|
||||||
};
|
};
|
||||||
|
|
||||||
return this.$.model.applyFilter(filter, params);
|
this.$.model.applyFilter(filter, params);
|
||||||
}
|
}
|
||||||
|
|
||||||
refresh() {
|
hasEvents(day) {
|
||||||
this.getHours().then(() => this.build());
|
return day >= this.started && day < this.ended;
|
||||||
}
|
|
||||||
|
|
||||||
build() {
|
|
||||||
let weekdays = new Array(7);
|
|
||||||
const currentWeek = [];
|
|
||||||
|
|
||||||
for (let i = 0; i < weekdays.length; i++) {
|
|
||||||
const dated = new Date();
|
|
||||||
dated.setHours(23, 59, 0, 0);
|
|
||||||
dated.setMonth(this.started.getMonth());
|
|
||||||
dated.setDate(this.started.getDate() + i);
|
|
||||||
|
|
||||||
const hours = this.hours.filter(hour => {
|
|
||||||
const timed = new Date(hour.timed);
|
|
||||||
const weekDay = timed.getDay() == 0 ? 7 : timed.getDay();
|
|
||||||
return weekDay == (i + 1);
|
|
||||||
});
|
|
||||||
|
|
||||||
const sortedHours = hours.sort((a, b) => {
|
|
||||||
return new Date(a.timed) - new Date(b.timed);
|
|
||||||
});
|
|
||||||
|
|
||||||
weekdays[i] = {dated, hours: sortedHours};
|
|
||||||
|
|
||||||
currentWeek.push({
|
|
||||||
dated: dated,
|
|
||||||
className: 'orange-circle',
|
|
||||||
title: 'Current week',
|
|
||||||
isRemovable: false
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
this.currentWeek = currentWeek;
|
|
||||||
this.weekDays = weekdays;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
hourColor(weekDay) {
|
hourColor(weekDay) {
|
||||||
if (weekDay.manual)
|
return weekDay.manual ? 'alert' : 'warning';
|
||||||
return 'alert';
|
|
||||||
|
|
||||||
return 'warning';
|
|
||||||
}
|
|
||||||
get weekOffset() {
|
|
||||||
const timed = this.defaultDate;
|
|
||||||
const weekDay = timed.getDay() == 0 ? 7 : timed.getDay();
|
|
||||||
|
|
||||||
return weekDay - 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns week start date
|
|
||||||
* from current selected week
|
|
||||||
*/
|
|
||||||
get started() {
|
|
||||||
const started = new Date();
|
|
||||||
const offset = this.weekOffset;
|
|
||||||
|
|
||||||
started.setMonth(this.defaultDate.getMonth());
|
|
||||||
started.setDate(this.defaultDate.getDate() - offset);
|
|
||||||
started.setHours(0, 0, 0, 0);
|
|
||||||
|
|
||||||
return started;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns week end date
|
|
||||||
* from current selected week
|
|
||||||
*/
|
|
||||||
get ended() {
|
|
||||||
const ended = new Date();
|
|
||||||
ended.setHours(0, 0, 0, 0);
|
|
||||||
ended.setMonth(this.started.getMonth());
|
|
||||||
ended.setDate(this.started.getDate() + 7);
|
|
||||||
|
|
||||||
return ended;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
getWeekdayTotalHours(weekday) {
|
getWeekdayTotalHours(weekday) {
|
||||||
|
|
@ -200,20 +136,6 @@ class Controller {
|
||||||
return `${hour}:${min}`;
|
return `${hour}:${min}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
onMoveNext() {
|
|
||||||
this.refresh();
|
|
||||||
}
|
|
||||||
|
|
||||||
onMovePrevious() {
|
|
||||||
this.refresh();
|
|
||||||
}
|
|
||||||
|
|
||||||
onSelection($days) {
|
|
||||||
this.defaultDate.setMonth($days[0].getMonth());
|
|
||||||
this.defaultDate.setDate($days[0].getDate());
|
|
||||||
this.refresh();
|
|
||||||
}
|
|
||||||
|
|
||||||
showAddTimeDialog(weekday) {
|
showAddTimeDialog(weekday) {
|
||||||
const timed = new Date(weekday.dated);
|
const timed = new Date(weekday.dated);
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
|
|
@ -226,26 +148,25 @@ class Controller {
|
||||||
this.selectedWeekday = weekday;
|
this.selectedWeekday = weekday;
|
||||||
this.$.addTimeDialog.show();
|
this.$.addTimeDialog.show();
|
||||||
|
|
||||||
const selector = 'vn-dialog[vn-id="addTimeDialog"] input[type="time"]';
|
const selector = '[vn-id=addTimeDialog] input[type=time]';
|
||||||
const input = this.$element[0].querySelector(selector);
|
const input = this.$element[0].querySelector(selector);
|
||||||
input.focus();
|
input.focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
addTime(response) {
|
addTime(response) {
|
||||||
if (response === 'ACCEPT') {
|
if (response !== 'ACCEPT') return;
|
||||||
let data = {workerFk: this.worker.id, timed: this.newTime};
|
let data = {
|
||||||
let query = `/api/WorkerTimeControls/addTime`;
|
workerFk: this.$stateParams.id,
|
||||||
this.$http.post(query, data).then(() => this.refresh());
|
timed: this.newTime
|
||||||
}
|
};
|
||||||
|
this.$http.post(`api/WorkerTimeControls/addTime`, data)
|
||||||
|
.then(() => this.fetchHours());
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Controller.$inject = ['$scope', '$http', '$stateParams', '$element'];
|
Controller.$inject = ['$scope', '$http', '$stateParams', '$element', 'vnWeekDays'];
|
||||||
|
|
||||||
ngModule.component('vnWorkerTimeControl', {
|
ngModule.component('vnWorkerTimeControl', {
|
||||||
template: require('./index.html'),
|
template: require('./index.html'),
|
||||||
controller: Controller,
|
controller: Controller
|
||||||
bindings: {
|
|
||||||
worker: '<'
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -2,37 +2,56 @@ import './index.js';
|
||||||
|
|
||||||
describe('Worker', () => {
|
describe('Worker', () => {
|
||||||
describe('Component vnWorkerTimeControl', () => {
|
describe('Component vnWorkerTimeControl', () => {
|
||||||
|
let $httpBackend;
|
||||||
let $scope;
|
let $scope;
|
||||||
let controller;
|
|
||||||
let $element;
|
let $element;
|
||||||
|
let controller;
|
||||||
|
|
||||||
beforeEach(angular.mock.module('worker', $translateProvider => {
|
beforeEach(angular.mock.module('worker', $translateProvider => {
|
||||||
$translateProvider.translations('en', {});
|
$translateProvider.translations('en', {});
|
||||||
}));
|
}));
|
||||||
|
|
||||||
beforeEach(angular.mock.inject(($componentController, $rootScope) => {
|
beforeEach(angular.mock.inject(($compile, $rootScope, $stateParams, _$httpBackend_) => {
|
||||||
|
$stateParams.id = 1;
|
||||||
|
$httpBackend = _$httpBackend_;
|
||||||
$scope = $rootScope.$new();
|
$scope = $rootScope.$new();
|
||||||
$element = angular.element('<vn-worker-time-control></vn-worker-time-control>');
|
$element = $compile('<vn-worker-time-control></vn-worker-time-control>')($scope);
|
||||||
controller = $componentController('vnWorkerTimeControl', {$scope, $element});
|
controller = $element.controller('vnWorkerTimeControl');
|
||||||
}));
|
}));
|
||||||
|
|
||||||
describe('worker() setter', () => {
|
afterEach(() => {
|
||||||
it(`should set worker data and then call getHours() method`, () => {
|
$scope.$destroy();
|
||||||
spyOn(controller, 'getHours');
|
$element.remove();
|
||||||
controller.worker = {id: 106};
|
|
||||||
$scope.$apply();
|
|
||||||
|
|
||||||
expect(controller.getHours).toHaveBeenCalledWith();
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('hours() setter', () => {
|
describe('hours() setter', () => {
|
||||||
it(`should set hours data and then call build() method`, () => {
|
it(`should set hours data at it's corresponding week day`, () => {
|
||||||
spyOn(controller, 'build');
|
let wednesday = new Date(controller.started.getTime());
|
||||||
controller.hours = [{id: 1}, {id: 2}];
|
wednesday.setDate(wednesday.getDate() + 2);
|
||||||
$scope.$apply();
|
|
||||||
|
|
||||||
expect(controller.build).toHaveBeenCalledWith();
|
let path = `api/WorkerTimeControls/filter`;
|
||||||
|
$httpBackend.whenGET(url => url.startsWith(path))
|
||||||
|
.respond([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
timed: controller.started.toJSON(),
|
||||||
|
userFk: 1
|
||||||
|
}, {
|
||||||
|
id: 2,
|
||||||
|
timed: wednesday.toJSON(),
|
||||||
|
userFk: 1
|
||||||
|
}, {
|
||||||
|
id: 3,
|
||||||
|
timed: wednesday.toJSON(),
|
||||||
|
userFk: 1
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
$httpBackend.flush();
|
||||||
|
|
||||||
|
expect(controller.weekDays.length).toEqual(7);
|
||||||
|
expect(controller.weekDays[0].hours.length).toEqual(1);
|
||||||
|
expect(controller.weekDays[2].hours.length).toEqual(2);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,5 +3,5 @@ Out: Salida
|
||||||
Hour: Hora
|
Hour: Hora
|
||||||
Hours: Horas
|
Hours: Horas
|
||||||
Add time: Añadir hora
|
Add time: Añadir hora
|
||||||
Week total: Total por semana
|
Week total: Total semana
|
||||||
Current week: Semana actual
|
Current week: Semana actual
|
||||||
|
|
@ -5,23 +5,20 @@ vn-worker-time-control {
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
color: $color-main
|
color: $color-main
|
||||||
}
|
}
|
||||||
|
|
||||||
vn-td.hours {
|
vn-td.hours {
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
|
|
||||||
& > section {
|
& > section {
|
||||||
position: relative;
|
display: flex;
|
||||||
padding: .6em 0;
|
align-items: center;
|
||||||
|
padding: .3em 0;
|
||||||
|
|
||||||
& > vn-icon {
|
& > vn-icon {
|
||||||
position: absolute;
|
|
||||||
margin-left: -1.3em;
|
|
||||||
margin-top: -3px;
|
|
||||||
color: $color-font-secondary;
|
color: $color-font-secondary;
|
||||||
|
padding-right: .1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.totalBox {
|
.totalBox {
|
||||||
max-width: none
|
max-width: none
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -103,6 +103,9 @@ let baseConfig = {
|
||||||
favicon: 'front/salix/favicon.ico',
|
favicon: 'front/salix/favicon.ico',
|
||||||
filename: 'index.html',
|
filename: 'index.html',
|
||||||
chunks: ['salix']
|
chunks: ['salix']
|
||||||
|
}),
|
||||||
|
new webpack.DefinePlugin({
|
||||||
|
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
|
||||||
})
|
})
|
||||||
],
|
],
|
||||||
devtool: 'source-map',
|
devtool: 'source-map',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue