Merge pull request #177 from getrebuild/better-at-comp-595

At-comp show avatar of user

src/main/java/com/rebuild/web/base/UsersGetting.java

@@ -13,6 +13,7 @@ import cn.devezhao.persist4j.Entity;
 import cn.devezhao.persist4j.engine.ID;
 import com.alibaba.fastjson.JSON;
 import com.alibaba.fastjson.JSONArray;
+import com.alibaba.fastjson.JSONObject;
 import com.rebuild.server.Application;
 import com.rebuild.server.metadata.MetadataHelper;
 import com.rebuild.server.metadata.entity.EasyMeta;
@@ -69,23 +70,21 @@ public class UsersGetting extends BaseControll {
 
 			String name = m.getName();
 			String email = null;
-			if (m instanceof User) {
-				if (!((User) m).isActive()) {
-					continue;
-				}
-				name = ((User) m).getFullName();
-				email = ((User) m).getEmail();
+
+			final User ifUser = m instanceof User ? (User) m : null;
+			if (ifUser != null) {
+				if (!ifUser.isActive()) continue;
+				name = ifUser.getFullName();
+				email = ifUser.getEmail();
 			}
 
 			if (StringUtils.isBlank(query)
                     || StringUtils.containsIgnoreCase(name, query)
                     || (email != null && StringUtils.containsIgnoreCase(email, query))) {
-				JSON o = JSONUtils.toJSONObject(new String[] { "id", "text" },
+				JSONObject o = JSONUtils.toJSONObject(new String[] { "id", "text" },
 						new String[] { m.getIdentity().toString(), name });
 				ret.add(o);
-				if (ret.size() >= 40) {
-                    break;
-                }
+				if (ret.size() >= 40) break;
 			}
 		}
 		

src/main/webapp/assets/css/rb-page.css

@@ -2272,19 +2272,41 @@ form {
     cursor: default;
 }
 
+.user-selector .select2-results__option {
+    vertical-align: middle;
+    clear: both;
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
 .user-selector .select2-results__option .zmdi {
     font-size: 14px;
     float: right;
-    margin-top: 2px;
+    margin-top: 5px;
     font-weight: bold;
 }
 
+.user-selector .select2-results__option img.avatar {
+    float: left;
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+}
+
+.user-selector .select2-results__option span.text {
+    display: inline-block;
+    padding: 3px 0;
+}
+
+.user-selector .select2-results__option img.avatar+span.text {
+    margin-left: 6px;
+}
+
 .user-selector .dropdown-wrapper ol,
 .user-selector .dropdown-wrapper ul {
     padding-left: 0;
 }
 
-
 .user-show {
     display: inline-block;
     margin: 0;

src/main/webapp/assets/js/rb-components.jsx

@@ -377,7 +377,7 @@ class UserSelector extends React.Component {
           <span className="select2-selection select2-selection--multiple">
             <ul className="select2-selection__rendered">
               {this.state.selected.length > 0 && <span className="select2-selection__clear" onClick={this.clearSelection}>×</span>}
-              {(this.state.selected).map((item) => {
+              {this.state.selected.map((item) => {
                 return (<li key={`s-${item.id}`} className="select2-selection__choice"><span className="select2-selection__choice__remove" data-id={item.id} onClick={(e) => this.removeItem(e)}>×</span>{item.text}</li>)
               })}
               <li className="select2-selection__choice abtn" onClick={this.openDropdown}><a><i className="zmdi zmdi-plus"></i> 添加</a></li>
@@ -401,7 +401,13 @@ class UserSelector extends React.Component {
                 <div className="rb-scroller" ref={(c) => this._scroller = c}>
                   <ul className="select2-results__options">
                     {noResult ? noResult : this.state.items.map((item) => {
-                      return (<li key={`o-${item.id}`} className="select2-results__option" data-id={item.id} onClick={(e) => this.clickItem(e)}><span className={`zmdi ${this.containsItem(item.id) ? ' zmdi-check' : ''}`}></span>{item.text}</li>)
+                      return (
+                        <li key={`o-${item.id}`} className="select2-results__option" data-id={item.id} onClick={(e) => this.clickItem(e)}>
+                          <i className={`zmdi ${this.containsItem(item.id) ? ' zmdi-check' : ''}`}></i>
+                          {this.state.tabType === 'User' && <img src={`${rb.baseUrl}/account/user-avatar/${item.id}`} className="avatar" />}
+                          <span className="text">{item.text}</span>
+                        </li>
+                      )
                     })}
                   </ul>
                 </div>
@@ -464,17 +470,17 @@ class UserSelector extends React.Component {
   }
 
   clickItem(e) {
-    const id = e.target.dataset.id
+    const id = e.target.dataset.id || $(e.target).parents('li').data('id')
     let exists = false
-    let ns = this.state.selected.filter((item) => {
-      if (item.id === id) {
+    const ns = this.state.selected.filter((x) => {
+      if (x.id === id) {
         exists = true
         return false
       }
       return true
     })
 
-    if (exists === false) ns.push({ id: id, text: $(e.target).text() })
+    if (!exists) ns.push({ id: id, text: $(e.target).text() })
     this.setState({ selected: ns, dropdownOpen: this.props.closeOnSelect !== true })
   }
 
@@ -483,15 +489,11 @@ class UserSelector extends React.Component {
   }
 
   containsItem(id) {
-    const ss = this.state.selected
-    for (let i = 0; i < ss.length; i++) {
-      if (ss[i].id === id) return true
-    }
-    return false
+    return !!this.state.selected.find((x) => { return x.id === id })
   }
 
   getSelected() {
-    let ids = []
+    const ids = []
     this.state.selected.forEach((item) => ids.push(item.id))
     return ids
   }