Add nami field

app/Member/MemberResource.php

@@ -34,7 +34,6 @@ class MemberResource extends JsonResource
             'email' => $this->email,
             'email_parents' => $this->email_parents,
             'fax' => $this->fax,
-            'nami_id' => $this->nami_id,
             'country_id' => $this->country_id,
             'region_id' => $this->region_id,
             'nationality_id' => $this->nationality_id,
@@ -43,6 +42,7 @@ class MemberResource extends JsonResource
             'letter_address' => $this->letter_address,
             'bill_kind_id' => $this->bill_kind_id,
             'bill_kind_name' => optional($this->billKind)->name,
+            'has_nami' => $this->nami_id !== null,
         ];
     }
 }

resources/css/app.css

@@ -2,3 +2,4 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 @import "base";
+@import "switch";

resources/css/base.css

@@ -84,3 +84,21 @@
 input, select {
     outline: none;
 }
+
+input[type="date"],
+input[type="datetime-local"],
+input[type="time"],
+input[type="month"],
+select,
+input[type="week"] {
+    height: 37px;
+    &::-webkit-inner-spin-button {
+        display: none;
+    }
+}
+
+input[type="date"]::-webkit-inner-spin-button,
+input[type="date"]::-webkit-calendar-picker-indicator {
+    display: none;
+    -webkit-appearance: none;
+}

resources/css/switch.css

