feat: adding checkboxes in lists

.changeset/mean-shoes-behave.md

@@ -0,0 +1,6 @@
+---
+'@o2s/blocks.invoice-list': patch
+'@o2s/ui': patch
+---
+
+fixed incorrect price rendering in `DataView` component

.changeset/shy-bobcats-count.md

@@ -0,0 +1,5 @@
+---
+'@o2s/ui': patch
+---
+
+removed unnecessary prop destructuring

packages/blocks/invoice-list/src/api-harmonization/invoice-list.mapper.ts

@@ -29,6 +29,9 @@ export const mapInvoiceList = (
         downloadButtonAriaDescription: cms.downloadButtonAriaDescription,
         initialFilters: cms.initialFilters,
         cardHeaderSlots: cms.cardHeaderSlots,
+        enableRowSelection: cms.enableRowSelection,
+        bulkActionsLabel: cms.bulkActionsLabel,
+        downloadAllButtonLabel: cms.downloadAllButtonLabel,
     };
 };
 

packages/blocks/invoice-list/src/api-harmonization/invoice-list.model.ts

@@ -30,6 +30,9 @@ export class InvoiceListBlock extends ApiModels.Block.Block {
         right?: string;
         bottom?: string;
     };
+    enableRowSelection?: boolean;
+    bulkActionsLabel?: string;
+    downloadAllButtonLabel?: string;
 }
 
 export class Invoice {
@@ -47,10 +50,6 @@ export class Invoice {
         value: Invoices.Model.Invoice['paymentDueDate'];
         displayValue: string;
     };
-    totalAmountDue!: {
-        value: Invoices.Model.Invoice['totalAmountDue']['value'];
-    };
-    totalNetAmountDue!: {
-        value: Invoices.Model.Invoice['totalNetAmountDue']['value'];
-    };
+    totalAmountDue!: Invoices.Model.Invoice['totalAmountDue'];
+    totalNetAmountDue!: Invoices.Model.Invoice['totalNetAmountDue'];
 }

packages/blocks/invoice-list/src/frontend/InvoiceList.client.stories.tsx

