Skip to content

Commit 24a4730

Browse files
brigbrig
committed
custom form example
1 parent 51cd19d commit 24a4730

File tree

2 files changed

+169
-0
lines changed

2 files changed

+169
-0
lines changed

‎examples/process-start-form/data.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
data = {
2+
"org": "Default",
3+
"project": "test",
4+
"repo": "test",
5+
"entryPoint": "test",
6+
7+
"values" : {
8+
"release" : "1.0.0"
9+
}
10+
};

‎examples/process-start-form/index.html

+159
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Process start form example</title>
6+
<script src="data.js"></script>
7+
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.5.0/semantic.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
9+
<script src="https://code.jquery.com/jquery-3.7.1.min.js" crossorigin="anonymous"></script>
10+
11+
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.5.0/semantic.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
12+
13+
</head>
14+
<body>
15+
<h1>Deployment info</h1>
16+
17+
<form id="myForm" class="ui form" enctype="multipart/form-data">
18+
<div class="ui error message"></div>
19+
20+
<div class="field required">
21+
<label for="release">Release version</label>
22+
<input id="release" type="text" name="arguments.release" placeholder="Release version">
23+
<div class="ui pointing red basic label release-error" style="display: none;">Please enter value</div>
24+
</div>
25+
26+
<div class="field required">
27+
<label for="field1">field1</label>
28+
<input id="field1" type="text" name="arguments.field1" placeholder="field1">
29+
<div class="ui pointing red basic label field1-error" style="display: none;">Please enter value</div>
30+
</div>
31+
32+
<div class="field required">
33+
<label for="field2">field1</label>
34+
<input id="field2" type="text" name="arguments.field1" placeholder="field2">
35+
<div class="ui pointing red basic label field2-error" style="display: none;">Please enter value</div>
36+
</div>
37+
38+
<div class="field required">
39+
<label for="field3">field1</label>
40+
<input id="field3" type="text" name="arguments.field3" placeholder="field3">
41+
<div class="ui pointing red basic label field3-error" style="display: none;">Please enter value</div>
42+
</div>
43+
44+
45+
<input id="org" name="org" type="hidden"/>
46+
<input id="project" name="project" type="hidden"/>
47+
<input id="repo" name="repo" type="hidden"/>
48+
<input id="entryPoint" name="entryPoint" type="hidden"/>
49+
50+
<button id="submitButton" type="button" class="ui primary submit button">Submit</button>
51+
</form>
52+
53+
<script>
54+
const myForm = $('#myForm');
55+
myForm
56+
.form('set values', data.values)
57+
.form('set values', data);
58+
59+
$('#submitButton').on('click', function() {
60+
clearError();
61+
62+
let isValid = true;
63+
64+
const releaseField = $('#release');
65+
if (releaseField.val() === '') {
66+
releaseField.parent().addClass('error');
67+
$('.release-error').show();
68+
isValid = false;
69+
} else {
70+
releaseField.removeClass('error');
71+
$('.release-error').hide();
72+
}
73+
74+
const field1Field = $('#field1');
75+
if (field1Field.val() === '') {
76+
field1Field.parent().addClass('error');
77+
$('.field1-error').show();
78+
isValid = false;
79+
} else {
80+
field1Field.removeClass('error');
81+
$('.field1-error').hide();
82+
}
83+
84+
if (!isValid) {
85+
return;
86+
}
87+
88+
formLoading(true);
89+
90+
$.ajax({
91+
type: 'POST',
92+
url: `/api/v1/process`,
93+
data: new FormData(myForm[0]),
94+
processData: false,
95+
contentType: false,
96+
success: function(response) {
97+
console.log(response);
98+
99+
if (response.ok) {
100+
window.parent.window.location.href = `${window.location.origin}/#/process/${response.instanceId}/log`;
101+
// window.parent.window.location.href = `http://localhost:3000/#/process/${response.instanceId}/log`;
102+
} else {
103+
formLoading(false);
104+
105+
let ul = $('<ul>');
106+
$.each(response.errors, function(index, err) {
107+
ul.append($('<li>').text(err));
108+
});
109+
110+
$('.ui.error.message')
111+
.empty()
112+
.append(ul)
113+
.show();
114+
}
115+
},
116+
error: function(error) {
117+
console.log(error)
118+
119+
showError('Error starting process', '[' + error.status + ']: ' + error.responseText);
120+
121+
formLoading(false);
122+
}
123+
});
124+
});
125+
126+
$('#release').on('input', function() {
127+
$(this).parent().removeClass('error');
128+
$('.release-error').hide();
129+
});
130+
131+
$('#field1').on('input', function() {
132+
$(this).parent().removeClass('error');
133+
$('.field1-error').hide();
134+
});
135+
136+
const formLoading = (loading) => {
137+
const myForm = $('#myForm');
138+
if (loading) {
139+
myForm.addClass('loading')
140+
} else {
141+
myForm.removeClass('loading')
142+
}
143+
};
144+
145+
const clearError = () => {
146+
$('.ui.error.message')
147+
.hide()
148+
.empty();
149+
};
150+
151+
const showError = (header, err) => {
152+
$('.ui.error.message')
153+
.show()
154+
.text(header + ': ' + err);
155+
};
156+
</script>
157+
158+
</body>
159+
</html>

0 commit comments

Comments
 (0)