From d5c30e14707dfbe21ef3bd27e0ad2e5e2277e0d9 Mon Sep 17 00:00:00 2001 From: volkanceylan Date: Sun, 11 Aug 2024 00:48:12 +0300 Subject: [PATCH] Use jsx-dom for formatters --- .../Grids/CustomLinksInGrid/Index.cshtml | 2 +- .../Grids/InlineActionButtons/Index.cshtml | 2 +- .../Grids/InlineImageInGrid/Index.cshtml | 2 +- ...ksInGridPage.ts => CustomLinksInGridPage.tsx} | 8 ++++---- ...uttonsPage.ts => InlineActionButtonsPage.tsx} | 4 ++-- ...geInGridPage.ts => InlineImageInGridPage.tsx} | 16 ++++++---------- ...istFormatter.ts => EmployeeListFormatter.tsx} | 15 +++++++-------- ...mployeeFormatter.ts => EmployeeFormatter.tsx} | 13 +++++-------- .../Order/{OrderGrid.ts => OrderGrid.tsx} | 14 ++++++-------- ...{ShipperFormatter.ts => ShipperFormatter.tsx} | 9 +++++---- 10 files changed, 38 insertions(+), 47 deletions(-) rename src/Serenity.Demo.BasicSamples/Modules/Grids/CustomLinksInGrid/{CustomLinksInGridPage.ts => CustomLinksInGridPage.tsx} (94%) rename src/Serenity.Demo.BasicSamples/Modules/Grids/InlineActionButtons/{InlineActionButtonsPage.ts => InlineActionButtonsPage.tsx} (91%) rename src/Serenity.Demo.BasicSamples/Modules/Grids/InlineImageInGrid/{InlineImageInGridPage.ts => InlineImageInGridPage.tsx} (78%) rename src/Serenity.Demo.Northwind/Modules/Customer/{EmployeeListFormatter.ts => EmployeeListFormatter.tsx} (66%) rename src/Serenity.Demo.Northwind/Modules/Employee/{EmployeeFormatter.ts => EmployeeFormatter.tsx} (59%) rename src/Serenity.Demo.Northwind/Modules/Order/{OrderGrid.ts => OrderGrid.tsx} (89%) rename src/Serenity.Demo.Northwind/Modules/Shipper/{ShipperFormatter.ts => ShipperFormatter.tsx} (63%) diff --git a/src/Serenity.Demo.BasicSamples/Areas/Serenity.Demo.BasicSamples/Grids/CustomLinksInGrid/Index.cshtml b/src/Serenity.Demo.BasicSamples/Areas/Serenity.Demo.BasicSamples/Grids/CustomLinksInGrid/Index.cshtml index 0409b9cc..d05b80bc 100644 --- a/src/Serenity.Demo.BasicSamples/Areas/Serenity.Demo.BasicSamples/Grids/CustomLinksInGrid/Index.cshtml +++ b/src/Serenity.Demo.BasicSamples/Areas/Serenity.Demo.BasicSamples/Grids/CustomLinksInGrid/Index.cshtml @@ -21,7 +21,7 @@

Source Files: @Html.BasicSamplesSourceFile("Index.cshtml"), - @Html.BasicSamplesSourceFile("CustomLinksInGridPage.ts") + @Html.BasicSamplesSourceFile("CustomLinksInGridPage.tsx")

diff --git a/src/Serenity.Demo.BasicSamples/Areas/Serenity.Demo.BasicSamples/Grids/InlineActionButtons/Index.cshtml b/src/Serenity.Demo.BasicSamples/Areas/Serenity.Demo.BasicSamples/Grids/InlineActionButtons/Index.cshtml index 80fc18bc..830632be 100644 --- a/src/Serenity.Demo.BasicSamples/Areas/Serenity.Demo.BasicSamples/Grids/InlineActionButtons/Index.cshtml +++ b/src/Serenity.Demo.BasicSamples/Areas/Serenity.Demo.BasicSamples/Grids/InlineActionButtons/Index.cshtml @@ -15,7 +15,7 @@

Source Files: @Html.BasicSamplesSourceFile("Index.cshtml"), - @Html.BasicSamplesSourceFile("InlineActionButtonsPage.ts")

+ @Html.BasicSamplesSourceFile("InlineActionButtonsPage.tsx")

diff --git a/src/Serenity.Demo.BasicSamples/Areas/Serenity.Demo.BasicSamples/Grids/InlineImageInGrid/Index.cshtml b/src/Serenity.Demo.BasicSamples/Areas/Serenity.Demo.BasicSamples/Grids/InlineImageInGrid/Index.cshtml index a690fded..b364403c 100644 --- a/src/Serenity.Demo.BasicSamples/Areas/Serenity.Demo.BasicSamples/Grids/InlineImageInGrid/Index.cshtml +++ b/src/Serenity.Demo.BasicSamples/Areas/Serenity.Demo.BasicSamples/Grids/InlineImageInGrid/Index.cshtml @@ -14,7 +14,7 @@

