Feature/data picker #1779

wmontgomery · 2023-11-11T21:58:36Z

…hancements

rathboma · 2023-11-15T22:33:21Z

Hey Will, haven't had time to fully review yet, few questions first:

Does it behave appropriately if the row is at the bottom of the window?
Can you make it so that hitting esc cancels out of it, and moves back to text input?
Can you have it highlight the 'current' datetime when first opening (in a different color maybe), so folks know what is currently selected?

wmontgomery · 2023-11-15T22:40:24Z

Does it behave appropriately if the row is at the bottom of the window?

Can you make it so that hitting esc cancels out of it, and moves back to text input?

Can you have it highlight the 'current' datetime when first opening (in a different color maybe), so folks know what is currently selected?

Haven't checked but will do so. I would assume it just hovers over but will verify
I'll see what I can do. I don't remember exactly what kind of controls there were but should be able to find something
Crap, forgot about that. Yeah can do that. I think it was one of those "I'll get back to this" and just never did

rathboma

Great work! It'll be cool to have this in the app.

Questions:

vue2-datepicker looks abandoned. Are there any pure-js alternatives?
Let's invert how we do the component - so we don't materially change the NullableInputEditor.

rathboma · 2023-11-15T23:08:44Z

shared/src/components/tabulator/NullableInputEditor.vue

@@ -1,6 +1,20 @@
 <template>
  <div>
+    <date-picker


I don't think we want to pollute the NullableInputEditor with the date picker.

Can we do this in a different way:

Add a named slot to the NullableInputEditor for the custom button

Pass in the calendar icon button into the slot

Then when that button is clicked it can show the date modal, this can then live a whole level UP from the nullableinputeditor.

Something like this: DatePickerEditor.vue

<NullableInputEditor ...> <template v-slot:buttons> <DatePicker ... /> </template> </NullableInputEditor

rathboma · 2023-11-15T23:09:21Z

shared/src/components/tabulator/NullableInputEditor.vue

