VueJS Search for exact word or phrase - vue.js

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);
},}

Related

Select Option (for dropdown) Laravel

I make a dropdown for a form, I will show the code below. However, when I click the submit button, there is an error saying,
SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'brand' cannot be null (SQL: insert into supplier_details.
The data that I chose from the dropdown is actually null. Actually, I'm new to Laravel.
I don't want to make a dropdown list from a database, I just want to display the option and the option will be inserted into the database when the user clicks the submit button after filling in the form.
<div class="form-group row">
<label style="font-size: 16px;" for="id" class = "col-sm-2">Item Brand </label>
<label for="supp_name" class = "col-sm-1">:</label>
<div class="col-sm-7">
<select name="brand" class="form-control js-example-basic-single" required>
<option >Please select item brand</option>
<option value="machine1"> Item Brand 1 </option>
<option value="machine1"> Item Brand 2 </option>
<option value="machine1"> Tem Brand 3 </option>
</select>
</div>
</div>
Controller
public function createsupplierdetails()
{
return view ('frontend.praiBarcode.getweight');
}
public function supplierdetails(Request $r)
{
$details = new SupplierDetail;
$getuserPO = Supplier::where('PO',$r->PO)->first();
$details->brand = $getuserPO->brand;
$details->container_no = $getuserPO->container_no;
$details->date_received = $getuserPO->date_received;
$details->gross_weight = $getuserPO->gross_weight;
$details->tare_weight = $getuserPO->tare_weight;
$details->net_weight = $getuserPO->net_weight;
$details->save();
return view ('frontend.praiBarcode.viewsupplierdetails')
->with('details',$details);
}
This to check to verify if it is working:
Make sure you are submitting the correct form.
Try doing dd on your controller dd($request->all())
If data is reaching the controller and not inserted into the database, check on your model, if it is added to fillable or if there is only id in the guarded array. You can know about more here in https://laravel.com/docs/9.x/eloquent#mass-assignment
Error should be fixed, as soon as you fix it.
Controller
use Validator;
public function store(Request $request)
{
$validator = Validator::make($request->all(), [
'brand' => 'required',
]);
if ($validator->fails()) {
return redirect()->back()->with('error', $validator->errors()->first());
}
$details = new SupplierDetail();
$details->brand = $request->brand;
$details->container_no = $request->container_no;
$details->date_received = $request->date_received;
$details->gross_weight = $request->gross_weight;
$details->tare_weight = $request->tare_weight;
$details->net_weight = $request->net_weight;
$details->save();
if ($trending) {
return redirect(route('details.index'))->with('success', 'Field added successfully');
} else {
return redirect()->back()->with('error', 'Field has been not added successfully');
}
}

Laravel Query depend on Multiple HTML Select tags

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();
}

Force single select with Razor Select Tag Helper

