From 67709b19b8fbf07552800235cd2cc500f0c23711 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Tue, 1 Aug 2023 20:04:23 -0400
Subject: [PATCH] Remove file util, start on cardgroup

---
 components/Base/Panel.vue              |  6 ++----
 components/Block/CardGroup.vue         | 17 ++++++++++++----
 components/Block/Showcase.vue          |  4 ++--
 components/Comp/Media.vue              |  8 +++++---
 components/Comp/Quote.vue              |  4 ++--
 components/Nav/Header.vue              |  2 +-
 types/schema/blocks/block-cardgroup.ts | 13 +++++++-----
 types/schema/content/resource.ts       | 28 ++++++++++++++++----------
 types/schema/schema.ts                 |  3 ++-
 utils/getFileUrl.ts                    | 11 ----------
 utils/resourcePermalink.ts             |  7 +++++++
 11 files changed, 59 insertions(+), 44 deletions(-)
 delete mode 100644 utils/getFileUrl.ts
 create mode 100644 utils/resourcePermalink.ts

diff --git a/components/Base/Panel.vue b/components/Base/Panel.vue
index 0feec85e..6969f9b7 100644
--- a/components/Base/Panel.vue
+++ b/components/Base/Panel.vue
@@ -8,15 +8,13 @@ export interface CardGrayProps {
 	button?: Pick<BaseButtonProps, 'label' | 'href' | 'variant'>;
 }
 
-const props = defineProps<CardGrayProps>();
-
-const fileUrl = computed(() => getFileUrl(props.image));
+defineProps<CardGrayProps>();
 </script>
 
 <template>
 	<div class="base-panel">
 		<div class="base-panel-header">
-			<img :src="fileUrl" :alt="title" height="50" />
+			<BaseDirectusImage v-if="image" :uuid="image" :alt="title ?? ''" height="50" />
 
 			<div>
 				<BaseHeading v-if="title" size="medium" :content="title" />
