From d94367aa25254188ab1495d0d3a0e1b9c5f24623 Mon Sep 17 00:00:00 2001
From: Alvin Sebastian <a.sebastian@connect.qut.edu.au>
Date: Mon, 11 Mar 2024 05:50:35 +0000
Subject: [PATCH] Remove momentjs, add start and end date picker

---
 package-lock.json                    | 157 +++++++++++++++++++++++++++
 package.json                         |   1 +
 src/lib/components/InputDateTime.vue | 137 +++++++++++------------
 src/lib/components/datetimeutils.js  |  35 ++++--
 vite.config.js                       |   3 +-
 5 files changed, 254 insertions(+), 79 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fae2b9d..bb864e9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
         "postcss": "^8.4.21",
         "ro-crate-editor-profiles": "github:Language-Research-Technology/ro-crate-editor-profiles",
         "ro-crate-excel": "^1.0.19",
+        "rollup-plugin-visualizer": "^5.12.0",
         "tailwindcss": "^3.4.1",
         "to-arraybuffer": "^1.0.1",
         "unplugin-auto-import": "^0.17.5",
@@ -2061,6 +2062,20 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/clone": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
@@ -2415,6 +2430,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -3083,6 +3107,15 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
@@ -3460,6 +3493,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "dev": true,
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -3560,6 +3608,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dev": true,
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/isarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
@@ -4573,6 +4633,23 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/open": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
+      "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
+      "dev": true,
+      "dependencies": {
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/ospath": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/ospath/-/ospath-1.2.2.tgz",
@@ -5101,6 +5178,15 @@
         "throttleit": "^1.0.0"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -5310,6 +5396,32 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/rollup-plugin-visualizer": {
+      "version": "5.12.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.12.0.tgz",
+      "integrity": "sha512-8/NU9jXcHRs7Nnj07PF2o4gjxmm9lXIrZ8r175bT9dK8qoLlvKTwRMArRCMgpMGlq8CTLugRvEmyMeMXIU2pNQ==",
+      "dev": true,
+      "dependencies": {
+        "open": "^8.4.0",
+        "picomatch": "^2.3.1",
+        "source-map": "^0.7.4",
+        "yargs": "^17.5.1"
+      },
+      "bin": {
+        "rollup-plugin-visualizer": "dist/bin/cli.js"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "rollup": "2.x || 3.x || 4.x"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/rrweb-cssom": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz",
@@ -5519,6 +5631,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -6628,6 +6749,15 @@
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
       "dev": true
     },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -6646,6 +6776,33 @@
         "node": ">= 14"
       }
     },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dev": true,
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/yauzl": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
diff --git a/package.json b/package.json
index 47f26fd..85aaa47 100644
--- a/package.json
+++ b/package.json
@@ -79,6 +79,7 @@
     "postcss": "^8.4.21",
     "ro-crate-editor-profiles": "github:Language-Research-Technology/ro-crate-editor-profiles",
     "ro-crate-excel": "^1.0.19",
+    "rollup-plugin-visualizer": "^5.12.0",
     "tailwindcss": "^3.4.1",
     "to-arraybuffer": "^1.0.1",
     "unplugin-auto-import": "^0.17.5",
diff --git a/src/lib/components/InputDateTime.vue b/src/lib/components/InputDateTime.vue
index 92f206b..9c98cb1 100644
--- a/src/lib/components/InputDateTime.vue
+++ b/src/lib/components/InputDateTime.vue
@@ -1,9 +1,8 @@
 <script setup>
 import { ref, reactive, watch, computed } from "vue";
-import { ElInput, ElButton } from 'element-plus';
 import { Clock, Calendar } from '@element-plus/icons-vue';
+import { ElInput, ElButton } from 'element-plus';
 import { utilsByType } from './datetimeutils';
