Staff Members: List and Remove

In this lesson, we will add another section to our Staff Management page to list and remove staff members.

Staff Member Manager

First, update the RoleSeeder. We will need user.viewAny and user.delete permissions for the vendor role.

database/seeders/RoleSeeder.php

protected function createVendorRole(): void
{
    $permissions = Permission::query()
        ->orWhere('name', 'like', 'category.%')
        ->orWhere('name', 'like', 'product.%')
        ->orWhereIn('name', [
            'user.viewAny', 
            'user.create',
            'user.delete', 
        ]);
 
    $this->createRole(RoleName::VENDOR, $permissions->pluck('id'));
}

Update the StaffMemberController to check if a user is allowed view users and pass all restaurant staff members to the Vendor/Staff/Show view.

app/Http/Controllers/Vendor/StaffMemberController.php

public function index(): Response
{
    return Inertia::render('Vendor/Staff/Show'); 
    $this->authorize('user.viewAny'); 
 
    return Inertia::render('Vendor/Staff/Show', [
        'staff' => auth()->user()->restaurant->staff,
    ]);
}
 
public function destroy($staffMemberId)
{
    $this->authorize('user.delete');
 
    $restaurant = auth()->user()->restaurant;
    $member     = $restaurant->staff()->findOrFail($staffMemberId);
 
    $member->roles()->sync([]);
    $member->delete();
 
    return back();
}

Now let's create a new StaffMemberManager Vue component.

resources/js/Pages/Vendor/Staff/Partials/StaffMemberManager.vue

<script setup>
import { useForm } from '@inertiajs/vue3'
import DangerButton from '@/Components/DangerButton.vue'
 
defineProps({
  members: {
    type: Array,
    required: true
  }
})
 
const form = useForm({})
 
const removeMember = (member) => {
  form.delete(route('vendor.staff-members.destroy', member))
}
</script>
 
<template>
  <section class="max-w-xl">
    <header>
      <h2 class="text-lg font-medium text-gray-900">Team Members</h2>
 
      <p class="mt-1 text-sm text-gray-600">All the people who are part of this restaurant.</p>
    </header>
    <div class="mt-6 space-y-6">
      <div v-for="member in members" :key="member.id">
        <div class="flex items-center justify-between">
          <div>
            <div>{{ member.name }}</div>
            <div class="text-link">{{ member.email }}</div>
          </div>
          <div>
            <DangerButton
              v-if="can('user.delete')"
              @click="removeMember(member)"
              type="button"
              class="btn-sm"
            >
              Remove
            </DangerButton>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

In this component, we have defined the members property and will pass it from the parent Show.vue page.

defineProps({
  members: {
    type: Array,
    required: true
  }
})

Remove button is displayed if the vendor has user.delete permission via v-if="can('user.delete')" attribute.

Then update the <script> and <template> parts of the parent Show.vue page.

resources/js/Pages/Vendor/Staff/Show.vue

<script>
  // ...
  import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
  import { Head } from '@inertiajs/vue3'
  import AddStaffMemberForm from '@/Pages/Vendor/Staff/Partials/AddStaffMemberForm.vue'
  import StaffMemberManager from '@/Pages/Vendor/Staff/Partials/StaffMemberManager.vue' 
 
  const props = defineProps({
    staff: {
      type: Array
    }
  })
</script>
 
<template>
  <!-- ... -->
          <div v-if="can('user.create')" class="p-4 sm:p-8 bg-white shadow sm:rounded-lg">
            <AddStaffMemberForm />
          </div>
          
          <div v-if="can('user.viewAny')" class="p-4 sm:p-8 bg-white shadow sm:rounded-lg">
            <StaffMemberManager :members="props.staff" />
          </div>
        </div>
      </div>
    </AuthenticatedLayout>
  <!-- ... -->
</template>

List of staff members from the parent Show page is passed via :members="props.staff" attribute we defined previously.

This is it. The Team Members section is updated when you add a new staff member.

Staff Team Members Section

Add Restaurant Staff Members Orders List and Manage Orders

Staff Members: List and Remove

Course Content

Global Setup and Preparation

Managing Restaurants by Admin

Managing Restaurant Menu by Owner

Placing Orders by Users

Managing Orders by Restaurant Staff

Laravel Vue Inertia: Food Ordering Project Step-By-Step

Staff Members: List and Remove

Course Content

Global Setup and Preparation

Managing Restaurants by Admin

Managing Restaurant Menu by Owner

Placing Orders by Users

Managing Orders by Restaurant Staff