in my app I have multiple user rol0 (admin, distributor, buyer). By default, I show 3 menu items. But if the user in his list of articles has articleAA i show him the new item in the menu only for this article and another default item. Same, if he has articleBB I show him menu item for this article. On login, i chech this and show menu
$scope.allArticles = allArticlesFactory.get();
$scope.allArticles.$promise.then(function(data) {
angular.forEach(data, function(key, value){
switch (key.type){
case 'articleAA':
$scope.articleAA= true;
break;
case 'articleBB':
$scope.articleBB= true;
break;
default:
$scope.articleAA= "";
$scope.articleBB= "";
}
});
});
})
In a menu with ng-if, I check value
<li ng-if="articleAA === true"><a class="aktivniItem" ui-sref="articleAA">articleAA</a></li>
<li ng-if="articleBB === true"><a class="aktivniItem" ui-sref="articleBB">articleBB</a></li>
PROBLEM: when I log in like admin I get all menu item and this is ok.
When I log in like a buyer who has articleAA and articleBB i get all menu items and this is ok.
But, when I log in like another buyer who doesn't have any of this article, this two menu is still here. When I refresh, this special menu item disappears.
I try on top of controller put
$scope.articleAA= "";
$scope.articleBB= "";
and also
$scope.articleAA= false;
$scope.articleBB= false;
But, same problem is here. Next user always get menu from previous user, but if he refresh, everything is ok.
default menu
| Home | Articles | Info |
if user have articleAA
| Home | Articles | Info | ArticleAA |
if user have articleBB
| Home | Articles | Info | ArticleBB |
if user have articleAA and articleBB
| Home | Articles | Info | ArticleAA | ArticleBB |
Thnx
Related
EDIT: I found the answer, check it below and add these together!
I'm trying to have the react-datepicker dropdown menu to show the current start_time when it's first loaded and then the user could choose a time they want from the dropdown. Time could then be submitted with a button (not relevant).
At the moment the time slot doesn't show placeholderText, it shows current time (my timezone) and it can change into whatever the user chooses. I've tried to put selected={null}, which shows the placeholderText correctly, but it then won't submit save user's chosen time.
If someone could help me get this to work, I'd appreciate it a lot! The placeholderText isn't important, as long as it shows start_time first and it can then be changed. Thanks in advance!
start_time = TIME data type from MySQL (XX:XX:XX)
reservationsData[0] = {start_time: 9.00} etc.
row = sets which start_time is given
class TimeClass extends Component {
constructor(props) {
super(props);
this.state = {
time: new Date()
};
}
handleChange = time => {
this.setState({
time: time
});
}
render() {
let showThisFirst = this.props.reservationsData[this.props.row - 1].start_time;
return (
<div>
<DatePicker
selected={this.state.time}
onChange={this.handleChange}
placeholderText={moment(showThisFirst, "hh:mm:ss").format("HH.mm")}
showTimeSelect
showTimeSelectOnly
timeIntervals={15}
dateFormat="HH.mm"
timeCaption="Time"
getDefaultLocale="fi"
/>
</div>
);
}
}
Visually:
|---------|
| 09.00 | // looks like this when it loads, start_time
|---------|
|---------|
| 09.00 | // choosing a time to replace 09.00
|---------|
| 08.30 |
| 08.45 |
| 09.00 |
| 09.15 |
| 09.30 |
| 09.45 |
| 10.00 |
| ... |
|---------|
|---------|
| 09.45 | // when the time is chosen, user changes the start_time
|---------| // no need to submit, just choose. Button next to it handles it
So, I found an answer myself!
It was simple, just set selected={this.state.startTime} for the DataPicker and put startTime: time inside handleChange.
In short:
handleChange = time => {
this.setState({
startTime: time
});
}
return (
<DatePicker
selected={this.state.startTime}
onChange={this.handleChange}
placeholderText={moment(dropPicker, "hh:mm:ss").format("HH.mm")}
/>
);
I have an app that searches various tickets.
In the sidebar I have some filters so the user can filter down on their results(these include checkboxes and radio buttons like eBay/Amazon etc.).
So it looks similar to this in the sidebar:
How to Buy
Direct Debit (10)
Cash (2)
So the user knows from a glance that if they click on Direct Debit it will return 10 results. The problem I then have is that when the user clicks on Direct Debit, the radio buttons change to this...
How to Buy
Direct Debit (10)
Cash (0)
This would be correct if it were a checkbox, as click on Direct Debit AND Cash would return 0 results. However in this case (a radio button) the user should still see that there are 2 results if they click on Cash.
Here is my code...
HTML
<ul class="checkbox-list nga-fast nga-collapse" data-ng-show="ticketing.filterButtons.OperatorBtn">
<li data-ng-repeat="filter in ticketing.filterButtons.Operator | orderBy: filter" data-ng-if="filter != null">
<input id="operator{{$index}}" name="operator{{$index}}" type="radio" class="stylized" data-ng-model="ticketing.searchFilters.Operator" data-ng-change="ticketing.update()" value="{{filter}}" />
<label for="operator{{$index}}">{{filter}}
({{ (ticketing.filteredTickets | filter: {Operator: filter}).length}})
</label>
</li>
</ul>
JS
function update() {
var filtered = vm.all;
console.log(vm.searchFilters);
// For each filter in the search filters loop through and delete any that state false, this is so it doesn't explicitly match false and shows everything.
angular.forEach(vm.searchFilters, function(val, key) {
// if Key/Property contains 'Allow" and the value is true || if Key/Property doesn't contain 'Allow' and val is false (this is to make sure the oppposite/exclude filter values are deleted as the trues will be falses and vice versa)
if ((key.indexOf('Allow') !== -1 && val) || (val == false && key.indexOf('Allow') === -1)) {
// Delete the filter and value
delete vm.searchFilters[key];
}
});
// Filter results by the filters selected
filtered = $filter('filter')(filtered, vm.searchFilters);
// Sort results by selected option
vm.filteredTickets = $filter('orderBy')(filtered, vm.orderBy);
console.log(vm.filteredTickets);
console.log(vm.searchFilters);
vm.updateGrid();
}
If you require any more info or code then please let me know and i'll provide it.
This is a guess. There might be something go wrong in the below line
({{ (ticketing.filteredTickets | filter: { Operator:filter}).length}})
on Clicking of Direct Debit"; you might have updated "ticketing.filteredTickets" with only data of "Direct Debit" hence there is not data for "Cash"
I have a test case like below:
def "Go to home page and click login button and go to login page"
{
}
def "Input user ID and password and click login"
{
when:
code....
then:
code....
where:
param1 << [ID1,ID2,ID3]
param2 << [password1,password2,password3]
}
The test consists of two defs.
I want to repeat the whole process with different ID and Password.
How I can do that?
For example:
- First execute def "Go to home page and click login button and go to login page"
- Than execute def "Input user ID and password and click login"
I want to loop for all sets of ID and password.
EDITED:
My Original code here:
#Stepwise
class AOSearchPageTest extends GebReportingSpec
{
#Shared def orig_list = ['東京（成田・羽田）', '日本','アジア' ]
#Shared def dest_list = ['ソウル', '韓国','アジア' ]
def "Select origin"()
{
when: "Clicking international radio button"
"Open Homepage"()
"Click oneWayRadioButton"()
then: "Select departure point"
code ...
and: "Select destination point"
code...
and:
"Select departure date"()
"Click searchButton"()
"Select product details"()
"Member login"()
"Input detail page"()
where:
area | country | port | dest_area | dest_country | dest_port
'アジア' | '日本' | '東京（成田・羽田）' | 'アジア' | '韓国' | 'ソウル'
'ヨーロッパ' | 'イギリス' | 'ロンドン' | 'ヨーロッパ' | 'イタリア' | 'フィレンツェ'
}
private "Open Homepage"()
{
same like above functions
}
private "Click oneWayRadioButton"()
{
same like above functions
}
private "Select departure date"()
{
when: "Clicking search button"
...
then: "Click Login Button"
...
}
private "Click searchButton"()
{
when: "Clicking search button"
...
then: "Click Login Button"
...
}
private "Select product details"()
{
same like above functions
}
private "Member login"()
{
same like above functions
}
private "Input detail page"()
{
same like above functions
}
}
Every public method in Spock is considered as separate test. If you want to compose many methods in one test, they should be private. You need to redesign the thing, for example:
I have a test case like below:
private "Go to home page and click login button and go to login page"
{
}
private "Input user ID and password and click login"
{
}
def "Name of the entire test"
{
when:
"Go to home page and click login button and go to login page"()
"Input user ID and password and click login"()
then:
code....
where:
param1 << [ID1,ID2,ID3]
param2 << [password1,password2,password3]
}
I'm working on a pretty basic ionic app where I need to be able to save a simple array of objects for whenever the user relaunches the application. The objects contain various information, it's basically a to-do list but with a specific date.
Everything is working fine except it will not display the date when i relaunch/refresh the application and it gives me this error:
Error: [$parse:syntax] Syntax Error: Token 'T22' is an unexpected token at column 11 of the expression [2015-12-11T22:00:00.000Z | date:'MM/dd/yyyy'] starting at [T22:00:00.000Z | date:'MM/dd/yyyy'].
I tried googling it but couldn't find anyone with a similar problem. I really have no idea even where the problem lies, as the console doesn't point to any specific direction.
JS
app.service('StoreService',function($window){
if(JSON.parse(window.localStorage.getItem("products")) === null) {
var products={
items:[]
};
}
else {
var products =JSON.parse(window.localStorage.getItem("products"));
}
console.log(products);
this.saveItem=function(item){
products.items.push(item);
window.localStorage.setItem("products", JSON.stringify(products));
console.log(JSON.parse(window.localStorage.getItem("products")));
};
this.get=function(){
return products;
};
});
$scope.newItem = function(user) {
$scope.master = angular.copy(user);
var x = Math.random();
$scope.id =
{ id : x };
angular.extend($scope.master, $scope.id);
StoreService.saveItem($scope.master);
$scope.reset(user);
}
HTML
<div ng-repeat="things in product.items track by things.id | orderBy: 'date'" class="item item-text-wrap">
<h3>{{things.text}}</h3>
<p ng-bind="{{things.date}} | date:'MM/dd/yyyy'"></p>
<h3>{{things.note}}</h3>
</div>
Try to remove double curly braces for things.date
and change
ng-bind="{{things.date}} | date:'MM/dd/yyyy'"
to
ng-bind="things.date | date:'MM/dd/yyyy'"
I am currently working on a CMS based project.
For which i am using the universal react redux boilerplate by erikras
I really need suggestions on handling dynamic routing
Lets take a simple scenario form the boilerplate...
In routes.js
<Route path="about" component={About}/>
<Route path="login" component={Login}/>
<Route path="survey" component={Survey}/>
<Route path="widgets" component={Widgets}/>
data.js
export const data = [
{id: 1, property: 'Dashboard', link: '/'},
{id: 2, property: 'Login', link: '/login'},
{id: 3, property: 'About Us', link: '/About'},
];
now, let say on the basis of user role, the properties in json data will change
let say new property: is
{id: 4, property: 'test page', link: '/test'}
When react will render the components, how it would know the route link .. as it is not defined in the routes.js
I am not getting the right way to implement it
We need a sidebar made of specific menu content as per the user role .
Let say we are building a reservation system , there can be different user roles like admin, maintenance mode, assistant role
.
So different role will have different properties, accordingly we need to generate the menu on the basis it, as the properties will definitely differ as per user role.
Thanks!!
It is not clear from your example which component should be rendered for /test url? I suppose it is value of property key, right?
First option
You can do is something like this:
<Route path="/:page" component={Page}/>
It will allow you to render Page component for each url, that starts from / and this component will have page url inside this.props.routeParams.page. It allows you to find needed component inside Page#render:
render() {
const url = this.props.routeParams.page;
const PageComponent = data.find(page => page.link === url).property;
render <PageComponent />;
}
Second option
You can generate Routes dynamically, but I'm not sure if it works (you can check it). You just should replace this part:
<Route path="about" component={About}/>
<Route path="login" component={Login}/>
<Route path="survey" component={Survey}/>
<Route path="widgets" component={Widgets}/>
with
data.map(page => <Route path={page.link} component={page.property} key={page.id}/>)
Third Option:
Follow the react-router example 'huge-apps' for dynamically loading routes.
The project structure provides a logical hierarchy for both the routes and the components. Their approach also uses webpack to load shared bundles with page specific bundled code.
The project has a routes folder. In the example, the dynamic portion of the hierarchy is derived from data in the stubs folder which can be changed to use another data source. The approach was effective.
|____Calendar
| |____components
| | |____Calendar.js
| |____index.js
|____Course
| |____components
| | |____Course.js
| | |____Dashboard.js
| | |____Nav.js
| |____index.js
| |____routes
| | |____Announcements
| | | |____components
| | | | |____Announcements.js
| | | | |____Sidebar.js
| | | |____index.js
| | | |____routes
| | | | |____Announcement
| | | | | |____components
| | | | | | |____Announcement.js
| | | | | |____index.js
| | |____Assignments
| | | |____components
| | | | |____Assignments.js
| | | | |____Sidebar.js
| | | |____index.js
| | | |____routes
| | | | |____Assignment
| | | | | |____components
| | | | | | |____Assignment.js
| | | | | |____index.js
| | |____Grades
| | | |____components
| | | | |____Grades.js
| | | |____index.js
|____Grades
| |____components
| | |____Grades.js
| |____index.js
|____Messages
| |____components
| | |____Messages.js
| |____index.js
|____Profile
| |____components
| | |____Profile.js
| |____index.js
```
The repo doesn't include this example on the master branch anymore.