adds feature to show all potential member data fields in readonly mode, filters to contained member data fields by default.

wherehows-web/app/components/dataset-compliance.js

@@ -293,6 +293,12 @@ export default Component.extend({
       .every(({ value }) => [true, false].includes(value));
   }),
 
+  /**
+   * Determines if all member data fields should be shown in the member data table i.e. show only fields contained in
+   * this dataset or otherwise
+   */
+  isShowingAllMemberData: computed.or('showAllDatasetMemberData', 'isEditing'),
+
   /**
    * Determines if the save feature is allowed for the current dataset, otherwise e.g. interface should be disabled
    * @type {Ember.computed}
@@ -650,6 +656,13 @@ export default Component.extend({
       );
     },
 
+    /**
+     * Sets the flag to show all member potential member data fields that may be contained in this dataset
+     */
+    onShowAllDatasetMemberData() {
+      return set(this, 'showAllDatasetMemberData', true);
+    },
+
     /**
      * Handle the user intent to place this compliance component in edit mode
      */

wherehows-web/app/templates/components/dataset-compliance.hbs

@@ -101,20 +101,23 @@
     </header>
   </section>
 
-  <table class="nacho-table nacho-table--bordered nacho-table--stripped">
+  {{#dataset-table
-    <thead>
+    class="nacho-table nacho-table--bordered nacho-table--stripped"
-    <tr>
+    fields=datasetClassification as |table|}}
-      <th>Types of member data</th>
+
-      <th class="dataset-field-content__header">
+    {{#table.head as |head|}}
+      {{#head.column}}Types of member data{{/head.column}}
+
+      {{#head.column class="dataset-field-content__header"}}
         <span class="dataset-field-value">Is this type of member data contained in this dataset?</span>
-      </th>
+      {{/head.column}}
-    </tr>
+    {{/table.head}}
-    </thead>
+
-    <tbody>
+    {{#table.body as |body|}}
-    {{#each datasetClassification as |classification|}}
+      {{#each (if isShowingAllMemberData table.data (filter-by "value" true table.data)) as |classification|}}
-      <tr>
+        {{#body.row as |row|}}
-        <td class="dataset-field-content__prompt">
+          {{#row.cell class="dataset-field-content__prompt"}}
-          <span class="dataset-tag-container">
+            <span class="dataset-tag-container">
             {{#if (eq classification.value true)}}
 
               <i class="dataset-classification-indicator dataset-classification-indicator--tagged"
@@ -122,16 +125,16 @@
                 <svg viewBox="0 0 24 24" width="24px" height="24px" x="0" y="0" preserveAspectRatio="xMinYMin meet">
                   <g class="large-icon" style="fill: currentColor">
                     <path
-                        d="M19.68,4L9,17.7,4.36,12,3,13.06l5.42,6.67A0.72,0.72,0,0,0,9,20a0.7,0.7,0,0,0,.59-0.28L21,5.05Z"></path>
+                      d="M19.68,4L9,17.7,4.36,12,3,13.06l5.42,6.67A0.72,0.72,0,0,0,9,20a0.7,0.7,0,0,0,.59-0.28L21,5.05Z"></path>
                   </g>
                 </svg>
               </i>
 
             {{/if}}
 
-            {{#if (eq classification.value false)}}
+              {{#if (eq classification.value false)}}
-              <i class="dataset-classification-indicator dataset-classification-indicator--not-tagged"
+                <i class="dataset-classification-indicator dataset-classification-indicator--not-tagged"
-                 title="{{classification.label}} is not in dataset">
+                   title="{{classification.label}} is not in dataset">
                 <svg viewBox="0 0 24 24" width="24px" height="24px" x="0" y="0" preserveAspectRatio="xMinYMin meet">
                   <g class="large-icon" style="fill: currentColor">
                     <path
@@ -139,13 +142,14 @@
                   </g>
                 </svg>
               </i>
-            {{/if}}
+              {{/if}}
 
-            {{classification.label}}
+              {{classification.label}}
           </span>
-        </td>
+          {{/row.cell}}
-        <td class="dataset-field-content__input">
+
-          <span class="dataset-field-value">
+          {{#row.cell class="dataset-field-content__input"}}
+            <span class="dataset-field-value">
             {{#radio-button-composer
               value=true
               name=classification.classifier
@@ -153,19 +157,31 @@
               changed=(action "onChangeDatasetClassification")}}
               Yes
             {{/radio-button-composer}}
-            {{#radio-button-composer
+              {{#radio-button-composer
-              value=false
+                value=false
-              name=classification.classifier
+                name=classification.classifier
-              groupValue=(readonly classification.value)
+                groupValue=(readonly classification.value)
-              changed=(action "onChangeDatasetClassification")}}
+                changed=(action "onChangeDatasetClassification")}}
-              No
+                No
-            {{/radio-button-composer}}
+              {{/radio-button-composer}}
-          </span>
+          </span>{{/row.cell}}
+        {{/body.row}}
+      {{/each}}
+    {{/table.body}}
+
+    {{#unless isShowingAllMemberData}}
+      {{#table.foot}}
+        <td colspan="2" class="text-center">
+          <button
+            {{action "onShowAllDatasetMemberData"}}
+            class="nacho-button--large nacho-button--tertiary">
+            See More <span class="caret" aria-label="See More Dataset Member Data"></span>
+          </button>
         </td>
-      </tr>
+      {{/table.foot}}
-    {{/each}}
+    {{/unless}}
-    </tbody>
+
-  </table>
+  {{/dataset-table}}
 
   <section class="metadata-prompt">
     <header class="metadata-prompt__header">