Hi I wondering is it possible set param in ui-router data which from resolve. This example doesen't work, what's wrong ?
resolve : {
userItem : [function () {
return "name";
}]
},
params: {
title: $resolve.userItem ,
},
How about something like this
//...
resolve: {
userItem: function($stateParams){
$stateParams.title = "whatever";
return {data: "whatever"};
}
},
params:{
title:null
}
//...
Related
I´m building a e-commerce site using angular1 and ui-router (1.0.0.beta3).
But I´m not sure how to setup this up.
This is what I have in mind.
const home = {
name: 'home',
url: '/',
views: {
header: 'header',
navbar: 'navbar',
sidenav: 'sideNav',
content: 'home'
}
};
const category = {
name: 'home.category',
url: '/{url}',
views: {
content: 'categoryPage'
}
};
const product = {
name: 'home.category.product',
url: '/{url}',
views: {
content: 'productPage'
}
};
we can´t control links that come from the cms it self, "/about-us" and "/category-x" can be a category or a cms-page so we added a route state where we can resolve the entity_type (product, category or cms-page)
.state('home.router', {
url: '/{url}?:{page:int}&:{limit:int}&:id',
params: {
limit: null,
category: null,
page: {
dynamic: true
},
id: {
dynamic: true
}
},
templateProvider: ['urlRewrite', function(urlRewrite) {
switch (urlRewrite.entity_type) {
case 'category':
return '<category-page limit="$stateParams.limit" page="$stateParams.page" category="{name: $resolve.urlRewrite.request_path, id: $resolve.urlRewrite.entity_id}"/>';
case 'product':
return '<product-page id="$resolve.urlRewrite.entity_id"/>';
case 'cms-page':
default:
return '<page url="$resolve.urlRewrite.target_path" />';
}
}],
resolve: {
urlRewrite: ['UrlRewrite', '$stateParams', function(UrlRewrite, $stateParams) {
return UrlRewrite.getUrlRewrite($stateParams.url);
}]
}
});
the problem is that category and route url patterns collide.
and we can´t really use parent/child inherits etc etc..
How should we go about resolving "unknown" urls?
Plunkr: http://plnkr.co/edit/gXzDO5j3arP8QCrpwL9k?p=preview
Let me provide you with the sample snippet. It will give you the idea.
appName.config(['$stateProvider','$urlRouterProvider', '$httpProvider' ,function ($stateProvider, $urlRouterProvider, $httpProvider) {
// $urlRouterProvider.otherwise('/login');
$urlRouterProvider.otherwise(function($injector, $location){
var state = $injector.get('$state');
var $localStorage = $injector.get('$localStorage');
if($localStorage.user){
return '/dashboard'
}else {
return '/login'
}
});
$stateProvider
.state('login', {
url: '/login',
views: {
'': {
templateProvider: function ($templateFactory, $localStorage) {
return $templateFactory.fromUrl(asset_path('angular/templates/base/login.html'));
},
controller: 'LoginCtrl'
}
}
})
$httpProvider.interceptors.push('Interceptor');
}]);
I have a basic schema for mutating some data which looks like
const schema = new graphql.GraphQLSchema({
mutation: new graphql.GraphQLObjectType({
name: 'Remove',
fields: {
removeUser: {
type: userType,
args: {
id: { type: graphql.GraphQLString }
},
resolve(_, args) {
const removedData = data[args.id];
delete data[args.id];
return removedData;
},
},
},
})
});
Looking around google I cant find a clear example of the example query which needs to be sent to mutate.
I have tried
POST -
localhost:3000/graphql?query={removeUser(id:"1"){id, name}}
This fails with error:
{
"errors": [
{
"message": "Cannot query field \"removeUser\" on type \"Query\".",
"locations": [
{
"line": 1,
"column": 2
}
]
}
]
}
In order to post requests from the front-end application it is recommended to use apollo-client package. Say i wanted to validate a user login information:
import gql from 'graphql-tag';
import ApolloClient, {createNetworkInterface} from 'apollo-client';
client = new ApolloClient({
networkInterface: createNetworkInterface('http://localhost:3000/graphql')
});
remove(){
client.mutate({
mutation: gql`
mutation remove(
$id: String!
) {
removeUser(
id: $id
){
id,
name
}
}
`,
variables: {
id: "1"
}
}).then((graphQLResult)=> {
const { errors, data } = graphQLResult;
if(!errors && data){
console.log('removed successfully ' + data.id + ' ' + data.name);
}else{
console.log('failed to remove');
}
})
}
More information about apollo-client can be found here
Have you tried using graphiql to query and mutate your schema?
If you'd like to create a POST request manually you might wanna try to struct it in the right form:
?query=mutation{removeUser(id:"1"){id, name}}
(Haven't tried POSTing myself, let me know if you succeeded, i structured this out of the url when using graphiql)
You have to explicitly label your mutation as such, i.e.
mutation {
removeUser(id: "1"){
id,
name
}
}
In GraphQL, if you leave out the mutation keyword, it's just a shorthand for sending a query, i.e. the execution engine will interpret it as
query {
removeUser(id: "1"){
id,
name
}
}
cf. Section 2.3 of the GraphQL Specification
const client = require("../common/gqlClient")();
const {
createContestParticipants,
} = require("../common/queriesAndMutations");
const gql = require("graphql-tag");
const createPartpantGql = async (predictObj) => {
try {
let resp = await client.mutate({
mutation: gql(createContestParticipants),
variables: {
input: {
...predictObj,
},
},
});
let contestParticipantResp = resp.data.createContestParticipants;
return {
success: true,
data: contestParticipantResp,
};
} catch (err) {
console.log(err.message)
console.error(`Error creating the contest`);
return {
success: false,
message: JSON.stringify(err.message),
};
}
};
I have a page showing a list of contact and clicking on one of the contacts in the view should switch to detail state as below:
dashboard-contacts-controller.js
vm.viewContact = function(contactId) {
console.log("Load contact " + contactId);
$state.go("app.dashboards_contact", {"id": contactId});
}
contacts-module.js
.state('app.dashboards_contact', {
url: '/dashboard-contact/:id',
views: {
'content#app': {
templateUrl: 'app/main/apps/dashboards/contacts/about/about.html',
controller: 'DashboardContactController as vm'
}
},
resolve: {
contact: ['DashboardContactsDataService', function($stateParams, DashboardContactsDataService) {
console.log($stateParams.id);
return DashboardContactsDataService.get($stateParams.id);
}
]
},
bodyClass: 'dashboard-contact'
});
$stateParams.id in resolve is always undefined.
You didnt inject $stateParams in resolve. Shouldn't it be
resolve: {
contact: ['$stateParams', DashboardContactsDataService', function($stateParams, DashboardContactsDataService) {
console.log($stateParams.id);
return DashboardContactsDataService.get($stateParams.id);
}
]
},
I'm creating SAPUI5 sample app with simple routing (SAPUI5/OpenUI5 v.1.22).
My main problem, which I'm trying to understand, why URL pattern changes and the onInit of target view controller is fired, but after nothing happens (onAfterRendering not fired), and I'm able to go to another page only after page reload.
Routing setup. Compontent.js, where router is initialized, is structured in following way:
sap.ui.define([
"sap/ui/core/UIComponent"
], function (UIComponent) {
return UIComponent.extend("sge.apps.app.Component", {
metadata:{
name : "Sample App",
version : "1.0",
includes : [],
dependencies : {
libs : ["sap.m", "sap.ui.layout"],
components : []
},
rootView: "sge.apps.app.view.App",
config: {
resourceBundle: "i18n/i18n.properties"
},
routing : {
config : {
routerClass : sap.ui.core.routing.Router,
viewType : "XML",
viewPath : "sge.apps.app.view",
targetControl: "app",
targetAggregation: "pages",
transition: "slide",
clearTarget : false,
bypassed: {
target: "notFound"
}
},
routes: [{
pattern: "",
name: "appHome",
view: "Home"
},{
pattern : ":all*:",
name : "catchallDetail",
view : "NotFound",
transition : "show"
},{
pattern: "notFound",
name: "appNotFound",
view: "NotFound",
transition : "show"
}]
}
},
init : function() {
UIComponent.prototype.init.apply(this, arguments);
var mConfig = this.getMetadata().getConfig();
// always use absolute paths relative to our own component
// (relative paths will fail if running in the Fiori Launchpad)
var rootPath = jQuery.sap.getModulePath("sge.apps.app");
// set i18n model
var i18nModel = new sap.ui.model.resource.ResourceModel({
bundleUrl : [rootPath, mConfig.resourceBundle].join("/")
});
this.setModel(i18nModel, "i18n");
// set device model
var deviceModel = new sap.ui.model.json.JSONModel({
isTouch : sap.ui.Device.support.touch,
isNoTouch : !sap.ui.Device.support.touch,
isPhone : sap.ui.Device.system.phone,
isNoPhone : !sap.ui.Device.system.phone,
listMode : sap.ui.Device.system.phone ? "None" : "SingleSelectMaster",
listItemType : sap.ui.Device.system.phone ? "Active" : "Inactive"
});
deviceModel.setDefaultBindingMode("OneWay");
this.setModel(deviceModel, "device");
this.getRouter().initialize();
}
});
});
I have Home.controller.js of the Home.view.xml from where I try to navigate to another view, by pressing the button with event onDisplayNotFound:
sap.ui.define([
"sge/apps/app/controller/BaseController"
], function (BaseController) {
"use strict";
return BaseController.extend("sge.apps.app.controller.Home", {
onDisplayNotFound : function (oEvent) {
this.getRouter().navTo("appNotFound");
}
});
});
BaseController.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/core/routing/History"
], function (Controller, History) {
"use strict";
return Controller.extend("sge.apps.app.controller.BaseController", {
getRouter: function () {
return sap.ui.core.UIComponent.getRouterFor(this);
},
onNavBack: function (oEvent) {
var oHistory, sPreviousHash;
oHistory = History.getInstance();
sPreviousHash = oHistory.getPreviousHash();
if(sPreviousHash !== undefined) {
window.history.go(-1);
} else {
this.getRouter().navTo("appHome", {}, true /*no history*/);
}
}
});
});
NotFound.controller.js of target view NotFound.view.xml:
sap.ui.define([
"sge/apps/app/controller/BaseController"
], function (BaseController) {
"use strict";
return BaseController.extend("sge.apps.app.controller.NotFound", {
onInit: function () {
console.log("onInit NotFound.view.xml");
},
onAfterRendering: function () {
console.log("onAfterRendering NotFound.view.xml");
}
});
});
I had the same problem and I solved by adding this line in the configuration of the routing :
"routerClass" : "sap.m.routing.Router",
And it has worked perfectly navigation.
"routing": {
"config": {
"routerClass" : "sap.m.routing.Router",
"viewPath": "es.seidor.view",
"controlId": "App",
"async" : "true",
"clearTarget" : "true"
}
sap.ui.define is a feature of UI5 v1.30
Either update the version you're using to 1.30.x or remove the sap.ui.define code and replace it with code that works with the earlier versions.
Pre-sap.ui.define code looks something like this:
jQuery.sap.require("sap.m.Button");
//use jQuery.sap.require to require any controls or other files
sap.ui.controller("my.controller", {
onInit: function(){
//your code here
//doing something with sap.m.Button, won't work without the require
//var oBtn = new sap.m.Button("myBtn", {text: "Click me"});
},
onAfterRendering: function(){
//more code
}
});
Try that.
The solution is simple, just use some part of TDG best practice:
Create the file MyRouter.js
sap.ui.define([
"sap/ui/core/routing/Router",
"sap/m/routing/RouteMatchedHandler"
], function (Router, RouteMatchedHandler) {
"use strict";
return Router.extend("sge.apps.notespese.MyRouter", {
constructor : function() {
sap.ui.core.routing.Router.apply(this, arguments);
this._oRouteMatchedHandler = new sap.m.routing.RouteMatchedHandler(this);
},
destroy : function() {
sap.ui.core.routing.Router.prototype.destroy.apply(this, arguments);
this._oRouteMatchedHandler.destroy();
}
});
});
Inject it in your Component.js, as follows:
sap.ui.define([
"sap/ui/core/UIComponent",
"sge/apps/notespese/MyRouter"
], function (UIComponent, MyRouter) {
"use strict";
return UIComponent.extend("sge.apps.notespese.Component", {
...
In Component metadata section replace
routing : {
config : {
routerClass : sap.ui.core.routing.Router,
with
routing : {
config : {
routerClass : sge.apps.notespese.MyRouter,
Hope to do not forget other this question related things.
There are two popular and similar questions to mine, but the difference is that those only have to worry about deep populating associations for one object, whereas mine is about N objects.
Suppose I have 3 models defined as such (left out some attributes for clarity):
identity: 'room',
attributes: {
LocationId : { type: 'integer',
primaryKey: true,
required: true,
autoIncrement: true },
DisplayName : { type: 'string',
unique: true },
FloorId : { model: 'Floor' }
}
identity: 'floor',
attributes: {
FloorId : { type: 'integer',
primaryKey: true },
FloorName : { type: 'string' },
BuildingId : { model: 'Building' },
rooms: {collection:'room', via:'FloorId'}
}
identity: 'building',
attributes: {
BuildingId : { type: 'integer',
primaryKey: true },
BuildingName : { type: 'string' },
floors: {collection:'floor', via:'BuildingId'}
}
The end goal is to have an array of objects that has this basic structure:
[{
"LocationId": 555,
"DisplayName": 'SomeCoolName',
"Floor" : {
"FloorId": 1337,
"FloorName": '5',
"Building": {
"BuildingId": 4321,
"BuildingName": 'HQ'
}
}
}, {...}]
I've not got far due to not knowing the BlueBird library promises as well as I should:
showWithAssetGeo: function(req, res) {
room.find( { assetCount: { '>': 0 } } )
.populate('FloorId')
.each(function(room){
var Building = Building.find({ id: _.pluck(room.FloorId, 'BuildingId') })
.then(function(Building) {return Building;});
return [room, Building];
})
.spread(function(room, Building) {
//Something to combine it all?
})
.catch (function(err) {
if (err) { res.badRequest('reason' + err); }
}
}
UPDATE: Had to tweak the answer marked below. Here is the final working code.
You need to make sure to execute the find by calling then or exec (each won't do it).
Seems like you're trying to map across all the floors and then bring those promises back to one. Promise.all() is the way to do that.
Try something like the below:
showWithAssetGeo: function(req, res) {
room.find( { assetCount: { '>': 0 } } )
.populate('FloorId')
.then(function(rooms) {
return Promise.all(rooms.map(function(room) {
return Building.findOne({id: room.FloorId.BuildingId})
.then(function(building) {
room.FloorId.building = building;
});
})
})
.then(function(deeplyPopulatedRooms) {
res.json(deeplyPopulatedRooms);
})
.catch(function(error) {
if (err) { res.badRequest('reason' + err); }
});
}
However, it would probably be more performant to pluck all the id's of the possible buildings and do one find for all id's. But the above should work and seems to be consistent with the approach you were taking before.