I'm Struggeling to find a solution to the following Problem:
My Razor-Page has a form with two select-elements, only one of which will be active (not disabled) at a time. Their values are associated to the same Property in my model.
I had to make my Property an Array, so I could access the value of both selects, despite one of them always being "null".
This has lead to my select being rendered with the "multiple" attribute in HTML. How can I get rid of this? I want it to be single select.
My selects:
<select asp-for=TätigkeitIds required onchange="this.form.submit()" disabled=#(Model.Erfassung.TätigkeitNavigation != null && Boolean.Equals(Model.Erfassung.TätigkeitNavigation.Abzurechnen, true))>
#{
<option selected=#(Model.Erfassung.TätigkeitNavigation == null) value="">Bitte eine nicht abzurechnende Tätigkeit wählen</option>
foreach(StammdatenTätigkeit Tätigkeit in await Model.GetTätigkeitenAsync(false))
{
<option selected="#(Model.Erfassung.TätigkeitNavigation != null && String.Equals(Tätigkeit.Id, Model.Erfassung.TätigkeitNavigation.Id))" value=#Tätigkeit.Id>#Tätigkeit.Name</option>
}
}
</select>
<select asp-for=TätigkeitIds required onchange="this.form.submit()" disabled=#(Model.Erfassung.TätigkeitNavigation != null && Boolean.Equals(Model.Erfassung.TätigkeitNavigation.Abzurechnen, false))>
#{
<option selected=#(Model.Erfassung.TätigkeitNavigation == null || Boolean.Equals(Model.Erfassung.TätigkeitNavigation.Abzurechnen, false)) value="">nicht abrech. Std.</option>
foreach(StammdatenTätigkeit Tätigkeit in await Model.GetTätigkeitenAsync(true))
{
<option selected="#(Model.Erfassung.TätigkeitNavigation != null && String.Equals(Tätigkeit.Id, Model.Erfassung.TätigkeitNavigation.Id))" value=#Tätigkeit.Id>#Tätigkeit.Name</option>
}
}
</select>
The Property:
[BindProperty(SupportsGet = false)]
public String[] TätigkeitIds { get; set; }
The rendered HTML:
<select required onchange="this.form.submit()" id="T_tigkeitIds" multiple="multiple" name="TätigkeitIds">
<option value="" selected="selected">Bitte eine nicht abzurechnende Tätigkeit wählen</option>
<option selected="selected" value="d58559ac-6601-4871-aff2-aa72982fd5cc">Schulung</option>
</select>
<select required onchange="this.form.submit()" disabled="disabled" id="T_tigkeitIds" multiple="multiple" name="TätigkeitIds">
<option selected="selected" value="">nicht abrech. Std.</option>
<option value="c2b8fd29-c85b-49c1-a2db-35b9fa9d11a0">PJ-Bearbeitung</option>
</select>
Essentially, I am looking for a way to either force the HTML-Select to appear without the multiple-attribute or to make my Property a normal String again and tell the framework to fill it with whichever input isn't null.
Based on the comment from Mike Brind, I was able to solve my problem by simply deactivating the tag helpers for my two select-Tags like so:
<!select name="TätigkeitIds" required onchange="this.form.submit()" #(Model.Erfassung.TätigkeitNavigation != null && Boolean.Equals(Model.Erfassung.TätigkeitNavigation.Abzurechnen, false) ? "disabled" : "")>
#{
<option selected=#(Model.Erfassung.TätigkeitNavigation == null || Boolean.Equals(Model.Erfassung.TätigkeitNavigation.Abzurechnen, false)) value="">nicht abrech. Std.</option>
foreach(StammdatenTätigkeit Tätigkeit in await Model.GetTätigkeitenAsync(true))
{
<option selected="#(Model.Erfassung.TätigkeitNavigation != null && String.Equals(Tätigkeit.Id, Model.Erfassung.TätigkeitNavigation.Id))" value=#Tätigkeit.Id>#Tätigkeit.Name</option>
}
}
</!select>

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

Datatables - Length (select option) outside datatable

I am using DataTables and I would like my length(select option) to outside of the table
(ex. on my div).
create new select form
<select name='length_change' id='length_change'>
<option value='50'>50</option>
<option value='100'>100</option>
<option value='150'>150</option>
<option value='200'>200</option>
</select>
init dataTables
var oTable = $('#example').DataTable({});
set initial value
$('#length_change').val(oTable.page.len());
add function .change
$('#length_change').change( function() {
oTable.page.len( $(this).val() ).draw();
});
reference : https://datatables.net/reference/api/page.len()
It cannot be directly moved by just copying the whole change length drop down outside the table.
Instead create a new drop-down, where ever you want but set the following in the datatable call -
<select name='length_change' id='length_change'>
<option value='50'>50</option>
<option value='100'>100</option>
<option value='150'>150</option>
<option value=''>All</option>
</select>
`var oTable = $('#sample_1').dataTable( {
.....
"bLengthChange": false, //This will disable the native datatable length change
.....
...
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "length_change", "value": $('#length_change').val() } );
},
.....
....
});
`
The `aoData.push` will send the selected value of the customer length change to the server.
In the Model Class from where the array will be returned for the datatable, include the pushed value to the limit.
i.e. if `$postData` is the array of posted values to the server then -
`if($postData['length_change'])
$limit = (int) $postData['length_change'];
else
$limit = _DEFALUT_VALUE;
`
I hope it helps.