@@ -0,0 +1,112 @@
+:root {
+    --margin: 0.2rem;
+    --n-width: 37px;
+    --sm-width: 35px;
+    --sm-margin: 0.2rem;
+    --xs-width: 23px;
+    --xs-margin: 0.2rem;
+}
+
+.field-switch {
+    input:checked + span {
+        transition: background 0.3s;
+    }
+
+    .display {
+        width: calc(var(--n-width) * 2);
+        height: var(--n-width);
+        border-radius: 0.3rem;
+        var {
+            width: calc(var(--n-width) - var(--margin) * 2);
+            height: calc(var(--n-width) - var(--margin) * 2);
+            top: var(--margin);
+            left: var(--margin);
+            transition: left 0.3s;
+        }
+        & > span:nth-of-type(1) {
+            position: absolute;
+            width: calc(var(--n-width) - var(--margin));
+            height: calc(var(--n-width) - var(--margin) * 2);
+            top: var(--margin);
+            left: var(--margin);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        & > span:nth-of-type(2) {
+            position: absolute;
+            width: calc(var(--n-width) - var(--margin));
+            height: calc(var(--n-width) - var(--margin) * 2);
+            top: var(--margin);
+            left: calc(100% - var(--n-width));
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+
+    input:checked + .display var {
+        left: calc(var(--n-width) + var(--margin));
+        transition: left 0.3s;
+    }
+
+    /* --------------------------------- small size ---------------------------------- */
+    .inner-field.h-field-sm {
+        input:checked + .display var {
+            left: calc(var(--sm-width) + var(--sm-margin));
+        }
+
+        .display {
+            width: calc(var(--sm-width) * 2);
+            height: var(--sm-width);
+            var {
+                width: calc(var(--sm-width) - var(--sm-margin) * 2);
+                height: calc(var(--sm-width) - var(--sm-margin) * 2);
+                top: var(--sm-margin);
+                left: var(--sm-margin);
+            }
+            & > span:nth-of-type(1) {
+                width: calc(var(--sm-width) - var(--sm-margin));
+                height: calc(var(--sm-width) - var(--sm-margin) * 2);
+                top: var(--sm-margin);
+                left: var(--sm-margin);
+            }
+            & > span:nth-of-type(2) {
+                width: calc(var(--sm-width) - var(--sm-margin));
+                height: calc(var(--sm-width) - var(--sm-margin) * 2);
+                top: var(--sm-margin);
+                left: calc(100% - var(--sm-width));
+            }
+        }
+    }
+
+    /* ------------------------------ very small size -------------------------------- */
+    .inner-field.h-field-xs {
+        input:checked + .display var {
+            left: calc(var(--xs-width) + var(--xs-margin));
+        }
+
+        .display {
+            width: calc(var(--xs-width) * 2);
+            height: var(--xs-width);
+            var {
+                width: calc(var(--xs-width) - var(--xs-margin) * 2);
+                height: calc(var(--xs-width) - var(--xs-margin) * 2);
+                top: var(--xs-margin);
+                left: var(--xs-margin);
+            }
+            & > span:nth-of-type(1) {
+                width: calc(var(--xs-width) - var(--xs-margin));
+                height: calc(var(--xs-width) - var(--xs-margin) * 2);
+                top: var(--xs-margin);
+                left: var(--xs-margin);
+            }
+            & > span:nth-of-type(2) {
+                width: calc(var(--xs-width) - var(--xs-margin));
+                height: calc(var(--xs-width) - var(--xs-margin) * 2);
+                top: var(--xs-margin);
+                left: calc(100% - var(--xs-width));
+            }
+        }
+    }
+}

resources/js/app.js

@@ -6,6 +6,7 @@ window.io = require('socket.io-client');
 import Sprite from './components/Sprite.js';
 
 import FText from './components/FText.vue';
+import FSwitch from './components/FSwitch.vue';
 import FSelect from './components/FSelect.vue';
 import FTextarea from './components/FTextarea.vue';
 import Pages from './components/Pages.vue';
@@ -14,6 +15,7 @@ import App from './layouts/App.vue';
 
 Vue.use(plugin)
 Vue.component('f-text', FText);
+Vue.component('f-switch', FSwitch);
 Vue.component('f-select', FSelect);
 Vue.component('f-textarea', FTextarea);
 Vue.component('sprite', Sprite);

resources/js/components/FSelect.vue

@@ -1,7 +1,7 @@
 <template>
     <label class="flex flex-col relative" :for="id" :class="{['h-field-'+size]: inset === true}">
         <div class="relative h-full flex flex-col">
-            <span v-if="label && !inset" class="font-semibold relative z-10 text-gray-400" :class="{
+            <span v-if="label && !inset" class="leading-none font-semibold relative z-10 text-gray-400" :class="{
                 'text-xs': size == 'sm',
                 'text-sm': size === null
             }">{{ label }}<span v-show="required" class="text-red-300">&nbsp;*</span></span>
@@ -9,9 +9,9 @@
                 'text-xs': size == 'sm',
                 'text-sm': size === null
             }" v-text="label"></span>
-            <div class="relative h-full" :class="{['h-field-'+size]: inset === false}">
+            <div class="relative h-full mt-1" :class="{['h-field-'+size]: inset === false}">
                 <select :value="value" @change="trigger"
-                    class="border-gray-600 border-solid bg-gray-700 w-full appearance-none outline-none h-full"
+                    class="border-gray-600 border-solid bg-gray-700 w-full appearance-none outline-none"
                     :class="{
                         'rounded-lg text-sm border-2 p-2 text-gray-300': size === null,
                         'rounded-lg py-2 px-2 text-xs border-2 text-gray-800': size == 'sm'

resources/js/components/FSwitch.vue

@@ -1,19 +1,15 @@
 <template>
     <label class="flex flex-col relative field-switch cursor-pointer" :for="id" :class="{[`size-${outerSize}`]: true}">
-        <span v-if="label && !inset" class="font-semibold leading-none text-gray-700" :class="{
+        <span v-if="label" class="font-semibold leading-none text-gray-400" :class="{
             'text-xs': size == 'sm',
             'text-sm': size === null
         }">{{ label }}</span>
-        <span v-if="label && inset" class="z-10 absolute top-0 left-0 -mt-2 px-1 ml-3 inset-bg font-semibold text-gray-700" :class="{
+        <div class="relative inner-field mt-1" :class="`h-field-${fieldSize}`">
-            'text-xs': size == 'sm',
-            'text-sm': size === null
-        }">{{ label }}</span>
-        <div class="relative inner-field" :class="`h-field-${fieldSize}`">
             <input :id="id" type="checkbox" v-model="v" :disabled="disabled" class="invisible absolute" />
