Share to user support select user from department (#7361)

* update

* remove 'All users' in org user department

* change style

---------

Co-authored-by: lian <imwhatiam123@gmail.com>

frontend/src/components/dialog/department-detail-widget/department-group-members.js

@@ -52,10 +52,10 @@ class Item extends Component {
           <td width="13%">
             <input type="checkbox" className="vam" checked='checked' disabled/>
           </td>
-          <td width="11%"><img className="avatar" src={member.avatar_url} alt=""/></td>
+          <td width="12%"><img className="avatar" src={member.avatar_url} alt=""/></td>
           <td width="60%">{member.name}</td>
-          <td width="16%" className={this.state.highlight ? 'visible' : 'invisible' }>
+          <td width="15%" className={this.state.highlight ? 'visible' : 'invisible' } id={`no-select-${index}`}>
-            <i className="sf3-font-help sf3-font" id={`no-select-${index}`}></i>
+            <i className="sf3-font-help sf3-font"></i>
             <Tooltip placement='bottom' isOpen={this.state.tooltipOpen} toggle={this.toggleTooltip} target={`no-select-${index}`} delay={{ show: 0, hide: 0 }} fade={false}>
               {tip}
             </Tooltip>
@@ -107,12 +107,7 @@ class DepartmentGroupMembers extends Component {
 
   render() {
     const { members, memberSelected, loading, selectedMemberMap, currentDepartment, usedFor } = this.props;
-    let headerTitle;
+    let headerTitle = (currentDepartment.name || '') + ' ' + gettext('members');
-    if (currentDepartment.id === -1) {
-      headerTitle = gettext('All users');
-    } else {
-      headerTitle = currentDepartment.name + ' ' + gettext('members');
-    }
     if (loading) {
       return (
         <div className="department-dialog-member pt-4">

frontend/src/components/dialog/department-detail-widget/department-group.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Loading from '../../../components/loading';
-import { gettext, isOrgContext } from '../../../utils/constants';
+import { isOrgContext } from '../../../utils/constants';
 
 const ItemPropTypes = {
   department: PropTypes.object,
@@ -30,7 +30,7 @@ class Item extends Component {
   renderSubDepartments = () => {
     const { departments } = this.props;
     return (
-      <div style={{ paddingLeft: '10px' }}>
+      <div>
         {departments.map((department, index) => {
           if (department.parent_group_id !== this.props.department.id) return null;
           return (
@@ -43,6 +43,7 @@ class Item extends Component {
               toggleExpanded={this.props.toggleExpanded}
               currentDepartment={this.props.currentDepartment}
               allMembersClick={this.props.allMembersClick}
+              padding={this.props.padding + 10}
             />
           );
         })}
@@ -56,12 +57,12 @@ class Item extends Component {
     const { hasChild, isExpanded } = department;
     return (
       <>
-        <div className={isCurrent ? 'tr-highlight group-item' : 'group-item'} onClick={this.getMembers}>
+        <div className={isCurrent ? 'tr-highlight group-item' : 'group-item'} onClick={this.getMembers} style={{ paddingLeft: `${this.props.padding}px` }}>
           {hasChild &&
             <span
               className={`sf3-font sf3-font-down ${isExpanded ? '' : 'rotate-270'} d-inline-block`}
               onClick={this.toggleExpanded}
-              style={{ color: isCurrent ? '#fff' : '#999', fontSize: '12px' }}
+              style={{ color: '#666' }}
             >
             </span>
           }
@@ -112,19 +113,9 @@ class DepartmentGroup extends Component {
     if (loading) {
       return (<Loading/>);
     }
-    const { allMembersClick } = this.state;
     return (
       <div className="department-dialog-group">
         <div>
-          {isOrgContext &&
-            <div className={allMembersClick ? 'tr-highlight group-item' : 'group-item'}>
-              <span
-                className={'pr-2'}
-                style={{ color: allMembersClick ? '#fff' : '#999', fontSize: '12px' }}
-              />
-              <span>{gettext('All users')}</span>
-            </div>
-          }
           {departments.length > 0 && departments.map((department, index) => {
             if (department.parent_group_id !== -1) return null;
             return (
@@ -137,6 +128,7 @@ class DepartmentGroup extends Component {
                 toggleExpanded={this.toggleExpanded}
                 currentDepartment={this.props.currentDepartment}
                 allMembersClick={this.state.allMembersClick}
+                padding={10}
               />
             );
           })}

frontend/src/css/add-user-to-departments.css

@@ -1,129 +0,0 @@
-.department-dialog .department-dialog-content {
-  padding: 0;
-  min-height: 30rem;
-  display: flex;
-  overflow: hidden;
-  flex-wrap: nowrap;
-  align-content: space-between;
-  justify-content: space-between;
-  flex-direction: row;
-}
-
-.department-dialog .department-dialog-content > div {
-  max-height: calc(100vh - 120px);
-  overflow-y: auto;
-}
-
-.department-dialog-content .department-dialog-group {
-  flex: 0 0 35%;
-  padding: 1rem;
-  border-right: 1px solid #eee;
-}
-
-.department-dialog-content .department-dialog-member {
-  display: flex;
-  flex: 0 0 35%;
-  border-right: 1px solid #eee;
-}
-
-.department-dialog-content .department-dialog-member-selected {
-  display: flex;
-  flex: 0 0 65%;
-  border-right: 1px solid #eee;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.department-dialog-content .department-dialog-member-selected .modal-footer {
-  border-top: none;
-}
-
-.department-dialog-content .department-dialog-group .group-item {
-  cursor: pointer;
-  padding: 5px;
-  border-radius: 5px;
-}
-
-.department-dialog-content .department-dialog-group .group-item:hover {
-  background-color: #f5f5f5;
-}
-
-.department-dialog-content .department-dialog-group .group-item.tr-highlight:hover,
-.department-dialog-content .department-dialog-group .tr-highlight {
-  background-color: #ED7109;
-  color: #ffffff;
-}
-
-.department-dialog-member-head {
-  display: flex;
-  padding: 0 0 12px 0;
-  justify-content: space-between;
-}
-
-.department-dialog-member-head .department-name {
-  font-size: 0.8125rem;
-  color: #666;
-}
-
-.department-dialog-member-head .select-all {
-  cursor: pointer;
-  font-size: 0.8125rem;
-  color: #ED7109;
-}
-
-.department-dialog-member-head .select-all-disable {
-  font-size: 0.8125rem;
-  color: rgb(248, 205, 160);
-}
-
-.department-dialog-member-table td,
-.department-dialog-member-head td {
-  border: none;
-  text-align: left;
-  padding: 0;
-}
-
-.department-dialog-member-table {
-  display: block;
-  text-align: center;
-  max-height: calc(100% - 32px);
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
-.department-dialog-member-table tr {
-  display: table;
-  width: 100%;
-  table-layout: fixed;
-  height: 36px;
-}
-
-.department-dialog-content .avatar {
-  width: 24px;
-  height: 24px;
-  line-height: 24px;
-}
-
-.department-dialog-content tr td:first-child {
-  padding-left: 16px;
-}
-
-.department-dialog-member-table tr td:first-child {
-  padding-bottom: 2px;
-}
-
-.tooltip-inner {
-  font-size: 13px;
-  font-weight: lighter;
-  text-align: justify;
-  color: #fff;
-  background-color: #303133;
-}
-
-.department-dialog-member-selected tr td:last-child {
-  padding-right: 16px;
-}
-
-.department-dialog-member-selected .modal-footer .btn {
-  min-width: 80px;
-}

frontend/src/css/group-departments.css

@@ -9,7 +9,7 @@
   flex-direction: row;
 }
 
-.department-dialog .department-dialog-content>div {
+.department-dialog .department-dialog-content > div {
   max-height: calc(100vh - 120px);
   overflow-y: auto;
 }
@@ -20,16 +20,6 @@
   border-right: 1px solid #eee;
 }
 
-.department-dialog-content .department-dialog-group .tr-highlight .dtable-icon-groups {
-  padding-right: 10px;
-  color: #ffffff;
-}
-
-.department-dialog-content .department-dialog-group .dtable-icon-groups {
-  padding-right: 10px;
-  color: #9c9c9c;
-}
-
 .department-dialog-content .department-dialog-member {
   display: flex;
   flex: 0 0 35%;
@@ -48,9 +38,9 @@
   border-top: none;
 }
 
-.department-dialog-content .department-dialog-member-selected .dtable-icon-cancel {
+.department-dialog-content .department-dialog-member-selected .sf3-font-close {
   cursor: pointer;
-  color: #959595;
+  color: #666;
 }
 
 .department-dialog-content .department-dialog-group .group-item {
@@ -65,8 +55,22 @@
 
 .department-dialog-content .department-dialog-group .group-item.tr-highlight:hover,
 .department-dialog-content .department-dialog-group .tr-highlight {
-  background-color: #FF8000;
+  background-color: #f0f0f0;
-  color: #ffffff;
+  color: inherit;
+  position: relative;
+}
+
+.department-dialog-content .department-dialog-group .group-item.tr-highlight::before {
+  content: '';
+  display: block;
+  width: 4px;
+  background-color: #ff9800;
+  border-radius: 2px;
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  left: -8px;
+  z-index: 0;
 }
 
 .department-dialog-member-head {
@@ -77,13 +81,13 @@
 
 .department-dialog-member-head .department-name {
   font-size: 0.8125rem;
-  color: #9c9c9c;
+  color: #666;
 }
 
 .department-dialog-member-head .select-all {
   cursor: pointer;
   font-size: 0.8125rem;
-  color: #ea7500;;
+  color: #ED7109;
 }
 
 .department-dialog-member-head .select-all-disable {
@@ -104,6 +108,7 @@
   max-height: calc(100% - 32px);
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
+  padding-bottom: 30px;
 }
 
 .department-dialog-member-table tr {
@@ -115,6 +120,13 @@
 
 .department-dialog-member-table .sf3-font-help {
   color: #999;
+  padding-right: 16px;
+  float: right;
+}
+
+.department-dialog-member-table .sf3-font-help:hover {
+  color: #666;
+  cursor: pointer;
 }
 
 .department-dialog-member .empty-tip {
@@ -127,7 +139,7 @@
 }
 
 .department-dialog-member .empty-tip h2 {
-  color: #999;
+  color: #666;
   font-weight: normal;
   font-size: 1rem;
 }
@@ -146,22 +158,20 @@
   padding-bottom: 2px;
 }
 
-.department-dialog-member-table tr td .dtable-icon-use-help {
-  color: #bdbdbd;
-}
-
-.department-dialog-member-table tr td .dtable-icon-use-help:hover {
-  color: #888;
-}
-
 .tooltip-inner {
   font-size: 13px;
   font-weight: lighter;
   text-align: justify;
-  color: #FFF;
+  color: #fff;
   background-color: #303133;
 }
 
+.bs-tooltip-top .arrow::before,
+.bs-tooltip-auto[x-placement^="bottom"] .arrow::before,
+.bs-tooltip-auto[x-placement^="top"] .arrow::before {
+  border-top-color: #303133;
+}
+
 .department-dialog-member-selected tr td:last-child {
   padding-right: 16px;
 }

seahub/api2/endpoints/address_book/departments.py

@@ -92,12 +92,7 @@ class AddressBookDepartmentMembers(APIView):
         '''
         check if the department belongs to the org
         '''
-        # TODO
+        return org_id == ccnet_api.get_org_id_by_group(department_id)
-        # owner = "%s@seafile_group" % department_id
-        # ws = Workspaces.objects.get_workspace_by_owner(owner)
-        # if ws and ws.org_id == org_id:
-        #     return True
-        return False
 
     def get(self, request, department_id):
         """ List members of a group in address book.
@@ -118,7 +113,6 @@ class AddressBookDepartmentMembers(APIView):
             members = ccnet_api.get_group_members(department_id)
             for m in members:
                 member_info = get_address_book_group_memeber_info(m)
-                # filter empty-user from bug that made an empty-group-owner when creating department
                 if m.user_name == '':
                     continue
                 return_results.append(member_info)