I have two models in Ember where one is a collection and the other is book. Collection model has a "hasMany" relationship with "book" and "book" "belongsTo" "collection". So what i want to do is have a form with both models in and store them at the same time.
Collection Model
// collection Model
export default DS.Model.extend({
name: DS.attr('string'),
city: DS.attr('string'),
books: DS.hasMany('book', { async: true })
});
The book model
//book Model
export default DS.Model.extend({
title: DS.attr('string'),
description: DS.attr('string'),
collection: DS.belongsTo('collection', {async: true})
});
The form
//Collection View
<div class="row">
<div class="col-sm-12">
<div class='panel panel-default'>
<div class='panel-body'>
<form>
<fieldset>
<legend>
Collection
</legend>
<div class="row">
<div class="col-sm-6">
<label for="name" class="col-sm-2">Name</label>
<div class="col-sm-10">
{{input id="name" type="text" class="form-control" value=collection.name}}
</div>
</div>
<div class="col-sm-6">
<label for="city" class="col-sm-2">city</label>
<div class="col-sm-10">
{{input id="city" type="text" class="form-control" value=collection.city}}
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>
books
</legend>
<div class="row">
<div class="col-sm-6">
<label for="title1" class="col-sm-2">title</label>
<div class="col-sm-10">
{{input id="title1" type="text" class="form-control" value=book.title1}}
</div>
</div>
<div class="col-sm-6">
<label for="description1" class="col-sm-2">description</label>
<div class="col-sm-10">
{{input id="description1" type="text" class="form-control" value=book.description1}}
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label for="title2" class="col-sm-2">title</label>
<div class="col-sm-10">
{{input id="title2" type="text" class="form-control" value=book.title2}}
</div>
</div>
<div class="col-sm-6">
<label for="description2" class="col-sm-2">description</label>
<div class="col-sm-10">
{{input id="description2" type="text" class="form-control" value=book.description2}}
</div>
</div>
</div>
</fieldset>
<div class="row">
<div class="col-sm-12">
<button {{action 'addCollection'}} class="btn btn-primary">New Collection</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
The controller:
actions:{
addCollection: function(){
var name = this.get('collection.name');
var city = this.get('collection.city');
var title1 = this.get('book.title1');
var description1 = this.get('book.description1');
var title2 = this.get('book.title2');
var description2 = this.get('book.description2');
var newCollection = this.store.createRecord('collection', {
name: name,
city: city,
});
},
As you can see I'm trying to obtain 2 sets of books for this collection, but I'm having trouble on finding the correct procedure to store items to these models. I guess I may have to store the collection model first and then push the individual books to the collection. Is this correct? How would I go about it?
If the book is a record already you can simply push it onto the new collection. You don't don't need to assign anything to variables since your template is already bound to the record.
As an improvement I'd suggest creating the collection before the add as well. Either within your model, or on controller initiation.
So the action could be as simple as this.
actions:{
addCollection: function(){
// newCollection and Book need to be records
this.get("newCollection").pushObject(this.get('book'));
},
}
Note: the createRecord will not persist until you call .save() but you do not need to call .save() to create a relationship.
Forgive me for not noticing the multiple new books, here is a more pertinent example.
// template.hbs
<div class="row">
<div class="col-sm-12">
<div class='panel panel-default'>
<div class='panel-body'>
<form>
<fieldset>
<legend>
Collection
</legend>
<div class="row">
<div class="col-sm-6">
<label for="name" class="col-sm-2">Name</label>
<div class="col-sm-10">
{{input id="name" type="text" class="form-control" value=model.newCollection.name}}
</div>
</div>
<div class="col-sm-6">
<label for="city" class="col-sm-2">city</label>
<div class="col-sm-10">
{{input id="city" type="text" class="form-control" value=model.newCollection.city}}
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>
books
</legend>
<div class="row">
<div class="col-sm-6">
<label for="title1" class="col-sm-2">title</label>
<div class="col-sm-10">
{{input id="title1" type="text" class="form-control" value=model.book1.title}}
</div>
</div>
<div class="col-sm-6">
<label for="description1" class="col-sm-2">description</label>
<div class="col-sm-10">
{{input id="description1" type="text" class="form-control" value=model.book1.description}}
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label for="title2" class="col-sm-2">title</label>
<div class="col-sm-10">
{{input id="title2" type="text" class="form-control" value=model.book2.title}}
</div>
</div>
<div class="col-sm-6">
<label for="description2" class="col-sm-2">description</label>
<div class="col-sm-10">
{{input id="description2" type="text" class="form-control" value=model.book2.description}}
</div>
</div>
</div>
</fieldset>
<div class="row">
<div class="col-sm-12">
<button {{action 'addCollection' model}} class="btn btn-primary">New Collection</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
// route.js
model () {
return Ember.RSVP.hash({
newCollection: this.get('store').createRecord('collection'),
book1: this.get('store').createRecord('book'),
book2: this.get('store').createRecord('book')
})
}
// controller.js
actions:{
addCollection(model) {
model.newCollection.pushObject(model.book1);
model.newCollection.pushObject(model.book2);
},
}
Notice I've used the model to create the records before hand and it's being passed into the action. You still may need to save for these changes to persist.
Related
I have modal form with multiple inputs. If i put wire:ignore.self, valdiations or submit method just running first time.
<div class="modal fade" tabindex="-1" id="formModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<form class="form">
<div class="fv-row row mb-5">
<div class="col">
<input type="text" class="form-control" wire:model="firstname"/>
#error('firstname')
<div class="fv-plugins-message-container invalid-feedback">
{{ $message }}
</div>
#enderror
</div>
<div class="col">
<input type="text" class="form-control" wire:model="lastname" />
#error('lastname')
<div class="fv-plugins-message-container invalid-feedback">
{{ $message }}
</div>
#enderror
</div>
</div>
</form>
</div>
</div>
</div>
i tried wire:ignore.self and wire:model.defer. Validations just running first time.
Just add wire:ignore.self at the div modal element, also add wire:model.defer for each livewire input.
Your code will be like this:
<div class="modal fade" tabindex="-1" id="formModal" wire:ignore.self>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<form class="form">
<div class="fv-row row mb-5">
<div class="col">
<input type="text" class="form-control" wire:model.defer="firstname"/>
#error('firstname')
<div class="fv-plugins-message-container invalid-feedback">
{{ $message }}
</div>
#enderror
</div>
<div class="col">
<input type="text" class="form-control" wire:model.defer="lastname" />
#error('lastname')
<div class="fv-plugins-message-container invalid-feedback">
{{ $message }}
</div>
#enderror
</div>
</div>
</form>
</div>
</div>
</div>
I Used this Script in my camunda form:
<form name="customerForm" role="form">
<script cam-script type="text/form-script">
var customerData = $scope.customerData = {
addresses : []
};
$scope.addAddress = function() {
customerData.addresses.push({});
};
camForm.on('form-loaded', function() {
camForm.variableManager.createVariable({
name: 'customerData',
type: 'Object',
value: customerData,
valueInfo: {
serializationDataFormat: 'application/json',
objectTypeName: 'org.camunda.bpm.spring.boot.example.twitter.CustomerData'
}
});
});
camForm.on('submit', function() {
angular.forEach(customerData.addresses, function(addr) {
delete addr.$$hashKey;
});
});
</script>
<h3>Customer Data</h3>
<div class="control-group">
<label class="control-label" for="firstname">First Name</label>
<div class="controls">
<input id="firstname"
class="form-control"
type="text"
required
ng-model="customerData.firstname">
</div>
</div>
<div class="control-group">
<label class="control-label" for="lastname">Last Name</label>
<div class="controls">
<input id="lastname"
class="form-control"
type="text"
required
ng-model="customerData.lastname">
</div>
</div>
<div class="control-group">
<label class="control-label" for="vip">Is VIP Customer</label>
<div class="controls">
<input id="vip"
class="form-control"
type="checkbox"
ng-model="customerData.vip">
</div>
</div>
<div>
<h3>Addresses</h3>
<a href
ng-click="addAddress()"
class="btn btn-default">Add</a>
<div ng-repeat="addr in customerData.addresses">
<hr>
<div class="control-group">
<label class="control-label" for="street">Street</label>
<div class="controls">
<input id="street"
class="form-control"
type="text"
required
ng-model="addr.street">
</div>
</div>
<div class="control-group">
<label class="control-label" for="zip">Zip</label>
<div class="controls">
<input id="zip"
class="form-control"
type="text"
required
ng-model="addr.zipCode">
</div>
</div>
<div class="control-group">
<label class="control-label" for="city">City</label>
<div class="controls">
<input id="city"
class="form-control"
type="text"
required
ng-model="addr.city">
</div>
</div>
<div class="control-group">
<label class="control-label" for="country">Country</label>
<div class="controls">
<select id="country"
class="form-control"
required
ng-model="addr.country">
<option>Germany</option>
<option>France</option>
<option>Italy</option>
<option>Luxembourg</option>
</select>
</div>
</div>
</div>
</div>
</form>
and I got this error
The process could not be started. :
Cannot instantiate process definition createRating:1:1eed70bf-e4ba-11ec-afcd-764adfcc4004: Cannot find serializer for value 'ObjectValue [value=null, isDeserialized=false, serializationDataFormat=application/json, objectTypeName=org.camunda.bpm.spring.boot.example.twitter.CustomerData, serializedValue=130 chars, isTransient=false]'.
how can I fix it?
Note: objectTypeName is correct I checked it
Most likely reason is that the distribution you are using does not include the CAMUNDA SPIN libraries.
See:
https://docs.camunda.org/manual/7.17/user-guide/data-formats/
and
https://docs.camunda.org/manual/7.17/user-guide/data-formats/json/
If you are using Maven, add:
<dependency>
<groupId>org.camunda.bpm</groupId>
<artifactId>camunda-engine-plugin-spin</artifactId>
</dependency>
<dependency>
<groupId>org.camunda.spin</groupId>
<artifactId>camunda-spin-dataformat-all</artifactId>
</dependency>
I have a problem with my code the select2 is displaying only once when I refresh the page but it disappears when I submit the form or if there was a validation error it will disappear too. I tried wire:ignore The select2 doesn't disappear but it stops working properly and the form considered it like if it doesn't exist.
I use laravel 8, livewire 2 and turbolinks. Any help would be appreciated I've been stuck for almost 2 weeks.
Here is my code :
Blade:
<form wire:submit.prevent="submit">
{{ csrf_field() }}
<div class="form-group row">
<label for="to" class="col-form-label col-md-1">à :</label>
<div class="col-md-11" >
<select class="form-control mul-select" wire:model.lazy="id_to" name="id_to[]" multiple="multiple">
<option value="test#gmail.com">test#gmail.com</option>
<option value="test5#gmail.com">test5#gmail.com</option>
</select>
<div class="text-danger">
#error('id_to')
<span>
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
</div>
<div class="form-group row">
<label for="cc" class="col-form-label col-md-1">Cc :</label>
<div class="col-md-11">
<input type="text" class="form-control" wire:model.lazy="cc" name="cc" placeholder="Cc">
<div class="text-danger">
#error('cc')
<span>
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
</div>
<div class="form-group row">
<label for="sujet" class="col-form-label col-md-1">Sujet :</label>
<div class="col-md-11">
<input type="text" class="form-control" wire:model.lazy="sujet" name="sujet" placeholder="Sujet">
<div class="text-danger">
#error('sujet')
<span>
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
</div>
<div class="form-group row">
<label for="message" class="col-form-label col-md-1">Message :</label>
<div class="col-md-11">
<textarea class="form-control" name="message" wire:model.lazy="message" rows="8"></textarea>
<div class="text-danger">
#error('message')
<span>
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
</div>
{{-- <div class="email-editor">
<textarea class="form-control" id="summary-ckeditor" name="summary-ckeditor" wire:model.lazy="message"></textarea>
<div class="text-danger">
#error('message')
<span>
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div> --}}
<div class="email-action mt-3">
<button class="btn btn-primary" type="submit">Envoyer</button>
<button class="btn btn-warning" wire:click="resetForm">Reset</button>
</div>
</form>
<script type="text/javascript">
document.addEventListener("livewire:load", function (event) {
$(document).ready(function() {
$('.mul-select').select2();
});
});
</script>
Component:
public $id_to, $id_from, $sujet, $cc, $message;
public $rules=[
'id_to' => 'required',
'id_from' => '',
'cc' => '',
'sujet' => 'required|max:30',
'message' => 'required|max:155',
];
public function render()
{
return view('livewire.admin.messages.messages');
}
public function submit()
{
$validateData=$this->validate();
$to_email=User::where('email', $validateData['id_to'])->first();
Mail::send(array(), array(), function ($message) {
$validateData=$this->validate();
$emails=$validateData['id_to'];
foreach($emails as $email)
{
$message->to($email)
->subject($validateData['sujet'])
->from(Auth::user()->email, 'ADMIN')
->setBody($validateData['message']);
}
});
$validateData['id_from']=Auth::user()->id;
$validateData['id_to']= implode(",", $to_email->id);
SendMessage::create($validateData);
session()->flash('success', 'data has been sent successfully');
$this->resetForm();
}
public function resetForm()
{
$this->id_to = '';
$this->cc = '';
$this->sujet = '';
$this->message = '';
}
Here is a simple way to achieve that
<div class="col-md-11">
<div wire:ignore> // this will make sure to ignore DOM changes
<select
class="form-control"
id="mul-select"
name="id_to[]"
multiple="multiple"
>
<option value="test#gmail.com">test#gmail.com</option>
<option value="test5#gmail.com">test5#gmail.com</option>
</select>
</div>
<div class="text-danger">
#error('id_to')
<span>
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
And then outside of your component root tag make sure you push this script to your layout
#push('scripts')
<script>
$(document).ready(function () {
$('#mul-select').select2();
$(document).on('change', '#mul-select', function (e) {
//when ever the value of changes this will update your PHP variable
#this.set('id_to', e.target.value);
});
});
</script>
#endpush
Finally, on your layout file append the pushed script like this just before closing your body tag
#stack('scripts')
</body
Normally for select2 in Livewire I use hydration for element's rerender.
<div class="form-group row" wire:ignore.self> // I'm not sure about this it's necessary
<label for="to" class="col-form-label col-md-1">à :</label>
<div class="col-md-11" >
<select class="form-control mul-select" wire:model.lazy="id_to" name="id_to[]" multiple="multiple">
<option value="test#gmail.com">test#gmail.com</option>
<option value="test5#gmail.com">test5#gmail.com</option>
</select>
<div class="text-danger">
#error('id_to') <span><strong>{{ $message }}</strong></span> #enderror
</div>
</div>
</div>
//......
<script>
$(document).ready(function() {
window.initSelectDrop=()=>{
$('.mul-select').select2({
placeholder: '{{ __('locale.Select') }}',
allowClear: true});
}
initSelectDrop();
$('.mul-select').on('change', function (e) {
livewire.emit('selectedCompanyItem', e.target.value)
});
window.livewire.on('select2',()=>{
initSelectDrop();
});
});
</script>
in component
public function hydrate()
{
$this->emit('select2');
}
protected $listeners = [
'selectedCompanyItem'
];
public function selectedCompanyItem($value)
{
dd($value);
}
'''
My problem is database values can't stored properly
In below I uploded views functions file,model file as an images. so in model there are three fields but database stored only image stored and other vlaues strored by default get null values so can you help to solving my problem..
'''
userproblem.html
<form method="POST" action="/uploadoc/" enctype="multipart/form-data" data-toggle="validator">
{% csrf_token %}
<div id="progressbarwizard">
<ul class="nav nav-pills bg-light nav-justified form-wizard-header mb-3">
<li class="nav-item">
<a href="#account-2" data-toggle="tab" class="nav-link rounded-0 pt-2 pb-2">
<i class="mdi mdi-account-circle mr-1"></i>
<span class="d-none d-sm-inline">Query Form</span>
</a>
</li>
</ul>
<div class="tab-content b-0 mb-0">
<div class="tab-pane" id="account-2">
<div class="row">
<div class="col-md-5">
<label class="col-md-12 col-form-label">Query Types:
<span class="text-danger">*</span></label>
<div class="col-md-8">
<input type="text" class="form-control" data-validate="true" name="queryn" placeholder="Enter Query Types">
</div>
</div>
<div class="col-md-5">
<label class="col-md-12 col-form-label">Description of Query:
<span class="text-danger">*</span></label>
<div class="col-md-12">
<textarea type="text" class="form-control" data-validate="true" name="querydec" placeholder="Description of Query"></textarea>
</div>
</div>
</div><!-- /.First row end --><br>
<div class="row">
<div class="col-md-5">
<label for="Emailadrress" class="col-md-12 col-form-label">Upload Your File:
<span class="text-danger"></span></label>
<div class="col-md-12">
<div class="input-group-append">
<input type="file" id="img" name="img" accept="image/*">
</div>
</div>
</div>
<div class="col-md-6">
<label for="Emailadrress" class="col-md-12 col-form-label">Solutions:
<span class="text-danger"></span></label>
<div class="col-md-12">
<div class="input-group-append">
<textarea type="text" name="querysol" placeholder="Solutions of Query"></textarea>
</div>
</div>
</div>
</div> <!-- /.second row end -->
</div><br>
<div class="row">
<div class="col-12">
<div class="text-center">
<div class="mb-3">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck3">
<button type="submit" class="btn btn-primary">
<i class="icon-user icon-white"></i> Submit
</button>
</div>
</div>
</div>
</div> <!-- end col -->
</div>
</div> </div>
</form>
'[This is error and views function file my model imagespage][1]
You are trying to set c variable from userProblemModel named POSTed data in your uploadoc view.
c = request.POST.get('userProblemModel')
But in your form in html side there is no userProblemModel named input tag. That is why you are getting None value in c variable.
I am implementing crud operation in my Ember project. I passed an object to the component and tried to use the same object for save, update action.
In route I created model as follows,
routes.js
model() {
return Ember.RSVP.hash({
employeeList : this.store.findAll("employee"),
employee : Ember.Object.create(),
});
}
component: employee-form.js
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-3" for="fname">First Name:</label>
<div class="col-sm-8">
{{input type="text" value=model.firstName placeholder="First Name"}}
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="lname">Last Name:</label>
<div class="col-sm-8">
{{input type="text" value=model.lastName placeholder="Last Name" }}
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="email">Email:</label>
<div class="col-sm-8">
{{input type="text" value=model.email placeholder="Email" }}
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="department">Department: </label>
<div class="col-sm-8">
{{input type="text" value=model.department placeholder="Department" }}
</div>
</div>
</form>
I am passing object to component as follows,
Template.hbs
{{employee-form model=model.employee}}
I need to clear the attributes data in object for using it for different operation. I tried to replace the model object with a new ember object and it worked. But I don't think it is a nice way to do, as it is creating new object always.
this.set("model", Ember.Object.create());
Can anyone help me with best approach to clear ember object attributes values.
Use rollbackAttributes()
RollbackAttributes -
If the model hasDirtyAttributes this function will discard any unsaved changes. If the model isNew it will be removed from the store.
model.rollbackAttributes();