Implement category CRUD in admin panel

Author: thecodeholic

app/Http/Controllers/Api/CategoryController.php

@@ -0,0 +1,63 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Http\Requests\StoreCategoryRequest;
+use App\Http\Requests\UpdateCategoryRequest;
+use App\Http\Resources\CategoryResource;
+use App\Models\Category;
+
+class CategoryController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index()
+    {
+        $sortField = request('sort_field', 'updated_at');
+        $sortDirection = request('sort_direction', 'desc');
+
+        $categories = Category::query()
+            ->orderBy($sortField, $sortDirection)
+            ->latest()
+            ->get();
+
+        return CategoryResource::collection($categories);
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(StoreCategoryRequest $request)
+    {
+        $data = $request->validated();
+        $data['created_by'] = $request->user()->id;
+        $data['updated_by'] = $request->user()->id;
+        $category = Category::create($data);
+
+        return new CategoryResource($category);
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(UpdateCategoryRequest $request, Category $category)
+    {
+        $data = $request->validated();
+        $data['updated_by'] = $request->user()->id;
+        $category->update($data);
+
+        return new CategoryResource($category);
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(Category $category)
+    {
+        $category->delete();
+
+        return response()->noContent();
+    }
+}

app/Http/Requests/StoreCategoryRequest.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class StoreCategoryRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\Rule|array|string>
+     */
+    public function rules(): array
+    {
+        return [
+            'name' => ['required', 'string'],
+            'parent_id' => ['nullable', 'exists:categories,id'],
+            'active' => ['required', 'boolean']
+        ];
+    }
+}

app/Http/Requests/UpdateCategoryRequest.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class UpdateCategoryRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\Rule|array|string>
+     */
+    public function rules(): array
+    {
+        return [
+            'name' => ['required', 'string'],
+            'parent_id' => ['nullable', 'exists:categories,id'],
+            'active' => ['required', 'boolean']
+        ];
+    }
+}

app/Http/Resources/CategoryResource.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class CategoryResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => $this->id,
+            'name' => $this->name,
+            'slug' => $this->slug,
+            'active' => $this->active,
+            'parent_id' => $this->parent_id,
+            'parent' => $this->parent ? new CategoryResource($this->parent) : null,
+            'created_at' => $this->created_at->format('Y-m-d H:i:s'),
+            'updated_at' => $this->updated_at->format('Y-m-d H:i:s'),
+        ];
+    }
+}

app/Models/Category.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Spatie\Sluggable\HasSlug;
+use Spatie\Sluggable\SlugOptions;
+
+class Category extends Model
+{
+    use HasFactory;
+    use HasSlug;
+    use SoftDeletes;
+
+    protected $fillable = ['name', 'slug', 'active', 'parent_id', 'created_by', 'updated_by'];
+
+    public function getSlugOptions(): SlugOptions
+    {
+        return SlugOptions::create()
+            ->generateSlugsFrom('name')
+            ->saveSlugsTo('slug');
+    }
+
+    public function parent()
+    {
+        return $this->belongsTo(Category::class);
+    }
+}

backend/src/components/Sidebar.vue

@@ -9,6 +9,15 @@
         Dashboard
       </span>
     </router-link>
+    <router-link :to="{name: 'app.categories'}"
+                 class="flex items-center p-2 rounded transition-colors hover:bg-black/30">
+      <span class="mr-2 text-gray-300">
+        <ViewListIcon class="w-5"/>
+      </span>
+      <span class="text-xs">
+        Categories
+      </span>
+    </router-link>
     <router-link :to="{name: 'app.products'}"
                  class="flex items-center p-2 rounded transition-colors hover:bg-black/30">
       <span class="mr-2 text-gray-300">

backend/src/components/core/CustomInput.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <label class="sr-only">{{ label }}</label>
-    <div class="mt-1 flex rounded-md shadow-sm">
+    <div class="mt-1 flex rounded-md" :class="type === 'checkbox' ? 'items-center' : 'shadow-sm'">
       <span v-if="prepend"
             class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">
         {{ prepend }}

backend/src/router/index.js

@@ -16,6 +16,7 @@ import Report from "../views/Reports/Report.vue";
 import OrdersReport from "../views/Reports/OrdersReport.vue";
 import CustomersReport from "../views/Reports/CustomersReport.vue";
 import ProductForm from "../views/Products/ProductForm.vue";
+import Categories from "../views/Categories/Categories.vue";
 
 const routes = [
   {
@@ -41,6 +42,11 @@ const routes = [
         name: 'app.products',
         component: Products
       },
+      {
+        path: 'categories',
+        name: 'app.categories',
+        component: Categories
+      },
       {
         path: 'products/create',
         name: 'app.products.create',

backend/src/store/actions.js

@@ -186,4 +186,29 @@ export function deleteCustomer({commit}, customer) {
   return axiosClient.delete(`/customers/${customer.id}`)
 }
 
+export function getCategories({commit, state}, {sort_field, sort_direction} = {}) {
+  commit('setCategories', [true])
+  return axiosClient.get('/categories', {
+    params: {
+      sort_field, sort_direction
+    }
+  })
+    .then((response) => {
+      commit('setCategories', [false, response.data])
+    })
+    .catch(() => {
+      commit('setCategories', [false])
+    })
+}
+
+export function createCategory({commit}, category) {
+  return axiosClient.post('/categories', category)
+}
 
+export function updateCategory({commit}, category) {
+  return axiosClient.put(`/categories/${category.id}`, category)
+}
+
+export function deleteCategory({commit}, category) {
+  return axiosClient.delete(`/categories/${category.id}`)
+}

backend/src/store/mutations.js

@@ -43,7 +43,7 @@ export function setUsers(state, [loading, data = null]) {
       total: data.meta.total,
     }
   }
-  state.products.loading = loading;
+  state.users.loading = loading;
 }
 
 export function setCustomers(state, [loading, data = null]) {
@@ -93,3 +93,15 @@ export function hideToast(state) {
 export function setCountries(state, countries) {
   state.countries = countries.data;
 }
+
+export function setCategories(state, [loading, data = null]) {
+
+  if (data) {
+    state.categories = {
+      ...state.categories,
+      data: data.data,
+    }
+  }
+
+  state.categories.loading = loading;
+}