From 64d28b718fd3b61f765e248210c6622dcc8ba147 Mon Sep 17 00:00:00 2001
From: kazhamiakin <kazhamiakin@gmail.com>
Date: Fri, 20 Oct 2023 14:00:15 +0200
Subject: [PATCH] UI fixes

---
 .../specific-modals/CompanyFormModal.vue      | 38 +++++++++----------
 .../src/components/stats-views/DataTable.vue  | 24 ++++++++++--
 .../src/pages/companies/Company.vue           |  6 +--
 .../src/pages/employees/Employee.vue          |  4 +-
 .../src/pages/employees/Employees.vue         |  6 ++-
 .../src/services/viewStat.services.js         | 12 ++++--
 console_aziendale/src/store/modal.module.js   |  1 +
 7 files changed, 58 insertions(+), 33 deletions(-)

diff --git a/console_aziendale/src/components/modal/specific-modals/CompanyFormModal.vue b/console_aziendale/src/components/modal/specific-modals/CompanyFormModal.vue
index b0c2a8b1..f5a9a5a9 100644
--- a/console_aziendale/src/components/modal/specific-modals/CompanyFormModal.vue
+++ b/console_aziendale/src/components/modal/specific-modals/CompanyFormModal.vue
@@ -54,21 +54,18 @@
                             </v-text-field>
                         </v-col>
                         <v-col cols="3">
-                            <v-autocomplete
+                            <v-select
                                 label="Territorio"
-                                placeholder="Territorio *"
-                                name="territory"
-                                id="territory"
-                                v-model.trim="$v.territory.$model"
+                                name="territoryId"
+                                id="territoryId"
+                                v-model.trim="$v.territoryId.$model"
                                 :items="territoryIds"
                                 item-text="name.it"
                                 item-value="territoryId"
                                 :error-messages="territoryErrors"                                
                                 required
-                                @input="$v.territory.$touch()"
-                                @blur="$v.territory.$touch()"
                                 outlined
-                            ></v-autocomplete>
+                            ></v-select>
                         </v-col>
                         <v-col
                         cols="6"
