atk4/ui

{"version":3,"file":"js/atk-vue-inline-edit.min.js","mappings":"gJAWA,SACIA,KAAM,gBACNC,SAAW,4XAYXC,MAAO,CACHC,IAAKC,OACLC,UAAWD,OACXE,WAAYC,QACZC,QAASC,QAEbC,KAAM,WACF,MAAO,CACHC,MAAOC,KAAKP,UACZQ,eAAgBD,KAAKP,UACrBS,UAAU,EAElB,EACAC,SAAU,CACNC,QAAS,WACL,OAAOJ,KAAKC,iBAAmBD,KAAKD,KACxC,GAEJM,QAAS,CACLC,QAAS,WACDN,KAAKE,SACLF,KAAKO,aAELP,KAAKC,eAAiBD,KAAKD,KAEnC,EACAS,QAAS,SAAUC,GACf,MAAMC,EAAMD,EAAEE,QACF,KAARD,EACAV,KAAKY,UACU,KAARF,GACPV,KAAKa,UAEb,EACAC,OAAQ,WACAd,KAAKI,UACDJ,KAAKN,WACLM,KAAKe,SAELf,KAAKD,MAAQC,KAAKC,eAG9B,EACAY,SAAU,WACNb,KAAKD,MAAQC,KAAKC,eAClBD,KAAKgB,IAAIC,cAAc,SAASC,MACpC,EACAN,QAAS,WACDZ,KAAKI,SACLJ,KAAKe,QAEb,EACAR,WAAY,WACRP,KAAKE,UAAW,CACpB,EACAa,OAAQ,WACJ,MAAMI,EAAOnB,KACboB,IAAEpB,KAAKgB,KAAKK,IAAI,CACZC,GAAI,MACJ/B,IAAKS,KAAKT,IACVO,KAAM,CAAEC,MAAOC,KAAKD,OACpBwB,OAAQ,OACRC,WAAY,SAAUC,EAAGhB,GACjBgB,EAAEC,mBACFP,EAAKjB,UAAW,EAEhBiB,EAAKlB,eAAiBkB,EAAKpB,KAEnC,GAER,G","sources":["webpack://atk/./src/vue-components/inline-edit.component.js"],"sourcesContent":["import $ from 'external/jquery';\n\n/**\n * Allow user to edit a db record inline and send\n * changes to server.\n *\n * Properties need for this component are:\n * context: string, a jQuery selector where the 'loading' class will be apply by Fomantic-UI - default to the requesting element.\n * url:     string, the URL to call.\n * value:   array, array of value to send to server.\n */\nexport default {\n    name: 'AtkInlineEdit',\n    template: `\n        <div :class=\"[options.inputCss, hasError ? 'error' : '' ]\">\n            <input\n                :class=\"options.inlineCss\"\n                :name=\"options.fieldName\"\n                v-model=\"value\"\n                @keyup=\"onKeyup\"\n                @focus=\"onFocus\"\n                @blur=\"onBlur\"\n            />\n            <i class=\"icon\" />\n        </div>`,\n    props: {\n        url: String,\n        initValue: String,\n        saveOnBlur: Boolean,\n        options: Object,\n    },\n    data: function () {\n        return {\n            value: this.initValue,\n            lastValueValid: this.initValue,\n            hasError: false,\n        };\n    },\n    computed: {\n        isDirty: function () {\n            return this.lastValueValid !== this.value;\n        },\n    },\n    methods: {\n        onFocus: function () {\n            if (this.hasError) {\n                this.clearError();\n            } else {\n                this.lastValueValid = this.value;\n            }\n        },\n        onKeyup: function (e) {\n            const key = e.keyCode;\n            if (key === 13) {\n                this.onEnter();\n            } else if (key === 27) {\n                this.onEscape();\n            }\n        },\n        onBlur: function () {\n            if (this.isDirty) {\n                if (this.saveOnBlur) {\n                    this.update();\n                } else {\n                    this.value = this.lastValueValid;\n                }\n            }\n        },\n        onEscape: function () {\n            this.value = this.lastValueValid;\n            this.$el.querySelector('input').blur();\n        },\n        onEnter: function () {\n            if (this.isDirty) {\n                this.update();\n            }\n        },\n        clearError: function () {\n            this.hasError = false;\n        },\n        update: function () {\n            const that = this;\n            $(this.$el).api({\n                on: 'now',\n                url: this.url,\n                data: { value: this.value },\n                method: 'POST',\n                onComplete: function (r, e) {\n                    if (r.hasValidationError) {\n                        that.hasError = true;\n                    } else {\n                        that.lastValueValid = that.value;\n                    }\n                },\n            });\n        },\n    },\n};\n"],"names":["name","template","props","url","String","initValue","saveOnBlur","Boolean","options","Object","data","value","this","lastValueValid","hasError","computed","isDirty","methods","onFocus","clearError","onKeyup","e","key","keyCode","onEnter","onEscape","onBlur","update","$el","querySelector","blur","that","$","api","on","method","onComplete","r","hasValidationError"],"sourceRoot":""}