%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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
<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">New "<%= flow.title %>"</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="/flow">Business Process Flow</a>
</li>
<li class="breadcrumb-item active">New "<%= flow.title %>"</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"><% /*= flow.title */ %></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"><%= flow.structure.orgStructure.structure.name %></label>
<div class="col-sm-5">
<div <% /*class="position-relative has-icon-left " */ %> >
<%= flow.structure.name %>
<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 " */ %> >
<label><%= flow.title %></label>
<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 " */ %> >
<span ><%= flow.description %></span>
<div class="form-control-position pl-1"><i class="la la-note"></i></div>
</div>
</div>
</div>
<% if(processReference){ %>
<input type="hidden" id="currentStage" value="<%= processReference.currentStage %>">
<input type="hidden" id="processId" value="<%= processReference.id %>">
<% currentStage = processReference.currentStage + 1 %>
<% flowTitleIndex = processReference.currentStage %>
<% } else { %>
<input type="hidden" id="currentStage" value="1" >
<input type="hidden" id="processId" value="0">
<% currentStage = 1 %>
<% flowTitleIndex = 0 %>
<% } %>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<% /* flow.flowTitles.forEach((title, index)=>{ */ %>
<% title = flow.flowTitles[flowTitleIndex] %>
<input type="hidden" value="<%= title.id %>" id="flowTitleId">
<section id="flow_div" >
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Stage <label id="_stage_label"><%= (flowTitleIndex + 1) %><%=" : "+title.title %></label></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 ">
<div class="form-body">
<form class="row">
<div class="col-md-6" id="fieldList">
<% title.flowFields.forEach((field, index)=>{ %>
<div class="form-group skin skin-flat">
<label class="offset-sm-1 " for="inputDescription"><input type="checkbox" class="fields" required name="fields" value="<%= field.id %>"><%= field.label +" " %> </label>
</div>
<% }) %>
</div>
<div class="col-lg-6 card-body">
<label>Notes</label>
<div class="position-relative has-icon-left">
<textarea id="comment" rows="5" class="form-control" name="notes" placeholder="notes"></textarea>
<div class="form-control-position">
<i class="ft-file"></i>
</div>
</div>
</div>
</form>
<button data-repeater-create class="btn btn-info offset-lg-10" id="nextStage">
Go to Next Stage<i class="ft-arrow-right" ></i>
</button>
</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-confirm/3.3.0/jquery-confirm.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.js"></script>
<script>
let flowUuid = `<%= flow.uuid %>`;
let processReference = `<%= processReference %>`;
// console.log(flowUuid)
let currentStage = '<%= currentStage %>';
let processId = $("#processId").val();
let flowTitleId = $("#flowTitleId").val();
// console.log(flowUuid);
// console.log(currentStage, "-",processId);
// console.log(processReference.id);
$("#nextStage").click(function(event){
$('#spinnerContainer').addClass('show');
event.preventDefault();
const fields = [];
$.each($("input[name='fields']:checked"), function(){
fields. push($(this). val());
});
var comment = $("#comment").val();
// console.log("here - ",comment, $("#comment").html())
console.log(comment);
event.preventDefault();
$.ajax({
type: "POST", // Post / Get method
url: "/flow/create/"+flowUuid, //Where form data is sent on submission
dataType: "json", // Data type, HTML, json etc.
data: {processId, fields, flowTitleId, currentStage, comment}, //Form variables
success: function (response) {
console.log(response)
$('#spinnerContainer').removeClass('show');
// response = JSON.parse(response)
if(response.status == "success"){
if(response.nextStage){
currentStage = response.nextStage.stage;
processId = response.processId;
columns = response.nextStage.flowFields
$("#_stage_label").html(currentStage+" "+response.nextStage.title);
// $.each($(".fieldList"), function(){
// $(this). remove();
// });
$("#fieldList").html('');
columns.forEach(column => {
$("#fieldList")
.append(
`<div class="form-group skin skin-flat">
<label class="offset-sm-1 " for="inputDescription"><input type="checkbox" class="fields" required name="fields" value="column.id">${column.label} </label>
</div>`
)
});
$("#comment").val('');
} else{
return $.confirm({
title: '<div style="color:green">Successful</div>',
content: 'Process Completed',
buttons: {
ok: function () {
// location.reload(true)
// window.location = `/flow/view/${flow.uuid}`;
},
}
});
}
}
},
error: function (xhr, ajaxOptions, thrownError) {
$('#spinnerContainer').removeClass('show');
$.alert('Something went wrong');
}
});
})
</script>
Zerion Mini Shell 1.0