@afeefa/vue-app 0.0.145 → 0.0.146

package/.afeefa/package/release/version.txt

@@ -1 +1 @@
-0.0.145
+0.0.146

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.145",
+  "version": "0.0.146",
   "description": "",
   "author": "Afeefa Kollektiv <kollektiv@afeefa.de>",
   "license": "MIT",
+  "dependencies": {
+    "moment": "^2.29.1"
+  },
   "devDependencies": {
     "core-js": "^3.25.5",
     "vue": "^2.7.10",

package/src/components/AContextMenu.vue

@@ -172,6 +172,10 @@ export default class AContextMenu extends Mixins(UsesPositionServiceMixin) {
   }
 }
 
+.activator {
+  display: inline-block;
+}
+
 .contextButton {
   cursor: pointer;
 }

package/src/components/AIcon.vue

@@ -23,4 +23,8 @@ export default class AIcon extends Vue {
 .v-icon:not(.button)::after {
   background: none;
 }
+
+.v-icon.button {
+  cursor: pointer;
+}
 </style>

package/src/components/ATimePicker.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="timePicker">
+    <div :class="['timeInput inputField', {focus: focusHour}]">
+      <div
+        class="up iconButton"
+        @click="hourUp"
+      >
+        <a-icon button>
+          $caretUpIcon
+        </a-icon>
+      </div>
+
+      <v-text-field
+        v-model="currentHour"
+        dense
+        outlined
+        hide-details
+        @wheel.prevent="onWheelHour"
+        @focus="focusHour = true"
+        @blur="updateHoursAndMinute"
+      />
+
+      <div
+        class="down iconButton"
+        @click="hourDown"
+      >
+        <a-icon button>
+          $caretDownIcon
+        </a-icon>
+      </div>
+    </div>
+
+    <div class="hourMinutesSeparator">
+      :
+    </div>
+
+    <div :class="['timeInput inputField', {focus: focusMinute}]">
+      <div
+        class="up iconButton"
+        @click="minutesUp"
+      >
+        <a-icon button>
+          $caretUpIcon
+        </a-icon>
+      </div>
+
+      <v-text-field
+        v-model="currentMinutes"
+        dense
+        outlined
+        hide-details
+        @wheel.prevent="onWheelMinute"
+        @focus="focusMinute = true"
+        @blur="updateHoursAndMinute"
+      />
+
+      <div
+        class="down iconButton"
+        @click="minutesDown"
+      >
+        <a-icon button>
+          $caretDownIcon
+        </a-icon>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Component, Watch, Vue } from 'vue-property-decorator'
+import moment from 'moment'
+import formatHour from '@a-vue/utils/format-hour'
+import formatMinutes from '@a-vue/utils/format-minutes'
+
+@Component({
+  props: ['value']
+})
+export default class ATimePicker extends Vue {
+  currentDate = null
+  currentHour = null
+  currentMinutes = null
+
+  focusHour = false
+  focusMinute = false
+
+  created () {
+    this.currentDate = new Date(this.value)
+    this.initHourAndMinutes()
+  }
+
+  @Watch('value')
+  valueChanged () {
+    this.currentDate = new Date(this.value)
+    this.initHourAndMinutes()
+  }
+
+  onWheelHour (wheelEvent) {
+    if (!this.focusHour) {
+      return
+    }
+    if (wheelEvent.deltaY < 0) {
+      this.hourUp()
+    } else {
+      this.hourDown()
+    }
+  }
+
+  onWheelMinute (wheelEvent) {
+    if (!this.focusMinute) {
+      return
+    }
+    if (wheelEvent.deltaY < 0) {
+      this.minutesUp()
+    } else {
+      this.minutesDown()
+    }
+  }
+
+  get formattedHour () {
+    return formatHour(this.currentDate)
+  }
+
+  get formattedMinutes () {
+    return formatMinutes(this.currentDate)
+  }
+
+  get minutesValid () {
+    if (!this.currentMinutes) {
+      return true
+    }
+    if (!/^\d{1,2}$/.test(this.currentMinutes)) {
+      return false
+    }
+    return this.currentMinutes < 60
+  }
+
+  get hourValid () {
+    if (!this.currentHour) {
+      return true
+    }
+    if (!/^\d{1,2}$/.test(this.currentHour)) {
+      return false
+    }
+    return this.currentHour < 24
+  }
+
+  initHourAndMinutes () {
+    this.currentHour = this.formattedHour
+    this.currentMinutes = this.formattedMinutes
+  }
+
+  updateHoursAndMinute () {
+    if (this.hourValid) {
+      this.currentDate = moment(this.currentDate).hours(this.currentHour).toDate()
+    }
+
+    if (this.minutesValid) {
+      this.currentDate = moment(this.currentDate).minutes(this.currentMinutes).toDate()
+    }
+
+    this.focusMinute = false
+    this.focusHour = false
+
+    this.dispatchDate()
+  }
+
+  hourUp () {
+    this.currentDate = moment(this.currentDate).add(1, 'hours').toDate()
+    this.dispatchDate()
+  }
+
+  hourDown () {
+    this.currentDate = moment(this.currentDate).subtract(1, 'hours').toDate()
+    this.dispatchDate()
+  }
+
+  minutesUp () {
+    this.currentDate = moment(this.currentDate).add(15, 'minutes').toDate()
+    this.dispatchDate()
+  }
+
+  minutesDown () {
+    this.currentDate = moment(this.currentDate).subtract(15, 'minutes').toDate()
+    this.dispatchDate()
+  }
+
+  dispatchDate () {
+    this.initHourAndMinutes()
+    this.$emit('input', this.currentDate)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.timePicker {
+  display: flex;
+  align-items: center;
+  text-align: center;
+
+  .timeInput {
+    line-height: 0;
+
+    > * {
+      text-align: center;
+      width: auto;
+      font-family: monospace;
+    }
+  }
+
+  .up {
+    margin-bottom: -1px;
+  }
+
+  .down {
+    margin-top: -3px;
+  }
+
+  .hourMinutesSeparator {
+    padding: 0 .4em;
+  }
+}
+
+.v-input ::v-deep(input) {
+  width: 20px;
+}
+</style>

package/src/components/form/fields/FormFieldDate.vue

@@ -1,22 +1,50 @@
 <template>
-  <a-date-picker
-    ref="datePicker"
-    v-model="model[name]"
-    :label="label || name"
-    :validator="validator"
-    v-bind="$attrs"
-    v-on="$listeners"
-  />
+  <div :class="{time}">
+    <a-date-picker
+      ref="datePicker"
+      v-model="model[name]"
+      :label="label || name"
+      :validator="validator"
+      v-bind="$attrs"
+      v-on="$listeners"
+    />
+
+    <a-time-picker
+      v-if="time"
+      ref="timePicker"
+      v-model="model[name]"
+      class="timePicker"
+      :label="label || name"
+      :validator="validator"
+      v-bind="$attrs"
+      v-on="$listeners"
+    />
+  </div>
 </template>
 
 <script>
 import { Component, Mixins } from '@a-vue'
 import { FormFieldMixin } from '../FormFieldMixin'
 
-@Component
+@Component({
+  props: [{ time: false }]
+})
 export default class FormFieldDate extends Mixins(FormFieldMixin) {
   validate () {
     this.$refs.datePicker.validate()
   }
 }
 </script>
+
+
+<style lang="scss" scoped>
+.time {
+  display: flex;
+  align-items: center;
+  gap: .7rem;
+}
+
+.timePicker {
+  margin-top: -28px;
+}
+</style>

package/src/utils/format-hour.js

@@ -0,0 +1,16 @@
+import moment from 'moment'
+
+export default function (date) {
+  function addZero (i) {
+    if (i < 10) {
+      i = '0' + i
+    }
+    return i
+  }
+
+  if (!moment(date).isValid()) {
+    return 'Invalid Date'
+  }
+
+  return addZero(date.getHours())
+}

package/src/utils/format-minutes.js

@@ -0,0 +1,16 @@
+import moment from 'moment'
+
+export default function (date) {
+  function addZero (i) {
+    if (i < 10) {
+      i = '0' + i
+    }
+    return i
+  }
+
+  if (!moment(date).isValid()) {
+    return 'Invalid Date'
+  }
+
+  return addZero(date.getMinutes())
+}