Craftable Pro - is it possible for CRUD to create a time field instead of datetime?

[rapgithub]

I want to know if Craftable can handle time fields and generate the CRUD for it too. I have a table where the orders has a fixed time to be collected everyday and the store needs to input the starting time without date for every day in the week! In this scheme below it is the start up time for Sunday day!

TABLE SCHEME

‘‘‘ $table->time('sun_start_time_01')->nullable(); $table->time('sun_end_time_01')->nullable();

‘‘‘

I run the CRUD generator but the time field was read as a string column! is there a way to use timestamp scheme and use only the time to be saved to the db? or any solutions for time fields?

thanks!

Also I will like to know if I run the CRUD generator command again after I created all files, the CRUD generator auto replace the old files or I need to use some other command for it?

thanks again!

[strstensky]

Hello,

We currently do not support time fields, but we will consider adding this feature. For now, you need to manually change the generated field.

Regarding auto-replace, yes, the generator will automatically replace the files when called again.

Samuel.

[rapgithub]

I see craftable use vcalendar that support time fields but sadly object rules does not work and saving to db send date format not time format...

do craftable pro use vcalendar?

https://vcalendar.io/datepicker/time-rules.html#object-rules

or v-calendar? can you tell? thanks... si I know which one I can use to modify and add the missing Timepicker.vue to the Craftable Pro components

https://v2.vcalendar.io

can you tell? thanks

Also I see in the modules inside folder v-calendar there is a TimePicker never used by Craftable only the DatePicker.vue the file is TimePicker.vue.

I am afraid to modify this by myself and then in updates will be overwrite all the time! it will be nice to be added as a component in cartable because it is very useful!

TimePicker.vue content inside v-calendar module folder:

<template>
  <div
    class="vc-time-picker"
    :class="[{ 'vc-invalid': !isValid, 'vc-attached': !isTimeMode }]"
  >
    <CalendarSlot name="time-header">
      <div v-if="showHeader && date" class="vc-time-header">
        <span class="vc-time-weekday">
          {{ locale.formatDate(date, 'WWW') }}
        </span>
        <span class="vc-time-month">
          {{ locale.formatDate(date, 'MMM') }}
        </span>
        <span class="vc-time-day">
          {{ locale.formatDate(date, 'D') }}
        </span>
        <span class="vc-time-year">
          {{ locale.formatDate(date, 'YYYY') }}
        </span>
      </div>
    </CalendarSlot>
    <div class="vc-time-select-group">
      <BaseIcon name="Clock" size="17" />
      <BaseSelect
        v-model.number="hours"
        :options="hourOptions"
        class="vc-time-select-hours"
        align-right
      />
      <template v-if="timeAccuracy > 1">
        <span class="vc-time-colon">:</span>
        <BaseSelect
          v-model.number="minutes"
          :options="options.minutes"
          class="vc-time-select-minutes"
          :align-left="timeAccuracy === 2"
        />
      </template>
      <template v-if="timeAccuracy > 2">
        <span class="vc-time-colon">:</span>
        <BaseSelect
          v-model.number="seconds"
          :options="options.seconds"
          class="vc-time-select-seconds"
          :align-left="timeAccuracy === 3"
        />
      </template>
      <template v-if="timeAccuracy > 3">
        <span class="vc-time-decimal">.</span>
        <BaseSelect
          v-model.number="milliseconds"
          :options="options.milliseconds"
          class="vc-time-select-milliseconds"
          align-left
        />
      </template>
      <BaseSelect v-if="!is24hr" v-model="isAM" :options="isAMOptions" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { createTimePicker } from '../../use/timePicker';
import BaseIcon from '../BaseIcon/BaseIcon.vue';
import BaseSelect from '../BaseSelect/BaseSelect.vue';
import CalendarSlot from '../Calendar/CalendarSlot.vue';

const props = defineProps<{
  position: number;
}>();

