Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3719 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3719 Rev 3736
Línea 1... Línea 1...
1 
import React, { useState } from 'react';
 1 
import React from 'react';
2 
import { useDispatch } from 'react-redux';
 - 
 
3 
import { Avatar, AvatarGroup, Button } from '@mui/material';
 - 
 
4 
import { East } from '@mui/icons-material';
 2 
import { East } from '@mui/icons-material';
Línea 5... Línea 3...
5 
 
 3 
 
- 
 
 4 
import { useAlert, useApi, useModal } from '@shared/hooks';
- 
 
 5 
import {
- 
 
 6 
  approveMember,
- 
 
 7 
  cancelInvitation,
- 
 
 8 
  getGroupMembers,
- 
 
 9 
  inviteMember,
- 
 
 10 
  rejectMember
- 
 
 11 
} from '@groups/services';
- 
 
 12 
 
- 
 
 13 
import {
- 
 
 14 
  Card,
- 
 
 15 
  CardHeader,
- 
 
 16 
  CardContent,
- 
 
 17 
  CardActions,
- 
 
 18 
  Button,
- 
 
 19 
  AvatarGroup,
- 
 
 20 
  Avatar,
- 
 
 21 
  SearchUserModal,
6 
import { axios } from '@utils';
 22 
  Spinner
7 
import { useFetch } from '@hooks';
 23 
} from '@shared/components';
8 
import { addNotification } from '@store/notification/notification.actions';
 24 
import { MembersModal } from '@groups/components';
9 
 
 25 
 
10 
import Widget from '@components/UI/Widget';
 26 
