Widget add,edit vue refactoring

app/Http/Controllers/Common/Widgets.php

@@ -36,7 +36,6 @@ class Widgets extends Controller
         $widget = Widget::create($request->input());
 
         $settings = $widget->settings;
-        unset($settings['widget']);
 
         return response()->json([
             'status' => 200,
@@ -44,10 +43,10 @@ class Widgets extends Controller
             'error' => false,
             'message' => trans('messages.success.added', ['type' => $widget->name]),
             'data' => [
-                'widget_id' => $widget->widget_id,
+                'class'     => $widget->class,
-                'name' => $widget->name,
+                'name'      => $widget->name,
-                'settings' => $settings,
+                'settings'  => $settings,
-                'sort' => $widget->sort,
+                'sort'      => $widget->sort,
             ],
             'redirect' => route('dashboard'),
         ]);
@@ -63,7 +62,6 @@ class Widgets extends Controller
     public function edit(Widget $widget)
     {
         $settings = $widget->settings;
-        unset($settings['widget']);
 
         return response()->json([
             'class' => $widget->class,
@@ -89,7 +87,6 @@ class Widgets extends Controller
         $widget->update($request->input());
 
         $settings = $widget->settings;
-        unset($settings['widget']);
 
         return response()->json([
             'status' => 200,
@@ -97,10 +94,10 @@ class Widgets extends Controller
             'error' => false,
             'message' => trans('messages.success.added', ['type' => $widget->name]),
             'data' => [
-                'class' => $widget->class,
+                'class'     => $widget->class,
-                'name' => $widget->name,
+                'name'      => $widget->name,
-                'settings' => $settings,
+                'settings'  => $settings,
-                'sort' => $widget->sort,
+                'sort'      => $widget->sort,
             ],
             'redirect' => route('dashboard'),
         ]);

resources/assets/js/components/AkauntingWidget.vue

@@ -27,13 +27,13 @@
                             </span>
                             <el-select
                                     class="select-primary"
-                                    v-model="form.widget_id" filterable
+                                    v-model="form.class" filterable
                                     :placeholder="placeholder.type">
-                                <el-option v-for="option in types"
+                                <el-option v-for="(name, value) in types"
                                            class="select-primary"
-                                           :key="option.name"
+                                           :key="name"
-                                           :label="option.name"
+                                           :label="name"
-                                           :value="option.id">
+                                           :value="value">
                                 </el-option>
                             </el-select>
                         </base-input>
@@ -122,47 +122,65 @@ export default {
     },
 
     props: {
-        show: Boolean,
+        show: {
+            type: Boolean,
+            default: false,
+            description: "Modal Status"
+        },
         action: {
             type: String,
             default: 'create',
-            description: "Modal header title"
+            description: "Widget modal action create/edit"
         },
         title: {
             type: String,
             default: '',
             description: "Modal header title"
         },
-        text: {},
+        text: {
-        placeholder: {},
+            type: Object,
+            default: {},
+            description: "Widget form texts"
+        },
+        placeholder: {
+            type: Object,
+            default: {},
+            description: "Widget form placeholder"
+        },
         name: {
             type: String,
-            default: ''
+            default: '',
+            description: "Widget Name Field"
         },
         width: {
             type: String,
-            default: ''
+            default: '',
+            description: "Widget Width Field"
         },
         type: {
             type: String,
-            default: 'create',
+            default: '',
-            description: "Modal header title"
+            description: "Widget Class Field"
+        },
+        types: {
+            type: Object,
+            default: {},
+            description: "Widget Get Classes"
         },
         sort: {
-            type: String,
+            type: Number,
-            default: 'create',
+            default: 0,
-            description: "Modal header title"
+            description: "Widget Sort Field"
         },
-        types: {},
         dashboard_id: {
             type: Number,
             default: 0,
-            description: "Modal header title"
+            description: "Widget Dashboard Id"
         },
         widget_id: {
             type: Number,
             default: 0,
-            description: "Modal header title"
+            description: "Edit Widget ID"
         },
     },
 
@@ -188,9 +206,9 @@ export default {
             ],
             form: {
                 loading: false,
+                class: this.type,
                 name: this.name,
                 width: this.width,
-                widget_id: this.type,
                 sort: this.sort,
                 dashboard_id: this.dashboard_id
             },

resources/assets/js/views/common/dashboard.js

@@ -43,12 +43,12 @@ const dashboard = new Vue({
             widget_modal: false,
             widgets: {},
             widget: {
+                id: 0,
                 name: '',
-                type: '',
+                class: '',
                 width: '',
                 action: 'create',
                 sort: 0,
-                widget_id: 0
             },
             filter_date: [],
         };
@@ -118,12 +118,12 @@ const dashboard = new Vue({
 
             axios.get(url + '/common/widgets/' + widget_id + '/edit')
             .then(function (response) {
+                self.widget.id = widget_id;
                 self.widget.name = response.data.name;
-                self.widget.type = response.data.widget_id;
+                self.widget.class = response.data.class;
                 self.widget.width = response.data.settings.width;
                 self.widget.action = 'edit';
                 self.widget.sort = response.data.sort;
-                self.widget.widget_id = widget_id;
 
                 self.widget_modal = true;
             })
@@ -142,12 +142,12 @@ const dashboard = new Vue({
 
             this.widget_modal = false;
 
+            this.widget.id = 0;
             this.widget.name = '';
-            this.widget.type = '';
+            this.widget.class = '';
             this.widget.width = '';
             this.widget.action = 'create';
             this.widget.sort = 0;
-            this.widget.widget_id = 0;
         },
 
         onChangeFilterDate() {

resources/views/common/dashboard/index.blade.php

@@ -76,13 +76,13 @@
         v-if="widget_modal"
         :title="'{{ trans_choice('general.widgets', 1) }}'"
         :show="widget_modal"
+        :widget_id="widget.id"
         :name="widget.name"
         :width="widget.width"
         :action="widget.action"
-        :type="widget.type"
+        :type="widget.class"
-        :sort="widget.sort"
         :types="widgets"
-        :widget_id="widget.widget_id"
+        :sort="widget.sort"
         :dashboard_id="{{ $dashboard->id }}"
         :text="{{ $text }}"
         :placeholder="{{ $placeholder }}"