From 0123bcb4d7e7be27ad7314338f280ca649a65e4c Mon Sep 17 00:00:00 2001
From: andrea ubbiali <andreaubbiali@localhost.localdomain>
Date: Mon, 5 Nov 2018 19:45:53 +0100
Subject: [PATCH] Other members accordion in sircles roles

---
 web/src/app/containers/Circle.js | 59 ++++++++++++++++++++++++--------
 1 file changed, 44 insertions(+), 15 deletions(-)

diff --git a/web/src/app/containers/Circle.js b/web/src/app/containers/Circle.js
index 6f8f6ac..5b20717 100644
--- a/web/src/app/containers/Circle.js
+++ b/web/src/app/containers/Circle.js
@@ -2,7 +2,7 @@ import React, { PropTypes } from 'react'
 import { graphql, compose } from 'react-apollo'
 import gql from 'graphql-tag'
 import { Link } from 'react-router-dom'
-import { Container, Header, Segment, Form, Button, Grid, Menu, Card, List, Table, Popup, Icon, Dropdown, Label, TextArea } from 'semantic-ui-react'
+import { Container, Header, Segment, Form, Button, Grid, Menu, Card, List, Table, Popup, Icon, Dropdown, Label, TextArea, Accordion } from 'semantic-ui-react'
 import moment from 'moment'
 import marked from 'marked'
 
@@ -310,6 +310,7 @@ class Circle extends React.Component {
         const roleType = r.roleType
 
         let fillers = []
+        let extras = []
         if (roleType === 'normal') {
           for (let i = 0, len = r.roleMembers.length; i < len; i++) {
             // Only display max 3 fillers
@@ -322,7 +323,7 @@ class Circle extends React.Component {
               focusString = ` (${focus})`
             }
             const memberLink = Util.memberUrl(member.uid, timeLine)
-            fillers.push(
+            extras.push(
               <List.Item key={member.uid}>
                 <Link to={memberLink}>
                   <Avatar uid={member.uid} size={30} inline spaced shape='rounded' />
@@ -331,13 +332,40 @@ class Circle extends React.Component {
                 {focusString}
               </List.Item>)
           }
+          fillers.push(<List>{extras}</List>)
           if (fillers.length === 0) {
-            /* TODO(sgotti) limit showed fillers when exceeding a choosed number and show a "more" button */
             fillers.push(<div key='none'>no members assigned to role</div>)
           }
-          if (r.roleMembers.length > 3) {
+          if (r.roleMembers.length > 3) { // Other members accordion
+            extras = []
             const moreFillersCount = r.roleMembers.length - 3
-            fillers.push(<div key='more'>... {moreFillersCount} other {moreFillersCount > 1 ? 'members' : 'member' }</div>)
+            for (let i = 3, len = r.roleMembers.length; i < len; i++) {
+              let focus = r.roleMembers[i].focus
+              let focusString = ''
+              if (focus) {
+                focusString = ` (${focus})`
+              }
+              let extramember = r.roleMembers[i].member
+              const extramemberLink = Util.memberUrl(extramember.uid, timeLine)
+              extras.push(
+                <List.Item key={extramember.uid}>
+                  <Link to={extramemberLink}>
+                    <Avatar uid={extramember.uid} size={30} inline spaced shape='rounded' />
+                    {extramember.userName}
+                  </Link>
+                  {focusString}
+                </List.Item>)
+            }
+            fillers.push(
+              <Accordion>
+                <Accordion.Title><Icon name='dropdown' />{moreFillersCount} other {moreFillersCount > 1 ? 'members' : 'member' }</Accordion.Title>
+                <Accordion.Content>
+                  <List>
+                    {extras}
+                  </List>
+                </Accordion.Content>
+              </Accordion>
+            )
           }
         }
 
@@ -357,13 +385,16 @@ class Circle extends React.Component {
 
             const memberLink = Util.memberUrl(leadlinkMember.uid, timeLine)
             fillers.push(
-              <List.Item key={leadlinkMember.uid}>
-                <Link to={memberLink}>
-                  <Avatar uid={leadlinkMember.uid} size={30} inline spaced shape='rounded' />
-                  {leadlinkMember.userName}
-                </Link>
-                <span> (Lead Link)</span>
-              </List.Item>)
+              <List>
+                <List.Item key={leadlinkMember.uid}>
+                  <Link to={memberLink}>
+                    <Avatar uid={leadlinkMember.uid} size={30} inline spaced shape='rounded' />
+                    {leadlinkMember.userName}
+                  </Link>
+                  <span> (Lead Link)</span>
+                </List.Item>
+              </List>
+            )
           } else {
             fillers.push(<div key='none'>no leadlink assigned</div>)
           }
@@ -400,9 +431,7 @@ class Circle extends React.Component {
             </Card.Content>
             <Card.Content>
               <Card.Description>
-                <List>
-                  {fillers}
-                </List>
+                {fillers}
               </Card.Description>
             </Card.Content>
           </Card>