From a0b3bad036a646bd3adbcfdbed63894e5d614d18 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Sun, 4 Jul 2021 18:20:09 +0200
Subject: [PATCH] merge tags

---
 resources/css/app.css               |  1 +
 resources/css/bool.css              | 26 ++++++++++++++++++++++++++
 resources/js/components/VBool.vue   |  5 +++--
 resources/js/views/member/Index.vue | 16 ++++++----------
 4 files changed, 36 insertions(+), 12 deletions(-)
 create mode 100644 resources/css/bool.css

diff --git a/resources/css/app.css b/resources/css/app.css
index 3cdef5ea..b549e5dd 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -7,3 +7,4 @@
 @import "buttons";
 @import "table";
 @import "sidebar";
+@import "bool";
diff --git a/resources/css/bool.css b/resources/css/bool.css
new file mode 100644
index 00000000..0ca6b414
--- /dev/null
+++ b/resources/css/bool.css
@@ -0,0 +1,26 @@
+.bool {
+    @apply rounded-full text-xs w-5 h-5 flex items-center justify-center leading-none;
+    &.enabled {
+        @apply bg-green-800 text-red-100;
+    }
+    &.disabled {
+        @apply bg-red-800 text-green-100;
+    }
+    svg {
+        @apply w-2 h-2;
+    }
+}
+
+
+.bool-row {
+    @apply flex;
+    .bool {
+        @apply rounded-none;
+        &:last-child {
+            @apply rounded-r-full;
+        }
+        &:first-child {
+            @apply rounded-l-full;
+        }
+    }
+}
diff --git a/resources/js/components/VBool.vue b/resources/js/components/VBool.vue
index 1d8d1365..ad684877 100644
--- a/resources/js/components/VBool.vue
+++ b/resources/js/components/VBool.vue
@@ -1,6 +1,7 @@
 <template>
-    <div class="rounded-full w-4 h-4 flex items-center justify-center leading-none" :class="{'bg-green-800': value, 'bg-red-800': !value}">
-        <sprite :class="{'text-green-100': value, 'text-red-100': !value}" class="w-2 h-2" :src="value ? 'check' : 'close'"></sprite>
+    <div class="bool" :class="value ? 'enabled' : 'disabled'">
+        <sprite v-if="!$slots.default" :src="value ? 'check' : 'close'"></sprite>
+        <slot></slot>
     </div>
 </template>
 
diff --git a/resources/js/views/member/Index.vue b/resources/js/views/member/Index.vue
index 54d4f4c1..ef0c2c60 100644
--- a/resources/js/views/member/Index.vue
+++ b/resources/js/views/member/Index.vue
@@ -8,9 +8,7 @@
                 <div>Straße</div>
                 <div>PLZ</div>
                 <div>Ort</div>
-                <div>Mittendrin</div>
-                <div>Nami</div>
-                <div>Check</div>
+                <div>Tags</div>
                 <div>Rechnung</div>
                 <div>Geburtstag</div>
                 <div>Eintritt</div>
@@ -24,13 +22,11 @@
                 <div v-text="`${member.zip}`"></div>
                 <div v-text="`${member.location}`"></div>
                 <div>
-                    <v-bool v-model="member.send_newspaper"></v-bool>
-                </div>
-                <div>
-                    <v-bool v-model="member.has_nami"></v-bool>
-                </div>
-                <div>
-                    <v-bool v-model="member.is_confirmed"></v-bool>
+                    <div class="bool-row">
+                        <v-bool v-model="member.send_newspaper">M</v-bool>
+                        <v-bool v-model="member.has_nami">N</v-bool>
+                        <v-bool v-model="member.is_confirmed">C</v-bool>
+                    </div>
                 </div>
                 <div>
                     <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>