Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 7156 Rev 7157
Línea 27... Línea 27...
27 
      font-weight: 600;
 27 
      font-weight: 600;
28 
    }
 28 
    }
29 
  }
 29 
  }
30 
`
 30 
`
Línea 31... Línea 31...
31 
 
 31 
 
32 
const KnowledgeGrid = styled.div`
 32 
const QuestionsGrid = styled.div`
33 
  display: grid;
 33 
  display: grid;
34 
  grid-template-columns: repeat(auto-fit, 250px);
 34 
  grid-template-columns: repeat(auto-fit, 250px);
35 
  gap: 1rem;
 35 
  gap: 1rem;
Línea 36... Línea 36...
36 
`
 36 
`
37 
 
 37 
 
38 
const KnowledgeSearch = styled(SearchInput)`
 38 
const KnowledgeSearch = styled(SearchInput)`
Línea 39... Línea 39...
39 
  background-color: var(--bg-color);
 39 
  background-color: var(--bg-color);
40 
`
 40 
`
41 
 
 41 
 
42 
const MyCoachPage = () => {
 42 
const MyCoachPage = () => {
43 
  const [knowledges, setKnowledges] = useState([])
 43 
  const [questions, setQuestions] = useState([])
44 
  const [knowledgesCategories, setKnowledgesCategories] = useState([])
 44 
  const [questionsCategories, setQuestionsCategories] = useState([])
45 
  const [search, setSearch] = useState('')
 45 
  const [search, setSearch] = useState('')
46 
  const [category, setCategory] = useState('')
 46 
  const [category, setCategory] = useState('')
Línea 51... Línea 51...
51 
  const addUrl = useRef('')
 51 
  const addUrl = useRef('')
52 
  const actionUrl = useRef('')
 52 
  const actionUrl = useRef('')
53 
  const labels = useSelector(({ intl }) => intl.labels)
 53 
  const labels = useSelector(({ intl }) => intl.labels)
54 
  const dispatch = useDispatch()
 54 
  const dispatch = useDispatch()
Línea -... Línea 55...
- 
 
 55 
 
- 
 
 56 
  const getCategories = () => {
- 
 
 57 
    axios
- 
 
 58 
      .get('/my-coach', {
- 
 
 59 
        headers: {
- 
 
 60 
          'Content-Type': 'application/json',
- 
 
 61 
        },
- 
 
 62 
      })
- 
 
 63 
      .then((response) => {
- 
 
 64 
        const { data, success } = response.data
- 
 
 65 
 
- 
 
 66 
        if (!success) {
- 
 
 67 
          const errorMessage =
- 
 
 68 
            typeof data === 'string' ? data : labels.error_there_was_an_error
- 
 
 69 
 
- 
 
 70 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
- 
 
 71 
          return
- 
 
 72 
        }
- 
 
 73 
 
- 
 
 74 
        setQuestionsCategories(data.categories)
- 
 
 75 
      })
- 
 
 76 
      .catch((error) => {
- 
 
 77 
        dispatch(
- 
 
 78 
          addNotification({
- 
 
 79 
            style: 'danger',
- 
 
 80 
            msg: labels.error_there_was_an_error,
- 
 
 81 
          })
- 
 
 82 
        )
- 
 
 83 
        throw new Error(error)
- 
 
 84 
      })
- 
 
 85 
  }
55 
 
 86 
 
56 
  const getCoachInfo = (search = '', page = 1, category_id = '') => {
 87 
  const getQuestions = (search = '', page = 1, category_id = '') => {
57 
    const urlParams = { search, page, category_id }
 88 
    const urlParams = { search, page, category_id }
58 
    axios
 89 
    axios
59 
      .get(`/my-coach?${jsonToParams(urlParams)}`, {
 90 
      .get(`my-coach/questions?${jsonToParams(urlParams)}`, {
60 
        headers: {
 91 
        headers: {
61 
          'Content-Type': 'application/json',
 92 
          'Content-Type': 'application/json',
62 
        },
 93 
        },
63 
      })
 94 
      })
Línea 100... Línea 131...
100 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
 131 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
101 
          return
 132 
          return
102 
        }
 133 
        }
Línea 103... Línea 134...
103 
 
 134 
 
104 
        dispatch(addNotification({ style: 'success', msg: data }))
 135 
        dispatch(addNotification({ style: 'success', msg: data }))
105 
        getCoachInfo()
 136 
        getQuestions(search, currentPage, category)
106 
        closeModal()
 137 
        closeModal()
107 
      })
 138 
      })
108 
      .catch((error) => {
 139 
      .catch((error) => {
109 
        dispatch(
 140 
        dispatch(
Línea 114... Línea 145...
114 
        )
 145 
        )
115 
        throw new Error(error)
 146 
        throw new Error(error)
116 
      })
 147 
      })
117 
  }
 148 
  }
Línea 118... Línea 149...
118 
 
 149 
 
119 
  const addKnowledge = (url) => {
 150 
  const addQuestion = (url) => {
120 
    actionUrl.current = url
 151 
    actionUrl.current = url
121 
    setModalShow('add')
 152 
    setModalShow('add')
Línea 122... Línea 153...
122 
  }
 153 
  }
