Resource card framework: add status and selecion info (#660)

Re #630

src/app/frontend/common/components/resourcecard/resourcecard.html

@@ -16,7 +16,11 @@ limitations under the License.
 
 <div class="kd-resource-card" layout="column">
   <div layout="row" class="kd-resource-card-columns-container" flex="grow">
-    <ng-transclude ng-transclude-slot="status" class="kd-resource-card-status" flex="none">
+    <div ng-if="$ctrl.isSelectable()" flex="none" class="kd-resource-card-select">
+      <md-checkbox></md-checkbox>
+    </div>
+    <ng-transclude ng-if="$ctrl.hasStatus()" ng-transclude-slot="status"
+        class="kd-resource-card-status" flex="none">
     </ng-transclude>
     <ng-transclude ng-transclude-slot="columns" class="kd-resource-card-columns-slot" flex="shrink">
     </ng-transclude>

src/app/frontend/common/components/resourcecard/resourcecard.scss

@@ -17,10 +17,20 @@
 $cell-base-size: 6 * $baseline-grid;
 
 .kd-resource-card-status {
-  align-items: center;
   display: flex;
-  margin-left: $baseline-grid;
-  width: $cell-base-size;
+  justify-content: center;
+  width: 4 * $baseline-grid;
+}
+
+.kd-resource-card-select {
+  display: flex;
+  justify-content: center;
+  padding-left: $baseline-grid;
+  width: 5 * $baseline-grid;
+
+  md-checkbox {
+    margin-bottom: 0;
+  }
 }
 
 .kd-resource-card {
@@ -37,8 +47,3 @@ $cell-base-size: 6 * $baseline-grid;
 .kd-resource-card-columns-slot {
   display: flex;
 }
-
-.kd-resource-card-footer-slot {
-  display: flex;
-  margin-left: $cell-base-size + 3 * $baseline-grid;
-}

src/app/frontend/common/components/resourcecard/resourcecard_component.js

@@ -26,7 +26,25 @@ export class ResourceCardController {
      * @export {!backendApi.ResourceMetadata}
      */
     this.resourceMetadata;
+
+    /**
+     * Initialized from require just before $onInit is called.
+     * @export {!./resourcecardlist_component.ResourceCardListController}
+     */
+    this.resourceCardListCtrl;
   }
+
+  /**
+   * @return {boolean}
+   * @export
+   */
+  isSelectable() { return !!this.resourceCardListCtrl.selectable; }
+
+  /**
+   * @return {boolean}
+   * @export
+   */
+  hasStatus() { return !!this.resourceCardListCtrl.withStatuses; }
 }
 
 /**
@@ -46,4 +64,7 @@ export const resourceCardComponent = {
     'columns': '?kdResourceCardColumns',
     'footer': '?kdResourceCardFooter',
   }),
+  require: {
+    'resourceCardListCtrl': '^kdResourceCardList',
+  },
 };

src/app/frontend/common/components/resourcecard/resourcecardcolumn.scss

@@ -18,7 +18,6 @@ kd-resource-card-column {
   display: flex;
   flex-basis: auto;
   min-width: $baseline-grid * 10;
-  overflow: hidden;
   padding-left: 2 * $baseline-grid;
 
   // Add this class to kd-resource-card-column to make it layout its children in a row.
@@ -29,6 +28,21 @@ kd-resource-card-column {
       flex-direction: row;
     }
   }
+
+  // Add this class kd-resource-card-column to make it a compact column with icons.
+  &.kd-icon-column {
+    .md-button {
+      margin: 0;
+    }
+  }
+
+  &:not(:last-child) {
+    overflow: hidden;
+  }
+
+  &:first-child {
+    padding-left: $baseline-grid;
+  }
 }
 
 .kd-resource-card-column-container {

src/app/frontend/common/components/resourcecard/resourcecardfooter.scss

@@ -15,5 +15,24 @@
 @import '../../../variables';
 
 .kd-resource-card-footer {
-  display: block;
+  display: flex;
+  padding-left: $baseline-grid;
+}
+
+.kd-resource-card-list-selectable {
+  .kd-resource-card-footer {
+    padding-left: 6 * $baseline-grid;
+  }
+
+  &.kd-resource-card-list-with-statuses {
+    .kd-resource-card-footer {
+      padding-left: 10 * $baseline-grid;
+    }
+  }
+}
+
+.kd-resource-card-list-with-statuses {
+  .kd-resource-card-footer {
+    padding-left: 5 * $baseline-grid;
+  }
 }

src/app/frontend/common/components/resourcecard/resourcecardheadercolumn.scss

@@ -21,6 +21,10 @@ kd-resource-card-header-column {
   min-width: $baseline-grid * 10;
   overflow: hidden;
   padding-left: 2 * $baseline-grid;
+
+  &:first-child {
+    padding-left: $baseline-grid;
+  }
 }
 
 .kd-resource-card-header-column-container {

src/app/frontend/common/components/resourcecard/resourcecardheadercolumns.scss

@@ -24,5 +24,22 @@ kd-resource-card-header-columns {
   color: $foreground-2;
   min-height: 4 * $baseline-grid;
   padding: $baseline-grid;
-  padding-left: 8 * $baseline-grid;
+}
+
+.kd-resource-card-list-selectable {
+  .kd-resource-card-header-columns {
+    padding-left: 6 * $baseline-grid;
+  }
+
+  &.kd-resource-card-list-with-statuses {
+    .kd-resource-card-header-columns {
+      padding-left: 10 * $baseline-grid;
+    }
+  }
+}
+
+.kd-resource-card-list-with-statuses {
+  .kd-resource-card-header-columns {
+    padding-left: 5 * $baseline-grid;
+  }
 }

src/app/frontend/common/components/resourcecard/resourcecardlist.html

@@ -14,4 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<div class="kd-resource-card-list" ng-transclude></div>
+<div class="kd-resource-card-list"
+    ng-class="{'kd-resource-card-list-selectable': $ctrl.selectable, 'kd-resource-card-list-with-statuses': $ctrl.withStatuses}"
+    ng-transclude>
+</div>

src/app/frontend/common/components/resourcecard/resourcecardlist_component.js

@@ -20,6 +20,20 @@ export class ResourceCardListController {
    * @ngInject
    */
   constructor() {
+    /**
+     * Whether to make list items selectable.
+     * Initialized from a bingind.
+     * @export {boolean|undefined}
+     */
+    this.selectable;
+
+    /**
+     * Whether to make show statuses for list items.
+     * Initialized from a bingind.
+     * @export {boolean|undefined}
+     */
+    this.withStatuses;
+
     /**
      * @private {!./resourcecardheadercolumns_component.ResourceCardHeaderColumnsController}
      */
@@ -50,7 +64,7 @@ export class ResourceCardListController {
  * of header and body columns must be exactly the same.
  *
  * Sample usage:
- *   <kd-resource-card-list>
+ *   <kd-resource-card-list selectable="true" with-statuses="true">
  *     <kd-resource-card-header-columns>
  *       <kd-resource-card-header-column size="medium" grow="2">
  *         Name
@@ -86,4 +100,11 @@ export const resourceCardListComponent = {
   templateUrl: 'common/components/resourcecard/resourcecardlist.html',
   transclude: true,
   controller: ResourceCardListController,
+  bindings: {
+    /** {boolean|undefined} whether to make list items selectable */
+    'selectable': '<',
+    /** {boolean|undefined} whether to show statuses for list items */
+    'withStatuses': '<',
+  },
+  bindToController: true,
 };

src/test/frontend/common/components/resourcecard/resourcecardlist_component_test.js

@@ -31,7 +31,7 @@ describe('Resource card list', () => {
 
   it('should fill the card layout', () => {
     let compileFn = compile(`
-      <kd-resource-card-list>
+      <kd-resource-card-list selectable="selectable" with-statuses="withStatuses">
         <kd-resource-card-header-columns>
           <kd-resource-card-header-column size="small" grow="nogrow">
             NAME_COLUMN
@@ -88,7 +88,17 @@ describe('Resource card list', () => {
     expect(elem.html()).toContain('FIRST_COLUMN2');
     expect(elem.html()).toContain('SECOND_COLUMN2');
     expect(elem.html()).toContain('THIRD_COLUMN2');
-    expect(elem.html()).toContain('STATUS');
+    expect(elem.html()).not.toContain('STATUS');
     expect(elem.html()).toContain('FOOTER');
+    expect(elem.html()).not.toContain('md-checkbox');
+
+    scope.withStatuses = true;
+    scope.$digest();
+    expect(elem.html()).toContain('STATUS');
+    expect(elem.html()).not.toContain('md-checkbox');
+
+    scope.selectable = true;
+    scope.$digest();
+    expect(elem.html()).toContain('md-checkbox');
   });
 });