From 50cd852d0198b925ca601c18465a1c4b2572ed92 Mon Sep 17 00:00:00 2001
From: Fabio <fabio286@gmail.com>
Date: Thu, 2 Jul 2020 19:17:25 +0200
Subject: [PATCH] Editable datetime fields

---
 package-lock.json                             |  5 ++++
 package.json                                  |  1 +
 .../components/WorkspaceQueryTableCell.vue    | 30 +++++++++++--------
 3 files changed, 23 insertions(+), 13 deletions(-)

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