Finish adding a new role functionality

Author: perisicnikola37

app/Http/Controllers/RoleController.php

@@ -2,6 +2,7 @@
 
 namespace App\Http\Controllers;
 
+use App\Http\Requests\RoleStoreRequest;
 use App\Http\Resources\RoleResource;
 use App\Models\Role;
 use Illuminate\Http\Request;
@@ -30,9 +31,12 @@ public function create()
     /**
      * Store a newly created resource in storage.
      */
-    public function store(Request $request)
+    public function store(RoleStoreRequest $request)
     {
-        //
+        $validatedData = $request->validated();
+        Role::create($validatedData);
+
+        return redirect()->route('roles.index')->with('success', 'Role has been created!');
     }
 
     /**

app/Http/Requests/RoleStoreRequest.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class RoleStoreRequest 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\ValidationRule|array|string>
+     */
+    public function rules(): array
+    {
+        return [
+            'name' => 'required|max:255',
+        ];
+    }
+}

database/migrations/2014_10_12_000000_create_users_table.php

@@ -17,7 +17,7 @@ public function up(): void
             $table->string('name', 255);
             $table->string('email', 255)->unique();
             $table->text('description')->default('Some description');
-            $table->string('avatar', 50)->default('placeholder');
+            $table->string('avatar', 255)->default('placeholder');
             $table->string('password', 255);
             $table->rememberToken();
             $table->foreignId('current_team_id')->nullable();

resources/js/Pages/Roles/Create.vue

@@ -1,11 +1,67 @@
 <template>
-    <div>
-        create component
-    </div>
-</template>
+    <AppLayout title="Create role">
+        <template #header>
+            <h2 class="text-xl font-semibold leading-tight text-gray-800">
+                Create role
+            </h2>
+        </template>
+
+        <div class="py-12">
+            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+                <div class="w-full max-w-xs m-auto">
+                    <form @submit.prevent="submit" class="px-8 pt-6 pb-8 m-auto mb-4 bg-white rounded shadow-md"
+                        enctype="multipart/form-data">
+                        <div class="mb-4">
+                            <label class="block mb-2 text-sm font-bold text-gray-700" for="name">
+                                Role name <span class="text-red-500">*</span>
+                            </label>
+                            <input v-model="form.name"
+                                class="w-full px-3 py-2 mb-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
+                                id="name" type="text" />
+                            <span class="text-red-500">{{ errors.name }}</span>
+                        </div>
+
+                        <div class="flex items-center justify-between">
+                            <Button :form="form"></Button>
+                        </div>
+                    </form>
 
+                    <p class="text-xs text-center text-gray-500">
+                        &copy;2023 -
+                        <a class="text-blue-500" href="https://github.com/perisicnikola37"
+                            target="_blank">@perisicnikola37</a>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </AppLayout>
+</template>
+  
 <script>
-export default {
+import Button from '@/Components/Button.vue';
+import AppLayout from '@/Layouts/AppLayout.vue';
 
-}
-</script>
+export default {
+    components: {
+        AppLayout,
+        Button
+    },
+    props: {
+        errors: Object
+    },
+    data() {
+        return {
+            form: this.$inertia.form({
+                name: '',
+            })
+        };
+    },
+    methods: {
+        submit() {
+            this.form.post(this.route('roles.store'), {
+            });
+        }
+    }
+};
+</script>
+  

resources/js/Pages/Users/Create.vue

@@ -88,8 +88,8 @@
 </template>
 
 <script>
-import AppLayout from '@/Layouts/AppLayout.vue';
 import Button from '@/Components/Button.vue';
+import AppLayout from '@/Layouts/AppLayout.vue';
 
 export default {
     components: {