Skip to content

Instantly share code, notes, and snippets.

@richardsaci

richardsaci/documentAdd.ejs

Created October 25, 2022 16:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save richardsaci/b6d4cb84d1c1ac8ab7578ee4a0e6009d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save richardsaci/b6d4cb84d1c1ac8ab7578ee4a0e6009d to your computer and use it in GitHub Desktop.
Download ZIP
documentAdd.ejs
Raw
documentAdd.ejs
```html
<div class="container">
<div class="status">
<div id="stepOne" class="statusItem stepActive">My Company Info</div>
<div id="stepTwo" class="statusItem">Select Vendor</div>
<div id="stepThree" class="statusItem">Document Info</div>
<div id="stepFour" class="statusItem">Notes</div>
<div id="stepFive" class="statusItem">Coding</div>
<div id="stepSix" class="statusItem">Line Items</div>
</div>
<div class="row">
<div class="col-lg-6 mx-auto mt-4">
<div class="card shadow">
<div class="card-header bg-primary">
<h3 class="text-light">Add Requisition</h3>
</div>
<br /><br />
<div class="card-body p-4">
<form
action="/documentAdd"
method="post"
class="needs-validation"
id="add-form"
novalidate
>
<!-- ----------------------------------------Section myCompanyInfo Start---------------------------------------- -->
<section id="myCompanyInfo" class="active">
<!-- subscriberName Start -->
<div class="mb-3">
<label for="subscriberName"
>My Company Name <span style="color: red">*</span></label
>
<input
type="text"
name="subscriberName"
class="form-control form-control-lg"
value="Smith & Allen Consulting, Inc."
required
readonly
/>
</div>
<!-- subscriberName End -->
<!-- subscriberContact Start -->
<div class="mb-3">
<label for="Template"
>My Company Contact <span style="color: red">*</span></label
>
<input
type="text"
name="subscriberContact"
class="form-control form-control-lg"
value="Belinda Allen, CFO"
required
readonly
/>
</div>
<!-- subscriberContact End -->
<!-- subscriberAddressLine1 Start -->
<div class="mb-3">
<label for="subscriberAddressLine1"
>Address Line 1 <span style="color: red">*</span></label
>
<input
type="text"
name="subscriberAddressLine1"
class="form-control form-control-lg"
value="303 Regatta Way"
required
readonly
/>
</div>
<!-- subscriberAddressLine1 End -->
<!-- subscriberAddressLine2 Start -->
<div class="mb-3">
<label for="subscriberAddressLine2"
>Address Line 2 <span style="color: red">*</span></label
>
<input
type="text"
name="subscriberAddressLine2"
class="form-control form-control-lg"
value="Suite 100"
required
readonly
/>
</div>
<!-- subscriberAddressLine2 End -->
<!-- subscriberCity Start -->
<div class="mb-3">
<label for="subscriberCity"
>My Company City <span style="color: red">*</span></label
>
<input
type="text"
name="subscriberCity"
class="form-control form-control-lg"
value="Summerville"
required
readonly
/>
</div>
<!-- subscriberCity End -->
<!-- subscriberState Start -->
<div class="mb-3">
<label for="subscriberState"
>My Company State <span style="color: red">*</span></label
>
<input
type="text"
name="subscriberState"
class="form-control form-control-lg"
value="SC"
required
readonly
/>
</div>
<!-- subscriberState End -->
<!-- subscriberZip Start -->
<div class="mb-3">
<label for="subscriberZip"
>My Company Zip <span style="color: red">*</span></label
>
<input
type="text"
name="subscriberZip"
class="form-control form-control-lg"
value="29486"
required
readonly
/>
</div>
<!-- subscriberZip End -->
<button
id="goToSectionSelectVendorBtn"
name="goToSectionSelectVendorBtn"
class="btn btn-primary btn-lg"
onclick="goToSectionSelectVendor(event)"
>
Next - Select Vendor
</button>
</section>
<!-- ----------------------------------------Section selectVendor Start---------------------------------------- -->
<section id="selectVendor" class="inactive">
<!-- Vendor Start -->
<!-- This needs to be replacw with a Dynamic Select Element -->
<div class="mb-3">
<label for="vendorNameSearchBox">Vendor Search:</label>
<input
id="vendorNameSearchBox"
class="form-control form-control-lg"
onkeyup="typeAhead()"
type="text"
placeholder="Vendor Name Search"
/>
</section>
<!-- ----------------------------------------Section selectVendor Start---------------------------------------- -->
<section id="myTable"></section>
<!-- ----------------------------------------Section showVendorFields Start---------------------------------------- -->
<section id="vendorAddress" class="active">
<!-- Add Vendor Fields Here Start -->
<!-- vendorName Start -->
<div class="mb-3">
<label for="vendorName"
>Vendor Name <span style="color: red">*</span></label
>
<input
type="text"
name="vendorName"
id="vendorName"
class="form-control form-control-lg"
placeholder="Enter Vendor Name"
required
/>
</div>
<!-- vendorName End -->
<!-- vendorContact Start -->
<div class="mb-3">
<label for="vendorContact"
>Vendor Contact <span style="color: red">*</span></label
>
<input
type="text"
name="vendorContact"
id="vendorContact"
class="form-control form-control-lg"
placeholder="Enter Vendor Contact"
required
/>
</div>
<!-- vendorContact End -->
<!-- vendorAddressLine1 Start -->
<div class="mb-3">
<label for="vendorAddressLine1"
>Vendor Address Line 1
<span style="color: red">*</span></label
>
<input
type="text"
name="vendorAddressLine1"
id="vendorAddressLine1"
class="form-control form-control-lg"
placeholder="Enter Vendor Address Line 1"
required
/>
</div>
<!-- vendorAddressLine1 End -->
<!-- vendorAddressLine2 Start -->
<div class="mb-3">
<label for="vendorAddressLine2">Vendor Address Line 2</label>
<input
type="text"
name="vendorAddressLine2"
class="form-control form-control-lg"
placeholder="Enter Vendor Address Line 2"
/>
</div>
<!-- vendorAddressLine2 End -->
<!-- vendorCity Start -->
<div class="mb-3">
<label for="vendorCity"
>Vendor City <span style="color: red">*</span></label
>
<input
type="text"
name="vendorCity"
id="vendorCity"
class="form-control form-control-lg"
placeholder="Enter Vendor City"
required
/>
</div>
<!-- vendorCity End -->
<!-- vendorState Start -->
<div class="mb-3">
<label for="vendorState"
>Vendor State <span style="color: red">*</span></label
>
<input
type="text"
name="vendorState"
id="vendorState"
class="form-control form-control-lg"
placeholder="Enter Vendor State"
required
/>
</div>
<!-- vendorState End -->
<!-- vendorZip Start -->
<div class="mb-3">
<label for="vendorZip"
>Vendor Zip <span style="color: red">*</span></label
>
<input
type="text"
name="vendorZip"
id="vendorZip"
class="form-control form-control-lg"
placeholder="Enter Vendor Zip"
required
/>
</div>
<!-- vendorZip End -->
<!-- vendorPhone Start -->
<div class="mb-3">
<label for="vendorPhone"
>Vendor Phone <span style="color: red">*</span></label
>
<input
type="tel"
name="vendorPhone"
id="vendorPhone"
class="form-control form-control-lg"
placeholder="Enter Vendor Phone"
required
/>
</div>
<!-- vendorPhone End -->
<!-- vendorEmail Start -->
<div class="mb-3">
<label for="vendorEmail">Vendor Email</label>
<input
type="email"
name="vendorEmail"
class="form-control form-control-lg"
placeholder="Enter Vendor Email"
/>
</div>
<!-- vendorEmail End -->
<!-- vendorWebsite Start -->
<div class="mb-3">
<label for="vendorWebsite">Vendor Website</label>
<input
type="url"
name="vendorWebsite"
class="form-control form-control-lg"
placeholder="Enter Vendor Website"
/>
</div>
<!-- vendorWebsite End -->
<!-- vendorFax Start -->
<div class="mb-3">
<label for="vendorFax">Vendor Fax</label>
<input
type="tel"
name="vendorFax"
class="form-control form-control-lg"
placeholder="Enter Vendor Fax"
/>
</div>
<!-- vendorFax End -->
<!-- Add Vendor Fields Here End-- -->
<button
id="goToDocumentInfoBtn"
name="goToDocumentInfoBtn"
class="btn btn-primary btn-lg"
onclick="goToSectionDocumentInfo(event)"
disabled
>
Next - Document Info
</button>
</section>
<!-- ----------------------------------------Section showVendorFields End------------------------------------------ -->
<!-- ----------------------------------------Section documentInfo Start---------------------------------------- -->
<section id="documentInfo" class="inactive">
<!-- Shipping Method - Start -->
<!-- This needs to be replacw with a Dynamic Select Element -->
<div class="mb-3">
<label for="shippingMethod"
>Shipping Method <span style="color: red">*</span></label
>
<select
class="form-select"
name="shippingMethod"
id="shippingMethod"
onchange="validateDocumentInfo()"
>
<option value="">----- Select Shipping Method -----</option>
<% shipping.forEach(element => { %>
<option value="<%= element.shippingMethod %>">
<%= element.shippingMethod %> <% }); %>
</option>
</select>
</div>
<!-- Shipping Method - End -->
<!-- paymentTerms - Start -->
<div class="mb-3">
<!-- This needs to be replacw with a Dynamic Select Element -->
<label for="paymentTerms"
>Payment Terms <span style="color: red">*</span></label
>
<select
class="form-select was-validated"
name="paymentTerms"
id="paymentTerms"
onchange="validateDocumentInfo()"
>
<option value="">----- Select Payment Terms -----</option>
<% terms.forEach(element => { %>
<option value="<%= element.paymentTermDescription %>">
<%= element.paymentTermDescription %> <% }); %>
</option>
</select>
</div>
<!-- paymentTerms - End -->
<!-- buyer Start-->
<div class="mb-3">
<label for="buyer"
>Buyer <span style="color: red">*</span></label
>
<input
type="text"
name="buyer"
id="buyer"
class="form-control form-control-lg"
placeholder="Enter Buyer Name"
onchange="validateDocumentInfo()"
required
/>
</div>
<!-- buyer End-->
<!-- requestedDate Start -->
<div class="mb-3">
<label for="requestedDate"
>Requested Date <span style="color: red">*</span></label
>
<input
type="date"
name="requestedDate"
id="requestedDate"
class="form-control form-control-lg"
onchange="validateDocumentInfo()"
/>
</div>
<!-- requestedDate End -->
<button
name="goToDocumentNotesBtn"
id="goToDocumentNotesBtn"
class="btn btn-primary btn-lg"
onclick="goToSectionDocumentNotes(event)"
disabled
>
Next - Document Notes
</button>
</section>
<!-- ----------------------------------------Section Notes Start---------------------------------------- -->
<section id="documentNotes" class="inactive">
<!-- Note - Start -->
<div class="mb-3">
<label for="note"
>Internal Note:
<small class="text-muted"
>Vendor will not see these comments.</small
></label
>
<textarea
name="note"
id="note"
class="form-control form-control-lg"
cols="30"
rows="10"
>
Enter Private Document Note...</textarea
>
</div>
<!-- Note - End -->
<!-- documentComments Start -->
<div class="mb-3">
<label for="documentComments"
>Document Comments:
<small class="text-muted"
>Vendor will see these comments.</small
></label
>
<textarea
name="documentComments"
id="documentComments"
class="form-control form-control-lg"
cols="30"
rows="10"
>
Enter Public Document Note...</textarea
>
</div>
<!-- documentComments End -->
<button
name="goToCodingBtn"
class="btn btn-primary btn-lg"
onclick="goToSectionCoding(event)"
>
Next - Document Coding
</button>
</section>
<!-- ----------------------------------------Section Notes End------------------------------------------ -->
<!-- ----------------------------------------Section Hidden Start---------------------------------------- -->
<section id="hidden" class="inactive">
<!-- documentType Start -->
<div class="mb-3">
<label for="documentType"
>documentType <span style="color: red">*</span></label
>
<input
type="text"
name="documentType"
class="form-control form-control-lg"
required
value="Requisition"
disabled
/>
</div>
<!-- documentType End -->
<!-- documentStatus Start -->
<div class="mb-3">
<label for="documentStatus"
>documentStatus <span style="color: red">*</span></label
>
<input
type="text"
name="documentStatus"
class="form-control form-control-lg"
required
value="UnApproved"
disabled
/>
</div>
<!-- documentStatus End -->
<!-- revisionNumber Start -->
<div class="mb-3">
<label for="revisionNumber"
>revisionNumber <span style="color: red">*</span></label
>
<input
type="text"
name="revisionNumber"
class="form-control form-control-lg"
value="1"
required
disabled
/>
</div>
<!-- revisionNumber End -->
<!-- createdBy Start -->
<div class="mb-3">
<label for="createdBy"
>Created By<span style="color: red">*</span></label
>
<input
type="text"
name="createdBy"
class="form-control form-control-lg"
required
value="Richard Allen"
readonly
/>
</div>
<!-- createdBy End -->
<!-- approvedBy Start -->
<div class="mb-3">
<label for="approvedBy">Approved By</label>
<input
type="text"
name="approvedBy"
class="form-control form-control-lg"
disabled
/>
</div>
<!-- approvedBy End -->
</section>
<!-- ----------------------------------------Section Coding Start---------------------------------------- -->
<section id="coding" class="inactive">
<!-- contractNumber Start -->
<div class="mb-3">
<label for="contractNumber">Contract Number</label>
<input
type="text"
name="contractNumber"
class="form-control form-control-lg"
/>
</div>
<!-- contractNumber End -->
<!-- glNaturalAccount Start -->
<div class="mb-3">
<label for="glNaturalAccount">GL Natural Account</label>
<input
type="text"
name="glNaturalAccount"
class="form-control form-control-lg"
/>
</div>
<!-- glNaturalAccount End -->
<!-- glDepartmentAccount Start -->
<div class="mb-3">
<label for="glDepartmentAccount">GL Department Account</label>
<input
type="text"
name="glDepartmentAccount"
class="form-control form-control-lg"
/>
</div>
<!-- glDepartmentAccount End -->
<!-- projectId Start -->
<div class="mb-3">
<label for="projectId">Project Id</label>
<input
type="text"
name="projectId"
class="form-control form-control-lg"
/>
</div>
<!-- projectId End -->
<!-- projectPhase Start -->
<div class="mb-3">
<label for="projectPhase">Project Phase</label>
<input
type="text"
name="projectPhase"
class="form-control form-control-lg"
/>
</div>
<!-- projectPhase End -->
<!-- projectStep Start -->
<div class="mb-3">
<label for="projectStep">Project Step</label>
<input
type="text"
name="projectStep"
class="form-control form-control-lg"
/>
</div>
<!-- projectStep End -->
<!-- projectDetail Start -->
<div class="mb-3">
<label for="projectDetail">Project Detail</label>
<input
type="text"
name="projectDetail"
class="form-control form-control-lg"
/>
</div>
<!-- projectDetail End -->
<!-- After Submit, I need to redirect to Add Line Items and pass the result.id -->
<!-- Submit Start -->
<div class="mb-3 d-grid">
<input
type="submit"
name="goToLineItemsBtn"
value="Next - Add Line Items"
class="btn btn-primary btn-lg"
/>
</div>
<!-- Submit End -->
</section>
</form>
</div>
</div>
</div>
</div>
</div>
<br /><br />
<div class="container" id="lblIds"></div>
<script>
// Select Vendor and Shipping Method
function goToSectionSelectVendor(event) {
event.preventDefault();
document.getElementById("myCompanyInfo").classList.remove("active");
document.getElementById("myCompanyInfo").classList.add("inactive");
document.getElementById("selectVendor").classList.remove("inactive");
document.getElementById("selectVendor").classList.add("active");
document.getElementById("stepOne").classList.remove("stepActive");
document.getElementById("stepTwo").classList.add("stepActive");
}
// Payment Terms, Buyer, Requested Date
function goToSectionDocumentInfo(event) {
event.preventDefault();
document.getElementById("selectVendor").classList.remove("active");
document.getElementById("selectVendor").classList.add("inactive");
document.getElementById("documentInfo").classList.remove("inactive");
document.getElementById("documentInfo").classList.add("active");
document.getElementById("stepTwo").classList.remove("stepActive");
document.getElementById("stepThree").classList.add("stepActive");
}
function goToSectionDocumentNotes(event) {
event.preventDefault();
document.getElementById("documentInfo").classList.remove("active");
document.getElementById("documentInfo").classList.add("inactive");
document.getElementById("documentNotes").classList.remove("inactive");
document.getElementById("documentNotes").classList.add("active");
document.getElementById("stepThree").classList.remove("stepActive");
document.getElementById("stepFour").classList.add("stepActive");
}
function goToSectionCoding(event) {
event.preventDefault();
document.getElementById("documentNotes").classList.remove("active");
document.getElementById("documentNotes").classList.add("inactive");
document.getElementById("coding").classList.remove("inactive");
document.getElementById("coding").classList.add("active");
document.getElementById("stepFour").classList.remove("stepActive");
document.getElementById("stepFive").classList.add("stepActive");
}
function goToSectionLineItems(event) {
event.preventDefault();
document.getElementById("coding").classList.remove("active");
document.getElementById("coding").classList.add("inactive");
document.getElementById("lineItems").classList.remove("inactive");
document.getElementById("lineItems").classList.add("active");
}
function validateVendor() {
document.getElementById("goToDocumentInfoBtn").disabled = false;
}
function validateDocumentInfo() {
// Need to validate four fields
let sm = document.getElementById("shippingMethod").value;
let pt = document.getElementById("paymentTerms").value;
let b = document.getElementById("buyer").value;
let rd = document.getElementById("requestedDate").value;
console.log(`${sm} - ${pt} - ${b} - ${rd}`);
if (sm) {
document.getElementById("shippingMethod").classList.add("is-valid");
}
if (pt) {
document.getElementById("paymentTerms").classList.add("is-valid");
}
if (b) {
document.getElementById("buyer").classList.add("is-valid");
}
if (rd) {
document.getElementById("requestedDate").classList.add("is-valid");
}
if (sm && pt && b && rd) {
document.getElementById("goToDocumentNotesBtn").disabled = false;
}
}
function validateDocumentNotes() {
document.getElementById("goToCodingBtn").disabled = false;
}
function validateCoding() {
document.getElementById("goToLineItemsBtn").disabled = false;
}
</script>
<script>
function displayElementIds() {
let str = "";
let elem = document.getElementById("add-form").elements;
console.log(elem);
// Filter to Submit Buttons
for (let i = 0; i < elem.length; i++) {
if (elem[i].type === "submit") {
str += "<b>Type: </b>" + elem[i].type + " ----|---- ";
str += "<b>Name: </b>" + elem[i].name + " ----|---- ";
str += "<b>Value: </b>" + elem[i].value + " ----|---- ";
str += "<b>innerHtml: </b>" + elem[i].innerHTML;
str += "<br><br>";
} else {
}
}
document.getElementById("lblIds").innerHTML = str;
}
// displayElementIds();
</script>
<script>
function vendorSearch() {console.log(`Hello from vendorSearch()`)}
</script>
<script>
const vendorName = document.getElementById("vendorNameSearchBox");
// This is the function that gets called by the event listener onkeyup
// in the search box with id="vendorNameSearch"
function typeAhead() {
console.log(`typeAhead has been called.`);
let v = vendorName.value;
if (v.length > 3) {
console.log(`typAhead() has been called.`);
getTypeAheadData(v);
}
}
// This function calls the route and passes the search term as a parameter.
function getTypeAheadData(x) {
let myTerm = x;
console.log(`The value of myTerm: ${myTerm}`);
// Pass myTerm as a parameter to Route:
let xyz = location.href = "/findVendorY" + "?term=" + myTerm;
console.table(`xyz: ${xyz}`);
const myTable = document.getElementById('myTable');
// If the xyz contains documents, then build the table.
if (xyz) {
} else {
console.log(`No Matching Vendors.`);
}
}
</script>
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment