I want to recover the value of the account status "RF-Account" as shown in the picture.
For this, I target an xpath to retrieve the value just to the right of it with this code in RobotFramework :
${initialStatus}= Get Value //td[text()='${testAccount}']/following-sibling::span[#style=""]
Here is the html code of the information to retrieve:
<span class="text-bold ng-binding text-green" ng-class="{'text-green' : tenant.status == 'ACTIVE', 'text-muted' : tenant.status == 'INACTIVE'}" style="">ACTIVE</span>
And the html snippet that contains whole table :
<tbody ng-if="!isEmpty" class="body-table ng-scope" style="height: 193px;">
<!-- ngRepeat: tenant in tenants track by $index --><tr ng-repeat="tenant in tenants track by $index" class="ng-scope" style="">
<td class="ng-binding">RF-Accoun</td>
<td>
<span class="text-bold ng-binding text-green" ng-class="{'text-green' : tenant.status == 'ACTIVE', 'text-muted' : tenant.status == 'INACTIVE'}">ACTIVE</span>
</td>
<td style="width:118px">
<div class="pull-right">
<a name="editBtn" type="submit" class="btn-icon" ng-click="openCreateEditModal(tenant)">
<span class="icon-i-edit fs"></span>
</a>
<a name="deleteBtn" type="submit" class="btn-icon" ng-click="deleteTenant(tenant)">
<span class="icon-i-trash fs"></span>
</a>
</div>
</td>
</tr><!-- end ngRepeat: tenant in tenants track by $index --><tr ng-repeat="tenant in tenants track by $index" class="ng-scope">
<td class="ng-binding">RF-Account</td>
<td>
<span class="text-bold ng-binding text-green" ng-class="{'text-green' : tenant.status == 'ACTIVE', 'text-muted' : tenant.status == 'INACTIVE'}">ACTIVE</span>
</td>
<td style="width:118px">
<div class="pull-right">
<a name="editBtn" type="submit" class="btn-icon" ng-click="openCreateEditModal(tenant)">
<span class="icon-i-edit fs"></span>
</a>
<a name="deleteBtn" type="submit" class="btn-icon" ng-click="deleteTenant(tenant)">
<span class="icon-i-trash fs"></span>
</a>
</div>
</td>
</tr><!-- end ngRepeat: tenant in tenants track by $index --><tr ng-repeat="tenant in tenants track by $index" class="ng-scope">
<td class="ng-binding">RF-Account-bis</td>
<td>
<span class="text-bold ng-binding text-green" ng-class="{'text-green' : tenant.status == 'ACTIVE', 'text-muted' : tenant.status == 'INACTIVE'}">ACTIVE</span>
</td>
<td style="width:118px">
<div class="pull-right">
<a name="editBtn" type="submit" class="btn-icon" ng-click="openCreateEditModal(tenant)">
<span class="icon-i-edit fs"></span>
</a>
<a name="deleteBtn" type="submit" class="btn-icon" ng-click="deleteTenant(tenant)">
<span class="icon-i-trash fs"></span>
</a>
</div>
</td>
</tr><!-- end ngRepeat: tenant in tenants track by $index -->
</tbody>
It doesn't work. Could you, please, correct me for it to work ?
First, you should use keyword Get Text, because Get Value return value attribute of element. In your case your element do not have this attribute, so I assume that you want text.
Second, span elements from html snippet containing whole table differ from span element that your provided separately. They do not contain style attribute.
Finally the most probable solution to your problem is:
Get Text //td[text()='${testAccount}']/following-sibling::td/span
Related
<div th:switch="${data.totalPercentage}">
<td th:case="100" th:text="${data.totalPercentage}"/>
<td th:case="*" th:text="${data.totalPercentage + '*'}" class="alert alert-warning font-weight-bold"/>
</div>
Above expression works but I can not concatenate html tag with th:text. I would like to replace * with fontawesome flag icon <i class="fas fa-flag"></i>. Any suggestion?
No real reasons to concatenate here, you should be thinking in terms of HTML.
<div th:switch="${data.totalPercentage}">
<td th:case="100" th:text="${data.totalPercentage}"/>
<td th:case="*" class="alert alert-warning font-weight-bold">
<span th:text="${data.totalPercentage}" /> <i class="fas fa-flag"></i>
</td>
</div>
I made a shopping cart, where a product item gets added to the cart. When I click the product, it gets stored in a cart, but not local storage. I set it local-storage. When I click a product that already exists in the cart, I want to increment its quantity, but that's not happening. It adds another row instead, which I want to prevent.
Here is my component:
<template>
<div class="row">
<div class="col-md-8">
<div v-for="(product, id) in products" :key="id" class="col-xl-3 col-sm-6 mb-3 float-left">
<div class="card o-hidden h-100">
<div class="card-body">
<div class="card-body-icon">
<i class="fas fa-fw fa-comments"></i>
</div>
<div class="mr-5">{{product.name}}</div>
</div>
<div class="card-footer clearfix small z-1 form-group row" href="#">
<span class="float-left"><input type="text" v-model="product.qty" class="form-control form-control-sm mb-2"></span>
<strong class="float-right col-sm-6">
{{product.price}} TK
</strong>
<button class="btn btn-sm btn-info float-right col-sm-6" #click="addToCart(product)">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<table class="table table-sm">
<thead>
<tr>
<th>#SL</th>
<th>Name</th>
<th>Qty</th>
<th>Price</th>
<th>L/T</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(cart, i) in carts" :key="i">
<td>{{cart.id}}</td>
<td>{{cart.name}} </td>
<td class="text-right">{{cart.qty}}</td>
<td class="text-right">{{cart.price}}</td>
<td class="text-right">{{cart.price*cart.qty}}</td>
<td><button type="button" #click="removeProduct(i)" class="btn btn-sm btn-danger">x</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" class="text-right font-weight-bold">Total</td>
<td class="text-right"> {{total}}/-</td>
</tr>
</tfoot>
</table>
<div>
<button class="btn btn-sm btn-info float-right">Checkout</button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
products:[],
carts:[],
}
},
computed:{
total(){
var total = 0
this.carts.forEach(cart => {
total += parseFloat(cart.price * cart.qty)
})
return total
},
},
mounted(){
this.showProduct()
},
methods:{
showProduct(){
axios.get('api/pos')
.then(res=>{
this.products = res.data.data
});
},
addToCart(product){
this.carts.push(product)
},
removeProduct(i){
this.carts.splice(i,1)
}
}
}
</script>
Here is the screenshot:
The problem is addToCart() just pushes another product into the cart without checking if it already exists.
To fix the problem, update that method to find the item, and increment the item's quantity if found. Otherwise, push another item into the cart:
addToCart(product) {
if (this.carts.find(p => p.id === product.id)) {
product.qty++
} else {
this.carts.push(product)
}
}
i am using laravel 5.4 ,, i use filter by serial number, i want to when the serial number is not save in database, show the allert "no data" , but when i filter data serial number is not save to database, the page is not show the allert,,
this is my blade..
#extends('layouts.master')
#section('content')
......................................
<div class="panel panel-default">
#if (!$instrumentType->instruments->isEmpty())
<table class="table">
#foreach ($instruments as $instrument)
<tr>
<td>
Serial Number : {{ $instrument->serial_number }}
#if($instrument->customer !== NULL)
<div class="text-muted"><i class="fa fa-hospital-o" aria-hidden="true"></i> {{ $instrument->customer->name }}</div>
#endif
#if($instrument->contractType !== NULL)
<div class="text-muted"><i class="fa fa-compress" aria-hidden="true"></i> {{ $instrument->contractType->name }}</div>
#endif
</td>
<td>
<div class="pull-right">
<a type="button" href="{{ route('instrument.edit', ['instrumentType' => $instrumentType->id, 'instrument' => $instrument->id]) }}"
class="btn btn-success ">
<i class="fa fa-pencil"></i> Edit
</a>
#if($instrument->customer == NULL || $instrument->contractType == NULL)
<a href="{{ route('instrument.destroy', ['instrumentType' => $instrumentType->id, 'instrument' => $instrument->id]) }}"
data-method="delete" data-confirm="" class="btn btn-danger">
<i class="fa fa-trash"></i> <span class="hidden-xs">Delete</span>
</a>
#endif
</div>
</td>
</tr>
#endforeach
</table>
<div class="paginator text-center">{{ $instruments->links() }}</div>
#else
<div class="panel-body">
<div class="alert alert-warning text-center">No data.</div>
</div>
#endif
</div>
#endsection
.
you can get count of array with :
count($instrumentType->instruments)
add this code as your statement :
#if(count($instrumentType->instruments))
//
#else
//
#endif
I want to convert my php code into vuejs2 code as I'am changing my adminpanel as vue application(only ui).
I'am following this documentation, https://v2.vuejs.org/v2/guide/conditional.html
This is my art.vue component
<template>
<div class="col-md-8">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">Latest Artworks</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div class="table-responsive">
<table class="table no-margin">
<thead>
<tr>
<th>ID</th>
<th>Art</th>
<th>Artist</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr v-for="item in art">
<td>
ART-{{ $art->.id }}
</td>
<td>{{ item.title }}</td>
<td>{{ item.artist.name }}</td>
<td>
<span class="label
<?php
if(item.status == "Pending")
echo 'label-warning';
elseif($art['status'] == "Approved")
echo 'label-success';
else
echo 'label-danger';
?>
">{{$art['status']}}</span> </td>
<td>
<div class="sparkbar" data-color="#00a65a" data-height="20"><canvas width="34" height="20" style="display: inline-block; width: 34px; height: 20px; vertical-align: top;"></canvas></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="box-footer clearfix">
View All
</div>
</div>
</div>
</template>
<script>
export default {
computed : {
latest(){
return this.$store.state.art.latest
}
}
}
</script>
I have seen v-if condition statement, but in my case i have multiple conditions
I want to change this code
<span class="label
<?php
if($art['status'] == "Pending")
echo 'label-warning';
elseif($art['status'] == "Approved")
echo 'label-success';
else
echo 'label-danger';
?>
">{{$art['status']}}</span>
You can achieve multiple conditional views easily using v-else-ifs. Refer to the documentation here.
EDIT: Looking at the code sample it felt that there is no need for v-ifs. To add classes to an element can be done by the means of property binding.
<span class="label
<?php
if(item.status == "Pending")
echo 'label-warning';
elseif($art['status'] == "Approved")
echo 'label-success';
else
echo 'label-danger';
?>
">{{$art['status']}}</span>
can be written like:
<span :class='{label: true, "Pending": item.status === 'value', "label-warning": item.status === 'someOtherValue'}'>{{$art['status']}}</span>
in vuejs for the same effect, read more.
<span v-if="item.status === 'Pending'" class="label label-warning">
{{ item.status }}
</span>
<span v-else-if="item.status === 'Approved'" class="label label-success">
{{ item.status }}
</span>
<span v-else class="label label-danger">
{{ item.status }}
</span>
This solved my issue
<tr data-ng-repeat="myTrack in myTrackList">
<td class="project-status" data-ng-switch="myTrack.opened">
<span data-ng-switch-when="true" class="label label-primary">Active</span>
<span data-ng-switch-when="false" class="label label-default">Inactive</span>
</td>
<td class="project-title"><a
id="{{myTrack.trackId}},{{myTrack.file.fileId}}"
href="getDocumentByFileId?fileId={{myTrack.file.fileId}}&trackId={{myTrack.trackId}}">{{myTrack.trackName}}</a>
<br /><small>Description: {{myTrack.description}}</small>
<br /> <small>Created: {{myTrack.createdTime}}</small></td>
<td class="project-people" colspan="2">
<div class="project-people" ng-repeat="persons in myTrack.personTrack">
<a href=""><img alt="image" title="persons.firstName"
class="img-circle" src="persons.profilePictureUrl"></a>
</div>
</td>
<td class="project-actions"><a href="#"
class="btn btn-white btn-sm"><i class="fa fa-folder"></i>
View </a></td>
</tr>
I taken list of objects and in single object there is set of user with their profile picture. I used ng-repeat in ng-repeat for repeating users set from list of objects but my inner ng-repeat not working correctly. please help me.
As for the code bellow :
<div class="project-people" ng-repeat="persons in myTrack.personTrack">
<img alt="image" title="persons.firstName" class="img-circle" src="persons.profilePictureUrl">
</div>
The browser do not know that you are using angular js variable for title or src. So you will need.
<div class="project-people" ng-repeat="persons in myTrack.personTrack">
<img alt="image" ng-attr-title="{{persons.firstName}}" class="img-circle" ng-src="{{persons.profilePictureUrl}}">
</div>
So you will need to include the ng tags when you want to use the angular js for tags.