From 6ee6de5dfdf59aeed6f36d934a70d0e36de894d0 Mon Sep 17 00:00:00 2001
From: Romulus21 <romain@delanoe.me>
Date: Sat, 9 May 2020 10:23:26 +0200
Subject: [PATCH] add CheckBoxField

---
 resources/js/components/CheckBoxField.vue     | 43 +++++++++++++++++++
 resources/js/views/CssTesteur.vue             | 33 +++++++++++++-
 resources/js/views/ToDoLists/ToDo.vue         | 17 ++++++--
 .../js/views/ToDoLists/ToDoListIndex.vue      |  2 +-
 resources/sass/components/_btn.scss           |  4 +-
 5 files changed, 92 insertions(+), 7 deletions(-)
 create mode 100644 resources/js/components/CheckBoxField.vue

diff --git a/resources/js/components/CheckBoxField.vue b/resources/js/components/CheckBoxField.vue
new file mode 100644
index 0000000..d33ab03
--- /dev/null
+++ b/resources/js/components/CheckBoxField.vue
@@ -0,0 +1,43 @@
+<template>
+    <label class="custom-label flex">
+        <div :class="'bg-white shadow w-6 h-6 p-1 flex justify-center items-center mr-2' + classes">
+            <input type="checkbox" class="hidden" :checked="checkIt" @click="checkThis">
+            <div class="hidden check rounded-sm w-4 h-4 bg-gray-700 pointer-events-none"></div>
+        </div>
+        <span class="select-none ml-1">{{ label }}</span>
+    </label>
+</template>
+
+<script>
+export default {
+    name: 'CheckBoxField',
+    props: {
+        checkIt: {
+            type: Boolean,
+        },
+        classes: String,
+        label: String,
+        required: {
+            type: Boolean,
+            default: false
+        },
+    },
+    data: function () {
+        return {
+            check: this.checkIt,
+        }
+    },
+    methods: {
+        checkThis() {
+            this.check = !this.check
+            this.$emit('update:field', this.check)
+        }
+    }
+}
+</script>
+
+<style scoped>
+    .custom-label input:checked + .check {
+        display: block !important;
+    }
+</style>
diff --git a/resources/js/views/CssTesteur.vue b/resources/js/views/CssTesteur.vue
index a7aa799..0338e6e 100644
--- a/resources/js/views/CssTesteur.vue
+++ b/resources/js/views/CssTesteur.vue
@@ -33,7 +33,28 @@
             <label class="mb-1">Test label</label>
             <input type="text" placeholder="Test placeholder" class="mb-1">
             <input type="number" class="mb-1">
-            <input type="checkbox" class="mb-1">
+            <div>
+                <input type="checkbox" class="mb-1">
+                <label>Check me !</label>
+            </div>
+            <div>
+                <label class="custom-label flex">
+                    <div class="bg-white shadow w-6 h-6 p-1 flex justify-center items-center mr-2">
+                        <input type="checkbox" class="hidden" checked>
+                        <div class="hidden check rounded-sm w-4 h-4 bg-gray-700 pointer-events-none"></div>
+                    </div>
+                    <span class="select-none"> This is a sample checkbox. All the text will toggle the state</span>
+                </label>
+            </div>
+            <div>
+                <label class="custom-label flex">
+                    <div class="bg-white shadow w-6 h-6 p-1 flex justify-center items-center mr-2">
+                        <input type="checkbox" class="hidden" checked>
+                        <svg class="hidden w-4 h-4 text-green-600 pointer-events-none" viewBox="0 0 172 172"><g fill="none" stroke-width="none" stroke-miterlimit="10" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode:normal"><path d="M0 172V0h172v172z"/><path d="M145.433 37.933L64.5 118.8658 33.7337 88.0996l-10.134 10.1341L64.5 139.1341l91.067-91.067z" fill="currentColor" stroke-width="1"/></g></svg>
+                    </div>
+                    <span class="select-none"> This is a sample checkbox. All the text will toggle the state</span>
+                </label>
+            </div>
             <select class="mb-1">
                 <option>test 1</option>
                 <option>test 2</option>
