How to search in raw instead of foo` in Vuetify Autocomplete ?
<v-autocomplete
v-model="myvar"
:items="myitems"
item-value="foo"
item-text="bar"
/>
myitems: [
{'foo':'aaa', 'bar':'123', 'raw':'hello world'},
{'foo':'bbb', 'bar':'456', 'raw':'good morning'},
]
you need to use a filter
create a method like this:
filterValues(item, queryText) {
const searchText = queryText.toLowerCase();
const fields = [item.someValue, item.someOtherValue];
return fields.some(
f => f != null && f.toLowerCase().includes(searchText)
);
}
Use the item Slot of v-autocomplete to display your bar Text, but use raw for your item-text as shown in my example:
<v-autocomplete
v-model="myvar"
:items="myitems"
item-value="foo"
item-text="raw"
>
<template slot="item" slot-scope="{item}">
{{item.bar}}
</template>
</v-autocomplete>
Related
I'm using on react-admin and try to add a filter options to a list.
My problem is how to add a filter input based on another filter input?
I want to filter the list by organization and by project bu project is associated to an organization so I want to enable select a project only after organization is selected and and only of projects associated tothe selected organization.
That is waht I try to do:
const ProjectInputs = () => {
const { values } = useFormState();
const translate = useTranslate();
const classes = useStyles();
return (
<ReferenceInput
label={translate("resources.projects.name", { smart_count: 1 })}
source="projectId"
reference="projects"
filter={{ organizationId: values.organizationId }}
disabled={!values.organizationId}
alwaysOn
variant="standard"
>
<SelectInput
optionText="name"
resettable
alwaysOn
/>
</ReferenceInput>
);
}
export const Paymentilter: FC<Omit<FilterProps, 'children'>> = props => {
const classes = useFilterStyles();
return (
<Filter {...props}>
<ReferenceInput
source="organizationId"
reference="organizations"
variant="standard"
>
<AutocompleteInput
optionText={(choice?: Organization) =>
choice?.id // the empty choice is { id: '' }
? `${choice.name}`
: ''
}
/>
</ReferenceInput>
<ProjectInputs />
</Filter>
);
};
It works but there are some problems:
I cant define the project input to be always on.
In the add filter button there is no name for this input only blank shrink space.
The position of the project input is unordered input is popping up.
after choosing this filter I cant close it.
Do you have an idea for me?
How to fix my problems?
Sholud I solve my issue in another way?
Thank you!
EDIT:
I did like #doctoragon way,
and that is ok. in this way the project input cant be choosen from the add filter button only when we choose an organization it apears and when we cancel it disaper.
That ok for me but the second input still looks different as you can see on the picture it is upper then al the others inputs, and the cancel button is overirded by the chosen option.
You might be able to solve this using a FormDataConsumer inside your Filter.
<Filter {...props}>
<ReferenceInput source="organizationId" ... />
<FormDataConsumer source="projects" alwaysOn>
{
({ formData, ...restOfTheProps }) => organizationId && <ProjectInputs />
}
</FormDataConsumer>
</Filter>
Does anyone know how to test vuetify v-select with laravel dusk?
I've tried $browser->select('size', 'Large'); without success
this is one of the v-selects that i want to test
<v-flex class="form__item">
<v-select
id="estatus"
dusk="estatus"
v-model="form.id_estatus"
label="Estatus"
:items="estatus"
item-text="nombre"
item-value="id"
v-validate="{ required:true }"
data-vv-name="estatus"
data-vv-as="estatus"
:error-messages="(errors.collect('estatus'))"
required
></v-select>
</v-flex>
And this the generated HTML
When v-select is clicked, shows the option list in other part of the HTML
Click on the .v-select element and wait for the select to open up:
$browser->click('.v-select');
$browser->waitFor('.v-menu__content');
Then you can select an option by index:
$browser->elements('.v-menu__content a')[2]->click();
Or by text (using XPath):
$selector = "//div[#class='v-menu__content menuable__content__active']//div[text()='State 3']";
$browser->driver->findElement(WebDriverBy::xpath($selector))->click();
(1) In the Vue template:
Wrap the <v-select> with a <div id="selectStatus"></div>
(2) In the Dusk test, use:
$browser->click('#selectStatus .v-select');
$browser->waitFor('.menuable__content__active');
$browser->elements('.menuable__content__active a')[1]->click();
$browser->waitUntilMissing('.menuable__content__active');
$browser->assertSeeIn('#selectStatus .v-select','theStatusIExpectToSee');
— OR —
The <v-select> can be tested without wrapping it in a <div id="foo"></div> if we use a slightly more complicated strategy.
Instead of putting the id on a div wrapper, we can put the id directly on the v-select or even rely on text content contained within the v-select with the following strategy (involving xpath):
use Facebook\WebDriver\WebDriverBy;
public function keyOfParentContainingItem($elements, $itemName, $itemValue = null){
$elWithItemKey = null;
$itemNamePrefix = ($itemName !== 'text()') ? '#' : '';
$itemValueMatchString = ($itemValue !== null) ? '="'.$itemValue.'"' : '';
foreach($elements as $k=>$v){
$xpath = './/*['.$itemNamePrefix.$itemName.$itemValueMatchString.']';
if(!empty($v->findElements(WebDriverBy::xpath($xpath)))){
$elWithItemKey = $k;
}
}
return $elWithItemKey;
}
public function testMyVSelect(){
$this->browse(function (Browser $browser) {
$browser->visit('/myAddress');
$els = $browser->elements('.v-select');
$els[$this->keyOfParentContainingItem($els,'id','idOnVSelect')]->click();
$browser->waitFor('.menuable__content__active');
$menuEls = $browser->elements('.menuable__content__active a');
$menuEls[$this->keyOfParentContainingItem($menuEls,'text()',"some text")]->click();
$browser->waitUntilMissing('.menuable__content__active');
$els = $browser->elements('.v-select');
$key = $this->keyOfParentContainingItem($els,'text()',"some text");
$this->assertTrue($key !== null);
});
}
Using Vuetify 1.5.14.
Click on the v-select element for it to list the options, then wait for the dropdown-menu class to be present before selecting an element from the list (2 in the example below) by clicking on the third tag in the menu list.
Finally, wait until the dropdown-menu class disappears before moving onto the next part of the test.
$browser->click('#region')
->with('#region', function ($vSelect) {
$vSelect->waitFor('.dropdown-menu')
->elements('.dropdown-menu a')[2]->click();
})
->waitUntilMissing('.dropdown-menu');
I am trying to get value of data attribute inside component.ts in angular2.
1) form2.component.html
<md-select placeholder = "BedRooms" [formControl]="userForm.controls['bedRooms']" >
<md-option #bedRoom *ngFor="let bedRooms of formSettings?.prices?.pricingParams?.bedRooms" [value] = bedRooms.title [attr.data-price] = bedRooms.price (click)="test(bedRoom)"> {{bedRooms?.title}} </md-option>
</md-select>
How to get value of data-price in test function?
You can access the value of data-price from reference bedRoom as below.
bedRoom.getAttribute('data-price');
When paper-dropdown-menu items are dynamically added its label will not update,
but its selected value is changing ,which is not displaying in label
It's illustrated in PLUNKER : https://plnkr.co/edit/jy7WxttkB1mN7z0uHuVJ?p=preview
<paper-dropdown-menu label="Patient">
<paper-menu class="dropdown-content" selected="{{selectedPatient}}" attr-for-selected="value">
<template is="dom-repeat" id="patientMenu" items="[[patientsList]]">
<paper-item class="patient-names" value="[[item.id]]">[[item.id]][[item.name]]</paper-item>
</template>
</paper-menu>
<paper-button on-tap="_fun" raised>change Array list</paper-button>
<div style="color:blue;">selected patient id--->[[selectedPatient]]</div>
Polymer({
is: 'my-test',
properties: {
patientsList:{
type:Array
}
},
ready:function() {
this.patientsList =[
{id:0,name:"aaa"},
{id:1,name:"bbb"},
{id:2,name:"ccc"},
{id:3,name:"ddd"},
{id:4,name:"eee"}
];
this.selectedPatient = 0;
},
_fun:function(){
this.selectedPatient = null;
this.patientsList = [
{id:100,name:"xxx"},
{id:101,name:"yyy"},
{id:102,name:"qqq"},
{id:103,name:"mmm"},
{id:4,name:"eee"}
];
this.selectedPatient = 100;
}
I trying your plunker, especially the "it work the second time" part, make think that the issue can be that the dom-repeat hadn't time to updates the items when the
this.selectedPatient = 100;
is executed.
I tried to change it to a
this.async(function(){
this.set('selectedPatient',100)
}.bind(this));
to make sure the selectedPatient is set only after the dom-repeat is updated, and it seems to do the trick.
Input validation works fine with a fixed pattern, e.g.
<input type="number"
[(ngModel)]="info.sortOrder"
pattern="[0-9][0-9]"
id="sortOrder" name="sortOrder" #sortOrder="ngModel"/>
When changing the pattern to be evaluated through a function, validation always fails. The function "customPattern()" is called, though.
<input type="number"
[(ngModel)]="info.sortOrder"
[pattern]="customPattern()"
id="sortOrder" name="sortOrder" #sortOrder="ngModel"/>
With
customPattern() { return "[1-9][0-9]"; }
Is this a bug or is this not supposed to work this way?
I guess you are dong wrong, #black
I would recommend you to use Reactive Forms approach to achieve the desire result.
create a reactive form.
Add the control name for eg('number_validation').
(optional) Register the HTML input element with the formControlName same as above ('number_validation').
create a field 'regex' = '[0-9][0-9]' in the component.ts file.
Bind the [pattern] = regex in the HTML HTML input element tag.
Listen the change and change the regex pattern according to the requirement.
In ts file.
someForm: FormGroup;
this.someForm= new FormGroup({
'some_name': new FormControl('', [
Validators.required])});
regex = /[0-9][0-9]/;
In HTML:
<input type="number"
[pattern]=regex
id="sortOrder"
formControlName=some_name
name="sortOrder"/>
Logic :
It depends on the requirement how you are going to change the regex value, dynamically.
eg.
ngAfterViewInit() {
this.someForm.get('some_name').valueChanges.subscribe(val => {
if (val === 'anything') {
this.regex = /change the regex/;
} else if (val === 'anything_other') {
this.regex = /change the regex/;
}
});
}
Hope it help you, or other devs! :)
In you component, simply define a member variable like this:
export class AppComponent {
customPattern = '[1-9][0-9]';
In your html, use interpolation like this:
pattern = "{{customPattern}}"
That should work.