import React from "react"; import Head from "next/head"; import Image from "next/image"; import { connect } from "react-redux"; import { withRouter } from "next/router"; import moment from "moment"; import { SpinnerCircular } from "spinners-react"; import { reduxWrapper } from "../../store"; import Header from "../components/Header"; import Footer from "../components/Footer"; import Company from "../components/Company"; import InnerMenu from "./components/InnerMenu"; import { getSupportThemes, } from "../../actions"; import AccountLayout from "../components/Layout/Account"; class ContractPage extends React.Component { constructor(props) { super(props); this.state = { themes: null, question_selected: undefined, appeals: null, appeal: null, searched: null, loading: false, query: "", }; this.question_refs = []; } static getDerivedStateFromProps(nextProps, prevState) { return { themes: nextProps.themes, appeals: nextProps.appeals, appeal: nextProps.appeal, searched: nextProps.searched, }; } componentDidMount() { if (!this.state.loading) { this.setState({ loading: true }, () => { getSupportThemes({ dispatch: this.props.dispatch }) .then(() => { let question_selected = undefined; let found = false; for(let t in this.state.themes) { for(let q in this.state.themes[t].questions) { if(this.props.router.asPath.indexOf(this.state.themes[t].questions[q].id) > -1) { this.question_refs[this.state.themes[t].questions[q].id] = React.createRef(); question_selected = this.state.themes[t].questions[q].id; found = true; } } } this.setState({ loading: false, question_selected: question_selected }, () => { if(question_selected !== undefined) { setTimeout(() => { this.question_refs[question_selected].current.scrollIntoView({ behavior: 'smooth', block: 'center', }); }, 100); } }); }) .catch(() => {}); }); } } componentWillUnmount() { } _handle_onQuestion = (question) => { if(this.state.question_selected === question) { this.setState({ question_selected: undefined }); } else { this.setState({ question_selected: question }); } } _handle_onRequest = (question) => { this.props.router.push(`/support/request#${ question }`); } _handle_onChangeSearchQuery = (value) => { this.setState({ query: value }); } render() { const { loading, themes, question_selected, searched, appleals, query } = this.state; return ( ЛК Эволюция автолизинга

Обращения

{ loading ? (
) : ( <>
{ event.preventDefault(); }}>
{ this._handle_onChangeSearchQuery(event.target.value);} } />
{ themes !== undefined && themes !== null && themes.map((theme) => (

{ theme.name }

{ theme.questions.map((question) => (
this._handle_onQuestion(question.id) }>

{ question.title }

Процедура

{ question.documents !== null && (

Документы

) } { question.templates !== null && (

Шаблоны документов

{ question.templates.map((template, index) => (

{ template.filename }

)) }
) } { question.request && ( ) }
)) }
)) }
{/* Результат поиска */} { searched !== undefined && searched !== null && searched.map((question) => (

{ question.theme } / { question.name }

К каждой теме свободное html поле для миниинструкции (со ссылками на формы документов и документы). Привязка к теме обращения в CRM

)) } ) }