feat: Enhance EasySwitchManager with initial state tracking and server expansion toggle, improving user interaction and state management for gateway selections.

2025-12-07 13:18:08 +07:00
parent cb32b1bd71
commit ec6c348b3e
1 changed files with 104 additions and 18 deletions
@@ -11,7 +11,9 @@ import {
  IconX,
  IconSettings,
  IconDeviceFloppy,
-  IconBolt
+  IconBolt,
+  IconChevronDown,
+  IconChevronUp
 } from '@tabler/icons-react';

 // Функция для получения флага по коду страны
@@ -41,7 +43,9 @@ function EasySwitchManager() {
  
  // Активные шлюзы для каждого community (ключ: community, значение: gateway name)
  const [activeGateways, setActiveGateways] = useState({});
+  const [initialGateways, setInitialGateways] = useState({}); // Исходное состояние для отслеживания изменений
  const [hasChanges, setHasChanges] = useState(false);
+  const [expandedServers, setExpandedServers] = useState(new Set()); // Развернутые серверы

  useEffect(() => {
    const initData = async () => {
@@ -142,21 +146,26 @@ function EasySwitchManager() {
      const serversWithGateways = serversWithData.filter(s => s.gateways.length > 0);
      setServers(serversWithGateways);
      
-      // Устанавливаем активные шлюзы из filters или первый gateway
+      // Автоматически разворачиваем первый сервер
+      if (serversWithGateways.length > 0 && expandedServers.size === 0) {
+        setExpandedServers(new Set([serversWithGateways[0].id]));
+      }
+      
+      // Устанавливаем активные шлюзы ТОЛЬКО из filters (не добавляем дефолтные)
      const initialActive = {};
      serversWithGateways.forEach(server => {
        communities.forEach(comm => {
          const key = `${server.id}:${comm.value}`;
-          // Берем gateway из filters, если есть, иначе первый доступный
+          // Берем gateway ТОЛЬКО из filters
          const gatewayFromFilter = server.filtersMap.get(comm.value);
          if (gatewayFromFilter && server.gateways.find(g => g.name === gatewayFromFilter)) {
            initialActive[key] = gatewayFromFilter;
-          } else if (server.gateways.length > 0) {
-            initialActive[key] = server.gateways[0].name;
          }
+          // Если нет в filters - НЕ устанавливаем дефолтное значение
        });
      });
      setActiveGateways(initialActive);
+      setInitialGateways({ ...initialActive }); // Сохраняем исходное состояние
      
    } catch (err) {
      console.error('Error loading data:', err);
@@ -168,11 +177,32 @@ function EasySwitchManager() {

  const handleGatewaySelect = (serverId, community, gateway) => {
    const key = `${serverId}:${community}`;
-    setActiveGateways(prev => ({
-      ...prev,
-      [key]: gateway
-    }));
-    setHasChanges(true);
+    setActiveGateways(prev => {
+      const newState = {
+        ...prev,
+        [key]: gateway
+      };
+      
+      // Проверяем, есть ли реальные изменения относительно исходного состояния
+      const hasRealChanges = Object.keys(newState).some(k => {
+        return newState[k] !== initialGateways[k];
+      });
+      
+      setHasChanges(hasRealChanges);
+      return newState;
+    });
+  };
+
+  const toggleServerExpanded = (serverId) => {
+    setExpandedServers(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(serverId)) {
+        newSet.delete(serverId);
+      } else {
+        newSet.add(serverId);
+      }
+      return newSet;
+    });
  };

  const handleApplyChanges = async () => {
@@ -180,10 +210,22 @@ function EasySwitchManager() {
    setError('');
    
    try {
-      // Группируем изменения по serverId
+      // Находим только РЕАЛЬНО измененные записи
+      const changedEntries = Object.entries(activeGateways).filter(([key, gateway]) => {
+        return initialGateways[key] !== gateway;
+      });
+      
+      if (changedEntries.length === 0) {
+        setError('Нет изменений для сохранения');
+        setLoading(false);
+        setTimeout(() => setError(''), 3000);
+        return;
+      }
+      
+      // Группируем ТОЛЬКО измененные записи по serverId
      const changesByServer = new Map();
      
-      Object.entries(activeGateways).forEach(([key, gateway]) => {
+      changedEntries.forEach(([key, gateway]) => {
        const [serverId, community] = key.split(':');
        if (!changesByServer.has(serverId)) {
          changesByServer.set(serverId, new Map());
@@ -191,7 +233,7 @@ function EasySwitchManager() {
        changesByServer.get(serverId).set(community, gateway);
      });
      
-      // Обновляем фильтры для каждого сервера
+      // Обновляем фильтры ТОЛЬКО для серверов с изменениями
      const updatePromises = Array.from(changesByServer.entries()).map(async ([serverId, communitiesMap]) => {
        try {
          // Получаем текущие фильтры сервера
@@ -250,7 +292,7 @@ function EasySwitchManager() {
        setHasChanges(false);
        setSuccess(`✅ Изменения успешно применены для ${successCount} ${successCount === 1 ? 'сервера' : 'серверов'}`);
        setTimeout(() => setSuccess(''), 3000);
-        // Перезагружаем данные чтобы обновить бейджи "настроен"
+        // Перезагружаем данные чтобы обновить бейджи "настроен" и сбросить initialGateways
        await handleRefresh();
      } else {
        setError(`Не удалось обновить ${errorCount} ${errorCount === 1 ? 'сервер' : 'серверов'}. Успешно: ${successCount}.`);
@@ -469,6 +511,31 @@ function EasySwitchManager() {
          </div>
          
          {/* Инструменты */}
+          <div className="col-auto">
+            <button 
+              className="btn btn-outline-secondary btn-sm"
+              onClick={() => {
+                if (expandedServers.size === filteredServers.length) {
+                  setExpandedServers(new Set());
+                } else {
+                  setExpandedServers(new Set(filteredServers.map(s => s.id)));
+                }
+              }}
+              title={expandedServers.size === filteredServers.length ? "Свернуть все" : "Развернуть все"}
+            >
+              {expandedServers.size === filteredServers.length ? (
+                <>
+                  <IconChevronUp size={18} className="me-1" />
+                  Свернуть все
+                </>
+              ) : (
+                <>
+                  <IconChevronDown size={18} className="me-1" />
+                  Развернуть все
+                </>
+              )}
+            </button>
+          </div>
          <div className="col-auto">
            <button className="btn btn-icon" title="Настройки">
              <IconSettings size={18} />
@@ -511,11 +578,28 @@ function EasySwitchManager() {
            // Не показываем сервер, если нет отфильтрованных communities
            if (filteredCommunitiesForServer.length === 0) return null;
            
+            const isExpanded = expandedServers.has(server.id);
+            
            return (
              <div key={server.id} className="card mb-3">
-                {/* Заголовок сервера */}
-                <div className="card-header py-2" style={{ backgroundColor: 'rgba(32, 107, 196, 0.05)' }}>
+                {/* Заголовок сервера (кликабельный) */}
+                <div 
+                  className="card-header py-2" 
+                  style={{ 
+                    backgroundColor: 'rgba(32, 107, 196, 0.05)',
+                    cursor: 'pointer',
+                    userSelect: 'none'
+                  }}
+                  onClick={() => toggleServerExpanded(server.id)}
+                >
                  <div className="d-flex align-items-center">
+                    {/* Иконка сворачивания */}
+                    {isExpanded ? (
+                      <IconChevronUp size={20} className="me-2 text-muted" />
+                    ) : (
+                      <IconChevronDown size={20} className="me-2 text-muted" />
+                    )}
+                    
                    {flag && <span className="me-2" style={{ fontSize: '1.5rem' }}>{flag}</span>}
                    <IconServer size={20} className="me-2 text-primary" />
                    <h3 className="card-title mb-0 me-2">{server.name}</h3>
@@ -528,7 +612,9 @@ function EasySwitchManager() {
                  </div>
                </div>
                
-                <div className="card-body p-3">
+                {/* Контент (сворачиваемый) */}
+                {isExpanded && (
+                  <div className="card-body p-3">
                  {/* Сетка Communities для этого сервера */}
                  <div className="row g-3">
                    {filteredCommunitiesForServer.map((comm) => {
@@ -647,7 +733,7 @@ function EasySwitchManager() {
                      );
                    })}
                  </div>
-                </div>
+                )}
              </div>
            );
          })}