Wappler_Access/views/dspec.ejs

<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="dspec" appconnect="local" components="{dmxTyped:{},dmxStateManagement:{},dmxBootstrap5Modal:{},dmxFormatter:{},dmxValidator:{},dmxScheduler:{},dmxDataTraversal:{},dmxBootstrap5TableGenerator:{},dmxBootstrap5Navigation:{},dmxSockets:{}}" -->
<div class="modal" id="modal2" is="dmx-bs5-modal" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete part #</p>
                <input id="txt_deletepn" name="text4" type="text" class="form-control">
                <input id="txt_delpid" name="text4" type="text" class="form-control">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" dmx-on:click="api_deleteItem.load({});api1.load({});modal2.hide()">Save changes</button>
            </div>
        </div>
    </div>
</div>
<dmx-api-action id="api_deleteItem" noload="true" dmx-bind:url="'http://vapor.prelub.com/api/v1.0/boms/'+modal2.txt_delpid.value" method="delete"></dmx-api-action>
<dmx-api-action id="api_getcodebyid" noload="true" url="http://vapor.prelub.com/api/v1.0/partcodes/" dmx-bind:url="'http://vapor.prelub.com/api/v1.0/partcodes/'+modal1.txt_parentid.value"></dmx-api-action>
<dmx-api-action id="api_allpartcodes" url="http://vapor.prelub.com/api/v1.0/partcodes"></dmx-api-action>
<dmx-api-action id="api_maxpn" url="http://vapor.prelub.com/api/v1.0/pns/max"></dmx-api-action>
<dmx-api-action id="api_partcodes" noload="true" url="http://vapor.prelub.com/api/v1.0/partcodes/bytype/0" dmx-bind:url="'http://vapor.prelub.com/api/v1.0/partcodes/bytype/'+modal1.sel_parttypes.selectedValue"></dmx-api-action>
<dmx-api-action id="api_childcodes" noload="true" url="http://vapor.prelub.com/api/v1.0/partcodes/byparent/" dmx-bind:url="'http://vapor.prelub.com/api/v1.0/partcodes/byparent/'+modal1.txt_parentid.value"></dmx-api-action>
<dmx-api-action id="api_parttypes" url="http://vapor.prelub.com/api/v1.0/parttypes"></dmx-api-action>
<dmx-api-action id="api1" url="http://vapor.prelub.com/api/v1.0/designspecs/max/" dmx-bind:url="'http://vapor.prelub.com/api/v1.0/designspecs/max/'+query1.data.id"></dmx-api-action>
<dmx-query-manager id="query1"></dmx-query-manager>
<div class="modal" id="modal1" is="dmx-bs5-modal" tabindex="-1" dmx-bind:show="!query1.data.id">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">New Part Number</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="frm_part">
                    <input id="txt_parentid" name="parentid" type="text" class="form-control">

                    <input id="hdn_newpn" name="text1" type="hidden" class="form-control" placeholder="new part number"><input id="hdn_zeroo" name="text1" type="hidden" class="form-control" value="0">
                    <p id="para_productionparts">Select Part Type</p>

                    <select id="sel_parttypes" class="form-select" name="parttypes" dmx-bind:options="api_parttypes.data" optiontext="name" optionvalue="id" required="" dmx-bind:value="api1.data.partnumber.partcode.parttype.id" dmx-on:changed="api_partcodes.load({})">
                        <option selected="" value="0">Select</option>
                    </select>
                    <p id="para_nonproductionparts">Select Part Code</p><select id="sel_nonproductionparts" class="form-select" name="nonproductionparts" dmx-on:changed="run([{run:{action:`txt_parentid.setValue(selectedValue)`,name:'SetTextVal',outputType:'text'}},{run:{action:`api_childcodes.load({})`,name:'setchildren',outputType:'text'}},{run:{action:`sel_productionparts.setSelectedIndex(\'if(selectedValue&gt;0){sel_productionparts.selectedValue=0;}\')`,outputType:'text'}}])" dmx-bind:options="api_partcodes.data" optiontext="name" optionvalue="id" required="" dmx-bind:value="api1.data.partnumber.partcode.id">
                        <option value="0">Select</option>
                    </select>
                    <p>Description</p>
                    <textarea id="txt_ptdescription" class="form-control" name="ptdescription" required="" dmx-bind:value="api1.data.partnumber.description"></textarea>
                    <p>Comments</p>
                    <textarea id="txt_ptcomments" class="form-control" name="comments" required="" dmx-bind:value="api1.data.partnumber.comments"></textarea>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal" id="btn_closenewpar">Cancel</button>
                <button type="button" class="btn btn-primary" dmx-on:click="txt_partnumber.setValue(sel_parttypes.value.concat('-'.concat(sel_nonproductionparts.value.concat('-'.concat(api_maxpn.data.number)))));txt_rev.setValue(hdn_zeroo.value);modal1.hide()">Save changes</button>
            </div>
        </div>
    </div>
</div>