@@ -311,7 +308,7 @@ export default {
         code: {
             required,
         },
-        territory: {
+        territoryId: {
             required,
         },
         address: {
@@ -370,7 +367,7 @@ export default {
             id: null,
             name: "",
             code: "",
-            territory: "",
+            territoryId: "",
             territoryIds: [],
             address: "",
             streetNumber: "",
@@ -396,6 +393,7 @@ export default {
         ...mapActions("campaign", {getTerritories:"getTerritories"}),
 
         copyFormValues(company) {
+            if (!company) return;
             for (const [key] of Object.entries(company)) {
                 this[key] = company[key];
             }
@@ -419,7 +417,7 @@ export default {
             this.id = null;
             this.name = "";
             this.code = "";
-            this.territory = "";
+            this.territoryId = "";
             this.address = "";
             this.streetNumber = "";
             this.city = "";
@@ -437,7 +435,7 @@ export default {
                 id: this.id,
                 name: this.name,
                 code: this.code,
-                territoryId: this.territory,
+                territoryId: this.territoryId,
                 address: this.address,
                 streetNumber: this.streetNumber,
                 city: this.city,
@@ -452,6 +450,7 @@ export default {
             };
         },     
         closeThisModal(){
+            console.log(this.type);
             this.initCompany();
             this.$v.$reset();
             this.closeModal();
@@ -479,7 +478,7 @@ export default {
                 this.popup.title = "Aggiungi Azienda";
                 console.log("Modalità AGGIUNGI");
 
-            }else if (this.typeCall == "edit") {
+            }else if (this.typeCall == "edit" && this.actualCompany && this.actualCompany.item) {
                 this.copyFormValues(this.actualCompany.item);
                 this.popup.title = "Modifica Azienda";
                 console.log("Modalità MODIFICA");
@@ -490,6 +489,7 @@ export default {
     computed: {
         ...mapState("company", ["actualCompany"]),
         ...mapState("campaign", ["territories"]),
+        ...mapState("modal", ["type"]),
 
         //Controls for form validation 
         nameErrors () {
@@ -568,28 +568,28 @@ export default {
         },
         territoryErrors () {
             const errors = []
-            if (!this.$v.territory.$dirty) return errors
-            !this.$v.territory.required && errors.push('Campo richiesto.')
+            if (!this.$v.territoryId.$dirty) return errors
+            !this.$v.territoryId.required && errors.push('Campo richiesto.')
             return errors
         },
     },
 
     watch: {
-        typeCall: function(){
+        type: function(){
             this.setModalData();
         },
-        actualCompany: function(){
+        typeCall: function(){
             this.setModalData();
         },
         territories(res) {
             if (res.items)
                 {
-                    this.territoryIds = res.items.map(t => t);
+                    this.territoryIds = res.items.filter(t => t.territoryId);
                 }
             },
         },
 
-    created() {
+    mounted() {
         this.setModalData();
         this.getTerritories();
     },
diff --git a/console_aziendale/src/components/stats-views/DataTable.vue b/console_aziendale/src/components/stats-views/DataTable.vue
index c0be6497..d260f00f 100644
--- a/console_aziendale/src/components/stats-views/DataTable.vue
+++ b/console_aziendale/src/components/stats-views/DataTable.vue
@@ -8,16 +8,25 @@
     <template v-slot:header >
     <thead>
       <tr>
-         <th colspan="1"></th>
-        <th :colspan="dataTableData.headerNumber" v-for="(header,index) in dataTableData.headers" :key="index">{{header}}</th>
+        <th class="cell-agg" colspan="1"></th>
+        <th class="cell-agg" :colspan="dataTableData.headerNumber" v-for="(header,index) in dataTableData.headers" :key="index">{{header}}</th>
       </tr>
+      <!-- <tr>
+        <th v-for="(header,index) in dataTableData.subheaders" :key="index">{{header.text}}</th>
+      </tr> -->
     </thead>
   </template>
 
-    <template v-slot:item.name="{ item }">
-        <span style="white-space: nowrap;">{{ item.name }}</span>
+    <template v-slot:item="{ item, headers }">
+      <tr>
+        <td :class="index == 0 || ((index) % Math.floor(dataTableData.headerNumber) ==0) ? 'cell-agg': ''" v-for="(header,index) in headers" :key="index">{{item[header.value]}}</td>
+      </tr>
     </template>
 
+    <!-- <template v-slot:item.name="{ item }">
+        <span style="white-space: nowrap;">{{ item.name }}</span>
+    </template> -->
+
 
   </v-data-table>
 
@@ -53,4 +62,11 @@
         z-index: 1;
   } 
 
+   .statstable table .cell-agg {
+    border-right: 1px solid rgba(0, 0, 0, 0.12);
+   }
+   .statstable table td  {
+    white-space: nowrap;
+   }
+
 </style>
\ No newline at end of file
diff --git a/console_aziendale/src/pages/companies/Company.vue b/console_aziendale/src/pages/companies/Company.vue
index 98cbcffc..e03b6ad7 100644
--- a/console_aziendale/src/pages/companies/Company.vue
+++ b/console_aziendale/src/pages/companies/Company.vue
@@ -31,7 +31,7 @@
                             <v-list-item-title v-else>Nessun sito web inserito</v-list-item-title>
                         </v-list-item-content>
                     </v-list-item>
-                    <v-list-item :href="`mailto:${actualCompany.item.contactEmail}`">
+                    <v-list-item :href="`mailto:${actualCompany.item.contactEmail}`" target="_blank">
                         <v-list-item-icon>
                             <v-icon>mdi-email</v-icon>
                         </v-list-item-icon>
@@ -39,7 +39,7 @@
                             <v-list-item-title v-text="actualCompany.item.contactEmail"></v-list-item-title>
                         </v-list-item-content>
                     </v-list-item>
-                    <v-list-item :href="`tel:${actualCompany.item.contactPhone}`">
+                    <v-list-item :href="`tel:${actualCompany.item.contactPhone}`" target="_blank">
                         <v-list-item-icon>
                             <v-icon>mdi-phone</v-icon>
                         </v-list-item-icon>
@@ -83,7 +83,7 @@
                 <v-icon>mdi-pencil</v-icon>
             </v-btn>
 
-            <v-btn icon
+            <v-btn icon v-show="$route.name !== 'ProfiloAzienda'"
             @click="openModal({type:'updateCompanyState', object:null})">
                 <v-icon>{{actualCompany.item.state ? 'mdi-close' : 'mdi-check'}}</v-icon>
             </v-btn>
diff --git a/console_aziendale/src/pages/employees/Employee.vue b/console_aziendale/src/pages/employees/Employee.vue
index bc39b871..74c13479 100644
--- a/console_aziendale/src/pages/employees/Employee.vue
+++ b/console_aziendale/src/pages/employees/Employee.vue
@@ -90,12 +90,14 @@ export default {
         if (this.actualEmployee && this.actualEmployee.item && this.allCampaigns && this.allCampaigns.items) {
             console.log('updating');
             let list = (this.actualEmployee.item.campaigns || []).concat(this.actualEmployee.item.trackingRecord ? Object.keys(this.actualEmployee.item.trackingRecord) : []);
-            this.employeeCampaigns =  Array.from(new Set(list)).map(cId => {
+            const arr = Array.from(new Set(list)).map(cId => {
                 let tr = this.actualEmployee.item.trackingRecord && this.actualEmployee.item.trackingRecord[cId] ? this.actualEmployee.item.trackingRecord[cId] : {registration: new Date().getTime()}
                 tr.id = cId;
                 tr.title = (this.allCampaigns.items.find(c => c.id === cId) || {title: cId}).title;
                 return tr;
             });
+            arr.sort((a,b) => a.title.localeCompare(b.title));
+            this.employeeCampaigns = arr;
         }
     }
   },
diff --git a/console_aziendale/src/pages/employees/Employees.vue b/console_aziendale/src/pages/employees/Employees.vue
index bbad4d49..4a80938b 100644
--- a/console_aziendale/src/pages/employees/Employees.vue
+++ b/console_aziendale/src/pages/employees/Employees.vue
@@ -136,12 +136,14 @@ export default {
             let empList = this.allEmployees.items.slice();
             empList.forEach(e => {
               let list = (e.campaigns || []).concat(e.trackingRecord ? Object.keys(e.trackingRecord) : []);
-              e.employeeCampaigns = Array.from(new Set(list)).map(cId => {
+              const arr = Array.from(new Set(list)).map(cId => {
                   let tr = e.trackingRecord && e.trackingRecord[cId] ? e.trackingRecord[cId] : {registration: new Date().getTime()}
                   tr.id = cId;
                   tr.title = (this.allCampaigns.items.find(c => c.id === cId) || {title: cId}).title;
                   return tr;
-              }).map(c => c.title).join(', ');
+              }).map(c => c.title)
+              arr.sort();
+              e.employeeCampaigns = arr.join(', ');
             });
             this.employees = empList;
         }
diff --git a/console_aziendale/src/services/viewStat.services.js b/console_aziendale/src/services/viewStat.services.js
index 97fd555c..ab1cac4f 100644
--- a/console_aziendale/src/services/viewStat.services.js
+++ b/console_aziendale/src/services/viewStat.services.js
@@ -42,7 +42,11 @@ async function fillTheViewWithValues(values, view, selection, currentCampaign) {
     case 'Tabella':
       viewData.headers = getHeadersTable(values, selection, currentCampaign)
       viewData.subheaders = getSubHeaders(viewData.headers, selection, currentCampaign)
-      viewData.headerNumber = viewData.subheaders.length / viewData.headers.length;
+      viewData.headerNumber = Math.floor(viewData.subheaders.length / viewData.headers.length);
+      for (let i = 0; i < viewData.subheaders.length; i++) {
+        let s = viewData.subheaders[i];
+        s.class = (i == 0 || (i % viewData.headerNumber == 0)) ? 'cell-agg': '';
+      }
       viewData.data = await getData(viewData.headers, selection, values, currentCampaign)
       break;
 
@@ -85,15 +89,15 @@ function getHeadersTable(values, selection, currentCampaign) {
 }
 //based on configuration, return the subheader=header.length*selection.dataColumns
 function getSubHeaders(headers, selection, currentCampaign) {
-  let subheaders = [{ text: 'Nome', value: 'name' }];
+  let subheaders = [{ text: 'Nome', value: 'name', class: 'cell-agg'}];
   for (let i = 0; i < headers.length; i++) {
     for (let k = 0; k < selection.dataColumns.length; k++) {
       let dc = selection.dataColumns[k];
       if (!dc.mean) {
-        subheaders.push({ text: dc.label, value: dc.value + headers[i] })
+        subheaders.push({ text: dc.label, value: dc.value + headers[i]})
       } else {
         currentCampaign.means.forEach(m => {
-          subheaders.push({ text: dc.label + ' ('+ m +')', value: dc.value + m + headers[i] })
+          subheaders.push({ text: dc.label + ' ('+ m +')', value: dc.value + m + headers[i]})
         });
       }
     }
diff --git a/console_aziendale/src/store/modal.module.js b/console_aziendale/src/store/modal.module.js
index 6966af71..34f2f8ba 100644
--- a/console_aziendale/src/store/modal.module.js
+++ b/console_aziendale/src/store/modal.module.js
@@ -12,6 +12,7 @@ const actions = {
     },
     closeModal({ commit }) {
         commit('setActive', false);
+        commit('setType', null);
     },
     initModal({ commit }){
         commit('init');