Laravel Query depend on Multiple HTML Select tags - sql

I've multiple Select tags in HTML form i.e 'Gender', 'District' etc where the default selection is All. The eloquent query is dependent on these tags. I can retrieve data from DB if user select an option like Male or Female but don't know how to use `All'.
here is html code of Gender Select tag.
<div class="col-md-2">
<label for="gender">Gender</label>
<select wire:model="byGender" class="custom-select form-control" name="gender" id="gender">
<option selected>All</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="combine">Combine</option>
</select>
</div>
and here is Laravel Code
public function mount()
{
$this->rows = DutySheet::where('gender', $this->byGender)->get()->toArray();
}
Note: this is Livewire function and byGender will be updated as the user select an option.
My question is what to use as value of All option in Select tag to retrieve all data from DB, "" is not working.

Your All options are represented by empty values (empty strings). You can leverage this by using the when() method on the query-builder, which effectively is an if-statement - the closure is only applied to the querybuilder if the first parameter is true.
$this->rows = DutySheet::when($this->byGender !== '', function($query) {
return $query->where('gender', $this->byGender)
})
->get()
->toArray();
You can chain these and add as many when() as you want to your query, to compute a more complex query with conditional conditionals.

You can add some logic to only apply the where condition when the select menu is set to any value other than "All".
If the user selects male, female or combine then the where condition will be run against that value, otherwise the query will return every record.
public function mount()
{
$dutySheets = DutySheet::query();
if ($this->byGender !== 'All') {
$dutySheets->where('gender', $this->byGender);
}
$this->rows = $dutySheets->get()->toArray();
}

Related

VueJS Search for exact word or phrase

Im querying data which is pulled in via an Axios call. The drop-down 'subjects' pulls back results and queries the data but I would like it to only pull back exacts. For example, if I select 'English', I just want it to return subjects which have the subjects 'English' and not the subjects which are 'English and maths'.
Would I use a regEx. If so how would I go about this? Any help appreciated.
<select v-model="subject"
class="form-control"
#change="subjectonchange()"
:disabled="selectDisabledSubject"
>
<option disabled value="">Select subject</option>
<option
v-for="subject in uniquesubjects"
:key="subject"
:value="subject"
>
{{ subject }}
</option>
</select>
method: { subjectonchange: function () {
let query = "";
if (this.subject !== "") {
query = this.subject;
console.log(this.subject);
} else {
query = "!showall";
}
this.query(query);
},}

ASP.NET Core MVC Group by query with LINQ

I am trying to query the country column from one of my table and trying to group them so that one country name appears only once.
The controller code is
ViewBag.Countries = (from pT in _context.InfoProducts
group pT by new { pT.Country } into g
select new
{
Country = g.Key.Country
}).ToList();
In my view I am trying to show this list of countries in a dropdown like this
<div class=" form-group">
#Html.Label("Country")
<div class="col-md-12 ">
#Html.DropDownList("Country", new SelectList(ViewBag.Countries, "Country"), "Select Country", new { #class = "col-form-label col-md-12 label-align" })
</div>
</div>
The problem I am facing is though it is returning the expected names of the countries, the result is generating as a key, value pair something like
{Country = USA}
{Country = Canada}
The HTML generated copied from inspect element is given below
<select class="col-form-label col-md-12 label-align" id="Country" name="Country">
<option value="">Select Country</option>
<option>{ Country = USA}</option>
<option>{ Country = Canada}</option>
</select>
How can I get only the country name in the dropdown instead of the result I am currently getting.
Rather than using group by, it sounds like distinct would be a better fit:
_context.InfoProducts.Select(x => x.Country).Distinct().ToList();
This will give you back a list of strings to use, which won't give you the key-value pair problem you're currently having.
One more thing, when you use new SelectList(ViewBag.Countries, "Country") this overload of SelectList's constructor will try to set the value of Country as the selected item, but this doesn't exist in your list, so Select Country will always appear as selected. If you want that to select an actual country, then it would have to look something like:
new SelectList(ViewBag.Countries, "Canada")
where you would fetch Canada from the data for the current product.

Syntax of Vue.js filter within v-bind:href

I am declaring a html hyperlink with vue.js. The URL is set up by concatenating lets say "baseurl" and "id". However, I need to format the "id" first. I am trying to use a vue.js filter to process the "id" before concatenating with "baseurl". However, the filter applies to the whole URL, and not just to "id", which is what I want.
Let's say:
longid = "myprefix.id"
I want to obtain:
longid
I got this if I do:
<a v-bind:href="'https://mysite.mydatabase?ID='+longid.substring(longid.indexOf('.')+1)">{{ longid }}</a>
However, I wanted to do it with a vue.js filter, which I like more. I tried:
<a v-bind:href="'https://mysite.mydatabase?ID='+longid | shorten">{{ longid }}</a>
With the filter declared as:
filters: {
shorten: function(myString){
return myString.substring(myString.lastIndexOf(".")+1)
}
},
This is applied to the whole URL, and not just to "longid", so I finally have:
href="id"
instead of
href="https://mysite.mydatabase?ID=id"
I also tried to enclose the substring and the filter within parentheses:
<a v-bind:href="'https://mysite.mydatabase?ID='+ ( longid | shorten )">{{ longid }}</a>
but then I got a ReferenceError claming that the filter is not defined.
How can I make the filter apply only to "longid", being afterwards concatenated with the rest of the URL?
From what I get here is that you are trying to use a filter as method. You can achieve this using this.$options.filters.filterName().
For the given case, you should try something like:
<a v-bind:href="'https://mysite.mydatabase?ID='+$options.filters.shorten(longid )">{{ longid }}</a>.
Fiddle for reference: https://jsfiddle.net/sharitu/nbm2v1dx/3/
You can define method shorten and use like
<a v-bind:href="`https://mysite.mydatabase?ID=${shorten(longid)}`">{{ longid }}</a>
Consider change your shorten function:
shorten: function(myString){
return myString.split('.').pop()
}
Try this:
<a v-bind:href="'https://mysite.mydatabase?ID='+longid | shorten(longid)">{{ longid }}</a>
Your filters function should change like this:
filters: {
shorten: function(myString,longid){
//return your code;
}
},
First argument is the url and second argument is longid parameter

