@appscode/ui-builder
Version:
## Motivation
1 lines • 16.5 kB
JavaScript
import{ac as e,g as t,h as a,e as i,ad as n,n as s}from"./wrapper-5d451278.js";import"./es.array.concat-bc6da240.js";import"./index-ba66ec6f.js";import"./web.dom-collections.iterator-98113e95.js";import{_ as r,r as l}from"./stickyContent-c27d9838.js";import{v as o}from"./FormElement-3679b8af.js";import{d as u}from"./data-function-mixins-f9cb6d20.js";import{i as d}from"./individual-item-disablity-check-7d31b40d.js";import{f as c}from"./function-call-mixins-9e1aa828.js";import{_ as b}from"./tag-icon-da9ce06c.js";function m(t,a){var i;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(i=e(t))||a&&t&&"number"==typeof t.length){i&&(t=i);var n=0,s=function(){};return{s:s,n:function(){return n>=t.length?{done:!0}:{done:!1,value:t[n++]}},e:function(e){throw e},f:s}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var r,l=!0,o=!1;return{s:function(){i=t[Symbol.iterator]()},n:function(){var e=i.next();return l=e.done,e},e:function(e){o=!0,r=e},f:function(){try{l||null==i.return||i.return()}finally{if(o)throw r}}}}var f=s({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{class:{"ac-nested-elements":e.labelText}},[e.isSavingNewElement?[a("div",{staticClass:"is-flex is-aligned-item-center is-justify-content-space-between"},[a("ub-label-element",{attrs:{label:{text:e.$ubt("buttons.new")+" "+e.$ubt(e.addFormLabel)},"is-collapsible":!0,"is-form-hidden":e.isFormHidden,errors:e.itemValidationError?[e.itemValidationError]:[]},on:{click:function(t){e.isFormHidden=!e.isFormHidden}}}),e._v(" "),a("div",{staticClass:"buttons pb-5"},[a("button",{staticClass:"\n button\n ac-button\n is-tinny is-square is-outlined-gray is-transparent is-primary\n ",attrs:{disabled:e.disabled},on:{click:function(t){return t.preventDefault(),e.saveItem(t)}}},[a("i",{staticClass:"fa fa-floppy-o",attrs:{"aria-hidden":"true"}})]),e._v(" "),a("button",{staticClass:"\n button\n ac-button\n is-tinny is-square is-outlined-gray is-transparent is-danger\n ",on:{click:function(t){return t.preventDefault(),e.resetAllData(t)}}},[a("i",{staticClass:"fa fa-close",attrs:{"aria-hidden":"true"}})])])],1),e._v(" "),a("div",{staticClass:"nested-body",class:{"is-hidden":e.isFormHidden}},[a("validation-observer",{key:""+e.isSavingNewElement,ref:e.$ubt(e.labelText).replace(/ /g,"-")+"-new",attrs:{disabled:!0,rules:e.required?"required":"",slim:""}},[a("ub-form-element",{key:e.updatePass,attrs:{element:e.ui.element,"reusable-element-ctx":e.reusableElementCtx,"chart-url":e.chartUrl,"disabled-prop":e.disabled,schema:e.schema.items,"whole-schema":e.wholeSchema,required:e.required},on:{"update-model-value":e.updateModelValueEvent},model:{value:e.newItem,callback:function(t){e.newItem=t},expression:"newItem"}})],1)],1)]:[a("div",{staticClass:"is-flex is-aligned-item-center is-justify-content-space-between"},[e.labelText?a("ub-label-element",{attrs:{label:e.label,"is-collapsible":!0,"is-form-hidden":e.isFormHidden,"is-required":e.required,errors:e.errors&&e.errors.length?e.errors:e.itemValidationError?[e.itemValidationError]:[],schema:e.schema},on:{click:function(t){e.isFormHidden=!e.isFormHidden}}}):e._e(),e._v(" "),e.disabled||e.isCreateDisabled?e._e():a("button",{staticClass:"\n button\n ac-button\n is-transparent\n is-primary\n is-small\n is-pulled-right\n is-hovered-underline\n ",on:{click:function(t){return t.preventDefault(),e.onAddClick(t)}}},[e._v("\n + "+e._s(e.$ubt("buttons.add_new"))+"\n ")])],1),e._v(" "),a("div",{class:{"nested-body":e.labelText,"is-hidden":e.isFormHidden}},[e.dataForTable.length?a("div",{staticClass:"ac-table-container table-container"},[a("table",{staticClass:"table ac-table ac-striped is-fullwidth"},[a("thead",[a("tr",[e._l(e.tableRowsName,(function(t,i){return a("th",{key:i},[e._v("\n "+e._s(e.$ubt(t))+"\n ")])})),e._v(" "),a("th",{staticClass:"has-text-right"},[e._v("Actions")])],2)]),e._v(" "),a("tbody",[e._l(e.dataForTable,(function(t,i){return[a("tr",{key:i},[e._l(e.tableValuesPath,(function(i,n){return a("td",{key:n},["key-operator-values-array"===e.tableData[n].typeOfValue?e._l(e.getTableValue(t,i),(function(t,i){return a("span",{key:i},[a("span",{staticClass:"circle-list-shape"}),e._v(" "),a("code",[e._v(e._s(t.key)+" "+e._s(t.operator)+"\n "+e._s("["+t.values.join(", ")+"]"))]),e._v(" "),a("br")])})):"array"===e.tableData[n].typeOfValue?e._l(e.getTableValue(t,i),(function(t,i){return a("span",{key:i},[a("span",{staticClass:"circle-list-shape"}),a("strong",[e._v(e._s(t))]),e._v(" "),a("br")])})):"key-value"===e.tableData[n].typeOfValue?e._l(e.getTableValue(t,i),(function(t,i){return a("span",{key:i},[a("div",{staticClass:"label-action is-flex is-flex-wrap-wrap"},[e._m(0,!0),e._v(" "),a("strong",[e._v(e._s(i)+" : "+e._s(t)+" ")])]),e._v(" "),a("br")])})):"code"===e.tableData[n].typeOfValue?[a("pre",[e._v(e._s(e.getTableValue(t,i)))])]:[e._v("\n "+e._s(e.getTableValue(t,i))+"\n ")]],2)})),e._v(" "),a("td",{staticClass:"is-pulled-right"},[a("div",{staticClass:"buttons is-justify-content-flex-end"},[e.disabled||e.individualItemDisabilityVerdict[i]&&e.individualItemDisabilityVerdict[i].isEditDisabled?e._e():a("button",{staticClass:"\n button\n ac-button\n is-square is-tinny is-outlined-gray is-transparent\n ",attrs:{title:e.$ubt("buttons.edit")},on:{click:function(t){return t.preventDefault(),e.onEditClick(i)}}},[a("i",{staticClass:"fa fa-edit",attrs:{"aria-hidden":"true"}})]),e._v(" "),e.disabled||e.individualItemDisabilityVerdict[i]&&e.individualItemDisabilityVerdict[i].isDeleteDisabled?e._e():a("button",{staticClass:"\n button\n ac-button\n is-square is-tinny is-outlined-gray is-transparent\n ",attrs:{title:e.$ubt("buttons.delete")},on:{click:function(t){return t.preventDefault(),e.deleteItem(i)}}},[a("i",{staticClass:"fa fa-trash",attrs:{"aria-hidden":"true"}})]),e._v(" "),a("button",{staticClass:"\n button\n ac-button\n is-square is-tinny is-outlined-gray is-transparent\n ",attrs:{title:e.$ubt("buttons.show_details")},on:{click:function(t){return t.preventDefault(),e.onDetailsClick(i)}}},[a("i",{class:["fa",e.showFieldIdx===i?"fa-angle-up":"fa-angle-down"],attrs:{"aria-hidden":"true"}})])])])],2),e._v(" "),e.editFieldIdx===i?a("tr",{key:i+"-edit",staticClass:"is-selected"},[a("td",{staticClass:"pr-2",attrs:{colspan:e.tableRowsName.length+1}},[a("div",{staticClass:"ac-nested-elements mt-15 mr-15 mb-15"},[a("div",{staticClass:"\n is-flex\n is-aligned-item-center\n is-justify-content-space-between\n "},[a("ub-label-element",{attrs:{label:{text:e.$ubt("buttons.edit")+" "+e.$ubt(e.addFormLabel)},"is-collapsible":!0,"is-form-hidden":e.isFormHidden},on:{click:function(t){e.isFormHidden=!e.isFormHidden}}}),e._v(" "),a("div",{staticClass:"buttons pb-5"},[a("button",{staticClass:"\n button\n ac-button\n is-tinny\n is-square\n is-outlined-gray\n is-transparent\n is-primary\n ",attrs:{disabled:e.disabled},on:{click:function(t){return t.preventDefault(),e.saveItem(t)}}},[a("i",{staticClass:"fa fa-floppy-o",attrs:{"aria-hidden":"true"}})]),e._v(" "),a("button",{staticClass:"\n button\n ac-button\n is-tinny\n is-square\n is-outlined-gray\n is-transparent\n is-danger\n ",on:{click:function(t){return t.preventDefault(),e.resetAllData(t)}}},[a("i",{staticClass:"fa fa-close",attrs:{"aria-hidden":"true"}})])])],1),e._v(" "),a("div",{staticClass:"nested-body",class:{"is-hidden":e.isEditFormHidden}},[a("validation-observer",{key:""+e.editFieldIdx,ref:e.$ubt(e.labelText).replace(/ /g,"-")+"-edit",refInFor:!0,attrs:{disabled:!0,rules:e.required?"required":"",slim:""}},[a("ub-form-element",{key:e.updatePass,attrs:{element:e.ui.element,"reusable-element-ctx":e.reusableElementCtx,"chart-url":e.chartUrl,"disabled-prop":e.disabled,schema:e.schema.items,"whole-schema":e.wholeSchema,required:e.required},on:{"update-model-value":e.updateModelValueEvent},model:{value:e.newItem,callback:function(t){e.newItem=t},expression:"newItem"}})],1)],1)])])]):e._e(),e._v(" "),e.showFieldIdx===i?a("tr",{key:i+"-show",staticClass:"is-selected"},[a("td",{staticClass:"pr-2",attrs:{colspan:e.tableRowsName.length+1}},e._l(e.tableContents,(function(i,n){return a("div",{key:n,staticClass:"mt-15 mr-15 mb-15"},["value"===i.type?a("div",{staticClass:"single-name-title mb-10"},[a("h6",{staticClass:"is-small mb-3 is-block"},[e._v("\n "+e._s(e.$ubt(i.label&&i.label.text))+"\n ")]),e._v(" "),"string"===i.typeOfValue?a("p",{staticClass:"font-size-13"},[e._v("\n "+e._s(e.getTableValue(t,i.path))+"\n ")]):e._e(),e._v(" "),"array"===i.typeOfValue?a("ul",{staticClass:"ac-unordered-list-items"},e._l(e.getTableValue(t,i.path),(function(t,i){return a("li",{key:i},[a("span",{staticClass:"circle-list-shape"}),e._v(" "),a("strong",[e._v(e._s(t))])])})),0):e._e(),e._v(" "),"key-value"===i.typeOfValue?a("ul",{staticClass:"ac-unordered-list-items"},e._l(e.getTableValue(t,i.path),(function(t,i){return a("li",{key:i},[a("div",{staticClass:"label-action is-flex is-flex-wrap-wrap"},[e._m(1,!0),e._v(" "),a("strong",[e._v(e._s(i)+" : "+e._s(t)+" ")])])])})),0):e._e(),e._v(" "),"code"===i.typeOfValue?a("pre",[e._v(e._s(e.getTableValue(t,i.path)))]):e._e(),e._v(" "),"object-array"===i.typeOfValue||"key-operator-values-array"===i.typeOfValue?a("ub-object-array-table",{attrs:{"table-contents":i.tableContents,"model-value":e.getTableValue(t,i.path)}}):e._e()],1):e._e(),e._v(" "),"label"===i.type&&i.label&&""!==i.label.text?a("div",{staticClass:"nested-header"},[a("h6",{staticClass:"is-semi-normal"},[a("span",[e._v(e._s(e.$ubt(i.label&&i.label.text)))])])]):e._e()])})),0)]):e._e()]}))],2)])]):a("div",{staticClass:"label-action is-flex is-flex-wrap-wrap mb-5"},[a("strong",[e._v(" No Item Found. ")])])])]],2)},staticRenderFns:[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"label-icon"},[t("img",{attrs:{src:b,alt:""}})])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"label-icon"},[t("img",{attrs:{src:b,alt:""}})])}]},void 0,{name:"ub-single-step-form-array",mixins:[o,u,c,d],components:{UbObjectArrayTable:function(){return import("./ObjectArrayTable-db12bb3c.js").then((function(e){return e.default}))},UbFormElement:function(){return import("./FormElement-3679b8af.js").then((function(e){return e.F})).then((function(e){return e.default}))},UbLabelElement:function(){return import("./LabelElement-d1b528f2.js").then((function(e){return e.default}))}},props:{label:{type:Object,default:function(){return{}}},ui:{type:Object,default:function(){return{}}},schema:{type:Object,default:function(){return{}}},wholeSchema:{type:Object,default:function(){return{}}},value:{type:null,default:function(){return[]}},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},errors:{type:Array,default:function(){return[]}},addFormLabel:{type:String,default:"Item"},tableContents:{type:Array,default:function(){return[]}},reusableElementCtx:{type:Object,default:function(){return{}}},chartUrl:{type:String,default:""},hideForm:{type:Boolean,default:!1},newItemValidator:{type:String,default:""},isCreateDisabled:{type:Boolean,default:!1}},data:function(){return{modelValue:[],newItem:"",updatePass:0,isSavingNewElement:!1,editFieldIdx:"",showFieldIdx:"",dataForTable:[],isFormHidden:!1,isEditFormHidden:!0,itemValidationError:""}},computed:{schemaRef:function(){return this.ui.schema.$ref||""},tableData:function(){return this.tableContents.filter((function(e){return e.inTableColumn}))},tableValuesPath:function(){return this.tableData.map((function(e){return e.path}))},tableRowsName:function(){return this.tableData.map((function(e){var t;return null===(t=e.label)||void 0===t?void 0:t.text}))},labelText:function(){return this.label.text||"label"},individualItemsArray:function(){return this.modelValue||[]}},created:function(){(!this.modelValue||Array.isArray(this.modelValue)&&!this.modelValue.length)&&(this.modelValue=Array.isArray(this.value)?t(this.value):[]),this.isFormHidden=this.hideForm},watch:{modelValue:{deep:!0,immediate:!0,handler:function(e){this.$emit("input",e),this.updateDataForTable(e)}},value:{deep:!0,immediate:!0,handler:function(e){JSON.stringify(e)!==JSON.stringify(this.modelValue)&&(this.modelValue=t(e))}},isSavingNewElement:function(){this.isFormHidden=!1}},methods:{getTableValue:function(e,t){return a(e,"#/"+t)},updateDataForTable:function(e){var a=this;return r(l.mark((function i(){var n,s,r,o;return l.wrap((function(i){for(;;)switch(i.prev=i.next){case 0:n=Array.isArray(e)?e:[],a.dataForTable=t(n),s=m(a.tableContents),i.prev=3,o=l.mark((function e(){var t,i,s;return l.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(!(t=r.value).computed){e.next=7;break}return i=n.map((function(e){return a.performFuncCall(t.computed,e)})),e.next=5,Promise.all(i);case 5:s=e.sent,a.dataForTable.forEach((function(e,i){a.setValue(e,t.path.split("/"),s[i])}));case 7:case"end":return e.stop()}}),e)})),s.s();case 6:if((r=s.n()).done){i.next=10;break}return i.delegateYield(o(),"t0",8);case 8:i.next=6;break;case 10:i.next=15;break;case 12:i.prev=12,i.t1=i.catch(3),s.e(i.t1);case 15:return i.prev=15,s.f(),i.finish(15);case 18:case"end":return i.stop()}}),i,null,[[3,12,15,18]])})))()},setValue:function(e,t,a){if(1===t.length)this.$set(e,t[0],a);else if(t.length>1){var i=t.shift();e[i]||this.$set(e,i,{}),this.setValue(e[i],t,a)}},saveItem:function(){var e=this;return r(l.mark((function a(){var n,s,r;return l.wrap((function(a){for(;;)switch(a.prev=a.next){case 0:if(n="".concat(e.$ubt(e.labelText).replace(/ /g,"-"),"-").concat(e.isSavingNewElement?"new":"edit"),s=!1,!e.isSavingNewElement){a.next=8;break}return a.next=5,e.$refs[n].validate();case 5:s=a.sent,a.next=11;break;case 8:return a.next=10,e.$refs[n][0].validate();case 10:s=a.sent;case 11:if(!e.newItemValidator){a.next=18;break}return a.next=14,e.performFuncCall(e.newItemValidator,i({isCreate:e.isSavingNewElement},e.newItem));case 14:if(!(r=a.sent)||!r.isInvalid){a.next=18;break}return e.itemValidationError=r.message,a.abrupt("return");case 18:e.itemValidationError="",s&&(""===e.editFieldIdx?(e.modelValue||(e.modelValue=[]),e.modelValue.push(t(e.newItem))):e.$set(e.modelValue,e.editFieldIdx,t(e.newItem)),e.resetAllData());case 20:case"end":return a.stop()}}),a)})))()},onAddClick:function(){this.resetAllData(),this.isSavingNewElement=!0},onEditClick:function(e){this.resetAllData(),this.newItem=t(this.modelValue[e]),this.editFieldIdx=e,this.isEditFormHidden=!1},onDetailsClick:function(e){this.showFieldIdx!==e?(this.resetAllData(),this.showFieldIdx=e):this.resetAllData()},deleteItem:function(e){this.$delete(this.modelValue,e),this.updatePass+=1,this.resetAllData()},resetAllData:function(){this.showFieldIdx="",this.editFieldIdx="",this.newItem="",this.isSavingNewElement=!1,this.isEditFormHidden=!0,this.itemValidationError=""},updateModelValueEvent:function(e){e.path&&(e.isDelete?this.deleteValue(this.newItem,e.path.split("/")):("object"!==n(this.newItem)&&(this.newItem={}),this.setValue(this.newItem,e.path.split("/"),e.value))),this.updatePass++},deleteValue:function(e,t){if(1===t.length)this.$delete(e,t[0]);else if(t.length>1){var a=t.shift();e[a]||(e[a]={}),this.deleteValue(e[a],t)}}}},void 0,!1,void 0,!1,void 0,void 0,void 0),p=Object.freeze({__proto__:null,default:f});export{p as S,m as _};