Refactor ChannelDetail component to improve template copying functionality and update translations. Change variable names for clarity, ensuring the source channel is correctly referenced when copying templates. Enhance user confirmation prompts and update related UI elements for better user experience.

2026-07-26 20:17:45 +03:00
parent 9c865e1faa
commit f36dbfa9cb
3 changed files with 337 additions and 321 deletions
@@ -58,7 +58,7 @@ export function ChannelDetail({ channelId }: { channelId: string }) {
  const [copyTargets, setCopyTargets] = useState<number[]>([])
  const [applyOpen, setApplyOpen] = useState(false)
  const [traceEntryId, setTraceEntryId] = useState<string | null>(null)
-  const [copyToChannel, setCopyToChannel] = useState('')
+  const [copyFromChannel, setCopyFromChannel] = useState('')
  const [tab, setTab] = useState<ChannelTab>('settings')

  const { data: channel, isLoading } = useQuery({
@@ -163,9 +163,9 @@ export function ChannelDetail({ channelId }: { channelId: string }) {
  })

  const copyTemplateMutation = useMutation({
-    mutationFn: (targetChannelId: string) => copyTemplateTo(channelId, targetChannelId),
+    mutationFn: (sourceChannelId: string) => copyTemplateTo(sourceChannelId, channelId),
    onSuccess: (result) => {
-      setCopyToChannel('')
+      setCopyFromChannel('')
      toast.success(
        t('admin.channels.templateCopied', { layers: result.layers, slots: result.slots }),
      )
@@ -345,10 +345,10 @@ export function ChannelDetail({ channelId }: { channelId: string }) {
                </span>
                <select
                  className="h-8 rounded-md border border-border bg-transparent px-2 text-sm"
-                  value={copyToChannel}
-                  onChange={(e) => setCopyToChannel(e.target.value)}
+                  value={copyFromChannel}
+                  onChange={(e) => setCopyFromChannel(e.target.value)}
                >
-                  <option value="">{t('admin.channels.pickTargetChannel')}</option>
+                  <option value="">{t('admin.channels.pickSourceChannel')}</option>
                  {(channels ?? [])
                    .filter((c) => c.id !== channelId)
                    .map((c) => (
@@ -360,10 +360,14 @@ export function ChannelDetail({ channelId }: { channelId: string }) {
                <Button
                  size="sm"
                  variant="outline"
-                  disabled={!copyToChannel || copyTemplateMutation.isPending}
-                  onClick={() => copyTemplateMutation.mutate(copyToChannel)}
+                  disabled={!copyFromChannel || copyTemplateMutation.isPending}
+                  onClick={() => {
+                    // Замена своей сетки — необратимая правка, поэтому спрашиваем перед ней.
+                    if (!window.confirm(t('admin.channels.copyTemplateConfirm'))) return
+                    copyTemplateMutation.mutate(copyFromChannel)
+                  }}
                >
-                  {t('admin.channels.copy')}
+                  {t('admin.channels.copyHere')}
                </Button>
                <p className="text-xs text-muted-foreground">
                  {t('admin.channels.copyTemplateHint')}