From d00cc5efc1cd4cce576c6d19e968fb9b1f4f22e4 Mon Sep 17 00:00:00 2001
From: Alessandro <a.francia@teamdev.it>
Date: Wed, 23 Jan 2019 15:11:28 +0100
Subject: [PATCH] fix modal-report-select-column

---
 .../components/card-report-production.vue     |   2 +-
 .../modal-report-select-column.ts             |  30 +++++
 .../modal-report-select-column.vue            | 104 +-----------------
 3 files changed, 37 insertions(+), 99 deletions(-)

diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue b/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue
index cc32e686..dba60ab9 100644
--- a/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue
+++ b/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue
@@ -44,7 +44,7 @@
             <div v-for="item in users" :key="item.id">
               <label :for="item.username">
               <div class="custom-checkbox">
-                <input type="checkbox"  v-model="filter.multiUser" :value="item.username" :id="item.username" />
+                <input type="checkbox" v-model="filter.multiUser" :value="item.username" :id="item.username" />
                 <label :for="item.username"></label>
               </div>
               <label class="label-state">{{item.username}}</label>
diff --git a/Step/wwwroot/src/modules/base-components/modal-report-select-column.ts b/Step/wwwroot/src/modules/base-components/modal-report-select-column.ts
index 55f9bc16..ee2c8c9a 100644
--- a/Step/wwwroot/src/modules/base-components/modal-report-select-column.ts
+++ b/Step/wwwroot/src/modules/base-components/modal-report-select-column.ts
@@ -2,6 +2,7 @@ import Vue from "vue";
 import Component from "vue-class-component";
 import { ModalHelper,Modal } from "src/components/modals";
 import { Factory, MessageService } from "src/_base";
+import { Watch } from "vue-property-decorator";
 
 declare var cmsClient: any;
 
