231 lines
9.4 KiB
HTML
231 lines
9.4 KiB
HTML
<link rel="stylesheet" href="./modules/forms/css/form.css">
|
|
|
|
<section data-ng-controller="EditFormController">
|
|
<div ng-if="isNewForm">
|
|
<h1>Create your form</h1> <br>
|
|
<blockquote>
|
|
<p>Select field type you want to add to the form below and click on 'Add Field' button. Don't forget to set field properties. After you finish creating the form, you can preview the form by clicking Preview Form button.</p>
|
|
</blockquote>
|
|
</div>
|
|
<div ng-if="!isNewForm">
|
|
<h2>Edit your form</h2> <br>
|
|
</div>
|
|
|
|
|
|
<div class="well">
|
|
<div class="form-fields" ng-hide="previewMode">
|
|
<div class="form-properties row">
|
|
<div class="col-sm-12"><h3>Form Title</h3></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-4"><p style="margin-top:20px;"><input type="text" name="form-name" ng-disabled="previewMode" ng-model="form.title" style="width:200px; height:30px;"></p></div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h3>Fields</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="add-field col-md-3 col-sm-12">
|
|
<select ng-model="addField.new" ng-options="type.name as type.value for type in addField.types"></select>
|
|
<button type="submit" class="btn" ng-click="addNewField()">
|
|
<i class="icon-plus"></i> Add Field
|
|
</button>
|
|
</div>
|
|
|
|
<div class="col-sm-3 col-md-8 col-md-offset-1">
|
|
<p ng-show="form.form_fields.length == 0">No fields added yet.</p>
|
|
<accordion close-others="accordion.oneAtATime">
|
|
<accordion-group heading="{{field.title}}" ng-repeat="field in form.form_fields">
|
|
|
|
<div class="accordion-edit">
|
|
<button class="btn btn-danger pull-right" type="button" ng-click="deleteField(field.client_id)"><i class="icon-trash icon-white"></i> Delete</button>
|
|
|
|
<div class="row">
|
|
<div class="span2">Field ID: </div>
|
|
<div class="span4">{{field.client_id}}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="span2">Field Type:</div>
|
|
<div class="span4">{{field.fieldType}}</div>
|
|
</div>
|
|
|
|
<div class="clear"></div> <hr>
|
|
|
|
<div class="row">
|
|
<div class="span2">Field Title:</div>
|
|
<div class="span4"><input type="text" ng-model="field.title" value="{{field.title}}"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="span2">Field Default Value:</div>
|
|
<div class="span4"><input type="text" ng-model="field.fieldValue" value="{{field.fieldValue}}"></div>
|
|
</div>
|
|
<div class="row" ng-show="showAddOptions(field)">
|
|
<div class="span2">Field Options:</div>
|
|
<div class="span6">
|
|
<div ng-repeat="option in field.field_options">
|
|
<input type="text" ng-model="option.option_title" value="{{option.option_title}}">
|
|
<a class="btn btn-danger btn-mini right" type="button" ng-click="deleteOption(field, option)"><i class="icon-minus icon-white"></i></a>
|
|
<span class="label label-inverse">Value: {{ option.option_value }}</span>
|
|
</div>
|
|
<button class="btn btn-primary btn-small" type="button" ng-click="addOption(field)"><i class="icon-plus icon-white"></i> Add Option</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="clear"></div> <hr>
|
|
|
|
<div class="row">
|
|
<div class="span2">Required:</div>
|
|
<div class="span4">
|
|
<label>
|
|
<input type="radio" ng-value="true" ng-selected ng-model="field.required"/>
|
|
Yes
|
|
</label>
|
|
<label>
|
|
<input type="radio" ng-value="false" ng-model="field.required"/>
|
|
No
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="clear"></div> <hr>
|
|
|
|
<div class="row">
|
|
<div class="span2">Disabled:</div>
|
|
<div class="span4">
|
|
<label>
|
|
<input type="radio" ng-value="true" ng-selected ng-model="field.disabled"/>
|
|
Yes
|
|
</label>
|
|
<label>
|
|
<input type="radio" ng-value="false" ng-model="field.disabled"/>
|
|
No
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</accordion-group>
|
|
</accordion>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h3>Form PDF</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h5>Upload your PDF</h5>
|
|
</div>
|
|
<div class="col-sm-12">
|
|
<div class="input-group ">
|
|
<div tabindex="-1" class="form-control file-caption">
|
|
<span class="file-caption-ellipsis" ng-if="!form.pdf">…</span>
|
|
<div class="file-caption-name" ng-if="form.pdf">
|
|
{{form.pdf.originalname}}
|
|
</div>
|
|
</div>
|
|
<div class="input-group-btn">
|
|
<button type="button" ng-if="form.pdf" ng-click="removePDF();" title="Clear selected files" class="btn btn-danger fileinput-remove fileinput-remove-button">
|
|
<i class="glyphicon glyphicon-trash" ></i>
|
|
Delete
|
|
</button>
|
|
|
|
<button type="button" ng-if="pdfLoading" title="Abort ongoing upload" class="btn btn-default" ng-click="cancelUpload()">
|
|
<i class="glyphicon glyphicon-ban-circle"></i>
|
|
Cancel
|
|
</button>
|
|
|
|
<div class="btn btn-success btn-file" ngf-select ngf-change="uploadPDF($files)" ng-if="!form.pdf">
|
|
<i class="glyphicon glyphicon-upload"></i>
|
|
Upload your PDF
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h5>Autogenerate Form?</h5>
|
|
</div>
|
|
<br><br>
|
|
<div class="col-sm-4">
|
|
|
|
<label>
|
|
<input type="radio" data-ng-value="true" ng-model="form.isGenerated" ng-required="true" />
|
|
<span>Yes</span>
|
|
</label>
|
|
|
|
<label>
|
|
<input type="radio" data-ng-value="false" ng-model="form.isGenerated" ng-required="true" />
|
|
<span>No</span>
|
|
</label>
|
|
|
|
<!-- <span class="required-error" ng-show="field.required && !field.fieldValue">* required</span> -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" ng-if="form.isGenerated">
|
|
<div class="col-sm-12">
|
|
<h5>Save Submissions as PDFs?</h5>
|
|
</div>
|
|
<br><br>
|
|
<div class="col-sm-4">
|
|
|
|
<label>
|
|
<input type="radio" data-ng-value="true" ng-model="form.autofillPDFs" ng-required="true" />
|
|
<span>Yes</span>
|
|
</label>
|
|
|
|
<label>
|
|
<input type="radio" data-ng-value="false" ng-model="form.autofillPDFs" ng-required="true" />
|
|
<span>No</span>
|
|
</label>
|
|
|
|
<!-- <span class="required-error" ng-show="field.required && !field.fieldValue">* required</span> -->
|
|
</div>
|
|
</div>
|
|
|
|
<br><br>
|
|
<div class="row">
|
|
<div class="col-sm-offset-3 col-sm-2">
|
|
<button class="btn btn-primary btn-large" type="button" ng-click="createOrUpdate()"><i class="icon-arrow-left icon-white"></i> Save Changes</button>
|
|
</div>
|
|
<div class="col-sm-1">
|
|
<button class="btn btn-primary" type="button" ng-data-href="#!/forms/{{form._id}}/admin"><i class="icon-eye-open icon-white"></i> Cancel</button>
|
|
</div>
|
|
<div class="col-sm-1 col-sm-offset-1">
|
|
<button class="btn btn-secondary" type="button" ng-click="previewOn()"><i class="icon-eye-open icon-white"></i> Preview Form</button>
|
|
</div>
|
|
</div>
|
|
|
|
<br><hr>
|
|
|
|
|
|
<!-- <div class="text-center">
|
|
<a class="btn btn-small btn-primary" ng-show="!showJson" ng-click="showJson = true">Show form json object</a>
|
|
<a class="btn btn-small btn-inverse" ng-show="showJson" ng-click="showJson = false">Hide form json object</a><br><br>
|
|
</div>
|
|
|
|
<div ng-show="showJson">
|
|
<h4>Form object content:</h4>
|
|
<pre>{{ form | json }}</pre>
|
|
</div> -->
|
|
</div>
|
|
|
|
|
|
|
|
<div class="form-fields-preview" ng-show="previewMode">
|
|
<form-directive form="previewForm"></form-directive>
|
|
|
|
<p class="text-center">
|
|
<button class="btn btn-primary btn-large right" type="button" ng-click="previewOff()"><i class="icon-arrow-left icon-white"></i> Back to Create Mode</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</section> |