123 
 
 154 
 
124 
  const editKnowledge = (url) => {
 155 
  const editQuestion = (url) => {
125 
    actionUrl.current = url
 156 
    actionUrl.current = url
Línea 126... Línea 157...
126 
    setModalShow('edit')
 157 
    setModalShow('edit')
127 
  }
 158 
  }
128 
 
 159 
 
129 
  const deleteKnowledge = (url) => {
 160 
  const deleteQuestion = (url) => {
Línea 130... Línea 161...
130 
    actionUrl.current = url
 161 
    actionUrl.current = url
Línea 137... Línea 168...
137 
  }
 168 
  }
Línea 138... Línea 169...
138 
 
 169 
 
Línea 139... Línea 170...
139 
  const handleInputChange = debounce((e) => setSearch(e.target.value), 500)
 170 
  const handleInputChange = debounce((e) => setSearch(e.target.value), 500)
- 
 
 171 
 
- 
 
 172 
  useEffect(() => {
- 
 
 173 
    getCategories()
- 
 
 174 
  }, [])
140 
 
 175 
 
141 
  useEffect(() => {
 176 
  useEffect(() => {
Línea 142... Línea 177...
142 
    getCoachInfo(search, currentPage, category)
 177 
    getQuestions(search, currentPage, category)
143 
  }, [search, currentPage, category])
 178 
  }, [search, currentPage, category])
144 
 
 179 
 
145 
  return (
 180 
  return (
146 
    <>
 181 
    <>
147 
      <Container as="section" className="companies-info">
 182 
      <Container as="section" className="companies-info">
148 
        <div className="company-title">
 183 
        <div className="company-title">
149 
          <h1 className="title mx-auto">{labels.knowledge_area_title}</h1>
 184 
          <h1 className="title mx-auto">{labels.knowledge_area_title}</h1>
150 
          {allowAdd && (
 185 
          {allowAdd && (
151 
            <h2
 186 
            <h2
152 
              className="title cursor-pointer"
 187 
              className="title cursor-pointer"
153 
              onClick={() => addKnowledge(addUrl.current)}
 188 
              onClick={() => addQuestion(addUrl.current)}
154 
            >
 189 
            >
155 
              {labels.knowledge_area_add}
 190 
              {labels.knowledge_area_add}
Línea 172... Línea 207...
172 
                  />
 207 
                  />
173 
                  <label htmlFor="category-all">
 208 
                  <label htmlFor="category-all">
174 
                    {labels.knowledge_area_category_all}
 209 
                    {labels.knowledge_area_category_all}
175 
                  </label>
 210 
                  </label>
176 
                </li>
 211 
                </li>
177 
                {knowledgesCategories.map(({ uuid, name }) => (
 212 
                {questionsCategories.map(({ uuid, name }) => (
178 
                  <li className={category === uuid && 'selected'} key={uuid}>
 213 
                  <li className={category === uuid && 'selected'} key={uuid}>
179 
                    <input
 214 
                    <input
180 
                      type="radio"
 215 
                      type="radio"
181 
                      id={`category-${name}`}
 216 
                      id={`category-${name}`}
182 
                      name="category"
 217 
                      name="category"
Línea 194... Línea 229...
194 
          <Col className="px-0">
 229 
          <Col className="px-0">
195 
            <KnowledgeSearch
 230 
            <KnowledgeSearch
196 
              onChange={handleInputChange}
 231 
              onChange={handleInputChange}
197 
              placeholder={labels.search}
 232 
              placeholder={labels.search}
198 
            />
 233 
            />
199 
 
 - 
 
200 
            <KnowledgeGrid className="mt-3">
 234 
            <QuestionsGrid className="mt-3">
201 
              {knowledges.length ? (
 235 
              {questions.length ? (
202 
                knowledges.map((knowledge, index) => (
 236 
                questions.map((knowledge, index) => (
203 
                  <KnowledgeItem
 237 
                  <KnowledgeItem
204 
                    key={index}
 238 
                    key={index}
205 
                    {...knowledge}
 239 
                    {...knowledge}
206 
                    onEdit={editKnowledge}
 240 
                    onEdit={editQuestion}
207 
                    onDelete={deleteKnowledge}
 241 
                    onDelete={deleteQuestion}
208 
                  />
 242 
                  />
209 
                ))
 243 
                ))
210 
              ) : (
 244 
              ) : (
211 
                <EmptySection
 245 
                <EmptySection
212 
                  message={labels.error_no_record_matched_your_query}
 246 
                  message={labels.error_no_record_matched_your_query}
213 
                />
 247 
                />
214 
              )}
 248 
              )}
215 
            </KnowledgeGrid>
 249 
            </QuestionsGrid>
216 
            <PaginationComponent
 250 
            <PaginationComponent
217 
              onChangePage={(newPage) => setCurrentPage(newPage)}
 251 
              onChangePage={(newPage) => setCurrentPage(newPage)}
218 
              currentActivePage={currentPage}
 252 
              currentActivePage={currentPage}
219 
              pages={totalPages}
 253 
              pages={totalPages}
220 
              isRow
 254 
              isRow