File size: 8.28Kb
class FormGenerator{
constructor(formClassName = null){
this.fieldType = null;
this.totalField = 0;
if (this.formClassName) {
this.formClassName = '.'+formClassName;
}else{
this.formClassName = '.generate-form';
}
}
extraFields(fieldType){
this.fieldType = fieldType;
var addNew = '';
if (this.fieldType == 'file') {
var field = `<select class="select2-multi-select" name="extensions" multiple>
<option value="jpg">JPG</option>
<option value="jpeg">JPEG</option>
<option value="png">PNG</option>
<option value="pdf">PDF</option>
<option value="doc">DOC</option>
<option value="docx">DOCX</option>
<option value="txt">TXT</option>
<option value="xlx">XLX</option>
<option value="xlsx">XLSX</option>
<option value="csv">CSV</option>
</select>`;
var title = `File Extensions <small class="text--danger">*</small> <small class="text-primary">(Separate each element by comma)</small>`;
}else{
var field = `<input type="text" name="options[]" class="form-control" required>`;
addNew = `<button type="button" class="btn btn-sm btn--primary addOption"><i class="las la-plus me-0"></i></button>`;
var title = `Add Options`;
}
var html = `
<div class="d-flex justify-content-between flex-wrap">
<label>${title}</label>
${addNew}
</div>
<div class="options mt-2">
<div class="form-group">
<div class="input-group">
${field}
</div>
</div>
</div>
`;
if(this.fieldType == 'text' || this.fieldType == 'textarea' || this.fieldType == ''){
html = '';
}
return html;
}
addOptions(){
return `
<div class="form-group">
<div class="input-group">
<input type="text" name="options[]" class="form-control" required>
<button class="btn btn--danger input-group-text removeOption"><i class="las la-times"></i></button>
</div>
</div>
`;
}
formsToJson(form){
var extensions = null;
var options = [];
this.fieldType = form.find('[name=form_type]').val();
if(this.fieldType == 'file'){
extensions = form.find('[name=extensions]').val();
}
if(this.fieldType == 'select' || this.fieldType == 'checkbox' || this.fieldType == 'radio'){
var options = $("[name='options[]']").map(function(){return $(this).val();}).get();
}
var formItem = {
type:this.fieldType,
is_required:form.find('[name=is_required]').val(),
label:form.find('[name=form_label]').val(),
extensions:extensions,
options:options,
old_id:form.find('[name=update_id]').val()
};
return formItem;
}
makeFormHtml(formItem,updateId){
if (formItem.old_id) {
updateId = formItem.old_id;
}
var hiddenFields = `
<input type="hidden" name="form_generator[is_required][]" value="${formItem.is_required}">
<input type="hidden" name="form_generator[extensions][]" value="${formItem.extensions}">
<input type="hidden" name="form_generator[options][]" value="${formItem.options}">
`;
var formsHtml = `
${hiddenFields}
<div class="card-body">
<div class="form-group text-end">
<button type="button" class="btn btn--primary editFormData" data-form_item='${JSON.stringify(formItem)}' data-update_id="${updateId}"><i class="las la-pen"></i></button>
<button type="button" class="btn btn--danger removeFormData"><i class="las la-times"></i></button>
</div>
<div class="form-group">
<label>Label</label>
<input type="text" name="form_generator[form_label][]" class="form-control" value="${formItem.label}" readonly>
</div>
<div class="form-group">
<label>Type</label>
<input type="text" name="form_generator[form_type][]" class="form-control" value="${formItem.type}" readonly>
</div>
</div>
`;
var html = `
<div class="col-md-4">
<div class="card border mb-3" id="${updateId}">
${formsHtml}
</div>
</div>
`;
if(formItem.old_id){
html = formsHtml;
$(`#${formItem.old_id}`).html(html);
}else{
$('.addedField').append(html);
}
}
formEdit(element){
this.showModal()
var formItem = element.data('form_item');
var form = $(this.formClassName);
form.find('[name=form_type]').val(formItem.type);
form.find('[name=form_label]').val(formItem.label);
form.find('[name=is_required]').val(formItem.is_required);
form.find('[name=update_id]').val(element.data('update_id'))
var html = '';
if (formItem.type == 'file') {
html += `
<div class="d-flex justify-content-between flex-wrap">
<label>File Extensions <small class="text--danger">*</small> <small class="text-primary">(Separate each element by comma)</small></label>
</div>
<div class="mt-2">
<div class="form-group">
<select class="select2-multi-select" name="extensions" multiple>
<option value="jpg">JPG</option>
<option value="jpeg">JPEG</option>
<option value="png">PNG</option>
<option value="pdf">PDF</option>
<option value="doc">DOC</option>
<option value="docx">DOCX</option>
<option value="txt">TXT</option>
<option value="xlx">XLX</option>
<option value="xlsx">XLSX</option>
<option value="csv">CSV</option>
</select>
</div>
</div>
`;
}
var i = 0;
var optionItem = '';
formItem.options.forEach(option => {
var isRemove = '';
if(i != 0){
isRemove = `
<button class="btn btn--danger input-group-text removeOption"><i class="las la-times"></i></button>
`;
}
if (i==0) {
html += `
<div class="d-flex justify-content-between flex-wrap">
<label>Add Options</label>
<button type="button" class="btn btn-sm btn--primary addOption"><i class="las la-plus me-0"></i></button>
</div>
`;
}
i += 1;
optionItem += `
<div class="form-group">
<div class="input-group">
<input type="text" name="options[]" value="${option}" class="form-control" required>
${isRemove}
</div>
</div>
`;
});
if (formItem.type != 'file') {
html += `
<div class="options mt-2">
${optionItem}
</div>
`;
}
$('.generatorSubmit').text('Update');
$('.extra_area').html(html);
$('.extra_area').find('select').val(formItem.extensions);
}
resetAll(){
$(formGenerator.formClassName).trigger("reset");
$('.extra_area').html('');
$('.generatorSubmit').text('Add');
$('[name=update_id]').val('');
}
closeModal(){
var modal = $('#formGenerateModal');
modal.modal('hide');
}
showModal(){
this.resetAll();
var modal = $('#formGenerateModal');
modal.modal('show');
}
}