diff --git a/package-lock.json b/package-lock.json index 6309b361..6dbab52c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12793,6 +12793,11 @@ "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "dev": true }, + "vue-the-mask": { + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/vue-the-mask/-/vue-the-mask-0.11.1.tgz", + "integrity": "sha512-UquSfnSWejD0zAfcD+3jJ1chUAkOAyoxya9Lxh9acCRtrlmGcAIvd0cQYraWqKenbuZJUdum+S174atv2AuEHQ==" + }, "vuedraggable": { "version": "2.23.2", "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.23.2.tgz", diff --git a/package.json b/package.json index 0ced5cd8..8ee655af 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "spectre.css": "^0.5.8", "vue-click-outside": "^1.1.0", "vue-i18n": "^8.18.2", + "vue-the-mask": "^0.11.1", "vuedraggable": "^2.23.2", "vuex": "^3.5.1", "vuex-persist": "^2.2.0" diff --git a/src/renderer/components/WorkspaceQueryTableCell.vue b/src/renderer/components/WorkspaceQueryTableCell.vue index 6210542a..2a4c2077 100644 --- a/src/renderer/components/WorkspaceQueryTableCell.vue +++ b/src/renderer/components/WorkspaceQueryTableCell.vue @@ -16,7 +16,8 @@ v-else ref="editField" v-model="localContent" - :type="inputType" + v-mask="inputProps.mask" + :type="inputProps.type" autofocus class="editable-field px-2" @blur="editOFF" @@ -28,6 +29,7 @@ import moment from 'moment'; import { mimeFromHex, formatBytes } from 'common/libs/utilities'; import hexToBinary from 'common/libs/hexToBinary'; +import { mask } from 'vue-the-mask'; export default { name: 'WorkspaceQueryTableCell', @@ -41,11 +43,13 @@ export default { case 'text': case 'mediumtext': return val.substring(0, 128); - case 'date': - return moment(val).format('YYYY-MM-DD'); + case 'date': { + return moment(val).isValid() ? moment(val).format('YYYY-MM-DD') : val; + } case 'datetime': - case 'timestamp': - return moment(val).format('YYYY-MM-DD HH:mm:ss.SSS'); + case 'timestamp': { + return moment(val).isValid() ? moment(val).format('YYYY-MM-DD HH:mm:ss.SSS') : val; + } case 'blob': case 'mediumblob': case 'longblob': { @@ -64,6 +68,9 @@ export default { } } }, + directives: { + mask + }, props: { type: String, field: String, @@ -76,24 +83,23 @@ export default { }; }, computed: { - inputType () { + inputProps () { switch (this.type) { case 'char': case 'varchar': case 'text': case 'mediumtext': - return 'text'; + return { type: 'text', mask: false }; case 'int': case 'tinyint': case 'smallint': case 'mediumint': - return 'number'; + return { type: 'number', mask: false }; case 'date': - return 'date'; + return { type: 'text', mask: '####-##-##' }; case 'datetime': case 'timestamp': - return 'datetime-local'; - // TODO: file uploader/viewer or bit field + return { type: 'text', mask: '####-##-## ##:##:##.###' };// TODO: field length case 'blob': case 'mediumblob': case 'longblob': @@ -108,8 +114,6 @@ export default { return value === null ? ' is-null' : ''; }, editON () { - if (!['number', 'text'].includes(this.inputType)) return;// TODO: remove temporary block - this.$nextTick(() => { this.$refs.cell.blur();