Can't access variable after radio select. Livewire - laravel-livewire

New to Laravel / Livewire.
I have a component that outputs a radio group, It renders fine.
When I select one of the radio controls I get an error, "Attempt to read property "id" on array"
Here I pass an array of options from my blade file
#livewire('test-options', ['options' => $option])
Component
class TestOptions extends Component {
public $selected;
public $options;
public function mount($options)
{
$this->options = $options;
}
public function render()
{
return view('livewire.test-options', [
'options' => $this->options
]);
}
component blade
<div>
#foreach($options['items'] as $option_items)
<div class="custom-control custom-radio">
<input
wire:model="selected"
class="custom-control-input"
type="radio"
id="rdio_{{$option_items['0']->id}}_{{$options['option']->id}}">
<label class="custom-control-label" for="rdio_{{$option_items['0']->id}}_{{$options['option']->id}}">{{$option_items['0']->title}}</label>
</div>
#endforeach

The issue is, when you select a radio, Livewire is refreshing the component. However, the $options array is not being passed again. mount() will only run when the component is first rendered.
You are already passing the options into the component, the $optons variable does not need to be mounted as it is already loaded and set here:
#livewire('test-options', ['options' => $option])
Change your code to:
class TestOptions extends Component {
public $selected;
public $options;
public function render()
{
return view('livewire.test-options', [
'options' => $this->options
]);
}
If you're also trying to get a value from the radio input, you'll need to add a value:
<input
wire:model="selected"
class="custom-control-input"
type="radio"
value="yourvaluehere"
id="rdio_{{$option_items['0']->id}}_{{$options['option']->id}}">
From the docs:
In Livewire components, you use mount() instead of a class constructor __construct() like you may be used to. NB: mount() is only ever called when the component is first mounted and will not be called again even when the component is refreshed or rerendered.
Read more here: Receiving Parameters

Related

Livewire checkbox preselected not working

I have collection of permission_types which i can access in my view. I am looping the permission_types to show each one in check box. all the checkboxes are binded to permission_resource, which is defined as a public property array. I want all the checkboxes to be preselected for which i used checked attribute but it won't work, as soon as i remove the wire:model attribute from input all the checkboxes are preselected. which narrows down the problem to wire:model binding.
What i am trying to achieve:
All i want to do is preselect the checkboxes binded to public property $permission_resource. Can anyone please help me out. I really cannot figure out what am i doing wrong here. Appreciate any effort to solve this problem in advance.
Relevent Component Code:
public $permission_types;
public $permission_resource = [];
public function render()
{
$this->permission_types = PermissionType::all();
// dd($this->permission_types->toArray());
return view('livewire.permissions.create-permission-component')
->extends('layouts.app')
->section('content');
}
Relevant View Code:
<div class="row">
#foreach($this->permission_types as $permissionType)
<div class="col-md-3">
<input wire:model="permission_resource" type="checkbox" class="filled-in chk-col-green form-control" id="{{$permissionType['name']}}" value="{{ $permissionType['name'] }}" checked />
<label for="{{ $permissionType['name'] }}" class="p-r-30">{{ ucfirst($permissionType['name']) }} Resource</label>
</div>
#endforeach
</div>
Permission Types Dump
What i have tried so far:
so far i have tried following but none of it worked for me.
1: defining public $permission_resource; instead of public $permission_resource = [];
2: wire:model="permission_resource.{{$permissionType["id"]}}"
3: wire:model="permission_resource.{{$permissionType["name"]}}"
4: wire:model.defer="permission_resource.{{$permissionType["id"]}}"
5: wire:model.defer="permission_resource.{{$permissionType["name"]}}"
6: name="permission_resource.{{$permissionType["id"]}}"
You are binding all the inputs to the same (array) variable, what you want to do is bind each to an element in that array, not to the array itself.
So you would need to prepopulate that array, and then bind each input using $loop->index.
Not sure if you have a good reason for populating permission_types in the render method, better in mount if it is not highly dynamic (likely to change from render to render).
Populating permission_resource in mount might look like this:
public function mount() {
$this->permission_types = PermissionType::all();
$this->permission_resource = $this->permission_types->pluck('name');
}
Then in the blade, bind to elements of the array, and don't set checked yourself, wire:model will always override this anyway, checking your checkbox if the thing you have bound to is truthy, and unchecking if bound var is falsey (this is why everything is unchecked for you with the wire:model binding them to the array, because empty($array) == false, if you just fix the casing of permission_type in the blade you will find the checkbox all come on when you check one, because they are all bound to the same thing).
<input wire:model="permission_resource.{{$loop->index}}" type="checkbox" class="filled-in chk-col-green form-control" id="{{$permission_type['name']}}" value="{{$permission_type['name']}}" />
PS: That will at least get to what you wanted, depending on what you are ultimately trying to do with permission_resource, it may not be a very good/useful representation for the purpose.
try this
public $permission = [];
protected $rules = [
...
'permission' => 'required|array',
];
public function create()
{
if ($this->validate()) {
$data = [
'name' => $this->name,
....
];
$model = Model::create($data);
if (!empty($this->permission)) {
$permissionId = PermissionType::whereIn('id', $this->permission)->pluck('id');
$model->permission()->attach($permissionId); // add name relation instead 'permission' , of create 'attach' of update 'sync'
}
}
}
public function render()
{
return view('livewire.permissions.create-permission-component', [
'permissions' => PermissionType::select('id', 'name')->get()
])
->extends('layouts.app')
->section('content');
}
in View
<div class="row">
#foreach($permissions as $permission)
<div class="col-md-3">
<input wire:model.defer="permission" wire:key="permission{{$permission->id}}" type="checkbox" value="{{$permission->id}}" class="filled-in chk-col-green form-control" />
<label for="{{ $permission->name }}" class="p-r-30">{{ ucfirst($permission->name) }} Resource</label>
</div>
#endforeach
</div>

Getting error after migrating to Ember octane

I am using Ember 3.16.3 and i am getting this error on the following code :
Error: Assertion Failed: You must pass a function as the second
argument to the on modifier
//login.hbs
<form {{on "submit" this.login}}>
<Input type="email" placeholder="email" #value={{this.email}} />
<button type="submit">login</button>
</form>
.
//login.js
import Route from '#ember/routing/route';
import { tracked } from '#glimmer/tracking';
import { action } from '#ember/object';
export default class LoginRoute extends Route {
#tracked email = '';
#action
login(event) {
event.preventDefault();
// do some operations ...
}
}
As specified in the error, the on modifier should receive a valid function to execute. As mentioned in the guides,
If you add the {{action}} helper to any HTML DOM element, when a user clicks the element, the named event will be sent to the template's corresponding component or controller.
This holds good for on modifier or any values that are used in the template. You can think of routes to be a part where we fetch data for the corresponding page. Any other backing property or computation has to be defined inside a controller or component to be used in the template.
Hence, moving your login action to a Controller will solve this issue. Additionally, you need to move email to the controller as well, or you won't see updates to it work correctly.

How to clear the typeahead input after a result is selected?

I'm using the ng-bootstrap typeahead component to search a customer database. When the user selects a customer from the typeahead results list, I navigate to a customer details page. I've got this working, but I want to clear the input field after navigation has taken place. I've tried setting the model to null or an empty string in the selectItem event logic, but this isn't working:
customer-search-typeahead.component.html
<template #resultTemplate let-r="result" let-t="term">
<div>
<div>
{{r.resource.name[0].given}} {{r.resource.name[0].family}}
</div>
<div>
{{r.resource.birthDate | date: 'dd/MM/yyyy'}}
</div>
</div>
</template>
<input type="text" class="form-control" [resultTemplate]="resultTemplate" (selectItem)="onSelect($event)"
[(ngModel)]="model" placeholder="Start typing a customer name..." [ngbTypeahead]="search"/>
customer-search-typeahead.component.ts
#Component({
selector: 'customer-search-typeahead',
template: require('./customer-search-typeahead.component.html'),
styles: [`.form-control { width: 300px; }`]
})
export class CustomerSearchTypeaheadComponent {
model: any;
searching: boolean;
constructor(private customerService: CustomerService, private router: Router) {}
onSelect($event) {
this.router.navigate(['/customers', $event.item.resource.id]);
this.model = null;
};
search = (text$: Observable<string>) =>
//omitted for brevity
}
The typeahead input looks like this after a selection has been made:
Solution
customer-search-typeahead.component.html
<input type="text" class="form-control" #input [ngbTypeahead]="search" (selectItem)="onSelect($event); input.value='' ">
customer-search-typeahead.component.ts
onSelect($event, input) {
$event.preventDefault();
this.router.navigate(['/customers', $event.item.resource.id]);
};
The issue you witnessing arises from the fact that the NgModel directive is updating model binding asynchronously and the actual model is updated after the onSelect method gets executed. So your model update gets overridden by the NgModel functionality.
Fortunately we (ng-bootstrap authors) got all the flex points in place to cover your use-case :-) There are a couple of things that you could do.
Firstly the $event object passed to the onSelect method has the preventDefault() method and you can call it to veto item selection (and as a result writing back to the model and input field update).
$event.preventDefault() will make sure that the model is not updated and the input field is not updated with the selected item. But text entered by a user will still be part of the input so if you want to clear up this as well you can directly update the input's value property.
Here is code demonstrating all those techniques together:
onSelect($event, input) {
$event.preventDefault();
this.selected.push($event.item);
input.value = '';
}
where input argument is a reference to the input DOM element:
<input type="text" class="form-control" #input
[ngbTypeahead]="search" (selectItem)="onSelect($event, input)">
Finally here is a plunker showing all this in practice: http://plnkr.co/edit/kD5AmZyYEhJO0QQISgbM?p=preview
The above one is template ref value solution.
This is for ngModel solution.
Html code:
<input type="text" class="form-control" [resultTemplate]="resultTemplate" (selectItem)="onSelect($event)"
[(ngModel)]="model" placeholder="Start typing a customer name..." [ngbTypeahead]="search"/>
Component code:
onSelect($event) {
$event.preventDefault();
this.model = null;
this.router.navigate(['/customers', $event.item.resource.id]);
};
$event.preventDefault();
for ngModel value change empty

