Add restore functionality for template management and enhance related components

Implemented a new endpoint for restoring templates to their last applied state, allowing users to revert changes made since the last application. Updated the ScheduleTemplate class to include a snapshot of the last applied state, enabling rollback capabilities. Enhanced the frontend with a restore button in the ChannelDetail component, providing users with a confirmation prompt before executing the restore action. Localization updates were made to support new UI strings in both English and Russian, improving the overall user experience in template management.
2026-07-27 08:43:53 +03:00
parent a302750de6
commit 0fd4e762f4
21 changed files with 2227 additions and 133 deletions
@@ -1,6 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { Link } from '@tanstack/react-router'
-import { ChevronLeft, Send } from 'lucide-react'
+import { ChevronLeft, Send, Undo2 } from 'lucide-react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { listAllMedia } from '@/features/admin/media/api'
@@ -11,7 +11,13 @@ import { Badge } from '@/shared/ui/badge'
 import { Button } from '@/shared/ui/button'
 import { Card, CardContent } from '@/shared/ui/card'
 import { toast } from '@/shared/ui/toast-store'
-import { applyChannelTemplate, getChannel, getChannelTemplate, getSchedule } from './api'
+import {
+  applyChannelTemplate,
+  getChannel,
+  getChannelTemplate,
+  getSchedule,
+  restoreChannelTemplate,
+} from './api'
 import { ApplyDialog } from './components/ApplyDialog'
 import { BumperCard } from './components/BumperCard'
 import { EntryTraceDialog } from './components/EntryTraceDialog'
@@ -70,6 +76,18 @@ export function ChannelDetail({ channelId }: Readonly<{ channelId: string }>) {
    onError,
  })