@@ -50,3 +71,13 @@ export default {
     name: 'CssTesteur'
 }
 </script>
+
+<style>
+    .custom-label input:checked + .check {
+        display: block !important;
+    }
+
+    .custom-label input:checked + svg {
+        display: block !important;
+    }
+</style>
diff --git a/resources/js/views/ToDoLists/ToDo.vue b/resources/js/views/ToDoLists/ToDo.vue
index f55ad99..160bede 100644
--- a/resources/js/views/ToDoLists/ToDo.vue
+++ b/resources/js/views/ToDoLists/ToDo.vue
@@ -1,6 +1,8 @@
 <template>
     <div v-if="!edit" class="flex items-center flex-1 todo">
-        <input type="checkbox" :checked="toDo.data.attributes.data.checked_at" @click="checkedIt" class="block mr-1">
+        <CheckBoxField :check-it="!!(checked)"
+                       @update:field="checked = $event"
+                       class="block mr-1" />
         <span v-bind:class="{ 'line-through' : toDo.data.attributes.data.checked_at }" class="border border-transparent flex-1 pl-1">{{ toDo.data.attributes.data.name }}</span>
         <span @click="edit = !edit" >
             <svg-vue icon="edit" class="edit-icon w-4 block cursor-pointer mx-2" />
@@ -19,8 +21,13 @@
 </template>
 
 <script>
+import CheckBoxField from '../../components/CheckBoxField'
+
 export default {
     name: 'ToDo',
+    components: {
+        CheckBoxField
+    },
     props: {
         toDo: {
             type: Object,
@@ -34,6 +41,7 @@ export default {
     data () {
         return {
             edit: false,
+            checked: !!(this.toDo.data.attributes.data.checked_at),
         }
     },
     methods: {
@@ -48,17 +56,20 @@ export default {
                     console.log('Internal Error, Unable to delete list.' + errorRes)
                 })
         },
-        checkedIt: function () {
+    },
+    watch: {
+        checked: function (val) {
             // eslint-disable-next-line no-undef
             axios.patch('/api/to-do-lists/' + this.idList + '/to-do/' + this.toDo.data.to_do_id + '/check')
                 .then(res => {
                     // this.toDoList.data.attributes.data.to_dos.data[position].data.attributes.data.checked_at = res.data.data.attributes.data.checked_at
                     this.toDo.data.attributes.data.checked_at = res.data.data.attributes.data.checked_at
+                    this.checked = val
                 })
                 .catch(errorRes => {
                     console.log('Internal Error, Unable to delete contact.' + errorRes)
                 })
-        },
+        }
     }
 }
 </script>
diff --git a/resources/js/views/ToDoLists/ToDoListIndex.vue b/resources/js/views/ToDoLists/ToDoListIndex.vue
index a385e92..05508e8 100644
--- a/resources/js/views/ToDoLists/ToDoListIndex.vue
+++ b/resources/js/views/ToDoLists/ToDoListIndex.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="p-2">
+    <div class="p-4">
         <div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
         <div v-if="modal" class="modal px-2">
             <p class="m-2 text-center">Add a new to-do list ?</p>
diff --git a/resources/sass/components/_btn.scss b/resources/sass/components/_btn.scss
index e293ae6..9aaab6b 100644
--- a/resources/sass/components/_btn.scss
+++ b/resources/sass/components/_btn.scss
@@ -1,7 +1,7 @@
 // Button
 
 .btn {
-    @apply border border-transparent bg-gray-600 text-white font-semibold py-2 px-4 shadow-sm rounded cursor-pointer;
+    @apply border border-transparent inline-block bg-gray-600 text-white font-semibold whitespace-no-wrap py-2 px-4 shadow-sm rounded cursor-pointer;
 
     &:hover {
         @apply text-white bg-gray-800 transition-all duration-300;
@@ -12,7 +12,7 @@
     }
 
     &.svg {
-        @apply px-2;
+        @apply px-2 inline;
 
         svg {
             @apply mr-0;