From 39759851a817f040df7ed5abcb9e778c1506cb9e Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Fri, 21 Feb 2020 00:29:18 +0000
Subject: [PATCH]

---
 ayanova/src/views/ay-data-list-view.vue | 97 ++++++++++++-------------
 1 file changed, 47 insertions(+), 50 deletions(-)

diff --git a/ayanova/src/views/ay-data-list-view.vue b/ayanova/src/views/ay-data-list-view.vue
index 5287943a..b50a36e3 100644
--- a/ayanova/src/views/ay-data-list-view.vue
+++ b/ayanova/src/views/ay-data-list-view.vue
@@ -85,6 +85,7 @@
                   </v-card-title>
 
                   <v-card-text>
+                    <!-- INCLUDE CONTROL -->
                     <v-switch
                       v-model="item.include"
                       :label="lt('Include')"
@@ -94,7 +95,8 @@
                       "
                       @change="includeChanged(item)"
                     ></v-switch>
-                    <div class="d-flex justify-space-between pt-3">
+                    <!-- RE-ORDER CONTROL -->
+                    <div class="d-flex justify-space-between">
                       <v-btn large icon @click="move('start', index)"
                         ><v-icon large>fa-step-backward</v-icon></v-btn
                       >
@@ -108,10 +110,11 @@
                         ><v-icon large>fa-step-forward</v-icon></v-btn
                       >
                     </div>
+                    <!-- SORT CONTROL -->
                     <template v-if="item.isSortable">
                       <div @click="toggleSort(item)" class="pt-6">
-                        <v-btn large v-if="item.sort == null" icon>
-                          <v-icon large>fa-sort</v-icon></v-btn
+                        <v-btn x-large v-if="item.sort == null" icon>
+                          <v-icon x-large>fa-sort</v-icon></v-btn
                         >
                         <v-btn
                           v-if="item.sort != null && item.sort == '-'"
@@ -135,30 +138,9 @@
                       </div>
                     </template>
 
+                    <!-- FILTER CONTROL -->
                     <template v-if="item.isFilterable">
-                      <v-divider class="mx-4 my-5"></v-divider>
-                      <div>
-                        <v-icon
-                          v-if="item.filter.items.length > 0"
-                          color="primary"
-                          x-large
-                          >fa-filter</v-icon
-                        >
-                        <v-icon v-else>fa-filter</v-icon>
-                        <label class="v-label theme--light"
-                          >&nbsp;{{ lt("Filter") }}</label
-                        >
-                        <v-radio-group v-model="item.filter.any" row>
-                          <v-radio
-                            :label="lt('GridFilterDialogAndRadioText')"
-                            :value="false"
-                          ></v-radio>
-                          <v-radio
-                            :label="lt('GridFilterDialogOrRadioText')"
-                            :value="true"
-                          ></v-radio>
-                        </v-radio-group>
-                        <v-divider class="mx-4 my-5"></v-divider>
+                      <div class="pt-6">
                         <!-- ******** BUILDER FOR EACH TYPE Tag, decimal,currency, bool, integer, string, datetime ******** -->
                         <!-- DATETIME BUILDER   @change="dateTokenChanged(item)"-->
                         <div v-if="item.uiFieldDataType === 1">
@@ -168,6 +150,7 @@
                             item-text="name"
                             item-value="id"
                             :label="lt('Filter')"
+                            prepend-icon="fa-filter"
                           ></v-select>
                           <div v-if="item.tempFilterToken == '*select*'">
                             <v-select
@@ -227,31 +210,45 @@
                           ENUM BUILDER
                           {{ item.enumType }}
                         </div>
-                        <v-divider class="mx-4 my-5"></v-divider>
-                        <div>
-                          <v-list>
-                            <v-list-item
-                              v-for="(filterItem, index) in item.filter.items"
-                              :key="index"
-                            >
-                              <v-list-item-content>
-                                <v-list-item-title
-                                  v-text="
-                                    filterItem.op + ' ' + filterItem.value
-                                  "
-                                >
-                                </v-list-item-title>
-                              </v-list-item-content>
-                              <v-list-item-action>
-                                <v-btn icon>
-                                  <v-icon>fa-trash-alt</v-icon>
-                                </v-btn>
-                              </v-list-item-action>
-                            </v-list-item>
-                          </v-list>
-                          <v-divider></v-divider>
-                          {{ item }}
+                      </div>
+                      <!-- AND / OR FILTER CONDITIONS -->
+                      <template v-if="item.filter.items.length > 0">
+                        <div class="pt-6">
+                          <v-radio-group v-model="item.filter.any" row>
+                            <v-radio
+                              :label="lt('GridFilterDialogAndRadioText')"
+                              :value="false"
+                            ></v-radio>
+                            <v-radio
+                              :label="lt('GridFilterDialogOrRadioText')"
+                              :value="true"
+                            ></v-radio>
+                          </v-radio-group>
                         </div>
+                      </template>
+
+                      <!-- FILTER LIST -->
+                      <div>
+                        <v-list>
+                          <v-list-item
+                            v-for="(filterItem, index) in item.filter.items"
+                            :key="index"
+                          >
+                            <v-list-item-content>
+                              <v-list-item-title
+                                v-text="filterItem.op + ' ' + filterItem.value"
+                              >
+                              </v-list-item-title>
+                            </v-list-item-content>
+                            <v-list-item-action>
+                              <v-btn icon>
+                                <v-icon>fa-trash-alt</v-icon>
+                              </v-btn>
+                            </v-list-item-action>
+                          </v-list-item>
+                        </v-list>
+                        <v-divider></v-divider>
+                        {{ item }}
                       </div>
                     </template>
                   </v-card-text>