haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-20 19:08:21 +00:00
Code Issues Releases Wiki Activity

Activities improvements (#5758)

Browse Source 
* [activities] improvement

* [activities] improved the user filter
This commit is contained in:
llj
2023-11-12 16:13:42 +08:00
committed by GitHub
parent 57d0aad7b7
commit f5fad5724d
3 changed files with 51 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/css/files-activities.css
View File

@@ -58,6 +58,7 @@
.activity-user-list {
min-height: 4rem;
max-height: 200px;
}
.activity-user-item {
@@ -67,3 +68,7 @@
.activity-user-item:hover {
background: #f5f5f5;
}
.activity-user-name {
font-size: 14px;
}

19
frontend/src/pages/dashboard/files-activities.js
View File

@@ -51,7 +51,8 @@ class FilesActivities extends Component {
availableUsers.push({
email: item.author_email,
name: item.author_name,
avatar_url: item.avatar_url
avatar_url: item.avatar_url,
isSelected: false
});
}
});
@@ -146,7 +147,8 @@ class FilesActivities extends Component {
availableUsers.push({
email: item.author_email,
name: item.author_name,
avatar_url: item.avatar_url
avatar_url: item.avatar_url,
isSelected: false
});
}
});
@@ -200,6 +202,18 @@ class FilesActivities extends Component {
});
};
toggleSelectUser = (user) => {
const { availableUsers } = this.state;
this.setState({
availableUsers: availableUsers.map(item => {
if (item.email == user.email) {
item.isSelected = !user.isSelected;
}
return item;
})
});
};
handleScroll = (event) => {
if (!this.state.isLoadingMore && this.state.hasMore) {
const clientHeight = event.target.clientHeight;
@@ -242,6 +256,7 @@ class FilesActivities extends Component {
availableUsers={availableUsers}
currentSelectedUsers={targetUsers}
setTargetUsers={this.setTargetUsers}
toggleSelectUser={this.toggleSelectUser}
/>
)}
<FileActivitiesContent items={this.state.items} isLoadingMore={this.state.isLoadingMore} />

56
frontend/src/pages/dashboard/user-selector.js
View File

@@ -9,6 +9,7 @@ const propTypes = {
availableUsers: PropTypes.array.isRequired,
currentSelectedUsers: PropTypes.array.isRequired,
setTargetUsers: PropTypes.func.isRequired,
toggleSelectUser: PropTypes.func.isRequired
};
class UserSelector extends Component {
@@ -17,14 +18,7 @@ class UserSelector extends Component {
super(props);
this.state = {
isPopoverOpen: false,
availableUsers: props.availableUsers.map(item => {
item.isSelected = false;
return item;
}),
filteredAvailableUsers: props.availableUsers.map(item => {
item.isSelected = false;
return item;
})
query: ''
};
}
@@ -41,14 +35,14 @@ class UserSelector extends Component {
if (isPopoverOpen && !this.userSelector.contains(e.target)) {
this.togglePopover();
}
}
};
togglePopover = () => {
this.setState({
isPopoverOpen: !this.state.isPopoverOpen
}, () => {
if (!this.state.isPopoverOpen) {
const { availableUsers } = this.state;
const { availableUsers } = this.props;
const selectedUsers = availableUsers.filter(item => item.isSelected);
this.props.setTargetUsers(selectedUsers);
}
@@ -58,36 +52,24 @@ class UserSelector extends Component {
onToggleClick = (e) => {
e.stopPropagation();
this.togglePopover();
}
};
searchUsers = (e) => {
const { availableUsers } = this.state;
const query = e.target.value.trim();
const filteredAvailableUsers = availableUsers.filter(item => item.email.indexOf(query) != -1);
onQueryChange = (e) => {
this.setState({
filteredAvailableUsers: filteredAvailableUsers
query: e.target.value
});
};
toggleSelectItem = (e, targetItem) => {
e.stopPropagation();
const { availableUsers } = this.state;
const handleItem = (item) => {
if (item.email == targetItem.email) {
item.isSelected = !targetItem.isSelected;
}
return item;
};
this.setState({
availableUsers: availableUsers.map(handleItem)
});
this.props.toggleSelectUser(targetItem);
};
render() {
const { isPopoverOpen, availableUsers, filteredAvailableUsers } = this.state;
const { currentSelectedUsers } = this.props;
const { isPopoverOpen, query } = this.state;
const { currentSelectedUsers, availableUsers } = this.props;
const selectedUsers = availableUsers.filter(item => item.isSelected);
const filteredAvailableUsers = query.trim() ? availableUsers.filter(item => item.email.indexOf(query.trim()) != -1) : availableUsers;
return (
<div className="mt-4 position-relative">
<span className="cur-activity-modifiers d-inline-block p-2 rounded" onClick={this.onToggleClick}>
@@ -99,31 +81,32 @@ class UserSelector extends Component {
</span>
{isPopoverOpen && (
<div className="position-absolute activity-modifier-selector-container rounded shadow" ref={ref => this.userSelector = ref}>
<ul className="activity-selected-modifiers px-3 py-2 list-unstyled">
<ul className="activity-selected-modifiers px-3 py-1 list-unstyled">
{selectedUsers.map((item, index) => {
return (
<li key={index} className="activity-selected-modifier">
<img src={item.avatar_url} className="avatar w-5 h-5" alt="" />
<span className="ml-2">{item.name}</span>
<span className="activity-user-name ml-2">{item.name}</span>
<i className="sf2-icon-close unselect-activity-user ml-2" onClick={(e) => {this.toggleSelectItem(e, item);}}></i>
</li>
);
})}
</ul>
<div className="p-3">
<div className="px-3 pt-3">
<Input
type="text"
placeholder={gettext('Search users...')}
className="mb-1"
onKeyDown={this.searchUsers}
value={query}
onChange={this.onQueryChange}
/>
<ul className="activity-user-list list-unstyled">
</div>
<ul className="activity-user-list list-unstyled p-3 o-auto">
{filteredAvailableUsers.map((item, index) => {
return (
<li key={index} className="activity-user-item h-6 p-1 rounded d-flex justify-content-between align-items-center" onClick={(e) => {this.toggleSelectItem(e, item);}}>
<div>
<img src={item.avatar_url} className="avatar w-5 h-5" alt="" />
<span className="ml-2">{item.name}</span>
<span className="activity-user-name ml-2">{item.name}</span>
</div>
{item.isSelected && <i className="sf2-icon-tick text-gray"></i>}
</li>
@@ -131,7 +114,6 @@ class UserSelector extends Component {
})}
</ul>
</div>
</div>
)}
</div>
);