Merge pull request #62 from cevi/feature/#24_Staff_add_users_to_Abtei…

…lung

Feature/#24 staff add users to abteilung

src/components/users/AddUserToAbteilung.tsx

@@ -0,0 +1,130 @@
+import {Button, Form, message, Select, Spin} from "antd";
+import {firestore} from "../../config/firebase/firebase";
+import {abteilungenCollection, abteilungenMembersCollection} from "../../config/firebase/collections";
+import React, {useContext, useState} from "react";
+import {AbteilungenContext} from "../navigation/NavigationMenu";
+import {roles} from "../abteilung/members/MemberTable";
+import {useForm} from "antd/es/form/Form";
+import Modal from "antd/lib/modal/Modal";
+import { AbteilungMember } from 'types/user.type';
+
+export interface EditAbteilungMemberProps {
+    uid: string
+    onSuccess?: () => void
+}
+
+export const AddUserToAbteilung = (props: EditAbteilungMemberProps) => {
+
+    const {uid, onSuccess} = props;
+
+    const [form] = useForm<AbteilungMember>();
+
+    const abteilungenContext = useContext(AbteilungenContext);
+    const abteilungen = abteilungenContext.abteilungen;
+    const abtielungenLoading = abteilungenContext.loading;
+
+    const addUserToAbteilung = async () => {
+        const userRef = firestore().collection(abteilungenCollection).doc(form.getFieldValue('abteilung')).collection(abteilungenMembersCollection).doc(uid)
+        const memberDoc = await userRef.get();
+        if (memberDoc.exists) {
+            message.error('Dieser Benutzer ist bereits mitglied dieser Abteilung');
+        } else {
+            const member: AbteilungMember = {
+                userId: uid,
+                role: form.getFieldValue('role'),
+                approved: true,
+            }
+            await firestore().collection(abteilungenCollection).doc(form.getFieldValue('abteilung')).collection(abteilungenMembersCollection).doc(uid).set(member)
+                .then(() => {
+                    if (onSuccess) {
+                        onSuccess();
+                    }
+                })
+                .catch(() => {
+                    message.error('Der Benutzer konnte nicht zur Abteilung hinzugefügt werden!')
+                })
+        }
+    }
+
+    return <>
+        {
+            abtielungenLoading ? <Spin/> : <>
+                <Form
+                    form={form}
+                    initialValues={{
+                        role: 'member'
+                    } as Partial<AbteilungMember>}
+                    onFinish={addUserToAbteilung}>
+                    <Form.Item
+                        label='Abteilung'
+                        name='abteilung'
+                        rules={[
+                            {required: true},
+                            {type: 'string', min: 1},
+                        ]}
+                    >
+                        <Select
+                            showSearch
+                            placeholder='Abteilung'
+                            optionFilterProp='children'
+                            options={[{label: 'Keine Abteilung', value: null} as any, ...abteilungen.map((a) => {
+                                return {
+                                    value: a.id,
+                                    label: a.name,
+                                }
+                            }).sort((a, b) => a.label.localeCompare(b.label))]}
+                        >
+                        </Select>
+                    </Form.Item>
+                    <Form.Item
+                        label='Rolle'
+                        name='role'
+                        rules={[
+                            {required: true}
+                        ]}
+                    >
+                        <Select key='role'>
+                            {
+                                roles.map(role => <Select.Option key={role.key}
+                                                                 value={role.key}>{role.name}</Select.Option>)
+                            }
+                        </Select>
+                    </Form.Item>
+                    <Form.Item wrapperCol={{offset: 8, span: 16}}>
+                        <Button type='primary' htmlType='submit'>
+                            Zu Abteilung hinzufügen
+                        </Button>
+                    </Form.Item>
+                </Form>
+            </>
+        }
+    </>
+}
+
+export const AddUserToAbteilungButton = (props: EditAbteilungMemberProps) => {
+    const {uid} = props;
+
+    const [isModalVisible, setIsModalVisible] = useState(false);
+
+    return <>
+        <Button type='primary' onClick={() => setIsModalVisible(!isModalVisible)}>
+            Benutzer zu Abteilung hinzufügen
+        </Button>
+        <Modal
+            title='Benutzer zu Abteilung hinzufügen'
+            visible={isModalVisible}
+            onCancel={() => setIsModalVisible(false)}
+            footer={[
+                <Button key='back' onClick={() => setIsModalVisible(false)}>
+                    Abbrechen
+                </Button>,
+            ]}
+        >
+            <AddUserToAbteilung uid={uid} onSuccess={() => {
+                message.success('Der Benutzer wurde erfolgreich zur Abteilung hinzugefügt')
+                setIsModalVisible(false)
+            }}/>
+        </Modal>
+    </>
+
+}

