Transfer table clone feature

Registered by Thai Tran

Summary:
Adding a clone feature to transfer table.

Motivation:
Currently, it is a pain to create a transfer table. A user must create 2 separate templates: one for allocated and one for available. Both templates are nearly identical with subtle differences. It would be great if we can write one template and clone it. This would remove a lot of boilerplate templates.

Description:

Here is roughly how the clone template should look like. Note that we have flags: $displayedItems, $sourceItems, $available, and $allocated. These are variables that depends on whether it is the allocated table or available table. They are similar to how $index work in the ng-repeat directive.

<transfer-table tr-available="data" clone-content>
 <table hz-table st-table="$displayedItems" st-safe-src="$sourceItems">
  <thead>
   <tr>
    <th>Name</th>
    <th>Actions</th>
   </tr>
  </thead>
  <tbody>
   <tr ng-repeat="item in $displayedItems">
    <td>{{ item.name }}</td>
    <td>
     <action-list>
      <action ng-if="$available" callback="trCtrl.allocate">+</action>
      <action ng-if="$allocated" callback="trCtrl.deallocate">-</action>
     </action-list>
    </td>
   </tr>
  </tbody>
 </table>
</transfer-table>

Here is the old HTML for comparison:

<transfer-table tr-model="data">
 <allocated>
  <table hz-table st-table="displayedAllocated" st-safe-src="sourceAllocated">
   <thead>
    <tr>
     <th>Name</th>
     <th>Actions</th>
    </tr>
   </thead>
   <tbody>
    <tr ng-repeat="item in displayedAllocated">
     <td>{{ item.name }}</td>
     <td>
      <action-list>
       <action callback="trCtrl.deallocate">-</action>
      </action-list>
     </td>
    </tr>
   </tbody>
  </table>
 <allocated>
 </available>
  <table hz-table st-table="displayedAvailable" st-safe-src="sourceAvailable">
   <thead>
    <tr>
     <th>Name</th>
     <th>Actions</th>
    </tr>
   </thead>
   <tbody>
    <tr ng-repeat="item in displayedAvailable">
     <td>{{ item.name }}</td>
     <td>
      <action-list>
       <action callback="trCtrl.allocate">+</action>
      </action-list>
     </td>
    </tr>
   </tbody>
  </table>
 </available>
</transfer-table>

UX:
N/A

Outside Dependencies:
N/A

Requirements Update Required:
N/A

Doc Impact:
Need to update comments in code.

Blueprint information

Status:
Complete
Approver:
None
Priority:
Medium
Drafter:
Thai Tran
Direction:
Needs approval
Assignee:
Thai Tran
Definition:
New
Series goal:
Accepted for liberty
Implementation:
Implemented
Milestone target:
milestone icon 8.0.0
Started by
Thai Tran
Completed by
David Lyle

Related branches

Sprints

Whiteboard

Gerrit topic: https://review.openstack.org/#q,topic:bp/transfer-table-clone-feature,n,z

Addressed by: https://review.openstack.org/208867
    Added clone feature for transfer table

Gerrit topic: https://review.openstack.org/#q,topic:bp/below,n,z

Addressed by: https://review.openstack.org/211345
    Adding clone feature to Transfer Table

Addressed by: https://review.openstack.org/213846
    Inconsistent karma conf for xstatic files

Gerrit topic: https://review.openstack.org/#q,topic:identity/users/create,n,z

(?)

Work Items

This blueprint contains Public information 
Everyone can see this information.

Subscribers

No subscribers.