Add Colors to Index Field

davidpiesse · Aug 9, 2019 · 7f04bc1 · 7f04bc1
1 parent 6cee92e
commit 7f04bc1
Show file tree

Hide file tree

Showing 3 changed files with 23,163 additions and 5 deletions.
diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/resources/js/components/IndexField.vue b/resources/js/components/IndexField.vue
@@ -1,18 +1,53 @@
 <template>
     <div class="text-center">
-        <span
+        <div v-if="editableIndex">
+            <toggle-button
+                    :id="sanitizedName"
+                    :name="sanitizedName"
+                    :value="value"
+                    @change="toggle"
+                    :labels="labelConfig"
+                    :width="width"
+                    :height="height"
+                    :sync="true"
+                    :color="colors"
+                    :speed="speed"
+                />
+        </div>
+        <span v-else
             class="inline-block rounded-full w-4 h-4"
-            :class="{'bg-success': field.value, 'bg-danger': !field.value}" />
-        <span class="pl-2" v-if="label != null">{{ label }}</span>
+            :style="bgColor" 
+            />
+        <span class="pl-2" v-if="label != null" >{{ label }}</span>
     </div>
 </template>
 
 <script>
 export default {
     props: ['resourceName', 'field'],
 
-    computed: {
+    data: () => ({
+        value: false,
+    }),
+
+    mounted() {
+        this.value = this.field.value || false
 
+        this.field.fill = formData => {
+            formData.append(this.field.attribute, this.trueValue)
+        }
+    },
+
+    methods: {
+        toggle() {
+            this.value = !this.value
+        },
+    },
+
+    computed: {
+        editableIndex(){
+            return this.field.editable_index != undefined
+        },
         trueLabel(){
             return (this.field.true_label != undefined) ? this.field.true_label : null
         },
@@ -28,6 +63,26 @@ export default {
                 return null;
             }
         },
+
+        trueColor(){
+            return (this.field.true_color != undefined) ? this.field.true_color : 'var(--success)'
+        },
+
+        falseColor(){
+            return (this.field.false_color != undefined) ? this.field.false_color : 'var(--danger)'
+        },
+
+        bgColor(){
+            return  'background-color:' + (this.field.value == true ? this.trueColor : this.falseColor) + ';'
+        },
+
+        colors(){
+            return {
+                checked: this.trueColor,
+                unchecked: this.falseColor,
+                disabled: '#CCCCCC'
+            }
+        },
     },
 }
 </script>
diff --git a/src/Toggle.php b/src/Toggle.php
@@ -47,6 +47,12 @@ public function hideLabelOnIndex(){
         ]);
     }
 
+    public function editableIndex(){
+        return $this->withMeta([
+            'editable_index' => true,
+        ]);
+    }
+
     public function width($width){
         return $this->withMeta([
             'width' => $width,
@@ -72,6 +78,13 @@ public function falseColor($colour){
         ]);
     }
 
+    //TODO
+    // public function textColor($colour){
+    //     return $this->withMeta([
+    //         'text_color' => $colour,
+    //     ]);
+    // }
+
     public function speed($ms){
         return $this->withMeta([
             'speed' => $ms,