move from table to divs for user tab

fixes CNVS-26111

Test Plan
Go to new search section in admin
Click on the users/people tab
It should show a grid view of users
Those users should not be tables

Change-Id: Iafd59934efcdbf6bad5e092fe8c547eea3cf19c9
Reviewed-on: https://gerrit.instructure.com/69378
Reviewed-by: Dan Minkevitch <dan@instructure.com>
Tested-by: Jenkins
QA-Review: Clare Strong <clare@instructure.com>
Product-Review: Dan Minkevitch <dan@instructure.com>
This commit is contained in:
Sterling Cobb 2015-12-22 14:19:10 -07:00 committed by Dan Minkevitch
parent 8074cd746f
commit 6c660a4672
3 changed files with 44 additions and 45 deletions

View File

@ -17,30 +17,25 @@ define([
var { users } = this.props;
return (
<div className="pad-box no-sides">
<table className="ic-Table users-list">
<thead>
<tr>
<th>
{I18n.t("Name")}
</th>
<th>
{I18n.t("Email")}
</th>
<th>
{I18n.t("SIS ID")}
</th>
<th>
{I18n.t("Last Login")}
</th>
<th />
</tr>
</thead>
<div className="content-box" role='grid'>
<div role='row' className="grid-row border border-b pad-box-mini">
<div role='columnheader' className="col-md-3">
<strong><small>{I18n.t("Name")}</small></strong>
</div>
<div role='columnheader' className="col-md-3">
<strong><small>{I18n.t("Email")}</small></strong>
</div>
<div role='columnheader' className="col-md-3">
<strong><small>{I18n.t("SIS ID")}</small></strong>
</div>
<div role='columnheader' className="col-md-3">
<strong><small>{I18n.t("Last Login")}</small></strong>
</div>
</div>
<tbody>
<div className='users-list' role='rowgroup'>
{users.map((user) => <UsersListRow key={user.id} accountId={this.props.accountId} {...user} />)}
</tbody>
</table>
</div>
</div>
);
}

View File

@ -19,31 +19,35 @@ define([
},
render() {
var { accountId, id, name, sis_user_id, email, avatar_url, last_login } = this.props;
var url = `/accounts/${accountId}/users/${id}`;
let { accountId, id, name, sis_user_id, email, avatar_url, last_login } = this.props;
let url = `/accounts/${accountId}/users/${id}`;
return (
<tr>
<td>
{!!avatar_url &&
<span className="ic-avatar" style={{width: 30, height: 30, margin: "-1px 10px 1px 0"}}>
<img src={avatar_url} />
</span>
}
<a href={url} className="user_link">{name}</a>
</td>
<td>
<div role='row' className="grid-row pad-box-mini border border-b">
<div className="col-md-3" role="gridcell">
<span className="userAvatar">
{!!avatar_url &&
<span className="ic-avatar" style={{width: 30, height: 30, margin: "-1px 10px 1px 0"}}>
<img src={avatar_url} />
</span>
}
</span>
<span className="userUrl">
<a href={url}>{name}</a>
</span>
</div>
<div className="col-md-3" role='gridcell'>
{email}
</td>
<td>
</div>
<div className="col-md-3" role='gridcell'>
{sis_user_id}
</td>
<td>
</div>
<div className="col-md-3" role='gridcell'>
{$.datetimeString(last_login)}
</td>
<td>
</td>
</tr>
</div>
</div>
);
}
});

View File

@ -14,7 +14,7 @@ describe "new account user search" do
end
def get_rows
ff('.users-list > tbody > tr')
ff('.users-list div[role=row]')
end
def click_tab
@ -89,7 +89,7 @@ describe "new account user search" do
it "should search by name" do
match_user = user_with_pseudonym(:account => @account, :name => "user with a search term")
not_match_user = user_with_pseudonym(:account => @account, :name => "diffrient user")
user_with_pseudonym(:account => @account, :name => "diffrient user")
get "/accounts/#{@account.id}"
click_tab
@ -102,4 +102,4 @@ describe "new account user search" do
expect(rows.count).to eq 1
expect(rows.first).to include_text(match_user.name)
end
end
end