ayanova/src/components/data-table.vue

@@ -38,24 +38,22 @@
 
         <v-spacer></v-spacer>
         <div class="my-5 my-sm-1">
-          <v-btn @click="refresh">
+          <v-btn text @click="refresh">
             <v-icon data-cy="refresh">$ayiSync</v-icon>
           </v-btn>
 
           <v-btn
+            text
             v-if="$vuetify.breakpoint.xs"
             class="ml-12"
             @click="mobileColumnFilterSelect"
           >
             <v-icon data-cy="refresh">$ayiFilter</v-icon>
           </v-btn>
-          <v-btn
-            :outlined="hiddenAffectiveColumns.length > 0"
-            class="ml-12"
-            @click="editColumnView"
-          >
+          <v-btn text class="ml-12" @click="editColumnView">
             <v-icon
-              :color="hiddenAffectiveColumns.length ? 'accent' : 'primary'"
+              :large="hiddenAffectiveColumns.length > 0"
+              :color="hiddenAffectiveColumns.length ? 'accent' : null"
               data-cy="filter"
               >$ayiColumns</v-icon
             >

ayanova/src/views/ay-data-list-column-view.vue

@@ -4,12 +4,25 @@
       <v-form data-cy="dlcForm" ref="form">
         <v-row>
           <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
-          {{ hiddenAffectiveColumns }}
+
           <template v-for="(item, index) in editView">
             <v-col :key="item.key" cols="12" sm="6" lg="4" xl="3" px-2>
-              <v-card :data-cy="'columncard:' + item.key">
+              <v-card
+                :elevation="item.affective ? 10 : 1"
+                :data-cy="'columncard:' + item.key"
+              >
                 <v-card-title>
-                  {{ item.title }}
+                  <span
+                    :class="{
+                      'accent--text text-h5': item.affective
+                    }"
+                  >
+                    {{ item.title }}
+                  </span>
+                  <div v-if="item.affective">
+                    <v-icon color="accent">$ayiFilter</v-icon>
+                    <v-icon color="accent">$ayiSort</v-icon>
+                  </div>
                 </v-card-title>
 
                 <v-card-text>
@@ -25,6 +38,7 @@
                   <div v-if="item.rid" class="v-label mb-8 mt-6">
                     {{ $ay.t("Include") }}
                   </div>
+
                   <!-- RE-ORDER CONTROL -->
                   <div class="d-flex justify-space-between" v-if="item.include">
                     <v-btn large icon @click="move('start', index)"
@@ -78,7 +92,11 @@ export default {
     let vm = this;
     try {
       vm.dataListKey = this.$route.params.dataListKey;
-      vm.hiddenAffectiveColumns = this.$route.params.hiddenAffectiveColumns;
+
+      if (this.$route.params.hiddenAffectiveColumns) {
+        vm.hiddenAffectiveColumns = this.$route.params.hiddenAffectiveColumns;
+      }
+
       await initForm(vm);
       vm.formState.ready = true;
       window.$gz.eventBus.$on("menu-click", clickHandler);
@@ -449,6 +467,10 @@ function initWorkingView(vm) {
         o.include = true;
       }
 
+      if (vm.hiddenAffectiveColumns.includes(fld.fieldKey)) {
+        o.affective = true;
+      }
+
       ret.push(o);
     }
   }