feat(event): implement preview with drafts #1739

huzaifaedhi22 · 2025-02-02T18:40:12Z

📚 Description

This PR

adds preview event functionality
fixes event photos upload and fetch
adds save as draft feature (in browser) for events

TODO

update website validator
use gql query for category and format

📝 Checklist

The PR's title follows the Conventional Commit format

dargmuesli

Some comments apply to all similar occurrences in other files as well of course

package.json

src/app/components/event/EventTimePicker.vue

src/app/pages/event/create.vue

src/app/pages/event/edit/[username]/[event_name].vue

src/app/utils/validation.ts

src/gql/generated/graphcache.ts

src/package.json

… (DRAFT)

src/package.json

dargmuesli · 2025-04-17T03:19:59Z

src/gql/documents/fragments/addressItem.ts

@@ -1,4 +1,4 @@
-import { type FragmentType, graphql, useFragment } from '~~/gql/generated'
+import { type FragmentType, graphql, useFragment } from '~~/gql/generated/gql'


Why the additions of /gql in this PR?

dargmuesli · 2025-04-17T03:20:35Z

src/gql/documents/queries/event/eventCategories.ts

+// export const useEventCategoriesQuery = () =>
+//   useQuery<EventCategoriesQuery>({
+//     query: eventCategoriesQuery,
+//   })


If this isn't used, it may not need to be part of this PR.

dargmuesli · 2025-04-17T03:21:32Z

src/app/assets/icons/social-facebook.svg

Colored icons should go the the colored subdirectory.

dargmuesli · 2025-04-17T03:22:23Z

src/app/assets/icons/social-copy.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.5 0H2.5C1.4 0 0.5 0.9 0.5 2V16H2.5V2H14.5V0ZM17.5 4H6.5C5.4 4 4.5 4.9 4.5 6V20C4.5 21.1 5.4 22 6.5 22H17.5C18.6 22 19.5 21.1 19.5 20V6C19.5 4.9 18.6 4 17.5 4ZM17.5 20H6.5V6H17.5V20Z" fill="#868679"/>


Suggested change

<path d="M14.5 0H2.5C1.4 0 0.5 0.9 0.5 2V16H2.5V2H14.5V0ZM17.5 4H6.5C5.4 4 4.5 4.9 4.5 6V20C4.5 21.1 5.4 22 6.5 22H17.5C18.6 22 19.5 21.1 19.5 20V6C19.5 4.9 18.6 4 17.5 4ZM17.5 20H6.5V6H17.5V20Z" fill="#868679"/>

<path d="M14.5 0H2.5C1.4 0 0.5 0.9 0.5 2V16H2.5V2H14.5V0ZM17.5 4H6.5C5.4 4 4.5 4.9 4.5 6V20C4.5 21.1 5.4 22 6.5 22H17.5C18.6 22 19.5 21.1 19.5 20V6C19.5 4.9 18.6 4 17.5 4ZM17.5 20H6.5V6H17.5V20Z" fill="currentColor"/>

dargmuesli · 2025-04-17T03:22:52Z

package.json

    "test:e2e:docker:server:static": "pnpm --dir tests run test:e2e:docker:server:static",
    "test:e2e:docker:server:static:update": "pnpm --dir tests run test:e2e:docker:server:static:update"
-  },
-  "type": "module"


Why is this removed?

dargmuesli · 2025-04-17T03:23:27Z

CHANGELOG.md

@@ -85,7957 +85,7207 @@

 ### Features

