Skip to content

Commit

Permalink
Merge pull request #7275 from haiwen/optimize/map_view
Browse files Browse the repository at this point in the history
Optimize/map view
  • Loading branch information
YangGuoXuan-0503 authored Jan 10, 2025
2 parents 595487e + 13efff8 commit d06d549
Show file tree
Hide file tree
Showing 54 changed files with 1,334 additions and 698 deletions.
5 changes: 2 additions & 3 deletions frontend/src/components/cur-dir-path/dir-path.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { siteRoot, gettext } from '../../utils/constants';
import { Utils } from '../../utils/utils';
import { PRIVATE_FILE_TYPE } from '../../constants';
import { debounce } from '../../metadata/utils/common';
import { EVENT_BUS_TYPE, FACE_RECOGNITION_VIEW_ID } from '../../metadata/constants';
import { EVENT_BUS_TYPE } from '../../metadata/constants';
import { ALL_TAGS_ID } from '../../tag/constants';

const propTypes = {
Expand Down Expand Up @@ -126,13 +126,12 @@ class DirPath extends React.Component {
turnViewPathToLink = (pathList) => {
if (!Array.isArray(pathList) || pathList.length === 0) return null;
const [, , viewId, children] = pathList;
const isViewSupportClick = viewId === FACE_RECOGNITION_VIEW_ID && children;
return (
<>
<span className="path-split">/</span>
<span className="path-item">{gettext('Views')}</span>
<span className="path-split">/</span>
<span className="path-item" role={isViewSupportClick ? 'button' : null} onClick={isViewSupportClick ? this.handleRefresh : () => {}}>
<span className="path-item" role={children ? 'button' : null} onClick={children ? this.handleRefresh : () => {}}>
<MetadataViewName id={viewId} />
</span>
{children && (
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import React, { useState, useCallback, useEffect } from 'react';
import PropTypes from 'prop-types';
import { EVENT_BUS_TYPE, GALLERY_DATE_MODE, STORAGE_GALLERY_DATE_MODE_KEY } from '../../constants';
import { gettext } from '../../../utils/constants';
import RadioGroup from '../radio-group';

const DATE_MODES = [
{ value: GALLERY_DATE_MODE.YEAR, label: gettext('Year') },
{ value: GALLERY_DATE_MODE.MONTH, label: gettext('Month') },
{ value: GALLERY_DATE_MODE.DAY, label: gettext('Day') },
{ value: GALLERY_DATE_MODE.ALL, label: gettext('All') },
];

const GalleryGroupBySetter = ({ view }) => {
const [currentMode, setCurrentMode] = useState(GALLERY_DATE_MODE.DAY);

useEffect(() => {
const savedValue = window.sfMetadataContext.localStorage.getItem(STORAGE_GALLERY_DATE_MODE_KEY) || GALLERY_DATE_MODE.DAY;
setCurrentMode(savedValue);
}, [view?._id]);

const handleGroupByChange = useCallback((newMode) => {
if (currentMode === newMode) return;
setCurrentMode(newMode);
window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.SWITCH_GALLERY_GROUP_BY, newMode);
}, [currentMode]);

return (<RadioGroup value={currentMode} options={DATE_MODES} onChange={handleGroupByChange} />);
};

GalleryGroupBySetter.propTypes = {
view: PropTypes.shape({
_id: PropTypes.string
})
};

export default GalleryGroupBySetter;

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import GalleryGroupBySetter from './gallery-group-by-setter/index';
import GalleryGroupBySetter from './gallery-group-by-setter';
import GallerySliderSetter from './gallery-slider-setter/index';
import FilterSetter from './filter-setter';
import SortSetter from './sort-setter';
import GroupbySetter from './groupby-setter';
import PreHideColumnSetter from './pre-hide-column-setter';
import HideColumnSetter from './hide-column-setter';
import MapTypeSetter from './map-type-setter';

export {
GalleryGroupBySetter,
Expand All @@ -14,4 +15,5 @@ export {
GroupbySetter,
PreHideColumnSetter,
HideColumnSetter,
MapTypeSetter,
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React, { useState, useCallback, useEffect } from 'react';
import PropTypes from 'prop-types';
import { EVENT_BUS_TYPE, MAP_TYPE, STORAGE_MAP_TYPE_KEY } from '../../constants';
import { gettext } from '../../../utils/constants';
import RadioGroup from '../radio-group';

const MAP_TYPES = [
{ value: MAP_TYPE.MAP, label: gettext('Map') },
{ value: MAP_TYPE.SATELLITE, label: gettext('Satellite') },
];

const MapTypeSetter = ({ view }) => {
const [currentType, setCurrentType] = useState(MAP_TYPE.MAP);

useEffect(() => {
const type = window.sfMetadataContext.localStorage.getItem(STORAGE_MAP_TYPE_KEY) || MAP_TYPE.MAP;
setCurrentType(type);
}, [view?._id]);

const onChange = useCallback((type) => {
if (currentType === type) return;
setCurrentType(type);
window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.MODIFY_MAP_TYPE, type);
}, [currentType]);

return (<RadioGroup options={MAP_TYPES} value={currentType} onChange={onChange} />);
};

MapTypeSetter.propTypes = {
view: PropTypes.shape({
_id: PropTypes.string
})
};

export default MapTypeSetter;
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const FileOrFolderFilter = ({ readOnly, value = 'all', onChange: onChangeAPI })
return (
<CustomizeSelect
readOnly={readOnly}
className="sf-metadata-basic-filters-select"
className="sf-metadata-basic-filters-select mr-4"
value={displayValue}
options={options}
onSelectOption={onChange}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const GalleryFileTypeFilter = ({ readOnly, value = 'picture', onChange: onChange
return (
<CustomizeSelect
readOnly={readOnly}
className="sf-metadata-basic-filters-select sf-metadata-table-view-basic-filter-file-type-select ml-4"
className="sf-metadata-basic-filters-select sf-metadata-table-view-basic-filter-file-type-select mr-4"
value={displayValue}
options={options}
onSelectOption={onChange}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const TableFileTypeFilter = ({ readOnly, value, onChange: onChangeAPI }) => {
return (
<CustomizeSelect
readOnly={readOnly}
className="sf-metadata-basic-filters-select sf-metadata-table-view-basic-filter-file-type-select ml-4"
className="sf-metadata-basic-filters-select sf-metadata-table-view-basic-filter-file-type-select mr-4"
value={displayValue}
options={options}
onSelectOption={onChange}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ const TagsFilter = ({ readOnly, value: oldValue, onChange: onChangeAPI }) => {
readOnly={readOnly}
searchable={true}
supportMultipleSelect={true}
className="sf-metadata-basic-filters-select sf-metadata-table-view-basic-filter-file-type-select ml-4"
className="sf-metadata-basic-filters-select sf-metadata-table-view-basic-filter-file-type-select mr-4"
value={displayValue}
options={options}
onSelectOption={onChange}
Expand Down
53 changes: 53 additions & 0 deletions frontend/src/metadata/components/radio-group/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
.sf-metadata-radio-group {
width: fit-content;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #e2e2e2;
border-radius: 3px;
padding: 0 3px;
}

.sf-metadata-radio-group .sf-metadata-radio-group-option {
min-width: 66px;
width: fit-content;
height: 28px;
color: #212529;
background-color: #fff;
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
border: 0;
border-radius: 2px;
}

.sf-metadata-radio-group .sf-metadata-radio-group-option:hover {
background-color: #f0f0f0;
cursor: pointer;
}

.sf-metadata-radio-group .sf-metadata-radio-group-option.active {
background-color: #f5f5f5;
}

.sf-metadata-radio-group .sf-metadata-radio-group-option:not(:first-child)::before {
content: '';
width: 1px;
height: 22px;
background-color: #e2e2e2;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: opacity 0.3s;
left: -1px;
}

.sf-metadata-radio-group .sf-metadata-radio-group-option:hover::before,
.sf-metadata-radio-group .sf-metadata-radio-group-option.active::before,
.sf-metadata-radio-group .sf-metadata-radio-group-option:hover + .sf-metadata-radio-group-option::before,
.sf-metadata-radio-group .sf-metadata-radio-group-option.active + .sf-metadata-radio-group-option::before {
opacity: 0;
}
45 changes: 45 additions & 0 deletions frontend/src/metadata/components/radio-group/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import React, { useCallback, useMemo } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

import './index.css';

const RadioGroup = ({ value, options, className, onChange: onChangeAPI }) => {
const selected = useMemo(() => {
const selectedOption = options.find(o => value === o.value) || options[0];
return selectedOption.value;
}, [value, options]);

const onChange = useCallback((event) => {
const newValue = event.target.dataset.option;
if (selected === newValue) return;
onChangeAPI(newValue);
}, [selected, onChangeAPI]);

return (
<div className={classnames('sf-metadata-radio-group', className)}>
{options.map(option => {
const { value, label } = option;
return (
<div
key={value}
data-option={value}
className={classnames('sf-metadata-radio-group-option', { 'active': value === selected })}
onClick={onChange}
>
{label}
</div>
);
})}
</div>
);
};

RadioGroup.propTypes = {
value: PropTypes.string,
options: PropTypes.array,
className: PropTypes.string,
onChange: PropTypes.func,
};

export default RadioGroup;
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,17 @@ const FaceRecognitionViewToolbar = ({ readOnly, isCustomPermission, onToggleDeta
setShow(isShow);
}, []);

const setRecognitionView = useCallback(view => {
const resetView = useCallback(view => {
setView(view);
}, []);

const modifySorts = useCallback((sorts) => {
window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.FACE_RECOGNITION_VIEW_CHANGE, { sorts });
window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.UPDATE_SERVER_VIEW, { sorts });
}, []);

useEffect(() => {
const unsubscribeToggle = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.TOGGLE_VIEW_TOOLBAR, onToggle);
const unsubscribeView = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.FACE_RECOGNITION_VIEW, setRecognitionView);
const unsubscribeView = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.RESET_VIEW, resetView);
return () => {
unsubscribeToggle && unsubscribeToggle();
unsubscribeView && unsubscribeView();
Expand Down
Loading

0 comments on commit d06d549

Please sign in to comment.