Open restareaByWeezy opened 1 month ago
ๆ้ฎๅๅ ็็๏ผ
https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md
if table has nested header , hiding nesting columns won't work
columns looks like this and if there are no nested header, works propably
export const usePurchaseItemTableColumns = ({ getSellerEntity, getUserEntity, refresh, setParams, coinEntities, }: { getSellerEntity: (id: string) => Commerce.ISeller; getUserEntity: (id: string) => Moim.IUser; coinEntities: Record<string, Community.ICoin>; setParams: ((params: Record<string, any>) => void) | undefined; refresh: () => void; }): React.ComponentProps<typeof Table<Commerce.IPurchaseItem>>["columns"] => { const intl = useIntlShort(); const currentGroup = useGroupStore((state) => state.currentGroup); const hubSeller = useSellerStore((state) => state.hubSeller); const isPickUpActivated = hubSeller.config?.pickUpEnabled; return [ { title: "table_column_title_order_number", children: [ { title: "table_column_title_payment_id", render: (_, data) => { if (!data?.paymentId) return "-"; return <MoimAdminLink href={new AdminURL.PaymentShow({ id: data.paymentId }).toString()}>{data?.paymentId}</MoimAdminLink>; }, width: ColumnWidths.md, }, { title: "table_column_title_purchase_id", render: (_, data) => { if (!data?.purchaseId) return "-"; return <MoimAdminLink href={new AdminURL.PurchaseShow({ id: data.purchaseId }).toString()}>{data?.purchaseId}</MoimAdminLink>; }, width: ColumnWidths.md, }, { title: "table_column_title_purchase_item_id", dataIndex: "id", width: ColumnWidths.md, }, ], }, { title: "table_column_title_purchase_date", dataIndex: "createdAt", valueType: "dateTime", width: 150, }, { title: "table_column_title_paid_date", children: [ { title: "table_column_title_paid_date", dataIndex: "paidAt", valueType: "dateTime", width: ColumnWidths.lg, }, { title: "table_column_title_after_paid", render: (_, data) => data.paidAt ? `D+${Math.ceil((new Date().setHours(0, 0, 0, 0) - new Date(data.paidAt).setHours(0, 0, 0, 0)) / (1000 * 60 * 60 * 24))}` : "-", width: ColumnWidths.sm, }, ], }, { title: "table_column_title_preparing_date", children: [ { title: "table_column_title_in_transit_date", dataIndex: "shippedAt", valueType: "dateTime", width: ColumnWidths.lg, }, { title: "table_column_title_after_in_transit", render: (_, data) => data.shippedAt ? `D+${Math.ceil((new Date().setHours(0, 0, 0, 0) - new Date(data.shippedAt).setHours(0, 0, 0, 0)) / (1000 * 60 * 60 * 24))}` : "-", width: ColumnWidths.sm, }, ], }, ...(isPickUpActivated ? [ { title: "table_column_title_visit_date", render: (_: React.ReactNode, data: Commerce.IPurchaseItem) => { return formatDateTime(data.pickUpTime); }, width: ColumnWidths.lg, }, ] : []), { title: "table_column_title_delivery_date", children: [ { title: "table_column_title_payment_times", render: (_, entity) => entity.purchase?.isGuestCheckout || !entity?.purchase?.userId ? ( "-" ) : ( <Link href={`/moim/commerce/orders/payments/list?userIds[]=${entity.purchase.userId}`}> <a onClick={() => { setParams?.({ userIds: [entity.purchase.userId], }); }} > {entity.paidOrder ?? entity.purchase.payment?.order ?? "-"} </a> </Link> ), width: ColumnWidths.lg, }, ...(hubSeller?.config?.guestCheckoutEnabled ? [ { title: "table_column_title_buyer_type", render: (_: React.ReactNode, data: Commerce.IPurchaseItem) => data?.purchase?.isGuestCheckout ? intl("buyer_type_guest") : intl("buyer_type_member"), width: ColumnWidths.lg, }, ] : []), { title: "table_column_title_username", render: (_, data) => data?.purchase?.isGuestCheckout || !data?.purchase?.userId ? ( data?.purchase?.buyerName ?? "-" ) : ( <Link href={`/moim/members/${data?.purchase?.userId}`}> <a>{getUserEntity(data.userId)?.name ?? data?.purchase.username}</a> </Link> ), width: ColumnWidths.lg, }, ...(currentGroup.config.enableWeb3 ? [ { title: "table_column_title_user_main_wallet_address", render: (_: React.ReactNode, entity: Commerce.IPurchaseItem) => getUserEntity(entity.userId)?.metamask, width: ColumnWidths.xxl, }, ] : []), { title: "table_column_title_buyer_name", render: (_, data) => data?.purchase?.buyerName ?? "-", width: ColumnWidths.lg, }, { title: "table_column_title_phone_number", render: (_, data) => `${data?.purchase?.buyerPhoneInfo?.countryCode ?? ""} ${data?.purchase?.buyerPhoneInfo?.nationalNumber ?? ""}`, width: ColumnWidths.lg, }, { title: "table_column_title_email", render: (_, data) => data?.purchase?.buyerEmail ?? "-", width: ColumnWidths.lg, }, ], }, { title: "table_column_title_recipient", render: (_, data) => data?.purchase?.recipientName ?? "-", width: ColumnWidths.lg, }, { title: "table_column_title_product_info", children: [ { title: "table_column_title_product_name", dataIndex: "productName", width: ColumnWidths.xxl, }, { title: "table_column_title_sku", render: (_, data) => data?.snap?.sku ?? "-", width: ColumnWidths.lg, }, { title: "table_column_title_seller_name", render: (_, data) => getSellerEntity(data.sellerId)?.name, width: ColumnWidths.lg, }, ...(hubSeller.config?.brandEnabled ? [ { title: "table_column_title_brand", render: (_: ReactNode, data: Commerce.IPurchaseItem) => data?.snap?.brand?.name ?? "-", width: ColumnWidths.lg, }, ] : []), { title: "table_column_title_shipping_option", render: (_, data) => { const deliveryPolicy = data.deliveryGroup?.policy; if (deliveryPolicy) { return ( <div> <span>{deliveryPolicy.name ?? deliveryPolicy.id}</span> {deliveryPolicy.description && <span>{deliveryPolicy.description}</span>} </div> ); } return "-"; }, width: ColumnWidths.xxl, }, ], }, { title: "table_column_title_order_info", children: [ ...(hubSeller?.config?.backOrderEnabled ? [ { title: "table_column_title_with_backorder", render: (_: React.ReactNode, entity: Commerce.IPurchaseItem) => (entity?.isBackOrder ? "O" : "X"), width: ColumnWidths.lg, }, ] : []), { title: "table_column_title_product_quantity", dataIndex: "productCount", width: ColumnWidths.xs, }, { title: "table_column_title_product_purchase_price", render: (_, data) => ( <PriceWithAdditionalFees currency={data?.purchase?.currency ?? getSellerEntity(data?.purchase?.sellerId)?.currency ?? DEFAULT_CURRENCY} price={data.price * data.quantity} additionalFees={data.additionalFees?.map((fee) => ({ ...fee, amount: fee.amount * data.quantity }))} coinEntities={coinEntities} /> ), width: ColumnWidths.md, }, { title: "table_column_title_purchase_status", width: ColumnWidths.lg, render: (_, data) => { return getPurchaseStatusDisplay(data.displayingStatus, intl, { forItem: true, shippingRequired: data.deliveryType !== "noDelivery", }); }, }, { title: "table_column_title_delivery_id", render: (_, data) => { if (data.deliveryType === "noDelivery") return null; return <TrackingNumberColumn data={data} refresh={refresh} />; }, width: ColumnWidths.xxl, }, ...(hubSeller?.customStatusDefinition ? [ { title: "table_column_title_custom_status", render: (_: React.ReactNode, data: Commerce.IPurchaseItem) => { const customStatus = data.customStatus; if (!customStatus || !hubSeller?.customStatusDefinition) { return <span>-</span>; } return <span>{hubSeller.customStatusDefinition[customStatus]?.[browserLocale()] ?? "-"}</span>; }, width: ColumnWidths.xxl, }, ] : []), { title: "table_column_title_seller_updates", render: (_, data) => { if (!data.customButtons?.length) { return "-"; } const link = data.customButtons[data.customButtons.length - 1]?.link; try { new URL(link); return ( <a href={link} target="_blank"> {link} </a> ); } catch { if (link?.startsWith("/")) { return ( <a href={`${currentGroup.domain}${link}`} target="_blank"> {link} </a> ); } return "-"; } }, width: ColumnWidths.xxl, }, ], }, ]; };
ๆ้ฎๅๅ ็็๏ผ
https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md
๐ bug ๆ่ฟฐ
if table has nested header , hiding nesting columns won't work
๐ท ๅค็ฐๆญฅ้ชค
๐ ๆๆ็ปๆ
๐ป ๅค็ฐไปฃ็
columns looks like this and if there are no nested header, works propably
ยฉ ็ๆฌไฟกๆฏ
๐ ๅ ถไปไฟกๆฏ