juzhiyuan commented on code in PR #3002:
URL: https://github.com/apache/apisix-dashboard/pull/3002#discussion_r2063023008
##########
src/components/form-slice/FormItemPlugins/index.tsx:
##########
@@ -0,0 +1,97 @@
+import { genControllerProps } from '@/components/form/util';
+import { Group, InputWrapper, type InputWrapperProps } from '@mantine/core';
+import {
+ useController,
+ type FieldValues,
+ type UseControllerProps,
+} from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useState } from 'react';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { getPluginsListQueryOptions } from './req';
+import { PluginCardList, PluginCardListSearch } from './PluginCardList';
+import { SelectPluginsDrawer } from './SelectPluginsDrawer';
+import { useMount } from 'react-use';
+import { difference } from 'rambdax';
+import type { PluginConfig } from './UpdatePluginDrawer';
+import { observer, useLocalObservable } from 'mobx-react-lite';
+
+type FormItemPluginsProps<T extends FieldValues> = InputWrapperProps &
+ UseControllerProps<T> & {
+ onChange?: (value: Record<string, unknown>) => void;
+ };
+
+const FormItemPluginsCore = <T extends FieldValues>(
+ props: FormItemPluginsProps<T>
+) => {
+ const { controllerProps, restProps } = genControllerProps(props, {});
+ const { t } = useTranslation();
+
+ const {
+ field: { value: rawObject, onChange: fOnChange, name: fName },
+ fieldState,
+ } = useController<T>(controllerProps);
+
+ const pluginsListReq = useSuspenseQuery(getPluginsListQueryOptions());
+ const [search, setSearch] = useState('');
+ const pluginsOb = useLocalObservable(() => ({
+ __map: new Map<string, object>(),
+ init(obj: Record<string, object>) {
+ this.__map = new Map(Object.entries(obj));
+ },
+ set(name: string, config: object) {
+ this.__map.set(name, config);
+ this.save();
+ },
+ delete(name: string) {
+ this.__map.delete(name);
+ this.save();
+ },
+ get selected() {
+ return Array.from(this.__map.keys());
+ },
+ get unSelected() {
+ return difference(pluginsListReq.data, this.selected);
+ },
+ save() {
+ const obj = Object.fromEntries(this.__map);
+ fOnChange(obj);
+ },
+ }));
+
+ useMount(() => {
+ pluginsOb.init(rawObject);
+ });
+
+ const handleSave = (props: PluginConfig) => {
+ const { name, config } = props;
+ pluginsOb.set(name, config);
+ };
+
+ return (
+ <InputWrapper
+ label={t('form.plugins.label')}
+ error={fieldState.error?.message}
+ {...restProps}
+ >
+ <input name={fName} type="hidden" />
+ <Group>
+ <PluginCardListSearch search={search} setSearch={setSearch} />
+ <SelectPluginsDrawer
+ plugins={pluginsOb.unSelected}
+ onSave={handleSave}
+ />
+ </Group>
+ <PluginCardList
+ mode="edit"
+ placeholder={t('form.plugins.searchForSelectedPlugins')}
+ mah="60vh"
+ search={search}
+ plugins={pluginsOb.selected}
+ onDelete={pluginsOb.delete}
+ />
Review Comment:
Just noticed that `onEdit` is missing here. Any plans to support this in the
next PR?
<img width="1726" alt="image"
src="https://github.com/user-attachments/assets/064a8173-2d9d-411b-a87e-66299102896c";
/>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscr...@apisix.apache.org
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