Here is how to show a product image inline in grid.

If you didn't yet, please upload an image for a product for this demonstration to work.

-

Source Files: @Html.BasicSamplesSourceFile("Index.cshtml"), @Html.BasicSamplesSourceFile("InlineImageInGridPage.ts")

+

Source Files: @Html.BasicSamplesSourceFile("Index.cshtml"), @Html.BasicSamplesSourceFile("InlineImageInGridPage.tsx")

diff --git a/src/Serenity.Demo.BasicSamples/Modules/Grids/CustomLinksInGrid/CustomLinksInGridPage.ts b/src/Serenity.Demo.BasicSamples/Modules/Grids/CustomLinksInGrid/CustomLinksInGridPage.tsx similarity index 94% rename from src/Serenity.Demo.BasicSamples/Modules/Grids/CustomLinksInGrid/CustomLinksInGridPage.ts rename to src/Serenity.Demo.BasicSamples/Modules/Grids/CustomLinksInGrid/CustomLinksInGridPage.tsx index a121c34f..a44b7e13 100644 --- a/src/Serenity.Demo.BasicSamples/Modules/Grids/CustomLinksInGrid/CustomLinksInGridPage.ts +++ b/src/Serenity.Demo.BasicSamples/Modules/Grids/CustomLinksInGrid/CustomLinksInGridPage.tsx @@ -15,16 +15,16 @@ export class CustomLinksInGrid extends OrderGrid { var columns = new OrderColumns(super.getColumns()); columns.CustomerCompanyName && (columns.CustomerCompanyName.format = - ctx => `${ctx.escape()}`); + ctx => {ctx.value}); columns.OrderDate && (columns.OrderDate.format = - ctx => `${ctx.escape(formatDate(ctx.value))}`); + ctx => {formatDate(ctx.value)}); columns.EmployeeFullName && (columns.EmployeeFullName.format = - ctx => `${ctx.escape()}`); + ctx => {ctx.value}); columns.ShipCountry && (columns.ShipCountry.format = - ctx => `${ctx.escape()}`); + ctx => {ctx.value}); return columns.valueOf(); } diff --git a/src/Serenity.Demo.BasicSamples/Modules/Grids/InlineActionButtons/InlineActionButtonsPage.ts b/src/Serenity.Demo.BasicSamples/Modules/Grids/InlineActionButtons/InlineActionButtonsPage.tsx similarity index 91% rename from src/Serenity.Demo.BasicSamples/Modules/Grids/InlineActionButtons/InlineActionButtonsPage.ts rename to src/Serenity.Demo.BasicSamples/Modules/Grids/InlineActionButtons/InlineActionButtonsPage.tsx index e874e3f5..8537d325 100644 --- a/src/Serenity.Demo.BasicSamples/Modules/Grids/InlineActionButtons/InlineActionButtonsPage.ts +++ b/src/Serenity.Demo.BasicSamples/Modules/Grids/InlineActionButtons/InlineActionButtonsPage.tsx @@ -17,7 +17,7 @@ export class InlineActionGrid extends CustomerGrid { let inlineAction = (actionKey: string, hint, iconClass: string): Column => ({ name: '', width: 24, - format: _ => ``, + format: () => , minWidth: 24, maxWidth: 24 }) @@ -60,7 +60,7 @@ export class InlineActionGrid extends CustomerGrid { case newOrderAction: { var dlg = new OrderDialog(); this.initDialog(dlg); - dlg.loadEntityAndOpenDialog({ + dlg.loadEntityAndOpenDialog({ CustomerID: item.CustomerID }); } diff --git a/src/Serenity.Demo.BasicSamples/Modules/Grids/InlineImageInGrid/InlineImageInGridPage.ts b/src/Serenity.Demo.BasicSamples/Modules/Grids/InlineImageInGrid/InlineImageInGridPage.tsx similarity index 78% rename from src/Serenity.Demo.BasicSamples/Modules/Grids/InlineImageInGrid/InlineImageInGridPage.ts rename to src/Serenity.Demo.BasicSamples/Modules/Grids/InlineImageInGrid/InlineImageInGridPage.tsx index 93a19d7f..6a7e15b4 100644 --- a/src/Serenity.Demo.BasicSamples/Modules/Grids/InlineImageInGrid/InlineImageInGridPage.ts +++ b/src/Serenity.Demo.BasicSamples/Modules/Grids/InlineImageInGrid/InlineImageInGridPage.tsx @@ -1,7 +1,7 @@ -import { InlineImageInGridColumns } from "../../ServerTypes/Demo"; import { Decorators, EntityGrid, Formatter, IInitializeColumn, gridPageInit, resolveUrl } from "@serenity-is/corelib"; import { ProductDialog, ProductRow, ProductService } from "@serenity-is/demo.northwind"; -import { Column, FormatterContext, GridOptions } from "@serenity-is/sleekgrid"; +import { Column, FormatterContext, FormatterResult, GridOptions } from "@serenity-is/sleekgrid"; +import { InlineImageInGridColumns } from "../../ServerTypes/Demo"; export default () => gridPageInit(InlineImageInGrid); @@ -12,23 +12,19 @@ export class InlineImageFormatter constructor(public readonly props: { fileProperty?: string, thumb?: boolean } = {}) { } - format(ctx: FormatterContext): string { + format(ctx: FormatterContext): FormatterResult { var file = (this.props?.fileProperty ? ctx.item[this.props.fileProperty] : ctx.value) as string; if (!file || !file.length) return ""; - let href = resolveUrl("~/upload/" + file); - if (this.props?.thumb) { var parts = file.split('.'); file = parts.slice(0, parts.length - 1).join('.') + '_t.jpg'; } - let src = resolveUrl('~/upload/' + file); - - return `` + - ``; + return + ; } initializeColumn(column: Column): void { @@ -43,7 +39,7 @@ export class InlineImageFormatter export class InlineImageInGrid

extends EntityGrid { protected getColumnsKey() { return InlineImageInGridColumns.columnsKey; } - protected getDialogType() { return ProductDialog; } + protected getDialogType() { return ProductDialog; } protected getRowDefinition() { return ProductRow; } protected getService() { return ProductService.baseUrl; } diff --git a/src/Serenity.Demo.Northwind/Modules/Customer/EmployeeListFormatter.ts b/src/Serenity.Demo.Northwind/Modules/Customer/EmployeeListFormatter.tsx similarity index 66% rename from src/Serenity.Demo.Northwind/Modules/Customer/EmployeeListFormatter.ts rename to src/Serenity.Demo.Northwind/Modules/Customer/EmployeeListFormatter.tsx index a1a4f95d..c289bf62 100644 --- a/src/Serenity.Demo.Northwind/Modules/Customer/EmployeeListFormatter.ts +++ b/src/Serenity.Demo.Northwind/Modules/Customer/EmployeeListFormatter.tsx @@ -1,6 +1,5 @@ -import { Decorators, Formatter, faIcon } from "@serenity-is/corelib"; -import { Lookup } from "@serenity-is/corelib"; -import { FormatterContext } from "@serenity-is/sleekgrid"; +import { Decorators, Formatter, Lookup, faIcon } from "@serenity-is/corelib"; +import { FormatterContext, FormatterResult } from "@serenity-is/sleekgrid"; import { EmployeeRow } from "../ServerTypes/Demo"; let lookup: Lookup; @@ -9,7 +8,7 @@ let promise: Promise>; @Decorators.registerFormatter('Serenity.Demo.Northwind.EmployeeListFormatter') export class EmployeeListFormatter implements Formatter { - format(ctx: FormatterContext) { + format(ctx: FormatterContext): FormatterResult { let idList = ctx.value as string[]; if (!idList || !idList.length) @@ -17,10 +16,10 @@ export class EmployeeListFormatter implements Formatter { let byId = lookup?.itemById; if (byId) { - return idList.map(x => { + return <>{idList.map(x => { var z = byId[x]; - return ctx.escape(z == null ? x : z.FullName); - }).join(", "); + return z == null ? x : z.FullName; + }).join(", ")}; } promise ??= EmployeeRow.getLookupAsync().then(l => { @@ -34,6 +33,6 @@ export class EmployeeListFormatter implements Formatter { } }).catch(() => promise = null); - return ``; + return (); } } diff --git a/src/Serenity.Demo.Northwind/Modules/Employee/EmployeeFormatter.ts b/src/Serenity.Demo.Northwind/Modules/Employee/EmployeeFormatter.tsx similarity index 59% rename from src/Serenity.Demo.Northwind/Modules/Employee/EmployeeFormatter.ts rename to src/Serenity.Demo.Northwind/Modules/Employee/EmployeeFormatter.tsx index 801f2c02..b16ed1ba 100644 --- a/src/Serenity.Demo.Northwind/Modules/Employee/EmployeeFormatter.ts +++ b/src/Serenity.Demo.Northwind/Modules/Employee/EmployeeFormatter.tsx @@ -1,6 +1,5 @@ -import { Decorators, Formatter, IInitializeColumn, ISlickFormatter, faIcon } from "@serenity-is/corelib"; -import { htmlEncode, isTrimmedEmpty } from "@serenity-is/corelib"; -import { Column, FormatterContext } from "@serenity-is/sleekgrid"; +import { Decorators, Formatter, IInitializeColumn, faIcon, isTrimmedEmpty } from "@serenity-is/corelib"; +import { Column, FormatterContext, FormatterResult } from "@serenity-is/sleekgrid"; import { Gender } from "../ServerTypes/Demo"; @Decorators.registerFormatter('Serenity.Demo.Northwind.EmployeeFormatter', [IInitializeColumn]) @@ -9,14 +8,12 @@ export class EmployeeFormatter implements Formatter { this.props ??= {}; } - format(ctx: FormatterContext) { - let text = ctx.escape(); - + format(ctx: FormatterContext): FormatterResult { if (!this.props.genderProperty || isTrimmedEmpty(ctx.value)) - return text; + return <>{ctx.value} let female = ctx.item[this.props.genderProperty] === Gender.Female; - return `` + text; + return <> {ctx.value}; } public initializeColumn(column: Column) { diff --git a/src/Serenity.Demo.Northwind/Modules/Order/OrderGrid.ts b/src/Serenity.Demo.Northwind/Modules/Order/OrderGrid.tsx similarity index 89% rename from src/Serenity.Demo.Northwind/Modules/Order/OrderGrid.ts rename to src/Serenity.Demo.Northwind/Modules/Order/OrderGrid.tsx index 60613802..d13aa5d3 100644 --- a/src/Serenity.Demo.Northwind/Modules/Order/OrderGrid.ts +++ b/src/Serenity.Demo.Northwind/Modules/Order/OrderGrid.tsx @@ -1,15 +1,13 @@ -import { OrderColumns, OrderListRequest, OrderRow, OrderService, ProductRow } from "../ServerTypes/Demo"; import { Decorators, EntityGrid, EnumEditor, Fluent, LookupEditor, ToolButton, faIcon, toId } from "@serenity-is/corelib"; import { ExcelExportHelper, PdfExportHelper, ReportHelper } from "@serenity-is/extensions"; +import { OrderColumns, OrderListRequest, OrderRow, OrderService, ProductRow } from "../ServerTypes/Demo"; import { OrderDialog } from "./OrderDialog"; -const fld = OrderRow.Fields; - @Decorators.registerClass('Serenity.Demo.Northwind.OrderGrid') @Decorators.filterable() -export class OrderGrid extends EntityGrid { +export class OrderGrid

extends EntityGrid { protected getColumnsKey() { return OrderColumns.columnsKey; } - protected getDialogType() { return OrderDialog; } + protected getDialogType() { return OrderDialog as any; } protected getRowDefinition() { return OrderRow; } protected getService() { return OrderService.baseUrl; } @@ -38,7 +36,7 @@ export class OrderGrid extends EntityGrid { protected createQuickFilters() { super.createQuickFilters(); - this.shippingStateFilter = this.findQuickFilter(EnumEditor, fld.ShippingState); + this.shippingStateFilter = this.findQuickFilter(EnumEditor, OrderRow.Fields.ShippingState); } protected getButtons(): ToolButton[] { @@ -67,7 +65,7 @@ export class OrderGrid extends EntityGrid { field: null, name: '', cssClass: 'align-center', - format: _ => ``, + format: () => , width: 36, minWidth: 36, maxWidth: 36 @@ -103,7 +101,7 @@ export class OrderGrid extends EntityGrid { protected addButtonClick() { var eq = this.view.params.EqualityFilter; - this.editItem({ + this.editItem({ CustomerID: eq ? eq.CustomerID : null }); } diff --git a/src/Serenity.Demo.Northwind/Modules/Shipper/ShipperFormatter.ts b/src/Serenity.Demo.Northwind/Modules/Shipper/ShipperFormatter.tsx similarity index 63% rename from src/Serenity.Demo.Northwind/Modules/Shipper/ShipperFormatter.ts rename to src/Serenity.Demo.Northwind/Modules/Shipper/ShipperFormatter.tsx index 1d477e6b..6ade0b54 100644 --- a/src/Serenity.Demo.Northwind/Modules/Shipper/ShipperFormatter.ts +++ b/src/Serenity.Demo.Northwind/Modules/Shipper/ShipperFormatter.tsx @@ -5,10 +5,11 @@ import { FormatterContext } from "@serenity-is/sleekgrid"; export class ShipperFormatter implements Formatter { format(ctx: FormatterContext) { - if (!ctx.value) - return ctx.escape(); + if (!ctx.value) { + return <>{ctx.value}; + } - return ` ${ctx.escape()}`; + return (<> {ctx.value}); } }