From dbde30b9c7c78a233682b0ba4beb3992622fb82e Mon Sep 17 00:00:00 2001 From: Jan Gregor Emge-Triebel Date: Tue, 13 Aug 2024 14:40:06 +0200 Subject: [PATCH 01/14] Added markup and refined typing --- nuxt-app/composables/useDirectus.ts | 39 +++++++++++--- nuxt-app/nuxt.config.ts | 1 + nuxt-app/package-lock.json | 12 +++++ nuxt-app/package.json | 1 + nuxt-app/pages/profiles/[slug].vue | 81 +++++++++++++++++++---------- nuxt-app/types/items.ts | 21 +++++++- 6 files changed, 120 insertions(+), 35 deletions(-) diff --git a/nuxt-app/composables/useDirectus.ts b/nuxt-app/composables/useDirectus.ts index 4736073..7b8ee2a 100644 --- a/nuxt-app/composables/useDirectus.ts +++ b/nuxt-app/composables/useDirectus.ts @@ -9,6 +9,7 @@ import { type QueryFilter, } from '@directus/sdk' import type { + DirectusEmojiItem, DirectusMemberItem, DirectusPickOfTheDayItem, DirectusProfileItem, @@ -562,24 +563,50 @@ export function useDirectus() { ) } - async function getProfileById(id: string) { - return (await directus + async function getProfileBySlug(slug: string) { + const profile = (await directus .request( readItems('profiles', { fields: [ 'id', + 'date_created', 'first_name', 'last_name', 'display_name', 'description', 'job_role', 'job_employer', - 'profile_image.*' + 'profile_image.*', + 'slug', + 'interested_tags.tags_id.id', + 'interested_tags.tags_id.name', + 'emojis.emojis_id.id', + 'emojis.emojis_id.title', + 'emojis.emojis_id.display_emoji', + //'interested_tags.tag.id', + //'interested_tags.tag.name', ], limit: 1, - filter: { id: { _eq: id } }, + filter: { slug: { _eq: slug } }, }) - ))?.pop() as unknown as DirectusProfileItem + ).then((results: any) => { + const items = results as DirectusProfileItem[]; + return items.map((profile) => ({ + ...profile, + interested_tags_prepared: profile.interested_tags?.map((tag: any) => tag.tags_id).filter((tag) => tag) as TagItem[], + })) + }).then((results: any) => { + const items = results as DirectusProfileItem[]; + return items.map((profile) => ({ + ...profile, + emojis_prepared: profile.emojis?.map((emoji: any) => emoji.emojis_id).filter((emoji) => emoji) as DirectusEmojiItem[], + })) + }) + )?.pop() as unknown as DirectusProfileItem + + profile.date_created_prepared = new Date(profile.date_created); + + return profile; } async function getSingleSignOnProviders() { @@ -657,6 +684,6 @@ export function useDirectus() { getSingleSignOnProviders, getCurrentUser, registerNewUser, - getProfileById, + getProfileBySlug, } } diff --git a/nuxt-app/nuxt.config.ts b/nuxt-app/nuxt.config.ts index 23a2082..0aaddc5 100644 --- a/nuxt-app/nuxt.config.ts +++ b/nuxt-app/nuxt.config.ts @@ -53,6 +53,7 @@ export default defineNuxtConfig({ // '@nuxtjs/sitemap', 'nuxt-jsonld', '@pinia/nuxt', + 'nuxt-time', ], // Router configuration: https://nuxtjs.org/docs/configuration-glossary/configuration-router diff --git a/nuxt-app/package-lock.json b/nuxt-app/package-lock.json index 775a626..a89cfa9 100644 --- a/nuxt-app/package-lock.json +++ b/nuxt-app/package-lock.json @@ -36,6 +36,7 @@ "eslint-plugin-nuxt": "^4.0.0", "eslint-plugin-vue": "^9.21.1", "nuxt": "^3.10.2", + "nuxt-time": "^0.1.3", "postcss": "^8.4.35", "prettier": "^3.2.5", "prettier-plugin-tailwindcss": "^0.5.11" @@ -9045,6 +9046,17 @@ "schema-dts": "^1.1.2" } }, + "node_modules/nuxt-time": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/nuxt-time/-/nuxt-time-0.1.3.tgz", + "integrity": "sha512-Ie9KA4DfaebqDaTy+u49VVI8lHHjTlllEqdFgeQuvQItrkDaojXWKLwHfW7ju7tDJlpVIV9K6KpRXWPAWUq7Bw==", + "dev": true, + "dependencies": { + "@nuxt/kit": "^3.11.0", + "defu": "^6.1.4", + "pathe": "^1.1.2" + } + }, "node_modules/nuxt/node_modules/escape-string-regexp": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz", diff --git a/nuxt-app/package.json b/nuxt-app/package.json index fceadfb..17a10b2 100644 --- a/nuxt-app/package.json +++ b/nuxt-app/package.json @@ -39,6 +39,7 @@ "eslint-plugin-nuxt": "^4.0.0", "eslint-plugin-vue": "^9.21.1", "nuxt": "^3.10.2", + "nuxt-time": "^0.1.3", "postcss": "^8.4.35", "prettier": "^3.2.5", "prettier-plugin-tailwindcss": "^0.5.11" diff --git a/nuxt-app/pages/profiles/[slug].vue b/nuxt-app/pages/profiles/[slug].vue index 33342a7..f722603 100644 --- a/nuxt-app/pages/profiles/[slug].vue +++ b/nuxt-app/pages/profiles/[slug].vue @@ -1,30 +1,54 @@ @@ -36,6 +60,7 @@ import type { DirectusProfileItem } from '~/types'; import { computed, type ComputedRef } from 'vue' import { generateProfile } from '~/helpers/jsonLdGenerator'; import DirectusImage from '~/components/DirectusImage.vue'; +import EmptyProfilePicture from 'assets/images/profile-picture-empty.svg'; // Add route and router const route = useRoute() @@ -43,10 +68,10 @@ const directus = useDirectus() const { data: pageData } = useAsyncData(route.fullPath, async () => { const [profile] = await Promise.all([ - await directus.getProfileById(route.params.slug as string), + await directus.getProfileBySlug(route.params.slug as string), ]) - if (!profile) { + if (!profile) { console.info('No profile found with slug.', route.params.slug as string) } diff --git a/nuxt-app/types/items.ts b/nuxt-app/types/items.ts index acb01ce..e384c15 100644 --- a/nuxt-app/types/items.ts +++ b/nuxt-app/types/items.ts @@ -1,6 +1,6 @@ /* eslint-disable no-use-before-define */ -import type { DirectusMeetupItem, DirectusPodcastItem, DirectusSpeakerItem } from '~/types/directus' +import type { DirectusMeetupItem, DirectusPodcastItem, DirectusSpeakerItem, DirectusTagItem } from '~/types/directus'; export type LatestPodcastItem = Pick< DirectusPodcastItem, @@ -92,8 +92,16 @@ export interface LoginProvider { url: string } +export interface DirectusEmojiItem { + id: string + title: string + display_emoji: string +} + export interface DirectusProfileItem { id: string + date_created: string + date_created_prepared: Date; first_name: string last_name: string display_name: string @@ -101,4 +109,15 @@ export interface DirectusProfileItem { job_role: string job_employer: string profile_image: FileItem + slug: string + interested_tags: { + id: number + tags_id: DirectusTagItem + }[] + emojis: { + id: number + emojis_id: DirectusEmojiItem + }[] + interested_tags_prepared: TagItem[] + emojis_prepared: DirectusEmojiItem[] } From dc117e9bb5f96009a1e6770336a39079651cebd9 Mon Sep 17 00:00:00 2001 From: Jan Gregor Emge-Triebel Date: Tue, 13 Aug 2024 15:50:56 +0200 Subject: [PATCH 02/14] Added keys to improve vue looping --- nuxt-app/pages/profiles/[slug].vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/nuxt-app/pages/profiles/[slug].vue b/nuxt-app/pages/profiles/[slug].vue index f722603..981fa79 100644 --- a/nuxt-app/pages/profiles/[slug].vue +++ b/nuxt-app/pages/profiles/[slug].vue @@ -37,13 +37,13 @@

{{ profile.job_employer || '-' }}

Ich in drei Emojis

- + {{ emoji.display_emoji }}

Meine Interessen

- + {{ interestedTag.name }}
From c8b2de5093918facb99ef01ac3ee260706e0c98f Mon Sep 17 00:00:00 2001 From: Jan Gregor Emge-Triebel Date: Tue, 13 Aug 2024 15:58:04 +0200 Subject: [PATCH 03/14] Fixed hydration errors --- nuxt-app/pages/profiles/[slug].vue | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/nuxt-app/pages/profiles/[slug].vue b/nuxt-app/pages/profiles/[slug].vue index 981fa79..a950fa0 100644 --- a/nuxt-app/pages/profiles/[slug].vue +++ b/nuxt-app/pages/profiles/[slug].vue @@ -10,6 +10,7 @@ @@ -26,11 +27,9 @@

Ãœber mich

-

- -

+

Rolle

{{ profile.job_role || '-' }}

Arbeitgeber / Institution

From 9b1315b10a89fd64a51755ce0b67fd7f427d74f2 Mon Sep 17 00:00:00 2001 From: Jan Gregor Emge-Triebel Date: Tue, 13 Aug 2024 16:19:06 +0200 Subject: [PATCH 04/14] Design review --- nuxt-app/components/PrimaryPbButton.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/nuxt-app/components/PrimaryPbButton.vue b/nuxt-app/components/PrimaryPbButton.vue index 7b326c8..9106721 100644 --- a/nuxt-app/components/PrimaryPbButton.vue +++ b/nuxt-app/components/PrimaryPbButton.vue @@ -12,7 +12,7 @@ const handleClick = () => {