Enterprise System Integration

1. Enterprise System Integration Practical Session 9 Manuel Camargo manuel.camargo@ut.ee

2. Affordances Base code • Slides: • http://kodu.ut.ee/~chavez85/esi/slides/

3. Rentit behaviour • Postman steps • Query available plants • Create PO • Accept/Reject • Extend • PO lifecycle

4. Vue.js • installcode editor from Microsoft https://code.visualstudio.com/ • install Node.js • npminstall -g @vue/cli ------------------------------------------ • gotoproject folder >> • vuecreaterentitf • Router • Unit • Mocha • installbuefy >> npminstallbuefy --save • addto main.js • importBuefyfrom 'buefy' • import 'buefy/dist/buefy.css' • Vue.use(Buefy)

5. Main structure Order creation Tabs structure – buefy QueryCatalog <form> QueryResult <Table> OrderCreation <Tab> OrderData <form>

6. Main structure Order creation • <b-tabstype="is-toggle"expandedv-model="activeTab"> • <b-tab-itemlabel="Query catalog"> • <catalog-query @submitCatalogQuery="handleCatalogQuery"> • </catalog-query> • </b-tab-item> • <b-tab-itemlabel="Select plant"> • <query-result :plants="plants" @selectPlant="handlePlantSelection"> • </query-result> • </b-tab-item> • <b-tab-itemlabel="Review order"> • <order-data :order="order" @submitPurchaseOrder="handlePOCreation"> • </order-data> • </b-tab-item> • </b-tabs>

7. Main structure Order creation • importCatalogQueryfrom"./CatalogQuery.vue"; • importQueryResultfrom"./QueryResult.vue"; • importOrderDatafrom"./OrderData.vue"; • importaxiosfrom"axios"; • exportdefault { • name: "OrderCreation", • components: { • ... • }, • data: function() { • ... • }, • methods:{ • handleCatalogQuery: function(query) { • ... • }, • handlePlantSelection: function(plant) { • ... • }, • handlePOCreation: function() { • ... • ... Imports and register of components Data to be returned Functions to perform and handle the queries

8. Order creation Query Catalog • <section> • <b-fieldlabel="Plant Name"> • <b-inputv-model="query.name"></b-input> • </b-field> • <b-fieldlabel="Start date"> • <b-datepicker • placeholder="Click to select..." • icon="calendar-today" • v-model="query.startDate"> • </b-datepicker> • </b-field> • ... text field Date picker field

9. Order creation Query Catalog • exportdefault { • name: "CatalogQuery", • data: function() { • return { • query: { • name: "", • startDate: undefined, • endDate: undefined • } • } • }, • methods:{ • submit: function() { • console.log(this.query); • this.$emit("submitCatalogQuery", this.query) • } • } • } Data to be returned Functions to handle events and comunicate with the parent

10. Order creation QueryResults • <tableclass="table is-striped is-fullwidth"> • <thead> • <tr> • <thclass="has-text-center">Name</th> • <thclass="has-text-center">Description</th> • <thclass="has-text-center">Price</th> • <thclass="has-text-center">Actions</th> • </tr> • </thead> • <tbody> • <trv-for="plant in plants" :key="plant.id"> • <td>{{plant.name}}</td> • <td>{{plant.description}}</td> • <tdclass="has-text-right">{{plant.price}}</td> • <td> • <aclass="button is-link is-small is-outlined" • @click="submit(plant)"> • Select plant • </a> • </td> • </tr> • </tbody> • </table> Simple table Action button

11. Order creation QueryResults • exportdefault { • name: "QueryResult", • props: ["plants"], • methods: { • submit: function(plant) { • this.$emit("selectPlant", plant); • } • } • } Data that comes from outside Functions to handle events and comunicate with the parent

12. Order creation OrderData • <template> • <div> • <section> • <b-fieldlabel="Customer reference"> • <b-inputv-model="customer"></b-input> • </b-field> • <b-fieldlabel="Site address"> • <b-inputv-model="siteAddress"></b-input> • </b-field> • <buttonclass="button is-primary"v-on:click="submit">Create Purchase Order</button> • </section> • <tableclass="table is-table-bordered is-table-striped is-fullwidth"> • ... • </table> • </div> • </template> Additional elements Table to show partial order data

13. Order creation OrderData • exportdefault { • name: "OrderData", • props: ["order"], • data: function() { • return { • customer: "", • siteAddress: "" • } • }, • methods: { • submit: function() { • this.$emit("submitPurchaseOrder"); • } • } • } Data to be returned Functions to handle events and comunicate with the parent

14. Main structure OpenOrders Generic <form> OpenOrders <Table> \components\allocations PlantModal <modal>

15. Main structure OpenOrders • <!-- eslint-disable vue/no-use-v-if-with-v-for,vue/no-confusing-v-for-v-if --> • <div> • <tableclass="table is-striped is-fullwidth"> • <thead> • <tr> • <thclass="has-text-center">Plant…Rental period…Price…Actions</th> • </tr> • </thead> • <tbody> • <trv-for="(order, order_index) in orders" :key="order_index"> • <td> • {{order.plant.name}} <br/><aclass="button is-link is-small is-outlined"@click="plantModal(order.plant)"> • See details • </a> • </td> • <td>{{order.rentalPeriod.startDate}} / {{order.rentalPeriod.endDate}}</td> • <tdclass="has-text-right"></td> • <td> • <av-for="(link, rel) inorder._links" :key="rel" v-if="rel !== 'self' && rel !== 'fetch'" • v-bind:class="{ 'is-danger': link.type === 'DELETE', 'is-link': link.type !== 'DELETE' }" • class="button is-small is-outlined" • @click="followLink(link, rel, order_index)"> • {{rel}} • </a> • </td> • </tr> • </tbody> • </table> • </div> Purchase order + detail Posible actions build from hyperlinks

16. OpenOrders PlantModal • <template> • <divclass="modal-card"style="width: auto"> • <headerclass="modal-card-head"> • <pclass="modal-card-title">Plant info</p> • </header> • <sectionclass="modal-card-body"> • <b-fieldlabel="Name"> • <b-inputv-model="plant.name" readonly></b-input> • </b-field> • <b-fieldlabel="Description"> • <b-inputv-model="plant.description" readonly></b-input> • </b-field> • <b-fieldlabel="Price"> • <b-inputv-model="plant.price" readonly></b-input> • </b-field> • </section> • <footerclass="modal-card-foot"> • <buttonclass="button"type="button"@click="$parent.close()">Close</button> • </footer> • </div> • </template> • <script> • exportdefault { • name: "PlantModal", • props: ['plant'] • } • </script>

17. OpenOrders Generic { "_embedded": { "pOExtensionDToes": [ { "endDate": "2019-04-15" } ] }, "_links": { "self": { "href": "http://localhost:8090/api/sales/orders/1/extensions" } }, "_templates": { "default": { "title": null, "method": "post", "contentType": "", "properties": [ { "name": "endDate", "required": true } ] } } }