-import moment from 'moment';
 
 const props = defineProps({
   modelValue: [String, Date],
@@ -11,83 +10,71 @@ const props = defineProps({
     type: String,
     default: 'datetime',
     /**
-     * @param {string} value
+     * @param {string} value 
      */
-    validator(value) {
-      return (value in inputTypes);
-    }
+    validator(value) { return (value in inputTypes); }
   }
 });
 
 const emit = defineEmits(['update:modelValue']);
 
 const data = reactive({
-  value: '',
-  isValid: true
+  value: ''
+  //isValid: true
 });
 
-const acceptedFormats = [
-  moment.ISO_8601
-];
-
 watch(() => props.modelValue, (val) => {
-  data.isValid = true;
-  if (val) {
-    data.value = val;
-    data.isValid = data.isValid = validate(val);
-  } else {
-    data.value = '';
-    data.isValid = true;
+  if (val === data.value) return;
+  var utils = utilsByType[props.type];
+  if (val instanceof Date) {
+    data.value = utils.dateTo(val);
+    //data.isValid = !isNaN(val.valueOf());
+  } else { // handle string input
+    data.value = val || '';
+    //data.isValid = data.value.split('/').reduce((r, d) => r &&= !isNaN(utils.dateFrom(d)), true);
   }
 }, { immediate: true });
 
 const pickerIcon = computed(() => props.type === 'time' ? Clock : Calendar);
-const utils = computed(() => utilsByType[props.type]);
-const nativeValue = computed(() => {
-  if (data.isValid) {
-    return data.value;
-  }
-});
-const input = ref(null);
-var tempValue;
+//const utils = computed(() => utilsByType[props.type]);
+const dates = computed(() => data.value.split('/'));
+const nativeValue1 = computed(() => utilsByType[props.type].toNative(dates.value[0]));
+const nativeValue2 = computed(() => utilsByType[props.type].toNative(dates.value[1]));
+const isValid = computed(() => dates.value.reduce((r, d) => r &&= !isNaN(utilsByType[props.type].dateFrom(d)), true));
+const hintStart = computed(() => `Pick a ${dates.value.length > 1 ? 'start ' : ''}${props.type}`);
+const hintEnd = computed(() => `Pick a ${dates.value.length > 1 ? 'end ' : ''}${props.type}`);
+const inputStart = ref(null);
+const inputEnd = ref(null);
 
-function onInput(value) {
-  data.isValid = validate(value);
-  data.value = value;
-  tempValue = value
+function update(i, value) {
+  var utils = utilsByType[props.type];
+  var vals = dates.value;
+  var newVal = utils.fromNative(value, vals[i]) || '';
+  if (vals[i] !== newVal) {
+    vals[i] = newVal;
+    data.value = vals.join('/');
+  }
+  //var d = data.value ? utils.dateFrom(data.value, props.modelValue) : new Date(0);
+  //data.isValid = !isNaN(d);
+  //data.isValid = dates.value.reduce((r, d) => r &&= !isNaN(utils.dateFrom(d)), true);
 }
 
-function onChange(event) {
-  if (event.target && event.target.value) {
-    data.isValid = validate(event.target.value);
-  }
-  if (data.isValid) {
-    emit('update:modelValue', tempValue);
+function onChange() {
+  if (isValid.value) {
+    let val = data.value;
+    if (props.modelValue instanceof Date) {
+      val = dates.value.map(d => utilsByType[props.type].dateFrom(d, props.modelValue));
+      if (val.length === 1) val = val[0];
+    }
+    emit('update:modelValue', val);
   }
 }
 
-function togglePicker() {
-  input.value.showPicker();
+function togglePickerStart() {
+  inputStart.value.showPicker();
 }
-
-function validate(value) {
-  let isValid = false;
-  if (typeof value === 'string') {
-    const values = value.split(/\//);
-    if (values[0] && values[1]) {
-      const dateObj1 = moment(values[0], acceptedFormats, true);
-      if (dateObj1.isValid()) {
-        const dateObj2 = moment(values[1], acceptedFormats, true);
-        if (dateObj2.isValid()) {
-          isValid = true;
-        }
-      }
-    } else {
-      const dateObj = moment(value, acceptedFormats, true);
-      isValid = dateObj.isValid();
-    }
-  }
-  return isValid;
+function togglePickerEnd() {
+  inputEnd.value.showPicker();
 }
 </script>
 
@@ -98,26 +85,33 @@ export default {};
 
 
 <template>
-  <div class="flex flex-col flex-grow">
-    <el-input v-model="data.value" type="text" :class="{ 'is-error': !data.isValid }" @input="onInput" @change="onChange">
+  <div class="flex flex-col flex-grow input-date-time">
+    <el-input v-model="data.value" type="text" :class="{ 'is-error': !isValid }" @change="onChange">
       <template #append>
-        <el-button :icon="pickerIcon" @click="togglePicker"></el-button>
-        <input ref="input" class="native-picker" :value="nativeValue" @input="onInput($event.target.value)"
-          @change="onChange" :type="inputTypes[props.type]" />
+        <el-button :icon="pickerIcon" @click="togglePickerStart" :title="hintStart"></el-button>
+        <input ref="inputStart" class="native-picker" :value="nativeValue1" @input="update(0, $event.target.value)"
+          @change="onChange" :type="inputTypes[type]" />
+        <template v-if="dates.length > 1">
+          <span>/</span>
+          <el-button :icon="pickerIcon" @click="togglePickerEnd" :title="hintEnd"></el-button>
+          <input ref="inputEnd" class="native-picker" :value="nativeValue2" @input="update(1, $event.target.value)"
+          @change="onChange" :type="inputTypes[type]" />
+        </template>
       </template>
     </el-input>
-    <template v-if="!data.isValid">
-      <div class="text-xs text-red-700" v-if="props.type === 'time'">
+
+    <template v-if="!isValid">
+      <div class="text-xs text-red-700" v-if="type === 'time'">
         Time value must be in <a class="font-bold hover:underline" target=”_blank”
           href="https://www.w3.org/TR/NOTE-datetime">ISO 8601 format</a>.
         E.g.: 03:23:00, 03:23:00.001, 03:23:00+10, 03:23:00Z
       </div>
-      <div class="text-xs text-red-700" v-if="props.type === 'date'">
+      <div class="text-xs text-red-700" v-if="type === 'date'">
         Date value must be in <a class="font-bold hover:underline" target=”_blank”
           href="https://www.w3.org/TR/NOTE-datetime">ISO 8601 format</a>.
         E.g.: 2021-03-22, 2021-03, 2021
       </div>
-      <div class="text-xs text-red-700" v-if="props.type === 'datetime'">
+      <div class="text-xs text-red-700" v-if="type === 'datetime'">
         Datetime value must be in <a class="font-bold hover:underline" target=”_blank”
           href="https://www.w3.org/TR/NOTE-datetime">ISO 8601 format</a>.
         E.g.: 2021-03-22T03:23:00, 2021-03-22, 2021, 2021/2022
@@ -127,7 +121,14 @@ export default {};
   <!--input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"/-->
 </template>
 
-<style scoped>
+<style>
+.input-date-time .el-input-group__append {
+  padding: 0;
+}
+.input-date-time .el-input-group__append .el-button {
+  margin: 0;
+}
+
 input.native-picker {
   position: absolute;
   left: 0;
diff --git a/src/lib/components/datetimeutils.js b/src/lib/components/datetimeutils.js
index 7139ee3..d22640e 100644
--- a/src/lib/components/datetimeutils.js
+++ b/src/lib/components/datetimeutils.js
@@ -1,6 +1,7 @@
 const timeRegex = /^([01]\d|2[0-3])\:([0-5]\d)(?:\:([0-5]\d)(?:[\.](\d+))?)?(?:[zZ]|([\+\-])([01]\d|2[0-3])\:?([0-5]\d)?)?$/;
 const dateRegex = /^(?:([\+\-]\d+)|(\d{4}))(\-\d{2})?(\-\d{2})?$/;
 const dateTimeRegex = new RegExp('^('+dateRegex.source.slice(1,-1) + ')(?:T(' + timeRegex.source.slice(1,-1) + '))?$');
+
 export const utilsByType = {
   time: {
     dateTo(val) {
@@ -8,24 +9,31 @@ export const utilsByType = {
       return '';
     },
     /**
-     * Convert a string value to date
+     * Convert a string value that represent a time to a Date object
      * @param {string} val New value
-     * @param {Date} mval existing data value
+     * @param {Date} mval existing time value
      */
     dateFrom(val, mval) {
       let m;
+      let d = new Date(0);
+      let hh = 0, mm = 0, ss = 0, ms = 0, offset = 0;
       if (val && (m = val.match(timeRegex))) {
-        let d = mval instanceof Date ? new Date(mval) : new Date(0);
-        let [hh, mm, ss, ms] = m.slice(1, 5).map(e => parseInt(e) || 0);
-        d.setUTCHours(hh, mm, ss, ms);
+        if (mval instanceof Date) d = new Date(mval);
+        [hh, mm, ss, ms] = m.slice(1, 5).map(e => parseInt(e) || 0);
         if (m[5]) { //adjust timezone offset
           let [tzh, tzm] = [6, 7].map((i) => parseInt(m[i] || 0));
-          let offset = parseInt(m[5] + ((tzh * 60 + tzm) * 60 * 1000));
-          d.setTime(d.getTime() + offset);
+          offset = parseInt(m[5] + ((tzh * 60 + tzm) * 60 * 1000));
         }
-        return d;
       }
+      d.setUTCHours(hh, mm, ss, ms);
+      d.setTime(d.getTime() + offset);
+      return d;
     },
+    /**
+     * 
+     * @param {*} val time in string eg 10:12:15.003
+     * @returns 
+     */
     toNative(val) {
       var m;
       if (val && (m = val.match(/^([01]\d|2[0-3])(?:\:([0-5]\d))?(?:\:([0-5]\d))?(?:\.(\d{1,3}))?/))) {
@@ -46,7 +54,8 @@ export const utilsByType = {
      * @param {string} val 
      */
     dateFrom(val) {
-      if (val && val.match(dateRegex)) return new Date(val);
+      if (!val) return new Date();
+      else if (val.match(dateRegex)) return new Date(val);
     },
     toNative(val) {
       if (val) {
@@ -66,8 +75,14 @@ export const utilsByType = {
     },
     /** @param {string} val */
     dateFrom(val) {
-      if (val && val.match(dateTimeRegex)) return new Date(val);
+      if (!val) return new Date();
+      else if (val.match(dateTimeRegex)) return new Date(val);
     },
+    /**
+     * Convert any ISO8601 format to the full form
+     * @param {*} val data time in string eg: 2024, 2024-12-21, 2024-12-21T10:11
+     * @returns full form of ISO8601 date time format without the timezone, eg: 2024-12-21T11:12:13.123
+     */
     toNative(val) {
       if (!val) return '';
       var v = val;
diff --git a/vite.config.js b/vite.config.js
index 3aeb263..1f41843 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -10,7 +10,7 @@ import vue from '@vitejs/plugin-vue'
 import ElementPlus from 'unplugin-element-plus/vite'
 import tailwindcss from 'tailwindcss';
 import autoprefixer from 'autoprefixer';
-
+import { visualizer } from "rollup-plugin-visualizer";
 
 const build = {
   _all: {
@@ -41,6 +41,7 @@ const build = {
 // https://vitejs.dev/config/
 export default defineConfig(({mode}) => ({
   plugins: [
+    visualizer(),
     vue(),
     //createHtmlPlugin({minify: true, entry: 'src/app/main.js'}),
     ElementPlus()