export function Members({ uuid = '' }) {
11 
import MembersModal from '@components/modals/MembersModal';
 27 
  const { showSuccess, showError } = useAlert();
Línea 12... Línea -...
12 
import AddMemberModal from '@components/modals/AddMemberModal';
 - 
 
13 
 
 28 
  const { showModal, closeModal } = useModal();
- 
 
 29 
 
- 
 
 30 
  const {
- 
 
 31 
    data,
14 
const Members = ({ id = '' }) => {
 32 
    loading,
15 
  const {
 33 
    execute: getMembers
- 
 
 34 
  } = useApi(getGroupMembers, {
16 
    data: { items: members, link_invite: linkInvite },
 35 
    autoFetch: true,
- 
 
 36 
    autoFetchArgs: [uuid],
17 
    refetch
 37 
    onError: (error) => showError(error.message)
18 
  } = useFetch(`/helpers/group-members/${id}`);
 38 
  });
- 
 
 39 
 
- 
 
 40 
  const { execute: invite } = useApi(inviteMember, {
- 
 
 41 
    onSuccess: (message) => {
- 
 
 42 
      showSuccess(message);
- 
 
 43 
      getMembers();
19 
 
 44 
    },
- 
 
 45 
    onError: (error) => {
- 
 
 46 
      showError(error.message);
20 
  const [addModalShow, setAddModalShow] = useState(false);
 47 
    }
- 
 
 48 
  });
- 
 
 49 
 
- 
 
 50 
  const { execute: approve } = useApi(approveMember, {
21 
  const [showMembersModal, setShowMembersModal] = useState(false);
 51 
    onSuccess: (message) => {
- 
 
 52 
      closeModal();
- 
 
 53 
      showSuccess(message);
- 
 
 54 
      getMembers();
- 
 
 55 
    },
- 
 
 56 
    onError: (error) => {
- 
 
 57 
      showError(error.message);
22 
 
 58 
    }
23 
  const dispatch = useDispatch();
 59 
  });
24 
 
 60 
 
25 
  const handleAction = (url) => {
 61 
  const { execute: reject } = useApi(rejectMember, {
26 
    const params = new FormData();
 62 
    onSuccess: (message) => {
- 
 
 63 
      closeModal();
- 
 
 64 
      showSuccess(message);
27 
    axios
 65 
      getMembers();
28 
      .post(url, params)
 66 
    },
- 
 
 67 
    onError: (error) => {
- 
 
 68 
      showError(error.message);
29 
      .then((response) => {
 69 
    }
- 
 
 70 
  });
- 
 
 71 
 
- 
 
 72 
  const { execute: cancel } = useApi(cancelInvitation, {
30 
        const { data, success } = response.data;
 73 
    onSuccess: (message) => {
- 
 
 74 
      closeModal();
- 
 
 75 
      showSuccess(message);
- 
 
 76 
      getMembers();
31 
 
 77 
    },
32 
        if (!success) {
 78 
    onError: (error) => {
- 
 
 79 
      showError(error.message);
33 
          throw new Error(data);
 80 
    }
34 
        }
 81 
  });
35 
 
 82 
 
36 
        dispatch(addNotification({ style: 'success', msg: data }));
 83 
  const handleInvite = () => {
37 
      })
 84 
    showModal(
- 
 
 85 
      'Invitar miembros',
38 
      .then(() => refetch())
 86 
      <SearchUserModal
- 
 
 87 
        renderAction={(user) => (
- 
 
 88 
          <Button color='primary' onClick={() => invite(data.link_invite, user.uuid)}>
39 
      .catch((err) => {
 89 
            Invitar
- 
 
 90 
          </Button>
- 
 
 91 
        )}
40 
        dispatch(addNotification({ style: 'danger', msg: err.message }));
 92 
      />
Línea 41... Línea 93...
41 
      });
 93 
    );
- 
 
 94 
  };
- 
 
 95 
 
- 
 
 96 
  const showMembers = () => {
- 
 
 97 
    showModal(
- 
 
 98 
      'Miembros',
Línea 42... Línea 99...
42 
  };
 99 
      <MembersModal members={data.items} onApprove={approve} onReject={reject} onCancel={cancel} />
Línea 43... Línea 100...
43 
 
 100 
    );
44 
  const toggleAddMemberModal = () => setAddModalShow(!addModalShow);
 101 
  };
45 
 
 - 
 
46 
  const toggleMembersModal = () => setShowMembersModal(!showMembersModal);
 102 
 
47 
 
 - 
 
48 
  return (
 103 
  if (loading || !data) return <Spinner />;
49 
    <>
 104 
 
50 
      <Widget>
 105 
  return (
51 
        <Widget.Header title={`${members?.length ?? 0} Miembros`} />
 106 
    <Card>
52 
 
 107 
      <CardHeader title={`${data.items.length} Miembros`} />
53 
        <Widget.Body>
 108 
      <CardContent>
54 
          <AvatarGroup max={5}>
 109 
        <AvatarGroup max={5}>
55 
            {members?.map(({ name, image }) => (
 110 
          {data.items.map(({ name, image, uuid }) => (
56 
              <Avatar key={name} src={image} alt={name} />
 111 
            <Avatar key={uuid} src={image} alt={name} size={50} />
57 
            ))}
 - 
 
58 
          </AvatarGroup>
 - 
 
59 
          {linkInvite && (
 - 
 
60 
            <Button color='primary' onClick={toggleAddMemberModal} sx={{ marginTop: 1 }}>
 - 
 
61 
              Invitar miembros
 - 
 
62 
            </Button>
 - 
 
63 
          )}
 - 
 
64 
        </Widget.Body>
 112 
          ))}
65 
        <Widget.Actions styles={{ padding: 0 }}>
 - 
 
66 
          <Button onClick={toggleMembersModal} fullWidth sx={{ borderRadius: 0 }}>
 113 
        </AvatarGroup>
67 
            Ver más
 114 
        {data.link_invite && (
68 
            <East />
 115 
          <Button color='primary' onClick={handleInvite} sx={{ marginTop: 1 }}>
69 
          </Button>
 116 
            Invitar miembros
70 
        </Widget.Actions>
 - 
 
71 
      </Widget>
 - 
 
72 
      <AddMemberModal
 117 
          </Button>
73 
        isShow={addModalShow}
 - 
 
74 
        handleClose={toggleAddMemberModal}
 - 
 
75 
        linkInvite={linkInvite}
 118 
        )}
76 
      />
 119 
      </CardContent>
77 
      <MembersModal
 120 
      <CardActions sx={{ padding: 0 }}>
78 
        isShow={showMembersModal}
 121 
        <Button onClick={showMembers} fullWidth sx={{ borderRadius: 0 }}>
79 
        handleClose={toggleMembersModal}
 122 
          Ver más
80 
        members={members}
 123 
          <East />
81 
        handleAction={handleAction}
 - 
 
82 
      />
 -