From 53fe2b235a89164fb853e8f77f55862db125a1a6 Mon Sep 17 00:00:00 2001
From: eithan <ne.castillo1607@gmail.com>
Date: Wed, 27 Jan 2021 14:33:30 -0600
Subject: [PATCH] prueba

---
 package-lock.json                  | 160 +++++++++++++++--------------
 src/components/modalActualizar.vue | 118 +++++++++++++++++++--
 2 files changed, 193 insertions(+), 85 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6e35680..457b178 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1765,16 +1765,6 @@
           "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
           "dev": true
         },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@@ -1801,53 +1791,6 @@
             "unique-filename": "^1.1.1"
           }
         },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -1864,16 +1807,6 @@
             "minipass": "^3.1.1"
           }
         },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -1890,18 +1823,6 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.1.2",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
-          "integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
         }
       }
     },
@@ -11141,6 +11062,87 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.1.2",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
+      "integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-router": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.0.tgz",
diff --git a/src/components/modalActualizar.vue b/src/components/modalActualizar.vue
index 631e27a..8c09e10 100644
--- a/src/components/modalActualizar.vue
+++ b/src/components/modalActualizar.vue
@@ -19,8 +19,10 @@
                     <label style=" padding-top:1rem;">Actualizar: </label>
                  </b-col>
                  <b-col sm="9">
-                    <div v-if="opciones.length!=0">
-                        <b-dropdown
+                    <div v-if="opciones.length!=0" class=" rescont   dropdowm">
+                      
+                  
+                   <!--      <b-dropdown
                             split
                             block
                             split-variant="outline-primary"
@@ -28,10 +30,47 @@
                             v-bind:text="opcionSeleted != '' ?  opcionSeleted.nombre : campo"
                             class="m-2"
                             style="margin: 0"
+                            @click="showSelect"
                         >
-                            <b-dropdown-item v-for="(opcion,index) in opciones" v-bind:key="index" @click="opcionSeleted=opcion">{{opcion.nombre}}</b-dropdown-item>
-                        </b-dropdown>
+                        <div class="dd">
+                            <b-dropdown-item class="text-wrap text-break item" v-for="(opcion,index) in opciones" v-bind:key="index" @click="opcionSeleted=opcion">{{opcion.nombre}}</b-dropdown-item>
+                      </div>
+                        </b-dropdown> -->
+                       
+<button class="btn btn-outline-primary dropdown-toggle btn btn-outline-primary btn-block" @click="show()" >
+                            {{opcionSeleted != '' ?  opcionSeleted.nombre : campo}}
+                        </button>
+
+                        <div class="dropdown" v-if="showSelect">
+                        <div class="dropdown-menu list-group-item " aria-labelledby="dropdownMenuButton"  id="drop">
+                            <a class="dropdown-item  "  v-for="(opcion,index) in opciones" v-bind:key="index" @click="opcionSeleted=opcion"><p> {{opcion.nombre}}</p></a>
+                            
+                        </div>
+                        </div>
                     </div>
+
+
+     <!--    <div v-if="opciones.length!=0" class=" rescont   dropdowm">
+             <button class="btn btn-secondary dropdown-toggle"  type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            Dropdown button
+                        </button>
+            <ul class=" dropdown-menu d-block  dropdown " >
+              <li
+                class=" dropdown-item stext-wrap "
+                v-for="(opcion,index) in opciones" v-bind:key="index" @click="opcionSeleted=opcion"
+              >
+                {{opcion.nombre}}
+              </li>
+            </ul>
+          </div> -->
+
+
+
+
+
+
+
+
                     <b-form-input  v-else v-model="campoValue" class="m-2" placeholder="Actualizar campo" style="margin: 0"></b-form-input>
                 </b-col>
             </b-row>
@@ -46,7 +85,63 @@
         </b-container>
     </b-modal>
 </template>
+
+
+<style scoped>
+ .dropdown-item{
+    width: 100%;
+     overflow: hidden;
+  white-space: pre;
+  text-overflow: ellipsis;
+  -webkit-appearance: none;
+      word-wrap: break-word;
+    text-overflow: inherit;
+    white-space: normal;
+}
+.dropdown {
+  position: relative ;
+  display: inline-block;
+  height: auto;
+  width: 100%  !important;
+}
+.dropdown-menu{
+    width: 100%;
+}
+
+.rescont {
+  z-index: 2;
+}
+
+.list-group-item {
+  padding: 12px 16px;
+}
+.dropdown-menu .show{
+    height: 800px;
+}
+.dd{
+     position: a ;
+overflow-y: scroll;
+  height:200px !important;
+
+  overflow: hidden;
+  white-space: pre;
+  text-overflow: ellipsis;
+  -webkit-appearance: none;
+      word-wrap: break-word;
+    text-overflow: inherit;
+    white-space: normal;
+}
+.item{
+
+   
+    word-wrap: break-word;
+}
+
+</style>
+
+
 <script>
+
 import Swal from 'sweetalert2';
 import axios from "axios";
 import config from "../config/config.js";   
@@ -61,11 +156,17 @@ export default {
         return {
             opcionSeleted: '',
             campoValue:'',
-            pc: this.campo
+            pc: this.campo,
+            showSelect: false
 
         }
     },
     methods:{
+        show(){
+            this.showSelect = !this.showSelect
+
+        },
+
         cambiar(){
             this.opcionSeleted = '';
             this.campoValue = '';
@@ -136,10 +237,15 @@ export default {
             return this.campo;
             
         }
+    },
+    watch:{
+        opcionSeleted () {
+         this.showSelect = false
+        }
     }
     
 
   
    
 }
-</script>
\ No newline at end of file
+</script>