fix: streamline admin UI with common save actions

client/components/admin/admin-users.vue

@@ -1,66 +1,67 @@
 <template lang='pug'>
-  v-card(flat)
-    v-card(flat, tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"').pa-3.pt-4
-      .admin-header-icon: v-icon(size='80', color='grey lighten-2') perm_identity
-      .headline.blue--text.text--darken-2 Users
-      .subheading.grey--text Manage users
-    v-card
-      v-card-title
-        v-btn(color='primary', dark)
-          v-icon(left) add
-          | New User
-        v-btn(color='primary', dark)
-          v-icon(left) lock_outline
-          | Authorize User
-        v-btn(icon)
-          v-icon.grey--text refresh
-        v-spacer
-        v-text-field(append-icon='search', label='Search', single-line, hide-details, v-model='search')
-      v-data-table(
-        v-model='selected'
-        :items='items',
-        :headers='headers',
-        :search='search',
-        :pagination.sync='pagination',
-        :rows-per-page-items='[15]'
-        select-all,
-        hide-actions,
-        disable-initial-sort
-      )
-        template(slot='headers', slot-scope='props')
-          tr
-            th(width='50')
-            th.text-xs-right(
-              width='80'
-              :class='[`column sortable`, pagination.descending ? `desc` : `asc`, pagination.sortBy === `id` ? `active` : ``]'
-              @click='changeSort(`id`)'
-            )
-              v-icon(small) arrow_upward
-              | ID
-            th.text-xs-left(
-              v-for='header in props.headers'
-              :key='header.text'
-              :width='header.width'
-              :class='[`column sortable`, pagination.descending ? `desc` : `asc`, header.value === pagination.sortBy ? `active` : ``]'
-              @click='changeSort(header.value)'
-            )
-              | {{ header.text }}
-              v-icon(small) arrow_upward
-        template(slot='items', slot-scope='props')
-          tr(:active='props.selected')
-            td
-              v-checkbox(hide-details, :input-value='props.selected', color='blue darken-2', @click='props.selected = !props.selected')
-            td.text-xs-right {{ props.item.id }}
-            td {{ props.item.email }}
-            td {{ props.item.name }}
-            td {{ props.item.provider }}
-            td {{ props.item.createdOn }}
-            td {{ props.item.updatedOn }}
-            td: v-btn(icon): v-icon.grey--text.text--darken-1 more_horiz
-        template(slot='no-data')
-          v-alert(icon='warning', :value='true') No users to display!
-      .text-xs-center.py-2
-        v-pagination(v-model='pagination.page', :length='pages')
+  v-container(fluid, grid-list-lg)
+    v-layout(row, wrap)
+      v-flex(xs12)
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') perm_identity
+          .admin-header-title
+            .headline.blue--text.text--darken-2 Users
+            .subheading.grey--text Manage users
+          v-spacer
+          v-btn(outline, color='grey', large)
+            v-icon refresh
+          v-btn(color='primary', large, depressed)
+            v-icon(left) lock_outline
+            span Authorize User
+          v-btn(color='primary', large, depressed)
+            v-icon(left) add
+            span New User
+        v-card.mt-3
+          v-data-table(
+            v-model='selected'
+            :items='items',
+            :headers='headers',
+            :search='search',
+            :pagination.sync='pagination',
+            :rows-per-page-items='[15]'
+            select-all,
+            hide-actions,
+            disable-initial-sort
+          )
+            template(slot='headers', slot-scope='props')
+              tr
+                th(width='50')
+                th.text-xs-right(
+                  width='80'
+                  :class='[`column sortable`, pagination.descending ? `desc` : `asc`, pagination.sortBy === `id` ? `active` : ``]'
+                  @click='changeSort(`id`)'
+                )
+                  v-icon(small) arrow_upward
+                  | ID
+                th.text-xs-left(
+                  v-for='header in props.headers'
+                  :key='header.text'
+                  :width='header.width'
+                  :class='[`column sortable`, pagination.descending ? `desc` : `asc`, header.value === pagination.sortBy ? `active` : ``]'
+                  @click='changeSort(header.value)'
+                )
+                  | {{ header.text }}
+                  v-icon(small) arrow_upward
+            template(slot='items', slot-scope='props')
+              tr(:active='props.selected')
+                td
+                  v-checkbox(hide-details, :input-value='props.selected', color='blue darken-2', @click='props.selected = !props.selected')
+                td.text-xs-right {{ props.item.id }}
+                td {{ props.item.email }}
+                td {{ props.item.name }}
+                td {{ props.item.provider }}
+                td {{ props.item.createdOn }}
+                td {{ props.item.updatedOn }}
+                td: v-btn(icon): v-icon.grey--text.text--darken-1 more_horiz
+            template(slot='no-data')
+              v-alert(icon='warning', :value='true') No users to display!
+          .text-xs-center.py-2
+            v-pagination(v-model='pagination.page', :length='pages')
 </template>
 
 <script>