Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 848 | Rev 931 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 848 Rev 929
Línea 3... Línea 3...
3 
import { Avatar } from '@mui/material'
 3 
import { Avatar } from '@mui/material'
4 
import { useHistory } from 'react-router-dom'
 4 
import { useHistory } from 'react-router-dom'
5 
import { addNotification } from 'store/notification/notification.actions'
 5 
import { addNotification } from 'store/notification/notification.actions'
6 
import { useDispatch, useSelector } from 'react-redux'
 6 
import { useDispatch, useSelector } from 'react-redux'
7 
import styled from 'styled-components'
 7 
import styled from 'styled-components'
- 
 
 8 
import { device } from '../../styles/MediaQueries'
- 
 
 9 
 
8 
import Spinner from '../UI/Spinner'
 10 
import Spinner from '../UI/Spinner'
9 
import StyledContainer from '../widgets/WidgetLayout'
 11 
import StyledContainer from '../widgets/WidgetLayout'
10 
import ConfirmModal from '../modals/ConfirmModal'
 12 
import ConfirmModal from '../modals/ConfirmModal'
11 
import {
 - 
 
12 
  AccountCircleOutlined,
 - 
 
13 
  CancelOutlined,
 - 
 
14 
  ChatOutlined,
 - 
 
15 
  DeleteOutline,
 - 
 
16 
  Done,
 - 
 
17 
  Edit,
 - 
 
18 
  LockOpenOutlined,
 - 
 
19 
  LockOutlined,
 - 
 
20 
  LogoutOutlined,
 - 
 
21 
  OpenInNew,
 - 
 
22 
  PersonAddOutlined,
 - 
 
23 
  PersonRemoveOutlined,
 - 
 
24 
  Remove,
 - 
 
25 
  SupervisorAccountOutlined
 13 
import ButtonPrimary from 'components/UI/buttons/ButtonPrimary'
26 
} from '@mui/icons-material'
 14 
import ButtonSecondary from 'components/UI/buttons/ButtonSecondary'
27 
import { device } from '../../styles/MediaQueries'
 15 
import ButtonTertiary from 'components/UI/buttons/ButtonTertiary'
Línea 28... Línea 16...
28 
 
 16 
 
29 
const StyledSpinnerContainer = styled.div`
 17 
const StyledSpinnerContainer = styled.div`
30 
  position: absolute;
 18 
  position: absolute;
31 
  left: 0;
 19 
  left: 0;
Línea 87... Línea 75...
87 
const Actions = styled.div`
 75 
const Actions = styled.div`
88 
  display: flex;
 76 
  display: flex;
89 
  justify-content: space-around;
 77 
  justify-content: space-around;
90 
  border-top: 1px solid rgb(211, 211, 211);
 78 
  border-top: 1px solid rgb(211, 211, 211);
91 
  padding: 5px;
 79 
  padding: 5px;
92 
  button {
 - 
 
93 
    display: inline-flex;
 - 
 
94 
    gap: 1rem;
 80 
  gap: 0.5rem;
95 
    align-items: center;
 - 
 
96 
    svg {
 - 
 
97 
      font-size: 1rem;
 - 
 
98 
    }
 - 
 
99 
  }
 - 
 
100 
`
 81 
`
Línea 101... Línea 82...
101 
 
 82 
 
102 
const StyledAvatar = styled(Avatar)`
 83 
const StyledAvatar = styled(Avatar)`
103 
  height: 60px !important;
 84 
  height: 60px !important;
Línea 227... Línea 208...
227 
 
 208 
 