-            <span class="relative cursor-pointer flex flex-grow display" :class="{'bg-primary': v === true, 'bg-gray-400': v === false}">
+            <span class="relative cursor-pointer flex flex-grow display" :class="{'bg-primary': v === true, 'bg-gray-700': v === false}">
-                <span><sprite class="relative text-white flex-none" :class="{'w-2 h-2': size === 'sm' || size == 'xs', 'w-6 h-6': size === null}" src="check"></sprite></span>
+                <span><sprite class="relative text-gray-400 flex-none" :class="{'w-2 h-2': size === 'sm' || size == 'xs', 'w-4 h-4': size === null}" src="check"></sprite></span>
-                <span><sprite class="relative text-white flex-none" :class="{'w-2 h-2': size === 'sm' || size == 'xs', 'w-6 h-6': size === null}" src="close"></sprite></span>
+                <span><sprite class="relative text-gray-400 flex-none" :class="{'w-2 h-2': size === 'sm' || size == 'xs', 'w-4 h-4': size === null}" src="close"></sprite></span>
-                <var class="absolute overlay bg-white rounded top-0"></var>
+                <var class="absolute overlay bg-gray-400 rounded top-0"></var>
             </span>
         </div>
     </label>
@@ -102,118 +98,3 @@ export default {
     }
 };
 </script>
-
-<style lang="css">
-:root {
-    --margin: 0.2rem;
-    --n-width: 2.5rem;
-    --sm-width: 35px;
-    --sm-margin: 0.2rem;
-    --xs-width: 23px;
-    --xs-margin: 0.2rem;
-}
-
-.field-switch {
-    input:checked + span {
-        transition: background 0.3s;
-    }
-
-    .display {
-        width: calc(var(--n-width) * 2);
-        height: var(--n-width);
-        border-radius: 0.3rem;
-        var {
-            width: calc(var(--n-width) - var(--margin) * 2);
-            height: calc(var(--n-width) - var(--margin) * 2);
-            top: var(--margin);
-            left: var(--margin);
-            transition: left 0.3s;
-        }
-        & > span:nth-of-type(1) {
-            position: absolute;
-            width: calc(var(--n-width) - var(--margin));
-            height: calc(var(--n-width) - var(--margin) * 2);
-            top: var(--margin);
-            left: var(--margin);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-        & > span:nth-of-type(2) {
-            position: absolute;
-            width: calc(var(--n-width) - var(--margin));
-            height: calc(var(--n-width) - var(--margin) * 2);
-            top: var(--margin);
-            left: calc(100% - var(--n-width));
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-    }
-
-    input:checked + .display var {
-        left: calc(var(--n-width) + var(--margin));
-        transition: left 0.3s;
-    }
-
-    /* --------------------------------- small size ---------------------------------- */
-    .inner-field.h-field-sm {
-        input:checked + .display var {
-            left: calc(var(--sm-width) + var(--sm-margin));
-        }
-
-        .display {
-            width: calc(var(--sm-width) * 2);
-            height: var(--sm-width);
-            var {
-                width: calc(var(--sm-width) - var(--sm-margin) * 2);
-                height: calc(var(--sm-width) - var(--sm-margin) * 2);
-                top: var(--sm-margin);
-                left: var(--sm-margin);
-            }
-            & > span:nth-of-type(1) {
-                width: calc(var(--sm-width) - var(--sm-margin));
-                height: calc(var(--sm-width) - var(--sm-margin) * 2);
-                top: var(--sm-margin);
-                left: var(--sm-margin);
-            }
-            & > span:nth-of-type(2) {
-                width: calc(var(--sm-width) - var(--sm-margin));
-                height: calc(var(--sm-width) - var(--sm-margin) * 2);
-                top: var(--sm-margin);
-                left: calc(100% - var(--sm-width));
-            }
-        }
-    }
-
-    /* ------------------------------ very small size -------------------------------- */
-    .inner-field.h-field-xs {
-        input:checked + .display var {
-            left: calc(var(--xs-width) + var(--xs-margin));
-        }
-
-        .display {
-            width: calc(var(--xs-width) * 2);
-            height: var(--xs-width);
-            var {
-                width: calc(var(--xs-width) - var(--xs-margin) * 2);
-                height: calc(var(--xs-width) - var(--xs-margin) * 2);
-                top: var(--xs-margin);
-                left: var(--xs-margin);
-            }
-            & > span:nth-of-type(1) {
-                width: calc(var(--xs-width) - var(--xs-margin));
-                height: calc(var(--xs-width) - var(--xs-margin) * 2);
-                top: var(--xs-margin);
-                left: var(--xs-margin);
-            }
-            & > span:nth-of-type(2) {
-                width: calc(var(--xs-width) - var(--xs-margin));
-                height: calc(var(--xs-width) - var(--xs-margin) * 2);
-                top: var(--xs-margin);
-                left: calc(100% - var(--xs-width));
-            }
-        }
-    }
-}
-</style>

resources/js/components/FText.vue

@@ -1,7 +1,7 @@
 <template>
     <label class="flex flex-col relative" :for="id" :class="{['h-field-'+size]: inset === true}">
         <div class="relative h-full flex flex-col">
-            <span v-if="label && !inset" class="font-semibold relative z-10 text-gray-400" :class="{
+            <span v-if="label && !inset" class="font-semibold leading-none relative z-10 text-gray-400" :class="{
                 'text-xs': size == 'sm',
                 'text-sm': size === null
             }">{{ label }}<span v-show="required" class="text-red-300">&nbsp;*</span></span>
@@ -9,7 +9,7 @@
                 'text-xs': size == 'sm',
                 'text-sm': size === null
             }" v-text="label"></span>