const timePicker = createTimePicker(props);
defineExpose(timePicker);
const {
  locale,
  isValid,
  date,
  hours,
  minutes,
  seconds,
  milliseconds,
  options,
  hourOptions,
  isTimeMode,
  isAM,
  isAMOptions,
  is24hr,
  showHeader,
  timeAccuracy,
} = timePicker;
</script>

<style lang="css">
.vc-time-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  &.vc-invalid {
    pointer-events: none;
    opacity: 0.5;
  }
  &.vc-attached {
    border-top: 1px solid var(--vc-time-picker-border);
  }
  > * + * {
    margin-top: 4px;
  }
}

.vc-time-header {
  display: flex;
  align-items: center;
  font-size: var(--vc-text-sm);
  font-weight: var(--vc-font-semibold);
  text-transform: uppercase;
  margin-top: -4px;
  padding-left: 4px;
  padding-right: 4px;
  line-height: 21px;
}

.vc-time-select-group {
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  background: var(--vc-time-select-group-bg);
  border-radius: var(--vc-rounded-md);
  border: 1px solid var(--vc-time-select-group-border);
  .vc-base-icon {
    margin-right: 4px;
    color: var(--vc-time-select-group-icon-color);
  }
  select {
    background: transparent;
    padding: 0px 4px;
  }
}

.vc-time-weekday {
  color: var(--vc-time-weekday-color);
  letter-spacing: var(--tracking-wide);
}

.vc-time-month {
  color: var(--vc-time-month-color);
  margin-left: 8px;
}

.vc-time-day {
  color: var(--vc-time-day-color);
  margin-left: 4px;
}

.vc-time-year {
  color: var(--vc-time-year-color);
  margin-left: 8px;
}

.vc-time-colon {
  margin: 0 1px 2px 2px;
}

.vc-time-decimal {
  margin: 0 0 0 1px;
}
</style>

[rapgithub]

Sadly I try to use the v-calendar as I see it is in the package.json installed but it seems all configs are not working at all!

https://v2.vcalendar.io/datepicker.html

                            mode="time" // this works
                            valid-hours="{ min: 6, max: 24 }" // does not work
                            minute-increment="5" // does not work
                            :model-config="modelConfig" // does not work
                            hide-time-header //this works

my code:

                        <DatePicker
                            v-model="form.sun_pickup_start_time_01"
                            name="sun_pickup_start_time_01"
                            mode="time"
                            valid-hours="{ min: 6, max: 24 }"
                            minute-increment="5" 
                            :model-config="modelConfig"
                            hide-time-header
                            :label="$t('craftable-pro', 'Sun Pickup Start Time 01')"
                            locale="en"
                            is24hr
                            color="black"
                            :popover="{ visibility: 'focus' }"
                        >

Any clues why all config are not working? if I use the module outside Craftable it works all configs but not inside Craftable...

anything missing?

[rapgithub]

also I tried to update to the latest version available but it seems not be working because of vue

https://github.com/nathanreyes/v-calendar

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: undefined@undefined
npm ERR! Found: vue@3.3.10
npm ERR! node_modules/vue
npm ERR!   dev vue@"^3.2.31" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^2.5.18" from v-calendar@2.4.2
npm ERR! node_modules/v-calendar
npm ERR!   dev v-calendar@"2.4.2" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 

so I tried this and seems to be installed without issues

npm install v-calendar@next @popperjs/core

but the time picker shows but does not work with any configs applied! any clues? I need to config the timepicker to have specific hour and minutes limits...

thanks

[strstensky]

Hello,

We have implemented a time field into the generator. All you need to do is define columns as time in your migration.

Regarding your problem with DatePicker props, we are using our own DatePicker component, which utilizes the V-calendar DatePicker under the hood. However, our DatePicker does not work with the same props as the V-calendar DatePicker. You can freely use the V-calendar DatePicker directly; just make sure you are importing the correct component. Your import should look like this:

import { DatePicker } from "v-calendar";

instead of this:

import { DatePicker } from "craftable-pro/Components";

Samuel.