Squashed new RBAC

panel/modals/TopicEditModal.tsx

@@ -1,185 +1,346 @@
-import { Component, createEffect, createSignal } from 'solid-js'
-import formStyles from '../styles/Form.module.css'
-import styles from '../styles/Modal.module.css'
-import Button from '../ui/Button'
+import { createEffect, createSignal, For, Show } from 'solid-js'
+import { Topic, useData } from '../context/data'
+import styles from '../styles/Form.module.css'
+import modalStyles from '../styles/Modal.module.css'
+import EditableCodePreview from '../ui/EditableCodePreview'
 import Modal from '../ui/Modal'
 
-interface Topic {
-  id: number
-  slug: string
-  title: string
-  body?: string
-  pic?: string
-  community: number
-  parent_ids?: number[]
-}
-
 interface TopicEditModalProps {
+  topic: Topic
   isOpen: boolean
-  topic: Topic | null
   onClose: () => void
-  onSave: (topic: Topic) => void
+  onSave: (updatedTopic: Topic) => void
+  onError?: (message: string) => void
 }
 
-/**
- * Модальное окно для редактирования топиков
- */
-const TopicEditModal: Component<TopicEditModalProps> = (props) => {
-  const [formData, setFormData] = createSignal<Topic>({
+export default function TopicEditModal(props: TopicEditModalProps) {
+  const { communities, topics, getCommunityName, selectedCommunity } = useData()
+
+  // Состояние формы
+  const [formData, setFormData] = createSignal({
     id: 0,
-    slug: '',
     title: '',
+    slug: '',
     body: '',
-    pic: '',
     community: 0,
-    parent_ids: []
+    parent_ids: [] as number[]
   })
 
-  const [parentIdsText, setParentIdsText] = createSignal('')
-  let bodyRef: HTMLDivElement | undefined
+  // Состояние для выбора родителей
+  const [availableParents, setAvailableParents] = createSignal<Topic[]>([])
+  const [parentSearch, setParentSearch] = createSignal('')
 
-  // Синхронизация с props.topic
+  // Состояние для редактирования body
+  const [showBodyEditor, setShowBodyEditor] = createSignal(false)
+  const [bodyContent, setBodyContent] = createSignal('')
+
+  const [saving, setSaving] = createSignal(false)
+
+  // Инициализация формы при открытии
   createEffect(() => {
-    if (props.topic) {
-      setFormData({ ...props.topic })
-      setParentIdsText(props.topic.parent_ids?.join(', ') || '')
-
-      // Устанавливаем содержимое в contenteditable div
-      if (bodyRef) {
-        bodyRef.innerHTML = props.topic.body || ''
-      }
+    if (props.isOpen && props.topic) {
+      console.log('[TopicEditModal] Initializing with topic:', props.topic)
+      setFormData({
+        id: props.topic.id,
+        title: props.topic.title || '',
+        slug: props.topic.slug || '',
+        body: props.topic.body || '',
+        community: selectedCommunity() || 0,
+        parent_ids: props.topic.parent_ids || []
+      })
+      setBodyContent(props.topic.body || '')
+      updateAvailableParents(selectedCommunity() || 0)
     }
   })
 
-  const handleSave = () => {
-    // Парсим parent_ids из строки
-    const parentIds = parentIdsText()
-      .split(',')
-      .map((id) => Number.parseInt(id.trim()))
-      .filter((id) => !Number.isNaN(id))
+  // Обновление доступных родителей при смене сообщества
+  const updateAvailableParents = (communityId: number) => {
+    const allTopics = topics()
+    const currentTopicId = formData().id
 
-    const updatedTopic = {
-      ...formData(),
-      parent_ids: parentIds.length > 0 ? parentIds : undefined
-    }
+    // Фильтруем топики того же сообщества, исключая текущий топик
+    const filteredTopics = allTopics.filter(
+      (topic) => topic.community === communityId && topic.id !== currentTopicId
+    )
 
-    props.onSave(updatedTopic)
+    setAvailableParents(filteredTopics)
   }
 
-  const handleBodyInput = (e: Event) => {
-    const target = e.target as HTMLDivElement
-    setFormData((prev) => ({ ...prev, body: target.innerHTML }))
+  // Фильтрация родителей по поиску
+  const filteredParents = () => {
+    const search = parentSearch().toLowerCase()
+    if (!search) return availableParents()
+
+    return availableParents().filter(
+      (topic) => topic.title?.toLowerCase().includes(search) || topic.slug?.toLowerCase().includes(search)
+    )
+  }
+
+  // Обработка изменения сообщества
+  const handleCommunityChange = (e: Event) => {
+    const target = e.target as HTMLSelectElement
+    const communityId = Number.parseInt(target.value)
+
+    setFormData((prev) => ({
+      ...prev,
+      community: communityId,
+      parent_ids: [] // Сбрасываем родителей при смене сообщества
+    }))
+
+    updateAvailableParents(communityId)
+  }
+
+  // Обработка изменения родителей
+  const handleParentToggle = (parentId: number) => {
+    setFormData((prev) => ({
+      ...prev,
+      parent_ids: prev.parent_ids.includes(parentId)
+        ? prev.parent_ids.filter((id) => id !== parentId)
+        : [...prev.parent_ids, parentId]
+    }))
+  }
+
+  // Обработка изменения полей формы
+  const handleFieldChange = (field: string, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value
+    }))
+  }
+
+  // Открытие редактора body
+  const handleOpenBodyEditor = () => {
+    setBodyContent(formData().body)
+    setShowBodyEditor(true)
+  }
+
+  // Сохранение body из редактора
+  const handleBodySave = (content: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      body: content
+    }))
+    setBodyContent(content)
+    setShowBodyEditor(false)
+  }
+
+  // Получение пути до корня для топика
+  const getTopicPath = (topicId: number): string => {
+    const topic = topics().find((t) => t.id === topicId)
+    if (!topic) return 'Неизвестный топик'
+
+    const community = getCommunityName(topic.community)
+    return `${community} → ${topic.title}`
+  }
+
+  // Сохранение изменений
+  const handleSave = async () => {
+    try {
+      setSaving(true)
+
+      const updatedTopic = {
+        ...props.topic,
+        ...formData()
+      }
+
+      console.log('[TopicEditModal] Saving topic:', updatedTopic)
+
+      // TODO: Здесь должен быть вызов API для сохранения
+      // await updateTopic(updatedTopic)
+
+      props.onSave(updatedTopic)
+      props.onClose()
+    } catch (error) {
+      console.error('[TopicEditModal] Error saving topic:', error)
+      props.onError?.(error instanceof Error ? error.message : 'Ошибка сохранения топика')
+    } finally {
+      setSaving(false)
+    }
   }
 
   return (
-    <Modal
-      isOpen={props.isOpen}
-      onClose={props.onClose}
-      title={`Редактирование топика: ${props.topic?.title || ''}`}
-    >
-      <div class={styles['modal-content']}>
-        <div class={formStyles['form-group']}>
-          <label class={formStyles.label}>ID</label>
-          <input
-            type="text"
-            value={formData().id}
-            disabled
-            class={formStyles.input}
-            style={{ background: '#f5f5f5', cursor: 'not-allowed' }}
-          />
-        </div>
+    <>
+      <Modal
+        isOpen={props.isOpen && !showBodyEditor()}
+        onClose={props.onClose}
+        title="Редактирование топика"
+        size="large"
+      >
+        <div class={styles.form}>
+          {/* Основная информация */}
+          <div class={styles.section}>
+            <h3>Основная информация</h3>
 
-        <div class={formStyles['form-group']}>
-          <label class={formStyles.label}>Slug</label>
-          <input
-            type="text"
-            value={formData().slug}
-            onInput={(e) => setFormData((prev) => ({ ...prev, slug: e.target.value }))}
-            class={formStyles.input}
-            required
-          />
-        </div>
+            <div class={styles.field}>
+              <label class={styles.label}>
+                Название:
+                <input
+                  type="text"
+                  class={styles.input}
+                  value={formData().title}
+                  onInput={(e) => handleFieldChange('title', e.currentTarget.value)}
+                  placeholder="Введите название топика..."
+                />
+              </label>
+            </div>
 
-        <div class={formStyles['form-group']}>
-          <label class={formStyles.label}>Название</label>
-          <input
-            type="text"
-            value={formData().title}
-            onInput={(e) => setFormData((prev) => ({ ...prev, title: e.target.value }))}
-            class={formStyles.input}
-          />
-        </div>
+            <div class={styles.field}>
+              <label class={styles.label}>
+                Slug:
+                <input
+                  type="text"
+                  class={styles.input}
+                  value={formData().slug}
+                  onInput={(e) => handleFieldChange('slug', e.currentTarget.value)}
+                  placeholder="Введите slug топика..."
+                />
+              </label>
+            </div>
 
-        <div class={formStyles['form-group']}>
-          <label class={formStyles.label}>Описание (HTML)</label>
-          <div
-            ref={bodyRef}
-            contentEditable
-            onInput={handleBodyInput}
-            class={formStyles.input}
-            style={{
-              'min-height': '120px',
-              'font-family': 'Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-              'font-size': '13px',
-              'line-height': '1.4',
-              'white-space': 'pre-wrap',
-              'overflow-wrap': 'break-word'
-            }}
-            data-placeholder="Введите HTML описание топика..."
-          />
-        </div>
+            <div class={styles.field}>
+              <label class={styles.label}>
+                Сообщество:
+                <select class={styles.select} value={formData().community} onChange={handleCommunityChange}>
+                  <option value={0}>Выберите сообщество</option>
+                  <For each={communities()}>
+                    {(community) => <option value={community.id}>{community.name}</option>}
+                  </For>
+                </select>
+              </label>
+            </div>
+          </div>
 
-        <div class={formStyles['form-group']}>
-          <label class={formStyles.label}>Картинка (URL)</label>
-          <input
-            type="text"
-            value={formData().pic || ''}
-            onInput={(e) => setFormData((prev) => ({ ...prev, pic: e.target.value }))}
-            class={formStyles.input}
-            placeholder="https://example.com/image.jpg"
-          />
-        </div>
+          {/* Содержимое */}
+          <div class={styles.section}>
+            <h3>Содержимое</h3>
 
-        <div class={formStyles['form-group']}>
-          <label class={formStyles.label}>Сообщество (ID)</label>
-          <input
-            type="number"
-            value={formData().community}
-            onInput={(e) =>
-              setFormData((prev) => ({ ...prev, community: Number.parseInt(e.target.value) || 0 }))
-            }
-            class={formStyles.input}
-            min="0"
-          />
-        </div>
+            <div class={styles.field}>
+              <label class={styles.label}>Body:</label>
+              <div class={styles.bodyPreview} onClick={handleOpenBodyEditor}>
+                <Show when={formData().body}>
+                  <div class={styles.bodyContent}>
+                    {formData().body.length > 200
+                      ? `${formData().body.substring(0, 200)}...`
+                      : formData().body}
+                  </div>
+                </Show>
+                <Show when={!formData().body}>
+                  <div class={styles.bodyPlaceholder}>Нет содержимого. Нажмите для редактирования.</div>
+                </Show>
+                <div class={styles.bodyHint}>✏️ Кликните для редактирования в полноэкранном редакторе</div>
+              </div>
+            </div>
+          </div>
 
-        <div class={formStyles['form-group']}>
-          <label class={formStyles.label}>
-            Родительские топики (ID через запятую)
-            <small style={{ display: 'block', color: '#666', 'margin-top': '4px' }}>
-              Например: 1, 5, 12
-            </small>
-          </label>
-          <input
-            type="text"
-            value={parentIdsText()}
-            onInput={(e) => setParentIdsText(e.target.value)}
-            class={formStyles.input}
-            placeholder="1, 5, 12"
-          />
-        </div>
+          {/* Родительские топики */}
+          <Show when={formData().community > 0}>
+            <div class={styles.section}>
+              <h3>Родительские топики</h3>
 
-        <div class={styles['modal-actions']}>
-          <Button variant="secondary" onClick={props.onClose}>
-            Отмена
-          </Button>
-          <Button variant="primary" onClick={handleSave}>
-            Сохранить
-          </Button>
+              <div class={styles.field}>
+                <label class={styles.label}>
+                  Поиск родителей:
+                  <input
+                    type="text"
+                    class={styles.input}
+                    value={parentSearch()}
+                    onInput={(e) => setParentSearch(e.currentTarget.value)}
+                    placeholder="Введите название для поиска..."
+                  />
+                </label>
+              </div>
+
+              <Show when={formData().parent_ids.length > 0}>
+                <div class={styles.selectedParents}>
+                  <strong>Выбранные родители:</strong>
+                  <ul class={styles.parentsList}>
+                    <For each={formData().parent_ids}>
+                      {(parentId) => (
+                        <li class={styles.parentItem}>
+                          <span>{getTopicPath(parentId)}</span>
+                          <button
+                            type="button"
+                            class={styles.removeButton}
+                            onClick={() => handleParentToggle(parentId)}
+                          >
+                            ✕
+                          </button>
+                        </li>
+                      )}
+                    </For>
+                  </ul>
+                </div>
+              </Show>
+
+              <div class={styles.availableParents}>
+                <strong>Доступные родители:</strong>
+                <div class={styles.parentsGrid}>
+                  <For each={filteredParents()}>
+                    {(parent) => (
+                      <label class={styles.parentCheckbox}>
+                        <input
+                          type="checkbox"
+                          checked={formData().parent_ids.includes(parent.id)}
+                          onChange={() => handleParentToggle(parent.id)}
+                        />
+                        <span class={styles.parentLabel}>
+                          <strong>{parent.title}</strong>
+                          <br />
+                          <small>{parent.slug}</small>
+                        </span>
+                      </label>
+                    )}
+                  </For>
+                </div>
+
+                <Show when={filteredParents().length === 0}>
+                  <div class={styles.noParents}>
+                    <Show when={parentSearch()}>Не найдено топиков по запросу "{parentSearch()}"</Show>
+                    <Show when={!parentSearch()}>Нет доступных родительских топиков в этом сообществе</Show>
+                  </div>
+                </Show>
+              </div>
+            </div>
+          </Show>
+
+          {/* Кнопки */}
+          <div class={modalStyles.modalActions}>
+            <button
+              type="button"
+              class={`${styles.button} ${styles.buttonSecondary}`}
+              onClick={props.onClose}
+              disabled={saving()}
+            >
+              Отмена
+            </button>
+            <button
+              type="button"
+              class={`${styles.button} ${styles.buttonPrimary}`}
+              onClick={handleSave}
+              disabled={saving() || !formData().title || !formData().slug || formData().community === 0}
+            >
+              {saving() ? 'Сохранение...' : 'Сохранить'}
+            </button>
+          </div>
         </div>
-      </div>
-    </Modal>
+      </Modal>
+
+      {/* Редактор body */}
+      <Modal
+        isOpen={showBodyEditor()}
+        onClose={() => setShowBodyEditor(false)}
+        title="Редактирование содержимого топика"
+        size="large"
+      >
+        <EditableCodePreview
+          content={bodyContent()}
+          maxHeight="85vh"
+          onContentChange={setBodyContent}
+          onSave={handleBodySave}
+          onCancel={() => setShowBodyEditor(false)}
+          placeholder="Введите содержимое топика..."
+        />
+      </Modal>
+    </>
   )
 }
-
-export default TopicEditModal