i currently building a react app with ant-design UI. I have a problem regarding form. So far, i already able to create and submit normal form. But as i tried to create a more complex form, i faced these problem:
I want to create a form with input like this:
code: string,
name: string,
order: {
itemid: number,
qty: number
}
the 'order' part is an array, which means i can have more than 1 order in one form. I want to create that part of the form by using component in antd, where i can render the column like this:
{ title: L('Item Id'), width: 150, render: (text: string, item: any, index: any) => (
<Form.Item {...formItemLayout}>
{getFieldDecorator('order[' + index + '].itemid', {
rules: [{
required: true, message: 'Please select id!'
}]
})(
<ItemIdSelectInput/>
)}
</Form.Item>
) }
Can i use the table like that?
Also, as far as i know, component must have a 'datasource' in order to be used, while i want to create a 'Create' form where has no initial value (empty). Is there any reference or a better way to create this kind of form in antd? Thanks in advance!
Related
I'm working on app based on Symfony 4 with Select2 library.
In my src/Form/PostType.php file I declared field tag, where user should be able to set one of predeclared Tag or add new one (by type tag name and press enter).
$builder
->add('tags', EntityType::class, [
'class' => Tag::class,
'choice_label' => 'name',
'mapped' => false,
'expanded' => false,
'multiple' => true,
'required' => false,
]);
From the frontend side I'm using select2 library to handle with displaying tags field.
In below example fist tag was chosen from the existed entity in database, the second one should be saved in this second.
Any idea what should I changed into filed declaration to make this field valid also for new tags?
Controller is ready, only issue is to pass form validation :)
EDIT:
Relations in ORM looks like this:
class Company {
/**
* #ORM\ManyToMany(targetEntity="App\Entity\Tag", mappedBy="companies")
*/
private $tags;
}
class Tag
{
/**
* #ORM\ManyToMany(targetEntity="App\Entity\Company", inversedBy="tags")
*/
private $companies;
}
and there is no other validation than in code above
You have set the field to be mapped = false. If a field is unmapped you have to handle form validation manually. Can you share your Entities code , any validation code if it's written?
Complete newbie to web2py... I want to make the check box at the bottom of the form appear conditionally only if a user is an admin-user. How can I address the name of the field so that I can change if a a non admin user doesn't see it?
I'm using a for loop to have a looping variable to reference, not sure that i need it...
## create all tables needed by Technical Request Form
db.define_table('technical_request',
Field('uuid', 'string', default=uuid.uuid4(), readable=False, writable=False),
Field('firstname', requires=IS_NOT_EMPTY(error_message='All Fields are Required!'), label="First Name"),
Field('lastname', requires=IS_NOT_EMPTY(error_message='All Fields are Required!'), label="Last Name"),
Field('phone', requires=IS_NOT_EMPTY(error_message='All Fields are Required!'), label="Phone Number"),
Field('email', requires=IS_NOT_EMPTY(error_message='All Fields are Required!'), label="Email"),
Field('issue_name', requires=IS_NOT_EMPTY(error_message='All Fields are Required!'),label="Subject"),
Field('about_issue', 'text', requires=IS_NOT_EMPTY(error_message='All Fields are Required!'), label="Description of issue "),
Field('issue', 'upload', label="Attach Files "),
Field('request_processed', 'boolean', default=False, readable = False),
auth.signature)
for field in db.technical_request:
if field.name == 'request_processed' and auth.has_group_membership("systemadmin"):
field.readable = True
This is the check box I want to hide ....
Follow up question *
Is there a way I can conditionally add the Field?
No need to loop -- you can just access the field directly via its name:
db.technical_request.request_processed.readable = auth.has_group_membership("systemadmin")
Or just do it when defining the field:
Field('request_processed', 'boolean', default=False,
readable=auth.has_group_membership("systemadmin"))
I have two entities: Event and Person.
I have both gsp pages that allows me to create events and persons. In Event page, I have the possibility to select an existing person, or I can insert name, surname and phone number.
I would have a button that, if that three fields are filled, allows me to jump to create page of Person, with that three fields filled with data inserted in Event page.
I've tried with tag as follows:
<g:link controller="patient" action="create"
params="[name: eventInstance.patientName, surname: eventInstance.patientSurname,
phone_1: eventInstance.phoneNumber]">link</g:link>
but in this way parameters are empty.
Any suggestion?
EDIT:
I've tried the following:
<g:actionSubmit value="createPatient" action="createPatient"></g:actionSubmit>
and the action is:
def createPatient()
{
def eventInstance = new Event(params)
println("params are "+ params)
redirect(controller: "patient", action: "create", params: [name: "name", surname:
"surname", phone_1: "025-84569"] )
}
In this way, the Create action is performed and I see the gsp page with form prefilled with parameter passed. The fact is that params has not the values that I want to pass to create.gsp (values needed are patientName, patientSurname and phoneNumber). Infact, the println() shows me:
params are [_action_createPatient:createPatient, recurInterval:1, recurCount:,
recurType:DAILY, endTime:, recurEndOption:never, recurUntil:, startTime:, title:,
patient_textField:, healthService.id:1, healthService:[id:1], patientName:,
phoneNumber:, description:, _recurDaysOfWeek:[, , , , , , ], patientSurname:,
patient_id:, action:save, controller:event]
DEBUG: -------------------------------
DEBUG: Ember : 1.2.0
DEBUG: Ember Data : 1.0.0-beta.4
DEBUG: Handlebars : 1.1.2
DEBUG: jQuery : 1.10.2
DEBUG: -------------------------------
My model like this:
App.Order = DS.Model.extend
lists: DS.hasMany('list', async: true)
total: DS.attr 'number'
App.List = DS.Model.extend
order: DS.belongsTo 'order'
price: DS.attr 'number'
number: DS.attr 'number'
totalPrice: DS.attr 'number'
and the Order show Route:
App.OrderRoute = Em.Route.extend
model: (params)->
#store.find 'order', params.order_id
I can create and update the list in the order show page, when I create a list like this:
new_list = #store.createRecord('list', {"price": 5, "number": 1})
new_list.save().then (model) =>
#content.get('lists').pushObject model
The totalPrice is price * number but it calculate in the server, so create will return totalPrice from the server.
But the Order column total is plus all the List column totalPrice, so when I create the List my server will update Order total, but my web side could not see anythings were update. I must refresh the page will see the total update.
So, my first problem is:
How can use ember data to reload the Order total when the List is created?
And then when I update the list what is I create, the code like this:
Order show templates
{{#each lists itemController='list'}}
{{input type="text" value=price class="form-control"}}
{{input type="text" value=number class="form-control"}}
<a href="#" {{action 'editList'}} class="btn btn-primary btn-xs">
edit
</a>
{{/each}}
List Controller:
editList: ->
#content.set('price', #get('price'))
#content.set('number', #get('number'))
#content.save().then( (list)=>
return list
, ()->
alert 'Wrong!'
)
Nothing return in the server, when the list is update, and my problem is:
How can use ember data to reload the List totalPrice when the List is update? Because the totalPrice to calculate in the server.
I think all the problems can use the ember data reload() or use ember observes, but I don't know how to use them is the best way. Or have a convenient way to solve the problems?
Thanks in advance.
I suggest you try to use computed properties. That might solve this issue.
http://emberjs.com/guides/object-model/computed-properties/
There is a pretty bootstrap editor - Bootstrap WYSIWYG, which i want to use in my blog based on RoR 4.0. The problem is that Bootstrap WYSIWYG does not work with anything except DIV tag (as far as i know from a bit searching).
This code works fine:
<div id="editor" contenteditable="true">some editable content</div>
And this one doesnt:
<%= f.text_area :content, id: "editor", contenteditable: "true" %>
<textarea id="editor" contenteditable="true">
So, the question is - how to connect this two things together?
have you tried putting a hidden field, working with the div and when the editor have changes update the hidden field value? Hope this helps
In order to integrate Bootstrap-WYSIWYG in a Ruby on Rails app you should do the following:
(most of the times - you have more than one editor in a rails form, in this example I will show how to do it without errors)
I will use the editor in the admin namespace, therefore I have created a folder editor inside my views: "admin/shared/editor" to keep everything tide and content oriented.
Firstly, for every attribute of a model I would like to use the Bootstrap WYSIWYG editor I will render a partial with the field that has integrated the editor, so you might have smth like this:
/admin/posts/_form.html.haml:
= form_for #post do |f|
= render partial: 'admin/shared/editor/field', locals: { f: f, content: "summary" }
= f.button class: "form_with_editor"
were you pass as a local parameter the form and the attribute of the model you would like to apply the editor (in this case => summary). Note also that you should add a class to the submit button of the form: .form_with_editor, that will be used later for the button click listener.
Now inside admin/shared/editor/_field.html.haml:
.btn-toolbar.btn-editor{"data-role" => "editor-toolbar", "data-target" => "#editor_area_for_#{content}"}
= render partial: 'admin/shared/editor/toolbar'
.wysiwyg{id: "editor_area_for_#{content}", style: "overflow:auto; height:444px;max-height:444px", data: {"for-content" => "hidden_#{content}"}}
= f.hidden_field content.to_sym, id: "hidden_#{content}"
This editor works with a div and not with a textarea, therefore, we will be using a div with class .wysiwyg and a dynamic id which in this case evaluates to: #editor_area_for_summary
The class: .wysiwyg is used in order to select all the divs with this class when we initialize the editor in our doc ready function.
The toolbar partial contains all the markup for the custom toolbar of the editor, you can customize it as you wish and use it in all your fields.
In order to copy the contents of the div to the form input and post them to the server, you have to use a hidden input field:
= f.hidden_field content.to_sym, id: "hidden_#{content}"
Note: it also gets a dynamic id(which evaluates to: "hidden_summary") and a name -> :summary
Now in order to make all these to work together we need some javascript on your doc ready function:
/assets/javascripts/doc_ready.js:
$( document ).ready(function() {
// EDITOR stuff
$('.wysiwyg').wysiwyg();
// Handling the form submission
$('.form_with_editor').click(function(){
$('.wysiwyg').each(function() {
var editor_div_content = $(this).html();
var hidden_input = $(this).attr("data-for-content");
$("#" + hidden_input).val(editor_div_content);
});
});
// Fill the editor divs with content
$('.wysiwyg').each(function() {
var hidden_input = $(this).attr("data-for-content");
var editor_div_content = $("#" + hidden_input).val();
$(this).html(editor_div_content);
});
});
On the first part we apply the function wysiwyg() of the editor in every div that has this class.
On the second part we have an on click handler of the form button we get the html content of the div and we set it as the value of our hidden input field.
And on the last part we do the opposite, we get the value of the hidden field and place it on the editors div when the document is ready, with this one we display content on the editor that is already stored in the database.
I hope this one helps :)