Clock UI #282
Clock UI #282
Conversation
chrimyn234
commented
Jun 6, 2024
chrimyn234
commented
- Implement a Google calendar inspired dropdown style time picker.
- Add new timepickerType field to meal time prompt to select between 'clock' and 'simple' .
| z.literal(20), | ||
| z.literal(30), | ||
| ]), | ||
| timepickerType: z.enum(['clock', 'simple']), |
There was a problem hiding this comment.
timePickerTypeis bit repetitive, could we call it e.g.style?- could make the
simplemore descriptive, something likedropdownto hit what the style is? ... if we have few more styles in future, simple might quickly collide.
| const timePickerPrompt = baseCustomPrompt.merge(promptValidationProps).merge(timePicker).extend({ | ||
| component: z.literal('time-picker-prompt'), | ||
| }); | ||
| const timePickerPrompt = baseCustomPrompt |
There was a problem hiding this comment.
survey frontend timepicker implementation is missing, only meal-time-prompt is in PR, can you please add?
| @@ -0,0 +1,116 @@ | |||
| <template> | |||
| <div> | |||
There was a problem hiding this comment.
is the <div> wrapper necessary?
| @@ -0,0 +1,116 @@ | |||
| <template> | |||
| <div> | |||
| <v-combobox | |||
There was a problem hiding this comment.
I think combox also allows to enter values manually / typed-in, if it's intention, you willl need to validate output so the typed-in time format is correct. If only select is intended, simple <v-select> can be used
| type: Number, | ||
| required: true, | ||
| }, | ||
| is12HourFormat: { |
There was a problem hiding this comment.
use same format as already defined in prompt props -> ampm | 24hr, so can be used.
| <v-card-text class="pt-2 meal-time-prompt"> | ||
| <v-form @submit.prevent="action('next')"> | ||
| <time-picker |
There was a problem hiding this comment.
please use dynamic component instead of switch
components can be registered as
components: {clock: 'v-time-picker', simple: 'time-picker'}
and then used as
<component :is="prompt.style" v-model="state" :allowed-minutes="allowedMinutes" :format="prompt.format">
| @@ -93,6 +93,7 @@ export const timePickerPrompt: Prompts['time-picker-prompt'] = copy({ | |||
| type: 'custom', | |||
| id: 'time-picker-prompt', | |||
| name: 'Time picker prompt', | |||
| timepickerType: 'clock', | |||
There was a problem hiding this comment.
can you please add survey frontend impl for the custom time picker?
pnpm-lock.yaml
Outdated
There was a problem hiding this comment.
I think changes to the lock can be dropped altogether as dependencies are not touched, probably just a rebase artifact
lukashroch
force-pushed
the
main
branch
3 times, most recently
from
a76af83 to
bba98c5
Compare
