Update formatting for user pages in web app.

2025-08-08 22:36:41 +02:00 · 2019-08-05 18:47:07 -08:00
parent 7909dc4ca4
commit b63e4eb7bd
12 changed files with 114 additions and 45 deletions
--- a/cmd/web-app/handlers/projects.go
+++ b/cmd/web-app/handlers/projects.go
@ -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
--- a/cmd/web-app/handlers/users.go
+++ b/cmd/web-app/handlers/users.go
@ -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)
 }

--- a/cmd/web-app/templates/content/account-update.gohtml
+++ b/cmd/web-app/templates/content/account-update.gohtml
@ -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>
--- a/cmd/web-app/templates/content/account-view.gohtml
+++ b/cmd/web-app/templates/content/account-view.gohtml
@ -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 -->
--- a/cmd/web-app/templates/content/user-view.gohtml
+++ b/cmd/web-app/templates/content/user-view.gohtml
@ -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 }}
--- a/cmd/web-app/templates/content/users-create.gohtml
+++ b/cmd/web-app/templates/content/users-create.gohtml
@ -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"
--- a/cmd/web-app/templates/content/users-index.gohtml
+++ b/cmd/web-app/templates/content/users-index.gohtml
@ -1,10 +1,20 @@
 {{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>

--- a/cmd/web-app/templates/content/users-invite.gohtml
+++ b/cmd/web-app/templates/content/users-invite.gohtml
@ -1,16 +1,44 @@
 {{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="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();
        });
--- a/cmd/web-app/templates/content/users-update.gohtml
+++ b/cmd/web-app/templates/content/users-update.gohtml
@ -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">
--- a/cmd/web-app/templates/content/users-view.gohtml
+++ b/cmd/web-app/templates/content/users-view.gohtml
@ -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 }}
--- a/cmd/web-app/templates/partials/app-sidebar.tmpl
+++ b/cmd/web-app/templates/partials/app-sidebar.tmpl
@ -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 -->
--- a/cmd/web-app/templates/partials/app-topbar.tmpl
+++ b/cmd/web-app/templates/partials/app-topbar.tmpl
@ -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>