mirror of
https://github.com/haiwen/seahub.git
synced 2025-04-27 02:51:00 +00:00
Feature/search filters controller (#7739)
* add search filter controller * update custom date * optimize ui * update bg color --------- Co-authored-by: zhouwenxuan <aries@Mac.local>
This commit is contained in:
Aries
GitHub
parent
8cc5815107
commit
63f51d6d2a
15
frontend/src/assets/icons/filter-circled.svg
Normal file
15
frontend/src/assets/icons/filter-circled.svg
Normal file
@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#999999;}
|
||||
</style>
|
||||
<title>filter-circled</title>
|
||||
<g id="filter-circled">
|
||||
<path id="形状结合" class="st0" d="M16,1c8.3,0,15,6.7,15,15s-6.7,15-15,15S1,24.3,1,16S7.7,1,16,1z M16,4C9.4,4,4,9.4,4,16
|
||||
s5.4,12,12,12s12-5.4,12-12S22.6,4,16,4z M20,20c0.6,0,1,0.4,1,1s-0.4,1-1,1h-8c-0.6,0-1-0.4-1-1s0.4-1,1-1H20z M22,15
|
||||
c0.6,0,1,0.4,1,1s-0.4,1-1,1H10c-0.6,0-1-0.4-1-1s0.4-1,1-1H22z M24,10c0.6,0,1,0.4,1,1s-0.4,1-1,1H8c-0.6,0-1-0.4-1-1s0.4-1,1-1
|
||||
H24z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 846 B |
@ -1,31 +1,22 @@
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import isHotkey from 'is-hotkey';
|
||||
import { gettext } from '../../../utils/constants';
|
||||
import { Utils } from '../../../utils/utils';
|
||||
import UserItem from './user-item';
|
||||
import { seafileAPI } from '../../../utils/seafile-api';
|
||||
import ModalPortal from '../../modal-portal';
|
||||
import toaster from '../../toast';
|
||||
import { SEARCH_FILTERS_KEY } from '../../../constants';
|
||||
|
||||
const FilterByCreator = ({ onSelect }) => {
|
||||
const FilterByCreator = ({ creatorList, onSelect }) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [options, setOptions] = useState([]);
|
||||
const [value, setValue] = useState([]);
|
||||
const [selectedOptions, setSelectedOptions] = useState(creatorList || []);
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
|
||||
const label = useMemo(() => {
|
||||
if (!value || value.length === 0) return gettext('Creator');
|
||||
const label = [];
|
||||
value.forEach((v) => {
|
||||
const option = options.find((o) => o.key === v);
|
||||
if (option) {
|
||||
label.push(option.name);
|
||||
}
|
||||
});
|
||||
return `Creator: ${label.join(',')}`;
|
||||
}, [options, value]);
|
||||
|
||||
const toggle = useCallback((e) => {
|
||||
setIsOpen(!isOpen);
|
||||
}, [isOpen]);
|
||||
@ -40,33 +31,43 @@ const FilterByCreator = ({ onSelect }) => {
|
||||
const onSelectOption = useCallback((e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const option = Utils.getEventData(e, 'toggle') ?? e.currentTarget.getAttribute('data-toggle');
|
||||
let updated = [...value];
|
||||
if (!updated.includes(option)) {
|
||||
updated = [...updated, option];
|
||||
const name = Utils.getEventData(e, 'toggle') ?? e.currentTarget.getAttribute('data-toggle');
|
||||
let updated = [...selectedOptions];
|
||||
if (!updated.some((item) => item.name === name)) {
|
||||
const newOption = options.find((option) => option.name === name);
|
||||
updated = [...updated, newOption];
|
||||
} else {
|
||||
updated = updated.filter((v) => v !== option);
|
||||
updated = updated.filter((option) => option.name !== name);
|
||||
}
|
||||
setValue(updated);
|
||||
onSelect('creator', updated);
|
||||
setSelectedOptions(updated);
|
||||
onSelect(SEARCH_FILTERS_KEY.CREATOR_LIST, updated);
|
||||
if (displayOptions.length === 1) {
|
||||
setSearchValue('');
|
||||
}
|
||||
}, [value, displayOptions, onSelect]);
|
||||
}, [selectedOptions, displayOptions, options, onSelect]);
|
||||
|
||||
const handleCancel = useCallback((v) => {
|
||||
const updated = value.filter((item) => item !== v);
|
||||
setValue(updated);
|
||||
onSelect('creator', updated);
|
||||
}, [value, onSelect]);
|
||||
const handleCancel = useCallback((e, name) => {
|
||||
const updated = selectedOptions.filter((option) => option.name !== name);
|
||||
setSelectedOptions(updated);
|
||||
onSelect(SEARCH_FILTERS_KEY.CREATOR_LIST, updated);
|
||||
}, [selectedOptions, onSelect]);
|
||||
|
||||
const handleInputChange = useCallback((e) => {
|
||||
const v = e.target.value;
|
||||
setSearchValue(v);
|
||||
if (!value) {
|
||||
if (!selectedOptions) {
|
||||
setOptions([]);
|
||||
}
|
||||
}, [value]);
|
||||
}, [selectedOptions]);
|
||||
|
||||
const handleInputKeyDown = useCallback((e) => {
|
||||
if (isHotkey('enter')(e)) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setSearchValue('');
|
||||
toggle();
|
||||
}
|
||||
}, [toggle]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!searchValue) return;
|
||||
@ -75,16 +76,9 @@ const FilterByCreator = ({ onSelect }) => {
|
||||
try {
|
||||
const res = await seafileAPI.searchUsers(searchValue);
|
||||
const userList = res.data.users
|
||||
.filter(user => user.name.toLowerCase().includes(searchValue.toLowerCase()))
|
||||
.map(user => ({
|
||||
key: user.email,
|
||||
value: user.email,
|
||||
name: user.name,
|
||||
label: <UserItem user={user} />,
|
||||
}))
|
||||
.filter(user => !options.some(option => option.key === user.key));
|
||||
.filter(user => user.name.toLowerCase().includes(searchValue.toLowerCase()));
|
||||
|
||||
setOptions(prevOptions => [...prevOptions, ...userList]);
|
||||
setOptions(userList);
|
||||
} catch (err) {
|
||||
toaster.danger(Utils.getErrorMsg(err));
|
||||
}
|
||||
@ -97,45 +91,46 @@ const FilterByCreator = ({ onSelect }) => {
|
||||
return (
|
||||
<div className="search-filter filter-by-creator-container">
|
||||
<Dropdown isOpen={isOpen} toggle={toggle}>
|
||||
<DropdownToggle tag="div" className="search-filter-toggle">
|
||||
<div className="filter-label" title={label}>{label}</div>
|
||||
<DropdownToggle tag="div" className={classNames('search-filter-toggle', {
|
||||
'active': isOpen && selectedOptions.length > 0,
|
||||
'highlighted': selectedOptions.length > 0,
|
||||
})}>
|
||||
<div className="filter-label" title={gettext('Creator')}>{gettext('Creator')}</div>
|
||||
<i className="sf3-font sf3-font-down sf3-font pl-1" />
|
||||
</DropdownToggle>
|
||||
<ModalPortal>
|
||||
<DropdownMenu className="search-filter-menu creator-dropdown-menu">
|
||||
<DropdownMenu className="search-filter-menu filter-by-creator-menu">
|
||||
<div className="input-container">
|
||||
{value.map((v) => {
|
||||
const option = options.find((o) => o.key === v);
|
||||
return option && (
|
||||
<UserItem
|
||||
key={option.key}
|
||||
user={option}
|
||||
isCancellable={true}
|
||||
onCancel={() => handleCancel(v)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{selectedOptions.map((option) => (
|
||||
<UserItem
|
||||
key={option.name}
|
||||
user={option}
|
||||
isCancellable={true}
|
||||
onCancel={handleCancel}
|
||||
/>
|
||||
))}
|
||||
<div className="search-input-wrapper">
|
||||
<input
|
||||
type="text"
|
||||
placeholder={value.length ? '' : gettext('Search user')}
|
||||
placeholder={selectedOptions.length ? '' : gettext('Search user')}
|
||||
value={searchValue}
|
||||
onChange={handleInputChange}
|
||||
onKeyDown={handleInputKeyDown}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{displayOptions && displayOptions.map((option) => (
|
||||
<DropdownItem
|
||||
key={option.key}
|
||||
key={option.name}
|
||||
tag="div"
|
||||
tabIndex="-1"
|
||||
data-toggle={option.key}
|
||||
data-toggle={option.name}
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
onClick={onSelectOption}
|
||||
toggle={false}
|
||||
>
|
||||
{option.label}
|
||||
{value.includes(option.key) && <i className="dropdown-item-tick sf2-icon-tick"></i>}
|
||||
{isOpen && <UserItem user={option} />}
|
||||
{selectedOptions.includes(option.name) && <i className="dropdown-item-tick sf2-icon-tick"></i>}
|
||||
</DropdownItem>
|
||||
))}
|
||||
</DropdownMenu>
|
||||
@ -146,6 +141,7 @@ const FilterByCreator = ({ onSelect }) => {
|
||||
};
|
||||
|
||||
FilterByCreator.propTypes = {
|
||||
creatorList: PropTypes.array.isRequired,
|
||||
onSelect: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
|
||||
@ -1,41 +1,27 @@
|
||||
import React, { useCallback, useMemo, useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
|
||||
import dayjs from 'dayjs';
|
||||
import { gettext } from '../../../utils/constants';
|
||||
import { Utils } from '../../../utils/utils';
|
||||
import Picker from '../../date-and-time-picker';
|
||||
import ModalPortal from '../../modal-portal';
|
||||
|
||||
const DATE_FILTER_TYPE_KEY = {
|
||||
CREATE_TIME: 'create_time',
|
||||
LAST_MODIFIED_TIME: 'last_modified_time',
|
||||
};
|
||||
|
||||
const DATE_OPTION_KEY = {
|
||||
TODAY: 'today',
|
||||
LAST_7_DAYS: 'last_7_days',
|
||||
LAST_30_DAYS: 'last_30_days',
|
||||
CUSTOM: 'custom',
|
||||
};
|
||||
import { SEARCH_FILTERS_KEY, SEARCH_FILTER_BY_DATE_OPTION_KEY, SEARCH_FILTER_BY_DATE_TYPE_KEY } from '../../../constants';
|
||||
|
||||
const DATE_INPUT_WIDTH = 118;
|
||||
|
||||
const FilterByDate = ({ onSelect }) => {
|
||||
const [value, setValue] = useState('');
|
||||
const FilterByDate = ({ date, onSelect }) => {
|
||||
const [value, setValue] = useState(date.value);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isTypeOpen, setIsTypeOpen] = useState(false);
|
||||
const [isCustomDate, setIsCustomDate] = useState(false);
|
||||
const [customDate, setCustomDate] = useState({
|
||||
start: null,
|
||||
end: null,
|
||||
});
|
||||
const [type, setType] = useState(DATE_FILTER_TYPE_KEY.CREATE_TIME);
|
||||
const [isCustomDate, setIsCustomDate] = useState(date.value === SEARCH_FILTER_BY_DATE_OPTION_KEY.CUSTOM);
|
||||
const [type, setType] = useState(date.type);
|
||||
|
||||
const typeLabel = useMemo(() => {
|
||||
switch (type) {
|
||||
case DATE_FILTER_TYPE_KEY.CREATE_TIME:
|
||||
case SEARCH_FILTER_BY_DATE_TYPE_KEY.CREATE_TIME:
|
||||
return gettext('Create time');
|
||||
case DATE_FILTER_TYPE_KEY.LAST_MODIFIED_TIME:
|
||||
case SEARCH_FILTER_BY_DATE_TYPE_KEY.LAST_MODIFIED_TIME:
|
||||
return gettext('Last modified time');
|
||||
default:
|
||||
return gettext('Create time');
|
||||
@ -45,10 +31,10 @@ const FilterByDate = ({ onSelect }) => {
|
||||
const typeOptions = useMemo(() => {
|
||||
return [
|
||||
{
|
||||
key: DATE_FILTER_TYPE_KEY.CREATE_TIME,
|
||||
key: SEARCH_FILTER_BY_DATE_TYPE_KEY.CREATE_TIME,
|
||||
label: gettext('Create time'),
|
||||
}, {
|
||||
key: DATE_FILTER_TYPE_KEY.LAST_MODIFIED_TIME,
|
||||
key: SEARCH_FILTER_BY_DATE_TYPE_KEY.LAST_MODIFIED_TIME,
|
||||
label: gettext('Last modified time'),
|
||||
}
|
||||
];
|
||||
@ -61,36 +47,36 @@ const FilterByDate = ({ onSelect }) => {
|
||||
const prefix = `${typeLabel}: `;
|
||||
|
||||
switch (value) {
|
||||
case DATE_OPTION_KEY.TODAY:
|
||||
case SEARCH_FILTER_BY_DATE_OPTION_KEY.TODAY:
|
||||
return `${prefix}${formatDate(today)}`;
|
||||
case DATE_OPTION_KEY.LAST_7_DAYS:
|
||||
case SEARCH_FILTER_BY_DATE_OPTION_KEY.LAST_7_DAYS:
|
||||
return `${prefix}${formatDate(today.subtract(6, 'day'))} - ${formatDate(today)}`;
|
||||
case DATE_OPTION_KEY.LAST_30_DAYS:
|
||||
case SEARCH_FILTER_BY_DATE_OPTION_KEY.LAST_30_DAYS:
|
||||
return `${prefix}${formatDate(today.subtract(29, 'day'))} - ${formatDate(today)}`;
|
||||
case DATE_OPTION_KEY.CUSTOM:
|
||||
return customDate.start && customDate.end
|
||||
? `${prefix}${formatDate(customDate.start)} - ${formatDate(customDate.end)}`
|
||||
case SEARCH_FILTER_BY_DATE_OPTION_KEY.CUSTOM:
|
||||
return date.start && date.end
|
||||
? `${prefix}${formatDate(date.start)} - ${formatDate(date.end)}`
|
||||
: gettext('Select date range');
|
||||
default:
|
||||
return gettext('Date');
|
||||
}
|
||||
}, [value, customDate, typeLabel]);
|
||||
}, [date, value, typeLabel]);
|
||||
|
||||
const options = useMemo(() => {
|
||||
return [
|
||||
{
|
||||
key: DATE_OPTION_KEY.TODAY,
|
||||
key: SEARCH_FILTER_BY_DATE_OPTION_KEY.TODAY,
|
||||
label: gettext('Today'),
|
||||
}, {
|
||||
key: DATE_OPTION_KEY.LAST_7_DAYS,
|
||||
key: SEARCH_FILTER_BY_DATE_OPTION_KEY.LAST_7_DAYS,
|
||||
label: gettext('Last 7 days'),
|
||||
}, {
|
||||
key: DATE_OPTION_KEY.LAST_30_DAYS,
|
||||
key: SEARCH_FILTER_BY_DATE_OPTION_KEY.LAST_30_DAYS,
|
||||
label: gettext('Last 30 days'),
|
||||
},
|
||||
'Divider',
|
||||
{
|
||||
key: DATE_OPTION_KEY.CUSTOM,
|
||||
key: SEARCH_FILTER_BY_DATE_OPTION_KEY.CUSTOM,
|
||||
label: gettext('Custom time'),
|
||||
},
|
||||
];
|
||||
@ -100,93 +86,98 @@ const FilterByDate = ({ onSelect }) => {
|
||||
|
||||
const toggleType = useCallback(() => setIsTypeOpen(!isTypeOpen), [isTypeOpen]);
|
||||
|
||||
const onChangeType = useCallback((e) => {
|
||||
const option = Utils.getEventData(e, 'toggle') ?? e.currentTarget.getAttribute('data-toggle');
|
||||
if (option === type) return;
|
||||
setType(option);
|
||||
onSelect(SEARCH_FILTERS_KEY.DATE, {
|
||||
...date,
|
||||
type: option,
|
||||
});
|
||||
}, [type, onSelect, date]);
|
||||
|
||||
const onClearDate = useCallback(() => {
|
||||
setValue('');
|
||||
setIsCustomDate(false);
|
||||
onSelect('date', '');
|
||||
onSelect(SEARCH_FILTERS_KEY.DATE, '');
|
||||
}, [onSelect]);
|
||||
|
||||
const onOptionClick = useCallback((e) => {
|
||||
const option = Utils.getEventData(e, 'toggle') ?? e.currentTarget.getAttribute('data-toggle');
|
||||
if (option === value) return;
|
||||
const today = dayjs().endOf('day');
|
||||
|
||||
setIsCustomDate(option === SEARCH_FILTER_BY_DATE_OPTION_KEY.CUSTOM);
|
||||
setValue(option);
|
||||
switch (option) {
|
||||
case DATE_OPTION_KEY.TODAY: {
|
||||
setValue(option);
|
||||
setIsCustomDate(false);
|
||||
onSelect('date', {
|
||||
case SEARCH_FILTER_BY_DATE_OPTION_KEY.TODAY: {
|
||||
onSelect(SEARCH_FILTERS_KEY.DATE, {
|
||||
value: option,
|
||||
start: dayjs().startOf('day').unix(),
|
||||
end: today.unix()
|
||||
});
|
||||
break;
|
||||
}
|
||||
case DATE_OPTION_KEY.LAST_7_DAYS: {
|
||||
setValue(option);
|
||||
setIsCustomDate(false);
|
||||
onSelect('date', {
|
||||
case SEARCH_FILTER_BY_DATE_OPTION_KEY.LAST_7_DAYS: {
|
||||
onSelect(SEARCH_FILTERS_KEY.DATE, {
|
||||
value: option,
|
||||
start: dayjs().subtract(6, 'day').startOf('day').unix(),
|
||||
end: today.unix()
|
||||
});
|
||||
break;
|
||||
}
|
||||
case DATE_OPTION_KEY.LAST_30_DAYS: {
|
||||
setValue(option);
|
||||
setIsCustomDate(false);
|
||||
onSelect('date', {
|
||||
case SEARCH_FILTER_BY_DATE_OPTION_KEY.LAST_30_DAYS: {
|
||||
onSelect(SEARCH_FILTERS_KEY.DATE, {
|
||||
value: option,
|
||||
start: dayjs().subtract(30, 'day').startOf('day').unix(),
|
||||
end: today.unix()
|
||||
});
|
||||
break;
|
||||
}
|
||||
case DATE_OPTION_KEY.CUSTOM: {
|
||||
setValue(DATE_OPTION_KEY.CUSTOM);
|
||||
setIsCustomDate(true);
|
||||
case SEARCH_FILTER_BY_DATE_OPTION_KEY.CUSTOM: {
|
||||
onSelect(SEARCH_FILTERS_KEY.DATE, {
|
||||
value: option,
|
||||
start: null,
|
||||
end: null,
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
}, [onSelect]);
|
||||
}, [value, onSelect]);
|
||||
|
||||
const disabledStartDate = useCallback((startDate) => {
|
||||
if (!startDate) return false;
|
||||
const today = dayjs();
|
||||
const endValue = customDate.end;
|
||||
const endValue = date.end;
|
||||
|
||||
if (!endValue) {
|
||||
return startDate.isAfter(today);
|
||||
}
|
||||
return endValue.isBefore(startDate) || startDate.isAfter(today);
|
||||
}, [customDate]);
|
||||
}, [date]);
|
||||
|
||||
const disabledEndDate = useCallback((endDate) => {
|
||||
if (!endDate) return false;
|
||||
const today = dayjs();
|
||||
const startValue = customDate.start;
|
||||
const startValue = date.start;
|
||||
if (!startValue) {
|
||||
return endDate.isAfter(today);
|
||||
}
|
||||
return endDate.isBefore(startValue) || endDate.isAfter(today);
|
||||
}, [customDate]);
|
||||
}, [date]);
|
||||
|
||||
const onChangeCustomDate = useCallback((date) => {
|
||||
const onChangeCustomDate = useCallback((customDate) => {
|
||||
const newDate = {
|
||||
...date,
|
||||
...customDate,
|
||||
[date.type]: date.value,
|
||||
};
|
||||
setCustomDate(newDate);
|
||||
|
||||
if (newDate.start && newDate.end) {
|
||||
onSelect('date', {
|
||||
start: newDate.start.unix(),
|
||||
end: newDate.end.unix(),
|
||||
});
|
||||
}
|
||||
}, [customDate, onSelect]);
|
||||
onSelect(SEARCH_FILTERS_KEY.DATE, newDate);
|
||||
}, [date, onSelect]);
|
||||
|
||||
return (
|
||||
<div className="search-filter filter-by-date">
|
||||
<div className="search-filter filter-by-date-container">
|
||||
<Dropdown isOpen={isOpen} toggle={toggle}>
|
||||
<DropdownToggle tag="div" className="search-filter-toggle">
|
||||
<div className="filter-label" style={{ maxWidth: 200 }} title={label}>{label}</div>
|
||||
<DropdownToggle tag="div" className="search-filter-toggle" onClick={toggle}>
|
||||
<div className="filter-label" style={{ maxWidth: 300 }} title={label}>{label}</div>
|
||||
<i
|
||||
className="sf3-font sf3-font-down sf3-font pl-1"
|
||||
onClick={(e) => {
|
||||
@ -213,7 +204,7 @@ const FilterByDate = ({ onSelect }) => {
|
||||
{typeOptions.map((option) => {
|
||||
const isSelected = option.key === type;
|
||||
return (
|
||||
<DropdownItem key={option.key} data-toggle={option.key} onClick={() => setType(option.key)}>
|
||||
<DropdownItem key={option.key} data-toggle={option.key} onClick={onChangeType}>
|
||||
{option.label}
|
||||
{isSelected && <i className="dropdown-item-tick sf2-icon-tick"></i>}
|
||||
</DropdownItem>
|
||||
@ -250,8 +241,8 @@ const FilterByDate = ({ onSelect }) => {
|
||||
<Picker
|
||||
showHourAndMinute={false}
|
||||
disabledDate={disabledStartDate}
|
||||
value={customDate.start}
|
||||
onChange={(value) => onChangeCustomDate({ type: 'start', value })}
|
||||
value={date.start}
|
||||
onChange={(value) => onChangeCustomDate({ start: value })}
|
||||
inputWidth={DATE_INPUT_WIDTH}
|
||||
/>
|
||||
</div>
|
||||
@ -260,8 +251,8 @@ const FilterByDate = ({ onSelect }) => {
|
||||
<Picker
|
||||
showHourAndMinute={false}
|
||||
disabledDate={disabledEndDate}
|
||||
value={customDate.end}
|
||||
onChange={(value) => onChangeCustomDate({ type: 'end', value })}
|
||||
value={date.end}
|
||||
onChange={(value) => onChangeCustomDate({ end: value })}
|
||||
inputWidth={DATE_INPUT_WIDTH}
|
||||
/>
|
||||
</div>
|
||||
@ -274,4 +265,14 @@ const FilterByDate = ({ onSelect }) => {
|
||||
);
|
||||
};
|
||||
|
||||
FilterByDate.propTypes = {
|
||||
date: PropTypes.shape({
|
||||
type: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
start: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
|
||||
end: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
|
||||
}),
|
||||
onSelect: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default FilterByDate;
|
||||
|
||||
@ -1,25 +1,22 @@
|
||||
import React, { useCallback, useMemo, useRef, useState } from 'react';
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import { Dropdown, DropdownMenu, DropdownToggle } from 'reactstrap';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import { gettext } from '../../../utils/constants';
|
||||
import ModalPortal from '../../modal-portal';
|
||||
import { SEARCH_FILTERS_KEY } from '../../../constants';
|
||||
|
||||
const FilterBySuffix = ({ onSelect }) => {
|
||||
const FilterBySuffix = ({ suffixes, onSelect }) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [value, setValue] = useState('');
|
||||
const [inputValue, setInputValue] = useState(suffixes.join(', '));
|
||||
const inputRef = useRef(null);
|
||||
|
||||
const label = useMemo(() => {
|
||||
if (value) {
|
||||
return `${gettext('File suffix: ')} ${value}`;
|
||||
}
|
||||
return gettext('File suffix');
|
||||
}, [value]);
|
||||
|
||||
const toggle = useCallback(() => setIsOpen(!isOpen), [isOpen]);
|
||||
|
||||
const handleInput = useCallback((e) => {
|
||||
setValue(e.target.value);
|
||||
onSelect('suffix', e.target.value);
|
||||
setInputValue(e.target.value);
|
||||
const suffixes = e.target.value.split(',').map(suffix => suffix.trim()).filter(Boolean);
|
||||
onSelect(SEARCH_FILTERS_KEY.SUFFIXES, suffixes);
|
||||
}, [onSelect]);
|
||||
|
||||
const handleKeyDown = useCallback((e) => {
|
||||
@ -32,18 +29,21 @@ const FilterBySuffix = ({ onSelect }) => {
|
||||
return (
|
||||
<div className="search-filter filter-by-suffix-container">
|
||||
<Dropdown isOpen={isOpen} toggle={toggle}>
|
||||
<DropdownToggle tag="div" className="search-filter-toggle">
|
||||
<div className="filter-label" title={label}>{label}</div>
|
||||
{!value && <i className="sf3-font sf3-font-down sf3-font pl-1" />}
|
||||
<DropdownToggle tag="div" className={classNames('search-filter-toggle', {
|
||||
'active': isOpen && suffixes.length > 0,
|
||||
'highlighted': suffixes.length > 0,
|
||||
})} onClick={toggle}>
|
||||
<div className="filter-label" title={gettext('File suffix')}>{gettext('File suffix')}</div>
|
||||
<i className="sf3-font sf3-font-down sf3-font pl-1" />
|
||||
</DropdownToggle>
|
||||
<ModalPortal>
|
||||
<DropdownMenu className="search-filter-menu suffix-dropdown-menu">
|
||||
<DropdownMenu className="search-filter-menu filter-by-suffix-menu">
|
||||
<div className="input-container">
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
placeholder={gettext('Filter by file suffix (e.g. sdoc)')}
|
||||
value={value}
|
||||
placeholder={gettext('Seperate multiple suffixes by ","(like .sdoc, .pdf)')}
|
||||
value={inputValue}
|
||||
autoFocus
|
||||
width={120}
|
||||
onChange={handleInput}
|
||||
@ -57,4 +57,9 @@ const FilterBySuffix = ({ onSelect }) => {
|
||||
);
|
||||
};
|
||||
|
||||
FilterBySuffix.propTypes = {
|
||||
suffixes: PropTypes.array.isRequired,
|
||||
onSelect: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default FilterBySuffix;
|
||||
|
||||
@ -1,25 +1,22 @@
|
||||
import React, { useCallback, useMemo, useState } from 'react';
|
||||
import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
|
||||
import PropTypes from 'prop-types';
|
||||
import ModalPortal from '../../../components/modal-portal';
|
||||
import { Utils } from '../../../utils/utils';
|
||||
import { gettext } from '../../../utils/constants';
|
||||
import { SEARCH_FILTERS_KEY } from '../../../constants';
|
||||
|
||||
const TEXT_FILTER_KEY = {
|
||||
SEARCH_FILENAME_AND_CONTENT: 'search_filename_and_content',
|
||||
SEARCH_FILENAME_ONLY: 'search_filename_only',
|
||||
};
|
||||
|
||||
const FilterByText = ({ onSelect }) => {
|
||||
const FilterByText = ({ searchFilenameOnly, onSelect }) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [value, setValue] = useState(TEXT_FILTER_KEY.SEARCH_FILENAME_AND_CONTENT);
|
||||
const [value, setValue] = useState(searchFilenameOnly ? SEARCH_FILTERS_KEY.SEARCH_FILENAME_ONLY : SEARCH_FILTERS_KEY.SEARCH_FILENAME_AND_CONTENT);
|
||||
|
||||
const options = useMemo(() => {
|
||||
return [
|
||||
{
|
||||
key: TEXT_FILTER_KEY.SEARCH_FILENAME_AND_CONTENT,
|
||||
key: SEARCH_FILTERS_KEY.SEARCH_FILENAME_AND_CONTENT,
|
||||
label: gettext('File name and content'),
|
||||
}, {
|
||||
key: TEXT_FILTER_KEY.SEARCH_FILENAME_ONLY,
|
||||
key: SEARCH_FILTERS_KEY.SEARCH_FILENAME_ONLY,
|
||||
label: gettext('File name only'),
|
||||
}
|
||||
];
|
||||
@ -29,8 +26,8 @@ const FilterByText = ({ onSelect }) => {
|
||||
const onOptionClick = useCallback((e) => {
|
||||
const option = Utils.getEventData(e, 'toggle') ?? e.currentTarget.getAttribute('data-toggle');
|
||||
setValue(option);
|
||||
const isSearchFilenameOnly = option === TEXT_FILTER_KEY.SEARCH_FILENAME_ONLY;
|
||||
onSelect('search_filename_only', isSearchFilenameOnly);
|
||||
const isSearchFilenameOnly = option === SEARCH_FILTERS_KEY.SEARCH_FILENAME_ONLY;
|
||||
onSelect(SEARCH_FILTERS_KEY.SEARCH_FILENAME_ONLY, isSearchFilenameOnly);
|
||||
}, [onSelect]);
|
||||
|
||||
const label = options.find((option) => option.key === value).label;
|
||||
@ -60,4 +57,9 @@ const FilterByText = ({ onSelect }) => {
|
||||
);
|
||||
};
|
||||
|
||||
FilterByText.propTypes = {
|
||||
searchFilenameOnly: PropTypes.bool.isRequired,
|
||||
onSelect: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default FilterByText;
|
||||
|
||||
@ -18,23 +18,18 @@
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.search-filters-container .search-filter .sf3-font-down,
|
||||
.search-filter-menu .sf3-font-down {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.search-filters-container .search-filter .search-filter-toggle,
|
||||
.search-filter-menu .search-filter-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.search-filters-container .search-filter .search-filter-toggle:hover,
|
||||
.search-filter-menu .search-filter-toggle:hover {
|
||||
background-color: #efefef;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.search-filters-container .search-filter .filter-label {
|
||||
@ -55,10 +50,15 @@
|
||||
}
|
||||
|
||||
.search-filter-menu.filter-by-text-menu,
|
||||
.search-filter-menu.filter-by-date-menu {
|
||||
.search-filter-menu.filter-by-date-menu,
|
||||
.search-filter-menu.filter-by-creator-menu {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.search-filter-menu.filter-by-suffix-menu {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.search-filters-container .search-filters-dropdown-item {
|
||||
width: 100%;
|
||||
}
|
||||
@ -81,7 +81,6 @@
|
||||
|
||||
.search-filter-menu .input-container {
|
||||
position: relative;
|
||||
width: 240px;
|
||||
border: 1px solid #eaeaea;
|
||||
border-radius: 4px;
|
||||
padding: 4px 6px;
|
||||
@ -184,3 +183,13 @@
|
||||
height: 28px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search-filters-container .search-filter-toggle.active,
|
||||
.search-filters-container .search-filter-toggle.active:hover,
|
||||
.search-filters-container .search-filter-toggle.highlighted:hover {
|
||||
background-color: rgba(255, 152, 0, 0.2);
|
||||
}
|
||||
|
||||
.search-filters-container .search-filter-toggle.highlighted {
|
||||
color: #ff9800;
|
||||
}
|
||||
|
||||
@ -7,19 +7,20 @@ import FilterBySuffix from './filter-by-suffix';
|
||||
|
||||
import './index.css';
|
||||
|
||||
const SearchFilters = ({ onChange }) => {
|
||||
const SearchFilters = ({ filters, onChange }) => {
|
||||
return (
|
||||
<div className="search-filters-container">
|
||||
<FilterByText onSelect={onChange} />
|
||||
<FilterByCreator onSelect={onChange} />
|
||||
<FilterByDate onSelect={onChange} />
|
||||
<FilterBySuffix onSelect={onChange} />
|
||||
<FilterBySuffix suffixes={filters.suffixes} onSelect={onChange} />
|
||||
<FilterByText searchFilenameOnly={filters.search_filename_only} onSelect={onChange} />
|
||||
<FilterByCreator creatorList={filters.creator_list} onSelect={onChange} />
|
||||
<FilterByDate date={filters.date} onSelect={onChange} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
SearchFilters.propTypes = {
|
||||
onChange: PropTypes.func,
|
||||
filters: PropTypes.object.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default SearchFilters;
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { mediaUrl } from '../../../utils/constants';
|
||||
import IconBtn from '../../icon-btn';
|
||||
|
||||
@ -7,9 +8,15 @@ const UserItem = ({ user, isCancellable, onCancel }) => {
|
||||
<div className="user-item">
|
||||
<img src={user.avatar_url || `${mediaUrl}avatars/default.png`} alt={user.name} className="user-avatar" />
|
||||
<span className="user-name">{user.name}</span>
|
||||
{isCancellable && <IconBtn className="user-remove" onClick={(e) => onCancel(e, user)} symbol="x-01" />}
|
||||
{isCancellable && <IconBtn className="user-remove" onClick={(e) => onCancel(e, user.name)} symbol="x-01" />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
UserItem.propTypes = {
|
||||
user: PropTypes.object.isRequired,
|
||||
isCancellable: PropTypes.bool,
|
||||
onCancel: PropTypes.func,
|
||||
};
|
||||
|
||||
export default UserItem;
|
||||
|
||||
@ -12,9 +12,10 @@ import { Utils } from '../../utils/utils';
|
||||
import toaster from '../toast';
|
||||
import Loading from '../loading';
|
||||
import { SEARCH_MASK, SEARCH_CONTAINER } from '../../constants/zIndexes';
|
||||
import { PRIVATE_FILE_TYPE } from '../../constants';
|
||||
import { PRIVATE_FILE_TYPE, SEARCH_FILTER_BY_DATE_OPTION_KEY, SEARCH_FILTER_BY_DATE_TYPE_KEY, SEARCH_FILTERS_SHOW_KEY } from '../../constants';
|
||||
import SearchFilters from './search-filters';
|
||||
import SearchTags from './search-tags';
|
||||
import IconBtn from '../icon-btn';
|
||||
|
||||
const propTypes = {
|
||||
repoID: PropTypes.string,
|
||||
@ -52,11 +53,18 @@ class Search extends Component {
|
||||
isSearchInputShow: false, // for mobile
|
||||
searchTypesMax: 0,
|
||||
highlightSearchTypesIndex: 0,
|
||||
isFiltersShow: true,
|
||||
isFilterControllerActive: false,
|
||||
filters: {
|
||||
search_filename_only: false,
|
||||
creator: [],
|
||||
date: null,
|
||||
suffix: '',
|
||||
creator_list: [],
|
||||
date: {
|
||||
type: SEARCH_FILTER_BY_DATE_TYPE_KEY.CREATE_TIME,
|
||||
value: '',
|
||||
start: null,
|
||||
end: null,
|
||||
},
|
||||
suffixes: [],
|
||||
},
|
||||
};
|
||||
this.highlightRef = null;
|
||||
@ -73,6 +81,8 @@ class Search extends Component {
|
||||
document.addEventListener('keydown', this.onDocumentKeydown);
|
||||
document.addEventListener('compositionstart', this.onCompositionStart);
|
||||
document.addEventListener('compositionend', this.onCompositionEnd);
|
||||
const isFiltersShow = localStorage.getItem(SEARCH_FILTERS_SHOW_KEY) === 'true';
|
||||
this.setState({ isFiltersShow });
|
||||
}
|
||||
|
||||
UNSAFE_componentWillReceiveProps(nextProps) {
|
||||
@ -128,7 +138,7 @@ class Search extends Component {
|
||||
};
|
||||
|
||||
onFocusHandler = () => {
|
||||
this.setState({ width: '570px', isMaskShow: true, isCloseShow: true });
|
||||
this.setState({ width: '570px', isMaskShow: true });
|
||||
this.calculateHighlightType();
|
||||
};
|
||||
|
||||
@ -364,7 +374,7 @@ class Search extends Component {
|
||||
if (this.state.showRecent) {
|
||||
this.setState({ showRecent: false });
|
||||
}
|
||||
this.setState({ value: newValue });
|
||||
this.setState({ value: newValue, isCloseShow: newValue.length > 0 });
|
||||
setTimeout(() => {
|
||||
const trimmedValue = newValue.trim();
|
||||
const isInRepo = this.props.repoID;
|
||||
@ -492,7 +502,7 @@ class Search extends Component {
|
||||
items[i]['link_content'] = decodeURI(data[i].fullpath).substring(1);
|
||||
items[i]['content'] = data[i].content_highlight;
|
||||
items[i]['thumbnail_url'] = data[i].thumbnail_url;
|
||||
items[i]['last_modified'] = data[i].last_modified || '';
|
||||
items[i]['mtime'] = data[i].mtime || '';
|
||||
items[i]['repo_owner_email'] = data[i].repo_owner_email || '';
|
||||
}
|
||||
return items;
|
||||
@ -510,6 +520,18 @@ class Search extends Component {
|
||||
highlightIndex: 0,
|
||||
isSearchInputShow: false,
|
||||
showRecent: true,
|
||||
isFilterControllerActive: false,
|
||||
filters: {
|
||||
search_filename_only: false,
|
||||
creator_list: [],
|
||||
date: {
|
||||
type: SEARCH_FILTER_BY_DATE_TYPE_KEY.CREATE_TIME,
|
||||
value: '',
|
||||
start: null,
|
||||
end: null,
|
||||
},
|
||||
suffixes: [],
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -521,6 +543,7 @@ class Search extends Component {
|
||||
resultItems: [],
|
||||
highlightIndex: 0,
|
||||
isSearchInputShow: false,
|
||||
isCloseShow: false,
|
||||
});
|
||||
}
|
||||
|
||||
@ -681,22 +704,30 @@ class Search extends Component {
|
||||
filterResults = (results) => {
|
||||
const { filters } = this.state;
|
||||
return results.filter(item => {
|
||||
if (filters.creator && filters.creator.length > 0) {
|
||||
if (!filters.creator.includes(item.repo_owner_email)) {
|
||||
if (filters.creator_list && filters.creator_list.length > 0) {
|
||||
if (!filters.creator_list.some(creator => creator.email === item.repo_owner_email)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if (filters.date?.start && item.last_modified < filters.date.start) {
|
||||
let startDate = filters.date.start;
|
||||
let endDate = filters.date.end;
|
||||
if (filters.date.value === SEARCH_FILTER_BY_DATE_OPTION_KEY.CUSTOM) {
|
||||
startDate = filters.date.start?.unix();
|
||||
endDate = filters.date.end?.unix();
|
||||
}
|
||||
|
||||
if (startDate && item.mtime < startDate) {
|
||||
return false;
|
||||
}
|
||||
if (filters.date?.end && item.last_modified > filters.date.end) {
|
||||
if (endDate && item.mtime > endDate) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (filters.suffix && filters.suffix.length > 0) {
|
||||
const suffix = item.path.includes('.') ? item.path.split('.').pop() : '';
|
||||
if (!suffix.toLocaleLowerCase().includes(filters.suffix.toLocaleLowerCase())) {
|
||||
if (filters.suffixes && filters.suffixes.length > 0) {
|
||||
const pathParts = item.path.split('.');
|
||||
const suffix = pathParts.length > 1 ? `.${pathParts.pop()}` : '';
|
||||
if (!filters.suffixes.includes(suffix)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@ -748,6 +779,12 @@ class Search extends Component {
|
||||
});
|
||||
};
|
||||
|
||||
handleFiltersShow = () => {
|
||||
const { isFiltersShow } = this.state;
|
||||
localStorage.setItem(SEARCH_FILTERS_SHOW_KEY, !isFiltersShow);
|
||||
this.setState({ isFiltersShow: !isFiltersShow });
|
||||
}
|
||||
|
||||
handleFiltersChange = (key, value) => {
|
||||
const newFilters = { ...this.state.filters, [key]: value};
|
||||
if (newFilters.search_filename_only !== this.state.filters.search_filename_only) {
|
||||
@ -759,7 +796,13 @@ class Search extends Component {
|
||||
this.getSearchResult(newQueryData);
|
||||
});
|
||||
}
|
||||
this.setState({ filters: newFilters }, () => this.forceUpdate());
|
||||
|
||||
let isFilterControllerActive = false;
|
||||
if (newFilters.creator_list.length > 0 || newFilters.date || newFilters.suffixes.length > 0) {
|
||||
isFilterControllerActive = true;
|
||||
}
|
||||
|
||||
this.setState({ filters: newFilters, isFilterControllerActive }, () => this.forceUpdate());
|
||||
}
|
||||
|
||||
handleSelectTag = (tag) => {
|
||||
@ -771,9 +814,8 @@ class Search extends Component {
|
||||
let width = this.state.width !== 'default' ? this.state.width : '';
|
||||
let style = {'width': width};
|
||||
const { repoID, isTagEnabled, tagsData } = this.props;
|
||||
const { isMaskShow, isResultGotten } = this.state;
|
||||
const { isMaskShow, isResultGotten, isCloseShow, isFiltersShow, isFilterControllerActive, filters } = this.state;
|
||||
const placeholder = `${this.props.placeholder}${isMaskShow ? '' : ` (${controlKey} + k)`}`;
|
||||
const isFiltersShow = isMaskShow && isResultGotten;
|
||||
const isTagsShow = this.props.repoID && isTagEnabled && isMaskShow && isResultGotten;
|
||||
return (
|
||||
<Fragment>
|
||||
@ -795,17 +837,29 @@ class Search extends Component {
|
||||
autoComplete="off"
|
||||
ref={this.inputRef}
|
||||
/>
|
||||
{this.state.isCloseShow &&
|
||||
{isCloseShow &&
|
||||
<button
|
||||
type="button"
|
||||
className="search-icon-right input-icon-addon sf3-font sf3-font-x-01"
|
||||
className="search-icon-right sf3-font sf3-font-x-01"
|
||||
onClick={this.onClearSearch}
|
||||
aria-label={gettext('Clear search')}
|
||||
></button>
|
||||
}
|
||||
{isMaskShow && (
|
||||
<IconBtn
|
||||
symbol="filter-circled"
|
||||
size={20}
|
||||
className={classnames('search-icon-right input-icon-addon search-filter-controller', { 'active': isFilterControllerActive })}
|
||||
onClick={this.handleFiltersShow}
|
||||
title={isFiltersShow ? gettext('Hide advanced search') : gettext('Show advanced search')}
|
||||
aria-label={isFiltersShow ? gettext('Hide advanced search') : gettext('Show advanced search')}
|
||||
tabIndex={0}
|
||||
id="search-filter-controller"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{isFiltersShow &&
|
||||
<SearchFilters onChange={this.handleFiltersChange} />
|
||||
{isMaskShow && isFiltersShow &&
|
||||
<SearchFilters filters={filters} onChange={this.handleFiltersChange} />
|
||||
}
|
||||
{isTagsShow &&
|
||||
<SearchTags repoID={repoID} tagsData={tagsData} keyword={this.state.value} onSelectTag={this.handleSelectTag} />
|
||||
|
||||
@ -53,3 +53,25 @@ export const TREE_PANEL_STATE_KEY = 'sf_dir_view_tree_panel_open';
|
||||
export const TREE_PANEL_SECTION_STATE_KEY = 'sf_dir_view_tree_panel_section_state';
|
||||
|
||||
export const RECENTLY_USED_LIST_KEY = 'recently_used_list';
|
||||
|
||||
export const SEARCH_FILTERS_KEY = {
|
||||
SEARCH_FILENAME_AND_CONTENT: 'search_filename_and_content',
|
||||
SEARCH_FILENAME_ONLY: 'search_filename_only',
|
||||
CREATOR_LIST: 'creator_list',
|
||||
DATE: 'date',
|
||||
SUFFIXES: 'suffixes',
|
||||
};
|
||||
|
||||
export const SEARCH_FILTER_BY_DATE_OPTION_KEY = {
|
||||
TODAY: 'today',
|
||||
LAST_7_DAYS: 'last_7_days',
|
||||
LAST_30_DAYS: 'last_30_days',
|
||||
CUSTOM: 'custom',
|
||||
};
|
||||
|
||||
export const SEARCH_FILTER_BY_DATE_TYPE_KEY = {
|
||||
CREATE_TIME: 'create_time',
|
||||
LAST_MODIFIED_TIME: 'last_modified_time',
|
||||
};
|
||||
|
||||
export const SEARCH_FILTERS_SHOW_KEY = 'search_filters_show';
|
||||
|
||||
@ -40,6 +40,19 @@
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.search-container.show .input-icon .search-icon-right.sf3-font-x-01 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 28px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-container.show .input-icon .search-icon-right.search-filter-controller.active {
|
||||
color: #ff9800;
|
||||
}
|
||||
|
||||
.search-icon-left {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user