Default value pre-selected in select box with ng-options

I am trying to get default value selected (from database) in my select box using ng-options.
My view
<select class="form-control samlength modalinput"
ng-options="p.procid as p.procname for p in processes track by p.procid"
ng-model="p.procid">
<option value="">-- choose an option --</option>
</select>
where p.procid is a value received from the database.
My data
procid procname time
1 MyProcess 2018-05-30 13:34:54.097 3003162
3 Testing 2018-05-31 18:31:32.467 3003162
If selected procid is 3, how can I get it to be selected by default?
FYI - I have tried multiple answers given in other threads. I have also tried ng-init but nothing helped.
You can keep your HTML as:
<select class="form-control samlength modalinput"
ng-options="p.procid as p.procname for p in processes track by p.procid"
ng-model="selectedProcess">
<option value="">-- choose an option --</option>
</select>
Now if we have a requirement to select a particular object in the array. We can do that by iterating through the array and comparing value at the given key:
function functiontofindIndexByKeyValue(arraytosearch, key, valuetosearch) {
for (var i = 0; i < arraytosearch.length; i++) {
if (arraytosearch[i][key] == valuetosearch) {
return i;
}
}
return null;
}
Call this function as:
var index = functiontofindIndexByKeyValue($scope.processes, "procid", procid);
$scope.selectedProcess = $scope.processes[index];
alert(index);
Hope it works!
Update your html code to this:
<select ng-model="processSelected"
ng-options="p.procname for p in processes track by p.procid">
</select>
Then in controller initialise your model value as:
$scope.processSelected = $scope.processes[1];
Where $scope.processes is an array of process objects.
Plunker Example

select a record from a list-box using text in Protractor

I want to select the record from the list box using text. how can i use the filter function to select the particular record. I will be having many options but i want to select the value which i want by checking the text (e.g Spanish). I dont want to select value by index becoz if i do that i wont be able to verify test, moreover list gets updated. kindly help. below r my html code.
<ul class="addList">
<li ng-repeat="skill in availableSkills" ng-click="addSkillFunc(skill, $index)" class="ng-binding ng-scope">Mandarin</li>
<li ng-repeat="skill in availableSkills" ng-click="addSkillFunc(skill, $index)" class="ng-binding ng-scope">English</li>
<li ng-repeat="skill in availableSkills" ng-click="addSkillFunc(skill, $index)" class="ng-binding ng-scope">Spanish</li>
</ul>
Yea i can select the record by index. but i want something like selectbyvisibleText which is available in Selenium.
Finally got the solution. created a function SelectRowByCellValue and used to call it where ever i want by
SelectRowByCellValue(AGP.SkillList, Data.SkillSelect);
SkillList = element.all(by.css('Ul.addList li'));
SkillSelect = Value that u want to select. (Spanish)
this.SelectRowByCellValue = function (Elem, Texts) {
Elem.filter(function (element) {
return element.getText().then(function (text) {
if (text == Texts) {
element.click();
return false;
}
});
}).then(function (filteredElements) {
});
};