Tabs on Edit finished, fixes #5

README.md

@@ -6,7 +6,8 @@
     2. [Tabs Panel with Toolbar](#tabs-panel-with-toolbar)
     3. [Relationship Tabs](#relationship-tabs)
     4. [Combine Fields and Relations in Tabs](#combine-fields-and-relations-in-tabs)
-    4. [Actions in Tabs](#actions-in-tabs)
+    5. [Actions in Tabs](#actions-in-tabs)
+    6. [Tabs on Edit View](#tabs-on-edit-view)
 3. [Customization](#customization)
 4. [Upgrade to 1.0.0](#upgrade-to-1.0.0)
 
@@ -176,6 +177,26 @@ class Client extends Resource
 }
 ```
 
+### Tabs on Edit View
+
+![image](https://user-images.githubusercontent.com/3426944/51790797-055a6080-219a-11e9-8da4-33a621093265.png)
+
+
+If you want to show Tabs on the Edit View, use the `TabsOnUpdate` Trait in your Resource.
+
+```php
+// in app/Nova/Resource.php
+
+use Eminiarts\Tabs\Tabs;
+use Eminiarts\Tabs\TabsOnEdit; // Add this Trait
+
+class Client extends Resource
+{
+    use TabsOnEdit; // Use this Trait
+    //...
+}
+```
+
 ## Customization
 
 By default, the Tabs component moves the search input and the create button to the tabs. If you have a lot of tabs, you can move them back down to its own line:

dist/js/field.js

@@ -1014,12 +1014,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
      * Fill the given FormData object with the field's internal value.
      */
     fill: function fill(formData) {
-      _.forEach(this.tabs, function (tab) {
-        _.forEach(tab.fields, function (field) {
-          formData.append(field.attribute, field.value || "");
-        });
+      _.each(this.field.fields, function (field) {
+        field.fill(formData);
       });
-      console.log("fill here", formData);
     },
 
     /**
@@ -1053,10 +1050,11 @@ var render = function() {
           [
             _vm._l(_vm.tabs, function(tab, key) {
               return _c(
-                "button",
+                "div",
                 {
                   key: key,
-                  staticClass: "py-5 px-8 border-b-2 focus:outline-none tab",
+                  staticClass:
+                    "py-5 px-8 border-b-2 focus:outline-none tab cursor-pointer",
                   class: [
                     _vm.activeTab == tab.name
                       ? "text-grey-black font-bold border-primary"

resources/js/components/FormTabs.vue

@@ -2,13 +2,13 @@
   <div>
     <div class="relationship-tabs-panel card overflow-hidden">
       <div class="flex flex-row">
-        <button
-          class="py-5 px-8 border-b-2 focus:outline-none tab"
+        <div
+          class="py-5 px-8 border-b-2 focus:outline-none tab cursor-pointer"
           :class="[activeTab == tab.name ? 'text-grey-black font-bold border-primary': 'text-grey font-semibold border-40']"
           v-for="(tab, key) in tabs"
           :key="key"
           @click="handleTabClick(tab, $event)"
-        >{{ tab.name }}</button>
+        >{{ tab.name }}</div>
         <div class="flex-1 border-b-2 border-40"></div>
       </div>
       <div
@@ -67,12 +67,9 @@ export default {
      * Fill the given FormData object with the field's internal value.
      */
     fill(formData) {
-      _.forEach(this.tabs, function(tab) {
-        _.forEach(tab.fields, function(field) {
-          formData.append(field.attribute, field.value || "");
-        });
+      _.each(this.field.fields, field => {
+        field.fill(formData);
       });
-      console.log("fill here", formData);
     },
     /**
      * Handle the actionExecuted event and pass it up the chain.

src/TabsOnEdit.php

@@ -0,0 +1,60 @@
+<?php
+namespace Eminiarts\Tabs;
+
+use Laravel\Nova\Http\Requests\NovaRequest;
+
+trait TabsOnEdit
+{
+    /**
+     * @param NovaRequest $request
+     * @param $model
+     */
+    public static function fillForUpdate(NovaRequest $request, $model)
+    {
+        return static::fillFields(
+            $request, $model,
+            (new static($model))->parentUpdateFields($request)
+        );
+    }
+
+    /**
+     * @param NovaRequest $request
+     */
+    public function parentUpdateFields(NovaRequest $request)
+    {
+        return parent::updateFields($request);
+    }
+
+    /**
+     * Get the validation rules for a resource update request.
+     *
+     * @param  \Laravel\Nova\Http\Requests\NovaRequest $request
+     * @return array
+     */
+    public static function rulesForUpdate(NovaRequest $request)
+    {
+        return static::formatRules($request, (new static(static::newModel()))
+                ->parentUpdateFields($request)
+                ->mapWithKeys(function ($field) use ($request) {
+                    return $field->getUpdateRules($request);
+                })->all());
+    }
+
+    /**
+     * Resolve the update fields.
+     *
+     * @param  \Laravel\Nova\Http\Requests\NovaRequest $request
+     * @return \Illuminate\Support\Collection
+     */
+    public function updateFields(NovaRequest $request)
+    {
+        return collect(
+            [
+                'Tabs' => [
+                    'component' => 'tabs',
+                    'fields'    => $this->removeNonUpdateFields($this->resolveFields($request)),
+                ],
+            ]
+        );
+    }
+}