"use strict";(self.webpackChunkatk=self.webpackChunkatk||[]).push([[71],{77590:(t,e,n)=>{n.r(e),n.d(e,{default:()=>c});n(9228),n(90170),n(42381),n(67242),n(42359),n(59668),n(62052);var i=n(21145),a=n.n(i),l=n(86157);const o={name:"atk-textarea",template:'<textarea v-model="text" @input="handleChange"></textarea>',props:{value:[String,Number]},data:function(){return{text:this.value}},methods:{handleChange:function(t){this.$emit("input",t.target.value)}}};var s=n(30901),r=n(49880);const u={name:"atk-multiline-cell",template:'\n <component :is="getComponent()"\n :fluid="true"\n class="fluid"\n @input="onInput"\n @onChange="onChange"\n v-model="inputValue"\n :name="inputName"\n ref="cell"\n v-bind="getComponentProps()"></component>\n ',components:{"atk-multiline-readonly":{template:"<div>{{readOnlyValue}}</div>",name:"atk-multiline-readonly",props:["readOnlyValue"]},"atk-multiline-textarea":o,"atk-date-picker":s.Z,"atk-lookup":r.Z},props:["cellData","fieldValue"],data:function(){return{fieldName:this.cellData.name,type:this.cellData.type,inputName:"-"+this.cellData.name,inputValue:this.fieldValue}},methods:{getComponent:function(){return this.cellData.definition.component},getComponentProps:function(){return"atk-multiline-readonly"===this.getComponent()?{readOnlyValue:this.fieldValue}:this.cellData.definition.componentProps},onInput:function(t){this.inputValue=this.getTypeValue(t),this.$emit("update-value",this.fieldName,this.inputValue)},onChange:function(t){this.onInput(t)},getTypeValue:function(t){let e=t;return"boolean"===this.type&&(e=t.target.checked),e}}},d={name:"atk-multiline-header",template:'\n <sui-table-header>\n <sui-table-row v-if="hasError()">\n <sui-table-cell :style="{ background: \'none\' }"></sui-table-cell>\n <sui-table-cell :style="{ background: \'none\' }" state="error" v-for="(column, idx) in columns" :key="idx" v-if="column.isVisible" :textAlign="getTextAlign(column)"><sui-icon name="attention" v-if="getErrorMsg(column)"></sui-icon>{{getErrorMsg(column)}}</sui-table-cell>\n </sui-table-row>\n <sui-table-row v-if="hasCaption()">\n <sui-table-headerCell :colspan="getVisibleColumns()">{{caption}}</sui-table-headerCell>\n </sui-table-row>\n <sui-table-row :verticalAlign="\'top\'">\n <sui-table-header-cell width="one" textAlign="center"><input type="checkbox" @input="onToggleDeleteAll" :checked.prop="isChecked" :indeterminate.prop="isIndeterminate" ref="check"></sui-table-header-cell>\n <sui-table-header-cell v-for="(column, idx) in columns" :key="idx" v-if="column.isVisible" :textAlign="getTextAlign(column)">\n <div>{{column.caption}}</div>\n <div :style="{ position: \'absolute\', top: \'-22px\' }" v-if="false"><sui-label pointing="below" basic color="red" v-if="getErrorMsg(column)">{{getErrorMsg(column)}}</sui-label></div>\n </sui-table-header-cell>\n </sui-table-row>\n </sui-table-header>\n ',props:["fields","state","errors","caption"],data:function(){return{columns:this.fields,isDeleteAll:!1}},methods:{onToggleDeleteAll:function(){this.$nextTick((()=>{l.Z.eventBus.emit(this.$root.$el.id+"-toggle-delete-all",{isOn:this.$refs.check.checked})}))},getTextAlign:function(t){let e="left";if(!t.isEditable)switch(t.type){case"integer":case"float":case"atk4_money":e="right"}return e},getVisibleColumns:function(){let t=1;return this.columns.forEach((e=>{t=e.isVisible?t+1:t})),t},hasError:function(){return Object.keys(this.errors).length>0},hasCaption:function(){return this.caption},getErrorMsg:function(t){if(this.hasError()){const e=Object.keys(this.errors);for(let n=0;n<e.length;n++){const i=this.errors[e[n]].filter((e=>e.name===t.name));if(i.length>0)return i[0].msg}}return null}},computed:{isIndeterminate:function(){return"indeterminate"===this.state},isChecked:function(){return"on"===this.state}}},c={name:"atk-multiline",template:'<div>\n <sui-table v-bind="tableProp">\n <atk-multiline-header :fields="fieldData" :state="getMainToggleState" :errors="errors" :caption="caption"></atk-multiline-header>\n <atk-multiline-body @onTabLastRow="onTabLastRow" :fieldDefs="fieldData" :rowData="rowData" :deletables="getDeletables" :errors="errors"></atk-multiline-body>\n <sui-table-footer>\n <sui-table-row>\n <sui-table-header-cell />\n <sui-table-header-cell :colspan="getSpan" textAlign="right">\n <div is="sui-button-group">\n <sui-button size="small" @click.stop.prevent="onAdd" type="button" icon="plus" ref="addBtn" :disabled="isLimitReached"></sui-button>\n <sui-button size="small" @click.stop.prevent="onDelete" type="button" icon="trash" :disabled="isDeleteDisable"></sui-button>\n </div>\n </sui-table-header-cell>\n </sui-table-row>\n </sui-table-footer>\n </sui-table>\n <div><input :form="form" :name="name" type="hidden" :value="value" ref="atkmlInput"></div>\n </div>',props:{data:Object},data:function(){return{form:this.data.formName,value:this.data.inputValue,name:this.data.inputName,rowData:[],fieldData:this.data.fields||[],eventFields:this.data.eventFields||[],deletables:[],hasChangeCb:this.data.hasChangeCb,errors:{},caption:this.data.caption||null,tableProp:{basic:!1,celled:!1,collapsing:!1,stackable:!1,inverted:!1,...this.data.tableProps||{}}}},components:{"atk-multiline-body":{name:"atk-multiline-body",template:'\n <sui-table-body>\n <atk-multiline-row v-for="(row, idx) in rows" :key="row.__atkml"\n @onTabLastColumn="onTabLastColumn(idx)"\n :fields="fields"\n :rowId="row.__atkml"\n :isDeletable="isDeletableRow(row)"\n :rowValues="row"\n :error="getError(row.__atkml)"></atk-multiline-row>\n </sui-table-body>\n ',props:["fieldDefs","rowData","deletables","errors"],data:function(){return{fields:this.fieldDefs}},created:function(){},components:{"atk-multiline-row":{name:"atk-multiline-row",template:'\n <sui-table-row :verticalAlign="\'middle\'">\n <sui-table-cell width="one" textAlign="center"><input type="checkbox" @input="onToggleDelete" v-model="toDelete"></sui-table-cell>\n <sui-table-cell @keydown.tab="onTab(idx)" v-for="(column, idx) in columns" :key="idx" :state="getErrorState(column)" v-bind="column.cellProps" :style="{ overflow: \'visible\' }" v-if="column.isVisible">\n <atk-multiline-cell\n :cellData="column"\n @update-value="onUpdateValue"\n :fieldValue="getValue(column)"></atk-multiline-cell>\n </sui-table-cell>\n </sui-table-row>\n ',props:["fields","rowId","isDeletable","rowValues","error"],data:function(){return{columns:this.fields}},components:{"atk-multiline-cell":u},computed:{toDelete:{get:function(){return this.isDeletable},set:function(t){return t}}},methods:{onTab:function(t){t===this.columns.filter((t=>t.isEditable)).length&&this.$emit("onTabLastColumn")},getErrorState:function(t){if(this.error){if(this.error.filter((e=>t.name===e.name)).length>0)return"error"}return null},getColumnWidth:function(t){return t.fieldOptions?t.fieldOptions.width:null},onEdit:function(){this.isEditing=!0},onToggleDelete:function(t){l.Z.eventBus.emit(this.$root.$el.id+"-toggle-delete",{rowId:this.rowId})},onUpdateValue:function(t,e){l.Z.eventBus.emit(this.$root.$el.id+"-update-row",{rowId:this.rowId,fieldName:t,value:e})},getValue:function(t){return this.rowValues[t.name]||t.default}}}},computed:{rows:function(){return this.rowData}},methods:{onTabLastColumn:function(t){t+1===this.rowData.length&&this.$emit("onTabLastRow")},isDeletableRow:function(t){return this.deletables.indexOf(t.__atkml)>-1},getError:function(t){return t in this.errors?this.errors[t]:null}}},"atk-multiline-header":d},mounted:function(){this.rowData=this.buildRowData(this.value?this.value:"[]"),this.updateInputValue(),l.Z.eventBus.on(this.$root.$el.id+"-update-row",(t=>{this.onUpdate(t.rowId,t.fieldName,t.value)})),l.Z.eventBus.on(this.$root.$el.id+"-toggle-delete",(t=>{const e=this.deletables.indexOf(t.rowId);e>-1?this.deletables.splice(e,1):this.deletables.push(t.rowId)})),l.Z.eventBus.on(this.$root.$el.id+"-toggle-delete-all",(t=>{this.deletables=[],t.isOn&&this.rowData.forEach((t=>{this.deletables.push(t.__atkml)}))})),l.Z.eventBus.on(this.$root.$el.id+"-multiline-rows-error",(t=>{this.errors={...t.errors}}))},methods:{onTabLastRow:function(){!this.isLimitReached&&this.data.addOnTab&&this.onAdd()},onAdd:function(){const t=this.createRow(this.data.fields);this.rowData.push(t),this.updateInputValue(),this.data.afterAdd&&"function"==typeof this.data.afterAdd&&this.data.afterAdd(JSON.parse(this.value)),this.fetchExpression(t.__atkml),this.fetchOnChangeAction()},onDelete:function(){this.deletables.forEach((t=>{this.deleteRow(t)})),this.deletables=[],this.updateInputValue(),this.fetchOnChangeAction(),this.data.afterDelete&&"function"==typeof this.data.afterDelete&&this.data.afterDelete(JSON.parse(this.value))},onUpdate:function(t,e,n){this.updateFieldInRow(t,e,n),this.clearError(t,e),this.updateInputValue(),this.onUpdate.debouncedFx||(this.onUpdate.debouncedFx=l.Z.createDebouncedFx((()=>{this.onUpdate.debouncedFx=null,this.fetchExpression(t),this.fetchOnChangeAction(e)}),250)),this.onUpdate.debouncedFx.call(this)},createRow:function(t){const e={};return t.forEach((t=>{e[t.name]=t.default})),e.__atkml=this.getUUID(),e},deleteRow:function(t){this.rowData.splice(this.rowData.findIndex((e=>e.__atkml===t)),1),delete this.errors[t]},updateFieldInRow:function(t,e,n){this.rowData.forEach((i=>{i.__atkml===t&&(i[e]=n)}))},clearError:function(t,e){if(t in this.errors){const n=this.errors[t].filter((t=>t.name!==e));this.errors[t]=[...n],0===n.length&&delete this.errors[t]}},updateInputValue:function(){this.value=JSON.stringify(this.rowData)},buildRowData:function(t){const e=JSON.parse(t);return e.forEach((t=>{t.__atkml=this.getUUID()})),e},hasExpression:function(){return this.fieldData.filter((t=>t.isExpr)).length>0},fetchOnChangeAction:function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;this.hasChangeCb&&(null===t||this.eventFields.indexOf(t)>-1)&&a()(this.$refs.addBtn.$el).api({on:"now",url:this.data.url,method:"POST",data:{__atkml_action:"on-change",rows:this.value}})},postData:async function(t){const e={...t},n=this.$refs.addBtn.$el;e.__atkml_action="update-row";try{return await l.Z.apiService.suiFetch(this.data.url,{data:e,method:"POST",stateContext:n})}catch(t){console.error(t)}},fetchExpression:async function(t){if(this.hasExpression()){const e=this.findRow(t);if(e){const n=await this.postData(e);if(n.expressions){Object.keys(n.expressions).forEach((e=>{this.updateFieldInRow(t,e,n.expressions[e])})),this.updateInputValue()}}}},findRow:function(t){return this.rowData.find((e=>e.__atkml===t))},getInputElement:function(){return this.$refs.atkmlInput},getUUID:function(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,(t=>{const e=Math.floor(16*Math.random());return("x"===t?e:11&e).toString(16)}))}},computed:{getSpan:function(){return this.fieldData.length-1},getDeletables:function(){return this.deletables},getMainToggleState:function(){let t="off";return this.deletables.length>0&&(t=this.deletables.length===this.rowData.length?"on":"indeterminate"),t},isDeleteDisable:function(){return!this.deletables.length>0},isLimitReached:function(){return 0!==this.data.rowLimit&&this.data.rowLimit<this.rowData.length+1}}}},30901:(t,e,n)=>{n.d(e,{Z:()=>i});const i={name:"atk-date-picker",template:'<flatpickr-picker v-model="date" :config="flatPickr" @on-change="onChange"></flatpickr-picker>',props:["config","value"],data:function(){const{useDefault:t,...e}=this.config;return!t||e.defaultDate||this.value?this.value&&(e.defaultDate=this.value):e.defaultDate=new Date,e.locale||(e.locale=flatpickr.l10ns.default),{flatPickr:e,date:null}},mounted:function(){!this.value&&this.flatPickr.defaultDate&&(this.flatPickr.defaultDate instanceof Date?this.$emit("setDefault",flatpickr.formatDate(this.config.defaultDate,this.config.dateFormat)):this.$emit("setDefault",this.flatPickr.defaultDate))},methods:{onChange:function(t){this.$emit("onChange",flatpickr.formatDate(t[0],this.flatPickr.dateFormat))}}}},49880:(t,e,n)=>{n.d(e,{Z:()=>a});var i=n(86157);const a={name:"atk-lookup",template:'<sui-dropdown\n ref="drop"\n v-bind="dropdownProps"\n :loading="isLoading"\n @input="onChange"\n @filtered="onFiltered"\n v-model="current"\n :class="css"></sui-dropdown>',props:["config","value","optionalValue"],data:function(){const{url:t,reference:e,ui:n,...i}=this.config;return i.selection=!0,{dropdownProps:i,current:this.value,url:t||null,css:[n],isLoading:!1,field:e,query:"",temp:""}},mounted:function(){this.optionalValue&&(this.dropdownProps.options=Array.isArray(this.optionalValue)?this.optionalValue:[this.optionalValue])},methods:{onChange:function(t){this.$emit("onChange",t)},onFiltered:function(t){t&&(this.isLoading=!0),this.onFiltered.debouncedFx||(this.onFiltered.debouncedFx=i.Z.createDebouncedFx((()=>{this.onFiltered.debouncedFx=null,this.query!==this.temp&&(this.query=this.temp,this.query&&this.fetchItems(this.query))}),250)),this.temp=t,this.onFiltered.debouncedFx(this)},fetchItems:async function(t){try{const e={atkVueLookupQuery:t,atkVueLookupField:this.field},n=await i.Z.apiService.suiFetch(this.url,{method:"get",data:e});n.success&&(this.dropdownProps.options=n.results)}catch(t){console.error(t)}finally{this.isLoading=!1}}}}}}]);
//# sourceMappingURL=atk-vue-multiline.min.js.map
|
Download
