{"version":3,"file":"js/atk-vue-inline-edit.js","mappings":"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","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 *\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 */\n\nconst template = `\n <div :class=\"[options.inputCss, hasError ? 'error' : '' ]\">\n <input\n :class=\"options.inlineCss\"\n :name=\"options.fieldName\"\n :type=\"options.fieldType\"\n v-model=\"value\"\n @keyup=\"onKeyup\"\n @focus=\"onFocus\"\n @blur=\"onBlur\" /><i class=\"icon\"></i>\n </div>`;\n\nexport default {\n name: 'atk-inline-edit',\n template: template,\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 temp: this.initValue,\n hasError: false,\n };\n },\n computed: {\n isDirty: function () {\n return this.temp !== this.value;\n },\n },\n methods: {\n onFocus: function () {\n if (this.hasError) {\n this.clearError();\n } else {\n this.temp = this.value;\n }\n },\n onKeyup: function (e) {\n const key = e.keyCode;\n this.clearError();\n if (key === 13) {\n this.onEnter(e);\n } else if (key === 27) {\n this.onEscape();\n }\n },\n onBlur: function () {\n if (this.isDirty && this.saveOnBlur) {\n this.update();\n } else {\n this.value = this.temp; // TODO will not save the value on 2nd edit and submit via enter\n }\n },\n onEscape: function () {\n this.value = this.temp;\n this.$el.querySelector('input').blur();\n },\n onEnter: function (e) {\n if (this.isDirty) {\n this.update();\n }\n },\n clearError: function () {\n this.hasError = false;\n },\n flashError: function (count = 4) {\n if (count === 0) {\n this.hasError = false;\n\n return;\n }\n this.hasError = !this.hasError;\n setTimeout(() => {\n this.flashError(count - 1);\n }, 300);\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.temp = that.value;\n }\n },\n });\n },\n },\n};\n"],"names":["$","template","name","props","url","String","initValue","saveOnBlur","Boolean","options","Object","data","value","temp","hasError","computed","isDirty","methods","onFocus","clearError","onKeyup","e","key","keyCode","onEnter","onEscape","onBlur","update","$el","querySelector","blur","flashError","count","setTimeout","that","api","on","method","onComplete","r","hasValidationError"],"sourceRoot":""}
|
Download