228 
  const navigateTo = (url) => {
 209 
  const navigateTo = (url) => {
229 
    history.push(url)
 210 
    history.push(url)
Línea 230... Línea -...
230 
  }
 - 
 
231 
 
 - 
 
232 
  const linksOptions = [
 - 
 
233 
    {
 - 
 
234 
      label: btnAcceptTitle || labels.accept,
 - 
 
235 
      url: link_view,
 - 
 
236 
      color: 'primary',
 - 
 
237 
      icon: OpenInNew
 - 
 
238 
    },
 - 
 
239 
    {
 - 
 
240 
      label: btnEditTitle || labels.edit,
 - 
 
241 
      url: link_edit,
 - 
 
242 
      color: 'secondary',
 - 
 
243 
      icon: Edit
 - 
 
244 
    },
 - 
 
245 
    { label: labels.approve, url: link_approve, color: 'tertiary', icon: Done },
 - 
 
246 
    { label: btnLeaveTitle, url: link_remove, color: 'tertiary', icon: Remove },
 - 
 
247 
    { label: labels.accept, url: link_accept, color: 'secondary', icon: Done },
 - 
 
248 
    {
 - 
 
249 
      label: labels.reject,
 - 
 
250 
      url: link_reject,
 - 
 
251 
      color: 'tertiary',
 - 
 
252 
      icon: CancelOutlined
 - 
 
253 
    },
 - 
 
254 
    {
 - 
 
255 
      label: btnCancelTitle || labels.cancel,
 - 
 
256 
      url: link_delete,
 - 
 
257 
      color: 'tertiary',
 - 
 
258 
      icon: DeleteOutline
 - 
 
259 
    },
 - 
 
260 
    {
 - 
 
261 
      label: labels.message || 'Mensaje',
 - 
 
262 
      url: link_inmail,
 - 
 
263 
      color: 'secondary',
 - 
 
264 
      icon: ChatOutlined
 - 
 
265 
    },
 - 
 
266 
    {
 - 
 
267 
      label: labels.administrate,
 - 
 
268 
      url: link_admin,
 - 
 
269 
      color: 'secondary',
 - 
 
270 
      icon: SupervisorAccountOutlined
 - 
 
271 
    },
 - 
 
272 
    {
 - 
 
273 
      label: labels.unfollow,
 - 
 
274 
      url: link_unfollow,
 - 
 
275 
      color: 'tertiary',
 - 
 
276 
      icon: PersonRemoveOutlined
 - 
 
277 
    },
 - 
 
278 
    {
 - 
 
279 
      label: labels.block,
 - 
 
280 
      url: link_block,
 - 
 
281 
      color: 'tertiary',
 - 
 
282 
      icon: LockOutlined
 - 
 
283 
    },
 - 
 
284 
    {
 - 
 
285 
      label: labels.unblock,
 - 
 
286 
      url: link_unblock,
 - 
 
287 
      color: 'tertiary',
 - 
 
288 
      icon: LockOpenOutlined
 - 
 
289 
    },
 - 
 
290 
    {
 - 
 
291 
      label: labels.connect,
 - 
 
292 
      url: link_request,
 - 
 
293 
      color: 'tertiary',
 - 
 
294 
      icon: PersonAddOutlined
 - 
 
295 
    },
 - 
 
296 
    {
 - 
 
297 
      label: labels.cancel,
 - 
 
298 
      url: link_cancel,
 - 
 
299 
      color: 'tertiary',
 - 
 
300 
      icon: CancelOutlined
 - 
 
301 
    },
 - 
 
302 
    {
 - 
 
303 
      label: btnLeaveTitle,
 - 
 
304 
      url: link_leave,
 - 
 
305 
      color: 'tertiary',
 - 
 
306 
      icon: LogoutOutlined
 - 
 
307 
    },
 - 
 
308 
    {
 - 
 
309 
      label: 'Personificar',
 - 
 
310 
      url: link_impersonate,
 - 
 
311 
      color: 'tertiary',
 - 
 
312 
      icon: AccountCircleOutlined
 - 
 
313 
    }
 - 
 
314 
  ]
 211 
  }
315 
 
 212 
 