src/components/users/UserTable.tsx

@@ -1,10 +1,8 @@
-import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
-import { Table, Switch } from 'antd';
+import {CheckOutlined, CloseOutlined} from '@ant-design/icons';
+import {Switch, Table} from 'antd';
 import React from 'react';
-import { Categorie } from 'types/categorie.types';
-import { Material } from 'types/material.types';
-import { UserData } from 'types/user.type';
-
+import {UserData} from 'types/user.type';
+import {AddUserToAbteilungButton} from "./AddUserToAbteilung";
 
 
 export interface UserTableProps {
@@ -38,17 +36,27 @@ export const UserTable = (props: UserTableProps) => {
                 <Switch
                     key={`switch_${record.id}`}
                     checked={record.staff || false}
-                    checkedChildren={<CheckOutlined />}
-                    unCheckedChildren={<CloseOutlined />}
-                    onChange={()=> { makeStaff(record.id) }}
+                    checkedChildren={<CheckOutlined/>}
+                    unCheckedChildren={<CloseOutlined/>}
+                    onChange={() => {
+                        makeStaff(record.id)
+                    }}
                 />
             ),
             sorter: (a: UserData, b: UserData) => ((a.staff || false) === (b.staff || false)) ? 0 : (a.staff || false) ? -1 : 1,
-        }
-      ];
+        },
+        {
+            title: 'Aktionen',
+            key: 'actions',
+            dataIndex: 'id',
+            render: (text: string, record: UserData) => (
+                    <AddUserToAbteilungButton uid={record.id}/>
+            )
+        },
+    ];
 
 
-      return <Table rowKey='id' columns={columns} dataSource={users} loading={loading} />;
+    return <Table rowKey='id' columns={columns} dataSource={users} loading={loading}/>;
 
 
 }

src/types/user.type.ts

@@ -1,29 +1,35 @@
 export interface UserData {
-    __caslSubjectType__ : 'UserData'
-    id: string;
-    email: string
-    displayName: string
-    photoURL: string
-    given_name: string,
-    family_name: string,
-    nickname: string,
-    name: string,
-    email_verified?: boolean
-    user_metadata?: any
-    staff?: boolean;
-    defaultAbteilung?: string;
-    roles: { [abteilungId: string]: role }
+  __caslSubjectType__: "UserData";
+  id: string;
+  email: string;
+  displayName: string;
+  photoURL: string;
+  given_name: string;
+  family_name: string;
+  nickname: string;
+  name: string;
+  email_verified?: boolean;
+  user_metadata?: any;
+  staff?: boolean;
+  defaultAbteilung?: string;
+  roles: { [abteilungId: string]: role };
 }
 
 export interface UserDataUpdate {
-    email: string
-    displayName: string
-    photoURL: string
-    given_name: string,
-    family_name: string,
-    nickname: string,
-    name: string,
-    defaultAbteilung?: string;
+  email: string;
+  displayName: string;
+  photoURL: string;
+  given_name: string;
+  family_name: string;
+  nickname: string;
+  name: string;
+  defaultAbteilung?: string;
 }
 
-export type role = 'pending' | 'guest' | 'member' | 'matchef' | 'admin';
+export type role = "pending" | "guest" | "member" | "matchef" | "admin";
+
+export interface AbteilungMember {
+  userId: string;
+  role: role;
+  approved: boolean;
+}