update for manager, graphic change updates
This commit is contained in:
merelendor
parent
8d71b34d3a
commit
e45142ee05
@ -1 +1,132 @@
|
||||
footer{background:#EDEFF5;padding:45px 0;box-sizing:border-box}@media all and (max-width:1600px) and (min-width:1280px){footer{padding:25px 0}}@media all and (max-width:768px){footer{margin-top:40px;pading:25px 0}}footer .container{display:flex;justify-content:space-between;align-items:flex-start;background:transparent;padding-bottom:0}@media all and (max-width:1279px){footer .container{padding:0;flex-wrap:wrap}}footer .column{width:270px;box-sizing:border-box}@media all and (max-width:1279px){footer .column{width:33.333%}footer .column:last-child{width:100%;display:flex;flex-wrap:wrap}footer .column:last-child>div,footer .column:last-child>p{width:33.333%;margin-top:35px;padding-right:30px;box-sizing:border-box;margin-bottom:0 !important}}@media all and (max-width:768px){footer .column{width:100%;margin-bottom:16px}footer .column:last-child>div,footer .column:last-child>p{width:100%;margin-top:15px;padding-right:0}}footer .column:not(:last-child){padding-right:15px}footer .column li:not(:last-child){margin-bottom:13px}@media all and (max-width:768px){footer .column li:not(:last-child){margin-bottom:8px}}footer .column li a{color:#000}footer .column p{color:#8E94A7;line-height:32px}footer .column a[href^="tel"]{display:inline-block;font-size:16px;line-height:32px;color:#000;padding-left:40px;background:url("/assets/images/icons/icon-phone.svg") no-repeat left center}@media all and (max-width:1600px){footer .column a[href^="tel"]{font-size:13px;background-size:24px;padding-left:37px}}footer .column a[href^="mailto"]{display:inline-block;font-size:16px;line-height:24px;color:#000;padding-left:40px;background:url("/assets/images/icons/icon-mail.svg") no-repeat left center}@media all and (max-width:1600px){footer .column a[href^="mailto"]{font-size:13px;background-size:24px;padding-left:37px}}footer .column div:nth-child(1),footer .column div:nth-child(2),footer .column div.socials{margin-bottom:40px}@media all and (max-width:1600px) and (min-width:1280px){footer .column div:nth-child(1),footer .column div:nth-child(2),footer .column div.socials{margin-bottom:20px}}footer .column div a{line-height:32px}@media all and (max-width:1279px){footer .column div a{line-height:1.45}}/*# sourceMappingURL=./style.css.map */
|
||||
footer {
|
||||
background: #EDEFF5;
|
||||
padding: 45px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@media all and (max-width: 1600px) and (min-width: 1280px) {
|
||||
footer {
|
||||
padding: 25px 0;
|
||||
}
|
||||
}
|
||||
@media all and (max-width: 768px) {
|
||||
footer {
|
||||
margin-top: 40px;
|
||||
pading: 25px 0;
|
||||
}
|
||||
}
|
||||
footer .container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
background: transparent;
|
||||
padding-bottom: 0;
|
||||
padding-top: 30px !important;
|
||||
}
|
||||
@media all and (max-width: 1279px) {
|
||||
footer .container {
|
||||
padding: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
footer .column {
|
||||
width: 270px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@media all and (max-width: 1279px) {
|
||||
footer .column {
|
||||
width: 33.333%;
|
||||
}
|
||||
footer .column:last-child {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
footer .column:last-child > div,
|
||||
footer .column:last-child > p {
|
||||
width: 33.333%;
|
||||
margin-top: 35px;
|
||||
padding-right: 30px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
@media all and (max-width: 768px) {
|
||||
footer .column {
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
footer .column:last-child > div,
|
||||
footer .column:last-child > p {
|
||||
width: 100%;
|
||||
margin-top: 15px;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
footer .column:not(:last-child) {
|
||||
padding-right: 15px;
|
||||
}
|
||||
footer .column li:not(:last-child) {
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
@media all and (max-width: 768px) {
|
||||
footer .column li:not(:last-child) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
footer .column li a {
|
||||
color: #000;
|
||||
}
|
||||
footer .column p {
|
||||
color: #8E94A7;
|
||||
line-height: 32px;
|
||||
}
|
||||
footer .column a[href^="tel"] {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
color: #000;
|
||||
padding-left: 40px;
|
||||
background: url("/assets/images/icons/icon-phone.svg") no-repeat left center;
|
||||
}
|
||||
@media all and (max-width: 1600px) {
|
||||
footer .column a[href^="tel"] {
|
||||
font-size: 13px;
|
||||
background-size: 24px;
|
||||
padding-left: 37px;
|
||||
}
|
||||
}
|
||||
footer .column a[href^="mailto"] {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #000;
|
||||
padding-left: 40px;
|
||||
background: url("/assets/images/icons/icon-mail.svg") no-repeat left center;
|
||||
}
|
||||
@media all and (max-width: 1600px) {
|
||||
footer .column a[href^="mailto"] {
|
||||
font-size: 13px;
|
||||
background-size: 24px;
|
||||
padding-left: 37px;
|
||||
}
|
||||
}
|
||||
footer .column div:nth-child(1),
|
||||
footer .column div:nth-child(2),
|
||||
footer .column div.socials {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
@media all and (max-width: 1600px) and (min-width: 1280px) {
|
||||
footer .column div:nth-child(1),
|
||||
footer .column div:nth-child(2),
|
||||
footer .column div.socials {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
footer .column div a {
|
||||
line-height: 32px;
|
||||
}
|
||||
@media all and (max-width: 1279px) {
|
||||
footer .column div a {
|
||||
line-height: 1.45;
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,6 +23,8 @@ footer {
|
||||
padding: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
padding-top: 30px !important;
|
||||
}
|
||||
|
||||
.column {
|
||||
|
||||
4839
css/main/style.css
4839
css/main/style.css
File diff suppressed because one or more lines are too long
@ -2914,13 +2914,13 @@ main {
|
||||
min-width: 13%;
|
||||
|
||||
&:nth-child(3) {
|
||||
width: 16%;
|
||||
min-width: 16%;
|
||||
width: 15%;
|
||||
min-width: 15%;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
width: 14%;
|
||||
min-width: 14%;
|
||||
width: 15%;
|
||||
min-width: 15%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@ -3978,10 +3978,12 @@ main .dropdown_blocks_list .dropdown_block .block_body {
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
margin-bottom: -40px;
|
||||
}
|
||||
|
||||
@media all and (max-width: 768px) {
|
||||
width: calc(100% - 32px);
|
||||
margin-bottom: -80px;
|
||||
}
|
||||
|
||||
.helpBox {
|
||||
@ -4002,6 +4004,14 @@ main .dropdown_blocks_list .dropdown_block .block_body {
|
||||
top: calc(100vh - 240px);
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
|
||||
@media all and (max-width: 960px) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 62px;
|
||||
min-width: 62px;
|
||||
@ -4077,10 +4087,75 @@ main .dropdown_blocks_list .dropdown_block .block_body {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: url("/assets/images/icons/close-blue.svg") no-repeat center;
|
||||
|
||||
@media all and (max-width: 960px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.helpBox_small {
|
||||
max-width: 100px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.16);
|
||||
border-top-right-radius: 17px;
|
||||
border-bottom-right-radius: 17px;
|
||||
border-top-left-radius: 17px;
|
||||
border-bottom-left-radius: 17px;
|
||||
|
||||
padding: 20px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0;
|
||||
position: sticky;
|
||||
margin-top: auto;
|
||||
pointer-events: all;
|
||||
top: calc(100vh - 150px);
|
||||
|
||||
@media all and (max-width: 1420px) {
|
||||
margin-left: -80px;
|
||||
border-top-left-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
}
|
||||
|
||||
@media all and (max-width: 960px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 62px;
|
||||
min-width: 62px;
|
||||
height: 62px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 31px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.feed {
|
||||
position: relative;
|
||||
padding-top: 0;
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React from "react";
|
||||
import DatePicker from "react-widgets/DatePicker";
|
||||
import "react-widgets/styles.css";
|
||||
import moment from "moment";
|
||||
|
||||
const messages = {
|
||||
moveToday: "Сегодня",
|
||||
@ -43,28 +44,34 @@ export default class DateInput extends React.Component
|
||||
|
||||
render()
|
||||
{
|
||||
const { id, placeholder, value, min, max, disabled } = this.props;
|
||||
const { id, placeholder, value, min, max, disabled, plain } = this.props;
|
||||
const { readonly } = this.state;
|
||||
|
||||
if(disabled)
|
||||
{
|
||||
return (
|
||||
<div className="date_input_wrapper" style={{ position: "relative" }}>
|
||||
<DatePicker
|
||||
messages={ messages }
|
||||
onFocus={ this._handle_onFocus }
|
||||
onBlur={ this._handle_onBlur }
|
||||
parse={ formats } id={ id }
|
||||
placeholder={ placeholder }
|
||||
value={ value }
|
||||
min={ min }
|
||||
max={ max }
|
||||
onChange={ this._handle_onChange }
|
||||
inputProps={{
|
||||
component: props => <input {...props} readOnly />
|
||||
}}
|
||||
/>
|
||||
<div style={{ position: "absolute", left: 0, top: 0, width: "100%", height: "100%", opacity: 0.0 }} onClick={ (event) => { event.stopPropagation(); event.preventDefault(); } }/>
|
||||
{ plain ? (
|
||||
moment(value).format("DD.MM.YYYY")
|
||||
) : (
|
||||
<>
|
||||
<DatePicker
|
||||
messages={ messages }
|
||||
onFocus={ this._handle_onFocus }
|
||||
onBlur={ this._handle_onBlur }
|
||||
parse={ formats } id={ id }
|
||||
placeholder={ placeholder }
|
||||
value={ value }
|
||||
min={ min }
|
||||
max={ max }
|
||||
onChange={ this._handle_onChange }
|
||||
inputProps={{
|
||||
component: props => <input {...props} readOnly />
|
||||
}}
|
||||
/>
|
||||
<div style={{ position: "absolute", left: 0, top: 0, width: "100%", height: "100%", opacity: 0.0 }} onClick={ (event) => { event.stopPropagation(); event.preventDefault(); } }/>
|
||||
</>
|
||||
) }
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -13,6 +13,7 @@ class Manager extends React.Component
|
||||
company: {},
|
||||
photo: undefined,
|
||||
loading: true,
|
||||
full: false,
|
||||
};
|
||||
}
|
||||
|
||||
@ -41,13 +42,18 @@ class Manager extends React.Component
|
||||
}
|
||||
}
|
||||
|
||||
_handle_onFull = () =>
|
||||
{
|
||||
this.setState({ full: this.state.full ? false : true });
|
||||
}
|
||||
|
||||
render()
|
||||
{
|
||||
const { company, loading, photo, } = this.state;
|
||||
const { company, loading, photo, full, } = this.state;
|
||||
|
||||
return (
|
||||
<div className="helpBox_wrapper">
|
||||
<div className="helpBox" style={ this.props.style !== undefined ? this.props.style : {} }>
|
||||
<div className={ `helpBox ${ !full ? "hidden" : "" }` }>
|
||||
<div className="avatar">
|
||||
{ loading ? (
|
||||
<SpinnerCircular size={24} thickness={51} speed={100} color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
|
||||
@ -63,12 +69,22 @@ class Manager extends React.Component
|
||||
<a href={ `mailto:${ company.manager_email }` }>{ company.manager_email }</a>
|
||||
{ company.manager_mobilephone !== undefined && company.manager_mobilephone !== null && company.manager_mobilephone !== "" && (
|
||||
<a href={ `tel:+${ company.manager_mobilephone.replace('/[^\d]/m', '') }` }>{ company.manager_mobilephone }</a>
|
||||
) }
|
||||
) }
|
||||
{ company.manager_telegram !== undefined && company.manager_telegram !== null && company.manager_telegram !== "" && (
|
||||
<a href={ `https://telegram.me/${ company.manager_telegram.replace("@", "") }` } target="_blank">{ `@${ company.manager_telegram.replace("@", "")}` }</a>
|
||||
) }
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
<div className="button" onClick={ this._handle_onFull }></div>
|
||||
</div>
|
||||
<div className={ `helpBox_small interactive ${ full ? "hidden" : "" }` } onClick={ this._handle_onFull }>
|
||||
<div className="avatar">
|
||||
{ loading ? (
|
||||
<SpinnerCircular size={24} thickness={51} speed={100} color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
|
||||
) : (
|
||||
<img src={ photo !== null ? photo : `/assets/images/icons/avatar.svg` } loading="lazy" alt={ company.manager_fio } />
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React from "react";
|
||||
import Slider from "react-slick";
|
||||
import numeral from "numeral";
|
||||
|
||||
function NextArrow(props)
|
||||
{
|
||||
@ -72,10 +73,10 @@ export default class CalculationsList extends React.Component
|
||||
<p className="item_desc">
|
||||
{ calculation.date_offset_type_comment !== null && (<>{ `${ calculation.date_offset_type_comment.label }: ${ calculation.date_offset_type_comment.value }` }<br/></>) }
|
||||
{ calculation.number_paydate_comment !== null && (<>{ `${ calculation.number_paydate_comment.label }: ${ calculation.number_paydate_comment.value }` }<br/></>) }
|
||||
{ calculation.insurance_price_result_comment !== null && (<>{ `${ calculation.insurance_price_result_comment.label }: ${ calculation.insurance_price_result_comment.value } ` }<br/></>) }
|
||||
{ calculation.insurance_price_result_comment !== null && (<>{ `${ calculation.insurance_price_result_comment.label }: ${ numeral(calculation.insurance_price_result_comment.value).format(' ., ') } ` } ₽<br/></>) }
|
||||
{ calculation.fix_last_payment_available_comment !== null && (<>{ `${ calculation.fix_last_payment_available_comment.label }: ${ calculation.fix_last_payment_available_comment.value ? "да" : "нет" }` }<br/></>) }
|
||||
{ calculation.period_new_comment !== null && (<>{ `${ calculation.period_new_comment.label }: ${ calculation.period_new_comment.value }` }<br/></>) }
|
||||
{ calculation.sum_comment !== null && (<>{ `${ calculation.sum_comment.label }: ${ calculation.sum_comment.value }` }<br/></>) }
|
||||
{ calculation.sum_comment !== null && (<>{ `${ calculation.sum_comment.label }: ${ numeral(calculation.sum_comment.value).format(' ., ') }` } ₽<br/></>) }
|
||||
</p>
|
||||
<a className="item_link interactive" onClick={ () => this._handle_onCalculation(calculation.addcontract_number) }>Подробнее</a>
|
||||
</div>
|
||||
|
||||
@ -125,7 +125,7 @@ export default class Comparison extends React.Component
|
||||
) }
|
||||
{ calculation !== undefined && calculation !== null && calculation.insurance_price_result_comment !== null && (
|
||||
<div className="form_field">
|
||||
<p><span>{ calculation.insurance_price_result_comment.label }:</span> { calculation.insurance_price_result_comment.value }</p>
|
||||
<p><span>{ calculation.insurance_price_result_comment.label }:</span> { numeral(calculation.insurance_price_result_comment.value).format(' ., ') } ₽</p>
|
||||
</div>
|
||||
) }
|
||||
{ calculation !== undefined && calculation !== null && calculation.number_paydate_comment !== null && (
|
||||
|
||||
@ -50,7 +50,7 @@ class PaymentDate extends React.Component
|
||||
const { value, min, max } = this.state;
|
||||
|
||||
return (
|
||||
<div className="form_field" style={ option.disable ? { opacity: 0.5 } : {} }>
|
||||
<div className="form_field">
|
||||
<label>Дата платежа</label>
|
||||
<DateInput
|
||||
placeholder=""
|
||||
@ -60,6 +60,7 @@ class PaymentDate extends React.Component
|
||||
id={"date_to"}
|
||||
onChange={ this._handle_onChange }
|
||||
disabled={ option.disable ? true : false }
|
||||
plain={ true }
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
@ -171,15 +172,23 @@ class DateOffestType extends React.Component
|
||||
const { value } = this.state;
|
||||
|
||||
return (
|
||||
<div className="form_field" style={ option.disable ? { opacity: 0.5 } : {} }>
|
||||
<div className="form_field">
|
||||
<label>Тип каникул</label>
|
||||
<div className="form_field">
|
||||
<input type="radio" hidden id="weeekend_type_1" name="weeekend_type" checked={ value === 100000001 ? true : false } disabled={ option.disable ? true : false } onChange={ () => this._handle_onChange(100000001) }/>
|
||||
<label htmlFor="weeekend_type_1">С увеличением срока</label>
|
||||
{ !option.disable || (option.disable && value === 100000001) && (
|
||||
<>
|
||||
<input type="radio" hidden id="weeekend_type_1" name="weeekend_type" checked={ value === 100000001 ? true : false } disabled={ option.disable ? true : false } onChange={ () => this._handle_onChange(100000001) }/>
|
||||
<label htmlFor="weeekend_type_1">С увеличением срока</label>
|
||||
</>
|
||||
) }
|
||||
</div>
|
||||
<div className="form_field">
|
||||
<input type="radio" hidden id="weeekend_type_2" name="weeekend_type" checked={ value === 100000000 ? true : false } disabled={ option.disable ? true : false } onChange={ () => this._handle_onChange(100000000) }/>
|
||||
<label htmlFor="weeekend_type_2">Без изменения срока</label>
|
||||
{ !option.disable || (option.disable && value === 100000000) && (
|
||||
<>
|
||||
<input type="radio" hidden id="weeekend_type_2" name="weeekend_type" checked={ value === 100000000 ? true : false } disabled={ option.disable ? true : false } onChange={ () => this._handle_onChange(100000000) }/>
|
||||
<label htmlFor="weeekend_type_2">Без изменения срока</label>
|
||||
</>
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@ -393,11 +402,17 @@ class InsurancePriceSelector extends React.Component
|
||||
|
||||
return (
|
||||
<div className="form_field">
|
||||
<label style={ option.disable ? { opacity: 0.5 } : {} }>Сумма пролонгации</label>
|
||||
<div className="input_with_notes" style={ option.disable ? { opacity: 0.5 } : {} }>
|
||||
<input type="number" placeholder="Укажите сумму" defaultValue={ value } disabled={ option.disable ? true : false } onChange={ this._handle_onChange }/>
|
||||
<span>от { numeral(min).format(' ., ') } ₽</span>
|
||||
<span>до { numeral(max).format(' ., ') } ₽</span>
|
||||
<label>Сумма пролонгации</label>
|
||||
<div className="input_with_notes">
|
||||
{ option.disable ? (
|
||||
<>{ numeral(value).format(' ., ') } ₽</>
|
||||
) : (
|
||||
<>
|
||||
<input type="number" placeholder="Укажите сумму" defaultValue={ value } disabled={ option.disable ? true : false } onChange={ this._handle_onChange }/>
|
||||
<span>от { numeral(min).format(' ., ') } ₽</span>
|
||||
<span>до { numeral(max).format(' ., ') } ₽</span>
|
||||
</>
|
||||
) }
|
||||
</div>
|
||||
{ option.information !== undefined && option.information !== null && (
|
||||
<div className="help_tooltip">
|
||||
@ -465,7 +480,7 @@ class InsuranceDateFromSelector extends React.Component
|
||||
const { value, min, max } = this.state;
|
||||
|
||||
return (
|
||||
<div className="form_field" style={ option.disable ? { opacity: 0.5 } : {} }>
|
||||
<div className="form_field">
|
||||
<label>Дата начала пролонгации</label>
|
||||
<DateInput
|
||||
placeholder=""
|
||||
@ -475,6 +490,7 @@ class InsuranceDateFromSelector extends React.Component
|
||||
id={"date_to"}
|
||||
onChange={ this._handle_onChange }
|
||||
disabled={ option.disable ? true : false }
|
||||
plain={ true }
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -161,11 +161,6 @@ class ContractSchedulePage extends React.Component
|
||||
|
||||
let { date, car } = contracts_info[ number ] !== undefined ? contracts_info[ number ] : {};
|
||||
|
||||
console.log(".".repeat(50));
|
||||
console.log("this.state", this.state);
|
||||
console.log("this.props", this.props);
|
||||
console.log(".".repeat(50));
|
||||
|
||||
console.log("RENDER", "payments");
|
||||
console.log(payments);
|
||||
|
||||
|
||||
@ -28,6 +28,7 @@ class SupportAppealsPage extends React.Component
|
||||
{
|
||||
super(props);
|
||||
this.state = {
|
||||
active: true,
|
||||
appeals: null,
|
||||
loading: false,
|
||||
};
|
||||
@ -67,10 +68,28 @@ class SupportAppealsPage extends React.Component
|
||||
{
|
||||
}
|
||||
|
||||
_activeAppealsCount = () =>
|
||||
{
|
||||
const { appeals } = this.state;
|
||||
let count = 0;
|
||||
|
||||
if(appeals.list !== undefined && appeals.list !== null)
|
||||
{
|
||||
for(let i in appeals.list) { if(appeals.list[i].status === "active") { count++; } }
|
||||
}
|
||||
|
||||
return count;
|
||||
}
|
||||
|
||||
_handle_onActive = () =>
|
||||
{
|
||||
this.setState({ active: this.state.active ? false : true });
|
||||
}
|
||||
|
||||
render()
|
||||
{
|
||||
const { number } = this.props;
|
||||
const { loading, appeals } = this.state;
|
||||
const { loading, active, appeals } = this.state;
|
||||
|
||||
const status = {
|
||||
active: { title: "Активное", color: "#04A8A4" },
|
||||
@ -78,6 +97,7 @@ class SupportAppealsPage extends React.Component
|
||||
cancelled: { title: "Отменено", color: "#A8026B", }
|
||||
};
|
||||
|
||||
const active_count = this._activeAppealsCount();
|
||||
console.log(appeals);
|
||||
|
||||
return (
|
||||
@ -92,55 +112,75 @@ class SupportAppealsPage extends React.Component
|
||||
<div className="left" style={{ flexDirection: "column" }}>
|
||||
<h1 className="section_title">Мои обращения</h1>
|
||||
</div>
|
||||
<Company { ...this.props }/>
|
||||
<Company { ...this.props } />
|
||||
</div>
|
||||
<div className="aside_container about">
|
||||
<InnerMenu { ...this.props } />
|
||||
<article>
|
||||
<div style={{ height: "30px", display: "flex", flexDirection: "row", alignItems: "flex-start", justifyContent: "flex-end", }}>
|
||||
<div className="form_field">
|
||||
<input type="checkbox" hidden id="only_active" name="only_active" checked={ active ? true : false } onChange={ this._handle_onActive }/>
|
||||
<label htmlFor="only_active">Показывать только активные обращения</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="appeal_list">
|
||||
{ appeals !== undefined && appeals !== null && appeals.list !== undefined && appeals.list !== null && (
|
||||
<>
|
||||
{ appeals.list.length > 0 ? (
|
||||
<>
|
||||
{ appeals.list.map((appeal, index) =>
|
||||
(
|
||||
<div className="appeal_item" key={ index }>
|
||||
<div className="item_header">
|
||||
<p>Номер обращения: <b>{ appeal.number } от { moment(appeal.created_date, "YYYY-MM-DD").format("DD.MM.YYYY") }</b></p>
|
||||
<p>Отвественный сотрудник ОРК: <b>{ appeal.owner }</b></p>
|
||||
{ appeal.contracts.length > 0 && (
|
||||
<p>Договор{ appeal.contracts.length > 1 && "ы" }: <b>{ appeal.contracts.map((contract, contract_index) => (<span key={ contract_index }>№ { contract }{ contract_index < appeal.contracts.length - 1 && ", " }</span>)) }</b></p>
|
||||
) }
|
||||
<div className="status" style={{ backgroundColor: status[appeal.status].color }}>{ status[appeal.status].title }</div>
|
||||
</div>
|
||||
<div className="item_body">
|
||||
<div className="item_text">
|
||||
<p><b>Тема запроса</b></p>
|
||||
<p>{ appeal.subject }</p>
|
||||
</div>
|
||||
<div className="item_text">
|
||||
<p><b>Ответ ОРК</b></p>
|
||||
<p>{ appeal.answer === "" ? "Без ответа" : appeal.answer }</p>
|
||||
{ appeal.documents.length > 0 && (
|
||||
<div className="dosc_list medium-icon">
|
||||
{ appeal.documents.map((document, document_index) =>
|
||||
(
|
||||
<div className="row" key={ document_index }>
|
||||
<p className="doc_name i-pdf extension" data-format={ document.doc_extension }>
|
||||
{ document.doc_name }
|
||||
<span>Скачать документ</span>
|
||||
</p>
|
||||
</div>
|
||||
)) }
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
{ active && active_count === 0 ? (
|
||||
<div style={{ justifyContent: "center", alignItems: "center", display: "flex", minHeight: "150px" }}>
|
||||
<p>У Вас нет активных обращений.<br/><a className="interactive" onClick={ this._handle_onActive }>Показать все обращения</a></p>
|
||||
</div>
|
||||
)) }
|
||||
) : (
|
||||
<>
|
||||
{ appeals.list.map((appeal, index) =>
|
||||
{
|
||||
if(active) { if(appeal.status !== "active") { return null; } }
|
||||
|
||||
return (
|
||||
<div className="appeal_item" key={ index }>
|
||||
<div className="item_header">
|
||||
<p>Номер обращения: <b>{ appeal.number } от { moment(appeal.created_date, "YYYY-MM-DD").format("DD.MM.YYYY") }</b></p>
|
||||
<p>Отвественный сотрудник ОРК: <b>{ appeal.owner }</b></p>
|
||||
{ appeal.contracts.length > 0 && (
|
||||
<p>Договор{ appeal.contracts.length > 1 && "ы" }: <b>{ appeal.contracts.map((contract, contract_index) => (<span key={ contract_index }>№ { contract }{ contract_index < appeal.contracts.length - 1 && ", " }</span>)) }</b></p>
|
||||
) }
|
||||
<div className="status" style={{ backgroundColor: status[appeal.status].color }}>{ status[appeal.status].title }</div>
|
||||
</div>
|
||||
<div className="item_body">
|
||||
<div className="item_text">
|
||||
<p><b>Тема запроса</b></p>
|
||||
<p>{ appeal.subject }</p>
|
||||
</div>
|
||||
<div className="item_text">
|
||||
<p><b>Ответ ОРК</b></p>
|
||||
<p>{ appeal.answer === "" ? "Без ответа" : appeal.answer }</p>
|
||||
{ appeal.documents.length > 0 && (
|
||||
<div className="dosc_list medium-icon">
|
||||
{ appeal.documents.map((document, document_index) =>
|
||||
(
|
||||
<div className="row" key={ document_index }>
|
||||
<p className="doc_name i-pdf extension" data-format={ document.doc_extension }>
|
||||
{ document.doc_name }
|
||||
<span>Скачать документ</span>
|
||||
</p>
|
||||
</div>
|
||||
)) }
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}) }
|
||||
</>
|
||||
) }
|
||||
</>
|
||||
) : (
|
||||
<p>У Вас пока нет обращений.</p>
|
||||
<div style={{ justifyContent: "center", alignItems: "center", display: "flex", minHeight: "150px" }}>
|
||||
<p>У Вас пока нет обращений.</p>
|
||||
</div>
|
||||
) }
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -17,15 +17,6 @@ const contractsInfoReducer = (state = initialState.contracts_info, action) =>
|
||||
|
||||
case actionTypes.CONTRACTS_INFO:
|
||||
{
|
||||
console.log("actionTypes.CONTRACTS_INFO");
|
||||
console.log("state", state);
|
||||
console.log("action.data", action.data);
|
||||
console.log("-".repeat(100));
|
||||
console.log({
|
||||
...state, ...action.data,
|
||||
});
|
||||
console.log("=".repeat(100));
|
||||
|
||||
return {
|
||||
...state, ...action.data,
|
||||
};
|
||||
@ -33,10 +24,6 @@ const contractsInfoReducer = (state = initialState.contracts_info, action) =>
|
||||
|
||||
case actionTypes.CONTRACTS_INFO_RESET:
|
||||
{
|
||||
console.log("actionTypes.CONTRACTS_INFO_RESET");
|
||||
console.log("state", state);
|
||||
console.log("action.data", action.data);
|
||||
|
||||
return {};
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user