diff --git a/components/Block/CardGroup.vue b/components/Block/CardGroup.vue
index a6f18bbb..cac41d00 100644
--- a/components/Block/CardGroup.vue
+++ b/components/Block/CardGroup.vue
@@ -9,9 +9,17 @@ const { data: block } = useAsyncData(props.uuid, () =>
 	$directus.request(
 		$readItem('block_cardgroup', props.uuid, {
 			fields: [
-				'variant',
+				'direction',
+				'aspect_ratio',
 				{
-					cards: ['id', 'title', 'description', 'href', 'image'],
+					cards: [
+						'id',
+						'title',
+						'description',
+						'external_url',
+						'image',
+						{ page: ['permalink'], resource: ['type', 'slug'] },
+					],
 				},
 			],
 		})
@@ -20,14 +28,15 @@ const { data: block } = useAsyncData(props.uuid, () =>
 </script>
 
 <template>
-	<div v-if="block" :class="[`${block.variant}-group`, 'block-cardgroup']">
+	<div v-if="block" :class="[`direction-${block.direction}`, 'block-cardgroup']">
 		<BaseCard
 			v-for="card in block.cards"
 			:key="card.id"
 			:title="card.title ?? undefined"
 			:image="card.image ?? undefined"
 			:description="card.description"
-			:href="card.href ?? undefined"
+			:href="card.external_url ?? undefined"
+			:to="card.page?.permalink ?? resourcePermalink(card.resource) ?? undefined"
 		/>
 	</div>
 </template>
diff --git a/components/Block/Showcase.vue b/components/Block/Showcase.vue
index 254db165..9f586b5b 100644
--- a/components/Block/Showcase.vue
+++ b/components/Block/Showcase.vue
@@ -95,8 +95,8 @@ onBeforeUnmount(() => {
 		<BaseFrame aspect="16-9" variant="frosted" color="white">
 			<div class="transition-group">
 				<template v-for="(item, itemIdx) in block.items" :key="item.id">
-					<div class="image-container" :class="{ 'is-active': selectedIdx === itemIdx }">
-						<img :src="getFileUrl(item.image?.id)" :alt="item.image?.description ?? undefined" />
+					<div v-if="item.image" class="image-container" :class="{ 'is-active': selectedIdx === itemIdx }">
+						<BaseDirectusImage :uuid="item.image?.id" :alt="item.image?.description ?? ''" />
 					</div>
 				</template>
 			</div>
diff --git a/components/Comp/Media.vue b/components/Comp/Media.vue
index b084cc7d..d4110c53 100644
--- a/components/Comp/Media.vue
+++ b/components/Comp/Media.vue
@@ -19,14 +19,16 @@ const { data: comp } = useAsyncData(props.uuid, () =>
 		})
 	)
 );
-
-const imageUrl = computed(() => getFileUrl(unref(comp)?.image?.id));
 </script>
 
 <template>
 	<BaseFrame variant="frosted" color="white">
 		<BaseVideo v-if="comp?.type === 'video' && comp.video?.url" :url="comp.video.url" />
-		<img v-else-if="comp?.type === 'image' && comp.image" :src="imageUrl" :alt="comp.image.description ?? undefined" />
+		<BaseDirectusImage
+			v-else-if="comp?.type === 'image' && comp.image"
+			:uuid="comp.image.id"
+			:alt="comp.image.description ?? ''"
+		/>
 		<!-- eslint-disable-next-line vue/no-v-html -->
 		<div v-else-if="comp?.type === 'embed'" v-html="comp.embed" />
 	</BaseFrame>
diff --git a/components/Comp/Quote.vue b/components/Comp/Quote.vue
index 2e69493e..35f129c6 100644
--- a/components/Comp/Quote.vue
+++ b/components/Comp/Quote.vue
@@ -16,10 +16,10 @@ const { data: comp } = useAsyncData(props.uuid, () =>
 
 <template>
 	<div v-if="comp" class="comp-quote">
-		<img class="company-logo" height="25" :src="getFileUrl(comp.company_logo)" />
+		<BaseDirectusImage class="company-logo" height="25" :uuid="comp.company_logo!" alt="" />
 		<BaseText v-if="comp.quote" :content="comp.quote" />
 		<div class="avatar">
-			<img width="64" height="64" :src="getFileUrl(comp.person_image)" />
+			<BaseDirectusImage width="64" height="64" :uuid="comp.person_image!" alt="" />
 			<div>
 				<p>{{ comp.person_name }}</p>
 				<p>{{ comp.person_title }}</p>
diff --git a/components/Nav/Header.vue b/components/Nav/Header.vue
index d5601a93..095574d7 100644
--- a/components/Nav/Header.vue
+++ b/components/Nav/Header.vue
@@ -109,7 +109,7 @@ onClickOutside(headerContainer, resetNavState);
 						>
 							<li v-for="link in section.children" :key="link.id">
 								<NuxtLink :href="link.url ?? undefined" :to="(link.page as any)?.permalink" class="link">
-									<img v-if="link.image" :src="getFileUrl(link.image as any)" alt="" class="icon" lazy />
+									<BaseDirectusImage if="link.image" :uuid="(link.image as string)" alt="" class="icon" lazy />
 									<div class="content">
 										<div class="title">{{ link.title }}</div>
 										<div v-if="link.description" class="description">{{ link.description }}</div>
diff --git a/types/schema/blocks/block-cardgroup.ts b/types/schema/blocks/block-cardgroup.ts
index 6c79f898..23bbbeba 100644
--- a/types/schema/blocks/block-cardgroup.ts
+++ b/types/schema/blocks/block-cardgroup.ts
@@ -1,9 +1,10 @@
-import type { ComponentButton } from '../components';
+import type { Page, Resource } from '../content';
 import type { File } from '../system';
 
 export interface BlockCardGroup {
 	id: string;
-	variant: 'gray' | 'white' | 'resource';
+	direction: 'horizontal' | 'vertical' | null;
+	aspect_ratio: '1-1' | '16-9' | null;
 	cards: string[] | BlockCardGroupCards[] | null;
 }
 
@@ -14,7 +15,9 @@ export interface BlockCardGroupCards {
 	title: string;
 	description: string | null;
 	image_size: 'icon' | 'cover' | null;
-	image: File | null;
-	button: ComponentButton | null;
-	href: string | null;
+	image: string | File | null;
+	type: 'pages' | 'resources' | 'external' | null;
+	external_url: string | null;
+	page: string | Page | null;
+	resource: string | Resource | null;
 }
diff --git a/types/schema/content/resource.ts b/types/schema/content/resource.ts
index fc9f3fd2..4a82ef80 100644
--- a/types/schema/content/resource.ts
+++ b/types/schema/content/resource.ts
@@ -1,19 +1,25 @@
-import type { Team } from '../routes/index.js';
-import type { User } from '../system/index.js';
-import type { Video } from './video.js';
+import type { Seo } from '../meta';
+import type { Team } from '../routes';
+import type { User } from '../system';
+import type { Article } from './article';
+import type { CaseStudy } from './case-study';
+import type { Video } from './video';
 
 export interface Resource {
 	id: string;
-	status: string;
-	sort: number | null;
-	user_created: string | User | null;
-	date_created: string | null;
+	sort: number;
+	user_created: string | User;
+	date_created: string;
 	user_updated: string | User | null;
 	date_updated: string | null;
-	video: string | Video | null;
-	type: string | null;
+	type: 'article' | 'video' | 'case_study';
+	status: 'published' | 'draft' | 'archived';
 	title: string | null;
-	date_published: string | null;
-	author: string | Team | null;
 	slug: string | null;
+	author: string | Team | null;
+	date_published: string | null;
+	video: string | Video | null;
+	article: string | Article | null;
+	case_study: string | CaseStudy | null;
+	seo: string | Seo | null;
 }
diff --git a/types/schema/schema.ts b/types/schema/schema.ts
index bbce4500..9ac2d1bd 100644
--- a/types/schema/schema.ts
+++ b/types/schema/schema.ts
@@ -21,7 +21,7 @@ import type {
 	ComponentMetrics,
 	ComponentQuote,
 } from './components/index.js';
-import type { Article, Career, CaseStudy, Form, Page, Report, SiteBanner, Video } from './content/index.js';
+import type { Article, Career, CaseStudy, Form, Page, Report, Resource, SiteBanner, Video } from './content/index.js';
 import type { Globals, Navigation, Redirect, Seo } from './meta/index.js';
 import type { ContentType, Event, Partner, Team } from './routes/index.js';
 import type { File, User } from './system/index.js';
@@ -41,6 +41,7 @@ export interface Schema {
 	case_studies: CaseStudy[];
 	forms: Form[];
 	reports: Report[];
+	resources: Resource[];
 	site_banners: SiteBanner[];
 	videos: Video[];
 
diff --git a/utils/getFileUrl.ts b/utils/getFileUrl.ts
deleted file mode 100644
index e3406884..00000000
--- a/utils/getFileUrl.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { File } from '~/types/schema';
-
-export const getFileUrl = (fileId: string | File | null | undefined) => {
-	const config = useRuntimeConfig();
-
-	if (typeof fileId === 'object') {
-		fileId = fileId?.id;
-	}
-
-	return `${config.public.directusUrl}/assets/${fileId}?token=${config.public.directusToken}`; /* TODO Drop the token when we make assets public. */
-};
diff --git a/utils/resourcePermalink.ts b/utils/resourcePermalink.ts
new file mode 100644
index 00000000..372a4fa7
--- /dev/null
+++ b/utils/resourcePermalink.ts
@@ -0,0 +1,7 @@
+export const resourcePermalink = (
+	resource?: { type: 'case_study' | 'article' | 'video' | null; slug: string | null } | null
+) => {
+	if (!resource || !resource.type || !resource.slug) return null;
+
+	return `/${resource.type}/${resource.slug}`;
+};