Page Builder > Testimonial Slider (#39)

* slider types * testimonial comp * add comp to page builder * add button and company_name to compquote * fix type for slider item * fix fields for vue component --------- Co-authored-by: rijkvanzanten <[email protected]>
directus · Jul 27, 2023 · a56ac14 · a56ac14
1 parent 5a0bc7e
commit a56ac14
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 4 deletions.
diff --git a/components/Block/BlockTestimonialSlider.vue b/components/Block/BlockTestimonialSlider.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { BlockProps } from './types';
+
+const { $directus, $readItem } = useNuxtApp();
+
+const props = defineProps<BlockProps>();
+
+const { data: comp } = useAsyncData(() =>
+	$directus.request(
+		$readItem('block_testimonial_slider', props.uuid, {
+			fields: [
+				'id',
+				{
+					items: [
+						'id',
+						{
+							comp_quote_id: [
+								'id',
+								'quote',
+								'person_name',
+								'person_image',
+								'company_name',
+								'company_logo',
+								{
+									button: ['id', 'sort', 'label', 'variant', 'page', 'type', 'resource', 'external_url'],
+								},
+							],
+						},
+					],
+				},
+			],
+		})
+	)
+);
+</script>
+
+<template>
+	<div class="testimonial-slider"></div>
+</template>
diff --git a/components/PageBuilder.vue b/components/PageBuilder.vue
@@ -31,6 +31,7 @@ const components: Record<BlockType, ReturnType<typeof resolveComponent>> = {
 	block_pageheader: 'div',
 	block_separator: 'div',
 	block_showcase: resolveComponent('BlockShowcase'),
+	block_testimonial_slider: resolveComponent('BlockTestimonialSlider'),
 	block_richtext: resolveComponent('BlockRichText'),
 };
 </script>

diff --git a/types/schema/blocks/block-testimonial-slider.ts b/types/schema/blocks/block-testimonial-slider.ts
@@ -0,0 +1,13 @@
+import type { ComponentQuote } from '../components';
+
+export interface BlockTestimonialSlider {
+	id: string;
+	items: BlockTestimonialSliderItem[];
+}
+
+export interface BlockTestimonialSliderItem {
+	id: string;
+	sort: number;
+	block_testimonial_slider_id: BlockTestimonialSlider;
+	comp_quote_id: ComponentQuote;
+}
diff --git a/types/schema/blocks/block.ts b/types/schema/blocks/block.ts
@@ -7,6 +7,7 @@ import type { BlockLogoCloud } from './block-logo-cloud.js';
 import type { BlockMediaFullWidth } from './block-media-full-width.js';
 import type { BlockPageHeader } from './block-page-header.js';
 import type { BlockShowcase } from './block-showcase.js';
+import type { BlockTestimonialSlider } from './block-testimonial-slider.js';
 
 export type BlockType =
 	| 'block_hero_form'
@@ -20,6 +21,7 @@ export type BlockType =
 	| 'block_columns'
 	| 'block_showcase'
 	| 'block_cardgroup'
+	| 'block_testimonial_slider'
 	| 'block_richtext';
 
 export type Block =
@@ -31,4 +33,5 @@ export type Block =
 	| BlockMediaFullWidth
 	| BlockHeroForm
 	| BlockHeroHeadline
-	| BlockHeroRotator;
+	| BlockHeroRotator
+	| BlockTestimonialSlider;
diff --git a/types/schema/blocks/index.ts b/types/schema/blocks/index.ts
@@ -7,7 +7,8 @@ export type * from './block-hero-rotator.js';
 export type * from './block-logo-cloud.js';
 export type * from './block-media-full-width.js';
 export type * from './block-page-header.js';
+export type * from './block-rich-text.js';
 export type * from './block-separator.js';
 export type * from './block-showcase.js';
-export type * from './block-rich-text.js';
+export type * from './block-testimonial-slider.js';
 export type * from './block.js';
diff --git a/types/schema/components/component-quote.ts b/types/schema/components/component-quote.ts
@@ -1,3 +1,4 @@
+import type { ComponentButton } from '../components/index.js';
 import type { File } from '../system/index.js';
 
 export interface ComponentQuote {
@@ -6,5 +7,7 @@ export interface ComponentQuote {
 	person_name: string | null;
 	person_title: string | null;
 	person_image: string | File | null;
+	company_name: string | null;
 	company_logo: string | File | null;
+	button: ComponentButton | null;
 }
diff --git a/types/schema/schema.ts b/types/schema/schema.ts
@@ -6,8 +6,9 @@ import type {
 	BlockHeroHeadline,
 	BlockMediaFullWidth,
 	BlockPageHeader,
-	BlockShowcase,
 	BlockRichText,
+	BlockShowcase,
+	BlockTestimonialSlider,
 } from './blocks/index.js';
 import type {
 	ComponentButton,
@@ -47,9 +48,10 @@ export interface Schema {
 	block_hero_form: BlockHeroForm[];
 	block_hero_headline: BlockHeroHeadline[];
 	block_media_fullwidth: BlockMediaFullWidth[];
-	block_showcase: BlockShowcase[];
 	block_pageheader: BlockPageHeader[];
 	block_richtext: BlockRichText[];
+	block_showcase: BlockShowcase[];
+	block_testimonial_slider: BlockTestimonialSlider[];
 
 	// Components
 	comp_button_groups: ComponentButtonGroup[];