From b34104b4cdb883dac2a0e5a7cc1ac1c003ebdd21 Mon Sep 17 00:00:00 2001
From: Westly Wright <westly.wright@gmail.com>
Date: Tue, 7 Mar 2017 14:02:58 -0700
Subject: [PATCH] Add new tables to storage and project edit

---
 app/components/project-row/component.js       |   2 +-
 .../project-template-row/component.js         |   2 +-
 .../storagepool-section/component.js          |  21 ++++
 .../storagepool-section/template.hbs          | 112 ++++++++----------
 app/components/view-edit-project/component.js |  34 ++++--
 app/components/view-edit-project/template.hbs |  85 +++++++------
 6 files changed, 135 insertions(+), 121 deletions(-)

diff --git a/app/components/project-row/component.js b/app/components/project-row/component.js
index 3b3420c6a..3f75e3e2c 100644
--- a/app/components/project-row/component.js
+++ b/app/components/project-row/component.js
@@ -2,7 +2,7 @@ import Ember from 'ember';
 
 export default Ember.Component.extend({
   model: null,
-  tagName: 'TR',
+  tagName: '',
 
   projects: Ember.inject.service(),
 
diff --git a/app/components/project-template-row/component.js b/app/components/project-template-row/component.js
index 332ef8ac1..ee4e9b33e 100644
--- a/app/components/project-template-row/component.js
+++ b/app/components/project-template-row/component.js
@@ -2,5 +2,5 @@ import Ember from 'ember';
 
 export default Ember.Component.extend({
   model: null,
-  tagName: 'TR',
+  tagName: '',
 });
diff --git a/app/components/storagepool-section/component.js b/app/components/storagepool-section/component.js
index e09e33cff..e9322ec24 100644
--- a/app/components/storagepool-section/component.js
+++ b/app/components/storagepool-section/component.js
@@ -12,6 +12,27 @@ export default Ember.Component.extend(Sortable, {
     name:   ['displayName','id'],
     mounts: ['mounts.length','displayName','id'],
   },
+  headers:  [
+    {
+      name:           'state',
+      sort:           ['state','displayName','id'],
+      translationKey: 'generic.state',
+      width:          '115',
+    },
+    {
+      name:           'name',
+      sort:           ['displayName','id'],
+      translationKey: 'storagePoolSection.models.table.header.volumeName',
+      width:          '350',
+    },
+    {
+      translationKey: 'storagePoolSection.models.table.header.mounts',
+    },
+    {
+      isActions:      true,
+      width:          '75',
+    },
+  ],
 
 
   init: function() {
diff --git a/app/components/storagepool-section/template.hbs b/app/components/storagepool-section/template.hbs
index 93660bb0f..237d4c0b7 100644
--- a/app/components/storagepool-section/template.hbs
+++ b/app/components/storagepool-section/template.hbs
@@ -39,72 +39,54 @@
   {{#if model.volumes.length}}
     <div class="subsection gutter  col span-9 col-full-height">
       <h6>{{t 'storagePoolSection.volumes.header'}}</h6>
-      <table class="grid" style="margin-bottom: 0">
-        <thead>
-          <tr>
-            {{sortable-th sortable=this action="changeSort" name="state" width="115" label="generic.state"}}
-            {{sortable-th sortable=this action="changeSort" name="name" width="350" label="storagePoolSection.models.table.header.volumeName"}}
-            <th>{{t 'storagePoolSection.models.table.header.mounts'}}</th>
-            <th width="75">&nbsp;</th>
-          </tr>
-        </thead>
-        <tbody>
-          {{#each arranged as |vol|}}
-            <tr>
-              <td class="state">
-                {{badge-state model=vol}}
-              </td>
-              <td class="force-wrap">
-                {{#tooltip-element type="tooltip-basic" model=vol tooltipTemplate="tooltip-storage" tooltipFor="storagePoolSection"}}
-                  <p class="hand force-wrap clip m-0">{{vol.displayName}}</p> <i classs="icon icon-info"></i>
-                {{/tooltip-element}}
-              </td>
-              <td class="force-wrap">
-                {{#if vol.mounts.length}}
-                  {{#each vol.mounts as |mount|}}
-                    <div>
-                      {{~#if mount.instance.isVm~}}
-                        {{#link-to "virtualmachine" mount.instanceId}}{{mount.instance.displayName}}{{/link-to}}
-                      {{~else~}}
-                        {{#link-to "container" mount.instanceId}}{{mount.instance.displayName}}{{/link-to}}
-                      {{~/if~}}
-                      : {{mount.path}}
-                      {{#if (eq mount.permissions "ro")}}
-                        <span class="text-muted">{{t 'storagePoolSection.readOnly'}}</span>
-                      {{/if}}
-                    </div>
-                  {{/each}}
-                {{else}}
-                  <span class="text-muted">{{t 'generic.none'}}</span>
-                {{/if}}
-              </td>
-              <td class="actions wide">
-                {{action-menu model=vol}}
-              </td>
-            </tr>
-            {{#if vol.snapshots.length}}
-              <tr class="nohover">
-                <td colspan="4" class="subtable pl-10">
-                  <table class="grid fixed no-lines">
-                    <thead>
-                      <tr>
-                        <th width="125">{{t 'storagePoolSection.models.table.header.snapshotState'}}</th>
-                        <th>{{t 'storagePoolSection.models.table.header.snapshotName'}}</th>
-                        <th width="70">&nbsp;</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {{#each vol.snapshots as |snapshot|}}
-                        {{snapshot-section volume=vol snapshot=snapshot}}
-                      {{/each}}
-                    </tbody>
-                  </table>
-                </td>
-              </tr>
+      {{#sortable-table
+          classNames="grid mb-0 sortable-table"
+          bulkActions=false
+          paging=false
+          search=false
+          sortBy=sortBy
+          descending=descending
+          headers=headers
+          body=model
+          as |sortable kind vol|
+      }}
+        {{#if (eq kind "row")}}
+          <td class="state">
+            {{badge-state model=vol}}
+          </td>
+          <td class="force-wrap">
+            {{#tooltip-element type="tooltip-basic" model=vol tooltipTemplate="tooltip-storage" tooltipFor="storagePoolSection"}}
+              <p class="hand force-wrap clip m-0">{{vol.displayName}}</p> <i classs="icon icon-info"></i>
+            {{/tooltip-element}}
+          </td>
+          <td class="force-wrap">
+            {{#if vol.mounts.length}}
+              {{#each vol.mounts as |mount|}}
+                <div>
+                  {{~#if mount.instance.isVm~}}
+                    {{#link-to "virtualmachine" mount.instanceId}}{{mount.instance.displayName}}{{/link-to}}
+                  {{~else~}}
+                    {{#link-to "container" mount.instanceId}}{{mount.instance.displayName}}{{/link-to}}
+                  {{~/if~}}
+                  : {{mount.path}}
+                  {{#if (eq mount.permissions "ro")}}
+                    <span class="text-muted">{{t 'storagePoolSection.readOnly'}}</span>
+                  {{/if}}
+                </div>
+              {{/each}}
+            {{else}}
+              <span class="text-muted">{{t 'generic.none'}}</span>
             {{/if}}
-          {{/each}}
-        </tbody>
-      </table>
+          </td>
+          <td class="actions wide">
+            {{action-menu model=vol}}
+          </td>
+        {{else if (eq kind "norows")}}
+          <tr>
+            <td colspan="{{headers.length}}" class="text-center text-muted">{{t 'storagePoolSection.volumes.none'}}</td>
+          </tr>
+        {{/if}}
+      {{/sortable-table}}
     </div>
   {{else}}
     <div class="text-muted text-center pl-10">{{t 'storagePoolSection.volumes.none'}}</div>
diff --git a/app/components/view-edit-project/component.js b/app/components/view-edit-project/component.js
index d57c225c2..c36bfdd86 100644
--- a/app/components/view-edit-project/component.js
+++ b/app/components/view-edit-project/component.js
@@ -1,10 +1,9 @@
 import Ember from 'ember';
-import Sortable from 'ui/mixins/sortable';
 import C from 'ui/utils/constants';
 import NewOrEdit from 'ui/mixins/new-or-edit';
 import { sortInsensitiveBy } from 'ui/utils/sort';
 
-export default Ember.Component.extend(NewOrEdit, Sortable, {
+export default Ember.Component.extend(NewOrEdit, {
   projects: Ember.inject.service(),
   access: Ember.inject.service(),
   growl: Ember.inject.service(),
@@ -18,15 +17,30 @@ export default Ember.Component.extend(NewOrEdit, Sortable, {
   editing: false,
   tab: 'access',
 
-  primaryResource: Ember.computed.alias('project'),
-  sortableContent: Ember.computed.alias('project.projectMembers'),
   sortBy: 'name',
-  sorts: {
-    name:   ['name', 'externalId'],
-    type:   ['externalIdType','externalId'],
-    role:   ['role','externalId'],
-  },
-
+  headers:  [
+    {
+      name:           'name',
+      sort:           ['name', 'externalId'],
+      translationKey: 'generic.name',
+    },
+    {
+      name:           'type',
+      sort:           ['externalIdType','externalId'],
+      translationKey: 'generic.type',
+    },
+    {
+      name:           'role',
+      sort:           ['role','externalId'],
+      translationKey: 'generic.role',
+      width:          '',
+    },
+    {
+      sort:           [],
+      translationKey: '',
+      width:          '40',
+    },
+  ],
   stacks: null,
 
   actions: {
diff --git a/app/components/view-edit-project/template.hbs b/app/components/view-edit-project/template.hbs
index c08669234..d7137a426 100644
--- a/app/components/view-edit-project/template.hbs
+++ b/app/components/view-edit-project/template.hbs
@@ -64,59 +64,56 @@
   <hr/>
   <div class="well">
     {{#if (and accessEnabled showEdit)}}
-      <div class="inline-form">
+      <div class="inline-form mb-20">
         {{input-identity action="checkMember" onError="error"}}
       </div>
     {{/if}}
 
     {{#if accessEnabled}}
-      <table class="grid fixed" style="margin-bottom: 0;">
-        <thead>
-          <tr>
-            {{sortable-th sortable=this action="changeSort" name="name" label="generic.name"}}
-            {{sortable-th sortable=this action="changeSort" name="type" label="generic.type"}}
-            {{sortable-th sortable=this action="changeSort" name="role" label="generic.role"}}
-            {{#if showEdit}}<th width="40">&nbsp;</th>{{/if}}
-          </tr>
-        </thead>
-        <tbody>
-          {{#each arranged as |member|}}
-            <tr>
+      {{#sortable-table
+          classNames="grid fixed mb-0 sortable-table"
+          bulkActions=false
+          paging=false
+          search=false
+          sortBy=sortBy
+          headers=headers
+          body=project.projectMembers
+          as |sortable kind member|
+      }}
+        {{#if (eq kind "row")}}
+            <td>
+              {{identity-block identity=member}}
+            </td>
+            <td>{{member.displayType}}</td>
+            <td>
+              {{#if showEdit}}
+                <select class="form-control input-sm" onchange={{action (mut member.role) value="target.value"}}>
+                  {{#each roleOptions as |choice|}}
+                    <option value={{choice.value}} selected={{eq member.role choice.value}}>{{t choice.label}}</option>
+                  {{/each}}
+                </select>
+              {{else}}
+                {{uc-first member.role}}
+              {{/if}}
+            </td>
+            {{#if showEdit}}
               <td>
-                {{identity-block identity=member}}
-              </td>
-              <td>{{member.displayType}}</td>
-              <td>
-                {{#if showEdit}}
-                  <select class="form-control input-sm" onchange={{action (mut member.role) value="target.value"}}>
-                    {{#each roleOptions as |choice|}}
-                      <option value={{choice.value}} selected={{eq member.role choice.value}}>{{t choice.label}}</option>
-                    {{/each}}
-                  </select>
+                {{#if accessEnabled}}
+                  <button class="btn bg-primary btn-sm pull-right gh-action" {{action "removeMember" member}}><i class="icon icon-minus"/></button>
                 {{else}}
-                  {{uc-first member.role}}
+                  &nbsp;
                 {{/if}}
               </td>
-              {{#if showEdit}}
-                <td>
-                  {{#if accessEnabled}}
-                    <button class="btn bg-primary btn-sm pull-right gh-action" {{action "removeMember" member}}><i class="icon icon-minus"/></button>
-                  {{else}}
-                    &nbsp;
-                  {{/if}}
-                </td>
-              {{/if}}
-            </tr>
-          {{else}}
-            <tr>
-              <td colspan="3" class="text-center text-muted">
-                {{t 'viewEditProject.showEdit.noMembers'}}
-              </td>
-            </tr>
-          {{/each}}
-        </tbody>
-      </table>
-      <hr class="m-0" />
+            {{/if}}
+        {{else if (eq kind "norows")}}
+          <tr>
+            <td colspan="{{headers.length}}" class="text-center text-muted">
+              {{t 'viewEditProject.showEdit.noMembers'}}
+            </td>
+          </tr>
+        {{/if}}
+      {{/sortable-table}}
+      <hr />
     {{else}}
       <p class="text-info text-center">
         {{format-html-message 'viewEditProject.helpBlock'}}