%PDF-
%PDF-
Mini Shell
Mini Shell
<% include ../partials/header %>
<% include ../partials/sidebar %>
<style>
.quick-btn {
background: #EEEEEE;
box-shadow: 0 0 0 1px #F8F8F8 inset, 0 0 0 1px #CCCCCC;
color: #444444;
display: inline-block;
height: 80px;
margin: 10px;
padding-top: 16px;
text-align: center;
text-decoration: none;
width: 90px;
position: relative;
}
.quick-btn span {
display: block;
}
.quick-btn .label {
position: absolute;
right: -5px;
top: -5px;
}
.quick-btn:hover {
text-decoration: none;
color: #fff;
background-color: #4d7589;
box-shadow: 3px 4px 1px #ccc;
}
.quick-btn.small {
width: 40px;
height: 30px;
padding-top: 6px;
}
</style>
<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-left col-md-6 col-12 mb-2">
<h3 class="content-header-title">Add New Flow</h3>
<div class="row breadcrumbs-top">
<div class="breadcrumb-wrapper col-12">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Dashboard</a>
<li class="breadcrumb-item"><a href="/">Business Process Flow</a>
</li>
<li class="breadcrumb-item active">Add New Flow
</li>
</ol>
</div>
</div>
</div>
<!-- Breadcrumb ends-->
<section id="flow_div" >
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<!-- <h4 class="card-title">DOM / jQuery events</h4> -->
<a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
<div class="heading-elements">
<ul class="list-inline mb-0">
<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 card-dashboard">
<div class="form-body">
<div class="form-group row">
<label class=" offset-sm-3 col-sm-2 form-control-label" for="inputName1">Structure</label>
<div class="col-sm-5">
<div <% /*class="position-relative has-icon-left " */ %> >
<select name="companyStructureId" id="companyStructureId" class="form-control">
<% structures.forEach( (structure) =>{ %>
<option class="form-control" placeholder="System Name" value="<%= structure.id %>"> <%= structure.name %></option>
<% }) %>
</select>
<div class="form-control-position pl-1"><!--<i class="la la-institution"></i>--></div>
</div>
</div>
</div>
<div class="form-group row">
<label class=" offset-sm-3 col-sm-2 form-control-label" for="inputName1">System Name</label>
<div class="col-sm-5">
<div <% /*class="position-relative has-icon-left " */ %> >
<input class="form-control" placeholder="System Name" name="name" id="flowName"/>
<div class="form-control-position pl-1"><!--<i class="la la-institution"></i>--></div>
</div>
</div>
</div>
<div class="form-group row">
<label class="offset-sm-3 col-sm-2 " for="inputDescription">System Description</label>
<div class="col-sm-5">
<div <% /*class="position-relative has-icon-left " */ %> >
<textarea class="form-control" placeholder="Description" name="description" id="description"></textarea>
<div class="form-control-position pl-1"><i class="la la-note"></i></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 row mb-1 btn-div">
<button class="btn btn-success offset-md-6 col-md-2" type="submit" onclick="saveFlow()"> Continue <i style="margin-left:5px;" class="la la-paper-plane-o"></i> </button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="stage_div" class="d-none">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title" id="repeat-form">Flow Stage <label id="_stage_label"></label></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="reload"><i class="ft-rotate-cw"></i></a></li>
<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
<li><a data-action="close"><i class="ft-x"></i></a></li>
</ul>
</div> -->
</div>
<div class="card-content collapse show">
<div class="card-body">
<label class=" col-sm-2 form-control-label" for="inputName1">Stage Title</label>
<div class="col-sm-7">
<div <% /*class="position-relative has-icon-left " */ %> >
<input class="form-control" placeholder="Stage Title" name="stageTitle" id="stageTitle"/>
<div class="form-control-position pl-1"><!--<i class="la la-institution"></i>--></div>
</div>
</div>
<br>
<div class="card-body">
<div class="repeater-default">
<div data-repeater-list="car">
<div data-repeater-item class="activities">
<form class="form row" id="columnsForm" name="columnsForm" method="POST">
<div class="form-group mb-1 col-7 ">
<label for="columns">Activity</label>
<br>
<textarea class="form-control columns" placeholder="Enter Detailed Activity expected" name="columns"> </textarea>
</div>
<div class="form-group col-sm-12 col-md-2 text-center mt-2">
<button type="button" class="btn btn-danger" data-repeater-delete> <i class="ft-x"></i> Delete</button>
</div>
</form>
<!-- <hr> -->
</div>
</div>
<div class="form-group overflow-hidden">
<div class="col-12">
<button data-repeater-create class="btn btn-primary">
<i class="ft-plus"></i> Add More Activity
</button>
</div>
</div>
</div>
</div>
<div class="card-footer">
<div class="form-group overflow-hidden">
<button data-repeater-create class="btn btn-info" id="nextStage">
Go to Next Stage<i class="ft-arrow-right" ></i>
</button>
<button data-repeater-create class="btn btn-success" onclick="finish()">
<i class="ft-check"></i> Finish
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<!---////////////////////////////////////////-->
<!-----Modal for creating new flow-->
<% include ../partials/footer %>
<script src="/app-assets/vendors/js/forms/repeater/jquery.repeater.min.js"></script>
<script src="/app-assets/js/scripts/forms/form-repeater.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.js"></script>
<script>
let flow;
let currentStage = 0;
function saveFlow(){
var flowName = $("#flowName").val();
var description = $("#description").val();
var companyStructureId = $("#companyStructureId").val();
if(flowName == ""){
return $.confirm({
title: '<div style="color:red">Error!</div>',
content: '<span style="color:green">System Name</span> cannot be empty',
buttons: {
ok: function () {
//
},
}
});
}
$('#spinnerContainer').addClass('show');
$.ajax({
type: "POST", // Post / Get method
url: "/flow/add", //Where form data is sent on submission
dataType: "text", // Data type, HTML, json etc.
data: { flowName, description, companyStructureId}, //Form variables
success: function (response) {
$('#spinnerContainer').removeClass('show');
flow = JSON.parse(response)
if(!flow.id){
return $.confirm({
title: '<div style="color:green">Error</div>',
content: 'Something went wrong',
buttons: {
ok: function () {
// location.reload(true)
},
}
});
}
currentStage = 1;
$("#flow_div").addClass("d-none")
$("#stage_div").removeClass("d-none")
$("#_stage_label").html(currentStage);
},
error: function (xhr, ajaxOptions, thrownError) {
$.alert('Could not delete');
}
});
}
$("#nextStage").click(function(event){
event.preventDefault();
var title = $("#stageTitle").val();
var columnsData = $(".columns");
const columns = Array();
for(var i = 0; i< columnsData.length; i++){
columns[i]=$(columnsData[i]).val()
}
event.preventDefault();
// Get form
var form = $('#columnsForm');
// var token = "{{csrf_token()}}";
// Create an FormData object
var data = new FormData(form);
if(title == ""){
return $.confirm({
title: '<div style="color:red">Error!</div>',
content: '<span style="color:green">Stage Title</span> is empty. <br/>Supply the stage title or click Finish if you are done.',
buttons: {
ok: function () {
//
},
}
});
}
$.ajax({
type: "POST", // Post / Get method
url: "/flow/addFlowColumns", //Where form data is sent on submission
dataType: "json", // Data type, HTML, json etc.
data: {columns, title, flowId:flow.id, currentStage}, //Form variables
success: function (response) {
$('#spinnerContainer').removeClass('show');
// response = JSON.parse(response)
if(response.status == "success"){
currentStage++;
$("#_stage_label").html(currentStage);
$("#stageTitle").val('');
var activities = $(".activities");
// const columns = Array();
for(var i = 1; i< activities.length; i++){
$(activities[i]).remove()
}
$(columnsData[0]).val('');
}
},
error: function (xhr, ajaxOptions, thrownError) {
$.alert('Could not Save');
}
});
})
function finish(){
$.ajax({
type: "POST", // Post / Get method
url: "/flow/addFlowFinish", //Where form data is sent on submission
dataType: "json", // Data type, HTML, json etc.
data: {flowId:flow.id, currentStage}, //Form variables
success: function (response) {
if(response.status == "success"){
return $.confirm({
title: '<div style="color:green">Successful</div>',
content: 'Business Process Flow successfully entered',
buttons: {
ok: function () {
// location.reload(true)
window.location = `/flow/view/${flow.uuid}`;
},
}
});
}
},
error: function (xhr, ajaxOptions, thrownError) {
$.alert('Could not Save');
}
});
}
</script>
Zerion Mini Shell 1.0