From 06522e08aecd437613ea284cbfc7e9c8e984f91e Mon Sep 17 00:00:00 2001
From: Francesco Boccacci <boccacci.francesco@gmail.com>
Date: Mon, 6 May 2024 11:28:15 +0200
Subject: [PATCH] Custom DPI in print layout (#619)

* :sparkles: Replcae dpi select with v-select2. Add feature to creare new tag and handle 'object string' value model change

* reduce conditionals nesting level: `v-select2.js`

* avoid wrapper div

* Tranform all select in select 2 element. Dispatch el.dispatchEvent(new Event("change")) on v-select2 directive

* Dispatch change event as base select element change option

* Replace labet with span due conflict on rendering with atlas label

---------

Co-authored-by: Raruto <Raruto@users.noreply.github.com>
---
 src/components/Print.vue    | 63 ++++++++++++++++++--------------
 src/directives/v-select2.js | 73 +++++++++++++++++++++----------------
 2 files changed, 77 insertions(+), 59 deletions(-)

diff --git a/src/components/Print.vue b/src/components/Print.vue
index ec2fb0a13..2e77fff7f 100644
--- a/src/components/Print.vue
+++ b/src/components/Print.vue
@@ -19,11 +19,11 @@
           <!-- PRINT TEMPLATE -->
           <label for="templates" v-t="'sdk.print.template'"></label>
           <select
-            id      = "templates"
-            class   = "form-control"
-            @change = "changeTemplate"
-            v-model = "state.template"
-            :style  = "{ marginBottom: this.state.atlas && '10px' }"
+            id        = "templates"
+            class     = "form-control"
+            v-select2 = "'state.template'"
+            @change   = "changeTemplate"
+            :style    = "{ marginBottom: this.state.atlas && '10px' }"
           >
             <option v-for="print in state.print" :value="print.name">{{ print.name }}</option>
           </select>
@@ -36,8 +36,8 @@
               id         = "scale"
               v-disabled = "!has_maps"
               class      = "form-control"
+              v-select2  = "'state.scale'"
               @change    = "changeScale"
-              v-model    = "state.scale"
             >
               <option
                 v-for="scale in state.scales"
@@ -49,13 +49,13 @@
             <!-- PRINT DPI -->
             <label for="dpi">dpi</label>
             <select
-              id      = "dpi"
-              class   = "form-control"
-              v-model = "state.dpi"
+              v-select2      = "'state.dpi'"
+              id             = "dpi"
+              class          = "form-control"
+              :createTag     = "true"
             >
               <option v-for="dpi in state.dpis">{{ dpi }}</option>
             </select>
-
             <!-- PRINT ROTATION -->
             <label for="rotation" v-t="'sdk.print.rotation'"></label>
             <input
@@ -72,9 +72,9 @@
             <!-- PRINT FORMAT -->
             <label for="format" v-t="'sdk.print.format'"></label>
             <select
-              id      = "format"
-              class   = "form-control"
-              v-model = "state.format"
+              id        = "format"
+              class     = "form-control"
+              v-select2 = "'state.format'"
             >
               <option
                 v-for="format in state.formats"
@@ -94,28 +94,35 @@
           >
             <!-- ORIGINAL SOURCE: src/componentsPrintSelectAtlasFieldValues.vue@v3.9.3 -->
             <template v-if = "has_autocomplete">
-              <label for="print_atlas_autocomplete"><span>{{ state.atlas.field_name }}</span></label>
+              <label  for="print_atlas_autocomplete"><span>{{ state.atlas.field_name }}</span></label>
               <select id="print_atlas_autocomplete" :name="state.atlas.field_name" class="form-control"></select>
             </template>
             <!-- ORIGINAL SOURCE: src/components/PrintFidAtlasValues.vue@v3.9.3 -->
             <template v-else>
               <label><span>fids [max: {{ state.atlas.feature_count - 1 }}]</span></label>
               <input class="form-control" v-model="atlas_values" @keydown.space.prevent>
-              <div id="fid-print-atals-instruction">
-                <div id="fids_intruction"      v-t="'sdk.print.fids_instruction'"></div>
-                <div id="fids_examples_values" v-t="'sdk.print.fids_example'"></div>
+              <div id = "fid-print-atals-instruction">
+                <div id = "fids_intruction"      v-t="'sdk.print.fids_instruction'"></div>
+                <div id = "fids_examples_values" v-t="'sdk.print.fids_example'"></div>
               </div>
             </template>
           </div>
 
-          <div v-if="state.labels && state.labels.length" class="print-labels-content">
-            <label class="skin-color" v-t="'sdk.print.labels'"></label>
+          <div
+            v-if  = "state.labels && state.labels.length > 0"
+            class = "print-labels-content"
+            style = "color: white"
+          >
+            <span
+              class = "skin-color"
+              v-t   = "'sdk.print.labels'">
+            </span>
             <div class="labels-input-content">
               <span
                 v-for = "label in state.labels"
                 :key  = "label.id"
               >
-                <label :for="`g3w_label_id_input_${label.id}`">{{ label.id }}</label>
+                <label :for="`g3w_label_id_input_${label.id}`"> {{ label.id }}</label>
                 <input
                   :id     = "`g3w_label_id_input_${label.id}`"
                   class   = "form-control"
@@ -146,6 +153,7 @@
 </template>
 
 <script>
+
 import {
   PRINT_SCALES,
   PRINT_RESOLUTIONS,
@@ -245,9 +253,7 @@ export default {
     },
 
     async changeTemplate() {
-      if (!this.state.template) {
-        return;
-      }
+      if (!this.state.template) { return; }
 
       await this.$nextTick();
 
@@ -287,9 +293,7 @@ export default {
      * On scale change set print area
      */
     changeScale() {
-      if (this.state.scale) {
-        this._setPrintArea();
-      }
+      if (this.state.scale) { this._setPrintArea(); }
     },
 
     /**
@@ -686,7 +690,7 @@ export default {
 .print-labels-content {
   margin-top: 5px;
 }
-.print-labels-content > label.skin-color {
+.print-labels-content > span.skin-color {
   font-weight: bold;
   font-size: 1.1em;
   display: block;
@@ -718,4 +722,9 @@ export default {
   margin-top: 3px;
   font-weight: bold;
 }
+</style>
+<style>
+#print.treeview-menu .select2.select2-container {
+  display: block;
+}
 </style>
\ No newline at end of file
diff --git a/src/directives/v-select2.js b/src/directives/v-select2.js
index c791b675f..6d558cbd2 100644
--- a/src/directives/v-select2.js
+++ b/src/directives/v-select2.js
@@ -8,55 +8,64 @@ export default {
     const {
       templateResult,
       templateSelection,
-      multiple=false,
-      search=true,
+      multiple  = false,
+      search    = true,
       select2_value,
-      indexItem, /** @since 3.9.1 */
+      /** @since 3.9.1 */
+      indexItem,
+      /**@since 3.10.0 whether to dynamically create a new "<option>" value */
+      createTag = false,
     } = vnode.data.attrs || {};
     const isArray = binding.value
       && Array.isArray(vnode.context[binding.value]) // check if is an array
       && undefined !== indexItem                     // check if indexItem is defined
     $(el)
       .select2({
-        width: '100%',
+        tags:             createTag,
+        width:            '100%',
         dropdownCssClass: 'skin-color',
         templateResult,
         templateSelection,
-        minimumResultsForSearch: !search ? -1 : undefined
+        minimumResultsForSearch: search ? undefined : -1,
+        createTag(params) {
+          const value = params.term.trim();
+          return value ? {
+            id:     value,
+            text:   value,
+            newTag: true // add additional value
+          } : null;
+        },
       })
       .on('select2:select', (e) => {
-        if (binding.value) {
-          //get value
-          const value = e.params.data.id;
-          //check is can have multiple value
-          if (multiple && (
-            (isArray
-              ? vnode.context[binding.value][indexItem].value
-              : vnode.context[binding.value]
-            ).filter(d => value === d).length === 0)
-          ) {
-            (isArray
-              ? vnode.context[binding.value][indexItem].value
-              : vnode.context[binding.value]
-            ).push(value);
-          } else {
-            if (isArray) {
-              vnode.context[binding.value][indexItem].value = value;
-            } else {
-              vnode.context[binding.value] = value;
-            }
-          }
+        if (!binding.value) { return; }
+        //get value
+        const value = e.params.data.id;
+        const arr = (isArray ? vnode.context[binding.value][indexItem].value : vnode.context[binding.value]);
+        // check is can have multiple value
+        if (multiple && arr.every(d => value !== d)) {
+          arr.push(value);
+        } else if (isArray) {
+          vnode.context[binding.value][indexItem].value = value;
+        } else {
+          // take in an account text binding value single world or object (eg. state.name)
+          const attrs = `${binding.value}`.split('.');
+          const last = attrs.pop();
+          (attrs.reduce((acc, a) => { acc = acc[a]; return acc; }, vnode.context))[last] = value;
         }
+        //dispatch change event as base select element change option
+        el.dispatchEvent(new Event("change"))
       })
       .on('select2:unselect', (e) => {
-        if (binding.value && multiple) {
-          if (isArray) {
-            vnode.context[binding.value][indexItem].value = vnode.context[binding.value][indexItem].value.filter(d => e.params.data.id !== d);
-          } else {
-            vnode.context[binding.value] = vnode.context[binding.value].filter(d => e.params.data.id !== d);
-          }
+        if (!binding.value || !multiple) { return; }
+        if (isArray) {
+          vnode.context[binding.value][indexItem].value = vnode.context[binding.value][indexItem].value.filter(d => e.params.data.id !== d);
+        } else {
+          vnode.context[binding.value] = vnode.context[binding.value].filter(d => e.params.data.id !== d);
         }
+        //dispatch change event as base select element change option
+        el.dispatchEvent(new Event("change"))
       });
+
       if (binding.value && select2_value) {
         $(el).val(select2_value).trigger('change');
       }