listing block

apps/aurora/app/config/server.server.ts

@@ -3,6 +3,7 @@
  */
 import config from '@plone/registry';
 import PloneClient from '@plone/client';
+import { flattenToAppURL } from '@plone/helpers';
 // eslint-disable-next-line import/no-unresolved
 import applyAddonConfiguration from '../../.plone/registry.loader';
 // eslint-disable-next-line import/no-unresolved
@@ -34,7 +35,10 @@ export default function install() {
         const { id, block } = listingBlocks[i];
         if (block.querystring) {
           const results = await args.cli.querystringSearch(block.querystring);
-          args.content.blocks[id].items = results.data.items;
+          const flattened = flattenToAppURL(
+            results?.data ?? { items: [], items_total: 0 },
+          );
+          args.content.blocks[id].items = flattened.items;
         }
       }
     },

apps/aurora/news/+listingblockData-flattenToAppUrl.feature

@@ -0,0 +1 @@
+Add flattenToAppUrl on listing data @nileshgulia1

packages/blocks/Listing/ListingBlockEdit.tsx

@@ -0,0 +1,36 @@
+import type { BlockEditProps } from '@plone/types';
+
+import ListingBlockView from './ListingBlockView';
+
+const hasQuery = (value: any): boolean => {
+  if (!value) return false;
+
+  if (typeof value === 'object' && 'query' in value) {
+    const query = value.query;
+    return Array.isArray(query) && query.length > 0;
+  }
+
+  return false;
+};
+
+const ListingEdit = (props: BlockEditProps) => {
+  const { data } = props;
+  const hasListingQuery = hasQuery(data.querystring as any);
+
+  if (!hasListingQuery) {
+    return (
+      <div
+        className={[
+          'placeholder rounded-md border border-dashed border-quanta-azure bg-quanta-air',
+          'p-6 text-center text-quanta-iron',
+        ].join(' ')}
+      >
+        <p>No Results Found</p>
+      </div>
+    );
+  }
+
+  return <ListingBlockView {...props} isEditMode />;
+};
+
+export default ListingEdit;

packages/blocks/Listing/ListingBlockView.tsx

@@ -1,5 +1,9 @@
 import type { BlockViewProps, Brain, ListingBlockFormData } from '@plone/types';
 import { useTranslation } from 'react-i18next';
+import { useQuerystringResults } from './useQuerystringResults';
+
+const hasQuery = (value: ListingBlockFormData['querystring']): boolean =>
+  Array.isArray(value?.query) && value.query.length > 0;
 
 /**
  * View listing block component.
@@ -11,6 +15,10 @@ const ListingBlockView = (props: BlockViewProps) => {
   const HeadlineTag = data.headlineTag || 'h2';
   const ItemTitleTag = data.headlineTag === 'h2' ? 'h3' : 'h4';
   const { t } = useTranslation();
+  const hasListingQuery = hasQuery(data.querystring);
+  const { items, loaded } = useQuerystringResults(data.querystring as any);
+  const initialItems = props.isEditMode ? [] : (data.items ?? []);
+  const listingItems = hasListingQuery ? (loaded ? items : initialItems) : [];
 
   const getPreviewImageUrl = (item: Brain) => {
     const imageField = item.image_field;
@@ -51,10 +59,10 @@ const ListingBlockView = (props: BlockViewProps) => {
   return (
     <>
       {data.headline ? <HeadlineTag>{data.headline}</HeadlineTag> : ''}
-      {!data.items || data.items?.length === 0 ? (
+      {listingItems.length === 0 ? (
         <div>{t('blocks.listing.no-results')}</div>
       ) : (
-        data.items.map((item) =>
+        listingItems.map((item) =>
           data.variation === 'summary'
             ? renderSummary(item)
             : renderDefault(item),

packages/blocks/Listing/index.tsx

@@ -1,13 +1,21 @@
 import React from 'react';
 import type { BlockConfigBase } from '@plone/types';
+import { ListIcon } from '@plone/components/Icons';
+import { ListingSchema } from './schema';
 
 const ListingBlockInfo = {
   id: 'listing',
   title: 'Listing',
   view: React.lazy(
     () => import(/* webpackChunkName: "plone-blocks" */ './ListingBlockView'),
   ),
