Squashed new RBAC

panel/modals/CommunityRolesModal.tsx

@@ -0,0 +1,182 @@
+import { Component, createEffect, createSignal, For, Show } from 'solid-js'
+import { useData } from '../context/data'
+import formStyles from '../styles/Form.module.css'
+import styles from '../styles/Modal.module.css'
+import Button from '../ui/Button'
+import Modal from '../ui/Modal'
+
+interface Author {
+  id: number
+  name: string
+  email: string
+  slug: string
+}
+
+interface Community {
+  id: number
+  name: string
+  slug: string
+}
+
+interface Role {
+  id: string
+  name: string
+  description?: string
+}
+
+interface CommunityRolesModalProps {
+  isOpen: boolean
+  author: Author | null
+  community: Community | null
+  onClose: () => void
+  onSave: (authorId: number, communityId: number, roles: string[]) => Promise<void>
+}
+
+const CommunityRolesModal: Component<CommunityRolesModalProps> = (props) => {
+  const { queryGraphQL } = useData()
+  const [roles, setRoles] = createSignal<Role[]>([])
+  const [userRoles, setUserRoles] = createSignal<string[]>([])
+  const [loading, setLoading] = createSignal(false)
+
+  // Загружаем доступные роли при открытии модала
+  createEffect(() => {
+    if (props.isOpen && props.community) {
+      void loadRolesData()
+    }
+  })
+
+  const loadRolesData = async () => {
+    setLoading(true)
+    try {
+      // Получаем доступные роли
+      const rolesData = await queryGraphQL(
+        `
+        query GetRoles($community: Int) {
+          adminGetRoles(community: $community) {
+            id
+            name
+            description
+          }
+        }
+      `,
+        { community: props.community?.id }
+      )
+
+      if (rolesData?.adminGetRoles) {
+        setRoles(rolesData.adminGetRoles)
+      }
+
+      // Получаем текущие роли пользователя
+      if (props.author) {
+        const membersData = await queryGraphQL(
+          `
+          query GetCommunityMembers($community_id: Int!) {
+            adminGetCommunityMembers(community_id: $community_id, limit: 1000) {
+              members {
+                id
+                roles
+              }
+            }
+          }
+        `,
+          { community_id: props.community?.id }
+        )
+
+        const members = membersData?.adminGetCommunityMembers?.members || []
+        const currentUser = members.find((m: { id: number }) => m.id === props.author?.id)
+        setUserRoles(currentUser?.roles || [])
+      }
+    } catch (error) {
+      console.error('Ошибка загрузки ролей:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleRoleToggle = (roleId: string) => {
+    const currentRoles = userRoles()
+    if (currentRoles.includes(roleId)) {
+      setUserRoles(currentRoles.filter((r) => r !== roleId))
+    } else {
+      setUserRoles([...currentRoles, roleId])
+    }
+  }
+
+  const handleSave = async () => {
+    if (!props.author || !props.community) return
+
+    setLoading(true)
+    try {
+      await props.onSave(props.author.id, props.community.id, userRoles())
+      props.onClose()
+    } catch (error) {
+      console.error('Ошибка сохранения ролей:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Modal
+      isOpen={props.isOpen}
+      onClose={props.onClose}
+      title={`Роли пользователя: ${props.author?.name || ''}`}
+    >
+      <div class={styles.content}>
+        <Show when={props.community && props.author}>
+          <div class={formStyles.field}>
+            <label class={formStyles.label}>
+              Сообщество: <strong>{props.community?.name}</strong>
+            </label>
+          </div>
+
+          <div class={formStyles.field}>
+            <label class={formStyles.label}>
+              Пользователь: <strong>{props.author?.name}</strong> ({props.author?.email})
+            </label>
+          </div>
+
+          <div class={formStyles.field}>
+            <label class={formStyles.label}>Роли:</label>
+            <Show when={!loading()} fallback={<div>Загрузка ролей...</div>}>
+              <div class={formStyles.checkboxGroup}>
+                <For each={roles()}>
+                  {(role) => (
+                    <div class={formStyles.checkboxItem}>
+                      <input
+                        type="checkbox"
+                        id={`role-${role.id}`}
+                        checked={userRoles().includes(role.id)}
+                        onChange={() => handleRoleToggle(role.id)}
+                        class={formStyles.checkbox}
+                      />
+                      <label for={`role-${role.id}`} class={formStyles.checkboxLabel}>
+                        <div>
+                          <strong>{role.name}</strong>
+                          <Show when={role.description}>
+                            <div class={formStyles.description}>{role.description}</div>
+                          </Show>
+                        </div>
+                      </label>
+                    </div>
+                  )}
+                </For>
+              </div>
+            </Show>
+          </div>
+        </Show>
+
+        <div class={styles.actions}>
+          <Button variant="secondary" onClick={props.onClose}>
+            Отмена
+          </Button>
+          <Button variant="primary" onClick={handleSave} disabled={loading()}>
+            {loading() ? 'Сохранение...' : 'Сохранить'}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+export default CommunityRolesModal