From b0e001feddcea0d34b59e436bdf650802702c816 Mon Sep 17 00:00:00 2001 From: foxx-tech Date: Wed, 26 Nov 2025 13:30:47 +0100 Subject: [PATCH 1/2] feat: updated the UI to enable editing of provider URLs --- ui/src/components/table/ProviderTable.jsx | 6 +- ui/src/views/jobs/mutation/JobMutation.jsx | 18 +++- .../components/provider/ProviderMutator.jsx | 93 +++++++++++++------ 3 files changed, 87 insertions(+), 30 deletions(-) diff --git a/ui/src/components/table/ProviderTable.jsx b/ui/src/components/table/ProviderTable.jsx index 4e14b8e..efe1d46 100644 --- a/ui/src/components/table/ProviderTable.jsx +++ b/ui/src/components/table/ProviderTable.jsx @@ -1,9 +1,9 @@ import React from 'react'; import { Empty, Table, Button } from '@douyinfe/semi-ui'; -import { IconDelete } from '@douyinfe/semi-icons'; +import { IconDelete, IconEdit } from '@douyinfe/semi-icons'; -export default function ProviderTable({ providerData = [], onRemove } = {}) { +export default function ProviderTable({ providerData = [], onRemove, onEdit } = {}) { return ( { return (
+
); diff --git a/ui/src/views/jobs/mutation/JobMutation.jsx b/ui/src/views/jobs/mutation/JobMutation.jsx index faff37f..773e775 100644 --- a/ui/src/views/jobs/mutation/JobMutation.jsx +++ b/ui/src/views/jobs/mutation/JobMutation.jsx @@ -34,6 +34,7 @@ export default function JobMutator() { const defaultNotificationAdapter = jobToBeEdit?.notificationAdapter || []; const defaultEnabled = jobToBeEdit?.enabled ?? true; + const [providerToEdit, setProviderToEdit] = useState(null); const [providerCreationVisible, setProviderCreationVisibility] = useState(false); const [notificationCreationVisible, setNotificationCreationVisibility] = useState(false); const [editNotificationAdapter, setEditNotificationAdapter] = useState(null); @@ -50,6 +51,12 @@ export default function JobMutator() { return Boolean(notificationAdapterData.length && providerData.length && name); }; + const handleProviderEdit = (data) => { + setProviderData( + providerData.map((provider) => (provider.url === data.oldProviderToEdit.url ? data.newData : provider)), + ); + }; + const mutateJob = async () => { try { await xhrPost('/api/jobs', { @@ -78,6 +85,8 @@ export default function JobMutator() { onData={(data) => { setProviderData([...providerData, data]); }} + onEditData={handleProviderEdit} + providerToEdit={providerToEdit} /> {notificationCreationVisible && ( @@ -127,7 +136,10 @@ export default function JobMutator() { type="primary" icon={} className="jobMutation__newButton" - onClick={() => setProviderCreationVisibility(true)} + onClick={() => { + setProviderToEdit(null); + setProviderCreationVisibility(true); + }} > Add new Provider @@ -137,6 +149,10 @@ export default function JobMutator() { onRemove={(providerUrl) => { setProviderData(providerData.filter((provider) => provider.url !== providerUrl)); }} + onEdit={(provider) => { + setProviderCreationVisibility(true); + setProviderToEdit(provider); + }} /> diff --git a/ui/src/views/jobs/mutation/components/provider/ProviderMutator.jsx b/ui/src/views/jobs/mutation/components/provider/ProviderMutator.jsx index 14d41f6..5f450b9 100644 --- a/ui/src/views/jobs/mutation/components/provider/ProviderMutator.jsx +++ b/ui/src/views/jobs/mutation/components/provider/ProviderMutator.jsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { Banner, Modal, Select, Input } from '@douyinfe/semi-ui'; import { transform } from '../../../../../services/transformer/providerTransformer'; @@ -17,12 +17,32 @@ const sortProvider = (a, b) => { return 0; }; -export default function ProviderMutator({ onVisibilityChanged, visible = false, onData } = {}) { +const returnOriginalSelectedProvider = (providerToEdit, provider) => { + return provider.find((pro) => pro.id === providerToEdit.id); +}; + +export default function ProviderMutator({ + onVisibilityChanged, + visible = false, + onData, + onEditData, + providerToEdit, +} = {}) { const provider = useSelector((state) => state.provider); const [selectedProvider, setSelectedProvider] = useState(null); const [providerUrl, setProviderUrl] = useState(null); const [validationMessage, setValidationMessage] = useState(null); + useEffect(() => { + if (providerToEdit) { + setSelectedProvider(returnOriginalSelectedProvider(providerToEdit, provider)); + setProviderUrl(providerToEdit.url); + } else { + setSelectedProvider(null); + setProviderUrl(null); + } + }, [providerToEdit, visible]); + const width = useScreenWidth(); const isMobile = width <= 850; @@ -46,13 +66,24 @@ export default function ProviderMutator({ onVisibilityChanged, visible = false, if (doStore) { const validationResult = validate(); if (validationResult == null) { - onData( - transform({ - url: providerUrl, - id: selectedProvider.id, - name: selectedProvider.name, - }), - ); + if (providerToEdit != null) { + onEditData({ + newData: transform({ + url: providerUrl, + id: selectedProvider.id, + name: selectedProvider.name, + }), + oldProviderToEdit: providerToEdit, + }); + } else { + onData( + transform({ + url: providerUrl, + id: selectedProvider.id, + name: selectedProvider.name, + }), + ); + } setProviderUrl(null); setSelectedProvider(null); onVisibilityChanged(false); @@ -68,7 +99,7 @@ export default function ProviderMutator({ onVisibilityChanged, visible = false, return ( onSubmit(true)} onCancel={() => onSubmit(false)} @@ -85,19 +116,26 @@ export default function ProviderMutator({ onVisibilityChanged, visible = false, description={validationMessage} /> )} - -

- Provider are the of Fredy. We're supporting multiple Provider - such as Immowelt, Kalaydo etc. Select a provider from the list below. -
- Fredy will then open the provider's url in a new tab. -

-

- You will need to configure your search parameter like you would do when you do a regular search on the - provider's website. -
- When the search results are shown on the website, copy the url and paste it into the textfield below. -

+ {providerToEdit != null ? ( +

+ You can now edit the {providerToEdit.name} provider's URL in the input field below. +

+ ) : ( + <> +

+ Provider are the of Fredy. We're supporting multiple Provider + such as Immowelt, Kalaydo etc. Select a provider from the list below. +
+ Fredy will then open the provider's url in a new tab. +

+

+ You will need to configure your search parameter like you would do when you do a regular search on the + provider's website. +
+ When the search results are shown on the website, copy the url and paste it into the textfield below. +

+ + )} { return { @@ -131,7 +170,6 @@ export default function ProviderMutator({ onVisibilityChanged, visible = false, onChange={(value) => { const selectedProvider = provider.find((pro) => pro.id === value); setSelectedProvider(selectedProvider); - window.open(selectedProvider.baseUrl); }} /> @@ -139,10 +177,11 @@ export default function ProviderMutator({ onVisibilityChanged, visible = false,
{ + value={providerUrl} + onInput={(e) => { setProviderUrl(e.target.value); }} /> From d7fc0a0a3a1f6ac54f2f33cea05362b98b00b991 Mon Sep 17 00:00:00 2001 From: foxx-tech Date: Wed, 26 Nov 2025 15:01:26 +0100 Subject: [PATCH 2/2] Fix: removed unnecessary brackets from earlier changes --- .../jobs/mutation/components/provider/ProviderMutator.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/src/views/jobs/mutation/components/provider/ProviderMutator.jsx b/ui/src/views/jobs/mutation/components/provider/ProviderMutator.jsx index 5f450b9..f286f98 100644 --- a/ui/src/views/jobs/mutation/components/provider/ProviderMutator.jsx +++ b/ui/src/views/jobs/mutation/components/provider/ProviderMutator.jsx @@ -153,7 +153,7 @@ export default function ProviderMutator({