@@ -13,6 +14,35 @@ declare var cmsClient: any;
 
 export default class ModalReportSelectColumn extends Vue {
 
+  maxRow: number = 3;
+
+  checkboxes: Array<any> = [{id: "ProgramName", label: this.$options.filters.localize("modal_report_select_column_program_name", "Nome programma")},
+                            {id: "Date", label: this.$options.filters.localize("modal_report_select_column_date", "Data")},
+                            {id: "Deviation", label: this.$options.filters.localize("modal_report_select_column_deviation", "Scostamento")},
+                            {id: "Dimensions", label: this.$options.filters.localize("modal_report_select_column_dimensions", "Dimensioni")},
+                            {id: "EffectiveTime", label: this.$options.filters.localize("modal_report_select_column_effective_time", "Tempo effettivo")},
+                            {id: "Quality", label: this.$options.filters.localize("modal_report_select_column_quality", "Qualità")},
+                            {id: "Quantity", label: this.$options.filters.localize("modal_report_select_column_quantity", "Quantità")},
+                            {id: "AverageTime", label: this.$options.filters.localize("modal_report_select_column_average_time", "Tempo medio")},
+                            {id: "OperatorName", label: this.$options.filters.localize("modal_report_select_column_operator_name", "Nome operatore")},
+                            {id: "StartTime", label: this.$options.filters.localize("modal_report_select_column_start_time", "Ora inizio")},
+                            {id: "TheoreticalTime", label: this.$options.filters.localize("modal_report_select_column_theoretical_time", "Tempo teorico")},
+                            {id: "Shift", label: this.$options.filters.localize("modal_report_select_column_shift", "Turno")},
+                            {id: "EndTime", label: this.$options.filters.localize("modal_report_select_column_end_time", "Ora fine")}];
+  
+  allSelectedColumn = false;
+  columnSelected = [];
+
+  selectAll() {
+    this.columnSelected = [];
+
+    if (!this.allSelectedColumn) {
+        for (let checkbox in this.checkboxes) {
+            this.columnSelected.push(this.checkboxes[checkbox].id);
+        }
+    }
+  }
+
   close() {
     Factory.Get(MessageService).deleteChannel("esc_pressed");
     ModalHelper.HideModal();
diff --git a/Step/wwwroot/src/modules/base-components/modal-report-select-column.vue b/Step/wwwroot/src/modules/base-components/modal-report-select-column.vue
index 887fc887..a413f3d8 100644
--- a/Step/wwwroot/src/modules/base-components/modal-report-select-column.vue
+++ b/Step/wwwroot/src/modules/base-components/modal-report-select-column.vue
@@ -5,112 +5,20 @@
         <label>{{'modal_report_select_column_body_title' | localize("Scegli le colonne che vuoi visualizzare:")}}</label>
         <div>
             <div class="modal-report-select-column-checkbox">
-                <input type="checkbox" value="1" id="modalReportSelectAll" name="" />
+                <input type="checkbox" @click="selectAll()" v-model="allSelectedColumn" value="1" id="modalReportSelectAll" name="" />
                 <label for="modalReportSelectAll"></label>
             </div>
             <label for="modalReportSelectAll" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_select_all' | localize("Seleziona tutte")}}</label>
         </div>
     </div>
     <div class="modal-report-body-center">
-        <div class="modal-report-body-center-row">
-            <div>
+        <div class="modal-report-body-center-row" v-for="i in Math.ceil(checkboxes.length / maxRow)" :key="i">
+            <div v-for="(checkbox, idx) in checkboxes.slice((i-1) * maxRow, i * maxRow)" :key="idx">
                 <div class="modal-report-select-column-checkbox">
-                    <input type="checkbox" value="1" id="modalReportProgramName" name="" />
-                    <label for="modalReportProgramName"></label>
+                    <input type="checkbox" v-model="columnSelected" :value="checkbox.id" :id="checkbox.id" />
+                    <label :for="checkbox.id"></label>
                 </div>
-                <label for="modalReportProgramName" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_program_name' | localize("Nome programma")}}</label>
-            </div>
-            <div>
-                <div class="modal-report-select-column-checkbox">
-                    <input type="checkbox" value="1" id="modalReportDate" name="" />
-                    <label for="modalReportDate"></label>
-                </div>
-                <label for="modalReportDate" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_date' | localize("Data")}}</label>
-            </div>
-            <div>
-                <div class="modal-report-select-column-checkbox">
-                    <input type="checkbox" value="1" id="modalReportDeviation" name="" />
-                    <label for="modalReportDeviation"></label>
-                </div>
-                <label for="modalReportDeviation" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_deviation' | localize("Scostamento")}}</label>
-            </div>
-        </div>
-        <div class="modal-report-body-center-row">
-            <div>
-                <div class="modal-report-select-column-checkbox">
-                    <input type="checkbox" value="1" id="modalReportDimensions" name="" />
-                    <label for="modalReportDimensions"></label>
-                </div>
-                <label for="modalReportDimensions" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_dimensions' | localize("Dimensioni")}}</label>
-            </div>
-            <div>
-                <div class="modal-report-select-column-checkbox">
-                    <input type="checkbox" value="1" id="modalReportEffectiveTime" name="" />
-                    <label for="modalReportEffectiveTime"></label>
-                </div>
-                <label for="modalReportEffectiveTime" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_effective_time' | localize("Tempo effettivo")}}</label>
-            </div>
-            <div>
-                <div class="modal-report-select-column-checkbox">
-                    <input type="checkbox" value="1" id="modalReportQuality" name="" />
-                    <label for="modalReportQuality"></label>
-                </div>
-                <label for="modalReportQuality" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_quality' | localize("Qualità")}}</label>
-            </div>
-        </div>
-        <div class="modal-report-body-center-row">
-            <div>
-                <div class="modal-report-select-column-checkbox">
-                    <input type="checkbox" value="1" id="modalReportQuantity" name="" />
-                    <label for="modalReportQuantity"></label>
-                </div>
-                <label for="modalReportQuantity" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_quantity' | localize("Quantità")}}</label>
-            </div>
-            <div>
-                <div class="modal-report-select-column-checkbox">
-                    <input type="checkbox" value="1" id="modalReportAverageTime" name="" />
-                    <label for="modalReportAverageTime"></label>
-                </div>
-                <label for="modalReportAverageTime" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_average_time' | localize("Tempo medio")}}</label>
-            </div>
-            <div>
-                <div class="modal-report-select-column-checkbox">
-                    <input type="checkbox" value="1" id="modalReportOperatorName" name="" />
-                    <label for="modalReportOperatorName"></label>
-                </div>
-                <label for="modalReportOperatorName" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_operator_name' | localize("Nome operatore")}}</label>
-            </div>
-        </div>
-        <div class="modal-report-body-center-row">
-            <div>
-                <div class="modal-report-select-column-checkbox">
-                    <input type="checkbox" value="1" id="modalReportStartNow" name="" />
-                    <label for="modalReportStartNow"></label>
-                </div>
-                <label for="modalReportStartNow" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_start_now' | localize("Ora inizio")}}</label>
-            </div>
-            <div>
-                <div class="modal-report-select-column-checkbox">
-                    <input type="checkbox" value="1" id="modalReportTheoreticalTime" name="" />
-                    <label for="modalReportTheoreticalTime"></label>
-                </div>
-                <label for="modalReportTheoreticalTime" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_theoretical_time' | localize("Tempo teorico")}}</label>
-            </div>
-            <div>
-                <div class="modal-report-select-column-checkbox">
-                    <input type="checkbox" value="1" id="modalReportShift" name="" />
-                    <label for="modalReportShift"></label>
-                </div>
-                <label for="modalReportShift" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_shift' | localize("Turno")}}</label>
-            </div>
-        </div>
-        <div class="modal-report-body-center-row">
-            <div>
-                <div class="modal-report-select-column-checkbox">
-                    <input type="checkbox" value="1" id="modalReportEndTime" name="" />
-                    <label for="modalReportEndTime"></label>
-                </div>
-                <label for="modalReportEndTime" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_end_time' | localize("Ora fine")}}</label>
+                <label :for="checkbox.id" class="modal-report-select-column-checkbox-label">{{checkbox.label}}</label>
             </div>
         </div>
     </div>