<div class="dropdown-1" id="account-list">1231123</div>
<div class=" css-as9hnt-menu">
<div class=" css-11unzgr">
<div class=" css-1wvm2z9-option" id="react-select-8-option-0" tabindex="-1">1231123</div>
<div class=" css-kzme5w-option" id="react-select-8-option-1" tabindex="-1">1231235</div>
<div class=" css-kzmst5w-option" id="react-select-8-option-2" tabindex="-1">1231236</div>
<div class=" css-treme5w-option" id="react-select-8-option-3" tabindex="-1">1231237</div>
<div class=" css-erte5rt-option" id="react-select-8-option-4" tabindex="-1">1231238</div>
</div>
</div>
How I can click on the option with text = 1231236 from a drop-down list like above using Serenity?
I've tried this but it not working :
public void selectItemInCustomDropdown(String parentDropdownLocator, String allItemDropdown,
String ExpectedText){
$(parentDropdownLocator).click();
waitForRenderedElementsToBePresent($(allItemDropdown)).selectFromDropdown($(allItemDropdown),ExpectedText);
}
Related
I am quite new to Lighting Web Component. However, I have some experience with other component base frameworks.
I'm creating a button for each item and when the button is clicked for each item. It applies to all items. In other words, when one clicks 'Extend' it is meant to show a date input for that specific item but it shows too all of them. This is how my code looks like:
<template>
<template if:true={subscriptionData}>
<template for:each={subscriptionData} for:item="subscriptionItem">
<div key={subscriptionItem.Id}>
<div>
<div class="slds-grid slds-gutters slds-grid_vertical-align-center">
<div class="slds-col custom-card-title-container">
<h2 class="custom-title">{subscriptionItem.SBQQ__ProductName__c}</h2>
</div>
<div class="slds-col button-custom">
<lightning-button label="Extend" title="Non-primary action" onclick={handleShowEditEndDate} class="slds-m-right_none custom-margin"></lightning-button>
</div>
</div>
<div class="slds-grid slds-m-top_xx-small">
<div class="slds-col">
<div class="slds-grid slds-grid_vertical">
<div class="slds-col slds-m-bottom_xx-small">
<span>Start Date</span>
</div>
<div class="slds-col">
<span>{subscriptionItem.SBQQ__StartDate__c}</span>
</div>
</div>
</div>
<div class="slds-col">
<div class="slds-grid slds-grid_vertical">
<div class="slds-col slds-m-bottom_xx-small">
<span>End Date</span>
</div>
<div class="slds-col">
<span>{subscriptionItem.SBQQ__EndDate__c}</span>
</div>
</div>
</div>
<div class="slds-col">
<div class="slds-grid slds-grid_vertical">
<div class="slds-col slds-m-bottom_xx-small">
<span>Quantity</span>
</div>
<div class="slds-col">
<span>{subscriptionItem.SBQQ__Quantity__c}</span>
</div>
</div>
</div>
</div>
<template if:true={showEditField}>
<lightning-layout multiple-rows class="slds-m-top_xx-small">
<lightning-layout-item size="8">
<lightning-input
type="date"
name="endDateInput"
label="End Date"
variant="label-inline"
>
</lightning-input>
</lightning-layout-item>
</lightning-layout>
</template>
<hr class = "custom-line">
</div>
</div>
</template>
</template>
export default class ExtendCPQSubscriptionLWC extends LightningElement {
#api recordId;
#track subscriptionData;
#track columns = columns;
showEditField = false
#wire(getSubscriptionsLWC, { recordId: '$recordId'})
loadFoundSubscriptions({error, data}) {
if (data) {
console.log('OK');
console.log(data);
this.subscriptionData = data;
} else if (error) {
console.log('ERR ' + JSON.stringify(error));
}
}
I would appreciate any input thanks in advance.
You have common showEditField used to control visibility/addition of date input. My recommendation is to move that information inside subscriptionData and update the track variable. This would trigger re-render of UI and only show that field for item, for which Extend button was clicked
I am iterating ngFor in angular 6. When i am clicking on button a div should open beside row of that particular button but it is opening below ngFor like this
I want to make it open for that partcular row and below that.
<app-filter></app-filter>
<div class="bg-white" *ngFor="let data of dashboardData">
<div class="container-fluid">
<div class="center-align row">
<div class="col-sm-12">
<div class="block col-sm-2">
{{data.firstname}}{{data.lastname}}
</div>
<div class="block_l col-sm-3">
<span class="light_small">68%</span>
{{data.stage}}
</div>
<div class="block_l col-sm-1">
Customer
</div>
<div class="block_l col-sm-1">
<img src="assets/images/call.png">
</div>
<div class="block_l col-sm-1">
<img src="assets/images/mail.png">
</div>
<div class="block_l col-sm-2">
<span class="status_color"><b>.</b></span>
Paused
</div>
<div class="block_l col-sm-2">
<a class="btn button_css" (click)="openLayout=!openLayout">verify Details</a>
</div>
</div>
</div>
</div>
<div class="bg-loader"></div>
<div class="container" [hidden]="openLayout">
<div class="row">
<app-form-layout></app-form-layout>
<app-form-desc></app-form-desc>
</div>
</div>
</div>
Now it is coming like this
Desired behavior will be like this It's like accordian on click it should open below that row and rest of below rows will be shifted downwards
The problem resides into openLayout variable that is shared for all your rows.
You need one openLayout for each row. you can add it dinamically to your data like this:
<div class="bg-white" *ngFor="let data of dashboardData">
<div class="container-fluid">
<div class="center-align row">
<div class="col-sm-12">
<div class="block col-sm-2">
{{data.firstname}}{{data.lastname}}
</div>
<div class="block_l col-sm-3">
<span class="light_small">68%</span>
{{data.stage}}
</div>
<div class="block_l col-sm-1">
Customer
</div>
<div class="block_l col-sm-1">
<img src="assets/images/call.png">
</div>
<div class="block_l col-sm-1">
<img src="assets/images/mail.png">
</div>
<div class="block_l col-sm-2">
<span class="status_color"><b>.</b></span>
Paused
</div>
<div class="block_l col-sm-2">
<a class="btn button_css" (click)="data.openLayout=!data.openLayout">verify Details</a>
</div>
</div>
</div>
</div>
<div class="bg-loader"></div>
<div class="container" [hidden]="data.openLayout">
<div class="row">
<app-form-layout></app-form-layout>
<app-form-desc></app-form-desc>
</div>
</div>
</div>
At the beginning it will be false because undefined is like false.
I'm a beginner in Ionic 3.
I have a 4 text in same color, I'm trying to make when I click on the 4 text at for time I want to change color.
Example
I click on 1st text, then I want to change it black color
I click on text 2, then I want to change black color and 1st text is set a default color,
Please help me to fix this issue
<div class="row">
<div class="col right-border">
<div text-center>
<h2 class="main-one" >$ 2,300</h2> <p class="main-txt-home">Today's Revenue</p>
</div>
</div>
<div class="col bottom-border">
<div text-center>
<h2 class="main-one">$ 53,100</h2><p class="main-txt-home">Expected Revenue for this month</p>
</div>
</div>
</div>
<div class="row">
<div class="col top-border">
<div text-center>
<h2 class="main-one">12</h2><p class="main-txt-home"> Bookings taken today</p>
</div>
</div>
<div class="col left-border">
<div text-center>
<h2 class="main-one">68%</h2><p class="main-txt-home">Total Monthly occupancy</p>
</div>
</div>
</div>
</div>
You can use [ngClass] attribute to achieve this. This can be used to dynamically return the class name as per the last clicked text. The code will be something like below.
<div class="row">
<div class="col right-border">
<div text-center [ngClass]="getTextColor('text1')" (click)="setSelectedText('text1')">
<h2 class="main-one" >$ 2,300</h2> <p class="main-txt-home">Today's Revenue</p>
</div>
</div>
<div class="col bottom-border">
<div text-center [ngClass]="getTextColor('text2')" (click)="setSelectedText('text2')">
<h2 class="main-one">$ 53,100</h2><p class="main-txt-home">Expected Revenue for this month</p>
</div>
</div>
</div>
<div class="row">
<div class="col top-border">
<div text-center [ngClass]="getTextColor('text3')" (click)="setSelectedText('text3')">
<h2 class="main-one">12</h2><p class="main-txt-home"> Bookings taken today</p>
</div>
</div>
<div class="col left-border">
<div text-center>
<h2 class="main-one">68%</h2><p class="main-txt-home">Total Monthly occupancy</p>
</div>
</div>
</div>
In controller
private selecteTextId :string;
setSelectedText(textId:string) {
this.selecteTextId = textId;
}
getTextColor(textId:string):string{
return this.selecteTextId == textId? "highlight-color" : "";
}
In scss file
.highlight-color {
color:blue;
}
I need to show two rows of data in Ionic 1 list card view but i am not been able to achieve this. I have used two div to add two rows but its not working.
<div class="row row-responsive">
<div class="col">
<div class="row row-responsive item item-divider">
<div class="col " align="center">
Last Name
</div>
<div class="col " align="center">
First Name
</div>
<div class="col " align="center">
Middle Name
</div>
<div class="col " align="center">
Address
</div>
<div class="col " align="center">
Age
</div>
<div class="col " align="center">
City
</div>
<div class="col " align="center">
State
</div>
</div>
<div class="row row-responsive item list card cardBase" ng-repeat="item in myList">
<div class = "row row-responsive">
<div class="col item-Overflow" align="center">
{{item.LName}}
</div>
<div class="col item-Overflow" align="center">
{{item.FName}}
</div>
<div class="col item-Overflow" align="center">
{{item.MName}}
</div>
<div class="col item-Overflow" align="center">
{{item.Address}}
</div>
</div>
<div class = "row row-responsive">
<div class="col item-Overflow" align="center">
{{item.Age}}
</div>
<div class="col item-Overflow" align="center">
{{item.City}}
</div>
<div class="col item-Overflow" align="center">
{{item.State}}
</div>
</div>
</div>
</div>
Where cardBase class is
.cardBase {
margin: 15px 0;
padding: 16px;
width: 100%;
height: 150px;
resize: none;
}
After doing this still data is shown in one single row. Please help me to show data in following format
As simple as this:
<ion-content>
<div class="card">
<div class="row">
<div class="col">John</div>
<div class="col">Dev</div>
<div class="col">Peter</div>
<div class="col">Washington, DC</div>
</div>
<div class="row">
<div class="col">23 Years</div>
<div class="col">Tucson</div>
<div class="col">USA</div>
</div>
</div>
</ion-content>
Check ionic grids for more.
I have added a code of accordion in my project. Till yesterday it was working fine today accordion is not working because there is space between id as shown in screen-capture from my project.
.
My code to show the accordion is:
<div class="row">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
#foreach($data as $from)
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading{{$from->id}}">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{$from->id}}" aria-expanded="true" aria-controls="collapse{{$from->id}}">
{{$from->from}}
</a>
</h4>
</div>
<div id="collapse{{$from->id}}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading{{$from->id}}">
<div class="panel-body">
{{$from->body}}
</div>
</div>
</div>
#endforeach
</div>
</div>
Is there any changes i can make, to get rid of this error?
EDIT:
Controller that passes all variable.
public function show(){
$data = Email::latest()->get();
return view('emails.display',compact('data'));
}