+  edit: React.lazy(
+    () => import(/* webpackChunkName: "plone-blocks" */ './ListingBlockEdit'),
+  ),
+  blockSchema: ListingSchema,
+  icon: ListIcon,
   category: 'common',
+  defaultBlockWidth: 'default',
 } satisfies Partial<BlockConfigBase>;
 
 export default ListingBlockInfo;

packages/blocks/Listing/schema.tsx

@@ -0,0 +1,27 @@
+import type { JSONSchema } from '@plone/types';
+
+export function ListingSchema(): JSONSchema {
+  return {
+    title: 'Listing',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['headline', 'querystring'],
+      },
+    ],
+    properties: {
+      headline: {
+        title: 'Headline',
+      },
+
+      querystring: {
+        title: 'Query',
+        description:
+          'Enter a querystring to filter the content items to be listed. For example: "Type: News Item" or "path: /news".',
+        widget: 'querystring',
+      },
+    },
+    required: ['querystring'],
+  };
+}

packages/blocks/Listing/useQuerystringResults.ts

@@ -0,0 +1,110 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useFetcher } from 'react-router';
+import { useDebounceValue } from 'usehooks-ts';
+import type { QuerystringValue } from '../../cmsui/components/QuerystringWidget/QuerystringWidgetContext';
+import type { QuerystringSearchResult } from '../../cmsui/routes/querystringSearch';
+
+/**
+ * Convert sort_order to string format.
+ * Handles both boolean (true = descending, false = ascending) and string values.
+ */
+function normalizeSortOrder(
+  sortOrder: string | boolean | undefined,
+): 'ascending' | 'descending' | undefined {
+  if (sortOrder === undefined || sortOrder === null) return undefined;
+  if (typeof sortOrder === 'boolean') {
+    return sortOrder ? 'descending' : 'ascending';
+  }
+  if (sortOrder === 'ascending' || sortOrder === 'descending') {
+    return sortOrder;
+  }
+}
+
+/**
+ * Build query parameters object with all supported fields.
+ * Only includes fields that have values (following Volto's pattern).
+ */
+function buildQueryParams(querystring: QuerystringValue | undefined) {
+  if (!querystring) return null;
+
+  const params: {
+    query?: QuerystringValue['query'];
+    sort_on?: string;
+    sort_order?: string;
+    b_size?: string;
+    limit?: string;
+  } = {};
+
+  if (querystring.query && querystring.query.length > 0) {
+    params.query = querystring.query;
+  }
+
+  if (querystring.sort_on) {
+    params.sort_on = querystring.sort_on;
+  }
+
+  const normalizedSortOrder = normalizeSortOrder(querystring.sort_order);
+  if (normalizedSortOrder) {
+    params.sort_order = normalizedSortOrder;
+  }
+
+  if (querystring.b_size !== undefined && querystring.b_size !== null) {
+    params.b_size = String(querystring.b_size);
+  }
+
+  if (querystring.limit !== undefined && querystring.limit !== null) {
+    params.limit = String(querystring.limit);
+  }
+
+  return Object.keys(params).length > 0 ? params : null;
+}
+
+export function useQuerystringResults(
+  querystring: QuerystringValue | undefined,
+) {
+  const fetcher = useFetcher<QuerystringSearchResult>();
+
+  const criteria = querystring?.query ?? [];
+  const hasCriteria = criteria.length > 0;
+
+  // Build full params signature including all supported fields
+  const params = buildQueryParams(querystring);
+  const paramsSignature = JSON.stringify(params);
+  const [debouncedParamsSignature] = useDebounceValue(paramsSignature, 400);
+  const pendingParamsSignature = useRef<string | undefined>(undefined);
+  const [loadedParamsSignature, setLoadedParamsSignature] = useState<
+    string | undefined
+  >(undefined);
+
+  const queryUrl = useMemo(() => {
+    const currentParams = JSON.parse(debouncedParamsSignature);
+    if (!currentParams?.query?.length) return null;
+
+    // Encode the entire params object as a single query parameter
+    const queryString = JSON.stringify(currentParams);
+    const encodedQuery = encodeURIComponent(queryString);
+
+    return `/@querystringSearch?query=${encodedQuery}`;
+  }, [debouncedParamsSignature]);
+
+  useEffect(() => {
+    if (!queryUrl) return;
+
+    pendingParamsSignature.current = debouncedParamsSignature;
+    fetcher.load(queryUrl);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [queryUrl]);
+
+  useEffect(() => {
+    if (!fetcher.data || !pendingParamsSignature.current) return;
+    setLoadedParamsSignature(pendingParamsSignature.current);
+  }, [fetcher.data]);
+
+  const loaded =
+    !hasCriteria || loadedParamsSignature === debouncedParamsSignature;
+  const items = hasCriteria && loaded ? (fetcher.data?.items ?? []) : [];
+  const total = hasCriteria && loaded ? (fetcher.data?.items_total ?? 0) : 0;
+  const loading = hasCriteria && fetcher.state !== 'idle';
+
+  return { items, total, loading, loaded };
+}

packages/blocks/news/40.feature

@@ -0,0 +1 @@
+Aurora: Listing block @nileshgulia

packages/blocks/package.json

@@ -55,7 +55,9 @@
     "@plone/components": "workspace:*",
     "@plone/registry": "workspace:*",
     "clsx": "^2.1.1",
-    "react-i18next": "catalog:"
+    "react-i18next": "catalog:",
+    "react-router": "catalog:",
+    "usehooks-ts": "^3.1.1"
   },
   "devDependencies": {
     "@plone/helpers": "workspace:*",

packages/client/news/+get-querystring.feature

@@ -0,0 +1 @@
+add queryParams to request body @nileshgulia1

packages/client/src/restapi/querystring-search/get.ts

@@ -9,27 +9,45 @@ export type QuerystringSearchArgs = z.infer<typeof querystringSearchDataSchema>;
 
 export async function querystringSearch(
   this: PloneClient,
-  { query, post }: QuerystringSearchArgs,
+  args: QuerystringSearchArgs,
 ): Promise<RequestResponse<QuerystringSearchResponse>> {
-  const validatedArgs = querystringSearchDataSchema.parse({
+  const {
     query,
-  });
+    post,
+    sort_on,
+    sort_order,
+    b_size,
+    limit,
+    b_start,
+    fullobjects,
+  } = querystringSearchDataSchema.parse(args);
+
+  // Build the complete query object with all parameters
+  const queryObject = {
+    query,
+    ...(sort_on && { sort_on }),
+    ...(sort_order && { sort_order }),
+    ...(b_size && { b_size }),
+    ...(limit && { limit }),
+    ...(b_start && { b_start }),
+    ...(fullobjects !== undefined && { fullobjects }),
+  };
+
   if (post) {
     const options: ApiRequestParams = {
-      data: { query: validatedArgs.query },
+      data: queryObject,
       config: this.config,
     };
 
     return apiRequest('post', '/@querystring-search', options);
   } else {
-    const queryObject = { query: validatedArgs.query };
     const querystring = JSON.stringify(queryObject);
     const encodedQuery = encodeURIComponent(querystring);
 
     const options: ApiRequestParams = {
       config: this.config,
       params: {
-        ...(encodedQuery && { query: encodedQuery }),
+        query: encodedQuery,
       },
     };