diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance/products/list')
3 files changed, 106 insertions, 79 deletions
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/list/List.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/list/List.stories.tsx index ac22960b2..c2c4d548c 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/list/List.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/list/List.stories.tsx @@ -15,44 +15,47 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ + * + * @author Sebastian Javier Marchano (sebasjm) + */ -import { h, VNode, FunctionalComponent } from 'preact'; +import { h, VNode, FunctionalComponent } from "preact"; import { CardTable as TestedComponent } from "./Table.js"; - export default { - title: 'Pages/Product/List', + title: "Pages/Product/List", component: TestedComponent, argTypes: { - onCreate: { action: 'onCreate' }, - onSelect: { action: 'onSelect' }, - onDelete: { action: 'onDelete' }, - onUpdate: { action: 'onUpdate' }, + onCreate: { action: "onCreate" }, + onSelect: { action: "onSelect" }, + onDelete: { action: "onDelete" }, + onUpdate: { action: "onUpdate" }, }, }; -function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) { - const r = (args: any) => <Component {...args} /> - r.args = props - return r +function createExample<Props>( + Component: FunctionalComponent<Props>, + props: Partial<Props>, +) { + const r = (args: any) => <Component {...args} />; + r.args = props; + return r; } - export const Example = createExample(TestedComponent, { - instances: [{ - id: 'orderid', - description: 'description1', - description_i18n: {} as any, - image: '', - price: 'TESTKUDOS:10', - taxes: [], - total_lost: 10, - total_sold: 5, - total_stock: 15, - unit: 'bar', - address: {} - }] + instances: [ + { + id: "orderid", + description: "description1", + description_i18n: {} as any, + image: "", + price: "TESTKUDOS:10", + taxes: [], + total_lost: 10, + total_sold: 5, + total_stock: 15, + unit: "bar", + address: {}, + }, + ], }); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx index dfa66fcf4..515b36895 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx @@ -41,7 +41,7 @@ interface Props { onSelect: (product: Entity) => void; onUpdate: ( id: string, - data: MerchantBackend.Products.ProductPatchDetail + data: MerchantBackend.Products.ProductPatchDetail, ) => Promise<void>; onCreate: () => void; selected?: boolean; @@ -55,7 +55,7 @@ export function CardTable({ onDelete, }: Props): VNode { const [rowSelection, rowSelectionHandler] = useState<string | undefined>( - undefined + undefined, ); const i18n = useTranslator(); return ( @@ -107,7 +107,7 @@ interface TableProps { onSelect: (id: Entity) => void; onUpdate: ( id: string, - data: MerchantBackend.Products.ProductPatchDetail + data: MerchantBackend.Products.ProductPatchDetail, ) => Promise<void>; onDelete: (id: Entity) => void; rowSelectionHandler: StateUpdater<string | undefined>; @@ -159,7 +159,7 @@ function Table({ ? "never" : `restock at ${format( new Date(i.next_restock.t_s * 1000), - "yyyy/MM/dd" + "yyyy/MM/dd", )}`; let stockInfo: ComponentChildren = ""; if (i.total_stock < 0) { @@ -277,7 +277,7 @@ function Table({ product={i} onUpdate={(prod) => onUpdate(i.id, prod).then((r) => - rowSelectionHandler(undefined) + rowSelectionHandler(undefined), ) } onCancel={() => rowSelectionHandler(undefined)} @@ -297,7 +297,7 @@ function Table({ interface FastProductUpdateFormProps { product: Entity; onUpdate: ( - data: MerchantBackend.Products.ProductPatchDetail + data: MerchantBackend.Products.ProductPatchDetail, ) => Promise<void>; onCancel: () => void; } @@ -381,7 +381,7 @@ function FastProductWithManagedStockUpdateForm({ }; const hasErrors = Object.keys(errors).some( - (k) => (errors as any)[k] !== undefined + (k) => (errors as any)[k] !== undefined, ); const i18n = useTranslator(); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx index 9f1d077ac..7e9118d24 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx @@ -15,18 +15,21 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ + * + * @author Sebastian Javier Marchano (sebasjm) + */ -import { h, VNode } from 'preact'; -import { useState } from 'preact/hooks'; +import { h, VNode } from "preact"; +import { useState } from "preact/hooks"; import { Loading } from "../../../../components/exception/loading.js"; import { NotificationCard } from "../../../../components/menu/index.js"; import { MerchantBackend, WithId } from "../../../../declaration.js"; import { HttpError } from "../../../../hooks/backend.js"; -import { useInstanceProducts, useProductAPI } from "../../../../hooks/product.js"; -import { useTranslator } from '../../../../i18n/index.js'; +import { + useInstanceProducts, + useProductAPI, +} from "../../../../hooks/product.js"; +import { useTranslator } from "../../../../i18n/index.js"; import { Notification } from "../../../../utils/types.js"; import { CardTable } from "./Table.js"; @@ -37,44 +40,65 @@ interface Props { onSelect: (id: string) => void; onLoadError: (e: HttpError) => VNode; } -export default function ProductList({ onUnauthorized, onLoadError, onCreate, onSelect, onNotFound }: Props): VNode { - const result = useInstanceProducts() - const { deleteProduct, updateProduct } = useProductAPI() - const [notif, setNotif] = useState<Notification | undefined>(undefined) +export default function ProductList({ + onUnauthorized, + onLoadError, + onCreate, + onSelect, + onNotFound, +}: Props): VNode { + const result = useInstanceProducts(); + const { deleteProduct, updateProduct } = useProductAPI(); + const [notif, setNotif] = useState<Notification | undefined>(undefined); - const i18n = useTranslator() + const i18n = useTranslator(); - if (result.clientError && result.isUnauthorized) return onUnauthorized() - if (result.clientError && result.isNotfound) return onNotFound() - if (result.loading) return <Loading /> - if (!result.ok) return onLoadError(result) + if (result.clientError && result.isUnauthorized) return onUnauthorized(); + if (result.clientError && result.isNotfound) return onNotFound(); + if (result.loading) return <Loading />; + if (!result.ok) return onLoadError(result); - return <section class="section is-main-section"> - <NotificationCard notification={notif} /> + return ( + <section class="section is-main-section"> + <NotificationCard notification={notif} /> - <CardTable instances={result.data} - onCreate={onCreate} - onUpdate={(id, prod) => updateProduct(id, prod) - .then(() => setNotif({ - message: i18n`product updated successfully`, - type: "SUCCESS" - })).catch((error) => setNotif({ - message: i18n`could not update the product`, - type: "ERROR", - description: error.message - })) - } - onSelect={(product) => onSelect(product.id)} - onDelete={(prod: (MerchantBackend.Products.ProductDetail & WithId)) => deleteProduct(prod.id) - .then(() => setNotif({ - message: i18n`product delete successfully`, - type: "SUCCESS" - })).catch((error) => setNotif({ - message: i18n`could not delete the product`, - type: "ERROR", - description: error.message - })) - } - /> - </section> -}
\ No newline at end of file + <CardTable + instances={result.data} + onCreate={onCreate} + onUpdate={(id, prod) => + updateProduct(id, prod) + .then(() => + setNotif({ + message: i18n`product updated successfully`, + type: "SUCCESS", + }), + ) + .catch((error) => + setNotif({ + message: i18n`could not update the product`, + type: "ERROR", + description: error.message, + }), + ) + } + onSelect={(product) => onSelect(product.id)} + onDelete={(prod: MerchantBackend.Products.ProductDetail & WithId) => + deleteProduct(prod.id) + .then(() => + setNotif({ + message: i18n`product delete successfully`, + type: "SUCCESS", + }), + ) + .catch((error) => + setNotif({ + message: i18n`could not delete the product`, + type: "ERROR", + description: error.message, + }), + ) + } + /> + </section> + ); +} |