How do i unit test a react app that has all the text fields in the children components?

I have created a react application that has all the logic (like onchange functions) in the parent and all the html rendering in the children components.
In order to test if the right state changes are happening i have to enter text to the input fields and enter values but the only problem is I dont know how to access the children elements when i mount the parent in js dom.
Should i move logic into the child components or should i only unit test the functions of the parent component?
This is from the parent
render() {
if (!this.state.accessTokenEntered) {
return <AccessTokenPage _onChange={this._onChange}
accessToken={this.state.inputs.accessToken}
env={this.state.inputs.env}
_onFirstClick={this._onFirstClick}/>;
and this is the child
const AccessToken = props =>(
<Layout>
<Input name={"accessToken"} displayName={"Access Token"} _onChange={props._onChange}
value={props.accessToken}/>
<DropDown name={"env"} displayName={"Environment"} _onChange={props._onChange}
data={['ppe', 'prod']} multiple={false}
value={props.env}/>
<br/>
<div style={{"textAlign": "center"}}>
<input type="button" onClick={props._onFirstClick} className="btn btn-primary" value="Submit"/>
</div>
</Layout>
);
and this is the childs child
const Input = props => (
<div className="form-group row">
<label className="col-xs-2 col-form-label">{props.displayName}</label>
<div className="col-xs-10">
<input name={props.name} className="form-control" value={props.value}
onChange={props._onChange}/></div>
</div>
);
You should be testing your child component. When the onChange event of the textbox is simulated, test if the onChange prop is called. This can be done by creating a mock or spy for the onChange prop.
An example test is shown below:
Mocking a prop.
beforeEach(() => {
onAdd = jest.fn();
add = TestUtils.renderIntoDocument(<Add onAdd={onAdd} />);
});
Test if the mock method is called:
it('Button click calls onAdd', () => {
const button = TestUtils.findRenderedDOMComponentWithTag(add, 'button');
const input = TestUtils.findRenderedDOMComponentWithTag(add, 'input');
input.value = 'Name 4';
TestUtils.Simulate.change(input);
TestUtils.Simulate.click(button);
expect(onAdd).toBeCalledWith(input.value);
});
I am using Jest and React TestUtils. Similar code is available for enzyme in my github project.

Binding a DropDownList in Kendo Scheduler Custom Template (ASP.NET MVC Wrapper version)

I'm using the ASP.NET MVC wrapper for Kendo UI and I'm trying to bind several dropdownlists within a custom template (x-kendo-template). I can't figure out how to do this using the ASP.NET MVC Wrapper (this is similar to this question: How do I bind a DropDownList to a DataSource within an editor template using the scheduler?).
There are some examples on using the Kendo Web version, but no complete examples out there that show using a custom pop-up editor with the scheduler that contains a dropdownlist pulling data from a URL (json data).
Is there an end-to-end example? I can load the scheduler with data. The issue is with the custom template and dropdownlist binding.
EDIT:
After searching extensively, I stumbled upon a "getting started" page from Telerik on using the Kendo UI Scheduler in ASP.NET MVC. They (Telerik) really need to do a better job cross-linking between Demos to Documentation to APIs and Examples (Here is the example)
I've also created a blog post that wraps everything for a Scheduler (from the database table to the Views), you can see that here.Kendo UI Scheduler with ASP.NET MVC and Peta Poco
The example shed some light which the demo and documentation do not do, like for instance, the ViewModel they use in their example online:
C# ViewModel
public class Projection : ISchedulerEvent
{
public string Title { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
public string Description { get; set; }
public bool IsAllDay { get; set; }
public string Recurrence { get; set; }
public string RecurrenceRule { get; set; }
public string RecurrenceException { get; set; }
// Custom Field
public int EventId { get; set; }
public int CustomerId { get; set; }
}
Your ViewModel that you use for the Scheduler must inherit from the ISchedulerEvent class or it will not work correctly.
Razor View
The Razor View is pretty straight-forward, although most of the demos you run across will show data getting passed via the server-side (from the controller). Here, I'm doing this via Ajax methods (Create, Read, Update, Destroy).
#(Html.Kendo().Scheduler<KendoUISchedulerDemo.Models.Projection>()
.Name("scheduler")
.Date(DateTime.Today)
.Height(600)
.DataSource(d => d
.Model(m =>
{
m.Id(f => f.EventId);
m.Field(f => f.Title);
m.Field(f => f.CustomerId);
m.Field(f => f.Description);
m.RecurrenceId(f => f.Recurrence);
})
.Read("Read", "Shared", new { Area = "Events" })
.Create("Create", "Shared", new { Area = "Events" })
.Destroy("Destroy", "Shared", new { Area = "Events" })
.Update("Update", "Shared", new { Area = "Events" })
)
.Events( events =>
{
events.Add("ABC.events.SchedulerAdd");
})
.Editable(edit =>
{
edit.TemplateId("schedulerTemplate");
})
)
The main point with using the datasource with ajax calls like above is that it allows us to put the methods in a separate controller so that we can keep the controller that is displaying the view clean.
Razor View - Kendo Template (for the pop-up editor of events)
This is the script block for the x-kendo-template that overwrites the default pop-up window when creating and editing events in the Kendo Scheduler. This script is pretty much the wild west and you can do whatever you want in it, and it is bound by default with the Kendo MVVM model. Take that with a grain of salt though because there is not a documented way to "extend" that ViewModel to properly put your datasources from custom drop down lists in the ASP.NET MVC wrapper (version) of the Scheduler. (This uses Twitter Bootstrap as well)
<script type="text/x-kendo-template" id="schedulerTemplate">
<div class="form-group">
<div class="col-md-5">
#Html.Label("title", "Title", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
<input class="k-textbox" data-bind="value: title" />
</div>
</div>
</div>
<div class="form-group mTop10">
#Html.Label("CustomerId", "Customer", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
<input id="CustomerId" class="w450" />
</div>
</div>
<div class="form-group mTop10">
<div class="left col-md-5">
#Html.Label("start", "Start", new { #class = "col-md-2 control-label left" })
<div class="col-md-10">
<input name="start" type="text" required data-type="date" data-role="datetimepicker" data-bind="value: start,invisible: isAllDay" />
<input name="start" type="text" required data-type="date" data-role="datepicker" data-bind="value: start,visible: isAllDay" />
</div>
</div>
<div class="left col-md-5">
#Html.Label("end", "End", new { #class = "col-md-2 control-label left" })
<div class="col-md-10">
<input name="end" type="text" required data-type="date" data-role="datetimepicker" data-bind="value: end ,invisible:isAllDay" />
<input name="end" type="text" required data-type="date" data-role="datepicker" data-bind="value: end ,visible:isAllDay" />
</div>
</div>
</div>
<div class="clear"></div>
<div class="form-group mTop10">
#Html.Label("isAllDay", "All Day", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
<input type="checkbox" name="isAllDay" data-type="boolean" data-bind="checked:isAllDay">
</div>
</div>
</script>
JsonResults (in Controller)
Here are the CRUD Json Results. The Create, Update and Destroy JsonResults have been trimmed for the example.
public virtual JsonResult Read([DataSourceRequest] DataSourceRequest request)
{
var data = new List<Projection>();
data.Add(new Projection()
{
EventId = 1,
Start = DateTime.Now.AddDays(-2),
End = DateTime.Now.AddDays(-2).AddHours(2),
IsAllDay = false,
CustomerId = 1,
Description = "Booked for plumbing",
Title = "Manchester Residence"
});
return Json(data.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
public virtual JsonResult Create([DataSourceRequest] DataSourceRequest request, Projection evt)
{
if (ModelState.IsValid)
{
// Other code here
}
return Json(new[] { evt }.ToDataSourceResult(request, ModelState));
}
public virtual JsonResult Update([DataSourceRequest] DataSourceRequest request, Projection evt)
{
if (ModelState.IsValid)
{
// Other code here
}
return Json(new[] { evt }.ToDataSourceResult(request, ModelState));
}
public virtual JsonResult Destroy([DataSourceRequest] DataSourceRequest request, Projection evt)
{
if (ModelState.IsValid)
{
// Other code here
}
return Json(new[] { evt }.ToDataSourceResult(request, ModelState));
}
JavaScript
Here is the JavaScript contained within a stand alone JS file that corresponds to my "Add" event for the Scheduler. I didn't show the "Edit" event as it is pretty much the same idea and you should be able to figure it out.
ABC.Events.SchedulerAdd = function (e) {
function GetCustomers(value) {
var url = "/Events/Shared/GetCustomers"
var success = function (result) {
if (result != null) {
$("#CustomerId").kendoDropDownList({
dataTextField: "FullName",
dataValueField: "CustomerId",
dataSource: new kendo.data.DataSource({ data: result })
});
}
};
$.ajax({ url: url, success: success });
}
GetCustomers();
};
One of the keys in this JavaScript function is that we are turning our field into a Kendo DropDownList and wiring our datasource up at the same time that we are receiving as a JsonResult (not shown, but it's a simple Json object). Another key is how we wire up the datasource as we are creating a new kendo.data.DataSource. If you try to simply wire up the JsonResult, it won't work.
Conclusion
This is a work around to fill dropdownlists in a Scheduler Template (pop-up) when using the ASP.NET MVC Wrapper version of the Kendo UI. I am open for a better way, in which I imagine it will be adding the Json list data to the Internal MVVM that the Kendo Scheduler uses, but without the documentation for ASP.NET MVC or examples of how to pull it off, this is a way it can work.
EDIT #2 - Telerik ASP.NET MVC Example
I finally heard back from Telerik Support on this issue and was directed to this link: http://www.telerik.com/support/code-library/custom-editor-9fd60fca3c02 There is a sample MVC project there that shows how to use a Custom Editor, Drop Down Lists with datasources, all within ASP.NET MVC. Why on Earth there is no link from the documentation to such projects that can obviously help is a mystery to me.
Did you manage to figure this out? I'm working on something similar and have managed to get some of this to work and I have a demo that might help. Mine is not 100% right now but I am getting there. I have a custom template linked to a resource. My issue is sometimes the model doesn't validate so I don't get a post back to the Jason method in the controller. Have you seen this example?