Remove v-if from tabs in member form

app/Member/MemberController.php

@@ -103,7 +103,7 @@ class MemberController extends Controller
             'regions' => Region::where('is_null', false)->pluck('name', 'id'),
             'nationalities' => Nationality::pluck('name', 'id'),
             'confessions' => Confession::where('is_null', false)->pluck('name', 'id'),
-            'subscriptions' => Subscription::pluck('name', 'id'),
+            'subscriptions' => Subscription::select('name', 'id')->get(),
             'data' => new MemberResource($member),
             'mode' => 'edit',
             'conflict' => '1' === $request->query('conflict', '0'),

resources/js/components/FSelect.vue

@@ -8,8 +8,11 @@
             <select :disabled="disabled" :value="value" @change="trigger">
                 <option v-if="placeholder" v-html="placeholder" :value="null"></option>
 
-                <option v-for="option in parsedOptions" :key="option.id"
+                <option
-                    v-html="option.name" :value="option.id"
+                    v-for="option in parsedOptions"
+                    :key="option.id"
+                    v-html="option.name"
+                    :value="option.id"
                 ></option>
             </select>
             <div class="info-wrap">
@@ -34,63 +37,69 @@ export default {
     props: {
         disabled: {
             type: Boolean,
-            default: function() { return false; }
+            default: function () {
+                return false;
+            },
         },
         id: {},
         inset: {
             type: Boolean,
-            default: false
+            default: false,
         },
         size: {
-            default: function() { return 'base'; }
+            default: function () {
+                return 'base';
+            },
         },
         emptyLabel: {
             default: false,
-            type: Boolean
+            type: Boolean,
         },
         value: {
-            default: undefined
+            default: undefined,
         },
         label: {
-            default: null
+            default: null,
         },
         required: {
             type: Boolean,
-            default: false
+            default: false,
         },
         placeholder: {
             default: '--kein--',
-            type: String
+            type: String,
         },
         def: {
             required: false,
             type: Number,
-            default: -1
+            default: -1,
         },
         hint: {},
         options: {
-            default: function() { return []; }
+            default: function () {
-        }
+                return [];
+            },
+        },
     },
     computed: {
         parsedOptions() {
             return Array.isArray(this.options)
                 ? this.options
                 : map(this.options, (value, key) => {
-                    return {'name': value, id: key};
+                      return {name: value, id: key};
-                });
+                  });
-        }
+        },
     },
     methods: {
         trigger(v) {
-            this.$emit('input', isNaN(parseInt(v.target.value))
+            this.$emit(
-                ?  (v.target.value ? v.target.value : null)
+                'input',
-                : parseInt(v.target.value)
+                isNaN(parseInt(v.target.value)) ? (v.target.value ? v.target.value : null) : parseInt(v.target.value)
             );
         },
         clear() {
             this.$emit('input', null);
-        }
+        },
     },
     mounted() {
         if (this.def !== -1 && typeof this.value === 'undefined') {
@@ -101,12 +110,18 @@ export default {
         if (this.placeholder && typeof this.value === 'undefined') {
             this.$emit('input', null);
         }
-    }
+    },
 };
 </script>
 
 <style scope>
 .inset-bg {
-    background: linear-gradient(to bottom, hsl(247.5, 66.7%, 97.6%) 0%, hsl(247.5, 66.7%, 97.6%) 41%, hsl(0deg 0% 100%) 41%, hsl(180deg 0% 100%) 100%);
+    background: linear-gradient(
+        to bottom,
+        hsl(247.5, 66.7%, 97.6%) 0%,
+        hsl(247.5, 66.7%, 97.6%) 41%,
+        hsl(0deg 0% 100%) 41%,
+        hsl(180deg 0% 100%) 100%
+    );
 }
 </style>

resources/js/views/member/VForm.vue

@@ -45,7 +45,7 @@
 
         <!-- ***************************** Hauptbereich ****************************** -->
         <div class="grow">
-            <div class="grid grid-cols-2 gap-3 p-4" v-if="menuTitle == 'Stammdaten'">
+            <div class="grid grid-cols-2 gap-3 p-4" v-show="menuTitle == 'Stammdaten'">
                 <f-select id="gender_id" :options="genders" v-model="inner.gender_id" label="Geschlecht"></f-select>
                 <f-text id="firstname" v-model="inner.firstname" label="Vorname" required></f-text>
                 <f-text id="lastname" v-model="inner.lastname" label="Nachname" required></f-text>
@@ -95,7 +95,7 @@
                     ></f-select>
                 </div>
             </div>
-            <div class="grid grid-cols-2 gap-3 p-4" v-if="menuTitle == 'Kontakt'">
+            <div class="grid grid-cols-2 gap-3 p-4" v-show="menuTitle == 'Kontakt'">
                 <f-text id="main_phone" v-model="inner.main_phone" label="Telefon (Eltern)"></f-text>
                 <f-text id="mobile_phone" v-model="inner.mobile_phone" label="Handy (Eltern)"></f-text>
                 <f-text id="work_phone" v-model="inner.work_phone" label="Tel geschäftlich (Eltern)"></f-text>
@@ -104,7 +104,7 @@
                 <f-text id="email_parents" v-model="inner.email_parents" label="E-Mail eltern"></f-text>
                 <f-text id="fax" v-model="inner.fax" label="Fax"></f-text>
             </div>
-            <div class="grid grid-cols-2 gap-3 p-4" v-if="menuTitle == 'System'">
+            <div class="grid grid-cols-2 gap-3 p-4" v-show="menuTitle == 'System'">
                 <f-select
                     :options="billKinds"
                     id="bill_kind_id"
@@ -112,7 +112,7 @@
                     label="Rechnung versenden über"
                 ></f-select>
             </div>
-            <div class="grid grid-cols-2 gap-3 p-4" v-if="menuTitle == 'Prävention'">
+            <div class="grid grid-cols-2 gap-3 p-4" v-show="menuTitle == 'Prävention'">
                 <div class="grid grid-cols-[max-content_1fr] col-span-2 gap-3">
                     <f-switch id="has_efz" v-model="hasEfz" label="Führungszeugnis eingesehen"></f-switch>
                     <div>
@@ -184,7 +184,7 @@
                     ></f-switch>
                 </div>
             </div>
-            <div class="grid grid-cols-4 gap-3 p-4" v-if="menuTitle == 'Verwaltung'">
+            <div class="grid grid-cols-4 gap-3 p-4" v-show="menuTitle == 'Verwaltung'">
                 <f-switch id="has_nami" v-model="inner.has_nami" label="In Nami eintragen"></f-switch>
                 <f-switch id="send_newspaper" v-model="inner.send_newspaper" label="Mittendrin versenden"></f-switch>
                 <f-text