From 1d47d08910c1aa7ac7a797cbe2ee5bff2a5bf262 Mon Sep 17 00:00:00 2001
From: Johnny Ressen <jr@scoutsengidsenvlaanderen.be>
Date: Tue, 11 Oct 2022 13:56:07 +0200
Subject: [PATCH] Layout aanpassingen voor mobile

---
 src/assets/scss/_global.scss                  | 16 +++++++
 src/assets/scss/_menu.scss                    | 31 +-------------
 .../filter/LedenlijstFilterblok.vue           | 12 +++---
 src/components/global/LidZoekAutoComplete.vue |  2 +-
 src/components/global/Menu.vue                |  7 +---
 src/components/groep/Algemeen.vue             | 20 ++++++++-
 src/components/lid/IngelogdLid.vue            | 14 ++-----
 src/components/lid/LidBovenBalk.vue           | 42 +++++++++----------
 src/components/lid/Persoonlijk.vue            | 26 +++++++++---
 src/views/Aanvragen.vue                       | 11 +++--
 src/views/Communicatievoorkeuren.vue          |  4 +-
 src/views/Dashboard.vue                       |  8 ++--
 src/views/InschrijvingsFormulier.vue          |  2 +-
 src/views/Ledenlijst.vue                      |  4 +-
 src/views/Lid.vue                             | 11 +++--
 15 files changed, 115 insertions(+), 95 deletions(-)

diff --git a/src/assets/scss/_global.scss b/src/assets/scss/_global.scss
index 2b36fc5..dbe5f09 100644
--- a/src/assets/scss/_global.scss
+++ b/src/assets/scss/_global.scss
@@ -104,6 +104,10 @@
   margin-left: - 1rem !important;
 }
 
+.ml--2 {
+  margin-left: - 2rem !important;
+}
+
 .mt--05 {
   margin-top: - 0.5rem !important;
 }
@@ -517,3 +521,15 @@ a.clean-link:hover {
   margin-top: 7em;
 }
 
+@media screen and (max-width: 992px) {
+  .md\:mt-10 {
+    margin-top: 10rem !important;
+  }
+}
+
+
+@media screen and (max-width: 333px) {
+  .sm\:ml--2 {
+    margin-left: - 2rem !important;
+  }
+}
diff --git a/src/assets/scss/_menu.scss b/src/assets/scss/_menu.scss
index a9ac0ce..8f7bd0d 100644
--- a/src/assets/scss/_menu.scss
+++ b/src/assets/scss/_menu.scss
@@ -45,18 +45,6 @@
           transition: border-bottom-width 1s;
           border-bottom: solid 1px grey;
         }
-
-        li:last-child {
-          transition: width .3s linear;
-          width: 333px;
-
-          .lid-search {
-            transition: visibility .5s cubic-bezier(1, .01, .99, .62), opacity .5s cubic-bezier(1, .01, .99, .62);
-            width: 333px;
-            visibility: visible;
-            opacity: 1;
-          }
-        }
       }
     }
   }
@@ -97,10 +85,6 @@
       .menu-icon {
         top: 11px !important;
       }
-      .lid-search {
-        visibility: hidden;
-        opacity: 0;
-      }
     }
   }
 }