+      return ''
+    },
+    typeEditorIcon() {
+      if (this.typeEditorActive) return 'edit'


Yep, then all this stuff can move out of the NullableInputEditor and into a DatePickerEditor

Yeah that was all part of the plan for a later PR. Was taking this approach as a get this out there and see how people like it first. I'll make the changes

rathboma · 2023-11-15T23:11:11Z

yarn.lock

@@ -15994,6 +15999,13 @@ vue-template-es2015-compiler@^1.6.0, vue-template-es2015-compiler@^1.9.0:
  resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
  integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==

+vue2-datepicker@^3.11.1:


This looks pretty abandoned.... plus it will break with vue3. Are there any javascript-only implementations?

I can look for a pure JS version, was hoping to use a vue specific one but can look into another one. Had a couple people recommend this one to me.

Have you had a look at Vuetify's date pickers?
Might be nice, and you should be able to only use the date pickers, so it wont mess up the bundle size.

rathboma · 2023-11-15T23:11:27Z

apps/studio/src/assets/styles/app/vendor/datepicker/var.scss

+$namespace: 'mx' !default;
+
+$default-color: #73879c !default;
+$primary-color: #1284e7 !default;


Does this all work in light mode, solarized, and solarized dark?

I tried it in light and dark mode and it looked pretty good.

This reverts commit 60a43cc.

This reverts commit 6480daf.

rathboma

Def should not be re-implementing the nullableinputeditor, let's just add a slot for the button!

rathboma · 2023-11-30T02:50:43Z

shared/src/components/tabulator/DateTimePickerEditor.vue

+      confirm-text="click to confirm new selection"
+      @confirm="submit"
+    />
+    <input


So we don't want to re-implement the whole nullable editor inside the DateTimePickerEditor.

Have you used Vue's slots before? We should add a slot to NullableInput, like this:

<div> <input class="nullible-input" :placeholder="smartPlaceholder" ref="input" type="text" v-model="value" @blur.prevent="submit" @change.prevent="submit" @keydown="keydown" > <span class="nullable-input-buttons"> <slot name="buttons" /> <i class="material-icons clear" @mousedown.prevent.stop="clear" title="Nullify Value" >cancel</i> </span> </div>

Then your datetime picker can look like this:

<template> <NullableInputEditor> <template v-slot:buttons> <i class="material-icons" @click.prevent="pickDate">calendar</i> </template> </NullableInputEditor> </template>

Slot has been added to handle this. Should be decently extendable.

… into feature/data-picker

TODO: null button not working, get the value from the original editor

rathboma · 2024-01-19T17:30:07Z

@wmontgomery You'll need to merge master into this

rathboma

Looks good overall!

Had a couple of minor issues, please look at before merging!

rathboma · 2024-01-19T17:32:44Z

shared/src/components/tabulator/DateTimePickerEditor.vue

+
+        if (this.isTimeType(dataType) && dataValue !== null) {
+          dataValue = dataValue.search(/(\+|-)/i) > -1 && !isNaN(dataValue.slice(-1)) ? `${dataValue}:00`: dataValue  
+          this.datePickerValue = new Date(`2023-03-31T${dataValue}`)


Where did this date come from? Should this be today's date?

If not, or it doesn't matter, please add a comment or something

It shouldn't matter what the date is since we are really just creating a date object to grab the time, it was a Parks and Recreations reference. There are no meetings on Mar 31st because it's not a real day.

rathboma · 2024-01-19T17:33:53Z

shared/src/components/tabulator/NullableInputEditor.vue

      this.$emit('value', null)
    }
  },
  watch: {
    rendered() {
      if (this.rendered) {
-        this.value = helpers.niceString(this.cell.getValue())
+        this.value = this.cell.getValue() == null ? null : helpers.niceString(this.cell.getValue())


Maybe use _.isNil(this.cell.getValue())

rathboma · 2024-01-19T17:35:17Z

shared/src/lib/tabulator.ts

@@ -50,6 +50,9 @@ export default {
    const result = `<pre>${cellValue}</pre>`
    return result;
  },
+  isDateTime(dataType: string|null) {


I think this is fine for now, but I think we probably need to add bksType to our ColumnDefinition interface at some point to identify stuff like this at the driver level, rather than in the GUI

wmontgomery added 8 commits October 22, 2023 14:53

feat: get datepicker showing but styles all wonked out

9493e1c

feat: some css and add a confirmation button to save the date

f34f63c

docs: add a little more to the daterange todo

597871c

feat: some formatting and some additional bits to get the date

b1d2784

feat: remove some consoles, create icons for "special type", other en…

0bbce91

…hancements

feat: fixes for hiding calendar on tab, some extra optimizations

ce851f4

refactor: remove a commented out line and an unnecessary line

713e623

build: package and package lock conflict

571e1b7

wmontgomery linked an issue Nov 15, 2023 that may be closed by this pull request

Date/datetime/time picker in TableTable for datetime, date, and time columns #1505

Closed

rathboma requested changes Nov 15, 2023

View reviewed changes

wmontgomery added 8 commits November 15, 2023 22:50

feat: show the default selected date and some css changes

ec36665

fix: some css fixes to not look so whack

0ebee33

feat: datepicker to the modal

6480daf

style: remove an unneeded prop and update some text

60a43cc

Revert "style: remove an unneeded prop and update some text"

8519ee3

This reverts commit 60a43cc.

Revert "feat: datepicker to the modal"

1fd780d

This reverts commit 6480daf.

feat: take it back to the drop down itself with own editor

38b5764

chore: merge conflicts

07181d4

rathboma requested changes Nov 30, 2023

View reviewed changes

wmontgomery added 5 commits December 10, 2023 21:22

Merge branch 'master' of github.com:beekeeper-studio/beekeeper-studio…

501423c

… into feature/data-picker

feat: make datetimepickereditor an extension of nullableinputeditor

bf22d1b

TODO: null button not working, get the value from the original editor

fix: fix some styles, update the value

6b9d02c

chore: merge master and bugfix/the-nullening

597f57b

feat: get slot working nicely

e2cc0ac

wmontgomery requested a review from rathboma December 21, 2023 02:17

rathboma approved these changes Jan 19, 2024

View reviewed changes

rathboma mentioned this pull request Jan 19, 2024

FEAT: Add a normalized data type AND an auto increment identifier to our column definition interface (& Implement in the drivers) #1910

Open

wmontgomery added 2 commits January 30, 2024 22:16

chore: merge conflict

b305a70

refactor: some minor refactors from PR notes

8fe1bfb

rathboma merged commit 6a1167f into master Feb 8, 2024
4 checks passed

rathboma deleted the feature/data-picker branch February 8, 2024 20:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/data picker #1779

Feature/data picker #1779

wmontgomery commented Nov 11, 2023 •

edited

rathboma commented Nov 15, 2023

wmontgomery commented Nov 15, 2023

rathboma left a comment

rathboma Nov 15, 2023

rathboma Nov 15, 2023

wmontgomery Nov 17, 2023

rathboma Nov 15, 2023

wmontgomery Nov 17, 2023

Z3rio Nov 20, 2023

rathboma Nov 15, 2023

wmontgomery Nov 17, 2023

rathboma left a comment

rathboma Nov 30, 2023

wmontgomery Dec 19, 2023

rathboma commented Jan 19, 2024

rathboma left a comment

rathboma Jan 19, 2024

rathboma Jan 19, 2024

wmontgomery Jan 31, 2024

rathboma Jan 19, 2024

rathboma Jan 19, 2024

Feature/data picker #1779

Feature/data picker #1779

Conversation

wmontgomery commented Nov 11, 2023 • edited

rathboma commented Nov 15, 2023

wmontgomery commented Nov 15, 2023

rathboma left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rathboma left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rathboma commented Jan 19, 2024

rathboma left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wmontgomery commented Nov 11, 2023 •

edited