- aggiornamento lista catalogo, ordinamento tabelle

src/components/CProductTable/CProductTable.vue

@@ -1,39 +1,40 @@
 <template>
   <div>
     <!-- Selezione Colonne -->
-    <div class="q-mb-md">
-      <q-select
-        v-model="selectedColumns"
-        :options="allColumns"
-        label="Colonne da visualizzare"
-        multiple
-        filled
-        dense
-        class="float-right"
-        outlined
-        emit-value
-        map-options
-        option-value="name"
-        option-label="label"
-        style="max-width: 200px"
-      >
-        <template v-slot:prepend>
-          <q-icon name="settings" />
-        </template>
-      </q-select>
-      <q-btn
-        class="q-ml-md float-right"
-        flat
-        outline
-        color="primary"
-        icon="archive"
-        label="Esporta Lista"
-        @click="exportToCSV"
-      />
-    </div>
-
-    <div class="row justify-center q-mx-auto q-pt-sm text-italic">
-      {{ internalProducts?.length }} elementi nella lista
+    <div class="row justify-center">
+      <div class="row justify-center q-mx-auto q-pt-sm text-italic">
+        {{ internalProducts?.length }} elementi nella lista
+      </div>
+      <div class="q-mb-md text-right">
+        <q-select
+          v-model="selectedColumns"
+          :options="allColumns"
+          label="Colonne da visualizzare"
+          multiple
+          filled
+          dense
+          class="float-right"
+          outlined
+          emit-value
+          map-options
+          option-value="name"
+          option-label="label"
+          style="max-width: 200px"
+        >
+          <template v-slot:prepend>
+            <q-icon name="settings" />
+          </template>
+        </q-select>
+        <q-btn
+          class="q-ml-md float-right"
+          flat
+          outline
+          color="primary"
+          icon="archive"
+          label="Esporta Lista"
+          @click="exportToCSV"
+        />
+      </div>
     </div>
 
     <!-- Tabella Prodotti -->
@@ -45,21 +46,24 @@
             <th
               v-if="isColumnVisible(col.name)"
               :key="col.name"
-              @click="sortTable(col.name)"
+              @click="isSortable(col.name) ? sortTable(col.name) : ''"
+              :style="{ 'background-color': sortAttribute === col.name ? 'yellow' : '' }"
             >
-              {{ col.label }}
-              <q-icon
-                v-if="sortAttribute === col.name && optcatalogo.showListaArgomenti"
-                :name="sortDirection === 1 ? 'arrow_drop_up' : 'arrow_drop_down'"
-                size="16px"
-                class="q-ml-xs"
-              />
-              <q-icon
-                v-else-if="optcatalogo.showListaArgomenti"
-                name="arrow_drop_up"
-                size="16px"
-                class="q-ml-xs"
-              />
+              <span>{{ col.label }}</span>
+              <span v-if="isSortable(col.name)">
+                <q-icon
+                  v-if="sortAttribute === col.name && optcatalogo.showListaArgomenti"
+                  :name="sortDirection === 1 ? 'expand_less' : 'expand_more'"
+                  size="36px"
+                  class="q-ml-xs"
+                />
+                <q-icon
+                  v-else-if="optcatalogo.showListaArgomenti"
+                  :name="sortDirection === 1 ? 'expand_less' : 'expand_more'"
+                  size="24px"
+                  class="q-ml-xs"
+                />
+              </span>
             </th>
           </template>
         </tr>