From abe242b76c9a3b6532ed49156dbf725131e77f90 Mon Sep 17 00:00:00 2001 From: Thomas Wesley Date: Mon, 26 Sep 2022 15:05:10 +1000 Subject: [PATCH 1/3] Contentstack package: Add limit and sort to fetcher --- .../src/contentstack.tsx | 42 ++++++++++++++++++- 1 file changed, 40 insertions(+), 2 deletions(-) diff --git a/plasmicpkgs/plasmic-content-stack/src/contentstack.tsx b/plasmicpkgs/plasmic-content-stack/src/contentstack.tsx index 1175f982c28..79965b94571 100644 --- a/plasmicpkgs/plasmic-content-stack/src/contentstack.tsx +++ b/plasmicpkgs/plasmic-content-stack/src/contentstack.tsx @@ -79,12 +79,16 @@ export function ContentStackCredentialsProvider({ interface ContentStackFetcherProps { entryUID?: string; contentType?: string; + limit?: number; + orderBy?: string; + ascending?: boolean; children?: ReactNode; className?: string; noLayout?: boolean; setControlContextData?: (data: { types?: { title: string; uid: string }[]; entries?: { title: string; uid: string }[]; + fields?: { display_name: string; uid: string}[]; }) => void; } @@ -138,6 +142,24 @@ export const ContentStackFetcherMeta: ComponentMeta = displayName: "Entry UID", description: "Query in Content Type.", }, + limit: { + type: "number", + displayName: "Limit Results", + }, + orderBy: { + type: "choice", + options: (props, ctx) => + ctx?.fields?.map((field) => ({ + label: field.display_name, + value: field.uid, + })) ?? [], + displayName: "Order By", + }, + ascending: { + type: "choice", + options: [{label: 'Ascending', value: true}, {label: 'Descending', value: false}], + displayName: "Order Direction", + }, noLayout: { type: "boolean", displayName: "No layout", @@ -151,6 +173,9 @@ export const ContentStackFetcherMeta: ComponentMeta = export function ContentStackFetcher({ entryUID, contentType, + limit, + orderBy, + ascending, children, className, noLayout, @@ -188,15 +213,28 @@ export function ContentStackFetcher({ ); const { data: entriesData } = usePlasmicQueryData( - contentType ? `${cacheKey}/${contentType}/entries` : null, + contentType ? `${cacheKey}/${contentType}/entries${limit ? "/limit/" + limit : ''}${orderBy ? "/order/" + orderBy + (ascending ? '/ascending' : '') : ''}` : null, async () => { - return await Stack.ContentType(`${contentType!}`).Query().toJSON().find(); + let Query = Stack.ContentType(`${contentType!}`).Query(); + if(orderBy){ + Query = Query[ascending ? 'ascending' : 'descending'](orderBy); + } + if(limit){ + Query = Query.limit(limit); + } + return await Query.toJSON().find(); } ); + const schema = [{display_name: 'Created At', uid: 'created_at'}, {display_name: 'Updated At', uid: 'updated_at'}]; + if(contentTypes){ + schema.push(...contentTypes?.filter((x: any) => x.uid === contentType)?.[0]?.schema); + } + setControlContextData?.({ types: contentTypes, entries: entriesData?.[0], + fields: schema, }); if (!creds.apiKey || !creds.accessToken || !creds.environment) { From cc461fb54cd7687fec6b482d37edcdbbd7e7d474 Mon Sep 17 00:00:00 2001 From: Thomas Wesley Date: Wed, 19 Oct 2022 14:28:06 +1100 Subject: [PATCH 2/3] Contentstack package: Add filtering support and improve UX --- .../src/contentstack.tsx | 105 ++++++++++++++---- 1 file changed, 86 insertions(+), 19 deletions(-) diff --git a/plasmicpkgs/plasmic-content-stack/src/contentstack.tsx b/plasmicpkgs/plasmic-content-stack/src/contentstack.tsx index 79965b94571..4134f832f8c 100644 --- a/plasmicpkgs/plasmic-content-stack/src/contentstack.tsx +++ b/plasmicpkgs/plasmic-content-stack/src/contentstack.tsx @@ -77,18 +77,24 @@ export function ContentStackCredentialsProvider({ } interface ContentStackFetcherProps { - entryUID?: string; contentType?: string; - limit?: number; + fetchType?: string; + entryUID?: string; + filter?: boolean; + filterField?: string; + filterType?: 'where' | 'greaterThanOrEqualTo' | 'lessThanOrEqualTo'; + filterValue?: string; + order: boolean; orderBy?: string; ascending?: boolean; + limit?: number; children?: ReactNode; className?: string; noLayout?: boolean; setControlContextData?: (data: { types?: { title: string; uid: string }[]; entries?: { title: string; uid: string }[]; - fields?: { display_name: string; uid: string}[]; + fields?: { display_name: string; uid: string }[]; }) => void; } @@ -132,6 +138,15 @@ export const ContentStackFetcherMeta: ComponentMeta = displayName: "Content type", description: "Content type to be queried.", }, + fetchType: { + type: "choice", + options: [ + { label: 'Single Entry', value: 'single' }, + { label: 'All Entries', value: 'all' }, + ], + displayName: "Fetch type", + description: "What type of query to use.", + }, entryUID: { type: "choice", options: (props, ctx) => @@ -140,11 +155,45 @@ export const ContentStackFetcherMeta: ComponentMeta = value: entry.uid, })) ?? [], displayName: "Entry UID", - description: "Query in Content Type.", + description: "Select a single entry.", + hidden: props => props.fetchType !== 'single', }, - limit: { - type: "number", - displayName: "Limit Results", + filter: { + type: "boolean", + displayName: "Filter Entries", + hidden: props => props.fetchType !== 'all', + }, + filterField: { + type: "choice", + options: (props, ctx) => + ctx?.fields?.map((field) => ({ + label: field.display_name, + value: field.uid, + })) ?? [], + displayName: "Filter On", + description: "For Created/Updated At, YYYY-MM-DD is supported", + hidden: props => !props.filter || props.fetchType !== 'all', + }, + filterType: { + type: "choice", + options: [ + { label: 'Equals', value: 'where' }, + { label: 'Greater Than', value: 'greaterThanOrEqualTo' }, + { label: 'Less Than', value: 'lessThanOrEqualTo' } + ], + displayName: "Filter Type", + hidden: props => !props.filter || props.fetchType !== 'all', + }, + filterValue: { + type: "string", + displayName: "Filter Value", + description: "May not work on non-string fields.", + hidden: props => !props.filter || props.fetchType !== 'all', + }, + order: { + type: "boolean", + displayName: "Order Entries", + hidden: props => props.fetchType !== 'all', }, orderBy: { type: "choice", @@ -154,11 +203,18 @@ export const ContentStackFetcherMeta: ComponentMeta = value: field.uid, })) ?? [], displayName: "Order By", + hidden: props => !props.order || props.fetchType !== 'all', }, ascending: { type: "choice", - options: [{label: 'Ascending', value: true}, {label: 'Descending', value: false}], + options: [{ label: 'Ascending', value: true}, {label: 'Descending', value: false }], displayName: "Order Direction", + hidden: props => !props.order || props.fetchType !== 'all', + }, + limit: { + type: "number", + displayName: "Limit Results", + hidden: props => props.fetchType === 'single', }, noLayout: { type: "boolean", @@ -171,11 +227,17 @@ export const ContentStackFetcherMeta: ComponentMeta = }; export function ContentStackFetcher({ - entryUID, contentType, - limit, + fetchType, + entryUID, + filter, + filterField, + filterType, + filterValue, + order, orderBy, ascending, + limit, children, className, noLayout, @@ -192,7 +254,7 @@ export function ContentStackFetcher({ }); const { data: entryData } = usePlasmicQueryData( - contentType && entryUID + contentType && entryUID && fetchType === 'single' ? `${cacheKey}/${contentType}/entry/${entryUID}` : null, async () => { @@ -213,24 +275,29 @@ export function ContentStackFetcher({ ); const { data: entriesData } = usePlasmicQueryData( - contentType ? `${cacheKey}/${contentType}/entries${limit ? "/limit/" + limit : ''}${orderBy ? "/order/" + orderBy + (ascending ? '/ascending' : '') : ''}` : null, + contentType && fetchType === 'all' ? `${cacheKey}/${contentType}/entries${ + limit ? "/limit/" + limit : '' + }${ + order && orderBy ? "/order/" + orderBy + (ascending ? '/ascending' : '') : '' + }${ + filter && filterField && filterType && filterValue ? `/filter/${filterField}/${filterType}/${filterValue}` : '' + }` : null, async () => { let Query = Stack.ContentType(`${contentType!}`).Query(); - if(orderBy){ + if (filter && filterField && filterType && filterValue) { + Query = Query[filterType](filterField, filterValue); + } + if (order && orderBy){ Query = Query[ascending ? 'ascending' : 'descending'](orderBy); } - if(limit){ + if (limit){ Query = Query.limit(limit); } return await Query.toJSON().find(); } ); - const schema = [{display_name: 'Created At', uid: 'created_at'}, {display_name: 'Updated At', uid: 'updated_at'}]; - if(contentTypes){ - schema.push(...contentTypes?.filter((x: any) => x.uid === contentType)?.[0]?.schema); - } - + const schema = [{display_name: 'Created At', uid: 'created_at'}, {display_name: 'Updated At', uid: 'updated_at'}, ...(contentTypes?.filter((x: any) => x.uid === contentType)?.[0]?.schema ?? [])]; setControlContextData?.({ types: contentTypes, entries: entriesData?.[0], From ba2f6ab27d6a13122366cfdad07b3d05515d88c3 Mon Sep 17 00:00:00 2001 From: Thomas Wesley Date: Wed, 19 Oct 2022 15:03:55 +1100 Subject: [PATCH 3/3] Contentstack package: Fix single entry --- .../src/contentstack.tsx | 27 ++++++++++--------- 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/plasmicpkgs/plasmic-content-stack/src/contentstack.tsx b/plasmicpkgs/plasmic-content-stack/src/contentstack.tsx index 4134f832f8c..1460aa8413a 100644 --- a/plasmicpkgs/plasmic-content-stack/src/contentstack.tsx +++ b/plasmicpkgs/plasmic-content-stack/src/contentstack.tsx @@ -275,23 +275,25 @@ export function ContentStackFetcher({ ); const { data: entriesData } = usePlasmicQueryData( - contentType && fetchType === 'all' ? `${cacheKey}/${contentType}/entries${ + contentType ? `${cacheKey}/${contentType}/entries` + (fetchType === 'all' ? `${ limit ? "/limit/" + limit : '' }${ order && orderBy ? "/order/" + orderBy + (ascending ? '/ascending' : '') : '' }${ filter && filterField && filterType && filterValue ? `/filter/${filterField}/${filterType}/${filterValue}` : '' - }` : null, + }` : '') : null, async () => { let Query = Stack.ContentType(`${contentType!}`).Query(); - if (filter && filterField && filterType && filterValue) { - Query = Query[filterType](filterField, filterValue); - } - if (order && orderBy){ - Query = Query[ascending ? 'ascending' : 'descending'](orderBy); - } - if (limit){ - Query = Query.limit(limit); + if(fetchType === 'all'){ + if (filter && filterField && filterType && filterValue) { + Query = Query[filterType](filterField, filterValue); + } + if (order && orderBy){ + Query = Query[ascending ? 'ascending' : 'descending'](orderBy); + } + if (limit){ + Query = Query.limit(limit); + } } return await Query.toJSON().find(); } @@ -314,7 +316,8 @@ export function ContentStackFetcher({ } let renderedData; - if (contentType && entryUID) { + if (contentType && fetchType === 'single') { + if (!entryUID) return
Please select an entry
; renderedData = ( ); - } else if (contentType && !entryUID) { + } else if (contentType && fetchType === 'all') { const entries = entriesData?.flat(); renderedData = entries?.map((item: any, index: number) => (