From 28dc8d4d17d428a598cf084e2914b291b85c0b04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Frane=20Poli=C4=87?= <16856471+fPolic@users.noreply.github.com> Date: Wed, 11 Sep 2024 10:12:34 +0200 Subject: [PATCH] feat(dashboard) modal search autofocus (#9038) **What** - autofocus search input on route modal that have tables --- CLOSES CC-132 --- .../data-table/data-table-query/data-table-query.tsx | 9 +++++++-- .../data-table/data-table-search/data-table-search.tsx | 3 +++ .../src/components/table/data-table/data-table.tsx | 2 +- .../api-key-sales-channels-form.tsx | 2 +- .../components/add-campaign-promotions-form.tsx | 2 +- .../edit-category-products-form.tsx | 2 +- .../add-products-to-collection-form.tsx | 2 +- .../components/add-customers-form/add-customers-form.tsx | 2 +- .../add-customers-form/add-customer-groups-form.tsx | 2 +- .../edit-fulfillment-providers-form.tsx | 2 +- .../edit-sales-channels-form.tsx | 2 +- .../edit-sales-channels-form.tsx | 2 +- .../components/add-countries-form/add-countries-form.tsx | 2 +- .../components/create-region-form/create-region-form.tsx | 2 +- .../components/add-products-to-sales-channel-form.tsx | 2 +- .../add-currencies-form/add-currencies-form.tsx | 2 +- .../components/invite-user-form/invite-user-form.tsx | 7 ++++--- 17 files changed, 28 insertions(+), 19 deletions(-) diff --git a/packages/admin/dashboard/src/components/table/data-table/data-table-query/data-table-query.tsx b/packages/admin/dashboard/src/components/table/data-table/data-table-query/data-table-query.tsx index 6cf99ee531378..6a2794198cba7 100644 --- a/packages/admin/dashboard/src/components/table/data-table/data-table-query/data-table-query.tsx +++ b/packages/admin/dashboard/src/components/table/data-table/data-table-query/data-table-query.tsx @@ -4,7 +4,7 @@ import { DataTableOrderBy } from "../data-table-order-by" import { DataTableSearch } from "../data-table-search" export interface DataTableQueryProps { - search?: boolean + search?: boolean | "autofocus" orderBy?: (string | number)[] filters?: Filter[] prefix?: string @@ -25,7 +25,12 @@ export const DataTableQuery = ({ )}
- {search && } + {search && ( + + )} {orderBy && }
diff --git a/packages/admin/dashboard/src/components/table/data-table/data-table-search/data-table-search.tsx b/packages/admin/dashboard/src/components/table/data-table/data-table-search/data-table-search.tsx index 763aa1dadd238..264f1ec795e1f 100644 --- a/packages/admin/dashboard/src/components/table/data-table/data-table-search/data-table-search.tsx +++ b/packages/admin/dashboard/src/components/table/data-table/data-table-search/data-table-search.tsx @@ -8,11 +8,13 @@ import { useSelectedParams } from "../hooks" type DataTableSearchProps = { placeholder?: string prefix?: string + autofocus?: boolean } export const DataTableSearch = ({ placeholder, prefix, + autofocus, }: DataTableSearchProps) => { const { t } = useTranslation() const placeholderText = placeholder || t("general.search") @@ -50,6 +52,7 @@ export const DataTableSearch = ({ name="q" type="search" size="small" + autoFocus={autofocus} defaultValue={query?.[0] || undefined} onChange={debouncedOnChange} placeholder={placeholderText} diff --git a/packages/admin/dashboard/src/components/table/data-table/data-table.tsx b/packages/admin/dashboard/src/components/table/data-table/data-table.tsx index 42ef4e93d8315..31ba698e52e76 100644 --- a/packages/admin/dashboard/src/components/table/data-table/data-table.tsx +++ b/packages/admin/dashboard/src/components/table/data-table/data-table.tsx @@ -41,7 +41,7 @@ export const DataTable = ({ diff --git a/packages/admin/dashboard/src/routes/collections/collection-add-products/components/add-products-to-collection-form/add-products-to-collection-form.tsx b/packages/admin/dashboard/src/routes/collections/collection-add-products/components/add-products-to-collection-form/add-products-to-collection-form.tsx index abb0039b0f16f..dea688b9b735f 100644 --- a/packages/admin/dashboard/src/routes/collections/collection-add-products/components/add-products-to-collection-form/add-products-to-collection-form.tsx +++ b/packages/admin/dashboard/src/routes/collections/collection-add-products/components/add-products-to-collection-form/add-products-to-collection-form.tsx @@ -179,7 +179,7 @@ export const AddProductsToCollectionForm = ({ isLoading={isLoading} layout="fill" pagination - search + search="autofocus" /> diff --git a/packages/admin/dashboard/src/routes/customer-groups/customer-group-add-customers/components/add-customers-form/add-customers-form.tsx b/packages/admin/dashboard/src/routes/customer-groups/customer-group-add-customers/components/add-customers-form/add-customers-form.tsx index aa1580422a7a8..e6fd5ad82a184 100644 --- a/packages/admin/dashboard/src/routes/customer-groups/customer-group-add-customers/components/add-customers-form/add-customers-form.tsx +++ b/packages/admin/dashboard/src/routes/customer-groups/customer-group-add-customers/components/add-customers-form/add-customers-form.tsx @@ -168,7 +168,7 @@ export const AddCustomersForm = ({ ]} isLoading={isLoading} layout="fill" - search + search="autofocus" queryObject={raw} noRecords={{ message: t("customerGroups.customers.add.list.noRecordsMessage"), diff --git a/packages/admin/dashboard/src/routes/customers/customers-add-customer-group/components/add-customers-form/add-customer-groups-form.tsx b/packages/admin/dashboard/src/routes/customers/customers-add-customer-group/components/add-customers-form/add-customer-groups-form.tsx index 33cf90e38bece..cbc53a95f85de 100644 --- a/packages/admin/dashboard/src/routes/customers/customers-add-customer-group/components/add-customers-form/add-customer-groups-form.tsx +++ b/packages/admin/dashboard/src/routes/customers/customers-add-customer-group/components/add-customers-form/add-customer-groups-form.tsx @@ -180,7 +180,7 @@ export const AddCustomerGroupsForm = ({ orderBy={["name", "created_at", "updated_at"]} isLoading={isLoading} layout="fill" - search + search="autofocus" queryObject={raw} noRecords={{ message: t("customers.groups.add.list.noRecordsMessage"), diff --git a/packages/admin/dashboard/src/routes/locations/location-fulfillment-providers/components/edit-fulfillment-providers-form/edit-fulfillment-providers-form.tsx b/packages/admin/dashboard/src/routes/locations/location-fulfillment-providers/components/edit-fulfillment-providers-form/edit-fulfillment-providers-form.tsx index 2afa67ebf1bfb..a81a0567e5d5a 100644 --- a/packages/admin/dashboard/src/routes/locations/location-fulfillment-providers/components/edit-fulfillment-providers-form/edit-fulfillment-providers-form.tsx +++ b/packages/admin/dashboard/src/routes/locations/location-fulfillment-providers/components/edit-fulfillment-providers-form/edit-fulfillment-providers-form.tsx @@ -130,7 +130,7 @@ export const LocationEditFulfillmentProvidersForm = ({ isLoading={isLoading} count={count} filters={filters} - search + search="autofocus" pagination orderBy={["id", "created_at", "updated_at"]} queryObject={raw} diff --git a/packages/admin/dashboard/src/routes/locations/location-sales-channels/components/edit-sales-channels-form/edit-sales-channels-form.tsx b/packages/admin/dashboard/src/routes/locations/location-sales-channels/components/edit-sales-channels-form/edit-sales-channels-form.tsx index 2b0f60b84c242..7c9c00800cf34 100644 --- a/packages/admin/dashboard/src/routes/locations/location-sales-channels/components/edit-sales-channels-form/edit-sales-channels-form.tsx +++ b/packages/admin/dashboard/src/routes/locations/location-sales-channels/components/edit-sales-channels-form/edit-sales-channels-form.tsx @@ -144,7 +144,7 @@ export const LocationEditSalesChannelsForm = ({ isLoading={isLoading} count={count} filters={filters} - search + search="autofocus" pagination orderBy={["name", "created_at", "updated_at"]} queryObject={raw} diff --git a/packages/admin/dashboard/src/routes/products/product-sales-channels/components/edit-sales-channels-form/edit-sales-channels-form.tsx b/packages/admin/dashboard/src/routes/products/product-sales-channels/components/edit-sales-channels-form/edit-sales-channels-form.tsx index c37388b74d9fc..8d344a7c9fc74 100644 --- a/packages/admin/dashboard/src/routes/products/product-sales-channels/components/edit-sales-channels-form/edit-sales-channels-form.tsx +++ b/packages/admin/dashboard/src/routes/products/product-sales-channels/components/edit-sales-channels-form/edit-sales-channels-form.tsx @@ -140,7 +140,7 @@ export const EditSalesChannelsForm = ({ isLoading={isLoading} count={count} filters={filters} - search + search="autofocus" pagination orderBy={["name", "created_at", "updated_at"]} queryObject={raw} diff --git a/packages/admin/dashboard/src/routes/regions/region-add-countries/components/add-countries-form/add-countries-form.tsx b/packages/admin/dashboard/src/routes/regions/region-add-countries/components/add-countries-form/add-countries-form.tsx index 94bad4e138d15..01723c2a6416c 100644 --- a/packages/admin/dashboard/src/routes/regions/region-add-countries/components/add-countries-form/add-countries-form.tsx +++ b/packages/admin/dashboard/src/routes/regions/region-add-countries/components/add-countries-form/add-countries-form.tsx @@ -146,7 +146,7 @@ export const AddCountriesForm = ({ region }: AddCountriesFormProps) => { columns={columns} pageSize={PAGE_SIZE} count={count} - search + search="autofocus" pagination layout="fill" orderBy={["name", "code"]} diff --git a/packages/admin/dashboard/src/routes/regions/region-create/components/create-region-form/create-region-form.tsx b/packages/admin/dashboard/src/routes/regions/region-create/components/create-region-form/create-region-form.tsx index 4a844486cce71..f62819758e7ca 100644 --- a/packages/admin/dashboard/src/routes/regions/region-create/components/create-region-form/create-region-form.tsx +++ b/packages/admin/dashboard/src/routes/regions/region-create/components/create-region-form/create-region-form.tsx @@ -419,7 +419,7 @@ export const CreateRegionForm = ({ pageSize={PAGE_SIZE} orderBy={["name", "code"]} pagination - search + search="autofocus" layout="fill" queryObject={raw} prefix={PREFIX} diff --git a/packages/admin/dashboard/src/routes/sales-channels/sales-channel-add-products/components/add-products-to-sales-channel-form.tsx b/packages/admin/dashboard/src/routes/sales-channels/sales-channel-add-products/components/add-products-to-sales-channel-form.tsx index 9089b05be093b..3ba6e53b36b69 100644 --- a/packages/admin/dashboard/src/routes/sales-channels/sales-channel-add-products/components/add-products-to-sales-channel-form.tsx +++ b/packages/admin/dashboard/src/routes/sales-channels/sales-channel-add-products/components/add-products-to-sales-channel-form.tsx @@ -152,7 +152,7 @@ export const AddProductsToSalesChannelForm = ({ queryObject={raw} layout="fill" pagination - search + search="autofocus" noRecords={{ message: t("salesChannels.products.add.list.noRecordsMessage"), }} diff --git a/packages/admin/dashboard/src/routes/store/store-add-currencies/components/add-currencies-form/add-currencies-form.tsx b/packages/admin/dashboard/src/routes/store/store-add-currencies/components/add-currencies-form/add-currencies-form.tsx index 5d46cee4156c7..daab01fb8a559 100644 --- a/packages/admin/dashboard/src/routes/store/store-add-currencies/components/add-currencies-form/add-currencies-form.tsx +++ b/packages/admin/dashboard/src/routes/store/store-add-currencies/components/add-currencies-form/add-currencies-form.tsx @@ -199,7 +199,7 @@ export const AddCurrenciesForm = ({ columns={columns} layout="fill" pagination - search + search="autofocus" prefix={PREFIX} orderBy={["code", "name"]} isLoading={isLoading} diff --git a/packages/admin/dashboard/src/routes/users/user-invite/components/invite-user-form/invite-user-form.tsx b/packages/admin/dashboard/src/routes/users/user-invite/components/invite-user-form/invite-user-form.tsx index 731482be9d529..f1d055a1cab2e 100644 --- a/packages/admin/dashboard/src/routes/users/user-invite/components/invite-user-form/invite-user-form.tsx +++ b/packages/admin/dashboard/src/routes/users/user-invite/components/invite-user-form/invite-user-form.tsx @@ -39,8 +39,9 @@ const InviteUserSchema = zod.object({ const PAGE_SIZE = 10 const PREFIX = "usr_invite" -const INVITE_URL = `${window.location.origin}${__BASE__ === "/" ? "" : __BASE__}/invite?token=` - +const INVITE_URL = `${window.location.origin}${ + __BASE__ === "/" ? "" : __BASE__ +}/invite?token=` export const InviteUserForm = () => { const { t } = useTranslation() @@ -163,7 +164,7 @@ export const InviteUserForm = () => { pageSize={PAGE_SIZE} prefix={PREFIX} pagination - search + search="autofocus" isLoading={isLoading} queryObject={raw} orderBy={["email", "created_at", "updated_at"]}