316 
  return (
 213 
  return (
317 
    <>
 214 
    <>
318 
      <StyledItemContainer>
 215 
      <StyledItemContainer>
Línea 325... Línea 222...
325 
            {status && <span>{status}</span>}
 222 
            {status && <span>{status}</span>}
326 
            {isTopData && (
 223 
            {isTopData && (
327 
              <ul>
 224 
              <ul>
328 
                {link_view && (
 225 
                {link_view && (
329 
                  <li>
 226 
                  <li>
330 
                    <button onClick={() => navigateTo(link_view)}>
 227 
                    <ButtonPrimary
331 
                      <OpenInNew />
 228 
                      label={btnAcceptTitle || labels.view_profile}
332 
                      {btnAcceptTitle}
 229 
                      onClick={() => navigateTo(link_view)}
333 
                    </button>
 230 
                    />
334 
                  </li>
 231 
                  </li>
335 
                )}
 232 
                )}
336 
                {link_inmail && (
 233 
                {link_inmail && (
337 
                  <li>
 234 
                  <li>
338 
                    <button onClick={() => navigateTo(link_inmail)}>
 235 
                    <ButtonSecondary
339 
                      <ChatOutlined />
 236 
                      label={labels.message}
340 
                      {labels.message}
 237 
                      onClick={() => navigateTo(link_inmail)}
341 
                    </button>
 238 
                    />
342 
                  </li>
 239 
                  </li>
343 
                )}
 240 
                )}
344 
              </ul>
 241 
              </ul>
345 
            )}
 242 
            )}
346 
          </StyledContent>
 243 
          </StyledContent>
347 
        </StyledHeader>
 244 
        </StyledHeader>
348 
        <Actions>
 245 
        <Actions>
- 
 
 246 
          {link_view ? (
- 
 
 247 
            <ButtonPrimary
349 
          {linksOptions.map(({ label, url, icon: Icon, color }) => {
 248 
              onClick={() => navigateTo(link_view)}
350 
            const breakOptions = [link_view, link_edit, link_inmail]
 249 
              label={btnAcceptTitle || labels.view_profile}
- 
 
 250 
            />
- 
 
 251 
          ) : null}
351 
 
 252 
 
352 
            if (!url) {
 253 
          {link_edit ? (
353 
              return null
 254 
            <ButtonSecondary
- 
 
 255 
              onClick={() => navigateTo(link_edit)}
- 
 
 256 
              label={btnEditTitle || labels.edit}
354 
            }
 257 
            />
- 
 
 258 
          ) : null}
355 
 
 259 
 
- 
 
 260 
          {link_accept ? (
- 
 
 261 
            <ButtonSecondary
356 
            if (url === link_view && isTopData) {
 262 
              onClick={() => onConfirm(link_accept)}
357 
              return null
 263 
              label={labels.accept}
358 
            }
 264 
            />
- 
 
 265 
          ) : null}
359 
 
 266 
 
360 
            if (url === link_inmail && isTopData) {
 267 
          {link_inmail ? (
361 
              return null
 268 
            <ButtonSecondary
- 
 
 269 
              onClick={() => navigateTo(link_inmail)}
- 
 
 270 
              label={labels.message}
362 
            }
 271 
            />
- 
 
 272 
          ) : null}
363 
 
 273 
 
- 
 
 274 
          {link_admin ? (
- 
 
 275 
            <ButtonSecondary
- 
 
 276 
              onClick={() => getManageUrl(link_admin)}
- 
 
 277 
              label={labels.administrate}
364 
            return (
 278 
            />
365 
              <button
 279 
          ) : null}
- 
 
 280 
 
- 
 
 281 
          {link_approve ? (
366 
                key={url}
 282 
            <ButtonSecondary
- 
 
 283 
              onClick={() => confirmUrl(link_approve)}
367 
                className={`btn btn-${color}`}
 284 
              label={labels.approve}
- 
 
 285 
            />
- 
 
 286 
          ) : null}
- 
 
 287 
 
368 
                onClick={() => {
 288 
          {link_unblock ? (
- 
 
 289 
            <ButtonSecondary
369 
                  if (url === link_unfollow) {
 290 
              onClick={() => confirmUrl(link_unblock)}
370 
                    return handleUnfollow(url)
 291 
              label={labels.unblock}
- 
 
 292 
            />
371 
                  }
 293 
          ) : null}
372 
 
 294 
 
- 
 
 295 
          {link_request ? (
- 
 
 296 
            <ButtonSecondary
373 
                  if (url === link_admin) {
 297 
              onClick={() => confirmUrl(link_request)}
374 
                    return getManageUrl()
 298 
              label={labels.connect}
- 
 
 299 
            />
375 
                  }
 300 
          ) : null}
376 
 
 301 
 
377 
                  if (url === link_impersonate) {
 302 
          {link_impersonate ? (
- 
 
 303 
            <ButtonSecondary
378 
                    return getImpersonateUrl(url)
 304 
              onClick={() => getImpersonateUrl(link_impersonate)}
- 
 
 305 
              label='Personificar'
- 
 
 306 
            />
379 
                  }
 307 
          ) : null}
380 
 
 308 
 
- 
 
 309 
          {link_remove ? (
- 
 
 310 
            <ButtonTertiary
381 
                  if (!breakOptions.includes(url)) {
 311 
              onClick={() => showConfirm(link_remove)}
382 
                    return showConfirm(url)
 312 
              label={labels.remove_application}
- 
 
 313 
            />
- 
 
 314 
          ) : null}
- 
 
 315 
 
- 
 
 316 
          {link_reject ? (
383 
                  } else {
 317 
            <ButtonTertiary
- 
 
 318 
              onClick={() => showConfirm(link_reject)}
384 
                    history.push(url)
 319 
              label={labels.reject}
- 
 
 320 
            />
385 
                  }
 321 
          ) : null}
- 
 
 322 
 
- 
 
 323 
          {link_delete ? (
- 
 
 324 
            <ButtonTertiary
- 
 
 325 
              onClick={() => showConfirm(link_delete)}
- 
 
 326 
              label={btnCancelTitle || labels.cancel}
- 
 
 327 
            />
386 
                }}
 328 
          ) : null}
- 
 
 329 
 
- 
 
 330 
          {link_unfollow ? (
- 
 
 331 
            <ButtonTertiary
- 
 
 332 
              onClick={() => handleUnfollow(link_unfollow)}
- 
 
 333 
              label={labels.unfollow}
387 
              >
 334 
            />
- 
 
 335 
          ) : null}
- 
 
 336 
 
- 
 
 337 
          {link_block ? (
- 
 
 338 
            <ButtonTertiary
- 
 
 339 
              onClick={() => showConfirm(link_block)}
- 
 
 340 
              label={labels.block}
388 
                <Icon />
 341 
            />
389 
                {label}
 342 
          ) : null}
- 
 
 343 
 
- 
 
 344 
          {link_cancel ? (
390 
              </button>
 345 
            <ButtonTertiary
- 
 
 346 
              onClick={() => showConfirm(link_cancel)}
- 
 
 347 
              label={labels.cancel}
391 
            )
 348 
            />
- 
 
 349 
          ) : null}
- 
 
 350 
 
- 
 
 351 
          {link_leave ? (
- 
 
 352 
            <ButtonTertiary
- 
 
 353 
              onClick={() => showConfirm(link_leave)}
- 
 
 354 
              label={btnLeaveTitle}
392 
          })}
 355 
            />
- 
 
 356 
          ) : null}
393 
        </Actions>
 357 
        </Actions>
394 
        {loading && (
 358 
        {loading && (
395 
          <StyledSpinnerContainer>
 359 
          <StyledSpinnerContainer>
396 
            <Spinner />
 360 
            <Spinner />
397 
          </StyledSpinnerContainer>
 361 
          </StyledSpinnerContainer>