<div class="container">
    <h1>DSpec</h1>
    <div class="row">
        <div class="col" style="width: 10%;">
            <p style="text-align: right;">Part Number</p>
        </div>
        <div class="col" style="width: 20%;">

            <input id="txt_partnumber" name="text1" type="text" class="form-control" placeholder="Part Number" dmx-bind:value="api1.data.partnumber.number">
        </div>
        <div class="col" style="width: 10%;">
            <p style="text-align: right;">Rev</p>
        </div>
        <div class="col" style="width: 10%;"><input id="txt_rev" name="rev" type="text" class="form-control" placeholder="rev" dmx-bind:value="api1.data.revisionlevel"></div>
        <div class="col" style="width: 50%;">
            <button id="btn_newpartnumber" class="btn text-danger fw-bold bg-secondary bg-opacity-50 ms-n1" dmx-on:click="txt_rev.setValue((txt_rev.value.toNumber() + 1))">New Rev</button>


        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="form-group mb-3 row">
                <label for="input3" class="col-sm-2 col-form-label" style="width: 35%">Effective Date</label>
                <div class="col-sm-10" style="width: 40%">
                    <input type="date" class="form-control" id="input3" name="input3" aria-describedby="input3_help" placeholder="Enter some text" dmx-bind:value="api1.data.partnumber.createdate">
                </div>
            </div>
        </div>
        <div class="col">
            <div class="form-group mb-3 row">
                <label for="input2" class="col-sm-2 col-form-label" style="width: 40%;">Work Instruction</label>
                <div class="col-sm-10" style="width: 30%;">
                    <input type="text" class="form-control" id="input2" name="input2" aria-describedby="input2_help" width="20%" dmx-bind:value="api1.data.workinstruction">
                </div>
            </div>
        </div>
        <div class="col">
            <div class="form-group mb-3 row">
                <label for="input1" class="col-sm-2 col-form-label" style="width: 30%;">Application</label>
                <div class="col-sm-10" style="width: 60%;">
                    <input type="text" class="form-control" id="input1" name="input1" aria-describedby="input1_help" placeholder="Enter some text" dmx-bind:value="api1.data.application">
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <p>Reason for change</p>
            <textarea id="text1" class="form-control" dmx-bind:value="api1.data.reasonforchange"></textarea>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <p>Validation of Change</p>
            <textarea id="text2" class="form-control" dmx-bind:value="api1.data.validation"></textarea>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <p>Notes</p>
            <textarea id="text3" class="form-control" dmx-bind:value=""></textarea>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <form id="frm_updatebom" method="post">
                <div class="row">
                    <div class="col">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th scope="col" class="text-center">Part #</th>
                                        <th scope="col" class="text-center">Description</th>
                                        <th scope="col" class="text-center">Old</th>
                                        <th scope="col" class="text-center">New</th>
                                        <th scop="col" class="text-center">Action</th>
                                    </tr>
                                </thead>
                                <tbody is="dmx-repeat" id="repeat1" dmx-bind:repeat="api1.data.boms" key="id">
                                    <tr>
                                        <td style="width: 25%;">
                                            <input id="txt_bomupdateid" name="bomupdateid" type="text" class="form-control" disabled="true" dmx-bind:value="id">
                                            <input id="txt_updatebompn" name="updatebompn" type="text" class="form-control" style="width: 100%;" dmx-bind:value="partnumber.number" disabled="true">
                                        </td>
                                        <td style="width: 50%;">
                                            <input id="txt_updatebomddsc" name="updatebomdescription" type="text" class="form-control" style="width: 100%" dmx-bind:value="partnumber.description" disabled="true">
                                        </td>
                                        <td style="width: 10%">
                                            <input id="txt_updatebomold" name="updatebomold" type="text" class="form-control" dmx-bind:value="old">
                                        </td>
                                        <td style="width: 10%">
                                            <input id="txt_updatebomnew" name="updatebomnew" type="text" style="width: 100%" class="form-control" dmx-bind:value="new">
                                        </td>
                                        <td style="width: 10%">
                                            <button id="btn_bomupdate" class="btn btn-primary" dmx-on:click="modal2.txt_deletepn.setValue(txt_updatebompn.value);modal2.txt_delpid.setValue(txt_bomupdateid.value);modal2.show()">Delete</button>
                                        </td>
                                    </tr>
                                </tbody>

                            </table>
                        </div>
                    </div>
                </div>
            </form>

        </div>
    </div>
    <div class="row">
        <div class="col">
            <form id="frm_newbomitem" method="post" is="dmx-serverconnect-form" action="/api/BOM/NewBomItem" dmx-on:success="run({run:{action:`api1.load({})`,outputType:'text'}})">
                <input id="txt_bomdspecid" name="bomdspecid" type="text" class="form-control d-print-none visually-hidden" dmx-bind:value="api1.data.id">
                <dmx-api-action id="frmapi_getpartbynum" noload="true" url="http://vapor.prelub.com/api/v1.0/partnumbers/num/" dmx-bind:url="'http://vapor.prelub.com/api/v1.0/partnumbers/num/'+txt_newpnbom.value"></dmx-api-action>
                <div class="row">
                    <div class="col">
                        <table class="table">
                            <tbody>
                                <tr>
                                    <td style="width: 25%">
                                        <input id="txt_newbompnid" name="newbompnid" type="text" class="form-control d-print-none visually-hidden" dmx-bind:value="frmapi_getpartbynum.data.id">
                                        <input id="txt_newpnbom" name="newbompn" type="text" class="form-control" dmx-bind:value="frmapi_getpartbynum.data.number" dmx-on:changed="frmapi_getpartbynum.load({})">
                                    </td>
                                    <td style="width: 50%"><input id="txt_newdesbom" name="newbomdesc" type="text" class="form-control" dmx-bind:value="frmapi_getpartbynum.data.description"></td>
                                    <td style="width: 10%"><input id="txt_newoldbom" name="newbomold" type="text" class="form-control"></td>
                                    <td style="width: 10%"><input id="txt_newnewbom" name="newbomnew" type="text" class="form-control"></td>
                                    <td style="width: 5%">
                                        <button id="btn_savenewbomitem" class="btn btn-primary" type="submit" dmx-on:click="api_deleteItem.load({})">Add</button>

                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </form>

        </div>
    </div>
    <div class="row">
        <div class="col text-end">
            <button id="btn1" class="btn text-center btn-danger">Save All</button>
        </div>
    </div>

</div>
<meta name="ac:route" content="/dspec">