#1 support buttons coloring

Author: algethamy

README.md

@@ -37,6 +37,7 @@ you can define inside `workflows` element workflow name and it's config as follo
 | from           | Yes        | array: From states                                                                                                     | 
 | to             | Yes        | To state                                                                                                               | 
 | event          | No         | Event class that will be fired after the transition is completed                                                       | 
+| style_classes  | No         | apply your css classes                                                                                                 | 
 | with_reasons   | No         | string: column inside your model will be filled with the transition                                                    | 
 | with_reasons   | No         | array:  will generate a dropdown list from with_reasons.model with `id` as option's value and `label` as option's text | 
 

config/workflow.php

@@ -19,6 +19,7 @@
                     'from'  => ['pending', 'escalated'],
                     'to'    => 'approved',
                     'event' => \App\Events\RequestApproved::class, // fire event
+                    'style_classes' => 'bg-success text-20'
                 ],
                 'Escalate' => [
                     'from'         => ['pending'],
@@ -34,6 +35,7 @@
                             'label' => 'title', // option label
                         ],
                     ],
+                    'style_classes' => 'bg-danger text-20'
                 ],
 
                 'Back to My Employee' => [

details.png

@@ -1,7 +1,7 @@
 <template>
   <div class="flex" v-if="Object.keys(transactions).length > 0">
     <div class="flex-1 m-1" v-for="(showModal, transaction) in transactions">
-      <button class="bg-50 w-full btn m-1 p-2 rounded" @click.prevent="openModal(transaction)">{{transaction}}</button>
+      <button class="bg-50 w-full btn m-1 p-2 rounded" :class="classes(transaction)" @click.prevent="openModal(transaction)">{{transaction}}</button>
       <modal v-if="showModal" @modal-close="close(transaction)">
         <form
             class="bg-white rounded-lg shadow-lg overflow-hidden"
@@ -70,6 +70,10 @@
         this.$emit('close')
       },
 
+      classes(transaction) {
+        return this.field.styles[transaction];
+      },
+
       reasons(transaction) {
         try {
           return this.field.reasons[transaction] || [];

dist/js/tool.js

@@ -32,14 +32,10 @@ public function __construct(string $workflow_name)
 
             $this->fetch_reasons($workflow, $array);
 
-            $transactions = [];
-            foreach ($array as $trans) {
-                $transactions[$trans] = false;
-            }
-
             $this->withMeta([
                 'workflow'     => $workflow_name,
-                'transactions' => $transactions,
+                'transactions' => $this->get_transitions($array),
+                'styles' => $this->get_styles($workflow),
             ]);
 
 
@@ -71,7 +67,7 @@ public function component()
      * @param array $workflow
      * @param array $array
      */
-    protected function fetch_reasons($workflow, array $array)
+    protected function fetchReasons($workflow, array $array)
     {
         collect($workflow['transitions'])->filter(function ($trans, $trans_label) use ($array) {
             return in_array($trans_label, $array) && array_key_exists('with_reasons', $trans);
@@ -105,4 +101,23 @@ public function setReasons($reasons)
             "reasons" => collect(data_get($this, 'element.meta.reasons', []))->merge($reasons),
         ]);
     }
+
+    private function get_transitions(array $array)
+    {
+        $transactions = [];
+        foreach ($array as $trans) {
+            $transactions[$trans] = false;
+        }
+
+        return $transactions;
+    }
+
+    private function get_styles(Collection $workflow)
+    {
+        return collect($workflow->get('transitions'))->reject(function ($trans) {
+            return !isset($trans['style_classes']);
+        })->map(function ($trans) {
+            return $trans['style_classes'];
+        })->toArray();
+    }
 }