@@ -211,20 +195,7 @@
 }
 
 .lid-autocomplete-input {
-  width: 245px;
-}
-
-@media screen and (max-width: 740px) {
-  .lid-autocomplete-input {
-    width: 200px;
-  }
-}
-
-@media screen and (max-width: 435px) {
-  .lid-autocomplete-input {
-    margin-left: 50px !important;
-    width: 140px;
-  }
+  width: 298px;
 }
 
 .pi-bars {
diff --git a/src/components/filter/LedenlijstFilterblok.vue b/src/components/filter/LedenlijstFilterblok.vue
index f794616..fc44e0a 100644
--- a/src/components/filter/LedenlijstFilterblok.vue
+++ b/src/components/filter/LedenlijstFilterblok.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="row mt-4">
+  <div class="row mt-4 z999">
     <div class="col-lg-12">
       <div class="d-flex justify-content-start">
         <dropdown @change="veranderFilter" :options="filters" option-label="label" option-group-label="label"
@@ -17,9 +17,9 @@
         <Button :label="filterOpslaanMode ? 'Annuleren' : 'Filter opslaan'"
                 :icon="filterOpslaanMode ? 'fas fa-ban' : 'fas fa-plus'" class="ml-2 opslaan-button"
                 @click="filterOpslaanMode = !filterOpslaanMode"></Button>
-          <Button label="Filter toepassen"
-                  :icon="'fas fa-check'" class="ml-2 opslaan-knop"
-                  @click="filterToepassen"></Button>
+        <Button label="Filter toepassen"
+                :icon="'fas fa-check'" class="ml-2 opslaan-knop"
+                @click="filterToepassen"></Button>
       </div>
     </div>
   </div>
@@ -40,7 +40,9 @@
       </GroepenSelect>
       <leeftijd-select :criteria="criteria" v-if="criteria.criteriaKey === 'leeftijd'" :value="criteria.value"
                        @deactivateCriterium="deactivateCriterium"></leeftijd-select>
-      <functie-select :criteria="criteria" v-if="criteria.criteriaKey === 'functies' && (criteria.criteriaSubKey === 'verbonds' || criteria.criteriaSubKey === 'groepspecifiek')" :value="criteria.value"
+      <functie-select :criteria="criteria"
+                      v-if="criteria.criteriaKey === 'functies' && (criteria.criteriaSubKey === 'verbonds' || criteria.criteriaSubKey === 'groepspecifiek')"
+                      :value="criteria.value"
                       @deactivateCriterium="deactivateCriterium"></functie-select>
       <groepseigen-gegevens-select :criteria="criteria" v-if="criteria.criteriaKey === 'groepseigen'"
                                    :value="criteria.value"
diff --git a/src/components/global/LidZoekAutoComplete.vue b/src/components/global/LidZoekAutoComplete.vue
index c267ccb..522e070 100644
--- a/src/components/global/LidZoekAutoComplete.vue
+++ b/src/components/global/LidZoekAutoComplete.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="lid-search mr--23px">
+  <div class="lid-search mb-1">
     <AutoComplete
       class="lid-autocomplete custom-input-styling"
       v-model="zoekTerm"
diff --git a/src/components/global/Menu.vue b/src/components/global/Menu.vue
index 25a31a1..0db3db5 100644
--- a/src/components/global/Menu.vue
+++ b/src/components/global/Menu.vue
@@ -32,7 +32,7 @@
         </div>
       </div>
     </div>
-    <div class="lg:hidden">
+    <div class="lg:hidden mb-8">
       <div class="top-menu d-flex justify-content-center align-content-center">
         <div class="ga-logo-mobile clickable" @click="goToDashBoard">
           <img :src="`${publicPath}static/img/ga-logo.svg`" alt="ga logo" class="ml-2 top-0"/>
@@ -43,21 +43,16 @@
           <Menu id="overlay_menu" ref="menu" :model="mobileMenuItems" :popup="true" class="mobile-menu"/>
         </div>
       </div>
-      <div class="d-flex mt-4">
-        <lid-zoek-auto-complete/>
-      </div>
     </div>
   </div>
 </template>
 
 <script>
 import WikiService from "@/services/wiki/WikiService";
-import LidZoekAutoComplete from "@/components/global/LidZoekAutoComplete";
 import rechtenService from "@/services/rechten/rechtenService";
 
 export default {
   name: "SideMenu",
-  components: {LidZoekAutoComplete},
   data() {
     return {
       publicPath: process.env.BASE_URL,
diff --git a/src/components/groep/Algemeen.vue b/src/components/groep/Algemeen.vue
index 78ca0f7..adbc085 100644
--- a/src/components/groep/Algemeen.vue
+++ b/src/components/groep/Algemeen.vue
@@ -51,6 +51,7 @@
             label="Leiding verbeterd"
             multiple="false"
             @check="check('leidingVerbeterd')"
+            :beschrijving="leidingVerbeterd"
             :disabled="!kanGroepWijzigen || facturatieLeidingCheck"
           ></BaseCheckbox>
           <BaseCheckbox
@@ -60,6 +61,7 @@
             label="Leden verbeterd"
             multiple="false"
             @check="check('ledenverbeterd')"
+            :beschrijving="ledenVerbeterd"
             :disabled="!kanGroepWijzigen || facturatieLedenCheck"
           ></BaseCheckbox>
           <BaseCheckbox
@@ -69,11 +71,13 @@
             multiple="false"
             :disabled="!kanGroepWijzigen"
           ></BaseCheckbox>
-          <div id="helpBlock" class="help-block word-break mt-2" v-show="groep['publiek-inschrijven']">
+          <div id="helpBlock" class="help-block mt-2" v-show="groep['publiek-inschrijven']">
+            <div class="cut-off-text">
             <p>
               Link naar jouw inschrijvingsformulier:<br>
               <a :href="formulierUrl" target="_blank" class="icon-small clean-link color-dark-green">{{formulierUrl}}</a>
             </p>
+            </div>
             <p>
               Inschrijvingsformulier insluiten in jouw website:<br>
               <code>
@@ -95,6 +99,7 @@ import BaseCheckbox from "@/components/input/BaseCheckbox";
 import DatePicker from "@/components/input/DatePicker";
 import BaseTextArea from "@/components/input/BaseTextArea";
 import rechtenService from "@/services/rechten/rechtenService";
+import DateUtil from "@/services/dates/DateUtil";
 
 export default {
   name: "Algemeen",
@@ -121,8 +126,19 @@ export default {
       return rechtenService.kanWijzigen(this.groep);
     },
     formulierUrl() {
-      console.log(window.location)
       return this.baseUrl + this.groep.groepsnummer;
+    },
+    leidingVerbeterd() {
+      if (this.facturatieLeidingCheck) {
+        return "Aangevinkt op " + DateUtil.formatteerDatum(this.groep.facturatieLeiding)
+      }
+      return "";
+    },
+    ledenVerbeterd() {
+      if (this.facturatieLedenCheck){
+        return "Aangevinkt op " + DateUtil.formatteerDatum(this.groep.facturatieLeden)
+      }
+      return "";
     }
   },
 
diff --git a/src/components/lid/IngelogdLid.vue b/src/components/lid/IngelogdLid.vue
index 2dd6d8a..a9bae73 100644
--- a/src/components/lid/IngelogdLid.vue
+++ b/src/components/lid/IngelogdLid.vue
@@ -1,31 +1,23 @@
 <template>
   <div class="hidden lg:block">
-    <div class="container-fluid md:w-90 position-absolute mt-4 z999">
-      <div class="d-flex justify-content-md-end">
+    <div class="container-fluid md:w-90 position-absolute mt-4 ">
+      <div class="d-flex justify-content-md-end z999">
         <label class="h-1rem float-start sm:ml-4 h-2rem clickable"
                @click="gaNaarProfiel">{{ getVolledigeNaam }}</label>
         <div class="ml-4 clickable" @click="gaNaarAccount" v-show="false">
           <i class="fas fa-user-circle menu-icon" title="Account"/>
         </div>
-        <div class="ml-5 clickable" @click="logout">
+        <div class="ml-5 clickable mr--23px" @click="logout">
           <i class="fas fa-sign-out-alt menu-icon " title="Uitloggen"/>
         </div>
       </div>
-      <div class="d-flex justify-content-md-end">
-        <lid-zoek-auto-complete/>
-      </div>
     </div>
   </div>
 </template>
 
 <script>
-import LidZoekAutoComplete from "@/components/global/LidZoekAutoComplete";
-
 export default {
   name: "IngelogdLid",
-  components: {
-    LidZoekAutoComplete
-  },
   data() {
     return {
       ingelogdLid: null
diff --git a/src/components/lid/LidBovenBalk.vue b/src/components/lid/LidBovenBalk.vue
index 13f3411..d24ea09 100644
--- a/src/components/lid/LidBovenBalk.vue
+++ b/src/components/lid/LidBovenBalk.vue
@@ -1,30 +1,30 @@
 <template>
-  <div class="bovenbalk mb-4">
+  <div class="bovenbalk mb-8 mt--1">
     <div class="d-flex justify-content-between">
-      <div>
-        <h4 class="mt-2 lg:ml-4">{{ volledigeNaam }}</h4>
-      </div>
-      <div class="d-flex justify-content-end">
-        <div class="d-flex justify-content-evenly mr-7 mt-4">
-          <opslaan class="ml-2" :disabled="!changes" @click="opslaan"></opslaan>
-        </div>
-        <div class="top-menu d-flex justify-content-end align-content-center">
-          <Button type="button" icon="pi pi-bars" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu"
-                  class="sub-menu-button menu-button p-button-rounded"/>
-          <Menu id="overlay_menu" ref="menu" :model="filteredMenuItems" :popup="true" class="sub-menu-items p-4">
-            <template #item="{item}">
-              <div @click="gaNaar(item.link)">
-                <i :class="item.icon" class="lid-menu-item mr-2"><label
-                  class="clickable lid-menu-item font ml-2">{{ item.label }}</label></i>
-              </div>
-            </template>
-          </Menu>
-        </div>
+      <div class="lg:ml-4">
+        <h4 class="mt-4 sm:ml-4">{{ volledigeNaam }}</h4>
       </div>
     </div>
-    <div class="d-flex justify-content-start mt--1">
+    <div class="d-flex justify-content-start mt--05">
       <h6 class="mt-2 lg:ml-4">Lidnr.: {{ lid.verbondsgegevens.lidnummer }}</h6>
     </div>
+    <div class="d-flex justify-content-end">
+      <div class="d-flex justify-content-evenly mr-7">
+        <opslaan class="ml-2" :disabled="!changes" @click="opslaan"></opslaan>
+      </div>
+      <div class="top-menu d-flex justify-content-end align-content-center mt--15">
+        <Button type="button" icon="pi pi-bars" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu"
+                class="sub-menu-button menu-button p-button-rounded"/>
+        <Menu id="overlay_menu" ref="menu" :model="filteredMenuItems" :popup="true" class="sub-menu-items p-4">
+          <template #item="{item}">
+            <div @click="gaNaar(item.link)">
+              <i :class="item.icon" class="lid-menu-item mr-2"><label
+                class="clickable lid-menu-item font ml-2">{{ item.label }}</label></i>
+            </div>
+          </template>
+        </Menu>
+      </div>
+    </div>
   </div>
 </template>
 
diff --git a/src/components/lid/Persoonlijk.vue b/src/components/lid/Persoonlijk.vue
index f63baef..342f23c 100644
--- a/src/components/lid/Persoonlijk.vue
+++ b/src/components/lid/Persoonlijk.vue
@@ -43,6 +43,7 @@
             label="Geslacht"
           />
           <BaseCheckbox
+            :disabled="!hasPermission"
             v-if="!nieuwLid"
             type="checkbox"
             v-model="lid.vgagegevens.beperking"
@@ -52,6 +53,7 @@
           ></BaseCheckbox>
           <BaseCheckbox
             v-if="!nieuwLid"
+            :disabled="!hasPermission"
             type="checkbox"
             v-model="lid.vgagegevens.verminderdlidgeld"
             label="Verminderd lidgeld"
@@ -154,12 +156,20 @@ export default {
         {label: "Vrouwelijk", value: "vrouw"},
         {label: "Andere", value: "andere"},
       ],
-      omschrijving: "We willen ieder kind de kans geven om lid te worden van scouting. " +
+      omschrijvingNieuwLid: "We willen ieder kind de kans geven om lid te worden van scouting. " +
         "Geld mag daarbij geen rol spelen. Voor wie het financieel wat moeilijker is, bestaat het verminderd lidgeld. " +
         "Je betaalt dan 10 euro lidgeld (en mogelijk een extra bijdrage voor de groep zelf). " +
         "Je kan het vakje hierboven aanvinken of hierover iemand van de leiding aanspreken. " +
         "We verzekeren jullie dat dit alles in het volste vertrouwen zal gebeuren. Voor meer info " +
-        "<a href='https://www.scoutsengidsenvlaanderen.be/scouting-op-maat' target='_blank'>klik hier</a>."
+        "<a href='https://www.scoutsengidsenvlaanderen.be/scouting-op-maat' target='_blank'>klik hier</a>.",
+
+      omschrijvingBestaandLid: "Leden zijn niet alleen maar lid van Scouts en Gidsen Vlaanderen vzw, maar gaan ook mee op weekend, kamp, ...<br> " +
+        " Naast verminderd lidgeld, kan je daarom als groep ook beroep doen op 'Fonds op Maat': " +
+        " hiermee kan je de deelnameprijs aan activiteiten voor leden en hun gezin verlagen.<br> " +
+        " Als je <a href=\"https://www.scoutsengidsenvlaanderen.be/aanvraagformulier-voor-fonds-op-maat\" target=\"_blank\">dit formulier</a> " +
+        " invult (let op: je moet ingelogd zijn op de website), " +
+        " komt Scouts en Gidsen Vlaanderen vzw voor 1/3 tussen in de deelnameprijs.<br> " +
+        " Het formulier vul je als (groeps)leiding in, de ouders hoeven niets te doen."
     };
   },
   methods: {
@@ -174,6 +184,9 @@ export default {
       } else {
         return this.nieuwLid;
       }
+    },
+    omschrijving() {
+      return this.inschrijving ? this.omschrijvingNieuwLid : this.omschrijvingBestaandLid;
     }
   },
   props: {
@@ -186,7 +199,11 @@ export default {
     nieuwLid: {
       type: Boolean,
       default: false
-    }
+    },
+    inschrijving: {
+      type: Boolean,
+      default: false
+    },
   },
   // watch: {
   //   "lid.vgagegevens": {
@@ -207,8 +224,7 @@ export default {
         email: "",
         gebruikersnaam: "",
         links: [],
-        persoonsgegevens: {
-        },
+        persoonsgegevens: {},
         vgagegevens: {
           voornaam: '',
           achternaam: '',
diff --git a/src/views/Aanvragen.vue b/src/views/Aanvragen.vue
index f01dfde..e96350e 100644
--- a/src/views/Aanvragen.vue
+++ b/src/views/Aanvragen.vue
@@ -4,7 +4,7 @@
     <confirmDialog/>
     <toast position="bottom-right"/>
     <ingelogd-lid></ingelogd-lid>
-    <div class="container-fluid md:w-90">
+    <div class="container-fluid md:w-90 ">
       <div class="hidden lg:block md:ml-8">
         <Breadcrumb :home="home" :model="breadcrumbItems" class="ml-4 mt-4 md:ml-6"/>
       </div>
@@ -16,9 +16,12 @@
       <confirm-mailing :dialog-visible="confirmMailingDialog" :header="confirmMailingHeader"
                        :message="confirmMailingMessage" @bevestigMail="bevestigMail"
                        @bevestigGeenMail="bevestigGeenMail"></confirm-mailing>
-      <div class="ml-6">
+      <div class="lg:ml-6 md:mt-10 lg:mt-8">
+        <div class="d-flex justify-content-end">
+          <lid-zoek-auto-complete></lid-zoek-auto-complete>
+        </div>
         <data-table :value="aanvragen" v-model:expandedRows="expandedRows" dataKey="id" responsiveLayout="scroll"
-                    class="mt-4 ml-8">
+                    class="lg:ml-8">
           <template #header>
             <div class="table-header-container d-flex">
               <Button v-show="!openDetails" icon="pi pi-plus" label="Alles openvouwen" @click="expandAll"
@@ -85,10 +88,12 @@ import Loader from "@/components/global/Loader";
 import Breadcrumb from "primevue/breadcrumb";
 import SideMenu from "@/components/global/Menu";
 import IngelogdLid from "@/components/lid/IngelogdLid";
+import LidZoekAutoComplete from "@/components/global/LidZoekAutoComplete";
 
 export default {
   name: "Aanvragen",
   components: {
+    LidZoekAutoComplete,
     ConfirmMailing,
     Loader,
     Breadcrumb,
diff --git a/src/views/Communicatievoorkeuren.vue b/src/views/Communicatievoorkeuren.vue
index 16d2c35..caba81d 100644
--- a/src/views/Communicatievoorkeuren.vue
+++ b/src/views/Communicatievoorkeuren.vue
@@ -26,7 +26,7 @@
               voorkeuren bij elke lid aangeven.</p>
           </div>
           <div class="col-md-12 d-flex justify-content-end justify-content-md-end">
-            <opslaan @opslaan="opslaan" class="md:mt-4 ml-8" :disabled="!changes"></opslaan>
+            <opslaan @opslaan="opslaan" class="md:mt-4 ml-8 md:mb-4" :disabled="!changes"></opslaan>
           </div>
         </div>
       </div>
@@ -491,4 +491,4 @@ export default {
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 650a5e3..c874b45 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -9,11 +9,11 @@
         <Breadcrumb class="ml-4 mt-4 md:ml-6"/>
       </div>
       <div class="custom-divider"></div>
-      <div class="lg:ml-8 lg:pl-8">
+      <div class="lg:ml-8 lg:pl-8 mt-2">
         <div class="content container lg:ml-8">
           <loader :show-loader="showLoader"></loader>
-          <div class="d-flex lg:mt-8 sm:mt-4 mt-6">
-            <h1 class="welkom-titel text-align-left md:text-center text-sm sm:text-lg md:text-3xl">Welkom {{
+          <div class="d-flex lg:mt-8 sm:mt-4 mt-8">
+            <h1 class="welkom-titel text-align-left md:text-center text-sm sm:text-lg md:text-3xl mt-2">Welkom {{
                 naam
               }}</h1>
           </div>
@@ -33,7 +33,7 @@
               </div>
               <div class="justify-content-start d-flex">
                 <ul style="list-style: none;" class="ml--1">
-                  <li class="text-decoration-none justify-content-start d-flex mb-3"
+                  <li class="text-decoration-none justify-content-start d-flex mb-3 text-align-left"
                       v-for="(item, index) in snelNaarItems" :key="index">
                     <i class="fal fa-arrow-right color-light-green"><a :href="item.url" target="_blank"
                                                                        class="text-decoration-none"><span
diff --git a/src/views/InschrijvingsFormulier.vue b/src/views/InschrijvingsFormulier.vue
index f08aae2..a43ce1b 100644
--- a/src/views/InschrijvingsFormulier.vue
+++ b/src/views/InschrijvingsFormulier.vue
@@ -18,7 +18,7 @@
       <form @submit.prevent="opslaan" autocomplete="off">
         <div class="row lg:ml-8">
           <div class="col-12 col-lg-4">
-            <persoonlijk :model-value="lid" :nieuw-lid="true" ref="pers"></persoonlijk>
+            <persoonlijk :model-value="lid" :nieuw-lid="true" ref="pers" :inschrijving="true"></persoonlijk>
           </div>
           <div class="col-12 col-lg-4">
             <div class="adressen-card mb-4">
diff --git a/src/views/Ledenlijst.vue b/src/views/Ledenlijst.vue
index 26de485..0740e88 100644
--- a/src/views/Ledenlijst.vue
+++ b/src/views/Ledenlijst.vue
@@ -49,6 +49,8 @@
               @colum-click="addSort"
               sort-mode="multiple"
               class="p-datatable-sm mt-4"
+              :scrollable="true"
+              scroll-height="600px"
             >
               <template #header>
                 <div class="top-menu d-flex justify-content-end align-content-center mt--05">
@@ -81,7 +83,7 @@
               <column
                 selectionMode="multiple"
                 :exportable="false"
-                headerStyle="width: 3em"
+                headerStyle="width: 1em"
                 @click="selecteerLid"
               ></column>
               <column
diff --git a/src/views/Lid.vue b/src/views/Lid.vue
index bc64adb..1b07596 100644
--- a/src/views/Lid.vue
+++ b/src/views/Lid.vue
@@ -18,10 +18,13 @@
       <Loader
         :showLoader="laden"
       ></Loader>
-      <lid-boven-balk :lid="lid" :id="id" class="lg:ml-8 mt-8 lg:mt-4" @opslaan="opslaan"
+      <div class="d-flex justify-content-end lg:mt-6 md:mt-10">
+        <lid-zoek-auto-complete></lid-zoek-auto-complete>
+      </div>
+      <lid-boven-balk :lid="lid" :id="id" class="lg:ml-8 lg:mt-4" @opslaan="opslaan"
                       :eigenProfiel="isEigenProfiel" :changes="wijzigingen"
                       @stopAlleFuncties="stopAlleFuncties"></lid-boven-balk>
-      <div class="lg:ml-2">
+      <div class="lg:ml-2 lg:mt-6">
         <form @submit.prevent="opslaan" autocomplete="off">
           <div class="row lg:ml-8">
             <div class="col-12 col-lg-6 col-xl-4">
@@ -73,6 +76,7 @@ import useVuelidate from '@vuelidate/core'
 import SideMenu from "@/components/global/Menu";
 import IngelogdLid from "@/components/lid/IngelogdLid";
 import ConfirmDialog from "primevue/confirmdialog";
+import LidZoekAutoComplete from "@/components/global/LidZoekAutoComplete";
 
 export default {
   name: "Lid",
@@ -89,7 +93,8 @@ export default {
     FunctiesToevoegen,
     SideMenu,
     IngelogdLid,
-    ConfirmDialog
+    ConfirmDialog,
+    LidZoekAutoComplete
   },
   data() {
     return {