Add custom fields to Team Settings Page

Hello,

I tried to follow the Spark cookbook (https://spark.laravel.com/docs/6.0/adding-profile-fields) to add fields to my team. Only, the cookbook explains for the profile of a user. I tried to adapt but I get a 500 error.

My blade file

<update-team-profile-details :user="user" :team="team" inline-template>
    <form role="form">
        <!-- Age -->
        <div class="form-group row">
            <label class="col-md-4 col-form-label text-md-right">Street1</label>

            <div class="col-md-6">
                <input type="text" class="form-control" name="street1"
                             v-model="form.street1">
            </div>
        </div>

        <!-- Update Button -->
        <div class="form-group">
            <div class="col-md-6 offset-md-4">
                <button type="submit" class="btn btn-primary"
                                @click.prevent="update"
                                :disabled="form.busy">

                    Update
                </button>
            </div>
        </div>
    </form>
</update-team-profile-details>

My component update-team-profile-details

Vue.component('update-team-profile-details', {
  props: ['user', 'team'],

  data() {
    return {
      form: new SparkForm({
        street1: '',
      })
    };
  },

  mounted() {
    this.form.street1 = this.team.street1;
  },

  methods: {
    update() {
      Spark.put('/settings/team/profile/details', this.form)
          .then(response => {
            Bus.$emit('updateTeam');
          });
    }
  }
});

My route

Route::put('/settings/team/profile/details', 'TeamProfileDetailsController@update');

My TeamProfileDetailsController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class TeamProfileDetailsController extends Controller
{
  public function __construct()
  {
    $this->middleware('auth');
  }
  
  
  /**
   * Update Team Profile Details
   *
   * @param \Illuminate\Http\Request $request
   */
  
  public function update(Request $request)
  {
    $request->user()->currentTeam->forceFill([
      'street1'       => $request->street1,
    ])->save();
  }
  
}

I think the problem would come from here?

$request->user()->currentTeam->forceFill

I also created the field in the database and put the name of the field in the $fillable array in my Team model file

I get a 500 error each time. http://localhost:3000/settings/team/profile/details 500 (Internal Server Error)

Do you have the solution for me? Thank you

jimmylet

7 years ago

Best Answer

Level 1

Finally, I found a solution like a big one.

In my TeamProfileDetailsController

class TeamProfileDetailsController extends Controller
{
  public function __construct()
  {
    $this->middleware('auth');
  }
  

  public function update(Request $request, Team $team)
  {

  
    abort_unless($request->user()->ownsTeam($team), 403);
    
    
    $team->forceFill([
      'street1' => $request->street1,
    ])->save();
    
  }
  
}

In my route file :

Route::put('/settings/'.Spark::teamsPrefix().'/{team}/team-profile-details', 'TeamProfileDetailsController@update');

And in my component

Vue.component('update-team-profile-details', {
  props: ['user', 'team'],

  data() {
    return {
      form: new SparkForm({
        street1: ''
      })
    };
  },

  mounted() {
    this.form.street1 = this.team.street1;
  },

  methods: {
    update() {
      Spark.put(this.urlForUpdate, this.form);
    }
  },

  computed: {
    /**
     * Get the URL for update profile details method update.
     */
    urlForUpdate() {
      return `/settings/${Spark.teamsPrefix}/${this.team.id}/team-profile-details`;
    }
  }
});

1 like

Please or to participate in this conversation.