-* **content:** add privacy consent ([#1874](https://github.com/maevsi/vibetype/issues/1874)) ([c50d90a](https://github.com/maevsi/vibetype/commit/c50d90a8477eaa1137df7c2e2fd592d2b3e2f2cf))
+- **content:** add privacy consent ([#1874](https://github.com/maevsi/vibetype/issues/1874)) ([c50d90a](https://github.com/maevsi/vibetype/commit/c50d90a8477eaa1137df7c2e2fd592d2b3e2f2cf))


Why is this file edited in this PR?

dargmuesli · 2025-04-17T03:32:28Z

src/app/components/event/EventTimePicker.vue

+  placeholder?: string
+  timePlaceholder?: string


Is timePlaceholder ever set where EventTimePicker is used?

dargmuesli · 2025-04-17T03:32:50Z

src/app/components/event/EventTimePicker.vue

+import { Calendar } from '~/components/scn/calendar'
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from '~/components/scn/popover'


Suggested change

import { Calendar } from '~/components/scn/calendar'

import {

Popover,

PopoverTrigger,

PopoverContent,

} from '~/components/scn/popover'

Autoimported

dargmuesli · 2025-04-17T03:35:59Z

src/app/components/event/EventTimePicker.vue

+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', date: CalendarDate): void


Can we use defineModel<CalendarDate>() for modelValue?

dargmuesli · 2025-04-17T03:41:16Z

src/app/components/event/EventTimePicker.vue

+        <input
+          v-model="selectedTime"
+          type="time"
+          class="w-full border-0 px-0 py-2 text-xl text-gray-600 placeholder:text-gray-400 focus:border-transparent focus:ring-0 focus:outline-none dark:bg-[--semantic-base-background] dark:text-[--semantic-base-text-primary] dark:placeholder:text-[--semantic-base-text-secondary]"


The [] syntax looks like it should be using () instead, right?

dargmuesli · 2025-04-17T03:45:02Z

src/app/components/event/steps/PrimarySettings.vue

+import { ref } from 'vue'
+import { ChevronDown } from 'lucide-vue-next'
+import slugify from 'slugify'
+import type { EventItemFragment } from '~~/gql/generated/graphql'
+import { useEventForm } from '~/composables/useEventForm'


Suggested change

import { ref } from 'vue'

import { ChevronDown } from 'lucide-vue-next'

import slugify from 'slugify'

import type { EventItemFragment } from '~~/gql/generated/graphql'

import { useEventForm } from '~/composables/useEventForm'

import { ChevronDown } from 'lucide-vue-next'

import slugify from 'slugify'

import type { EventItemFragment } from '~~/gql/generated/graphql'

dargmuesli · 2025-04-17T03:46:29Z

src/app/components/event/steps/DateLocation.vue

+import { ref } from 'vue'
+import { Calendar } from '~/components/scn/calendar'
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from '~/components/scn/popover'
+import { CalendarIcon, ChevronDown } from 'lucide-vue-next'
+import type { CalendarDate } from '@internationalized/date'
+import { DateFormatter } from '@internationalized/date'
+import { toDate } from 'reka-ui/date'
+import type { BaseValidation } from '@vuelidate/core'
+
+import { useEventForm } from '~/composables/useEventForm'


Suggested change

import { ref } from 'vue'

import { Calendar } from '~/components/scn/calendar'

import {

Popover,

PopoverTrigger,

PopoverContent,

} from '~/components/scn/popover'

import { CalendarIcon, ChevronDown } from 'lucide-vue-next'

import type { CalendarDate } from '@internationalized/date'

import { DateFormatter } from '@internationalized/date'

import { toDate } from 'reka-ui/date'

import type { BaseValidation } from '@vuelidate/core'

import { useEventForm } from '~/composables/useEventForm'

import type { CalendarDate } from '@internationalized/date'

import { DateFormatter } from '@internationalized/date'

import type { BaseValidation } from '@vuelidate/core'

import { CalendarIcon, ChevronDown } from 'lucide-vue-next'

import { toDate } from 'reka-ui/date'

dargmuesli · 2025-04-17T03:46:47Z

src/app/components/event/steps/Cover.vue

+import { ref } from 'vue'
+import type { BaseValidation } from '@vuelidate/core'
+const { t } = useI18n()


Suggested change

import { ref } from 'vue'

import type { BaseValidation } from '@vuelidate/core'

const { t } = useI18n()

import type { BaseValidation } from '@vuelidate/core'

const { t } = useI18n()

dargmuesli · 2025-04-17T03:51:14Z

src/app/pages/event/preview/index.vue

+import { ref } from 'vue'
+import { Share, Heart, MoreHorizontal, Grid, Image } from 'lucide-vue-next'
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from '@/components/scn/carousel'
+import type { EventStorageStrategy } from '~/types/events/EventStorageStrategy'
+import { LocalStorageStrategy } from '~/utils/storage/LocalStorageStrategy'
+import { useCreateEventMutation } from '~~/gql/documents/mutations/event/eventCreate'
+import { useUploadCreateMutation } from '~~/gql/documents/mutations/upload/uploadCreate'
+import { EventVisibility } from '~~/gql/generated/graphql'
+import Tus from '@uppy/tus'
+import Uppy from '@uppy/core'


Suggested change

import { ref } from 'vue'

import { Share, Heart, MoreHorizontal, Grid, Image } from 'lucide-vue-next'

import {

Carousel,

CarouselContent,

CarouselItem,

} from '@/components/scn/carousel'

import type { EventStorageStrategy } from '~/types/events/EventStorageStrategy'

import { LocalStorageStrategy } from '~/utils/storage/LocalStorageStrategy'

import { useCreateEventMutation } from '~~/gql/documents/mutations/event/eventCreate'

import { useUploadCreateMutation } from '~~/gql/documents/mutations/upload/uploadCreate'

import { EventVisibility } from '~~/gql/generated/graphql'

import Tus from '@uppy/tus'

import Uppy from '@uppy/core'

import Tus from '@uppy/tus'

import Uppy from '@uppy/core'

import { Share, Heart, MoreHorizontal, Grid, Image } from 'lucide-vue-next'

import type { EventStorageStrategy } from '~/types/events/EventStorageStrategy'

import { useCreateEventMutation } from '~~/gql/documents/mutations/event/eventCreate'

import { useUploadCreateMutation } from '~~/gql/documents/mutations/upload/uploadCreate'

import { EventVisibility } from '~~/gql/generated/graphql'

The storage directory can be exported in src/app/utils/index.ts for the auto-import to become available for LocalStorageStrategy.

dargmuesli · 2025-04-17T03:52:04Z

src/app/composables/useHeaderTitle.ts

+import { ref, readonly } from 'vue'
+


Suggested change

import { ref, readonly } from 'vue'

dargmuesli

Please replace other usages of space-y-4, space-x-3, ... with flex flex-col gap-4, flex gap-3, ...

dargmuesli · 2025-04-17T04:01:56Z

src/app/components/event/steps/Cover.vue

This file should be named EventStepsCover.vue to follow the naming convention of all existing components. (This applies to other components added in this PR too.)

dargmuesli · 2025-04-17T04:02:26Z

src/app/components/event/steps/Cover.vue

+        <EventFilePreviewGrid
+          :files="selectedFiles"
+          :preview-urls="previewUrls"
+          v-model="selectedCover"


v-model="selectedCover" shows a warning because this property should come first after <EventFilePreviewGrid

CLAassistant · 2025-06-28T07:51:20Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

huzaifaedhi22 requested a review from dargmuesli February 2, 2025 19:16

dargmuesli force-pushed the master branch 2 times, most recently from db8592b to 95ec293 Compare February 20, 2025 05:59

dargmuesli requested changes Mar 4, 2025

View reviewed changes

dargmuesli changed the title ~~feat(event-preview): implement event preview with drafts~~ feat(event): implement preview with drafts Mar 4, 2025

dargmuesli changed the base branch from master to main March 7, 2025 10:28

huzaifaedhi22 added 24 commits March 20, 2025 01:41

chore(primevue):add primevue to project (draft)

f48e617

Revert "chore(primevue):add primevue to project (draft)"

28dd7a0

feat(shadcn): add stepper and dropdown from shadcn

c26354e

feat: create components for invitation steps

5f3d695

feat: add eventform composable

e872b07

feat: add stepper to create event page

4e9fdbe

feat(primary settings): implement primary settings stepper component

d640db4

fix(event invite) : fix stepper next button usage

314bb74

feat(validation) : handle validation of all steps using single source…

13ba0e4

… (DRAFT)

chore(shadcn): add missing dropdown component

413bde7

feat(shadcn-calendar): modify and add shadcn calendar

f96ffd5

feat(shadcn): add shadcn popover

3a206ab

feat(step2): implement invitation flow step 2 component

5342d89

chore(shadcn):add shadcn button

8250d91

feat(component): create event time picker component for step 2 flow

af6a3f9

feat(step2): refactor parent components to include step 2 flow

4a44961

chore(comments):remove comments

1729506

feat(stepper): add event details component

59ae889

feat(event details): add event details validation

c620da6

feat(event details): modify parent component

a294a7c

chore(shadcn) - rename shadcn button export

3a1a626

feat(tailwind): add colors

97bc136

feat(shadcn) : add radio group component

ef58067

feat(stepper): add visibility and cover component

4b46569

Merge branch 'main' into feat/invitation/eventpreview

a353225

dargmuesli reviewed Apr 17, 2025

View reviewed changes

This was referenced Apr 22, 2025

chore(shadcn): add common components #1890

Closed

chore(shadcn): add common components #1891

Closed

chore(components): add shadcn for event form #1892

Merged

huzaifaedhi22 and others added 20 commits April 22, 2025 20:07

fix(icons): use optimized icons

ed5320c

refactor(timepicker): use defineModel

c1829da

fix: tailwind syntax

4b8e4b8

refactor(storage): auto import local storage

0b4d622

refactor(imports): remove

c944a70

refactor: use flex instead of space

220c2b5

refactor: rename stepper components

8edeee8

Merge branch 'main' into feat/invitation/eventpreview

c91056f

Merge branch main into feat/invitation/eventpreview

d9d85e4

refactor: use AppStep for event creation flow

3e5a1bd

fix: calendar bg

d0a3370

chore: add color to vibetype.css

b281aee

refactor: updated useEventForm with AppStep

4ebbbc4

chore: use latest validation file

2e3cceb

chore:remove seperate preview route

4e3fca3

fix: use single instance of form

4346d94

feat:use update photo upload

1743a53

refactor: use proper styles

b27f9ee

chore: add TH2 style

9b3c478

chore: add review comment

5ce8e12

dargmuesli linked an issue Jul 30, 2025 that may be closed by this pull request

feat(event): add type #795

Open

		@@ -1,4 +1,4 @@
		import { type FragmentType, graphql, useFragment } from '~~/gql/generated'
		import { type FragmentType, graphql, useFragment } from '~~/gql/generated/gql'

		@@ -0,0 +1,3 @@
		<svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M14.5 0H2.5C1.4 0 0.5 0.9 0.5 2V16H2.5V2H14.5V0ZM17.5 4H6.5C5.4 4 4.5 4.9 4.5 6V20C4.5 21.1 5.4 22 6.5 22H17.5C18.6 22 19.5 21.1 19.5 20V6C19.5 4.9 18.6 4 17.5 4ZM17.5 20H6.5V6H17.5V20Z" fill="#868679"/>

Uh oh!

feat(event): implement preview with drafts #1739

Are you sure you want to change the base?

feat(event): implement preview with drafts #1739

Uh oh!

Conversation

huzaifaedhi22 commented Feb 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📚 Description

📝 Checklist

Uh oh!

dargmuesli left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dargmuesli left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

CLAassistant commented Jun 28, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

huzaifaedhi22 commented Feb 2, 2025 •

edited

Loading