Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component } from 'react';
- import { bindActionCreators } from 'redux';
- import { connect } from 'react-redux';
- import PropTypes from 'prop-types';
- import { list2Options, getUrlParams } from 'libs/utils';
- import moment from 'moment';
- import { Select, RangeSelect, Checkbox, Scrollarea, Button } from 'react-trendagent-ui';
- import { OBJECT_VIEW, PAYMENTS, DELTA_PRICE } from 'constants/directories';
- import { getCheckerboardFiltersValues, getCheckerboardFilters, actionCreators as CheckerboardActions } from 'redux/modules/Checkerboard';
- import { getBlock } from 'redux/modules/Block';
- const SelectedFilter = (props) => {
- let value = '';
- switch(props.filter) {
- case 'price':
- if(props.value.from) value += `от ${String(props.value.from).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1 ')} `;
- if(props.value.to) value += `до ${String(props.value.to).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1 ')} `;
- value += 'руб.';
- break;
- case 'totalArea':
- value += 'S общ. ';
- if(props.value.from) value += `от ${props.value.from} `;
- if(props.value.to) value += `до ${props.value.to} `;
- value += 'м²';
- break;
- case 'kitchenArea':
- value += 'S кух. ';
- if(props.value.from) value += `от ${props.value.from} `;
- if(props.value.to) value += `до ${props.value.to} `;
- value += 'м²';
- break;
- case 'balconyArea':
- value += 'S бал. ';
- if(props.value.from) value += `от ${props.value.from} `;
- if(props.value.to) value += `до ${props.value.to} `;
- value += 'м²';
- break;
- case 'delta_price':
- if (props.value) {
- const delta = DELTA_PRICE.find(item => String(item.label) === String(props.value));
- if (delta) value = delta.label;
- }
- break;
- default:
- value = props.value;
- break;
- }
- return (
- <div className='checkerboard__filters-selected-item'>
- <div className='checkerboard__filters-selected-item-txt' title={value}>{value}</div>
- <button type='button' className='checkerboard__filters-selected-item-remove' onClick={props.removeFilter} />
- </div>
- )
- };
- const mapStateToProps = (state, { blockID }) => {
- const filters = getCheckerboardFilters(state, { blockID });
- const deadlinesList = [];
- console.log('filters.buildings', filters.buildings);
- if (filters.buildings) {
- const deadlines = filters.buildings.map(building => {
- const date = moment(building.deadline).endOf('quarter');
- const { deadline_label, deadline_short } = building;
- if (date.isBefore(moment())) {
- return { deadline_label, deadline_short, timestamp: moment().subtract(1, 'quarters').unix() };
- }
- return { deadline_label, deadline_short, timestamp: date.endOf('quarter').unix() };
- }).filter((val, id, self) => self.indexOf(val) === id);
- if (deadlines) {
- deadlines.sort((a, b) => a.timestamp - b.timestamp);
- deadlines.forEach(item => {
- const date = moment.unix(item.timestamp);
- const label = (date.isBefore(moment())) ? 'Сдан' : `до ${date.format('Q кв. YYYY')}`;
- deadlinesList.push({ label, value: date.format('Q.YYYY') });
- });
- }
- }
- return {
- block: getBlock(state, { blockID }),
- filters,
- filtersValues: getCheckerboardFiltersValues(state, { blockID }),
- deadlinesList
- }
- };
- const mapDispatchToProps = (dispatch) => {
- return {
- checkerboardActions: bindActionCreators(CheckerboardActions, dispatch)
- }
- };
- @connect(mapStateToProps, mapDispatchToProps)
- export default class CheckerboardFilters extends Component {
- static contextTypes = {
- router: PropTypes.object.isRequired
- };
- dropdownItemProps = {
- noBorderMark: false
- };
- paperProps = {
- size: 'lsm'
- };
- componentDidMount() {
- if (window.location.search) this.fetchFilters();
- else this.fetchFilteredApartments(this.props.blockID, this.props.filtersValues);
- }
- componentDidUpdate(prevProps) {
- if (JSON.stringify(prevProps.filtersValues) !== JSON.stringify(this.props.filtersValues) || prevProps.blockID !== this.props.blockID) {
- if (this.props.blockID) this.fetchFilteredApartments(this.props.blockID, this.props.filtersValues);
- }
- }
- fetchFilters = () => {
- const { setCheckerboardFiltersValues } = this.props.checkerboardActions;
- const filters = this.getFiltersFromURL();
- if (Object.keys(filters).length === 0) this.fetchFilteredApartments(this.props.blockID, this.props.filtersValues);
- setCheckerboardFiltersValues(this.props.blockID, filters);
- }
- handleChange = (name, value) => {
- const { setCheckerboardFiltersValues } = this.props.checkerboardActions;
- const filters = { ...this.props.filtersValues };
- delete filters[name];
- delete filters.deadline_over_check;
- if (value) filters[name] = value;
- if (filters.deadline && moment(filters.deadline, 'Q.YYYY').endOf('quarter').isBefore(moment().endOf('quarter'))) {
- filters.deadline_over_check = 1;
- }
- setCheckerboardFiltersValues(this.props.blockID, filters);
- };
- handleReset = () => {
- const { setCheckerboardFiltersValues } = this.props.checkerboardActions;
- setCheckerboardFiltersValues(this.props.blockID, {});
- };
- removeFilter = (name, val) => {
- const { setCheckerboardFiltersValues } = this.props.checkerboardActions;
- const filters = { ...this.props.filtersValues };
- if(Array.isArray(filters[name])) {
- filters[name] = filters[name].filter(v => String(v) !== String(val));
- } else {
- delete filters[name];
- }
- setCheckerboardFiltersValues(this.props.blockID, filters);
- };
- /**
- * Получаем объект с параметрами фильтрации из строки запроса
- * @returns {{}}
- */
- getFiltersFromURL = () => {
- const filters = {};
- const query = getUrlParams(this.context.router.history.location.search);
- Object.keys(query).forEach(item => {
- const itemName = item.replace(/^.*_/, '');
- switch(item) {
- case 'deadline':
- filters[item] = query[item];
- break;
- case 'price_from':
- case 'price_to':
- if (!filters.price) {
- filters.price = {};
- }
- filters.price[itemName] = query[item];
- break;
- case 'totalArea_from':
- case 'totalArea_to':
- if (!filters.totalArea) {
- filters.totalArea = {};
- }
- filters.totalArea[itemName] = query[item];
- break;
- case 'kitchenArea_from':
- case 'kitchenArea_to':
- if (!filters.kitchenArea) {
- filters.kitchenArea = {};
- }
- filters.kitchenArea[itemName] = query[item];
- break;
- case 'balconyArea_from':
- case 'balconyArea_to':
- if (!filters.balconyArea) {
- filters.balconyArea = {};
- }
- filters.balconyArea[itemName] = query[item];
- break;
- case 'room':
- case 'finishing':
- case 'bank':
- case 'wcType':
- case 'building':
- case 'premiseType':
- if (query[item] !== undefined) {
- if (!Array.isArray(query[item])) {
- filters[item] = Array(query[item]);
- } else {
- filters[item] = query[item];
- }
- }
- break;
- case 'mortgage':
- case 'installment':
- case 'subsidy':
- case 'voen_mortgage':
- if (!filters.payment) {
- filters.payment = [];
- }
- filters.payment.push(item);
- break;
- case 'hide_filtered':
- case 'hide_selled':
- case 'hide_booked':
- case 'reservation':
- filters[item] = query[item];
- break;
- case 'delta_price_from':
- if (!filters.delta_price) filters.delta_price = DELTA_PRICE.find(filter => String(filter.from) === String(query[item])).value;
- break;
- case 'delta_price_to':
- if (!filters.delta_price) filters.delta_price = DELTA_PRICE.find(filter => String(filter.to) === String(query[item])).value;
- break;
- default:
- break;
- }
- });
- return filters;
- };
- fetchFilteredApartments = (blockID, filters = {}) => {
- const { fetchCheckerboardFilteredApartmentsID } = this.props.checkerboardActions;
- const preparedFilters = {};
- if(typeof filters === 'object') {
- Object.keys(filters).forEach(filter => {
- if(!filters[filter]) return false;
- if(typeof filters[filter] === 'object' && Object.keys(filters[filter]).length === 0) return false;
- switch(filter) {
- case 'building':
- case 'hide_filtered':
- case 'hide_selled':
- case 'hide_booked':
- return false;
- case 'payment': {
- if (filters.payment.indexOf('mortgage') !== -1) preparedFilters.mortgage = '1';
- if (filters.payment.indexOf('installment') !== -1) preparedFilters.installment = '1';
- if (filters.payment.indexOf('subsidy') !== -1) preparedFilters.subsidy = '1';
- if (filters.payment.indexOf('voen_mortgage') !== -1) preparedFilters.voen_mortgage = '1';
- break;
- }
- case 'reservation': {
- preparedFilters.reservation = '1';
- break;
- }
- case 'price': {
- if(filters.price.from) preparedFilters.price_from = filters.price.from;
- if(filters.price.to) preparedFilters.price_to = filters.price.to;
- break;
- }
- case 'totalArea': {
- if(filters.totalArea.from) preparedFilters.totalArea_from = filters.totalArea.from;
- if(filters.totalArea.to) preparedFilters.totalArea_to = filters.totalArea.to;
- break;
- }
- case 'kitchenArea': {
- if(filters.kitchenArea.from) preparedFilters.kitchenArea_from = filters.kitchenArea.from;
- if(filters.kitchenArea.to) preparedFilters.kitchenArea_to = filters.kitchenArea.to;
- break;
- }
- case 'balconyArea': {
- if(filters.balconyArea.from) preparedFilters.balconyArea_from = filters.balconyArea.from;
- if(filters.balconyArea.to) preparedFilters.balconyArea_to = filters.balconyArea.to;
- break;
- }
- case 'delta_price': {
- const deltaPrice = DELTA_PRICE.find(item => String(item.value) === String(filters[filter]));
- if (deltaPrice && deltaPrice.from >= 0) preparedFilters.delta_price_from = deltaPrice.from;
- if (deltaPrice && deltaPrice.to) preparedFilters.delta_price_to = deltaPrice.to;
- break;
- }
- default:
- preparedFilters[filter] = filters[filter];
- break;
- }
- });
- }
- fetchCheckerboardFilteredApartmentsID(blockID, preparedFilters);
- };
- renderTotalAreaValue = ({ from, to }) => {
- return `S общ. ${from ? ` от ${from}` : ''}${to ? ` до ${to}` : ''} м²`;
- };
- renderKitchenValue = ({ from, to }) => {
- return `S кух. ${from ? ` от ${from}` : ''}${to ? ` до ${to}` : ''} м²`;
- };
- renderBalconyValue = ({ from, to }) => {
- return `S бал. ${from ? ` от ${from}` : ''}${to ? ` до ${to}` : ''} м²`;
- };
- renderPriceValue = ({ from, to }) => {
- return `${from ? `от ${from} ` : ''}${to ? `до ${to}` : ''} руб.`;
- }
- renderSelected(lists) {
- return (
- <div className='checkerboard__filters-selected'>
- {Object.keys(this.props.filtersValues).map(filter => {
- if(typeof this.props.filtersValues[filter] === 'string') {
- if(!lists[filter] || lists[filter] === undefined) return;
- const value = lists[filter].find(listItem => String(this.props.filtersValues[filter]) === String(listItem.value));
- if (!value) return;
- const handleRemoveFilter = () => {
- this.removeFilter(filter);
- };
- return <SelectedFilter key={filter} {...{ filter, value: value.label, removeFilter: handleRemoveFilter }} />
- }
- if (Array.isArray(this.props.filtersValues[filter]) && this.props.filtersValues[filter].length > 0) {
- if(!lists[filter] || lists[filter] === undefined) return;
- return this.props.filtersValues[filter].map((val, key) => {
- const value = lists[filter].find(listItem => String(val) === String(listItem.value));
- if(!value) return;
- const handleRemoveFilter = () => {
- this.removeFilter(filter, val);
- };
- return <SelectedFilter key={filter + key} {...{ filter, value: value.label, removeFilter: handleRemoveFilter }} />
- })
- }
- if (typeof this.props.filtersValues[filter] === 'object' && Object.keys(this.props.filtersValues[filter]).length > 0) {
- if(!this.props.filtersValues[filter].from && !this.props.filtersValues[filter].to) return;
- const handleRemoveFilter = () => {
- this.removeFilter(filter);
- };
- return <SelectedFilter key={filter} {...{ filter, value: this.props.filtersValues[filter], removeFilter: handleRemoveFilter }} />
- }
- })}
- </div>
- )
- }
- renderDeltaPriceValue = () => {
- const delta = DELTA_PRICE.find(item => String(item.value) === String(this.props.filtersValues.delta_price));
- if (delta) return delta.label;
- return '';
- }
- render() {
- const lists = {
- building: list2Options(this.props.filters.buildings, 'name', 'id', (val, building) => `Корпус ${val} - Очередь ${building.queue}`),
- deadline: this.props.deadlinesList,
- room: list2Options(this.props.filters.rooms, 'name', 'crm_id'),
- finishing: list2Options(this.props.filters.finishing, 'name', '_id'),
- payment: PAYMENTS,
- bank: list2Options(this.props.filters.banks, 'name', '_id'),
- status: list2Options(this.props.filters.statuses, 'name', 'crm_id'),
- premiseType: OBJECT_VIEW,
- wcType: list2Options(this.props.filters.wc, 'name', 'crm_id'),
- delta_price: list2Options(DELTA_PRICE, 'label', 'value')
- };
- return (
- <div className='checkerboard__filters'>
- <div className='checkerboard__filters-header'>{this.props.block.name}</div>
- <div className='checkerboard__filters-content'>
- <Scrollarea>
- <div className='checkerboard__filters-scrollarea'>
- <div className='checkerboard__filters-rows'>
- <div className='checkerboard__filters-row'>
- <Select
- name='delta_price'
- fullWidth
- circle={false}
- emptyText=''
- options={DELTA_PRICE}
- onChange={this.handleChange}
- placeholder='Инвестиционный рост цены'
- value={this.props.filtersValues.delta_price}
- renderValue={this.renderDeltaPriceValue}
- />
- </div>
- <div className='checkerboard__filters-row'>
- <Select
- name='building'
- value={this.props.filtersValues.building}
- placeholder='Корпус'
- options={lists.building}
- onChange={this.handleChange}
- multiple
- changeAfterClose={false}
- fullWidth
- circle={false}
- dropdownItemProps={this.dropdownItemProps}
- paperProps={this.paperProps}
- />
- </div>
- <div className='checkerboard__filters-row'>
- <Select
- name='deadline'
- value={this.props.filtersValues.deadline}
- placeholder='Срок сдачи'
- options={lists.deadline}
- onChange={this.handleChange}
- fullWidth
- circle={false}
- emptyText=''
- />
- </div>
- <div className='checkerboard__filters-row'>
- <Select
- name='room'
- value={this.props.filtersValues.room}
- placeholder='Количество комнат'
- options={lists.room}
- onChange={this.handleChange}
- multiple
- changeAfterClose={false}
- fullWidth
- circle={false}
- dropdownItemProps={this.dropdownItemProps}
- />
- </div>
- <div className='checkerboard__filters-row'>
- <RangeSelect
- cleared={false}
- name='price'
- value={this.props.filtersValues.price}
- placeholder='Цена от-до, руб.'
- min={500000}
- step={500000}
- renderValue={this.renderPriceValue}
- onChange={this.handleChange}
- fullWidth
- circle={false}
- />
- </div>
- <div className='checkerboard__filters-row'>
- <Select
- name='finishing'
- value={this.props.filtersValues.finishing}
- placeholder='Отделка'
- options={lists.finishing}
- onChange={this.handleChange}
- multiple
- changeAfterClose={false}
- fullWidth
- circle={false}
- dropdownItemProps={this.dropdownItemProps}
- />
- </div>
- <div className='checkerboard__filters-row'>
- <Select
- name='payment'
- value={this.props.filtersValues.payment}
- placeholder='Способы оплаты'
- options={lists.payment}
- onChange={this.handleChange}
- multiple
- changeAfterClose={false}
- fullWidth
- circle={false}
- dropdownItemProps={this.dropdownItemProps}
- />
- </div>
- <div className='checkerboard__filters-row'>
- <Select
- name='bank'
- value={this.props.filtersValues.bank}
- placeholder='Банки'
- options={lists.bank}
- disabled={!lists.bank.length}
- onChange={this.handleChange}
- multiple
- changeAfterClose={false}
- fullWidth
- circle={false}
- dropdownItemProps={this.dropdownItemProps}
- paperProps={this.paperProps}
- />
- </div>
- <div className='checkerboard__filters-row'>
- <RangeSelect
- cleared={false}
- name='totalArea'
- value={this.props.filtersValues.totalArea}
- placeholder='S общая'
- min={25}
- step={5}
- renderValue={this.renderTotalAreaValue}
- onChange={this.handleChange}
- fullWidth
- circle={false}
- />
- </div>
- <div className='checkerboard__filters-row'>
- <RangeSelect
- cleared={false}
- name='kitchenArea'
- value={this.props.filtersValues.kitchenArea}
- placeholder='S кухни'
- min={2}
- step={2}
- renderValue={this.renderKitchenValue}
- onChange={this.handleChange}
- fullWidth
- circle={false}
- />
- </div>
- <div className='checkerboard__filters-row'>
- <RangeSelect
- cleared={false}
- name='balconyArea'
- value={this.props.filtersValues.balconyArea}
- placeholder='S балкона'
- min={1}
- step={1}
- renderValue={this.renderBalconyValue}
- onChange={this.handleChange}
- fullWidth
- circle={false}
- />
- </div>
- <div className='checkerboard__filters-row'>
- <Select
- name='wcType'
- value={this.props.filtersValues.wcType}
- placeholder='Санузел'
- options={lists.wcType}
- onChange={this.handleChange}
- multiple
- changeAfterClose={false}
- fullWidth
- circle={false}
- dropdownItemProps={this.dropdownItemProps}
- />
- </div>
- <div className='checkerboard__filters-row'>
- <Select
- name='premiseType'
- multiple
- changeAfterClose={false}
- value={this.props.filtersValues.premiseType}
- placeholder='Тип недвижимости'
- options={lists.premiseType}
- onChange={this.handleChange}
- fullWidth
- circle={false}
- dropdownItemProps={this.dropdownItemProps}
- />
- </div>
- <div className='checkerboard__filters-row'>
- <Checkbox name='reservation' size='sm' checked={this.props.filtersValues.reservation} label='Показать забронированные' onChange={this.handleChange} />
- </div>
- {/* <div className='checkerboard__filters-row'>
- <Select name='status' value={this.props.filtersValues.status} placeholder='Статус' options={lists.status} onChange={this.handleChange} multi />
- </div> */}
- </div>
- {this.renderSelected(lists)}
- <div className='checkerboard__filters-reset'>
- <Button circle={false} kind='ghost' fullWidth size='md' onClick={this.handleReset}>Сбросить всё</Button>
- </div>
- </div>
- </Scrollarea>
- </div>
- </div>
- )
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement