Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 6956 Rev 6960
Línea 1... Línea 1...
1 
import React from 'react'
 1 
import React from 'react'
2 
import { useSelector } from 'react-redux'
 2 
import { useSelector } from 'react-redux'
3 
import styled from 'styled-components'
 3 
import styled, { css } from 'styled-components'
4 
import Avatar from '@mui/material/Avatar'
 4 
import Avatar from '@mui/material/Avatar'
Línea 5... Línea 5...
5 
 
 5 
 
6 
import Options from '../UI/Option'
 6 
import Options from '../UI/Option'
Línea -... Línea 7...
- 
 
 7 
import EmptySection from '../UI/EmptySection'
- 
 
 8 
 
- 
 
 9 
const ContactsContainer = styled.div`
- 
 
 10 
  background-color: var(--bg-color);
- 
 
 11 
  border-radius: var(--border-radius);
- 
 
 12 
  border: 1px solid var(--border-primary);
- 
 
 13 
  display: flex;
- 
 
 14 
  flex-direction: column;
- 
 
 15 
  height: 100%;
- 
 
 16 
  gap: 0.5rem;
- 
 
 17 
  padding: 1rem 0.5rem;
- 
 
 18 
  max-height: 80vh;
- 
 
 19 
`
- 
 
 20 
 
- 
 
 21 
const ContactHeader = styled.div`
- 
 
 22 
  position: relative;
- 
 
 23 
 
- 
 
 24 
  h1 {
- 
 
 25 
    font-weight: 600;
- 
 
 26 
    font-size: 1.3rem;
- 
 
 27 
  }
- 
 
 28 
`
- 
 
 29 
 
- 
 
 30 
const ContactList = styled.ul`
- 
 
 31 
  display: flex;
- 
 
 32 
  flex-direction: column;
- 
 
 33 
  overflow: auto;
- 
 
 34 
  gap: 5rem;
7 
import EmptySection from '../UI/EmptySection'
 35 
`
8 
 
 36 
 
9 
const StyledContact = styled.div`
 37 
const ContactItem = styled.div`
10 
  align-items: center;
 38 
  align-items: center;
11 
  display: flex;
 39 
  display: flex;
12 
  height: auto;
 40 
  height: auto;
13 
  padding: 0.5rem 1rem;
 41 
  padding: 0.5rem 1rem;
- 
 
 42 
  gap: 0.5rem;
- 
 
 43 
  cursor: pointer;
- 
 
 44 
 
- 
 
 45 
  ${(props) =>
- 
 
 46 
    props.current &&
- 
 
 47 
    css`
14 
  gap: 0.5rem;
 48 
      background-color: var(--online-green);
- 
 
 49 
    `}
15 
  cursor: pointer;
 50 
`
16 
`
 51 
 
17 
const StyledContactInfo = styled.div`
 52 
const ContactInfo = styled.div`
Línea 18... Línea 53...
18 
  display: flex;
 53 
  display: flex;
19 
  flex-direction: column;
 54 
  flex-direction: column;
Línea 27... Línea 62...
27 
    max-width: 20ch;
 62 
    max-width: 20ch;
28 
  }
 63 
  }
29 
`
 64 
`
Línea 30... Línea 65...
30 
 
 65 
 
31 
const Contacts = ({ children }) => {
 66 
const Contacts = ({ children }) => {
32 
  return <aside className="chat_contacts">{children}</aside>
 67 
  return <ContactsContainer>{children}</ContactsContainer>
Línea 33... Línea 68...
33 
}
 68 
}
34 
 
 69 
 
35 
const Header = ({ options = {}, children }) => {
 70 
const Header = ({ options = {}, children }) => {
36 
  return (
 71 
  return (
37 
    <div className="position-relative">
 72 
    <ContactHeader>
38 
      {children}
 73 
      {children}
39 
      {!!options.length && <Options options={options} />}
 74 
      {!!options.length && <Options options={options} />}
40 
    </div>
 75 
    </ContactHeader>
Línea 41... Línea 76...
41 
  )
 76 
  )
42 
}
 77 
}
Línea 47... Línea 82...
47 
  currentConversation,
 82 
  currentConversation,
48 
}) => {
 83 
}) => {
49 
  const labels = useSelector(({ intl }) => intl.labels)
 84 
  const labels = useSelector(({ intl }) => intl.labels)
Línea 50... Línea 85...
50 
 
 85 
 
51 
  return (
 86 
  return (
52 
    <div className="contacts-list">
 - 
 
53 
      <ul>
 87 
    <ContactList>
54 
        {!contacts.length ? (
 88 
      {!contacts.length ? (
55 
          <EmptySection message={labels.datatable_szerorecords} />
 89 
        <EmptySection message={labels.datatable_szerorecords} />
56 
        ) : (
 90 
      ) : (
57 
          contacts.map((contact) => (
 91 
        contacts.map((contact) => (
- 
 
 92 
          <li key={contact.id}>
- 
 
 93 
            <List.Item
- 
 
 94 
              contact={contact}
58 
            <li key={contact.id}>
 95 
              onClick={onChange}
59 
              <List.Item contact={contact} onClick={onChange} />
 96 
              isCurrent={currentConversation?.id === contact.id}
60 
            </li>
 97 
            />
61 
          ))
 98 
          </li>
62 
        )}
 99 
        ))
63 
      </ul>
 100 
      )}
64 
    </div>
 101 
    </ContactList>
65 
  )
 102 
  )
Línea 66... Línea 103...
66 
}
 103 
}
67 
 
 104 
 
Línea 68... Línea 105...
68 
const Item = ({ contact, onClick }) => {
 105 
const Item = ({ contact, onClick, isCurrent }) => {
69 
  const labels = useSelector(({ intl }) => intl.labels)
 106 
  const labels = useSelector(({ intl }) => intl.labels)
70 
 
 107 
 
71 
  return (
 108 
  return (
72 
    <StyledContact onClick={() => onClick(contact)}>
 109 
    <ContactItem onClick={() => onClick(contact)} current={isCurrent}>
73 
      <Avatar
 110 
      <Avatar
74 
        src={contact.image || '/images/users-group.png'}
 111 
        src={contact.image || '/images/users-group.png'}
75 
        alt="image-image"
 112 
        alt="image-image"
76 
        sx={{ width: 32, height: 32 }}
 113 
        sx={{ width: 32, height: 32 }}
77 
      />
 114 
      />
78 
      <StyledContactInfo>
 115 
      <ContactInfo>
79 
        <span>{contact.name}</span>
 116 
        <span>{contact.name}</span>
80 
        {contact.last_message && (
 117 
        {contact.last_message && (
81 
          <p>
 118 
          <p>
82 
            {`${contact.count_not_seen_messages} ${labels.new_messages} |
 119 
            {`${contact.count_not_seen_messages} ${labels.new_messages} |
83 
              ${contact.last_message}`}
 120 
              ${contact.last_message}`}
84 
          </p>
 121 
          </p>
85 
        )}
 122 
        )}
86 
      </StyledContactInfo>
 123 
      </ContactInfo>
Línea 87... Línea 124...
87 
    </StyledContact>
 124 
    </ContactItem>
88 
  )
 125 
  )