From bd85c84d929f616b69f4d65a63fc094e0e852a76 Mon Sep 17 00:00:00 2001 From: surajmn1 Date: Thu, 4 Aug 2022 12:40:22 +0530 Subject: [PATCH 01/38] remove selected option from select dropdowns --- studio/src/components/Filter/index.js | 31 +++++++++++++ studio/src/components/Selector/index.js | 28 +++++++----- studio/src/pages/pages/index.js | 60 ++++++++++++------------- 3 files changed, 77 insertions(+), 42 deletions(-) create mode 100644 studio/src/components/Filter/index.js diff --git a/studio/src/components/Filter/index.js b/studio/src/components/Filter/index.js new file mode 100644 index 000000000..b8fe9b371 --- /dev/null +++ b/studio/src/components/Filter/index.js @@ -0,0 +1,31 @@ +import React, { useState } from 'react'; +import { Select, Form } from 'antd'; +const { Option } = Select; + +const Filter = ({ mode, defaultValue, optionsMap, placeholder, name, label, form }) => { + const [selectedItems, setSelectedItems] = useState(optionsMap[defaultValue]); + const filteredOptions = Object.keys(optionsMap).filter((o) => !selectedItems.includes(o)); + const selectedOptions = optionsMap[selectedItems]; + + return ( + + + + ); +}; + +export default Filter; diff --git a/studio/src/components/Selector/index.js b/studio/src/components/Selector/index.js index d43e6d292..456f9a006 100644 --- a/studio/src/components/Selector/index.js +++ b/studio/src/components/Selector/index.js @@ -18,6 +18,7 @@ function Selector({ const entity = action.toLowerCase(); const selectorType = require(`../../actions/${entity}`); const [entityCreatedFlag, setEntityCreatedFlag] = React.useState(false); + const [selectedOptions, setSelectedOptions] = React.useState([]); const [query, setQuery] = React.useState({ page: 1, limit: 5, @@ -117,11 +118,14 @@ function Selector({ searchValue={searchValue} value={value} placeholder={placeholder} - onChange={(values) => onChange(values)} + onChange={(values) => { + setSelectedOptions(values); + onChange(values); + }} onSearch={(value) => onSearch(value)} - filterOption={(input, option) => - option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 - } + filterOption={(input, option) => { + return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0; + }} onPopupScroll={(e) => { if ( e.target.scrollTop + e.target.offsetHeight === e.target.scrollHeight || @@ -163,12 +167,16 @@ function Selector({ autoClearSearchValue={true} > {details - .filter((item) => !invalidOptions.includes(item.id)) - .map((item) => ( - - {item[display] ? item[display] : item['email'] ? item['email'] : null} - - ))} + .filter((item) => { + return ![...invalidOptions].includes(item.id); + }) + .map((item, _, array) => { + return ( + + {item[display] ? item[display] : item['email'] ? item['email'] : null} + + ); + })} ); } diff --git a/studio/src/pages/pages/index.js b/studio/src/pages/pages/index.js index 210c15302..9a1ae709b 100644 --- a/studio/src/pages/pages/index.js +++ b/studio/src/pages/pages/index.js @@ -1,5 +1,5 @@ /* eslint-disable react-hooks/exhaustive-deps */ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { Space, Button, Select, Form, Col, Row, Input } from 'antd'; import { Link, useLocation, useHistory } from 'react-router-dom'; import PageList from './components/PageList'; @@ -14,6 +14,7 @@ import { UpOutlined, DownOutlined } from '@ant-design/icons'; import Loader from '../../components/Loader'; import { Helmet } from 'react-helmet'; import Filters from '../../utils/filters'; +import Filter from '../../components/Filter'; function Pages({ formats }) { const spaces = useSelector(({ spaces }) => spaces); @@ -56,11 +57,11 @@ function Pages({ formats }) { const keys = ['page', 'limit', 'q', 'sort', 'tag', 'category', 'author', 'status']; const params = getUrlParams(query, keys); - useEffect(() => { - if (form) { - form.setFieldsValue(new Filters(params)); - } - }, [search, formats.loading]); + // useEffect(() => { + // if (form) { + // form.setFieldsValue(new Filters(params)); + // } + // }, [search, formats.loading]); useEffect(() => { fetchPages(); @@ -150,34 +151,29 @@ function Pages({ formats }) { - - - + - - - +