+  const restoreMutation = useMutation({
+    mutationFn: () => restoreChannelTemplate(channelId),
+    onSuccess: (result) => {
+      toast.success(t('admin.channels.restored', { count: result.slots }))
+      // Ссылка на удалённую группу или стык вернуться не может — говорим об этом прямо.
+      if (result.droppedRefs > 0)
+        toast.error(t('admin.channels.restoreDropped', { count: result.droppedRefs }))
+      invalidate()
+    },
+    onError,
+  })
+
  if (isLoading || !channel) return <p className="text-muted-foreground">{t('common.loading')}</p>

  return (
@@ -89,13 +107,31 @@ export function ChannelDetail({ channelId }: Readonly<{ channelId: string }>) {
        </div>
      </div>

-      {/* Правка правил эфира не двигает — применение отдельной кнопкой. */}
+      {/* Правка правил эфира не двигает — применение отдельной кнопкой. Рядом откат: правки
+          сетки правятся на месте, и без этой кнопки вернуть «как в эфире» было бы нечем. */}
      {template?.hasPendingChanges && (
        <div className="flex flex-wrap items-center justify-between gap-3 rounded-md border border-amber-500/50 bg-amber-500/10 px-4 py-2 text-sm">
          <span>{t('admin.channels.pendingChanges')}</span>
-          <Button size="sm" disabled={applyMutation.isPending} onClick={() => setApplyOpen(true)}>
-            <Send className="h-4 w-4" /> {t('admin.channels.apply')}
-          </Button>
+          <div className="flex flex-wrap items-center gap-2">
+            {/* Кнопки отката нет, пока сетку ни разу не применяли: возвращаться некуда. */}
+            {template.canRestore && (
+              <Button
+                size="sm"
+                variant="outline"
+                disabled={restoreMutation.isPending}
+                onClick={() => {
+                  // Откат необратим — он стирает всё, сделанное с последнего применения.
+                  if (!window.confirm(t('admin.channels.restoreConfirm'))) return
+                  restoreMutation.mutate()
+                }}
+              >
+                <Undo2 className="h-4 w-4" /> {t('admin.channels.restore')}
+              </Button>
+            )}
+            <Button size="sm" disabled={applyMutation.isPending} onClick={() => setApplyOpen(true)}>
+              <Send className="h-4 w-4" /> {t('admin.channels.apply')}
+            </Button>
+          </div>
        </div>
      )}

@@ -20,6 +20,7 @@ import type {
  JunctionTemplateDto,
  LayerApplicability,
  PlanningRules,
+  RestoreTemplateResultDto,
  ScheduleDiffDto,
  ScheduleEntryDto,
  SchedulePreviewDto,
@@ -84,6 +85,16 @@ export function applyChannelTemplate(channelId: string) {
  })
 }

+/**
+ * Откат правок сетки к состоянию, по которому идёт эфир: восстанавливает слои, слоты и правила
+ * из снимка последнего применения. Ленту не трогает — она и так по этому состоянию.
+ */
+export function restoreChannelTemplate(channelId: string) {
+  return apiRequest<RestoreTemplateResultDto>(`/admin/channels/${channelId}/template/restore`, {
+    method: 'POST',
+  })
+}
+
 /** Проверки сетки по правилам — считаются по шаблону, без прогона генератора. */
 export function getTemplateIssues(channelId: string) {
  return apiRequest<TemplateIssueDto[]>(`/admin/channels/${channelId}/template/issues`)
@@ -120,37 +120,35 @@ export function SlotInspector({
    // Отдельным окном, а не панелью под сеткой: форма длинная, и раньше она уезжала за нижний край,
    // а сетка — то, с чем её сверяют, — уходила из виду.
    <Dialog open onOpenChange={(next) => !next && onClose()}>
-      <DialogContent className="max-w-2xl">
+      <DialogContent className="flex max-h-[90vh] w-[calc(100%-2rem)] max-w-4xl flex-col">
        <DialogHeader>
          <DialogTitle>
            {draft.slot ? t('admin.channels.editSlot') : t('admin.channels.newSlot')}
          </DialogTitle>
        </DialogHeader>

-        <div className="flex max-h-[65vh] flex-col gap-3 overflow-y-auto pr-1 text-sm">
-          <div className="flex flex-col gap-1.5">
+        <div className="grid min-h-0 flex-1 gap-3 overflow-y-auto pr-1 text-sm sm:grid-cols-2">
+          <div className="flex flex-col gap-1.5 sm:col-span-2">
            <Label>{t('admin.channels.slotTitle')}</Label>
            <Input value={body.title} onChange={(e) => patch({ title: e.target.value })} />
          </div>

-          <div className="grid grid-cols-2 gap-2">
-            <div className="flex flex-col gap-1.5">
-              <Label>{t('admin.channels.slotStart')}</Label>
-              <Input
-                type="time"
-                value={body.targetStart.slice(0, 5)}
-                onChange={(e) => patch({ targetStart: `${e.target.value}:00` })}
-              />
-            </div>
-            <div className="flex flex-col gap-1.5">
-              <Label>{t('admin.channels.slotDuration')}</Label>
-              <Input
-                type="number"
-                min={1}
-                value={body.targetDurationMinutes}
-                onChange={(e) => patch({ targetDurationMinutes: Number(e.target.value) })}
-              />
-            </div>
+          <div className="flex flex-col gap-1.5">
+            <Label>{t('admin.channels.slotStart')}</Label>
+            <Input
+              type="time"
+              value={body.targetStart.slice(0, 5)}
+              onChange={(e) => patch({ targetStart: `${e.target.value}:00` })}
+            />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <Label>{t('admin.channels.slotDuration')}</Label>
+            <Input
+              type="number"
+              min={1}
+              value={body.targetDurationMinutes}
+              onChange={(e) => patch({ targetDurationMinutes: Number(e.target.value) })}
+            />
          </div>

          <div className="flex flex-col gap-1.5">
@@ -171,49 +169,47 @@ export function SlotInspector({
            </select>
          </div>

-          <div className="grid grid-cols-2 gap-2">
-            <div className="flex flex-col gap-1.5">
-              <Label>{t('admin.channels.daypart')}</Label>
-              <select
-                className="h-9 rounded-md border border-border bg-transparent px-2"
-                value={body.daypart}
-                onChange={(e) => patch({ daypart: e.target.value as Daypart })}
-              >
-                {DAYPARTS.map((value) => (
-                  <option key={value} value={value}>
-                    {t(`admin.channels.dayparts.${value}`)}
-                  </option>
-                ))}
-              </select>
-            </div>
-            <div className="flex flex-col gap-1.5">
-              <Label>{t('admin.channels.slotKind')}</Label>
-              <select
-                className="h-9 rounded-md border border-border bg-transparent px-2"
-                value={body.slotKind}
-                onChange={(e) => {
-                  const slotKind = e.target.value as SlotKind
-                  patch({
-                    slotKind,
-                    // Повтору нужен источник, конец вещания не берёт контент вовсе.
-                    repeatSource:
-                      slotKind === 'Repeat'
-                        ? (body.repeatSource ?? {
-                            daysAgo: 1,
-                            time: '20:00:00',
-                            durationMinutes: 90,
-                          })
-                        : null,
-                  })
-                }}
-              >
-                {SLOT_KINDS.map((value) => (
-                  <option key={value} value={value}>
-                    {t(`admin.channels.slotKinds.${value}`)}
-                  </option>
-                ))}
-              </select>
-            </div>
+          <div className="flex flex-col gap-1.5">
+            <Label>{t('admin.channels.daypart')}</Label>
+            <select
+              className="h-9 rounded-md border border-border bg-transparent px-2"
+              value={body.daypart}
+              onChange={(e) => patch({ daypart: e.target.value as Daypart })}
+            >
+              {DAYPARTS.map((value) => (
+                <option key={value} value={value}>
+                  {t(`admin.channels.dayparts.${value}`)}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <Label>{t('admin.channels.slotKind')}</Label>
+            <select
+              className="h-9 rounded-md border border-border bg-transparent px-2"
+              value={body.slotKind}
+              onChange={(e) => {
+                const slotKind = e.target.value as SlotKind
+                patch({
+                  slotKind,
+                  // Повтору нужен источник, конец вещания не берёт контент вовсе.
+                  repeatSource:
+                    slotKind === 'Repeat'
+                      ? (body.repeatSource ?? {
+                          daysAgo: 1,
+                          time: '20:00:00',
+                          durationMinutes: 90,
+                        })
+                      : null,
+                })
+              }}
+            >
+              {SLOT_KINDS.map((value) => (
+                <option key={value} value={value}>
+                  {t(`admin.channels.slotKinds.${value}`)}
+                </option>
+              ))}
+            </select>
          </div>

          {isContent && (
@@ -280,33 +276,31 @@ export function SlotInspector({
                </div>
              )}

-              <div className="grid grid-cols-2 gap-2">
-                <div className="flex flex-col gap-1.5">
-                  <Label>{t('admin.channels.blockMode')}</Label>
-                  <select
-                    className="h-9 rounded-md border border-border bg-transparent px-2"
-                    value={body.blockMode}
-                    onChange={(e) => patch({ blockMode: e.target.value as SlotBlockMode })}
-                  >
-                    {BLOCK_MODES.map((value) => (
-                      <option key={value} value={value}>
-                        {t(`admin.channels.blockModes.${value}`)}
-                      </option>
-                    ))}
-                  </select>
-                </div>
-                {body.blockMode !== 'FillSlot' && (
-                  <div className="flex flex-col gap-1.5">
-                    <Label>{t('admin.channels.blockValue')}</Label>
-                    <Input
-                      type="number"
-                      min={1}
-                      value={body.blockValue}
-                      onChange={(e) => patch({ blockValue: Number(e.target.value) })}
-                    />
-                  </div>
-                )}
+              <div className="flex flex-col gap-1.5">
+                <Label>{t('admin.channels.blockMode')}</Label>
+                <select
+                  className="h-9 rounded-md border border-border bg-transparent px-2"
+                  value={body.blockMode}
+                  onChange={(e) => patch({ blockMode: e.target.value as SlotBlockMode })}
+                >
+                  {BLOCK_MODES.map((value) => (
+                    <option key={value} value={value}>
+                      {t(`admin.channels.blockModes.${value}`)}
+                    </option>
+                  ))}
+                </select>
              </div>
+              {body.blockMode !== 'FillSlot' && (
+                <div className="flex flex-col gap-1.5">
+                  <Label>{t('admin.channels.blockValue')}</Label>
+                  <Input
+                    type="number"
+                    min={1}
+                    value={body.blockValue}
+                    onChange={(e) => patch({ blockValue: Number(e.target.value) })}
+                  />
+                </div>
+              )}

              <div className="flex flex-col gap-1.5">
                <Label>{t('admin.channels.overflow')}</Label>
@@ -327,7 +321,7 @@ export function SlotInspector({
          )}

          {body.slotKind === 'Repeat' && body.repeatSource && (
-            <div className="grid grid-cols-3 gap-2">
+            <div className="grid grid-cols-3 gap-2 sm:col-span-2">
              <div className="flex flex-col gap-1.5">
                <Label>{t('admin.channels.repeatDaysAgo')}</Label>
                <Input
@@ -370,7 +364,7 @@ export function SlotInspector({
            </div>
          )}

-          <div className="flex flex-wrap items-end gap-3">
+          <div className="flex flex-wrap items-end gap-3 sm:col-span-2">
            <label className="flex items-center gap-2">
              <input
                type="checkbox"
@@ -408,40 +402,40 @@ export function SlotInspector({
              </select>
            </div>
          </div>
-          <p className="text-xs text-muted-foreground">{t('admin.channels.anchorHint')}</p>
+          <p className="text-xs text-muted-foreground sm:col-span-2">
+            {t('admin.channels.anchorHint')}
+          </p>

          {/* Стыки: внутри слота — между единицами, после слота — на переходе к следующему. */}
-          <div className="grid grid-cols-2 gap-2">
-            <div className="flex flex-col gap-1.5">
-              <Label>{t('admin.channels.junctionBetween')}</Label>
-              <select
-                className="h-9 rounded-md border border-border bg-transparent px-2"
-                value={body.junctionBetweenId ?? ''}
-                onChange={(e) => patch({ junctionBetweenId: e.target.value || null })}
-              >
-                <option value="">{t('admin.channels.junctionDefault')}</option>
-                {(junctions ?? []).map((junction) => (
-                  <option key={junction.id} value={junction.id}>
-                    {junction.name}
-                  </option>
-                ))}
-              </select>
-            </div>
-            <div className="flex flex-col gap-1.5">
-              <Label>{t('admin.channels.junctionAfter')}</Label>
-              <select
-                className="h-9 rounded-md border border-border bg-transparent px-2"
-                value={body.junctionAfterId ?? ''}
-                onChange={(e) => patch({ junctionAfterId: e.target.value || null })}
-              >
-                <option value="">{t('admin.channels.junctionDefault')}</option>
-                {(junctions ?? []).map((junction) => (
-                  <option key={junction.id} value={junction.id}>
-                    {junction.name}
-                  </option>
-                ))}
-              </select>
-            </div>
+          <div className="flex flex-col gap-1.5">
+            <Label>{t('admin.channels.junctionBetween')}</Label>
+            <select
+              className="h-9 rounded-md border border-border bg-transparent px-2"
+              value={body.junctionBetweenId ?? ''}
+              onChange={(e) => patch({ junctionBetweenId: e.target.value || null })}
+            >
+              <option value="">{t('admin.channels.junctionDefault')}</option>
+              {(junctions ?? []).map((junction) => (
+                <option key={junction.id} value={junction.id}>
+                  {junction.name}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <Label>{t('admin.channels.junctionAfter')}</Label>
+            <select
+              className="h-9 rounded-md border border-border bg-transparent px-2"
+              value={body.junctionAfterId ?? ''}
+              onChange={(e) => patch({ junctionAfterId: e.target.value || null })}
+            >
+              <option value="">{t('admin.channels.junctionDefault')}</option>
+              {(junctions ?? []).map((junction) => (
+                <option key={junction.id} value={junction.id}>
+                  {junction.name}
+                </option>
+              ))}
+            </select>
          </div>
        </div>