Commit b63e4eb7 authored by Lucas Brown's avatar Lucas Brown

Update formatting for user pages in web app.

parent 7909dc4c
......@@ -91,7 +91,7 @@ func (h *Projects) Index(ctx context.Context, w http.ResponseWriter, r *http.Req
subStatusIcon = "far fa-circle"
}
v.Formatted = fmt.Sprintf("<span class='cell-font-status %s'><i class='%s'></i>%s</span>", subStatusClass, subStatusIcon, web.EnumValueTitle(v.Value))
v.Formatted = fmt.Sprintf("<span class='cell-font-status %s'><i class='%s mr-1'></i>%s</span>", subStatusClass, subStatusIcon, web.EnumValueTitle(v.Value))
case "created_at":
dt := web.NewTimeResponse(ctx, q.CreatedAt)
v.Value = dt.Local
......
......@@ -44,6 +44,10 @@ func urlUsersCreate() string {
return fmt.Sprintf("/users/create")
}
func urlUsersInvite() string {
return fmt.Sprintf("/users/invite")
}
func urlUsersView(userID string) string {
return fmt.Sprintf("/users/%s", userID)
}
......@@ -117,7 +121,7 @@ func (h *Users) Index(ctx context.Context, w http.ResponseWriter, r *http.Reques
subStatusIcon = "far fa-circle"
}
v.Formatted = fmt.Sprintf("<span class='cell-font-status %s'><i class='%s'></i>%s</span>", subStatusClass, subStatusIcon, web.EnumValueTitle(v.Value))
v.Formatted = fmt.Sprintf("<span class='cell-font-status %s'><i class='%s mr-1'></i>%s</span>", subStatusClass, subStatusIcon, web.EnumValueTitle(v.Value))
case "created_at":
dt := web.NewTimeResponse(ctx, q.CreatedAt)
v.Value = dt.Local
......@@ -175,6 +179,7 @@ func (h *Users) Index(ctx context.Context, w http.ResponseWriter, r *http.Reques
data := map[string]interface{}{
"datatable": dt.Response(),
"urlUsersCreate": urlUsersCreate(),
"urlUsersInvite": urlUsersInvite(),
}
return h.Renderer.Render(ctx, w, r, TmplLayoutBase, "users-index.gohtml", web.MIMETextHTMLCharsetUTF8, http.StatusOK, data)
......@@ -372,6 +377,7 @@ func (h *Users) View(ctx context.Context, w http.ResponseWriter, r *http.Request
}
}
data["urlUsersView"] = urlUsersView(userID)
data["urlUsersUpdate"] = urlUsersUpdate(userID)
data["urlUserVirtualLogin"] = urlUserVirtualLogin(userID)
......@@ -546,6 +552,8 @@ func (h *Users) Update(ctx context.Context, w http.ResponseWriter, r *http.Reque
data["passwordValidationDefaults"] = verr.(*weberror.Error)
}
data["urlUsersView"] = urlUsersView(userID)
return h.Renderer.Render(ctx, w, r, TmplLayoutBase, "users-update.gohtml", web.MIMETextHTMLCharsetUTF8, http.StatusOK, data)
}
......
......@@ -4,6 +4,13 @@
{{end}}
{{define "content"}}
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/account">Account</a></li>
<li class="breadcrumb-item active" aria-current="page">Update</li>
</ol>
</nav>
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Update Account Settings</h1>
</div>
......
......@@ -4,6 +4,13 @@
{{end}}
{{define "content"}}
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/account">Account</a></li>
<li class="breadcrumb-item active" aria-current="page">View</li>
</ol>
</nav>
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Account</h1>
<!-- a href="/account/update" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="far fa-edit fa-sm text-white-50 mr-1"></i>Edit Details</a -->
......
......@@ -52,7 +52,7 @@
</div>
<div class="col-md-5">
<p>
<small>Role</small><br/>
<small>Roles</small><br/>
{{ if .userAccount }}
<b>
{{ range $r := .userAccount.Roles }}
......
......@@ -4,6 +4,13 @@
{{end}}
{{define "content"}}
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/users">Users</a></li>
<li class="breadcrumb-item active" aria-current="page">Create</li>
</ol>
</nav>
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Create User</h1>
</div>
......@@ -33,17 +40,6 @@
placeholder="enter email" name="Email" value="{{ .form.Email }}" required>
{{template "invalid-feedback" dict "fieldName" "UserCreateRequest.Email" "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors }}
</div>
<div class="form-group">
<label for="inputTimezone">Timezone</label>
<select class="form-control {{ ValidationFieldClass $.validationErrors "UserCreateRequest.Timezone" }}"
id="inputTimezone" name="Timezone">
<option value="">Not set</option>
{{ range $idx, $t := .timezones }}
<option value="{{ $t }}" {{ if CmpString $t $.form.Timezone }}selected="selected"{{ end }}>{{ $t }}</option>
{{ end }}
</select>
{{template "invalid-feedback" dict "fieldName" "UserCreateRequest.Timezone" "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors }}
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password"
......
{{define "title"}}Users{{end}}
{{define "content"}}
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/users">Users</a></li>
<li class="breadcrumb-item active" aria-current="page">Index</li>
</ol>
</nav>
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Users</h1>
{{ if HasRole $._Ctx "admin" }}
<a href="{{ .urlUsersCreate }}" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-user-plus fa-sm text-white-50 mr-1"></i>Create User</a>
<div>
<a href="{{ .urlUsersCreate }}" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm mr-2"><i class="fas fa-user-plus fa-sm text-white-50 mr-1"></i>Create User</a>
<a href="{{ .urlUsersInvite }}" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-restroom fa-sm text-white-50 mr-1"></i>Invite Users</a>
</div>
{{ end }}
</div>
......
{{define "title"}}Invite Users{{end}}
{{define "content"}}
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/users">Users</a></li>
<li class="breadcrumb-item active" aria-current="page">Invite</li>
</ol>
</nav>
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Invite Users</h1>
</div>
<form method="POST">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<div class="form-group">
<label for="inputEmail">Email for Invite 1</label>
<input type="text" class="form-control invite-user-email" placeholder="enter email" name="Emails" value="">
<label for="selectRoles">Roles <small>- Select at least one role for invited user(s).</small></label>
<select class="form-control {{ ValidationFieldClass $.validationErrors "Roles" }}"
id="selectRoles" name="Roles" multiple="multiple">
{{ range $t := .roles }}
<option value="{{ $t.Value }}" {{ if $t.Selected }}selected="selected"{{ end }}>{{ $t.Title }}</option>
{{ end }}
</select>
{{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Roles" }}
</div>
<div id="email-form-groups">
<div class="form-group">
<label for="inputEmail">Email for Invite 1</label>
<input type="text" class="form-control invite-user-email" placeholder="enter email" name="Emails" value="">
</div>
</div>
<p class="mt-2 mb-0"><a href="javascript:void(0)" class="btn btn-outline-primary btn-sm" id="inviteUser1"><i class="fas fa-user-plus mr-1"></i>Add another invitation</a></p>
</div>
</div>
</div>
......@@ -32,9 +60,8 @@
</div>
</div>
<div class="spacer-30"></div>
<div class="row">
<div class="row mt-4">
<div class="col">
<input id="btnSubmit" type="submit" value="Invite Users" class="btn btn-primary"/>
</div>
......@@ -46,7 +73,7 @@
<script>
function addAnotherEmail(el) {
if ($(el).val() == '') {
return;
//return;
}
cnt = 0;
......@@ -61,24 +88,21 @@
newHtml = newHtml + '<label for="inputEmail">Email for Invite '+cnt+'</label>';
newHtml = newHtml + '<input type="text" class="form-control invite-user-email" placeholder="enter email" name="Emails" value="">';
newHtml = newHtml + '</div>';
$(el).closest('div.card-body').append(newHtml);
$(el).unbind( "blur" );
$('#email-form-groups').append(newHtml);
$('#'+newId).on("blur", function() {
addAnotherEmail($(this));
});
}
$(document).ready(function(){
$("#inviteUser1").on("blur", function() {
$("#inviteUser1").click( function() {
addAnotherEmail($(this));
});
$("#inputRole").on("change", function() {
if ($(this).val() == 'admin') {
$('#userProcedures').hide();
//$('#userProjects').hide();
} else {
$('#userProcedures').show();
//$('#userProjects').show();
}
}).change();
});
......
......@@ -4,6 +4,14 @@
{{end}}
{{define "content"}}
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/users">Users</a></li>
<li class="breadcrumb-item"><a href="{{ .urlUsersView }}">{{ .user.Name }}</a></li>
<li class="breadcrumb-item active" aria-current="page">Update</li>
</ol>
</nav>
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Update User</h1>
</div>
......@@ -39,6 +47,16 @@
placeholder="enter email" name="Email" value="{{ .form.Email }}" required>
{{template "invalid-feedback" dict "fieldName" "UserUpdateRequest.Email" "validationDefaults" $.userValidationDefaults "validationErrors" $.validationErrors }}
</div>
<div class="form-group">
<label for="inputTimezone">Timezone</label>
<select class="form-control {{ ValidationFieldClass $.validationErrors "UserUpdateRequest.Timezone" }}" name="Timezone">
<option value="">Not set</option>
{{ range $idx, $t := .timezones }}
<option value="{{ $t }}" {{ if CmpString $t $.form.Timezone }}selected="selected"{{ end }}>{{ $t }}</option>
{{ end }}
</select>
{{template "invalid-feedback" dict "fieldName" "UserUpdateRequest.Timezone" "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors }}
</div>
<div class="form-group">
<label for="inputRoles">Roles</label>
<span class="help-block "><small>- Select at least one role.</small></span>
......@@ -55,16 +73,6 @@
{{ end }}
{{template "invalid-feedback" dict "fieldName" "Roles" "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors }}
</div>
<div class="form-group">
<label for="inputTimezone">Timezone</label>
<select class="form-control {{ ValidationFieldClass $.validationErrors "UserUpdateRequest.Timezone" }}" name="Timezone">
<option value="">Not set</option>
{{ range $idx, $t := .timezones }}
<option value="{{ $t }}" {{ if CmpString $t $.form.Timezone }}selected="selected"{{ end }}>{{ $t }}</option>
{{ end }}
</select>
{{template "invalid-feedback" dict "fieldName" "UserUpdateRequest.Timezone" "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors }}
</div>
</div>
</div>
<div class="row">
......
......@@ -3,6 +3,15 @@
{{end}}
{{define "content"}}
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/users">Users</a></li>
<li class="breadcrumb-item"><a href="{{ .urlUsersView }}">{{ .user.Name }}</a></li>
<li class="breadcrumb-item active" aria-current="page">View</li>
</ol>
</nav>
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">{{ .user.Name }}</h1>
{{ if HasRole $._Ctx "admin" }}
......@@ -64,7 +73,7 @@
</div>
<div class="col-md-5">
<p>
<small>Role</small><br/>
<small>Roles</small><br/>
{{ if .userAccount }}
<b>
{{ range $r := .userAccount.Roles }}{{ if $r.Selected }}
......
......@@ -38,11 +38,12 @@
</a>
<div id="navSectionProjects" class="collapse" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item" href="/projects">Projects</a>
<a class="collapse-item" href="/projects">Manage Projects</a>
</div>
</div>
</li>
{{ if HasRole $._Ctx "admin" }}
<!-- Nav Item - Utilities Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#navSectionUsers" aria-expanded="true" aria-controls="navSectionUsers">
......@@ -51,10 +52,13 @@
</a>
<div id="navSectionUsers" class="collapse" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item" href="/users">Users</a>
<a class="collapse-item" href="/users">Manage Users</a>
<a class="collapse-item" href="/users/invite">Invite Users</a>
</div>
</div>
</li>
{{end}}
{{ end }}
<!-- Divider -->
......
......@@ -181,10 +181,6 @@
<i class="fas fa-users fa-sm fa-fw mr-2 text-gray-400"></i>
Manage Users
</a>
<a class="dropdown-item" href="/users/invite">
<i class="fas fa-user-plus fa-sm fa-fw mr-2 text-gray-400"></i>
Invite Users
</a>
{{ else }}
<a class="dropdown-item" href="/user/account">
<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment