Team management page updates

app/controllers/team_management_controller.rb

@@ -8,9 +8,9 @@ def index
       format.html { render template: "queue/index" }
       format.json do
         render json: {
-          judge_teams: JudgeTeam.all.order(:id).map { |jt| serialize_org(jt) },
-          private_bars: PrivateBar.all.order(:id).map { |private_bar| serialize_org(private_bar) },
-          vsos: Vso.all.order(:id).map { |vso| serialize_org(vso) },
+          judge_teams: JudgeTeam.order(:name).map { |jt| serialize_org(jt) },
+          private_bars: PrivateBar.order(:name).map { |private_bar| serialize_org(private_bar) },
+          vsos: Vso.order(:name).map { |vso| serialize_org(vso) },
           other_orgs: other_orgs.map { |org| serialize_org(org) }
         }
       end
@@ -70,17 +70,10 @@ def update_params
   end
 
   def other_orgs
-    Organization.all.order(:id).reject { |org| org.is_a?(JudgeTeam) || org.is_a?(Representative) }
+    Organization.order(:name).reject { |org| org.is_a?(JudgeTeam) || org.is_a?(Representative) }
   end
 
   def serialize_org(org)
-    {
-      id: org.id,
-      name: org.name,
-      participant_id: org.participant_id,
-      type: org.type,
-      url: org.url,
-      user_admin_path: org.user_admin_path
-    }
+    org.serialize
   end
 end

app/models/organization.rb

@@ -136,6 +136,16 @@ def completed_tasks_tab
     ::OrganizationCompletedTasksTab.new(assignee: self, show_regional_office_column: show_regional_office_in_queue?)
   end
 
+  def serialize
+    {
+      id: id,
+      name: is_a?(JudgeTeam) ? judge.full_name.titleize : name,
+      participant_id: participant_id,
+      type: type,
+      url: url
+    }
+  end
+
   private
 
   def clean_url

app/models/organizations/judge_team.rb

@@ -64,6 +64,10 @@ def selectable_in_queue?
     false
   end
 
+  def serialize
+    super.merge(name: judge.full_name.titleize)
+  end
+
   private
 
   def use_judge_team_roles?

client/app/queue/TeamManagement.jsx

@@ -64,7 +64,7 @@ class TeamManagement extends React.PureComponent {
               <OrgHeader>
                 VSOs <Button name={COPY.TEAM_MANAGEMENT_ADD_VSO_BUTTON} onClick={this.addIhpWritingVso} />
               </OrgHeader>
-              <OrgList orgs={this.props.vsos} showBgsParticipantId />
+              <OrgList orgs={this.props.vsos} isRepresentative />
 
               <OrgHeader>
                 Private Bar
@@ -79,7 +79,7 @@ class TeamManagement extends React.PureComponent {
                   />
                 </span>
               </OrgHeader>
-              <OrgList orgs={this.props.privateBars} showBgsParticipantId />
+              <OrgList orgs={this.props.privateBars} isRepresentative />
 
               <OrgHeader>Other teams</OrgHeader>
               <OrgList orgs={this.props.otherOrgs} />
@@ -153,27 +153,26 @@ class OrgList extends React.PureComponent {
   render = () => {
     return <React.Fragment>
       <tr {...labelRowStyling}>
-        <td>{COPY.TEAM_MANAGEMENT_ID_COLUMN_HEADING}</td>
         <td>{COPY.TEAM_MANAGEMENT_NAME_COLUMN_HEADING}</td>
-        <td>{COPY.TEAM_MANAGEMENT_URL_COLUMN_HEADING}</td>
-        <td>{ this.props.showBgsParticipantId && COPY.TEAM_MANAGEMENT_PARTICIPANT_ID_COLUMN_HEADING}</td>
+        <td>{this.props.isRepresentative && COPY.TEAM_MANAGEMENT_URL_COLUMN_HEADING}</td>
+        <td>{this.props.isRepresentative && COPY.TEAM_MANAGEMENT_PARTICIPANT_ID_COLUMN_HEADING}</td>
         <td></td>
         <td></td>
       </tr>
       { this.props.orgs.map((org) =>
-        <OrgRow {...org} key={org.id} showBgsParticipantId={this.props.showBgsParticipantId} />
+        <OrgRow {...org} key={org.id} isRepresentative={this.props.isRepresentative} />
       ) }
     </React.Fragment>;
   }
 }
 
 OrgList.defaultProps = {
-  showBgsParticipantId: false
+  isRepresentative: false
 };
 
 OrgList.propTypes = {
   orgs: PropTypes.array,
-  showBgsParticipantId: PropTypes.bool
+  isRepresentative: PropTypes.bool
 };
 
 class OrgRow extends React.PureComponent {
@@ -222,27 +221,28 @@ class OrgRow extends React.PureComponent {
   // TODO: Indicate that changes have been made to the row by enabling the submit changes button. Default to disabled.
   render = () => {
     return <tr>
-      <td>{ this.props.id }</td>
       <td>
         <TextField
           name={`${COPY.TEAM_MANAGEMENT_NAME_COLUMN_HEADING}-${this.props.id}`}
           label={false}
           useAriaLabel
           value={this.state.name}
           onChange={this.changeName}
+          readOnly={!this.props.isRepresentative}
         />
       </td>
       <td>
-        <TextField
+        { this.props.isRepresentative && <TextField
           name={`${COPY.TEAM_MANAGEMENT_URL_COLUMN_HEADING}-${this.props.id}`}
           label={false}
           useAriaLabel
           value={this.state.url}
           onChange={this.changeUrl}
-        />
+          readOnly={!this.props.isRepresentative}
+        /> }
       </td>
       <td>
-        { this.props.showBgsParticipantId &&
+        { this.props.isRepresentative &&
           <TextField
             name={`${COPY.TEAM_MANAGEMENT_PARTICIPANT_ID_COLUMN_HEADING}-${this.props.id}`}
             label={false}
@@ -253,29 +253,36 @@ class OrgRow extends React.PureComponent {
         }
       </td>
       <td>
-        <Button
-          name={COPY.TEAM_MANAGEMENT_UPDATE_ROW_BUTTON}
-          id={`${this.props.id}`}
-          classNames={['usa-button-secondary']}
-          onClick={this.submitUpdate}
-        />
+        { this.props.isRepresentative &&
+          <Button
+            name={COPY.TEAM_MANAGEMENT_UPDATE_ROW_BUTTON}
+            id={`${this.props.id}`}
+            classNames={['usa-button-secondary']}
+            onClick={this.submitUpdate}
+          />
+        }
       </td>
       <td>
-        { this.state.url && <Link to={this.state.user_admin_path}>Org admin page</Link> }
+        { this.state.url && <Link to={this.state.user_admin_path}>
+          <Button
+            name="Org Admin Page"
+            classNames={['usa-button-secondary']}
+          />
+        </Link> }
       </td>
     </tr>;
   }
 }
 
 OrgRow.defaultProps = {
-  showBgsParticipantId: false
+  isRepresentative: false
 };
 
 OrgRow.propTypes = {
   id: PropTypes.number,
   name: PropTypes.string,
   participant_id: PropTypes.number,
-  showBgsParticipantId: PropTypes.bool,
+  isRepresentative: PropTypes.bool,
   url: PropTypes.string,
   user_admin_path: PropTypes.string
 };