andrewdds
GitHub
commit
a7cc407952
@ -46,3 +46,12 @@ class SidenavItem(UIModule):
|
||||
active=active,
|
||||
icon=icon,
|
||||
subnav=subnav)
|
||||
|
||||
class EmptyState(UIModule):
|
||||
def render(self, message, actionLabel, actionHref, icon=None):
|
||||
return self.render_string(
|
||||
"components/empty_state.html.to",
|
||||
message=message,
|
||||
actionLabel=actionLabel,
|
||||
actionHref=actionHref,
|
||||
icon=icon)
|
||||
|
||||
@ -1,15 +1,27 @@
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding-top: 10rem;
|
||||
padding: 6rem ($gap * 2) 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
@include media($medium-screen) {
|
||||
padding: 8rem ($gap * 4) 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include icon-size(50);
|
||||
@include icon-color($color-gray-light);
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: $font-sans;
|
||||
font-weight: 300;
|
||||
line-height: 10rem;
|
||||
font-size: 44px;
|
||||
line-height: 5rem;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 2rem;
|
||||
max-width: 40%;
|
||||
@include h2;
|
||||
line-height: 1.2;
|
||||
max-width: 15em;
|
||||
color: $color-gray;
|
||||
|
||||
@include media($large-screen) {
|
||||
@include h1;
|
||||
}
|
||||
}
|
||||
}
|
||||
9
templates/components/empty_state.html.to
Normal file
9
templates/components/empty_state.html.to
Normal file
@ -0,0 +1,9 @@
|
||||
<div class='empty-state'>
|
||||
<p>{{ message }}</p>
|
||||
|
||||
{% if icon %}
|
||||
{% module Icon(icon) %}
|
||||
{% end %}
|
||||
|
||||
<a href='{{ actionHref }}' class='usa-button usa-button-big'>{{ actionLabel }}</a>
|
||||
</div>
|
||||
@ -31,67 +31,79 @@
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% if not requests %}
|
||||
|
||||
{% module Alert('Pending Financial Verification',
|
||||
message="<p>Your next step is to create a Task Order (T.O.) associated with JEDI Cloud. Please consult a Contracting Officer (KO) or Contracting Officer Representative (COR) to help with this step.</p>"
|
||||
) %}
|
||||
{% module EmptyState(
|
||||
'There are currently no active requests for you to see.',
|
||||
actionLabel='Create a new JEDI Cloud Request',
|
||||
actionHref='/requests/new',
|
||||
icon='document'
|
||||
)%}
|
||||
|
||||
<div class="col col--grow">
|
||||
{% else %}
|
||||
|
||||
<form class='search-bar'>
|
||||
<div class='usa-input search-input'>
|
||||
<label for='requests-search'>Search requests by Order ID</label>
|
||||
<input type='search' id='requests-search' name='requests-search' placeholder="Search by Order ID"/>
|
||||
<button type="submit">
|
||||
<span class="hide">Search</span>
|
||||
</button>
|
||||
</div>
|
||||
{% module Alert('Pending Financial Verification',
|
||||
message="<p>Your next step is to create a Task Order (T.O.) associated with JEDI Cloud. Please consult a Contracting Officer (KO) or Contracting Officer Representative (COR) to help with this step.</p>"
|
||||
) %}
|
||||
|
||||
<div class='usa-input'>
|
||||
<label for='filter-status'>Filter requests by status</label>
|
||||
<select id="filter-status" name="filter-status">
|
||||
<option value="" selected disabled>Filter by status</option>
|
||||
<option value="">Active</option>
|
||||
<option value="">Pending</option>
|
||||
<option value="">Denied</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
<div class="col col--grow">
|
||||
|
||||
<div class='responsive-table-wrapper'>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Order ID</th>
|
||||
<th scope="col">Request Date</th>
|
||||
<th scope="col">Requester</th>
|
||||
<th scope="col">Total Apps</th>
|
||||
<th scope="col">Status</th>
|
||||
<th scope="col" class="table-cell--shrink">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for r in requests %}
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<a class='icon-link icon-link--large' href="{{ reverse_url('request_form_update', 1, r['order_id']) if r["status"] != "approved" else reverse_url('financial_verification', r['order_id']) }}">{{ r['order_id'] }}</a>
|
||||
{% if r['is_new'] %}<span class="usa-label">New</span>
|
||||
</th>
|
||||
<form class='search-bar'>
|
||||
<div class='usa-input search-input'>
|
||||
<label for='requests-search'>Search requests by Order ID</label>
|
||||
<input type='search' id='requests-search' name='requests-search' placeholder="Search by Order ID"/>
|
||||
<button type="submit">
|
||||
<span class="hide">Search</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class='usa-input'>
|
||||
<label for='filter-status'>Filter requests by status</label>
|
||||
<select id="filter-status" name="filter-status">
|
||||
<option value="" selected disabled>Filter by status</option>
|
||||
<option value="">Active</option>
|
||||
<option value="">Pending</option>
|
||||
<option value="">Denied</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class='responsive-table-wrapper'>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Order ID</th>
|
||||
<th scope="col">Request Date</th>
|
||||
<th scope="col">Requester</th>
|
||||
<th scope="col">Total Apps</th>
|
||||
<th scope="col">Status</th>
|
||||
<th scope="col" class="table-cell--shrink">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for r in requests %}
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<a class='icon-link icon-link--large' href="{{ reverse_url('request_form_update', 1, r['order_id']) if r["status"] != "approved" else reverse_url('financial_verification', r['order_id']) }}">{{ r['order_id'] }}</a>
|
||||
{% if r['is_new'] %}<span class="usa-label">New</span>
|
||||
</th>
|
||||
{% end %}
|
||||
<td>{{ r['date'] }}</td>
|
||||
<td>{{ r['full_name'] }}</td>
|
||||
<td>{{ r['app_count'] }}</td>
|
||||
<td>{{ r['status'] }}</td>
|
||||
<td class="table-cell--shrink">
|
||||
<a href="" class='icon-link'>Download</a>
|
||||
<a href="/request/approval" class='icon-link'>Approval</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% end %}
|
||||
<td>{{ r['date'] }}</td>
|
||||
<td>{{ r['full_name'] }}</td>
|
||||
<td>{{ r['app_count'] }}</td>
|
||||
<td>{{ r['status'] }}</td>
|
||||
<td class="table-cell--shrink">
|
||||
<a href="" class='icon-link'>Download</a>
|
||||
<a href="/request/approval" class='icon-link'>Approval</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% end %}
|
||||
</tbody>
|
||||
</table>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% end %}
|
||||
|
||||
{% end %}
|
||||
|
||||
|
||||
@ -2,91 +2,73 @@
|
||||
|
||||
{% block workspace_content %}
|
||||
|
||||
{% if not members %}
|
||||
|
||||
<form class='search-bar'>
|
||||
<div class='usa-input search-input'>
|
||||
<label for='members-search'>Search members by name</label>
|
||||
<input type='search' id='members-search' name='members-search' placeholder="Search by name"/>
|
||||
<button type="submit">
|
||||
<span class="hide">Search</span>
|
||||
</button>
|
||||
</div>
|
||||
{% module EmptyState(
|
||||
'There are currently no members in this Workspace.',
|
||||
actionLabel='Invite a new Member',
|
||||
actionHref='/members/new',
|
||||
icon='avatar'
|
||||
)%}
|
||||
|
||||
<div class='usa-input filter-input'>
|
||||
<label for='filter-status'>Filter members by status</label>
|
||||
<select id="filter-status" name="filter-status">
|
||||
<option value="" selected disabled>Filter by status</option>
|
||||
<option value="">Active</option>
|
||||
<option value="">Pending</option>
|
||||
<option value="">Denied</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class='usa-input filter-input'>
|
||||
<label for='filter-role'>Filter members by role</label>
|
||||
<select id="filter-role" name="filter-role">
|
||||
<option value="" selected disabled>Filter by role</option>
|
||||
<option value="">Admin</option>
|
||||
<option value="">CCPO</option>
|
||||
<option value="">Developer</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
{% else %}
|
||||
|
||||
{# <div class='panel panel__actions'>
|
||||
<div class='row'>
|
||||
<div class='col col--grow col--pad'>
|
||||
<form class="usa-search usa-search-small">
|
||||
<label class="usa-sr-only" for="search-field-small">Search small</label>
|
||||
<input id="search-field-small" type="search" name="search" placeholder="Search by name">
|
||||
<button type="submit">
|
||||
<span class="usa-sr-only">Search</span>
|
||||
</button>
|
||||
</form>
|
||||
<form class='search-bar'>
|
||||
<div class='usa-input search-input'>
|
||||
<label for='members-search'>Search members by name</label>
|
||||
<input type='search' id='members-search' name='members-search' placeholder="Search by name"/>
|
||||
<button type="submit">
|
||||
<span class="hide">Search</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class='col col--grow col--pad'>
|
||||
<select id="filter_status" name="filter_status" required="">
|
||||
|
||||
<div class='usa-input filter-input'>
|
||||
<label for='filter-status'>Filter members by status</label>
|
||||
<select id="filter-status" name="filter-status">
|
||||
<option value="" selected disabled>Filter by status</option>
|
||||
<option value="">Active</option>
|
||||
<option value="">Pending</option>
|
||||
<option value="">Denied</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class='col col--grow col--pad'>
|
||||
<select id="filter_role" name="filter_role" required="">
|
||||
|
||||
<div class='usa-input filter-input'>
|
||||
<label for='filter-role'>Filter members by role</label>
|
||||
<select id="filter-role" name="filter-role">
|
||||
<option value="" selected disabled>Filter by role</option>
|
||||
<option value="">Admin</option>
|
||||
<option value="">CCPO</option>
|
||||
<option value="">Developer</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
<div class='responsive-table-wrapper'>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" width="50%">Name</th>
|
||||
<th scope="col" class='table-cell--shrink'> <span class="hide">Status Flag</span></th>
|
||||
<th scope="col">Status</th>
|
||||
<th scope="col">Workspace Role</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for m in members %}
|
||||
<tr>
|
||||
<td><a href="#" class="icon-link icon-link--large">{{ m['first_name'] }} {{ m['last_name'] }}</a></td>
|
||||
<td class='table-cell--shrink'>{% if m['num_projects'] == '0' %} <span class="label label--info">No Project Access</span> {% end %}</td>
|
||||
<td>{{ m['status'] }}</a></td>
|
||||
<td>{{ m['workspace_role'] }}</a></td>
|
||||
</tr>
|
||||
{% end %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div> #}
|
||||
|
||||
|
||||
<div class='responsive-table-wrapper'>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" width="50%">Name</th>
|
||||
<th scope="col" class='table-cell--shrink'> <span class="hide">Status Flag</span></th>
|
||||
<th scope="col">Status</th>
|
||||
<th scope="col">Workspace Role</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for m in members %}
|
||||
<tr>
|
||||
<td><a href="#" class="icon-link icon-link--large">{{ m['first_name'] }} {{ m['last_name'] }}</a></td>
|
||||
<td class='table-cell--shrink'>{% if m['num_projects'] == '0' %} <span class="label label--info">No Project Access</span> {% end %}</td>
|
||||
<td>{{ m['status'] }}</a></td>
|
||||
<td>{{ m['workspace_role'] }}</a></td>
|
||||
</tr>
|
||||
{% end %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% end %}
|
||||
|
||||
|
||||
{% end %}
|
||||
|
||||
@ -2,31 +2,44 @@
|
||||
|
||||
{% block workspace_content %}
|
||||
|
||||
{% for project in projects %}
|
||||
<div class='block-list project-list-item'>
|
||||
<header class='block-list__header'>
|
||||
<h2 class='block-list__title'>{{ project['name'] }} ({{ len(project['environments'])}} environments)</h2>
|
||||
<a class='block-list__header__link' href='/workspaces/123456/projects/789/edit'>
|
||||
{% module Icon('edit') %}
|
||||
<span>edit</span>
|
||||
</a>
|
||||
</header>
|
||||
<ul>
|
||||
{% for environment in project['environments'] %}
|
||||
<li class='block-list__item project-list-item__environment'>
|
||||
<a href='/' target='_blank' rel='noopener noreferrer' class='project-list-item__environment__link'>
|
||||
{% module Icon('link') %}
|
||||
<span>{{ environment["name"]}}</span>
|
||||
</a>
|
||||
{% if not projects %}
|
||||
|
||||
{% module EmptyState(
|
||||
'There are currently no projects set up for this Workspace.',
|
||||
actionLabel='Create a new Project',
|
||||
actionHref='/project/new',
|
||||
icon='cloud'
|
||||
)%}
|
||||
|
||||
{% else %}
|
||||
|
||||
{% for project in projects %}
|
||||
<div class='block-list project-list-item'>
|
||||
<header class='block-list__header'>
|
||||
<h2 class='block-list__title'>{{ project['name'] }} ({{ len(project['environments'])}} environments)</h2>
|
||||
<a class='block-list__header__link' href='/workspaces/123456/projects/789/edit'>
|
||||
{% module Icon('edit') %}
|
||||
<span>edit</span>
|
||||
</a>
|
||||
</header>
|
||||
<ul>
|
||||
{% for environment in project['environments'] %}
|
||||
<li class='block-list__item project-list-item__environment'>
|
||||
<a href='/' target='_blank' rel='noopener noreferrer' class='project-list-item__environment__link'>
|
||||
{% module Icon('link') %}
|
||||
<span>{{ environment["name"]}}</span>
|
||||
</a>
|
||||
|
||||
<div class='project-list-item__environment__members'>
|
||||
<div class='label'>0</div>
|
||||
<span>members</span>
|
||||
</div>
|
||||
</li>
|
||||
{% end %}
|
||||
</ul>
|
||||
</div>
|
||||
{% end %}
|
||||
|
||||
<div class='project-list-item__environment__members'>
|
||||
<div class='label'>0</div>
|
||||
<span>members</span>
|
||||
</div>
|
||||
</li>
|
||||
{% end %}
|
||||
</ul>
|
||||
</div>
|
||||
{% end %}
|
||||
|
||||
{% end %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user