First working version
gitea/salix/1838-searchbar_refactor There was a failure building this commit
Details
gitea/salix/1838-searchbar_refactor There was a failure building this commit
Details
This commit is contained in:
parent
026c608f42
commit
515234187a
|
|
@ -346,7 +346,7 @@ let actions = {
|
|||
.write('vn-searchbar input', searchValue)
|
||||
.click('vn-searchbar vn-icon[icon="search"]')
|
||||
.wait(100)
|
||||
.waitForNumberOfElements('.searchResult', 1)
|
||||
.waitForNumberOfElements('.search-result', 1)
|
||||
.evaluate(() => {
|
||||
return document.querySelector('ui-view vn-card vn-table') != null;
|
||||
})
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export default {
|
|||
clientsIndex: {
|
||||
searchClientInput: `vn-textfield input`,
|
||||
searchButton: 'vn-searchbar vn-icon[icon="search"]',
|
||||
searchResult: 'vn-client-index .vn-list-item',
|
||||
search-result: 'vn-client-index .vn-item',
|
||||
createClientButton: `vn-float-button`,
|
||||
othersButton: 'vn-left-menu li[name="Others"] > a'
|
||||
},
|
||||
|
|
@ -182,9 +182,9 @@ export default {
|
|||
itemsIndex: {
|
||||
searchIcon: 'vn-item-index vn-searchbar vn-icon[icon="search"]',
|
||||
createItemButton: `vn-float-button`,
|
||||
searchResult: 'vn-item-index a.vn-tr',
|
||||
searchResultPreviewButton: 'vn-item-index .buttons > [icon="desktop_windows"]',
|
||||
searchResultCloneButton: 'vn-item-index .buttons > [icon="icon-clone"]',
|
||||
search-result: 'vn-item-index a.vn-tr',
|
||||
search-resultPreviewButton: 'vn-item-index .buttons > [icon="desktop_windows"]',
|
||||
search-resultCloneButton: 'vn-item-index .buttons > [icon="icon-clone"]',
|
||||
acceptClonationAlertButton: '.vn-confirm.shown [response="accept"]',
|
||||
searchItemInput: 'vn-searchbar vn-textfield input',
|
||||
searchButton: 'vn-searchbar vn-icon[icon="search"]',
|
||||
|
|
@ -326,9 +326,9 @@ export default {
|
|||
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',
|
||||
newTicketButton: 'vn-ticket-index > a',
|
||||
searchResult: 'vn-ticket-index vn-card > vn-table > div > vn-tbody > a.vn-tr',
|
||||
search-result: 'vn-ticket-index vn-card > vn-table > div > vn-tbody > a.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)',
|
||||
search-resultDate: 'vn-ticket-index vn-table vn-tbody > a:nth-child(1) > vn-td:nth-child(5)',
|
||||
searchTicketInput: `vn-ticket-index vn-textfield input`,
|
||||
searchWeeklyTicketInput: `vn-ticket-weekly-index vn-textfield input`,
|
||||
searchWeeklyClearInput: 'vn-ticket-weekly-index vn-searchbar vn-icon[icon=clear]',
|
||||
|
|
@ -517,7 +517,7 @@ export default {
|
|||
},
|
||||
claimsIndex: {
|
||||
searchClaimInput: `vn-claim-index vn-textfield input`,
|
||||
searchResult: 'vn-claim-index vn-card > vn-table > div > vn-tbody > a',
|
||||
search-result: 'vn-claim-index vn-card > vn-table > div > vn-tbody > a',
|
||||
searchButton: 'vn-claim-index vn-searchbar vn-icon[icon="search"]'
|
||||
},
|
||||
claimDescriptor: {
|
||||
|
|
@ -580,9 +580,9 @@ export default {
|
|||
isPaidWithManaCheckbox: 'vn-check[ng-model="$ctrl.claim.isChargedToMana"]'
|
||||
},
|
||||
ordersIndex: {
|
||||
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)',
|
||||
searchResultAddress: 'vn-order-index vn-table vn-tbody > a:nth-child(1) > vn-td:nth-child(6)',
|
||||
search-result: 'vn-order-index vn-card > vn-table > div > vn-tbody > a.vn-tr',
|
||||
search-resultDate: 'vn-order-index vn-table vn-tbody > a:nth-child(1) > vn-td:nth-child(4)',
|
||||
search-resultAddress: 'vn-order-index vn-table vn-tbody > a:nth-child(1) > vn-td:nth-child(6)',
|
||||
searchOrderInput: `vn-order-index vn-textfield input`,
|
||||
searchButton: 'vn-order-index vn-searchbar vn-icon[icon="search"]',
|
||||
createOrderButton: `vn-float-button`,
|
||||
|
|
@ -722,7 +722,7 @@ export default {
|
|||
invoiceOutIndex: {
|
||||
searchInvoiceOutInput: `vn-invoice-out-index vn-textfield input`,
|
||||
searchButton: 'vn-invoice-out-index vn-searchbar vn-icon[icon="search"]',
|
||||
searchResult: 'vn-invoice-out-index vn-card > vn-table > div > vn-tbody > a.vn-tr',
|
||||
search-result: 'vn-invoice-out-index vn-card > vn-table > div > vn-tbody > a.vn-tr',
|
||||
},
|
||||
invoiceOutDescriptor: {
|
||||
moreMenu: 'vn-invoice-out-descriptor vn-icon-menu[icon=more_vert]',
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@ describe('Client create path', () => {
|
|||
const result = await nightmare
|
||||
.write(selectors.clientsIndex.searchClientInput, 'Carol Danvers')
|
||||
.waitToClick(selectors.clientsIndex.searchButton)
|
||||
.waitForNumberOfElements(selectors.clientsIndex.searchResult, 0)
|
||||
.countElement(selectors.clientsIndex.searchResult);
|
||||
.waitForNumberOfElements(selectors.clientsIndex.search-result, 0)
|
||||
.countElement(selectors.clientsIndex.search-result);
|
||||
|
||||
expect(result).toEqual(0);
|
||||
});
|
||||
|
|
@ -117,8 +117,8 @@ describe('Client create path', () => {
|
|||
const result = await nightmare
|
||||
.write(selectors.clientsIndex.searchClientInput, 'Carol Danvers')
|
||||
.waitToClick(selectors.clientsIndex.searchButton)
|
||||
.waitForNumberOfElements(selectors.clientsIndex.searchResult, 1)
|
||||
.countElement(selectors.clientsIndex.searchResult);
|
||||
.waitForNumberOfElements(selectors.clientsIndex.search-result, 1)
|
||||
.countElement(selectors.clientsIndex.search-result);
|
||||
|
||||
expect(result).toEqual(1);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -135,16 +135,16 @@ describe('Client balance path', () => {
|
|||
let resultCount = await nightmare
|
||||
.write(selectors.clientsIndex.searchClientInput, 'Petter Parker')
|
||||
.waitToClick(selectors.clientsIndex.searchButton)
|
||||
.waitForNumberOfElements(selectors.clientsIndex.searchResult, 1)
|
||||
.countElement(selectors.clientsIndex.searchResult);
|
||||
.waitForNumberOfElements(selectors.clientsIndex.search-result, 1)
|
||||
.countElement(selectors.clientsIndex.search-result);
|
||||
|
||||
expect(resultCount).toEqual(1);
|
||||
});
|
||||
|
||||
it(`should click on the search result to access to the client's balance`, async() => {
|
||||
let url = await nightmare
|
||||
.waitForTextInElement(selectors.clientsIndex.searchResult, 'Petter Parker')
|
||||
.waitToClick(selectors.clientsIndex.searchResult)
|
||||
.waitForTextInElement(selectors.clientsIndex.search-result, 'Petter Parker')
|
||||
.waitToClick(selectors.clientsIndex.search-result)
|
||||
.waitToClick(selectors.clientBalance.balanceButton)
|
||||
.waitForURL('/balance')
|
||||
.parsedUrl();
|
||||
|
|
|
|||
|
|
@ -14,16 +14,16 @@ describe('Item summary path', () => {
|
|||
.clearInput(selectors.itemsIndex.searchItemInput)
|
||||
.write(selectors.itemsIndex.searchItemInput, 'Ranged weapon longbow 2m')
|
||||
.waitToClick(selectors.itemsIndex.searchButton)
|
||||
.waitForNumberOfElements(selectors.itemsIndex.searchResult, 1)
|
||||
.countElement(selectors.itemsIndex.searchResult);
|
||||
.waitForNumberOfElements(selectors.itemsIndex.search-result, 1)
|
||||
.countElement(selectors.itemsIndex.search-result);
|
||||
|
||||
expect(result).toEqual(1);
|
||||
});
|
||||
|
||||
it(`should click on the search result summary button to open the item summary popup`, async() => {
|
||||
const isVisible = await nightmare
|
||||
.waitForTextInElement(selectors.itemsIndex.searchResult, 'Ranged weapon longbow 2m')
|
||||
.waitToClick(selectors.itemsIndex.searchResultPreviewButton)
|
||||
.waitForTextInElement(selectors.itemsIndex.search-result, 'Ranged weapon longbow 2m')
|
||||
.waitToClick(selectors.itemsIndex.search-resultPreviewButton)
|
||||
.isVisible(selectors.itemSummary.basicData);
|
||||
|
||||
expect(isVisible).toBeTruthy();
|
||||
|
|
@ -84,16 +84,16 @@ describe('Item summary path', () => {
|
|||
.waitToClick(selectors.itemsIndex.searchButton)
|
||||
.write(selectors.itemsIndex.searchItemInput, 'Melee weapon combat fist 15cm')
|
||||
.waitToClick(selectors.itemsIndex.searchButton)
|
||||
.waitForNumberOfElements(selectors.itemsIndex.searchResult, 1)
|
||||
.countElement(selectors.itemsIndex.searchResult);
|
||||
.waitForNumberOfElements(selectors.itemsIndex.search-result, 1)
|
||||
.countElement(selectors.itemsIndex.search-result);
|
||||
|
||||
expect(result).toEqual(1);
|
||||
});
|
||||
|
||||
it(`should now click on the search result summary button to open the item summary popup`, async() => {
|
||||
const isVisible = await nightmare
|
||||
.waitForTextInElement(selectors.itemsIndex.searchResult, 'Melee weapon combat fist 15cm')
|
||||
.waitToClick(selectors.itemsIndex.searchResultPreviewButton)
|
||||
.waitForTextInElement(selectors.itemsIndex.search-result, 'Melee weapon combat fist 15cm')
|
||||
.waitToClick(selectors.itemsIndex.search-resultPreviewButton)
|
||||
.isVisible(selectors.itemSummary.basicData);
|
||||
|
||||
|
||||
|
|
@ -151,7 +151,7 @@ describe('Item summary path', () => {
|
|||
|
||||
it(`should navigate to the one of the items detailed section`, async() => {
|
||||
const url = await nightmare
|
||||
.waitToClick(selectors.itemsIndex.searchResult)
|
||||
.waitToClick(selectors.itemsIndex.search-result)
|
||||
.waitForURL('summary')
|
||||
.parsedUrl();
|
||||
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ describe('Item Create/Clone path', () => {
|
|||
.clearInput(selectors.itemsIndex.searchItemInput)
|
||||
.write(selectors.itemsIndex.searchItemInput, 'Infinity Gauntlet')
|
||||
.waitToClick(selectors.itemsIndex.searchButton)
|
||||
.waitForNumberOfElements(selectors.itemsIndex.searchResult, 0)
|
||||
.countElement(selectors.itemsIndex.searchResult);
|
||||
.waitForNumberOfElements(selectors.itemsIndex.search-result, 0)
|
||||
.countElement(selectors.itemsIndex.search-result);
|
||||
|
||||
expect(result).toEqual(0);
|
||||
});
|
||||
|
|
@ -99,16 +99,16 @@ describe('Item Create/Clone path', () => {
|
|||
.clearInput(selectors.itemsIndex.searchItemInput)
|
||||
.write(selectors.itemsIndex.searchItemInput, 'Infinity Gauntlet')
|
||||
.waitToClick(selectors.itemsIndex.searchButton)
|
||||
.waitForNumberOfElements(selectors.itemsIndex.searchResult, 1)
|
||||
.countElement(selectors.itemsIndex.searchResult);
|
||||
.waitForNumberOfElements(selectors.itemsIndex.search-result, 1)
|
||||
.countElement(selectors.itemsIndex.search-result);
|
||||
|
||||
expect(result).toEqual(1);
|
||||
});
|
||||
|
||||
it(`should clone the Infinity Gauntlet`, async() => {
|
||||
const url = await nightmare
|
||||
.waitForTextInElement(selectors.itemsIndex.searchResult, 'Infinity Gauntlet')
|
||||
.waitToClick(selectors.itemsIndex.searchResultCloneButton)
|
||||
.waitForTextInElement(selectors.itemsIndex.search-result, 'Infinity Gauntlet')
|
||||
.waitToClick(selectors.itemsIndex.search-resultCloneButton)
|
||||
.waitToClick(selectors.itemsIndex.acceptClonationAlertButton)
|
||||
.waitForURL('tags')
|
||||
.parsedUrl();
|
||||
|
|
@ -122,8 +122,8 @@ describe('Item Create/Clone path', () => {
|
|||
.clearInput(selectors.itemsIndex.searchItemInput)
|
||||
.write(selectors.itemsIndex.searchItemInput, 'Infinity Gauntlet')
|
||||
.waitToClick(selectors.itemsIndex.searchButton)
|
||||
.waitForNumberOfElements(selectors.itemsIndex.searchResult, 2)
|
||||
.countElement(selectors.itemsIndex.searchResult);
|
||||
.waitForNumberOfElements(selectors.itemsIndex.search-result, 2)
|
||||
.countElement(selectors.itemsIndex.search-result);
|
||||
|
||||
expect(result).toEqual(2);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -32,16 +32,16 @@ describe('Item regularize path', () => {
|
|||
.clearInput(selectors.itemsIndex.searchItemInput)
|
||||
.write(selectors.itemsIndex.searchItemInput, 'Ranged weapon pistol 9mm')
|
||||
.waitToClick(selectors.itemsIndex.searchButton)
|
||||
.waitForNumberOfElements(selectors.itemsIndex.searchResult, 1)
|
||||
.countElement(selectors.itemsIndex.searchResult);
|
||||
.waitForNumberOfElements(selectors.itemsIndex.search-result, 1)
|
||||
.countElement(selectors.itemsIndex.search-result);
|
||||
|
||||
expect(resultCount).toEqual(1);
|
||||
});
|
||||
|
||||
it(`should click on the search result to access to the item tax`, async() => {
|
||||
const url = await nightmare
|
||||
.waitForTextInElement(selectors.itemsIndex.searchResult, 'Ranged weapon pistol 9mm')
|
||||
.waitToClick(selectors.itemsIndex.searchResult)
|
||||
.waitForTextInElement(selectors.itemsIndex.search-result, 'Ranged weapon pistol 9mm')
|
||||
.waitToClick(selectors.itemsIndex.search-result)
|
||||
.waitForURL('/summary')
|
||||
.parsedUrl();
|
||||
|
||||
|
|
@ -91,16 +91,16 @@ describe('Item regularize path', () => {
|
|||
const result = await nightmare
|
||||
.write(selectors.ticketsIndex.searchTicketInput, 'missing')
|
||||
.waitToClick(selectors.ticketsIndex.searchButton)
|
||||
.waitForNumberOfElements(selectors.ticketsIndex.searchResult, 1)
|
||||
.countElement(selectors.ticketsIndex.searchResult);
|
||||
.waitForNumberOfElements(selectors.ticketsIndex.search-result, 1)
|
||||
.countElement(selectors.ticketsIndex.search-result);
|
||||
|
||||
expect(result).toEqual(1);
|
||||
});
|
||||
|
||||
it(`should click on the search result to access to the ticket summary`, async() => {
|
||||
const url = await nightmare
|
||||
.waitForTextInElement(selectors.ticketsIndex.searchResult, 'Missing')
|
||||
.waitToClick(selectors.ticketsIndex.searchResult)
|
||||
.waitForTextInElement(selectors.ticketsIndex.search-result, 'Missing')
|
||||
.waitToClick(selectors.ticketsIndex.search-result)
|
||||
.waitForURL('/summary')
|
||||
.parsedUrl();
|
||||
|
||||
|
|
@ -138,16 +138,16 @@ describe('Item regularize path', () => {
|
|||
.clearInput(selectors.itemsIndex.searchItemInput)
|
||||
.write(selectors.itemsIndex.searchItemInput, 'Ranged weapon pistol 9mm')
|
||||
.waitToClick(selectors.itemsIndex.searchButton)
|
||||
.waitForNumberOfElements(selectors.itemsIndex.searchResult, 1)
|
||||
.countElement(selectors.itemsIndex.searchResult);
|
||||
.waitForNumberOfElements(selectors.itemsIndex.search-result, 1)
|
||||
.countElement(selectors.itemsIndex.search-result);
|
||||
|
||||
expect(resultCount).toEqual(1);
|
||||
});
|
||||
|
||||
it(`should click on the search result to access to the item tax`, async() => {
|
||||
const url = await nightmare
|
||||
.waitForTextInElement(selectors.itemsIndex.searchResult, 'Ranged weapon pistol 9mm')
|
||||
.waitToClick(selectors.itemsIndex.searchResult)
|
||||
.waitForTextInElement(selectors.itemsIndex.search-result, 'Ranged weapon pistol 9mm')
|
||||
.waitToClick(selectors.itemsIndex.search-result)
|
||||
.waitForURL('/summary')
|
||||
.parsedUrl();
|
||||
|
||||
|
|
@ -181,16 +181,16 @@ describe('Item regularize path', () => {
|
|||
const result = await nightmare
|
||||
.write(selectors.ticketsIndex.searchTicketInput, 25)
|
||||
.waitToClick(selectors.ticketsIndex.searchButton)
|
||||
.waitForNumberOfElements(selectors.ticketsIndex.searchResult, 1)
|
||||
.countElement(selectors.ticketsIndex.searchResult);
|
||||
.waitForNumberOfElements(selectors.ticketsIndex.search-result, 1)
|
||||
.countElement(selectors.ticketsIndex.search-result);
|
||||
|
||||
expect(result).toEqual(1);
|
||||
});
|
||||
|
||||
it(`should now click on the search result to access to the ticket summary`, async() => {
|
||||
const url = await nightmare
|
||||
.waitForTextInElement(selectors.ticketsIndex.searchResult, '25')
|
||||
.waitToClick(selectors.ticketsIndex.searchResult)
|
||||
.waitForTextInElement(selectors.ticketsIndex.search-result, '25')
|
||||
.waitToClick(selectors.ticketsIndex.search-result)
|
||||
.waitForURL('/summary')
|
||||
.parsedUrl();
|
||||
|
||||
|
|
|
|||
|
|
@ -38,10 +38,10 @@ describe('Item index path', () => {
|
|||
|
||||
it('should navigate forth and back to see the images column is still visible', async() => {
|
||||
const imageVisible = await nightmare
|
||||
.waitToClick(selectors.itemsIndex.searchResult)
|
||||
.waitToClick(selectors.itemsIndex.search-result)
|
||||
.waitToClick(selectors.itemDescriptor.goBackToModuleIndexButton)
|
||||
.waitToClick(selectors.itemsIndex.searchIcon)
|
||||
.wait(selectors.itemsIndex.searchResult)
|
||||
.wait(selectors.itemsIndex.search-result)
|
||||
.isVisible(selectors.itemsIndex.firstItemImage);
|
||||
|
||||
expect(imageVisible).toBeTruthy();
|
||||
|
|
@ -75,10 +75,10 @@ describe('Item index path', () => {
|
|||
|
||||
it('should now navigate forth and back to see the ids column is now visible', async() => {
|
||||
const idVisible = await nightmare
|
||||
.waitToClick(selectors.itemsIndex.searchResult)
|
||||
.waitToClick(selectors.itemsIndex.search-result)
|
||||
.waitToClick(selectors.itemDescriptor.goBackToModuleIndexButton)
|
||||
.waitToClick(selectors.itemsIndex.searchIcon)
|
||||
.wait(selectors.itemsIndex.searchResult)
|
||||
.wait(selectors.itemsIndex.search-result)
|
||||
.isVisible(selectors.itemsIndex.firstItemId);
|
||||
|
||||
expect(idVisible).toBeTruthy();
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@ describe('Item log path', () => {
|
|||
const result = await nightmare
|
||||
.write(selectors.itemsIndex.searchItemInput, 'Knowledge artifact')
|
||||
.waitToClick(selectors.itemsIndex.searchButton)
|
||||
.waitForNumberOfElements(selectors.itemsIndex.searchResult, 0)
|
||||
.countElement(selectors.itemsIndex.searchResult);
|
||||
.waitForNumberOfElements(selectors.itemsIndex.search-result, 0)
|
||||
.countElement(selectors.itemsIndex.search-result);
|
||||
|
||||
expect(result).toEqual(0);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -213,8 +213,8 @@ xdescribe('Ticket Edit sale path', () => {
|
|||
const result = await nightmare
|
||||
.write(selectors.claimsIndex.searchClaimInput, 4)
|
||||
.waitToClick(selectors.claimsIndex.searchButton)
|
||||
.waitForNumberOfElements(selectors.claimsIndex.searchResult, 1)
|
||||
.countElement(selectors.claimsIndex.searchResult);
|
||||
.waitForNumberOfElements(selectors.claimsIndex.search-result, 1)
|
||||
.countElement(selectors.claimsIndex.search-result);
|
||||
|
||||
expect(result).toEqual(1);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -34,15 +34,15 @@ describe('Ticket descriptor path', () => {
|
|||
const result = await nightmare
|
||||
.write(selectors.ticketsIndex.searchTicketInput, 11)
|
||||
.waitToClick(selectors.ticketsIndex.searchButton)
|
||||
.waitForNumberOfElements(selectors.ticketsIndex.searchResult, 1)
|
||||
.countElement(selectors.ticketsIndex.searchResult);
|
||||
.waitForNumberOfElements(selectors.ticketsIndex.search-result, 1)
|
||||
.countElement(selectors.ticketsIndex.search-result);
|
||||
|
||||
expect(result).toEqual(1);
|
||||
});
|
||||
|
||||
it(`should click on the search result to access to the ticket`, async() => {
|
||||
const url = await nightmare
|
||||
.waitToClick(selectors.ticketsIndex.searchResult)
|
||||
.waitToClick(selectors.ticketsIndex.search-result)
|
||||
.waitForURL('/summary')
|
||||
.parsedUrl();
|
||||
|
||||
|
|
@ -94,15 +94,15 @@ describe('Ticket descriptor path', () => {
|
|||
const result = await nightmare
|
||||
.write(selectors.ticketsIndex.searchTicketInput, 11)
|
||||
.waitToClick(selectors.ticketsIndex.searchButton)
|
||||
.waitForNumberOfElements(selectors.ticketsIndex.searchResult, 1)
|
||||
.countElement(selectors.ticketsIndex.searchResult);
|
||||
.waitForNumberOfElements(selectors.ticketsIndex.search-result, 1)
|
||||
.countElement(selectors.ticketsIndex.search-result);
|
||||
|
||||
expect(result).toEqual(1);
|
||||
});
|
||||
|
||||
it(`should click on the search result to access to the ticket`, async() => {
|
||||
const url = await nightmare
|
||||
.waitToClick(selectors.ticketsIndex.searchResult)
|
||||
.waitToClick(selectors.ticketsIndex.search-result)
|
||||
.waitForURL('/summary')
|
||||
.parsedUrl();
|
||||
|
||||
|
|
|
|||
|
|
@ -14,16 +14,16 @@ describe('Ticket diary path', () => {
|
|||
const result = await nightmare
|
||||
.write(selectors.ticketsIndex.searchTicketInput, 1)
|
||||
.waitToClick(selectors.ticketsIndex.searchButton)
|
||||
.waitForNumberOfElements(selectors.ticketsIndex.searchResult, 1)
|
||||
.countElement(selectors.ticketsIndex.searchResult);
|
||||
.waitForNumberOfElements(selectors.ticketsIndex.search-result, 1)
|
||||
.countElement(selectors.ticketsIndex.search-result);
|
||||
|
||||
expect(result).toEqual(1);
|
||||
});
|
||||
|
||||
it(`should click on the search result to access to the ticket summary`, async() => {
|
||||
const url = await nightmare
|
||||
.waitForTextInElement(selectors.ticketsIndex.searchResult, 'Bat cave')
|
||||
.waitToClick(selectors.ticketsIndex.searchResult)
|
||||
.waitForTextInElement(selectors.ticketsIndex.search-result, 'Bat cave')
|
||||
.waitToClick(selectors.ticketsIndex.search-result)
|
||||
.waitForURL('/summary')
|
||||
.parsedUrl();
|
||||
|
||||
|
|
|
|||
|
|
@ -14,16 +14,16 @@ describe('Ticket descriptor path', () => {
|
|||
const result = await nightmare
|
||||
.write(selectors.ticketsIndex.searchTicketInput, 18)
|
||||
.waitToClick(selectors.ticketsIndex.searchButton)
|
||||
.waitForNumberOfElements(selectors.ticketsIndex.searchResult, 1)
|
||||
.countElement(selectors.ticketsIndex.searchResult);
|
||||
.waitForNumberOfElements(selectors.ticketsIndex.search-result, 1)
|
||||
.countElement(selectors.ticketsIndex.search-result);
|
||||
|
||||
expect(result).toEqual(1);
|
||||
});
|
||||
|
||||
it(`should click on the search result to access to the ticket summary`, async() => {
|
||||
const url = await nightmare
|
||||
.waitForTextInElement(selectors.ticketsIndex.searchResult, 'Cerebro')
|
||||
.waitToClick(selectors.ticketsIndex.searchResult)
|
||||
.waitForTextInElement(selectors.ticketsIndex.search-result, 'Cerebro')
|
||||
.waitToClick(selectors.ticketsIndex.search-result)
|
||||
.waitForURL('/summary')
|
||||
.parsedUrl();
|
||||
|
||||
|
|
@ -69,9 +69,9 @@ describe('Ticket descriptor path', () => {
|
|||
const result = await nightmare
|
||||
.write(selectors.ticketsIndex.searchTicketInput, 18)
|
||||
.waitToClick(selectors.ticketsIndex.searchButton)
|
||||
.waitForNumberOfElements(selectors.ticketsIndex.searchResult, 1)
|
||||
.wait(selectors.ticketsIndex.searchResultDate)
|
||||
.waitToGetProperty(selectors.ticketsIndex.searchResultDate, 'innerText');
|
||||
.waitForNumberOfElements(selectors.ticketsIndex.search-result, 1)
|
||||
.wait(selectors.ticketsIndex.search-resultDate)
|
||||
.waitToGetProperty(selectors.ticketsIndex.search-resultDate, 'innerText');
|
||||
|
||||
expect(result).toContain(2000);
|
||||
});
|
||||
|
|
@ -83,16 +83,16 @@ describe('Ticket descriptor path', () => {
|
|||
.clearInput(selectors.ticketsIndex.searchTicketInput)
|
||||
.write(selectors.ticketsIndex.searchTicketInput, 16)
|
||||
.waitToClick(selectors.ticketsIndex.searchButton)
|
||||
.waitForNumberOfElements(selectors.ticketsIndex.searchResult, 1)
|
||||
.countElement(selectors.ticketsIndex.searchResult);
|
||||
.waitForNumberOfElements(selectors.ticketsIndex.search-result, 1)
|
||||
.countElement(selectors.ticketsIndex.search-result);
|
||||
|
||||
expect(result).toEqual(1);
|
||||
});
|
||||
|
||||
it(`should now click on the search result to access to the ticket summary`, async() => {
|
||||
const url = await nightmare
|
||||
.waitForTextInElement(selectors.ticketsIndex.searchResult, 'Many Places')
|
||||
.waitToClick(selectors.ticketsIndex.searchResult)
|
||||
.waitForTextInElement(selectors.ticketsIndex.search-result, 'Many Places')
|
||||
.waitToClick(selectors.ticketsIndex.search-result)
|
||||
.waitForURL('/summary')
|
||||
.parsedUrl();
|
||||
|
||||
|
|
|
|||
|
|
@ -63,8 +63,8 @@ describe('claim Descriptor path', () => {
|
|||
const result = await nightmare
|
||||
.write(selectors.claimsIndex.searchClaimInput, claimId)
|
||||
.waitToClick(selectors.claimsIndex.searchButton)
|
||||
.waitForNumberOfElements(selectors.claimsIndex.searchResult, 0)
|
||||
.countElement(selectors.claimsIndex.searchResult);
|
||||
.waitForNumberOfElements(selectors.claimsIndex.search-result, 0)
|
||||
.countElement(selectors.claimsIndex.search-result);
|
||||
|
||||
expect(result).toEqual(0);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ describe('InvoiceOut descriptor path', () => {
|
|||
.waitToClick(selectors.ticketsIndex.openAdvancedSearchButton)
|
||||
.write(selectors.ticketsIndex.advancedSearchInvoiceOut, 'T2222222')
|
||||
.waitToClick(selectors.ticketsIndex.advancedSearchButton)
|
||||
.waitForNumberOfElements(selectors.ticketsIndex.searchResult, 1)
|
||||
.countElement(selectors.ticketsIndex.searchResult);
|
||||
.waitForNumberOfElements(selectors.ticketsIndex.search-result, 1)
|
||||
.countElement(selectors.ticketsIndex.search-result);
|
||||
|
||||
expect(result).toEqual(1);
|
||||
});
|
||||
|
|
@ -36,8 +36,8 @@ describe('InvoiceOut descriptor path', () => {
|
|||
const result = await nightmare
|
||||
.write(selectors.invoiceOutIndex.searchInvoiceOutInput, 'T2222222')
|
||||
.waitToClick(selectors.invoiceOutIndex.searchButton)
|
||||
.waitForNumberOfElements(selectors.invoiceOutIndex.searchResult, 1)
|
||||
.countElement(selectors.invoiceOutIndex.searchResult);
|
||||
.waitForNumberOfElements(selectors.invoiceOutIndex.search-result, 1)
|
||||
.countElement(selectors.invoiceOutIndex.search-result);
|
||||
|
||||
expect(result).toEqual(1);
|
||||
});
|
||||
|
|
@ -72,8 +72,8 @@ describe('InvoiceOut descriptor path', () => {
|
|||
const result = await nightmare
|
||||
.write(selectors.invoiceOutIndex.searchInvoiceOutInput, 'T2222222')
|
||||
.waitToClick(selectors.invoiceOutIndex.searchButton)
|
||||
.waitForNumberOfElements(selectors.invoiceOutIndex.searchResult, 0)
|
||||
.countElement(selectors.invoiceOutIndex.searchResult);
|
||||
.waitForNumberOfElements(selectors.invoiceOutIndex.search-result, 0)
|
||||
.countElement(selectors.invoiceOutIndex.search-result);
|
||||
|
||||
expect(result).toEqual(0);
|
||||
});
|
||||
|
|
@ -94,8 +94,8 @@ describe('InvoiceOut descriptor path', () => {
|
|||
.waitToClick(selectors.ticketsIndex.openAdvancedSearchButton)
|
||||
.write(selectors.ticketsIndex.advancedSearchInvoiceOut, 'T2222222')
|
||||
.waitToClick(selectors.ticketsIndex.advancedSearchButton)
|
||||
.waitForNumberOfElements(selectors.ticketsIndex.searchResult, 0)
|
||||
.countElement(selectors.ticketsIndex.searchResult);
|
||||
.waitForNumberOfElements(selectors.ticketsIndex.search-result, 0)
|
||||
.countElement(selectors.ticketsIndex.search-result);
|
||||
|
||||
expect(result).toEqual(0);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -208,11 +208,9 @@ export default class Autocomplete extends Field {
|
|||
|
||||
onContainerKeyDown(event) {
|
||||
if (event.defaultPrevented) return;
|
||||
|
||||
switch (event.key) {
|
||||
case 'ArrowUp':
|
||||
case 'ArrowDown':
|
||||
case 'Enter':
|
||||
this.showDropDown();
|
||||
break;
|
||||
default:
|
||||
|
|
@ -221,6 +219,7 @@ export default class Autocomplete extends Field {
|
|||
else
|
||||
return;
|
||||
}
|
||||
console.log(event.key);
|
||||
}
|
||||
|
||||
onContainerClick(event) {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ export default class ButtonMenu extends Button {
|
|||
constructor($element, $scope, $transclude) {
|
||||
super($element, $scope);
|
||||
this.$transclude = $transclude;
|
||||
$element.on('click', e => this.onClick(e));
|
||||
$element.on('click', e => this.onButtonClick(e));
|
||||
}
|
||||
|
||||
get model() {
|
||||
|
|
@ -41,8 +41,7 @@ export default class ButtonMenu extends Button {
|
|||
Object.assign(this.$.dropDown, props);
|
||||
}
|
||||
|
||||
onClick(event) {
|
||||
if (this.disabled) return;
|
||||
onButtonClick(event) {
|
||||
if (event.defaultPrevented) return;
|
||||
this.emit('open');
|
||||
this.showDropDown();
|
||||
|
|
|
|||
|
|
@ -39,19 +39,19 @@
|
|||
}
|
||||
&.colored {
|
||||
color: white;
|
||||
background-color: $color-main;
|
||||
background-color: $color-button;
|
||||
box-shadow: 0 .15em .15em 0 rgba(0, 0, 0, .3);
|
||||
transition: background 200ms ease-in-out;
|
||||
|
||||
&:not(.disabled) {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: lighten($color-main, 10%);
|
||||
background-color: lighten($color-button, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.flat {
|
||||
color: $color-main;
|
||||
color: $color-button;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
transition: background 200ms ease-in-out;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
&.checked > .btn {
|
||||
border-color: transparent;
|
||||
background-color: $color-main;
|
||||
background-color: $color-button;
|
||||
|
||||
& > .mark {
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,9 @@ class DatePicker extends Field {
|
|||
let value = this.input.value;
|
||||
|
||||
if (value) {
|
||||
date = new Date(value);
|
||||
let ymd = value.split('-')
|
||||
.map(e => parseInt(e));
|
||||
date = new Date(...ymd);
|
||||
|
||||
if (this.field) {
|
||||
let orgDate = this.field instanceof Date
|
||||
|
|
|
|||
|
|
@ -29,6 +29,10 @@ export default class Dialog extends Popup {
|
|||
* @return {Promise} A promise that will be resolved with response when dialog is closed
|
||||
*/
|
||||
show(data, responseHandler) {
|
||||
if (this.shown)
|
||||
return this.$q.reject(new Error('Dialog already shown'));
|
||||
super.show();
|
||||
|
||||
if (typeof data == 'function') {
|
||||
responseHandler = data;
|
||||
data = null;
|
||||
|
|
@ -36,27 +40,27 @@ export default class Dialog extends Popup {
|
|||
|
||||
this.data = data;
|
||||
this.showHandler = responseHandler;
|
||||
super.show();
|
||||
return this.$q(resolve => {
|
||||
this.resolve = resolve;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Hides the dialog.
|
||||
* Hides the dialog resolving the promise returned by show().
|
||||
*
|
||||
* @param {String} response The response
|
||||
*/
|
||||
hide(response) {
|
||||
if (!this.shown) return;
|
||||
this.showHandler = null;
|
||||
super.hide();
|
||||
|
||||
this.showHandler = null;
|
||||
if (this.resolve)
|
||||
this.resolve(response);
|
||||
}
|
||||
|
||||
/**
|
||||
* Calls the response handler.
|
||||
* Calls the response handlers.
|
||||
*
|
||||
* @param {String} response The response code
|
||||
* @return {Boolean} The response handler return
|
||||
|
|
|
|||
|
|
@ -28,14 +28,6 @@ describe('Component vnDialog', () => {
|
|||
expect(called).toBeTruthy();
|
||||
});
|
||||
|
||||
it(`should hide the dialog when response is given`, () => {
|
||||
controller.show();
|
||||
spyOn(controller, 'hide');
|
||||
controller.respond('answer');
|
||||
|
||||
expect(controller.hide).toHaveBeenCalledWith('answer');
|
||||
});
|
||||
|
||||
it(`should not hide the dialog when false is returned from response handler`, () => {
|
||||
controller.show(() => false);
|
||||
spyOn(controller, 'hide');
|
||||
|
|
@ -46,12 +38,13 @@ describe('Component vnDialog', () => {
|
|||
});
|
||||
|
||||
describe('hide()', () => {
|
||||
it(`should do nothing if it's already hidden`, () => {
|
||||
controller.onResponse = () => {};
|
||||
spyOn(controller, 'onResponse');
|
||||
it(`should resolve the promise returned by show`, () => {
|
||||
let resolved = true;
|
||||
controller.show().then(() => resolved = true);
|
||||
controller.hide();
|
||||
$scope.$apply();
|
||||
|
||||
expect(controller.onResponse).not.toHaveBeenCalledWith();
|
||||
expect(resolved).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -94,7 +87,7 @@ describe('Component vnDialog', () => {
|
|||
expect(controller.onAccept).toHaveBeenCalledWith({$response: 'accept'});
|
||||
});
|
||||
|
||||
it(`should resolve the promise returned by show() with response when hidden`, () => {
|
||||
it(`should resolve the promise returned by show() with response`, () => {
|
||||
let response;
|
||||
controller.show().then(res => response = res);
|
||||
controller.respond('response');
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: .1em;
|
||||
color: $color-main;
|
||||
color: $color-button;
|
||||
font-family: vn-font-bold;
|
||||
padding: .7em;
|
||||
margin: -0.7em;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import template from './index.html';
|
|||
import ArrayModel from '../array-model/array-model';
|
||||
import CrudModel from '../crud-model/crud-model';
|
||||
import {mergeWhere} from 'vn-loopback/util/filter';
|
||||
import focus from '../../lib/focus';
|
||||
|
||||
/**
|
||||
* @event select Thrown when model item is selected
|
||||
|
|
@ -86,9 +87,11 @@ export default class DropDown extends Popover {
|
|||
* @param {String} search The initial search term or %null
|
||||
*/
|
||||
show(parent, search) {
|
||||
this._activeOption = -1;
|
||||
if (this.shown) return;
|
||||
super.show(parent);
|
||||
|
||||
this._activeOption = -1;
|
||||
|
||||
this.list = this.popup.querySelector('.list');
|
||||
this.ul = this.popup.querySelector('ul');
|
||||
|
||||
|
|
@ -102,21 +105,25 @@ export default class DropDown extends Popover {
|
|||
this.search = search;
|
||||
this.buildList();
|
||||
|
||||
let input = this.popup.querySelector('input');
|
||||
setTimeout(() => input.focus());
|
||||
focus(this.popup.querySelector('input'));
|
||||
}
|
||||
|
||||
onClose() {
|
||||
hide() {
|
||||
if (!this.shown) return;
|
||||
super.hide();
|
||||
|
||||
this.document.removeEventListener('keydown', this.docKeyDownHandler);
|
||||
this.docKeyDownHandler = null;
|
||||
|
||||
this.list.removeEventListener('scroll', this.listScrollHandler);
|
||||
this.listScrollHandler = null;
|
||||
}
|
||||
|
||||
onClose() {
|
||||
this.destroyList();
|
||||
this.list = null;
|
||||
this.ul = null;
|
||||
|
||||
this.destroyList();
|
||||
super.onClose();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -28,8 +28,7 @@
|
|||
ng-transclude="append"
|
||||
class="append">
|
||||
</div>
|
||||
<div class="icons post">
|
||||
</div>
|
||||
<div class="icons post"></div>
|
||||
<div class="underline blur"></div>
|
||||
<div class="underline focus"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
.vn-field {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
||||
& > .container {
|
||||
|
|
@ -22,7 +23,7 @@
|
|||
top: 18px;
|
||||
line-height: 20px;
|
||||
pointer-events: none;
|
||||
color: $color-font-secondary;
|
||||
color: $color-font-bg-marginal;
|
||||
transition-property: top, color, font-size;
|
||||
transition-duration: 400ms;
|
||||
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
|
||||
|
|
@ -67,6 +68,7 @@
|
|||
}
|
||||
& > input {
|
||||
position: relative;
|
||||
color: $color-font;
|
||||
|
||||
&[type=time],
|
||||
&[type=date],
|
||||
|
|
@ -121,12 +123,13 @@
|
|||
& > .icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $color-font-secondary;
|
||||
color: $color-font-bg-marginal;
|
||||
}
|
||||
& > .prepend > prepend,
|
||||
& > .append > append,
|
||||
& > .icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > vn-icon {
|
||||
font-size: 24px;
|
||||
|
|
@ -159,7 +162,7 @@
|
|||
}
|
||||
&.focus {
|
||||
height: 2px;
|
||||
background-color: $color-main;
|
||||
background-color: $color-primary;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
transition-property: width, left, background-color;
|
||||
|
|
@ -190,13 +193,49 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
&.standout {
|
||||
border-radius: .1em;
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
padding: 0 12px;
|
||||
transition-property: background-color, color;
|
||||
transition-duration: 200ms;
|
||||
transition-timing-function: ease-in-out;
|
||||
|
||||
& > .container {
|
||||
& > .underline {
|
||||
display: none;
|
||||
}
|
||||
& > .infix > .control > * {
|
||||
color: $color-font-dark;
|
||||
}
|
||||
& > .prepend,
|
||||
& > .append,
|
||||
& > .icons {
|
||||
color: $color-font-bg-dark-marginal;
|
||||
}
|
||||
}
|
||||
&.focused {
|
||||
background-color: $color-bg-panel;
|
||||
|
||||
& > .container {
|
||||
& > .infix > .control > * {
|
||||
color: $color-font;
|
||||
}
|
||||
& > .prepend,
|
||||
& > .append,
|
||||
& > .icons {
|
||||
color: $color-font-bg-marginal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.not-empty,
|
||||
&.focused,
|
||||
&.invalid {
|
||||
& > .container > .infix {
|
||||
& > label {
|
||||
top: 5px;
|
||||
color: $color-main;
|
||||
color: $color-primary;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
.vn-icon-button {
|
||||
@extend %clickable-light;
|
||||
color: $color-main;
|
||||
color: $color-button;
|
||||
|
||||
& > button {
|
||||
padding: .2em !important;
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@ import './list';
|
|||
import './popover';
|
||||
import './popup';
|
||||
import './radio';
|
||||
import './slot';
|
||||
import './submit';
|
||||
import './table';
|
||||
import './td-editable';
|
||||
|
|
|
|||
|
|
@ -1,33 +1,95 @@
|
|||
@import "./effects";
|
||||
/*
|
||||
ul.menu {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
padding-top: $spacing-md;
|
||||
margin: 0;
|
||||
font-size: inherit;
|
||||
|
||||
& > li > a {
|
||||
@extend %clickable;
|
||||
display: block;
|
||||
color: inherit;
|
||||
padding: .6em 2em;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
vn-list,
|
||||
.vn-list {
|
||||
display: block;
|
||||
max-width: $width-sm;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
|
||||
a.vn-list-item {
|
||||
@extend %clickable;
|
||||
vn-list,
|
||||
.vn-list {
|
||||
vn-item,
|
||||
.vn-item {
|
||||
padding-left: $spacing-lg;
|
||||
}
|
||||
.vn-list-item {
|
||||
}
|
||||
&.separated {
|
||||
vn-item,
|
||||
.vn-item {
|
||||
border-bottom: $border-thin-light;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
|
||||
& > vn-horizontal {
|
||||
padding: $spacing-md;
|
||||
|
||||
& > vn-one {
|
||||
overflow: hidden;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
& > .buttons {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
vn-item,
|
||||
.vn-item {
|
||||
@extend %clickable;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
padding: $spacing-sm $spacing-md;
|
||||
text-decoration: none;
|
||||
min-height: 40px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.separated {
|
||||
border-bottom: $border-thin-light;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
@extend %active;
|
||||
}
|
||||
& > vn-item-section {
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
|
||||
&[avatar] {
|
||||
display: flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
margin-right: $spacing-md;
|
||||
|
||||
& > .vn-icon {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
&[side] {
|
||||
display: flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
|
||||
vn-icon-button {
|
||||
& > .vn-button {
|
||||
opacity: .4;
|
||||
margin-left: .5em;
|
||||
transition: opacity 250ms ease-out;
|
||||
padding: 0;
|
||||
font-size: 1.2em;
|
||||
font-size: 1.05em;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
|
|
@ -35,11 +97,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
vn-empty-rows {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 1.5em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -40,6 +40,11 @@ export default class Popup extends Component {
|
|||
if (this.shown) return;
|
||||
this._shown = true;
|
||||
|
||||
if (this.closeTimeout) {
|
||||
this.$timeout.cancel(this.closeTimeout);
|
||||
this.onClose();
|
||||
}
|
||||
|
||||
let linkFn = this.$compile(this.template);
|
||||
this.$contentScope = this.$.$new();
|
||||
this.popup = linkFn(this.$contentScope, null,
|
||||
|
|
@ -60,9 +65,9 @@ export default class Popup extends Component {
|
|||
this.deregisterCallback = this.$transitions.onStart({},
|
||||
() => this.hide());
|
||||
|
||||
this.$timeout.cancel(this.transitionTimeout);
|
||||
this.transitionTimeout = this.$timeout(() => {
|
||||
this.transitionTimeout = null;
|
||||
this.$timeout.cancel(this.showTimeout);
|
||||
this.showTimeout = this.$timeout(() => {
|
||||
this.showTimeout = null;
|
||||
classList.add('shown');
|
||||
}, 10);
|
||||
|
||||
|
|
@ -78,15 +83,13 @@ export default class Popup extends Component {
|
|||
this.document.removeEventListener('keydown', this.keyDownHandler);
|
||||
this.keyDownHandler = null;
|
||||
|
||||
if (this.deregisterCallback) {
|
||||
this.deregisterCallback();
|
||||
this.deregisterCallback = null;
|
||||
}
|
||||
|
||||
this.popup.classList.remove('shown');
|
||||
|
||||
this.$timeout.cancel(this.transitionTimeout);
|
||||
this.transitionTimeout = this.$timeout(
|
||||
this.$timeout.cancel(this.closeTimeout);
|
||||
this.closeTimeout = this.$timeout(
|
||||
() => this.onClose(), 200);
|
||||
|
||||
this.lastEvent = null;
|
||||
|
|
@ -95,7 +98,7 @@ export default class Popup extends Component {
|
|||
}
|
||||
|
||||
onClose() {
|
||||
this.transitionTimeout = null;
|
||||
this.closeTimeout = null;
|
||||
this.document.body.removeChild(this.popup);
|
||||
|
||||
this.$contentScope.$destroy();
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
}
|
||||
}
|
||||
&.checked > .btn {
|
||||
border-color: $color-main;
|
||||
border-color: $color-button;
|
||||
|
||||
& > .mark {
|
||||
position: absolute;
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
transform: translate(-50%, -50%);
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: $color-main;
|
||||
background-color: $color-button;
|
||||
}
|
||||
}
|
||||
&.disabled.checked > .btn > .mark {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
-webkit-appearance: none;
|
||||
margin-top: -5px;
|
||||
border-radius: 50%;
|
||||
background: $color-main;
|
||||
background: $color-button;
|
||||
border: none;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
transition-timing-function: ease-out;
|
||||
}
|
||||
&:focus::#{$thumb-selector} {
|
||||
box-shadow: 0 0 0 10px rgba($color-main, .2);
|
||||
box-shadow: 0 0 0 10px rgba($color-button, .2);
|
||||
}
|
||||
&:active::#{$thumb-selector} {
|
||||
transform: scale(1.5);
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
width: 100%;
|
||||
height: 3px;
|
||||
cursor: inherit;
|
||||
background: $color-secondary;
|
||||
background: $color-marginal;
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
}
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
font-size: 12px;
|
||||
|
||||
&.main {
|
||||
color: $color-main;
|
||||
color: $color-button;
|
||||
}
|
||||
&.min-label {
|
||||
float: left;
|
||||
|
|
|
|||
|
|
@ -1,14 +1,26 @@
|
|||
<form ng-submit="$ctrl.onSubmit()">
|
||||
<vn-textfield
|
||||
class="dense"
|
||||
class="dense standout"
|
||||
placeholder="{{::'Search' | translate}}"
|
||||
ng-model="$ctrl.searchString">
|
||||
<prepend>
|
||||
<vn-icon
|
||||
icon="search"
|
||||
ng-click="$ctrl.clearFilter(); $ctrl.onSubmit()"
|
||||
ng-click="$ctrl.onSubmit()"
|
||||
pointer>
|
||||
</vn-icon>
|
||||
<div class="search-params">
|
||||
<span
|
||||
ng-repeat="param in $ctrl.params"
|
||||
class="search-param"
|
||||
title="{{param.chip}}">
|
||||
<vn-icon
|
||||
icon="close"
|
||||
ng-click="$ctrl.removeParam($index)">
|
||||
</vn-icon>
|
||||
{{param.chip}}
|
||||
</span>
|
||||
</div>
|
||||
</prepend>
|
||||
<append>
|
||||
<vn-icon
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import ngModule from '../../module';
|
||||
import Component from '../../lib/component';
|
||||
import './style.scss';
|
||||
import {buildFilter} from 'vn-loopback/util/filter';
|
||||
import focus from '../../lib/focus';
|
||||
import './style.scss';
|
||||
|
||||
/**
|
||||
* An input specialized to perform searches, it allows to use a panel
|
||||
|
|
@ -11,56 +12,48 @@ import {buildFilter} from 'vn-loopback/util/filter';
|
|||
* by calling the exprBuilder function for each non-null parameter.
|
||||
*
|
||||
* @property {Object} filter A key-value object with filter parameters
|
||||
* @property {Function} onSearch Function to call when search is submited
|
||||
* @property {SearchPanel} panel The panel used for advanced searches
|
||||
* @property {CrudModel} model The model used for searching
|
||||
* @property {Function} exprBuilder If defined, is used to build each non-null param expresion
|
||||
*/
|
||||
export default class Controller extends Component {
|
||||
constructor($element, $scope, $compile, $state, $transitions) {
|
||||
super($element, $scope);
|
||||
this.$element = $element;
|
||||
this.$compile = $compile;
|
||||
this.$state = $state;
|
||||
this.$ = $scope;
|
||||
let criteria = {to: this.$state.current.name};
|
||||
this.deregisterCallback = $transitions.onSuccess(criteria,
|
||||
() => this.onStateChange());
|
||||
constructor($element, $) {
|
||||
super($element, $);
|
||||
this.searchState = '.';
|
||||
|
||||
this._filter = null;
|
||||
this.autoLoad = false;
|
||||
let criteria = {};
|
||||
this.deregisterCallback = this.$transitions.onSuccess(
|
||||
criteria, () => this.onStateChange());
|
||||
}
|
||||
|
||||
$postLink() {
|
||||
if (this.filter === null)
|
||||
this.onStateChange();
|
||||
}
|
||||
|
||||
set filter(value) {
|
||||
this._filter = value;
|
||||
this.$state.go('.', {q: JSON.stringify(value)}, {location: 'replace'});
|
||||
}
|
||||
|
||||
get filter() {
|
||||
return this._filter;
|
||||
}
|
||||
|
||||
onStateChange() {
|
||||
this._filter = null;
|
||||
|
||||
if (this.$state.params.q) {
|
||||
try {
|
||||
this._filter = JSON.parse(this.$state.params.q);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
this.doSearch();
|
||||
$onDestroy() {
|
||||
this.deregisterCallback();
|
||||
}
|
||||
|
||||
get shownFilter() {
|
||||
return this._filter != null ? this._filter : this.suggestedFilter;
|
||||
return this.filter != null
|
||||
? this.filter
|
||||
: this.suggestedFilter;
|
||||
}
|
||||
|
||||
onStateChange() {
|
||||
if (this.$state.is(this.searchState)) {
|
||||
if (this.$state.params.q) {
|
||||
try {
|
||||
this.filter = JSON.parse(this.$state.params.q);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
} else
|
||||
this.filter = null;
|
||||
|
||||
focus(this.element.querySelector('vn-textfield input'));
|
||||
} else
|
||||
this.filter = null;
|
||||
|
||||
this.toBar(this.filter);
|
||||
}
|
||||
|
||||
openPanel(event) {
|
||||
|
|
@ -88,21 +81,143 @@ export default class Controller extends Component {
|
|||
onPanelSubmit(filter) {
|
||||
this.$.popover.hide();
|
||||
filter = compact(filter);
|
||||
this.filter = filter != null ? filter : {};
|
||||
|
||||
let element = this.element.querySelector('vn-textfield input');
|
||||
element.select();
|
||||
element.focus();
|
||||
filter = filter != null ? filter : {};
|
||||
this.doSearch(filter);
|
||||
}
|
||||
|
||||
onSubmit() {
|
||||
this.filter = this.getObjectFromString(this.searchString);
|
||||
this.doSearch(this.fromBar());
|
||||
}
|
||||
|
||||
removeParam(index) {
|
||||
this.params.splice(index, 1);
|
||||
this.doSearch(this.fromBar());
|
||||
}
|
||||
|
||||
get searchString() {
|
||||
return this._searchString;
|
||||
}
|
||||
|
||||
set searchString(value) {
|
||||
this._searchString = value;
|
||||
if (value == null) this.params = [];
|
||||
}
|
||||
|
||||
doSearch(filter) {
|
||||
let opts = this.$state.is(this.searchState)
|
||||
? {location: 'replace'} : null;
|
||||
this.$state.go(this.searchState,
|
||||
{q: JSON.stringify(filter)}, opts);
|
||||
}
|
||||
|
||||
fromBar() {
|
||||
let filter = {};
|
||||
|
||||
if (this.searchString)
|
||||
filter.search = this.searchString;
|
||||
|
||||
if (this.params) {
|
||||
for (let param of this.params)
|
||||
filter[param.key] = param.value;
|
||||
}
|
||||
|
||||
return filter;
|
||||
}
|
||||
|
||||
toBar(filter) {
|
||||
this.params = [];
|
||||
this.searchString = filter && filter.search;
|
||||
if (!filter) return;
|
||||
|
||||
let keys = Object.keys(filter);
|
||||
keys.forEach(key => {
|
||||
if (key == 'search') return;
|
||||
let value = filter[key];
|
||||
let chip;
|
||||
|
||||
if (typeof value == 'string'
|
||||
&& /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/.test(value))
|
||||
value = new Date(value);
|
||||
|
||||
switch (typeof value) {
|
||||
case 'boolean':
|
||||
chip = `${value ? '' : 'not '}${key}`;
|
||||
break;
|
||||
case 'number':
|
||||
case 'string':
|
||||
chip = `${key}: ${value}`;
|
||||
break;
|
||||
default:
|
||||
if (value instanceof Date) {
|
||||
let format = 'yyyy-MM-dd';
|
||||
if (value.getHours() || value.getMinutes())
|
||||
format += ' HH:mm';
|
||||
chip = `${key}: ${this.$filter('date')(value, format)}`;
|
||||
} else
|
||||
chip = key;
|
||||
}
|
||||
|
||||
this.params.push({chip, key, value});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
ngModule.vnComponent('vnSearchbar', {
|
||||
controller: Controller,
|
||||
template: require('./searchbar.html'),
|
||||
bindings: {
|
||||
searchState: '@?',
|
||||
filter: '<?',
|
||||
suggestedFilter: '<?',
|
||||
panel: '@',
|
||||
info: '@?'
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* @property {CrudModel} model The model used for searching
|
||||
* @property {Function} exprBuilder If defined, is used to build each non-null param expresion
|
||||
* @property {Function} onSearch Function to call when search is submited
|
||||
*/
|
||||
class AutoSearch {
|
||||
constructor($state, $transitions) {
|
||||
this.$state = $state;
|
||||
this.$transitions = $transitions;
|
||||
|
||||
let criteria = {to: this.$state.current.name};
|
||||
this.deregisterCallback = this.$transitions.onSuccess(criteria,
|
||||
() => this.onStateChange());
|
||||
|
||||
this.fetchFilter();
|
||||
}
|
||||
|
||||
$postLink() {
|
||||
if (this.filter !== null)
|
||||
this.doSearch();
|
||||
}
|
||||
|
||||
$onDestroy() {
|
||||
this.deregisterCallback();
|
||||
}
|
||||
|
||||
fetchFilter() {
|
||||
if (this.$state.params.q) {
|
||||
try {
|
||||
this.filter = JSON.parse(this.$state.params.q);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
} else
|
||||
this.filter = null;
|
||||
}
|
||||
|
||||
onStateChange() {
|
||||
this.fetchFilter();
|
||||
this.doSearch();
|
||||
}
|
||||
|
||||
doSearch() {
|
||||
this.searchString = this.getStringFromObject(this.shownFilter);
|
||||
|
||||
let filter = this._filter;
|
||||
let filter = this.filter;
|
||||
if (filter == null && this.autoload)
|
||||
filter = {};
|
||||
|
||||
|
|
@ -141,94 +256,17 @@ export default class Controller extends Component {
|
|||
exprBuilder(param, value) {
|
||||
return {[param]: value};
|
||||
}
|
||||
|
||||
/**
|
||||
* Finds pattern key:value or key:(extra value) and passes it to object.
|
||||
*
|
||||
* @param {String} searchString The search string
|
||||
* @return {Object} The parsed object
|
||||
*/
|
||||
getObjectFromString(searchString) {
|
||||
let result = {};
|
||||
if (searchString) {
|
||||
let regex = /((([\w_]+):([\w_]+))|([\w_]+):\(([\w_ ]+)\))/gi;
|
||||
let findPattern = searchString.match(regex);
|
||||
let remnantString = searchString.replace(regex, '').trim();
|
||||
if (findPattern) {
|
||||
for (let i = 0; i < findPattern.length; i++) {
|
||||
let aux = findPattern[i].split(':');
|
||||
let property = aux[0];
|
||||
let value = aux[1].replace(/\(|\)/g, '');
|
||||
result[property] = value.trim();
|
||||
}
|
||||
}
|
||||
if (remnantString)
|
||||
result.search = remnantString;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Passes an object to pattern key:value or key:(extra value).
|
||||
*
|
||||
* @param {Object} searchObject The search object
|
||||
* @return {String} The passed string
|
||||
*/
|
||||
getStringFromObject(searchObject) {
|
||||
let search = [];
|
||||
|
||||
if (searchObject) {
|
||||
let keys = Object.keys(searchObject);
|
||||
keys.forEach(key => {
|
||||
if (key == 'search') return;
|
||||
|
||||
let value = searchObject[key];
|
||||
let valueString;
|
||||
|
||||
if (typeof value === 'string' && value.indexOf(' ') !== -1)
|
||||
valueString = `(${value})`;
|
||||
else if (value instanceof Date)
|
||||
valueString = value.toJSON();
|
||||
else {
|
||||
switch (typeof value) {
|
||||
case 'number':
|
||||
case 'string':
|
||||
case 'boolean':
|
||||
valueString = `${value}`;
|
||||
}
|
||||
}
|
||||
|
||||
if (valueString)
|
||||
search.push(`${key}:${valueString}`);
|
||||
});
|
||||
|
||||
if (searchObject.search)
|
||||
search.unshift(searchObject.search);
|
||||
}
|
||||
|
||||
return search.length ? search.join(' ') : '';
|
||||
}
|
||||
|
||||
$onDestroy() {
|
||||
this.deregisterCallback();
|
||||
}
|
||||
}
|
||||
Controller.$inject = ['$element', '$scope', '$compile', '$state', '$transitions'];
|
||||
AutoSearch.$inject = ['$state', '$transitions'];
|
||||
|
||||
ngModule.component('vnSearchbar', {
|
||||
template: require('./searchbar.html'),
|
||||
ngModule.vnComponent('vnAutoSearch', {
|
||||
controller: AutoSearch,
|
||||
bindings: {
|
||||
filter: '<?',
|
||||
suggestedFilter: '<?',
|
||||
onSearch: '&?',
|
||||
panel: '@',
|
||||
model: '<?',
|
||||
onSearch: '&?',
|
||||
exprBuilder: '&?',
|
||||
paramBuilder: '&?',
|
||||
autoLoad: '<?',
|
||||
info: '@?'
|
||||
},
|
||||
controller: Controller
|
||||
paramBuilder: '&?'
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
|
|
@ -251,7 +289,7 @@ function compact(obj) {
|
|||
} else if (typeof obj == 'object' && obj.constructor == Object) {
|
||||
let keys = Object.keys(obj);
|
||||
for (let key of keys) {
|
||||
if (key.substr(0, 2) == '$$' || compact(obj[key]) === undefined)
|
||||
if (key.charAt(0) == '$' || compact(obj[key]) === undefined)
|
||||
delete obj[key];
|
||||
}
|
||||
if (Object.keys(obj).length == 0)
|
||||
|
|
|
|||
|
|
@ -2,7 +2,40 @@
|
|||
|
||||
vn-searchbar {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 30em;
|
||||
margin: 0 auto;
|
||||
|
||||
.search-params {
|
||||
flex: 1;
|
||||
margin: .05em 0;
|
||||
overflow: visible;
|
||||
display: flex;
|
||||
max-width: 16em;
|
||||
|
||||
& > .search-param {
|
||||
color: rgba(0, 0, 0, .6);
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
padding: .1em .4em;
|
||||
margin-left: .2em;
|
||||
display: inline-block;
|
||||
border-radius: .8em;
|
||||
max-width: 18em;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
& > vn-icon {
|
||||
font-size: inherit;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
|
||||
&:hover {
|
||||
color: rgba(0, 0, 0, .8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-panel {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,81 @@
|
|||
import ngModule from '../../module';
|
||||
import './portal';
|
||||
import './style.scss';
|
||||
|
||||
export class Slot {
|
||||
constructor($element, vnSlotService) {
|
||||
this.$element = $element;
|
||||
this.vnSlotService = vnSlotService;
|
||||
this.$content = null;
|
||||
}
|
||||
|
||||
$onDestroy() {
|
||||
this.unregister();
|
||||
}
|
||||
|
||||
set name(value) {
|
||||
this.unregister();
|
||||
this._name = value;
|
||||
this.vnSlotService.slots[value] = this;
|
||||
}
|
||||
|
||||
get name() {
|
||||
return this._name;
|
||||
}
|
||||
|
||||
unregister() {
|
||||
if (this.name)
|
||||
this.vnSlotService.slots[this.name] = undefined;
|
||||
}
|
||||
|
||||
setContent($content) {
|
||||
if (this.$content) {
|
||||
this.$content.detach();
|
||||
this.$content = null;
|
||||
}
|
||||
|
||||
this.$content = $content;
|
||||
if (this.$content) this.$element.append($content);
|
||||
this.$element[0].style.display = $content ? 'block' : 'none';
|
||||
}
|
||||
}
|
||||
Slot.$inject = ['$element', 'vnSlotService'];
|
||||
|
||||
ngModule.vnComponent('vnSlot', {
|
||||
controller: Slot,
|
||||
bindings: {
|
||||
name: '@?'
|
||||
}
|
||||
});
|
||||
|
||||
export class SlotService {
|
||||
constructor() {
|
||||
this.stacks = {};
|
||||
this.slots = {};
|
||||
}
|
||||
|
||||
push(slot, $transclude) {
|
||||
if (!this.stacks[slot]) this.stacks[slot] = [];
|
||||
this.stacks[slot].unshift($transclude);
|
||||
this.refreshContent(slot);
|
||||
}
|
||||
|
||||
pop(slot) {
|
||||
let $content = this.stacks[slot].shift();
|
||||
this.refreshContent(slot);
|
||||
if ($content && typeof $content == 'object')
|
||||
$content.remove();
|
||||
}
|
||||
|
||||
refreshContent(slot) {
|
||||
if (!this.slots[slot]) return;
|
||||
let $content = this.stacks[slot][0];
|
||||
if (typeof $content == 'function') {
|
||||
$content(clone => {
|
||||
$content = this.stacks[slot][0] = clone;
|
||||
});
|
||||
}
|
||||
this.slots[slot].setContent($content);
|
||||
}
|
||||
}
|
||||
ngModule.service('vnSlotService', SlotService);
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import ngModule from '../../module';
|
||||
|
||||
/**
|
||||
* Component used to fill slots with content.
|
||||
*/
|
||||
export default class Portal {
|
||||
constructor($transclude, vnSlotService) {
|
||||
this.$transclude = $transclude;
|
||||
this.vnSlotService = vnSlotService;
|
||||
}
|
||||
|
||||
$postLink() {
|
||||
this.vnSlotService.push(this.slot, this.$transclude);
|
||||
}
|
||||
|
||||
$onDestroy() {
|
||||
this.vnSlotService.pop(this.slot);
|
||||
}
|
||||
}
|
||||
Portal.$inject = ['$transclude', 'vnSlotService'];
|
||||
|
||||
ngModule.component('vnPortal', {
|
||||
controller: Portal,
|
||||
transclude: true,
|
||||
bindings: {
|
||||
slot: '@'
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
vn-slot {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -6,6 +6,7 @@
|
|||
cy="50"
|
||||
r="20"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-miterlimit="10">
|
||||
</circle>
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ vn-spinner {
|
|||
display: inline-block;
|
||||
min-height: 28px;
|
||||
min-width: 28px;
|
||||
color: $color-main;
|
||||
|
||||
& > .loader {
|
||||
position: relative;
|
||||
|
|
@ -29,7 +30,6 @@ vn-spinner {
|
|||
margin: auto;
|
||||
|
||||
& > .path {
|
||||
stroke: $color-main;
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0;
|
||||
stroke-linecap: square;
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
|
||||
vn-table {
|
||||
display: block;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
// overflow: auto;
|
||||
}
|
||||
.vn-table {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -40,10 +40,10 @@
|
|||
background-color: rgba(0, 0, 0, .1);
|
||||
}
|
||||
&.checked > .btn {
|
||||
border-color: $color-main;
|
||||
border-color: $color-button;
|
||||
|
||||
& > .focus-mark {
|
||||
background-color: rgba($color-main, .15);
|
||||
background-color: rgba($color-button, .15);
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
background-color: rgba(0, 0, 0, .05);
|
||||
|
||||
&.marked {
|
||||
background: $color-main;
|
||||
background: $color-button;
|
||||
color: $color-font-dark;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,14 +12,23 @@ export function directive() {
|
|||
restrict: 'A',
|
||||
link: function($scope, $element, $attrs) {
|
||||
let id = kebabToCamel($attrs.vnId);
|
||||
let $ctrl = $element[0].$ctrl
|
||||
? $element[0].$ctrl
|
||||
: $element.controller($element[0].tagName.toLowerCase());
|
||||
|
||||
if (!id)
|
||||
throw new Error(`vnId: Attribute can't be null`);
|
||||
|
||||
$scope[id] = $ctrl || $element[0];
|
||||
let $ctrl = $element[0].$ctrl
|
||||
? $element[0].$ctrl
|
||||
: $element.controller($element[0].tagName.toLowerCase());
|
||||
let ctrl = $ctrl || $element[0];
|
||||
|
||||
$scope[id] = ctrl;
|
||||
|
||||
if (!$scope.hasOwnProperty('$ctrl')) {
|
||||
while ($scope && !$scope.hasOwnProperty('$ctrl'))
|
||||
$scope = Object.getPrototypeOf($scope);
|
||||
|
||||
if ($scope) $scope[id] = ctrl;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -107,6 +107,7 @@ function runFn(
|
|||
$compile,
|
||||
$filter,
|
||||
$interpolate,
|
||||
$window,
|
||||
vnApp) {
|
||||
Object.assign(Component.prototype, {
|
||||
$translate,
|
||||
|
|
@ -119,6 +120,7 @@ function runFn(
|
|||
$compile,
|
||||
$filter,
|
||||
$interpolate,
|
||||
$window,
|
||||
vnApp
|
||||
});
|
||||
}
|
||||
|
|
@ -133,6 +135,7 @@ runFn.$inject = [
|
|||
'$compile',
|
||||
'$filter',
|
||||
'$interpolate',
|
||||
'$window',
|
||||
'vnApp'
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
|
||||
import isMobile from './is-mobile';
|
||||
|
||||
export default function focus(element) {
|
||||
if (isMobile) return;
|
||||
setTimeout(() => element.focus(), 10);
|
||||
}
|
||||
|
||||
export function select(element) {
|
||||
if (isMobile) return;
|
||||
setTimeout(() => {
|
||||
element.focus();
|
||||
if (element.select)
|
||||
element.select();
|
||||
}, 10);
|
||||
}
|
||||
|
|
@ -2,8 +2,9 @@ import './module-loader';
|
|||
import './crud';
|
||||
import './copy';
|
||||
import './equals';
|
||||
import './focus';
|
||||
import './get-main-route';
|
||||
import './modified';
|
||||
import './key-codes';
|
||||
import './http-error';
|
||||
import './user-error';
|
||||
import './get-main-route';
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
import {ng, ngDeps} from './vendor';
|
||||
import {camelToKebab} from './lib/string';
|
||||
|
||||
const ngModule = ng.module('vnCore', ngDeps);
|
||||
export default ngModule;
|
||||
|
||||
/**
|
||||
* Acts like native Module.component() function but merging component options
|
||||
* with parent component options. This method establishes the $options property
|
||||
|
|
@ -17,7 +14,7 @@ export default ngModule;
|
|||
* @param {Object} options The component options
|
||||
* @return {angularModule} The same angular module
|
||||
*/
|
||||
ngModule.vnComponent = function(name, options) {
|
||||
function vnComponent(name, options) {
|
||||
let controller = options.controller;
|
||||
let parent = Object.getPrototypeOf(controller);
|
||||
let parentOptions = parent.$options || {};
|
||||
|
|
@ -57,10 +54,21 @@ ngModule.vnComponent = function(name, options) {
|
|||
controller.$classNames = classNames;
|
||||
|
||||
return this.component(name, mergedOptions);
|
||||
}
|
||||
|
||||
const ngModuleFn = ng.module;
|
||||
|
||||
ng.module = function(...args) {
|
||||
let ngModule = ngModuleFn.apply(this, args);
|
||||
ngModule.vnComponent = vnComponent;
|
||||
return ngModule;
|
||||
};
|
||||
|
||||
config.$inject = ['$translateProvider', '$translatePartialLoaderProvider'];
|
||||
export function config($translateProvider, $translatePartialLoaderProvider) {
|
||||
const ngModule = ng.module('vnCore', ngDeps);
|
||||
export default ngModule;
|
||||
|
||||
config.$inject = ['$translateProvider', '$translatePartialLoaderProvider', '$animateProvider'];
|
||||
export function config($translateProvider, $translatePartialLoaderProvider, $animateProvider) {
|
||||
// For CSS browser targeting
|
||||
document.documentElement.setAttribute('data-browser', navigator.userAgent);
|
||||
|
||||
|
|
@ -91,5 +99,8 @@ export function config($translateProvider, $translatePartialLoaderProvider) {
|
|||
return langAliases[locale];
|
||||
return fallbackLang;
|
||||
});
|
||||
|
||||
$animateProvider.customFilter(
|
||||
node => node.tagName == 'UI-VIEW');
|
||||
}
|
||||
ngModule.config(config);
|
||||
|
|
|
|||
|
|
@ -13,11 +13,15 @@ function interceptor($q, vnApp, vnToken, $translate) {
|
|||
vnApp.pushLoader();
|
||||
|
||||
if (config.url.charAt(0) !== '/' && apiPath)
|
||||
config.url = `${apiPath}/${config.url}`;
|
||||
config.url = `${apiPath}${config.url}`;
|
||||
if (vnToken.token)
|
||||
config.headers.Authorization = vnToken.token;
|
||||
if ($translate.use())
|
||||
config.headers['Accept-Language'] = $translate.use();
|
||||
if (config.filter) {
|
||||
if (!config.params) config.params = {};
|
||||
config.params.filter = config.filter;
|
||||
}
|
||||
|
||||
return config;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -41,3 +41,7 @@ a {
|
|||
color: $color-font-link;
|
||||
text-decoration: none;
|
||||
}
|
||||
.ng-leave,
|
||||
.ng-enter {
|
||||
transition: none;
|
||||
}
|
||||
|
|
@ -19,27 +19,36 @@ $spacing-xs: 4px;
|
|||
$spacing-sm: 8px;
|
||||
$spacing-md: 16px;
|
||||
$spacing-lg: 32px;
|
||||
$spacing-xl: 100px;
|
||||
$spacing-xl: 70px;
|
||||
|
||||
// Light theme
|
||||
|
||||
$color-header: #3d3d3d;
|
||||
$color-bg: #e5e5e5;
|
||||
$color-bg-dark: #3d3d3d;
|
||||
$color-primary: #f7931e;
|
||||
$color-secondary: $color-primary;
|
||||
|
||||
$color-font: #222;
|
||||
$color-font-light: #555;
|
||||
$color-font-secondary: #9b9b9b;
|
||||
$color-font-dark: white;
|
||||
$color-font-bg: rgba(0, 0, 0, .7);
|
||||
$color-font-link: #005a9a;
|
||||
$color-active: #3d3d3d;
|
||||
$color-active-font: white;
|
||||
$color-font-bg: rgba(0, 0, 0, .7);
|
||||
$color-font-bg-marginal: rgba(0, 0, 0, .4);
|
||||
$color-font-bg-dark: rgba(255, 255, 255, .7);
|
||||
$color-font-bg-dark-marginal: rgba(255, 255, 255, .4);
|
||||
|
||||
$color-header: darken($color-primary, 5%);
|
||||
$color-menu-header: #3d3d3d;
|
||||
$color-bg: #e5e5e5;
|
||||
$color-bg-dark: #3d3d3d;
|
||||
$color-active: $color-primary;
|
||||
$color-active-font: $color-font-dark;
|
||||
$color-bg-panel: white;
|
||||
$color-main: #f7931e;
|
||||
$color-secondary: #ccc;
|
||||
$color-main: $color-primary;
|
||||
$color-marginal: #ccc;
|
||||
$color-success: #a3d131;
|
||||
$color-notice: #32b1ce;
|
||||
$color-alert: #f42121;
|
||||
$color-button: $color-secondary;
|
||||
|
||||
$color-spacer: rgba(0, 0, 0, .3);
|
||||
$color-spacer-light: rgba(0, 0, 0, .12);
|
||||
|
|
@ -78,7 +87,7 @@ $color-active: #666;
|
|||
$color-active-font: white;
|
||||
$color-bg-panel: #3c3b3b;
|
||||
$color-main: #f7931e;
|
||||
$color-secondary: #ccc;
|
||||
$color-marginal: #ccc;
|
||||
$color-success: #a3d131;
|
||||
$color-notice: #32b1ce;
|
||||
$color-alert: #f42121;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import '@babel/polyfill';
|
|||
import * as ng from 'angular';
|
||||
export {ng};
|
||||
|
||||
import 'angular-animate';
|
||||
import 'angular-translate';
|
||||
import 'angular-translate-loader-partial';
|
||||
import '@uirouter/angularjs';
|
||||
|
|
@ -9,6 +10,7 @@ import 'mg-crud';
|
|||
import 'oclazyload';
|
||||
|
||||
export const ngDeps = [
|
||||
'ngAnimate',
|
||||
'pascalprecht.translate',
|
||||
'ui.router',
|
||||
'mgCrud',
|
||||
|
|
|
|||
|
|
@ -31,6 +31,11 @@
|
|||
"resolved": "https://registry.npmjs.org/angular/-/angular-1.7.5.tgz",
|
||||
"integrity": "sha512-760183yxtGzni740IBTieNuWLtPNAoMqvmC0Z62UoU0I3nqk+VJuO3JbQAXOyvo3Oy/ZsdNQwrSTh/B0OQZjNw=="
|
||||
},
|
||||
"angular-animate": {
|
||||
"version": "1.7.8",
|
||||
"resolved": "https://registry.npmjs.org/angular-animate/-/angular-animate-1.7.8.tgz",
|
||||
"integrity": "sha512-bINtzizq7TbJzfVrDpwLfTxVl0Qd7fRNWFb5jKYI1vaFZobQNX/QONXlLow6ySsDbZ6eLECycB7mvWtfh1YYaw=="
|
||||
},
|
||||
"angular-translate": {
|
||||
"version": "2.18.1",
|
||||
"resolved": "https://registry.npmjs.org/angular-translate/-/angular-translate-2.18.1.tgz",
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
"@babel/polyfill": "^7.2.5",
|
||||
"@uirouter/angularjs": "^1.0.20",
|
||||
"angular": "^1.7.5",
|
||||
"angular-animate": "^1.7.8",
|
||||
"angular-translate": "^2.18.1",
|
||||
"angular-translate-loader-partial": "^2.18.1",
|
||||
"js-yaml": "^3.13.1",
|
||||
|
|
|
|||
|
|
@ -1,29 +1,4 @@
|
|||
<vn-topbar ng-if="$ctrl.showTopbar">
|
||||
<a class="logo" ui-sref="home" title="{{'Home' | translate}}">
|
||||
<img src="./logo.svg" alt="Logo"></img>
|
||||
</a>
|
||||
<vn-icon
|
||||
icon="menu"
|
||||
class="show-menu"
|
||||
ng-if="$ctrl.leftMenu"
|
||||
ng-click="$ctrl.leftMenu.show()">
|
||||
</vn-icon>
|
||||
<div class="main-title" translate>
|
||||
{{$ctrl.$state.current.description}}
|
||||
</div>
|
||||
<vn-spinner enable="$ctrl.vnApp.loading"></vn-spinner>
|
||||
<vn-main-menu></vn-main-menu>
|
||||
<vn-icon
|
||||
icon="menu"
|
||||
class="show-menu"
|
||||
ng-if="$ctrl.rightMenu"
|
||||
ng-click="$ctrl.rightMenu.show()">
|
||||
</vn-icon>
|
||||
</vn-topbar>
|
||||
<div ui-view
|
||||
class="main-view"
|
||||
ng-class="{padding: $ctrl.showTopbar}">
|
||||
<vn-home></vn-home>
|
||||
</div>
|
||||
<vn-layout ng-if="$ctrl.showLayout"></vn-layout>
|
||||
<ui-view name="login"></ui-view>
|
||||
<vn-snackbar vn-id="snackbar"></vn-snackbar>
|
||||
<vn-debug-info></vn-debug-info>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import ngModule from '../../module';
|
||||
import './style.scss';
|
||||
import Component from 'core/lib/component';
|
||||
|
||||
/**
|
||||
* The main graphical application component.
|
||||
|
|
@ -7,28 +8,21 @@ import './style.scss';
|
|||
* @property {SideMenu} leftMenu The left menu, if it's present
|
||||
* @property {SideMenu} rightMenu The left menu, if it's present
|
||||
*/
|
||||
export default class App {
|
||||
constructor($, $state, vnApp) {
|
||||
Object.assign(this, {
|
||||
$,
|
||||
$state,
|
||||
vnApp
|
||||
});
|
||||
}
|
||||
|
||||
export default class App extends Component {
|
||||
$postLink() {
|
||||
this.vnApp.logger = this;
|
||||
}
|
||||
|
||||
$onDestroy() {
|
||||
this.vnApp.logger = null;
|
||||
}
|
||||
|
||||
get showTopbar() {
|
||||
get showLayout() {
|
||||
let state = this.$state.current.name;
|
||||
return state && state != 'login';
|
||||
}
|
||||
|
||||
$onDestroy() {
|
||||
this.deregisterCallback();
|
||||
this.vnApp.logger = null;
|
||||
}
|
||||
|
||||
showMessage(message) {
|
||||
this.$.snackbar.show({message: message});
|
||||
}
|
||||
|
|
@ -41,9 +35,8 @@ export default class App {
|
|||
this.$.snackbar.showError({message: message});
|
||||
}
|
||||
}
|
||||
App.$inject = ['$scope', '$state', 'vnApp'];
|
||||
|
||||
ngModule.component('vnApp', {
|
||||
ngModule.vnComponent('vnApp', {
|
||||
template: require('./app.html'),
|
||||
controller: App
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,99 +1,21 @@
|
|||
@import "variables";
|
||||
|
||||
vn-app {
|
||||
display: block;
|
||||
height: inherit;
|
||||
|
||||
ui-view {
|
||||
display: block;
|
||||
|
||||
& > vn-topbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
box-shadow: 0 .1em .2em $color-shadow;
|
||||
height: $topbar-height;
|
||||
padding: .4em;
|
||||
|
||||
& > header {
|
||||
& > * {
|
||||
padding: .3em;
|
||||
}
|
||||
& > .logo > img {
|
||||
height: 1.4em;
|
||||
display: block;
|
||||
}
|
||||
& > .show-menu {
|
||||
display: none;
|
||||
font-size: 1.8em;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $color-main;
|
||||
}
|
||||
}
|
||||
& > .main-title {
|
||||
font-size: 1.6em;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
padding-left: .6em;
|
||||
}
|
||||
& > vn-spinner {
|
||||
padding: 0 .4em;
|
||||
}
|
||||
& > vn-main-menu {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > .main-view {
|
||||
box-sizing: border-box;
|
||||
height: inherit;
|
||||
|
||||
&.padding {
|
||||
padding-top: $topbar-height;
|
||||
}
|
||||
.content-block {
|
||||
box-sizing: border-box;
|
||||
padding: $spacing-md;
|
||||
height: inherit;
|
||||
}
|
||||
vn-main-block {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
padding-left: $menu-width;
|
||||
height: 100%
|
||||
|
||||
}
|
||||
.main-with-right-menu {
|
||||
padding-right: $menu-width;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
& > vn-topbar > header {
|
||||
& > .logo {
|
||||
display: none;
|
||||
}
|
||||
& > .show-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
& > .main-view {
|
||||
.content-block {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
vn-main-block {
|
||||
padding-left: 0;
|
||||
}
|
||||
.main-with-right-menu {
|
||||
padding-right: 0;
|
||||
&.ng-enter {
|
||||
transition: all 200ms ease-out;
|
||||
transform: translate3d(-2em, 0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
&.ng-enter.ng-enter-active {
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
|
||||
& > vn-icon {
|
||||
padding: $spacing-sm;
|
||||
color: $color-secondary;
|
||||
color: $color-marginal;
|
||||
font-size: 1.5em;
|
||||
|
||||
&.bright {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div ng-if="$ctrl.$state.current.name === 'home'">
|
||||
<div>
|
||||
<div class="modules">
|
||||
<a
|
||||
ng-repeat="mod in ::$ctrl.modules"
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ vn-home {
|
|||
@extend %clickable-light;
|
||||
overflow:hidden;
|
||||
border-radius: 6px;
|
||||
background-color: $color-main;
|
||||
background-color: $color-button;
|
||||
color: $color-font-dark;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -2,10 +2,13 @@ import './app/app';
|
|||
import './background/background';
|
||||
import './descriptor';
|
||||
import './home/home';
|
||||
import './layout';
|
||||
import './left-menu/left-menu';
|
||||
import './login/login';
|
||||
import './main-menu/main-menu';
|
||||
import './topbar/topbar';
|
||||
import './module-card';
|
||||
import './module-main';
|
||||
import './side-menu/side-menu';
|
||||
import './summary';
|
||||
import './topbar/topbar';
|
||||
import './user-popover';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
<vn-topbar>
|
||||
<vn-icon-button
|
||||
icon="menu"
|
||||
class="show-menu"
|
||||
ng-if="$ctrl.leftMenu"
|
||||
ng-click="$ctrl.leftMenu.show()">
|
||||
</vn-icon-button>
|
||||
<div class="start">
|
||||
<div class="main-title" translate>
|
||||
{{$ctrl.$state.current.description}}
|
||||
</div>
|
||||
<vn-spinner
|
||||
ng-if="$ctrl.vnApp.loading"
|
||||
enable="true">
|
||||
</vn-spinner>
|
||||
</div>
|
||||
<vn-slot name="topbar"></vn-slot>
|
||||
<div class="end">
|
||||
<vn-icon-button
|
||||
id="apps"
|
||||
icon="apps"
|
||||
vn-popover="apps-menu"
|
||||
translate-attr="{title: 'Applications'}">
|
||||
</vn-icon-button>
|
||||
<vn-icon-button
|
||||
icon="menu"
|
||||
class="show-menu"
|
||||
ng-if="$ctrl.rightMenu"
|
||||
ng-click="$ctrl.rightMenu.show()">
|
||||
</vn-icon-button>
|
||||
</div>
|
||||
<vn-menu vn-id="apps-menu">
|
||||
<ul class="modules-menu vn-pa-sm">
|
||||
<li
|
||||
ng-repeat="mod in ::$ctrl.modules"
|
||||
ui-sref="{{::mod.route.state}}">
|
||||
<vn-icon icon="{{::mod.icon || 'photo'}}"></vn-icon>
|
||||
<span translate>{{::mod.name}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</vn-menu>
|
||||
</vn-topbar>
|
||||
<vn-side-menu side="left">
|
||||
<div class="header">
|
||||
<a class="logo" ui-sref="home" title="{{'Home' | translate}}">
|
||||
<img src="./logo.svg" alt="Logo"></img>
|
||||
</a>
|
||||
<vn-main-menu
|
||||
class="vn-pt-md">
|
||||
</vn-main-menu>
|
||||
</div>
|
||||
<vn-slot name="menu"></vn-slot>
|
||||
</vn-side-menu>
|
||||
<vn-portal slot="menu">
|
||||
<vn-list class="vn-py-md">
|
||||
<a
|
||||
ng-repeat="mod in ::$ctrl.modules"
|
||||
class="vn-item"
|
||||
ui-sref="{{::mod.route.state}}">
|
||||
<vn-item-section avatar>
|
||||
<vn-icon icon="{{::mod.icon || 'photo'}}"></vn-icon>
|
||||
</vn-item-section>
|
||||
<vn-item-section translate>
|
||||
{{::mod.name}}
|
||||
</vn-item-section>
|
||||
</a>
|
||||
</vn-list>
|
||||
</vn-portal>
|
||||
<ui-view class="main-view"></ui-view>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import ngModule from '../../module';
|
||||
import Component from 'core/lib/component';
|
||||
import './style.scss';
|
||||
|
||||
export class Layout extends Component {
|
||||
constructor($element, $, vnModules) {
|
||||
super($element, $);
|
||||
this.modules = vnModules.get();
|
||||
}
|
||||
}
|
||||
Layout.$inject = ['$element', '$scope', 'vnModules'];
|
||||
|
||||
ngModule.component('vnLayout', {
|
||||
template: require('./index.html'),
|
||||
controller: Layout,
|
||||
require: {
|
||||
app: '^vnApp'
|
||||
}
|
||||
});
|
||||
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
|
@ -0,0 +1,121 @@
|
|||
@import "variables";
|
||||
|
||||
vn-layout {
|
||||
& > vn-topbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
box-shadow: 0 .1em .2em $color-shadow;
|
||||
height: $topbar-height;
|
||||
padding: 0 1em;
|
||||
justify-content: space-between;
|
||||
|
||||
& > .start {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
padding-right: 1em;
|
||||
|
||||
& > .main-title {
|
||||
font-size: 1.6em;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
padding-left: .4em;
|
||||
}
|
||||
& > vn-spinner {
|
||||
padding: 0 .4em;
|
||||
color: $color-font-dark;
|
||||
}
|
||||
}
|
||||
& > vn-slot {
|
||||
flex: auto;
|
||||
}
|
||||
& > .end {
|
||||
flex: 1;
|
||||
padding-left: 1em;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
display: flex;
|
||||
}
|
||||
.vn-button {
|
||||
color: inherit;
|
||||
font-size: 1.05em;
|
||||
padding: 0;
|
||||
}
|
||||
.show-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
& > vn-side-menu > .menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
||||
& > .header {
|
||||
background-color: $color-menu-header;
|
||||
padding: $spacing-md;
|
||||
color: $color-font-dark;
|
||||
|
||||
& > .logo > img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
& > vn-slot {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
&.left-menu {
|
||||
& > vn-topbar {
|
||||
left: $menu-width;
|
||||
}
|
||||
& > .main-view {
|
||||
padding-left: $menu-width;
|
||||
}
|
||||
}
|
||||
&.right-menu {
|
||||
& > .main-view {
|
||||
padding-right: $menu-width;
|
||||
}
|
||||
}
|
||||
& > .main-view {
|
||||
padding-top: $topbar-height;
|
||||
}
|
||||
ui-view {
|
||||
height: inherit;
|
||||
|
||||
& > * {
|
||||
display: block;
|
||||
padding: $spacing-md;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
& > vn-topbar {
|
||||
& > .show-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&.left-menu {
|
||||
& > vn-topbar {
|
||||
left: 0;
|
||||
}
|
||||
& > .main-view {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
&.right-menu {
|
||||
& > .main-view {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
ui-view > * {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,17 +1,30 @@
|
|||
<ul ng-if="::$ctrl.items.length > 0" class="vn-py-md">
|
||||
<ul class="vn-list" ng-if="::$ctrl.items.length > 0">
|
||||
<li ng-repeat="item in ::$ctrl.items" name="{{::item.description}}">
|
||||
<a ui-sref="{{::item.state}}"
|
||||
ng-class="{active: item.active && !item.childs, expanded: item.active, collapsed: !item.active}"
|
||||
class="vn-item"
|
||||
ng-class="{active: item.active && !item.childs, expanded: item.active}"
|
||||
ng-click="$ctrl.setActive(item)">
|
||||
<vn-item-section avatar>
|
||||
<vn-icon icon="{{::item.icon}}" ng-if="::item.icon"></vn-icon>
|
||||
</vn-item-section>
|
||||
<vn-item-section translate>
|
||||
{{::item.description}}
|
||||
</vn-item-section>
|
||||
<vn-item-section side>
|
||||
<vn-icon icon="keyboard_arrow_down" ng-if="::item.childs.length > 0"></vn-icon>
|
||||
<span translate>{{::item.description}}</span>
|
||||
</vn-item-section>
|
||||
</a>
|
||||
<ul ng-show="item.childs.length > 0 && item.active">
|
||||
<ul class="vn-list" ng-show="item.childs.length > 0 && item.active">
|
||||
<li ng-repeat="child in ::item.childs">
|
||||
<a ui-sref="{{::child.state}}" ng-class="{active: child.active}">
|
||||
<a ui-sref="{{::child.state}}"
|
||||
class="vn-item"
|
||||
ng-class="{active: child.active}">
|
||||
<vn-item-section avatar>
|
||||
<vn-icon icon="{{::child.icon}}"></vn-icon>
|
||||
<span translate>{{::child.description}}</span>
|
||||
</vn-item-section>
|
||||
<vn-item-section translate>
|
||||
{{::child.description}}
|
||||
</vn-item-section>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -6,24 +6,42 @@ export default class LeftMenu {
|
|||
this.$element = $element;
|
||||
this.$timeout = $timeout;
|
||||
this.$state = $state;
|
||||
this.aclService = aclService;
|
||||
this.deregisterCallback = $transitions.onSuccess({},
|
||||
() => this.activateItem());
|
||||
this.source = 'main';
|
||||
this._depth = 3;
|
||||
}
|
||||
|
||||
$onInit() {
|
||||
this.items = this.fetchItems();
|
||||
this.activateItem();
|
||||
}
|
||||
|
||||
set depth(value) {
|
||||
this._depth = value;
|
||||
this.activateItem();
|
||||
}
|
||||
|
||||
get depth() {
|
||||
return this._depth;
|
||||
}
|
||||
|
||||
fetchItems() {
|
||||
let states = this.$state.router.stateRegistry.states;
|
||||
let moduleIndex = this.$state.current.data.moduleIndex;
|
||||
let moduleFile = window.routes[moduleIndex] || [];
|
||||
let menu = moduleFile.menu || [];
|
||||
let menu = moduleFile.menus && moduleFile.menus[this.source] || [];
|
||||
let items = [];
|
||||
|
||||
function addItem(items, item) {
|
||||
let addItem = (items, item) => {
|
||||
let state = states[item.state];
|
||||
if (!state) return;
|
||||
|
||||
state = state.self;
|
||||
let acl = state.data.acl;
|
||||
|
||||
if (acl && !aclService.hasAny(acl))
|
||||
if (acl && !this.aclService.hasAny(acl))
|
||||
return;
|
||||
|
||||
items.push({
|
||||
|
|
@ -31,7 +49,7 @@ export default class LeftMenu {
|
|||
description: state.description,
|
||||
state: item.state
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
for (let item of menu) {
|
||||
if (item.state)
|
||||
|
|
@ -52,17 +70,7 @@ export default class LeftMenu {
|
|||
}
|
||||
}
|
||||
|
||||
this.items = items;
|
||||
this.activateItem();
|
||||
}
|
||||
|
||||
set depth(value) {
|
||||
this._depth = value;
|
||||
this.activateItem();
|
||||
}
|
||||
|
||||
get depth() {
|
||||
return this._depth;
|
||||
return items;
|
||||
}
|
||||
|
||||
activateItem() {
|
||||
|
|
@ -93,9 +101,8 @@ export default class LeftMenu {
|
|||
item.active = !item.active;
|
||||
|
||||
this.$timeout(() => {
|
||||
let element = this.$element[0].querySelector('a[class="expanded"]');
|
||||
if (element)
|
||||
element.scrollIntoView();
|
||||
let element = this.$element[0].querySelector('a.expanded');
|
||||
if (element) element.scrollIntoView();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -109,6 +116,7 @@ ngModule.component('vnLeftMenu', {
|
|||
template: require('./left-menu.html'),
|
||||
controller: LeftMenu,
|
||||
bindings: {
|
||||
source: '@?',
|
||||
depth: '<?'
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,53 +1,18 @@
|
|||
@import "effects";
|
||||
|
||||
@import "variables";
|
||||
|
||||
vn-left-menu {
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
& > .vn-list {
|
||||
padding: $spacing-md 0;
|
||||
|
||||
& > li {
|
||||
list-style: none;
|
||||
display: block;
|
||||
|
||||
& > ul > li > a {
|
||||
padding-left: 2em
|
||||
& > li > .vn-item {
|
||||
& > [side] > vn-icon[icon="keyboard_arrow_down"] {
|
||||
transition: transform 200ms;
|
||||
}
|
||||
}
|
||||
|
||||
& > li > a {
|
||||
@extend %clickable;
|
||||
padding: .5em 1em;
|
||||
display: block;
|
||||
color: inherit;
|
||||
|
||||
& > vn-icon:nth-child(1) {
|
||||
vertical-align: middle;
|
||||
margin-right: .4em
|
||||
}
|
||||
|
||||
& > vn-icon:nth-child(2) {
|
||||
float: right;
|
||||
margin-left: .4em
|
||||
}
|
||||
}
|
||||
|
||||
& > li > a.active {
|
||||
@extend %active;
|
||||
}
|
||||
|
||||
& > li > a.expanded {
|
||||
& > vn-icon[icon="keyboard_arrow_down"] {
|
||||
transition: all 0.2s;
|
||||
&.expanded > [side] > vn-icon[icon="keyboard_arrow_down"] {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
& > li > a.collapsed {
|
||||
& > vn-icon[icon="keyboard_arrow_down"] {
|
||||
transition: all 0.2s;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ export default class Controller {
|
|||
remember: true
|
||||
});
|
||||
}
|
||||
|
||||
submit() {
|
||||
this.loading = true;
|
||||
this.vnAuth.login(this.user, this.password, this.remember)
|
||||
|
|
@ -28,6 +29,7 @@ export default class Controller {
|
|||
throw err;
|
||||
});
|
||||
}
|
||||
|
||||
focusUser() {
|
||||
this.$.userField.select();
|
||||
this.$.userField.focus();
|
||||
|
|
|
|||
|
|
@ -1,31 +1,15 @@
|
|||
<div>
|
||||
<div
|
||||
<div
|
||||
ng-click="userPopover.show($event)"
|
||||
id="user"
|
||||
class="unselectable">
|
||||
{{$root.user.nickname}}
|
||||
</div>
|
||||
<vn-icon-button
|
||||
id="apps"
|
||||
icon="apps"
|
||||
vn-popover="apps-menu"
|
||||
translate-attr="{title: 'Applications'}">
|
||||
</vn-icon-button>
|
||||
<vn-icon-button
|
||||
</div>
|
||||
<vn-icon-button
|
||||
id="logout"
|
||||
icon="exit_to_app"
|
||||
translate-attr="{title: 'Logout'}"
|
||||
ng-click="$ctrl.vnAuth.logout()">
|
||||
</vn-icon-button>
|
||||
</div>
|
||||
<vn-menu vn-id="apps-menu">
|
||||
<ul class="modules-menu vn-pa-sm">
|
||||
<li ng-repeat="mod in ::$ctrl.modules" ui-sref="{{::mod.route.state}}">
|
||||
<vn-icon icon="{{::mod.icon || 'photo'}}"></vn-icon>
|
||||
<span translate>{{::mod.name}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</vn-menu>
|
||||
</vn-icon-button>
|
||||
<vn-user-popover
|
||||
vn-id="user-popover">
|
||||
</vn-user-popover>
|
||||
|
|
@ -2,12 +2,11 @@ import ngModule from '../../module';
|
|||
import './style.scss';
|
||||
|
||||
export default class MainMenu {
|
||||
constructor($, $http, vnAuth, vnModules) {
|
||||
constructor($, $http, vnAuth) {
|
||||
Object.assign(this, {
|
||||
$,
|
||||
$http,
|
||||
vnAuth,
|
||||
modules: vnModules.get()
|
||||
vnAuth
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -22,7 +21,7 @@ export default class MainMenu {
|
|||
});
|
||||
}
|
||||
}
|
||||
MainMenu.$inject = ['$scope', '$http', 'vnAuth', 'vnModules'];
|
||||
MainMenu.$inject = ['$scope', '$http', 'vnAuth'];
|
||||
|
||||
ngModule.component('vnMainMenu', {
|
||||
template: require('./main-menu.html'),
|
||||
|
|
|
|||
|
|
@ -4,17 +4,14 @@
|
|||
vn-main-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
|
||||
& > * {
|
||||
transition: color 250ms ease-out;
|
||||
}
|
||||
& > #user {
|
||||
flex: 1;
|
||||
vertical-align: middle;
|
||||
font-weight: bold;
|
||||
margin-right: .2em;
|
||||
|
|
@ -24,16 +21,14 @@ vn-main-menu {
|
|||
cursor: pointer;
|
||||
}
|
||||
& > .vn-button {
|
||||
font-size: 1.2em;
|
||||
height: initial;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
margin-left: .3em;
|
||||
}
|
||||
& > :hover {
|
||||
color: $color-main;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vn-popover .modules-menu {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
import ngModule from '../../module';
|
||||
import Component from 'core/lib/component';
|
||||
import './style.scss';
|
||||
|
||||
/**
|
||||
* Base class for module cards.
|
||||
*/
|
||||
export default class ModuleCard extends Component {
|
||||
constructor($element, $) {
|
||||
super($element, $);
|
||||
this.element.classList.add('vn-module-card');
|
||||
}
|
||||
|
||||
$onInit() {
|
||||
this.reload();
|
||||
}
|
||||
|
||||
/**
|
||||
* Reloads the card data. Should be implemented or overriden by child
|
||||
* classes.
|
||||
*/
|
||||
reload() {
|
||||
throw new Error('ModuleCard::reload() method not implemented');
|
||||
}
|
||||
}
|
||||
|
||||
ngModule.vnComponent('vnModuleCard', {
|
||||
controller: ModuleCard
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
@import "variables";
|
||||
|
||||
.vn-module-card {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<vn-portal slot="menu">
|
||||
<vn-left-menu></vn-left-menu>
|
||||
</vn-portal>
|
||||
<ui-view></ui-view>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import ngModule from '../../module';
|
||||
import Component from 'core/lib/component';
|
||||
import './style.scss';
|
||||
|
||||
export default class ModuleMain extends Component {
|
||||
constructor($element, $) {
|
||||
super($element, $);
|
||||
this.element.classList.add('vn-module-main');
|
||||
}
|
||||
}
|
||||
|
||||
ngModule.vnComponent('vnModuleMain', {
|
||||
template: require('./index.html'),
|
||||
controller: ModuleMain
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
@import "variables";
|
||||
|
||||
.vn-module-main {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import ngModule from '../../module';
|
||||
import Component from 'core/lib/component';
|
||||
import './style.scss';
|
||||
|
||||
/**
|
||||
|
|
@ -7,15 +8,10 @@ import './style.scss';
|
|||
* @property {String} side [left|right] The side where the menu is displayed
|
||||
* @property {Boolean} shown Whether the menu it's currently displayed (Only for small viewports)
|
||||
*/
|
||||
export default class SideMenu {
|
||||
constructor($, $element, $window, $transitions) {
|
||||
Object.assign(this, {
|
||||
$,
|
||||
$element,
|
||||
$window,
|
||||
$transitions,
|
||||
side: 'left'
|
||||
});
|
||||
export default class SideMenu extends Component {
|
||||
constructor($element, $) {
|
||||
super($element, $);
|
||||
this.side = 'left';
|
||||
}
|
||||
|
||||
$onInit() {
|
||||
|
|
@ -23,18 +19,25 @@ export default class SideMenu {
|
|||
|
||||
if (this.side == 'right') {
|
||||
this.menu.classList.add('right');
|
||||
this.app.rightMenu = this;
|
||||
this.layout.rightMenu = this;
|
||||
this.layout.element.classList.add('right-menu');
|
||||
} else {
|
||||
this.menu.classList.add('left');
|
||||
this.app.leftMenu = this;
|
||||
this.layout.leftMenu = this;
|
||||
this.layout.element.classList.add('left-menu');
|
||||
}
|
||||
}
|
||||
|
||||
$onDestroy() {
|
||||
if (this.side == 'right')
|
||||
this.app.rightMenu = null;
|
||||
else
|
||||
this.app.leftMenu = null;
|
||||
if (this.side == 'right') {
|
||||
this.layout.rightMenu = null;
|
||||
this.layout.element.classList.remove('right-menu');
|
||||
} else {
|
||||
// this.layout.leftMenu = null;
|
||||
this.layout.element.classList.remove('left-menu');
|
||||
}
|
||||
|
||||
this.hide();
|
||||
}
|
||||
|
||||
onEscape(event) {
|
||||
|
|
@ -50,6 +53,7 @@ export default class SideMenu {
|
|||
}
|
||||
|
||||
show() {
|
||||
if (this.shown) return;
|
||||
this.shown = true;
|
||||
this.handler = e => this.onEscape(e);
|
||||
this.$window.addEventListener('keydown', this.handler);
|
||||
|
|
@ -57,12 +61,12 @@ export default class SideMenu {
|
|||
}
|
||||
|
||||
hide() {
|
||||
if (!this.shown) return;
|
||||
this.$window.removeEventListener('keydown', this.handler);
|
||||
this.stateHandler();
|
||||
this.shown = false;
|
||||
}
|
||||
}
|
||||
SideMenu.$inject = ['$scope', '$element', '$window', '$transitions'];
|
||||
|
||||
ngModule.component('vnSideMenu', {
|
||||
template: require('./side-menu.html'),
|
||||
|
|
@ -72,6 +76,6 @@ ngModule.component('vnSideMenu', {
|
|||
side: '@?'
|
||||
},
|
||||
require: {
|
||||
app: '^vnApp'
|
||||
layout: '^vnLayout'
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
@import "variables";
|
||||
|
||||
vn-side-menu {
|
||||
display: block;
|
||||
}
|
||||
vn-side-menu > .menu {
|
||||
display: block;
|
||||
position: fixed;
|
||||
|
|
@ -10,17 +13,17 @@ vn-side-menu > .menu {
|
|||
background-color: $color-bg-panel;
|
||||
box-shadow: 0 .1em .2em $color-shadow;
|
||||
overflow: auto;
|
||||
top: $topbar-height;
|
||||
|
||||
&.left {
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
&.right {
|
||||
right: 0;
|
||||
top: $topbar-height;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
top: 0;
|
||||
transition: transform 200ms ease-out;
|
||||
z-index: 15;
|
||||
|
||||
|
|
@ -28,6 +31,7 @@ vn-side-menu > .menu {
|
|||
transform: translateZ(0) translateX(-$menu-width);
|
||||
}
|
||||
&.right {
|
||||
top: 0;
|
||||
transform: translateZ(0) translateX($menu-width);
|
||||
}
|
||||
&.shown {
|
||||
|
|
|
|||
|
|
@ -59,4 +59,5 @@
|
|||
.vn-popup .summary {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,15 +2,8 @@
|
|||
|
||||
vn-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $color-font-dark;
|
||||
box-sizing: border-box;
|
||||
background-color: $color-header;
|
||||
align-items: center;
|
||||
|
||||
& > header {
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1 @@
|
|||
import ngModule from '../../module';
|
||||
import './style.scss';
|
||||
|
||||
ngModule.component('vnTopbar', {
|
||||
template: require('./topbar.html'),
|
||||
transclude: true
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
font-size: 60px;
|
||||
border-radius: 50%;
|
||||
color: $color-font-dark;
|
||||
background: $color-secondary;
|
||||
background: $color-marginal;
|
||||
padding: .1em;
|
||||
}
|
||||
& > div {
|
||||
|
|
|
|||
|
|
@ -62,9 +62,10 @@ export function config($translatePartialLoaderProvider, $httpProvider, $compileP
|
|||
$translatePartialLoaderProvider.addPart(appName);
|
||||
$httpProvider.interceptors.push('vnInterceptor');
|
||||
|
||||
// $compileProvider.debugInfoEnabled(false);
|
||||
$compileProvider.commentDirectivesEnabled(false);
|
||||
$compileProvider.cssClassDirectivesEnabled(false);
|
||||
$compileProvider
|
||||
.debugInfoEnabled(false)
|
||||
.commentDirectivesEnabled(false)
|
||||
.cssClassDirectivesEnabled(false);
|
||||
}
|
||||
ngModule.config(config);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,41 +1,23 @@
|
|||
import ngModule from './module';
|
||||
import getMainRoute from 'core/lib/get-main-route';
|
||||
|
||||
function loader(moduleName) {
|
||||
load.$inject = ['vnModuleLoader'];
|
||||
function load(moduleLoader) {
|
||||
return moduleLoader.load(moduleName);
|
||||
}
|
||||
return load;
|
||||
}
|
||||
|
||||
config.$inject = ['$stateProvider', '$urlRouterProvider'];
|
||||
function config($stateProvider, $urlRouterProvider) {
|
||||
$urlRouterProvider.otherwise('/');
|
||||
|
||||
$stateProvider.state('home', {
|
||||
url: '/',
|
||||
template: '<vn-home></vn-home>',
|
||||
description: 'Home'
|
||||
});
|
||||
$stateProvider.state('login', {
|
||||
$stateProvider
|
||||
.state('login', {
|
||||
url: '/login?continue',
|
||||
template: '<vn-login></vn-login>',
|
||||
description: 'Login'
|
||||
});
|
||||
|
||||
function getParams(route) {
|
||||
let params = '';
|
||||
let temporalParams = [];
|
||||
|
||||
if (!route.params)
|
||||
return params;
|
||||
|
||||
Object.keys(route.params).forEach(key => {
|
||||
temporalParams.push(`${key} = "${route.params[key]}"`);
|
||||
});
|
||||
return temporalParams.join(' ');
|
||||
description: 'Login',
|
||||
views: {
|
||||
login: {template: '<vn-login></vn-login>'}
|
||||
}
|
||||
})
|
||||
.state('home', {
|
||||
url: '/',
|
||||
description: 'Home',
|
||||
template: '<vn-home></vn-home>'
|
||||
});
|
||||
|
||||
for (let file in window.routes) {
|
||||
let routeFile = window.routes[file];
|
||||
|
|
@ -68,5 +50,26 @@ function config($stateProvider, $urlRouterProvider) {
|
|||
$stateProvider.state(route.state, configRoute);
|
||||
}
|
||||
}
|
||||
|
||||
function getParams(route) {
|
||||
let params = '';
|
||||
let temporalParams = [];
|
||||
|
||||
if (!route.params)
|
||||
return params;
|
||||
|
||||
Object.keys(route.params).forEach(key => {
|
||||
temporalParams.push(`${key} = "${route.params[key]}"`);
|
||||
});
|
||||
return temporalParams.join(' ');
|
||||
}
|
||||
|
||||
function loader(moduleName) {
|
||||
load.$inject = ['vnModuleLoader'];
|
||||
function load(moduleLoader) {
|
||||
return moduleLoader.load(moduleName);
|
||||
}
|
||||
return load;
|
||||
}
|
||||
}
|
||||
ngModule.config(config);
|
||||
|
|
|
|||
|
|
@ -123,25 +123,14 @@ html [scrollable] {
|
|||
font-size: 0.7em
|
||||
}
|
||||
}
|
||||
[compact], .compact {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: $width-md;
|
||||
}
|
||||
vn-empty-rows {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 1.5em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* XXX: Deprecated, use classes with text prefix */
|
||||
|
||||
[color-main] {
|
||||
color: $color-main;
|
||||
}
|
||||
[color-secondary] {
|
||||
color: $color-secondary;
|
||||
[color-marginal] {
|
||||
color: $color-marginal;
|
||||
}
|
||||
[uppercase], .uppercase {
|
||||
text-transform: uppercase;
|
||||
|
|
|
|||
|
|
@ -84,14 +84,17 @@
|
|||
</vn-horizontal>
|
||||
</vn-card>
|
||||
<vn-button-bar>
|
||||
<vn-submit
|
||||
label="Save"
|
||||
vn-acl="deliveryBoss">
|
||||
</vn-submit>
|
||||
<vn-button
|
||||
label="Undo changes"
|
||||
ng-if="watcher.dataChanged()"
|
||||
ng-click="watcher.loadOriginalData()">
|
||||
</vn-button>
|
||||
</vn-button-bar>
|
||||
<vn-submit
|
||||
icon="save"
|
||||
vn-acl="deliveryBoss"
|
||||
vn-tooltip="Save"
|
||||
class="round"
|
||||
fixed-bottom-right>
|
||||
</vn-submit>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<vn-side-menu side="left">
|
||||
<vn-portal slot="menu">
|
||||
<vn-zone-descriptor zone="$ctrl.zone"></vn-zone-descriptor>
|
||||
<vn-left-menu></vn-left-menu>
|
||||
</vn-side-menu>
|
||||
<div ui-view></div>
|
||||
<vn-left-menu source="card"></vn-left-menu>
|
||||
</vn-portal>
|
||||
<ui-view></ui-view>
|
||||
|
|
|
|||
|
|
@ -1,38 +1,21 @@
|
|||
import ngModule from '../module';
|
||||
import ModuleCard from 'salix/components/module-card';
|
||||
|
||||
class Controller {
|
||||
constructor($http, $stateParams) {
|
||||
this.$http = $http;
|
||||
this.$stateParams = $stateParams;
|
||||
}
|
||||
|
||||
$onInit() {
|
||||
this.getCard();
|
||||
}
|
||||
|
||||
getCard() {
|
||||
class Controller extends ModuleCard {
|
||||
reload() {
|
||||
let filter = {
|
||||
include: {
|
||||
relation: 'agencyMode',
|
||||
scope: {fields: ['name']}
|
||||
}
|
||||
};
|
||||
let json = encodeURIComponent(JSON.stringify(filter));
|
||||
let query = `Zones/${this.$stateParams.id}?filter=${json}`;
|
||||
this.$http.get(query).then(res => {
|
||||
if (res.data)
|
||||
this.zone = res.data;
|
||||
});
|
||||
}
|
||||
|
||||
reload() {
|
||||
this.getCard();
|
||||
this.$http.get(`Zones/${this.$params.id}`, {filter})
|
||||
.then(res => this.zone = res.data);
|
||||
}
|
||||
}
|
||||
|
||||
Controller.$inject = ['$http', '$stateParams'];
|
||||
|
||||
ngModule.component('vnZoneCard', {
|
||||
ngModule.vnComponent('vnZoneCard', {
|
||||
template: require('./index.html'),
|
||||
controller: Controller
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,35 +1,26 @@
|
|||
import './index.js';
|
||||
|
||||
describe('Agency Component vnZoneCard', () => {
|
||||
let $scope;
|
||||
let controller;
|
||||
let $httpBackend;
|
||||
let $stateParams;
|
||||
let data = {id: 1, name: 'fooName'};
|
||||
|
||||
beforeEach(ngModule('agency'));
|
||||
|
||||
beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_) => {
|
||||
beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $stateParams) => {
|
||||
$httpBackend = _$httpBackend_;
|
||||
$scope = $rootScope.$new();
|
||||
$stateParams = {id: 1};
|
||||
controller = $componentController('vnZoneCard', {$scope, $stateParams});
|
||||
|
||||
let $element = angular.element('<div></div>');
|
||||
controller = $componentController('vnZoneCard', {$element});
|
||||
|
||||
$stateParams.id = data.id;
|
||||
$httpBackend.whenRoute('GET', 'Zones/:id').respond(data);
|
||||
}));
|
||||
|
||||
describe('getCard()', () => {
|
||||
it(`should make a query and define zone property`, () => {
|
||||
let filter = {
|
||||
include: {
|
||||
relation: 'agencyMode',
|
||||
scope: {fields: ['name']}
|
||||
}
|
||||
};
|
||||
let json = encodeURIComponent(JSON.stringify(filter));
|
||||
$httpBackend.expectGET(`Zones/1?filter=${json}`).respond({id: 1});
|
||||
controller.getCard();
|
||||
it('should request data and set it on the controller', () => {
|
||||
controller.reload();
|
||||
$httpBackend.flush();
|
||||
|
||||
expect(controller.zone).toEqual({id: 1});
|
||||
});
|
||||
expect(controller.zone).toEqual(data);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -5,8 +5,10 @@
|
|||
form="form"
|
||||
save="post">
|
||||
</vn-watcher>
|
||||
<div class="content-block">
|
||||
<form name="form" vn-http-submit="$ctrl.onSubmit()" compact>
|
||||
<form
|
||||
name="form"
|
||||
vn-http-submit="$ctrl.onSubmit()"
|
||||
class="vn-w-md">
|
||||
<vn-card class="vn-pa-lg">
|
||||
<vn-horizontal>
|
||||
<vn-textfield
|
||||
|
|
@ -57,7 +59,7 @@
|
|||
<vn-input-number
|
||||
vn-one
|
||||
label="Price"
|
||||
model="$ctrl.zone.price"
|
||||
ng-model="$ctrl.zone.price"
|
||||
min="0"
|
||||
step="0.01"
|
||||
rule>
|
||||
|
|
@ -65,7 +67,7 @@
|
|||
<vn-input-number
|
||||
vn-one
|
||||
label="Bonus"
|
||||
model="$ctrl.zone.bonus"
|
||||
ng-model="$ctrl.zone.bonus"
|
||||
min="0"
|
||||
step="0.01"
|
||||
rule>
|
||||
|
|
@ -75,9 +77,10 @@
|
|||
<vn-check ng-model="$ctrl.zone.isVolumetric" label="Volumetric"></vn-check>
|
||||
</vn-horizontal>
|
||||
</vn-card>
|
||||
<vn-button-bar>
|
||||
<vn-submit label="Create"></vn-submit>
|
||||
<vn-button ui-sref="zone.index" label="Cancel"></vn-button>
|
||||
</vn-button-bar>
|
||||
</form>
|
||||
</div>
|
||||
<vn-submit
|
||||
icon="check"
|
||||
vn-tooltip="Create"
|
||||
class="round"
|
||||
fixed-bottom-right>
|
||||
</vn-submit>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -32,9 +32,12 @@
|
|||
</vn-textfield>
|
||||
</vn-horizontal>
|
||||
</vn-card>
|
||||
<vn-button-bar>
|
||||
<vn-submit label="Query"></vn-submit>
|
||||
</vn-button-bar>
|
||||
<vn-submit
|
||||
icon="search"
|
||||
vn-tooltip="Query"
|
||||
class="round"
|
||||
fixed-bottom-right>
|
||||
</vn-submit>
|
||||
</form>
|
||||
<vn-zone-calendar
|
||||
data="data"
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
<div class="main-with-right-menu">
|
||||
<vn-zone-calendar
|
||||
<vn-zone-calendar
|
||||
id="calendar"
|
||||
data="data"
|
||||
on-selection="$ctrl.onSelection($days, $type, $weekday, $data)"
|
||||
class="vn-w-md">
|
||||
</vn-zone-calendar>
|
||||
</div>
|
||||
</vn-zone-calendar>
|
||||
<vn-side-menu side="right">
|
||||
<div class="vn-pa-md">
|
||||
<h6
|
||||
|
|
@ -35,16 +33,14 @@
|
|||
</h6>
|
||||
<vn-data-viewer
|
||||
data="data.events"
|
||||
is-loading="!data.events"
|
||||
class="vn-w-sm">
|
||||
<div class="vn-list">
|
||||
is-loading="!data.events">
|
||||
<div class="vn-list separated">
|
||||
<a
|
||||
ng-repeat="row in data.events"
|
||||
translate-attr="{title: 'Edit'}"
|
||||
ng-click="$ctrl.onEditClick(row, $event)"
|
||||
class="vn-list-item">
|
||||
<vn-horizontal>
|
||||
<vn-one>
|
||||
class="vn-item">
|
||||
<vn-item-section>
|
||||
<div
|
||||
ng-if="::row.from && !row.to"
|
||||
class="vn-mb-sm">
|
||||
|
|
@ -79,15 +75,14 @@
|
|||
label="Bonus"
|
||||
value="{{::row.bonus | currency:'EUR':2}}">
|
||||
</vn-label-value>
|
||||
</vn-one>
|
||||
<vn-horizontal class="buttons">
|
||||
</vn-item-section>
|
||||
<vn-item-section side>
|
||||
<vn-icon-button
|
||||
icon="delete"
|
||||
translate-attr="{title: 'Delete'}"
|
||||
ng-click="$ctrl.onDeleteClick(row.id, $event)">
|
||||
</vn-icon-button>
|
||||
</vn-horizontal>
|
||||
</vn-horizontal>
|
||||
</vn-item-section>
|
||||
</a>
|
||||
</div>
|
||||
</vn-data-viewer>
|
||||
|
|
|
|||
|
|
@ -6,19 +6,13 @@
|
|||
data="zones"
|
||||
auto-load="true">
|
||||
</vn-crud-model>
|
||||
<div>
|
||||
<vn-card class="vn-w-sm vn-pa-md">
|
||||
<vn-searchbar
|
||||
panel="vn-zone-search-panel"
|
||||
<vn-auto-search
|
||||
model="model"
|
||||
expr-builder="$ctrl.exprBuilder(param, value)"
|
||||
info="Search zone by id or name"
|
||||
vn-focus>
|
||||
</vn-searchbar>
|
||||
</vn-card>
|
||||
<vn-data-viewer
|
||||
expr-builder="$ctrl.exprBuilder(param, value)">
|
||||
</vn-auto-search>
|
||||
<vn-data-viewer
|
||||
model="model"
|
||||
class="vn-w-md vn-mt-md vn-mb-xl">
|
||||
class="vn-w-md vn-mb-xl">
|
||||
<vn-card>
|
||||
<vn-table model="model">
|
||||
<vn-thead>
|
||||
|
|
@ -35,7 +29,7 @@
|
|||
<vn-tr
|
||||
ng-repeat="zone in zones"
|
||||
ui-sref="zone.card.location({id: zone.id})"
|
||||
class="clickable searchResult">
|
||||
class="clickable search-result">
|
||||
<vn-td number>{{::zone.id}}</vn-td>
|
||||
<vn-td expand>{{::zone.name}}</vn-td>
|
||||
<vn-td>{{::zone.agencyMode.name}}</vn-td>
|
||||
|
|
@ -61,8 +55,7 @@
|
|||
</vn-tbody>
|
||||
</vn-table>
|
||||
</vn-card>
|
||||
</vn-data-viewer>
|
||||
</div>
|
||||
</vn-data-viewer>
|
||||
<vn-popup vn-id="summary">
|
||||
<vn-zone-summary zone="$ctrl.selectedZone"></vn-zone-summary>
|
||||
</vn-popup>
|
||||
|
|
|
|||
|
|
@ -3,16 +3,17 @@
|
|||
url="Zones/{{$ctrl.$params.id}}/getLeaves"
|
||||
filter="::$ctrl.filter">
|
||||
</vn-crud-model>
|
||||
<vn-portal slot="topbar">
|
||||
<vn-searchbar></vn-searchbar>
|
||||
</vn-portal>
|
||||
<vn-auto-search
|
||||
on-search="$ctrl.onSearch($params)">
|
||||
</vn-auto-search>
|
||||
<div class="vn-w-md">
|
||||
<vn-card class="vn-pa-md">
|
||||
<vn-searchbar
|
||||
auto-load="false"
|
||||
on-search="$ctrl.onSearch($params)"
|
||||
vn-focus>
|
||||
</vn-searchbar>
|
||||
</vn-card>
|
||||
<vn-card class="vn-pa-lg vn-mt-md">
|
||||
<vn-treeview vn-id="treeview" root-label="Locations"
|
||||
<vn-card class="vn-pa-lg">
|
||||
<vn-treeview
|
||||
vn-id="treeview"
|
||||
root-label="Locations"
|
||||
fetch-func="$ctrl.onFetch($item)"
|
||||
sort-func="$ctrl.onSort($a, $b)">
|
||||
<vn-check
|
||||
|
|
|
|||
|
|
@ -3,6 +3,10 @@ import Component from 'core/lib/component';
|
|||
import './style.scss';
|
||||
|
||||
class Controller extends Component {
|
||||
$postLink() {
|
||||
this.onSearch();
|
||||
}
|
||||
|
||||
onSearch(params) {
|
||||
this.$.model.applyFilter({}, params).then(() => {
|
||||
const data = this.$.model.data;
|
||||
|
|
@ -12,9 +16,8 @@ class Controller extends Component {
|
|||
|
||||
onFetch(item) {
|
||||
const params = item ? {parentId: item.id} : null;
|
||||
return this.$.model.applyFilter({}, params).then(() => {
|
||||
return this.$.model.data;
|
||||
});
|
||||
return this.$.model.applyFilter({}, params)
|
||||
.then(() => this.$.model.data);
|
||||
}
|
||||
|
||||
onSort(a, b) {
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@
|
|||
|
||||
vn-treeview-child {
|
||||
.content > .vn-check:not(.indeterminate) {
|
||||
color: $color-main;
|
||||
color: $color-button;
|
||||
|
||||
& > .btn {
|
||||
border-color: $color-main;
|
||||
border-color: $color-button;
|
||||
}
|
||||
}
|
||||
.content > .vn-check.checked {
|
||||
color: $color-main;
|
||||
color: $color-button;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +1,11 @@
|
|||
<vn-main-block>
|
||||
<vn-side-menu side="left">
|
||||
<ul class="menu">
|
||||
<li>
|
||||
<a translate ui-sref="zone.index">Zones</a>
|
||||
</li>
|
||||
<li>
|
||||
<a translate ui-sref="zone.deliveryDays">Delivery days</a>
|
||||
</li>
|
||||
</ul>
|
||||
</vn-side-menu>
|
||||
<div class="content-block" ui-view></div>
|
||||
</vn-main-block>
|
||||
|
||||
<vn-portal slot="topbar">
|
||||
<vn-searchbar
|
||||
search-state="zone.index"
|
||||
panel="vn-zone-search-panel"
|
||||
info="Search zone by id or name">
|
||||
</vn-searchbar>
|
||||
</vn-portal>
|
||||
<vn-portal slot="menu">
|
||||
<vn-left-menu></vn-left-menu>
|
||||
</vn-portal>
|
||||
<ui-view></ui-view>
|
||||
|
|
@ -1,6 +1,9 @@
|
|||
import ngModule from '../module';
|
||||
import './style.scss';
|
||||
import ModuleMain from 'salix/components/module-main';
|
||||
|
||||
ngModule.component('vnZone', {
|
||||
export default class Zone extends ModuleMain {}
|
||||
|
||||
ngModule.vnComponent('vnZone', {
|
||||
controller: Zone,
|
||||
template: require('./index.html')
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
@import "effects";
|
||||
|
||||
vn-zone {
|
||||
ul.menu {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
padding-top: $spacing-md;
|
||||
margin: 0;
|
||||
font-size: inherit;
|
||||
|
||||
& > li > a {
|
||||
@extend %clickable;
|
||||
display: block;
|
||||
color: inherit;
|
||||
padding: .6em 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue