Editable datetime fields

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",

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"

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();