@@ -175,9 +175,11 @@ export const Default: Story = {
                     },
                     totalAmountDue: {
                         value: 1250.5,
+                        currency: 'EUR',
                     },
                     totalNetAmountDue: {
                         value: 1016.67,
+                        currency: 'EUR',
                     },
                     paymentDueDate: {
                         displayValue: '07/15/2024',
@@ -197,9 +199,11 @@ export const Default: Story = {
                     },
                     totalAmountDue: {
                         value: 3450.75,
+                        currency: 'EUR',
                     },
                     totalNetAmountDue: {
                         value: 2805.49,
+                        currency: 'EUR',
                     },
                     paymentDueDate: {
                         displayValue: '06/10/2024',
@@ -219,9 +223,11 @@ export const Default: Story = {
                     },
                     totalAmountDue: {
                         value: 780.25,
+                        currency: 'EUR',
                     },
                     totalNetAmountDue: {
                         value: 634.35,
+                        currency: 'EUR',
                     },
                     paymentDueDate: {
                         displayValue: '07/05/2024',
@@ -241,9 +247,11 @@ export const Default: Story = {
                     },
                     totalAmountDue: {
                         value: 0,
+                        currency: 'EUR',
                     },
                     totalNetAmountDue: {
                         value: 0,
+                        currency: 'EUR',
                     },
                     paymentDueDate: {
                         displayValue: '05/20/2024',
@@ -263,9 +271,11 @@ export const Default: Story = {
                     },
                     totalAmountDue: {
                         value: 5670.3,
+                        currency: 'EUR',
                     },
                     totalNetAmountDue: {
                         value: 4610,
+                        currency: 'EUR',
                     },
                     paymentDueDate: {
                         displayValue: '06/15/2024',

packages/blocks/invoice-list/src/frontend/InvoiceList.client.tsx

@@ -1,6 +1,8 @@
 'use client';
 
+import { IntlMessageFormat } from 'intl-messageformat';
 import { Download } from 'lucide-react';
+import { useLocale } from 'next-intl';
 import React, { useState, useTransition } from 'react';
 
 import { Mappings, Utils } from '@o2s/utils.frontend';
@@ -27,6 +29,7 @@ import { InvoiceListPureProps } from './InvoiceList.types';
 
 export const InvoiceListPure: React.FC<InvoiceListPureProps> = ({ locale, accessToken, routing, ...component }) => {
     const { labels } = useGlobalContext();
+    const currentLocale = useLocale();
 
     const initialFilters: Request.GetInvoiceListBlockQuery = {
         id: component.id,
@@ -44,6 +47,7 @@ export const InvoiceListPure: React.FC<InvoiceListPureProps> = ({ locale, access
     const [data, setData] = useState(component);
     const [filters, setFilters] = useState(initialFilters);
     const [viewMode, setViewMode] = useState<'list' | 'grid'>(initialViewMode);
+    const [selectedRows, setSelectedRows] = useState<Set<string | number>>(new Set());
     const [isPending, startTransition] = useTransition();
 
     const handleFilter = (data: Partial<Request.GetInvoiceListBlockQuery>) => {
@@ -71,6 +75,7 @@ export const InvoiceListPure: React.FC<InvoiceListPureProps> = ({ locale, access
 
                 setFilters(initialFilters);
                 setData(newData);
+                setSelectedRows(new Set());
             } catch (_error) {
                 toast({
                     variant: 'destructive',
@@ -94,6 +99,33 @@ export const InvoiceListPure: React.FC<InvoiceListPureProps> = ({ locale, access
         }
     };
 
+    const handleBulkDownload = async (selectedInvoiceIds: string[]) => {
+        if (selectedInvoiceIds.length === 0) return;
+
+        startTransition(async () => {
+            try {
+                for (const invoiceId of selectedInvoiceIds) {
+                    try {
+                        const response = await sdk.blocks.getInvoicePdf(invoiceId, { 'x-locale': locale }, accessToken);
+                        Utils.DownloadFile.downloadFile(
+                            response,
+                            data.downloadFileName?.replace('{id}', invoiceId) || `invoice-${invoiceId}.pdf`,
+                        );
+                        await new Promise((resolve) => setTimeout(resolve, 100));
+                    } catch (error) {
+                        console.error(`Failed to download invoice ${invoiceId}:`, error);
+                    }
+                }
+            } catch (_error) {
+                toast({
+                    variant: 'destructive',
+                    title: labels.errors.requestError.title,
+                    description: labels.errors.requestError.content,
+                });
+            }
+        });
+    };
+
     // Define columns configuration outside JSX for better readability
     const columns = data.table.data.columns.map((column) => {
         switch (column.id) {
@@ -156,6 +188,25 @@ export const InvoiceListPure: React.FC<InvoiceListPureProps> = ({ locale, access
           }
         : undefined;
 
+    const bulkActions = component.downloadAllButtonLabel
+        ? (selectedRowKeys: Set<string | number>) => {
+              const selectedIds = Array.from(selectedRowKeys).map(String);
+              return (
+                  <Button size="sm" onClick={() => handleBulkDownload(selectedIds)} disabled={isPending}>
+                      <Download className="mr-2 h-4 w-4" />
+                      {component.downloadAllButtonLabel}
+                  </Button>
+              );
+          }
+        : undefined;
+
+    const bulkActionsLabel = component.bulkActionsLabel
+        ? (count: number) => {
+              const msg = new IntlMessageFormat(component.bulkActionsLabel!, currentLocale);
+              return String(msg.format({ count }));
+          }
+        : undefined;
+
     return (
         <div className="w-full">
             {initialData.length > 0 ? (
@@ -195,6 +246,12 @@ export const InvoiceListPure: React.FC<InvoiceListPureProps> = ({ locale, access
                                         columns={columns}
                                         actions={actions}
                                         cardHeaderSlots={data.cardHeaderSlots}
+                                        enableRowSelection={component.enableRowSelection}
+                                        selectedRows={selectedRows}
+                                        onSelectionChange={setSelectedRows}
+                                        getRowKey={(item) => item.id}
+                                        bulkActions={bulkActions}
+                                        bulkActionsLabel={bulkActionsLabel}
                                     />
 
                                     {data.pagination && (

packages/blocks/notification-list/src/frontend/NotificationList.client.tsx

@@ -52,6 +52,7 @@ export const NotificationListPure: React.FC<NotificationListPureProps> = ({
     const [data, setData] = useState<Model.NotificationListBlock>(component);
     const [filters, setFilters] = useState(initialFilters);
     const [viewMode, setViewMode] = useState<'list' | 'grid'>(initialViewMode);
+    const [selectedRows, setSelectedRows] = useState<Set<string | number>>(new Set());
     const [isPending, startTransition] = useTransition();
 
     const handleFilter = (data: Partial<Request.GetNotificationListBlockQuery>) => {
@@ -62,6 +63,7 @@ export const NotificationListPure: React.FC<NotificationListPureProps> = ({
 
                 setFilters(newFilters);
                 setData(newData);
+                setSelectedRows(new Set());
             } catch (_error) {
                 toast({
                     variant: 'destructive',
@@ -83,6 +85,7 @@ export const NotificationListPure: React.FC<NotificationListPureProps> = ({
 
                 setFilters(initialFilters);
                 setData(newData);
+                setSelectedRows(new Set());
             } catch (_error) {
                 toast({
                     variant: 'destructive',
@@ -201,6 +204,10 @@ export const NotificationListPure: React.FC<NotificationListPureProps> = ({
                                     columns={columns}
                                     actions={actions}
                                     cardHeaderSlots={data.cardHeaderSlots}
+                                    enableRowSelection={component.enableRowSelection}
+                                    selectedRows={selectedRows}
+                                    onSelectionChange={setSelectedRows}
+                                    getRowKey={(item) => item.id}
                                 />
 
                                 {data.pagination && (

packages/blocks/notification-list/src/frontend/NotificationList.types.ts

@@ -8,6 +8,7 @@ export interface NotificationListProps {
     locale: string;
     routing: ReturnType<typeof defineRouting>;
     hasPriority?: boolean;
+    enableRowSelection?: boolean;
 }
 
 export type NotificationListPureProps = NotificationListProps & Model.NotificationListBlock;

packages/blocks/order-list/src/frontend/OrderList.client.tsx

@@ -52,6 +52,7 @@ export const OrderListPure: React.FC<OrderListPureProps> = ({ locale, accessToke
     const [data, setData] = useState<Model.OrderListBlock>(component);
     const [filters, setFilters] = useState(initialFilters);
     const [viewMode, setViewMode] = useState<'list' | 'grid'>(initialViewMode);
+    const [selectedRows, setSelectedRows] = useState<Set<string | number>>(new Set());
 
     const [isPending, startTransition] = useTransition();
 
@@ -60,8 +61,10 @@ export const OrderListPure: React.FC<OrderListPureProps> = ({ locale, accessToke
             try {
                 const newFilters = { ...filters, ...data };
                 const newData = await sdk.blocks.getOrderList(newFilters, { 'x-locale': locale }, accessToken);
+
                 setFilters(newFilters);
                 setData(newData);
+                setSelectedRows(new Set());
             } catch (_error) {
                 toast({
                     variant: 'destructive',
@@ -78,6 +81,7 @@ export const OrderListPure: React.FC<OrderListPureProps> = ({ locale, accessToke
                 const newData = await sdk.blocks.getOrderList(initialFilters, { 'x-locale': locale }, accessToken);
                 setFilters(initialFilters);
                 setData(newData);
+                setSelectedRows(new Set());
             } catch (_error) {
                 toast({
                     variant: 'destructive',
@@ -207,6 +211,9 @@ export const OrderListPure: React.FC<OrderListPureProps> = ({ locale, accessToke
                                     columns={columns}
                                     actions={actions}
                                     cardHeaderSlots={data.cardHeaderSlots}
+                                    enableRowSelection={component.enableRowSelection}
+                                    selectedRows={selectedRows}
+                                    onSelectionChange={setSelectedRows}
                                     getRowKey={(item) => item.id.value}
                                 />
 

packages/blocks/order-list/src/frontend/OrderList.types.ts

@@ -8,6 +8,7 @@ export interface OrderListProps {
     locale: string;
     routing: ReturnType<typeof defineRouting>;
     hasPriority?: boolean;
+    enableRowSelection?: boolean;
 }
 
 export interface OrderListRendererProps extends Omit<OrderListProps, ''> {

packages/blocks/product-list/src/frontend/ProductList.client.tsx

@@ -35,13 +35,15 @@ export const ProductListPure: React.FC<ProductListPureProps> = ({ locale, access
     const [filters, setFilters] = useState(initialFilters);
     const [isPending, startTransition] = useTransition();
     const [viewMode, setViewMode] = useState<ViewMode>('grid');
+    const [selectedRows, setSelectedRows] = useState<Set<string | number>>(new Set());
 
     const handleFilter = (data: Partial<typeof initialFilters>) => {
         startTransition(async () => {
             const newFilters = { ...filters, ...data };
             const newData = await sdk.blocks.getProductList(newFilters, { 'x-locale': locale }, accessToken);
             setFilters(newFilters);
             setData(newData);
+            setSelectedRows(new Set());
         });
     };
 
@@ -50,6 +52,7 @@ export const ProductListPure: React.FC<ProductListPureProps> = ({ locale, access
             const newData = await sdk.blocks.getProductList(initialFilters, { 'x-locale': locale }, accessToken);
             setFilters(initialFilters);
             setData(newData);
+            setSelectedRows(new Set());
         });
     };
 
@@ -162,6 +165,9 @@ export const ProductListPure: React.FC<ProductListPureProps> = ({ locale, access
                                             columns={columns}
                                             actions={actions}
                                             getRowKey={(item) => item.id}
+                                            enableRowSelection={component.enableRowSelection}
+                                            selectedRows={selectedRows}
+                                            onSelectionChange={setSelectedRows}
                                         />
                                     </div>
                                 )}

packages/blocks/product-list/src/frontend/ProductList.types.ts

@@ -7,6 +7,7 @@ export interface ProductListProps {
     accessToken?: string;
     locale: string;
     routing: ReturnType<typeof defineRouting>;
+    enableRowSelection?: boolean;
 }
 
 export type ProductListPureProps = ProductListProps & Model.ProductListBlock;

packages/blocks/ticket-list/src/frontend/TicketList.client.tsx

@@ -49,6 +49,7 @@ export const TicketListPure: React.FC<TicketListPureProps> = ({ locale, accessTo
     const [data, setData] = useState<Model.TicketListBlock>(component);
     const [filters, setFilters] = useState(initialFilters);
     const [viewMode, setViewMode] = useState<'list' | 'grid'>(initialViewMode);
+    const [selectedRows, setSelectedRows] = useState<Set<string | number>>(new Set());
 
     const [isPending, startTransition] = useTransition();
 
@@ -59,6 +60,7 @@ export const TicketListPure: React.FC<TicketListPureProps> = ({ locale, accessTo
                 const newData = await sdk.blocks.getTicketList(newFilters, { 'x-locale': locale }, accessToken);
                 setFilters(newFilters);
                 setData(newData);
+                setSelectedRows(new Set());
             } catch (_error) {
                 toast({
                     variant: 'destructive',
@@ -75,6 +77,7 @@ export const TicketListPure: React.FC<TicketListPureProps> = ({ locale, accessTo
                 const newData = await sdk.blocks.getTicketList(initialFilters, { 'x-locale': locale }, accessToken);
                 setFilters(initialFilters);
                 setData(newData);
+                setSelectedRows(new Set());
             } catch (_error) {
                 toast({
                     variant: 'destructive',
@@ -214,6 +217,10 @@ export const TicketListPure: React.FC<TicketListPureProps> = ({ locale, accessTo
                                     columns={columns}
                                     actions={actions}
                                     cardHeaderSlots={data.cardHeaderSlots}
+                                    enableRowSelection={component.enableRowSelection}
+                                    selectedRows={selectedRows}
+                                    onSelectionChange={setSelectedRows}
+                                    getRowKey={(item) => item.id}
                                 />
 
                                 {data.pagination && (

packages/blocks/ticket-list/src/frontend/TicketList.types.ts

@@ -9,6 +9,7 @@ export interface TicketListProps {
     routing: ReturnType<typeof defineRouting>;
     hasPriority?: boolean;
     isDraftModeEnabled?: boolean;
+    enableRowSelection?: boolean;
 }
 
 export type TicketListPureProps = TicketListProps & Model.TicketListBlock;

packages/framework/src/modules/cms/models/blocks/invoice-list.model.ts

@@ -27,4 +27,7 @@ export class InvoiceListBlock extends Block.Block {
         right?: string;
         bottom?: string;
     };
+    enableRowSelection?: boolean;
+    bulkActionsLabel?: string;
+    downloadAllButtonLabel?: string;
 }