-            <div class="relative h-full" :class="{['h-field-'+size]: inset === false}">
+            <div class="relative h-full mt-1" :class="{['h-field-'+size]: inset === false}">
                 <input :type="type" :name="name" :value="transformedValue" @input="onInput" @change="onChange" :disabled="disabled" :placeholder="placeholder"
                     @focus="onFocus" @blur="onBlur"
                     class="border-gray-600 border-solid bg-gray-700 w-full appearance-none outline-none h-full"

resources/js/views/member/Edit.vue

@@ -75,6 +75,9 @@
                 <div>
                     <f-text id="other_country" v-model="inner.other_country" label="Andere Staatsangehörigkeit"></f-text>
                 </div>
+                <div>
+                    <f-switch id="has_nami" v-model="inner.has_nami" label="In Nami eintragen"></f-switch>
+                </div>
                 <div>
                     <f-text type="date" id="joined_at" v-model="inner.joined_at" label="Eintrittsdatum"></f-text>
                 </div>

resources/js/views/member/Index.vue

@@ -24,7 +24,7 @@
                     <v-bool v-model="member.send_newspaper"></v-bool>
                 </div>
                 <div class="py-1 px-6">
-                    <v-bool v-model="member.nami_id !== null"></v-bool>
+                    <v-bool v-model="member.has_nami"></v-bool>
                 </div>
                 <div class="py-1 px-6">
                     <div class="py-1 rounded-full flex text-xs items-center justify-center leading-none bg-primary-900" v-text="member.bill_kind_name" v-if="member.bill_kind_name"></div>

webpack.mix.js

@@ -18,8 +18,8 @@ mix.js('resources/js/app.js', 'public/js')
 .vue({ version: 2 })
 .postCss('resources/css/app.css', 'public/css', [
     atImport(),
-    tailwindcss('./tailwind.config.js'),
     nested(),
+    tailwindcss('./tailwind.config.js'),
 ])
 .copy('resources/img', 'public/img')
 .sourceMaps();