I'm struggling with ui-router configuration which will define basic CRUD in the application.
I need to be able to add, remove, edit and search for, say, clients. Quite basic task.
Main page with url "/clients/" shows [Add Client] button and Keyword input field for search with [Search] button.
Once I enter something into search field and press the button I should navigate to "/clients/search/:keyword", but essentially I'll stay on the same page and search results will be loaded below the input field.
That's quite easy to implement, but interesting starts when I need to edit a client.
When I click on one of the rows from search results I expect a popup to be show with client information/form. At the same time, application should navigate to certain URL, so I can use that URL to share with someone, or basically use back button in my browser. So application should navigate to "/clients/edit/:clientId". Make total sense, right?
Similar should happen when I try to add a new client. Application navigates to "/clients/add" or "/clients/edit/0".
How would your organise routes for that? Obovioulsy, Sticky routes and Deep State Redirect are required here. So I managed to organise it this way so far:
function clientStateConfig ($stateProvider, $rootScope) {
console.log('Client State :: init');
$stateProvider.state('main.clients', {
url: '/clients',
skipAuthorisation: true,
controller: 'ClientStateController as clientState',
template: clientStateTemplate
}).state('main.clients.create', {
url: '/create',
skipAuthorisation: true,
views: {
'modal': {
template: '<div ui-view></div>'
}
},
onEnter: showClientModal
}).state('main.clients.edit', {
url: '/edit/:clientId',
skipAuthorisation: true,
views: {
'modal': {
template: '<div ui-view></div>'
}
},
onEnter: showClientModal
}).state('main.clients.search', {
url: '/search/:keyword',
skipAuthorisation: true,
deepStateRedirect: true,
sticky: true,
views: {
'search': {
template: clientSearchStateTemplate,
controller: 'ClientSearchStateController as clientSearch'
}
}
});
};
function showClientModal ($uibModal, $previousState, $rootScope) {
$previousState.memo('modalInvoker'); // remember the previous state with memoName 'modalInvoker'
let modal = $uibModal.open({
template: clientModalTemplate,
backdrop: 'static',
controller: 'ClientModalController as clientModal'
});
}
ClientState template:
<h1>Clients</h1>
<div ui-view="search"></div>
<div ui-view="modal"></div>
Search template: {{client}}
Modal and controllers code are not that relevant I think. So the first and main problem is - when I navigate to "/clients/" I don't, obviously, see the search field, because I need to go to "/clients/search/" instead. So clients route should always redirect to search. But if it always redirects to search - here comes the problem with popups when user enters "/clients/edit/123". It shouldn't navigate in that case.
Other way: I can put search field into root ClientState template, and trigger $state.go('main.clients.search') on search button from there. Which would be ideal. But the problem will appear when user enters url "/clients/search/superkeyword" directly form the browser, and ClientState won't have access to that keyword state param as it is child state param. So keyword input field will be blank.
I completely lost and confused with. How would you solve that?
I am a student and very new to JS, like this is my first project dealing with it. With that being said, please excuse how juvenile my coding may seem to you experts. I followed the instructions of my ...
I am a student and very new to JS, like this is my first project dealing with it. With that being said, please excuse how juvenile my coding may seem to you experts. I followed the instructions of my ...
I'm trying to iterate over a simple array using recursion. For this specific case, I'm trying to recreate .map() using recursion (without using .map()!. I currently am only pushing the last element ...
I'm trying to iterate over a simple array using recursion. For this specific case, I'm trying to recreate .map() using recursion (without using .map()!. I currently am only pushing the last element ...
Consider a matrix B= [[6,4,1,2], [5,3,9,7],[1,3,2,1]];. B is a matrix with three rows and four columns. I want to treat it as an array or a vector, namely B1=[6,4,1,2,5,3,9,7,1,3,2,1]. Moreover, I ...
Consider a matrix B= [[6,4,1,2], [5,3,9,7],[1,3,2,1]];. B is a matrix with three rows and four columns. I want to treat it as an array or a vector, namely B1=[6,4,1,2,5,3,9,7,1,3,2,1]. Moreover, I ...
I have some code running in an html page that is calling a function that exists on window.external. The code works: SomeCode.js (lives in somePage.html): window.external['someFunction'](); However, ...
I have some code running in an html page that is calling a function that exists on window.external. The code works: SomeCode.js (lives in somePage.html): window.external['someFunction'](); However, ...