feat: datepicker script setup #1972

There is no content yet.

Please fix the lint errors.

I am actually not sure how to solve this correctly:

<script setup lang="ts>
// t will not be available when props are checked because defineProps is extracted from setup
const {t} = useI18n()


const props = defineProps({

	},
	chooseDateLabel: {
		type: String,
		default: () => t('input.datepicker.chooseDate'),
	},
})

What I can do is to import the global i18n instance. Not sure that would be the way one is used to do this 🤔

Generally i18n annoys me. With the V9 version the way you are supposed to work is that you have local messages in every component…

What about making chooseDateLabel a computed and defining the default value in there?

That's possible.

I just think it's a bit annoying because using props and falling back to default values is kind of "the vue way to do things" :D

Personally I think importing the i18n instance is the best way for now, but maybe I'll create an issue in the vue-i18n-next repo.

Are you fine with using the instance here?

Are you fine with using the instance here?

I think that's okay, yes. Please follow up with an issue in the i18n repo though.

Question in vue-i18n-next discussion (author answers frequently):
https://github.com/intlify/vue-i18n-next/discussions/1012

Changed to use the global i18n instance.

Hi dpschen!

Thank you for creating a PR!

I've deployed the changes of this PR on a preview environment under this URL: https://1972-feat-datepicker-script-setup--vikunja-frontend-preview.netlify.app

You can use this url to view the changes live and test them out.
You will need to manually connect this to an api running somehwere. The easiest to use is https://try.vikunja.io/.

Have a nice day!

Beep boop, I'm a bot.

Looks like the label now does not work at all:

image.png

3.1 KiB

The problem was not vue-i18n but that the label didn't get displayed because we compared it with null. But I changed to type of the ref to Date | undefined…

Looks like the label now does not work at all:

@konrad This was fixed. Anything else missing here?

It looks like when I click on "confirm" it will close the popup but not set a date.

Will check again. Thanks for testing

This should work now. I updated the code a bit so that now is live. Meaning that if you open the popup on 23:59 and the time changes to the next day the values stay up-to-date.

I kill the CI though because of recent problems. Please retrigger, when if runs again :)

When adding a new reminder I get a vuex mutation error:

image.png

44 KiB

When adding a new reminder I get a vuex mutation error:

This should probably also happen with the current version.
This PR is again mostly about converting to script setup.
I didn't want to change the logic too much – I would change a lot :)

This should probably also happen with the current version.

As far as I tested it, it does not happen on the main branch 🤔

This should probably also happen with the current version.

As far as I tested it, it does not happen on the main branch 🤔

I just tested this again. I can't reproduce the error that you have.
When does this happen to you?

Looks like the vuex error is gone.

But the styling is broken now:

Current main branch:

image.png

11 KiB

image.png

8.1 KiB

Should be fixed. I think that would also have been resolved by rebasing :D

Now the button to add another reminder disappeared:

image.png

5.9 KiB

Now the button to add another reminder disappeared:

The style entanglement is so crazy :/

 })
 function setDateValue(newVal: null | string | Date) {
 	console.log(newVal)

 function close() {
 	// Kind of dirty, but the timeout allows us to enter a time and click on "confirm" without
 	// having to click on another input field before it is actually used.

feat: datepicker script setup #1972

Reviewers