%PDF-
%PDF-
Mini Shell
Mini Shell
<% include partials/header %>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<% include partials/sidebar %>
<div class="app-content content">
<div class="content-wrapper">
<div class="content-header row">
</div>
<div class="content-body">
<!-- Breadcrumb starts-->
<div class="content-header row">
<div class="content-header-left col-md-6 col-12 mb-1">
<h2 class="content-header-title">Create Process</h2>
</div>
<div class="content-header-right breadcrumbs-right breadcrumbs-top col-md-6 col-12">
<div class="breadcrumb-wrapper col-12">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Home</a>
</li>
<li class="breadcrumb-item"><a href="#">Process</a>
</li>
<li class="breadcrumb-item active">Create Process</li>
</ol>
</div>
</div>
</div>
<!-- Breadcrumb ends-->
<div class="row">
<div class="col-12 col-md-9">
<!-- <div class="alert alert-primary" role="alert">
Flow Work Spaces
</div> -->
<!-- Form wizard with number tabs section start -->
<section id="number-tabs">
<div class="row">
<div class="col-12">
<div class="card">
<!-- <div class="card-header">
<h4 class="card-title">Create A Dinamic Process</h4>
<a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
<div class="heading-elements">
<ul class="list-inline mb-0">
<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
</ul>
</div>
</div> -->
<div class="card-content collapse show">
<div class="card-body">
<form action="#" class="number-tab-steps wizard-circle">
<!-- Step 1 -->
<h6>Step 1</h6>
<fieldset class="step1">
<hr>
<div class="mb-1 pt-2 text-left" >
<h4 class="col-sm-10 offset-1">Process Name:</h4>
<div class="form-group">
<input type="text" for="name" class="col-sm-10 offset-1 form-control dropped " id="maxlength-featured"
placeholder="Enter Process Name" maxlength="50" />
</div>
</div>
</fieldset>
<!-- Step 2 -->
<h6>Step 2</h6>
<fieldset class="step2">
</fieldset>
<!-- Step 3 -->
<h6>Review</h6>
<fieldset class="review mb1">
<div class="alert alert-info" role="alert">
Please review process before submission
</div>
<div class="col-sm-8 offset-2">
<h6 style="color: red">Process Details</h6>
<table class="table table-sm table-striped table-bordered">
<thead class="thead-light">
<th scope="col">
Field Type
</th>
<th scope="col">
Description
</th>
</thead>
<tbody class="checkit">
</tbody>
</table>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Form wizard with number tabs section end -->
</div>
<div class="col-6 col-md-3">
<div class="alert alert-info" role="alert">
Options
</div>
<div class="tools" id="tools">
<input type="button" for="text" class="form-control col-sm-10 offset-1 mb-1"
placeholder="Text" value="Text" maxlength="50"/>
<input type="button" for="textArea" class="col-sm-10 offset-1 form-control mb-1 "
placeholder="TeatArea" value="TextArea" maxlength="50"/>
<input type="button" for="email" class="col-sm-10 offset-1 form-control mb-1 "
placeholder="Email" value="Email" maxlength="50"/>
<input type="button" for="number" class="col-sm-10 offset-1 form-control mb-1 "
placeholder="Number" value="Number" maxlength="50"/>
<input type="button" for="staff" class="col-sm-10 offset-1 form-control mb-1 "
placeholder="Staff" value="Next Officer As Staff" maxlength="50"/>
<input type="button" for="unit" class="col-sm-10 offset-1 form-control mb-1 "
placeholder="Unit" value="Next Officer As Unit" maxlength="50"/>
<input type="button" for="department" class="col-sm-10 offset-1 form-control mb-1 "
placeholder="Department" value="Next Officer As Department" maxlength="50"/>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Form wizard with number tabs section end -->
</div>
<div class="col-6 col-md-3">
<div class="alert alert-info" role="alert">
Options
</div>
<div class="tools" id="tools">
<input type="button" for="text" class="form-control col-sm-10 offset-1 mb-1"
placeholder="Text" value="Text" maxlength="50"/>
<input type="button" for="textArea" class="col-sm-10 offset-1 form-control mb-1 "
placeholder="TeatArea" value="TextArea" maxlength="50"/>
<input type="button" for="email" class="col-sm-10 offset-1 form-control mb-1 "
placeholder="Email" value="Email" maxlength="50"/>
<input type="button" for="number" class="col-sm-10 offset-1 form-control mb-1 "
placeholder="Number" value="Number" maxlength="50"/>
<input type="button" for="staff" class="col-sm-10 offset-1 form-control mb-1 "
placeholder="Staff" value="Next Officer As Staff" maxlength="50"/>
<input type="button" for="unit" class="col-sm-10 offset-1 form-control mb-1 "
placeholder="Unit" value="Next Officer As Unit" maxlength="50"/>
<input type="button" for="department" class="col-sm-10 offset-1 form-control mb-1 "
placeholder="Department" value="Next Officer As Department" maxlength="50"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tools" id="tools">
<form action="structure/save_organization_structure" method="POST">
<div class="col-lg-12">
<div class="mb-1">
<!-- <h5 class="mb-0">Basic List Group</h5> -->
<small class="text-muted">Carefully arrange Structure in their Hierarchical order, remove the structures that are not applicable to you organization.</small>
</div>
<div class="card" id="Structure_list">
<ul class="list-group row" id="basic-list-group" >
<li class="list-group-item col-12">
Dapibus ac facilisis in
<span class="offset-6">
<span aria-hidden="true" class="btn btn-danger">×</span><input type="hidden" name="Structures[]" value="1">
<i class="icon-cursor-move btn btn-success font-medium-1"></i>
</span>
</li>
</ul>
</div>
</div>
</div>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<% include partials/footer %>
<script>
var drake = dragula([document.getElementById("steps-uid-0-p-0"), document.getElementById("tools")], {
copy: true
});
drake.on('drop', function(el, target, source, sibling){
var type = $(el).attr('for')
console.log("Target: ", target.tagName)
console.log("Source: ", source.tagName)
if(target.tagName === "FIELDSET"){
switch(type){
case 'text': $(el).attr('type', 'text'); break;
case 'email': $(el).attr('type', 'email'); break;
case 'textArea': $(el).attr('type', 'textarea'); break;
case 'staff' : $(el).attr('type', 'text'); break;
case 'unit': $(el).attr('type', 'text'); break;
case 'department': $(el).attr('type', 'text'); break;
case 'number': $(el).attr('type', 'number'); break;
}
$(el).val("")
}
// else {
// switch(type){
// case 'text': $(el).attr('type', 'button'); break;
// case 'email': $(el).attr('type', 'button'); break;
// case 'textArea': $(el).attr('type', 'button'); break;
// case 'staff' : $(el).attr('type', 'button'); break;
// case 'unit': $(el).attr('type', 'button'); break;
// case 'department': $(el).attr('type', 'button'); break;
// case 'number': $(el).attr('type', 'button'); break;
// }
// }
})
</script>
Zerion Mini Shell 1.0