begin action buttons

app/Http/Controllers/ProjectController.php

@@ -37,7 +37,7 @@ class ProjectController extends Controller
     public function store(Request $request)
     {
         $request->validate([
-            'name' => ['required', 'string', 'max:255', 'unique:users'],
+            'name' => ['required', 'string', 'max:255', 'unique:projects'],
             'description' => ['required', 'string', 'max:255'],
             'mmc_path' => ['required', 'string', 'max:255'],
         ]);

package-lock.json

@@ -4,6 +4,9 @@
     "requires": true,
     "packages": {
         "": {
+            "dependencies": {
+                "font-awesome": "^4.7.0"
+            },
             "devDependencies": {
                 "@tailwindcss/forms": "^0.4.0",
                 "alpinejs": "^3.4.2",
@@ -4618,6 +4621,14 @@
                 }
             }
         },
+        "node_modules/font-awesome": {
+            "version": "4.7.0",
+            "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+            "integrity": "sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg==",
+            "engines": {
+                "node": ">=0.10.3"
+            }
+        },
         "node_modules/forwarded": {
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -12829,6 +12840,11 @@
             "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==",
             "dev": true
         },
+        "font-awesome": {
+            "version": "4.7.0",
+            "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+            "integrity": "sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg=="
+        },
         "forwarded": {
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",

package.json

@@ -18,5 +18,8 @@
         "lodash": "^4.17.19",
         "postcss": "^8.4.6",
         "tailwindcss": "^3.1.0"
+    },
+    "dependencies": {
+        "font-awesome": "^4.7.0"
     }
 }

public/css/app.css

@@ -697,6 +697,9 @@ select {
 .z-50 {
   z-index: 50;
 }
+.float-right {
+  float: right;
+}
 .m-2 {
   margin: 0.5rem;
 }
@@ -710,6 +713,24 @@ select {
 .-ml-px {
   margin-left: -1px;
 }
+.mt-3 {
+  margin-top: 0.75rem;
+}
+.mb-4 {
+  margin-bottom: 1rem;
+}
+.mt-1 {
+  margin-top: 0.25rem;
+}
+.mt-4 {
+  margin-top: 1rem;
+}
+.ml-2 {
+  margin-left: 0.5rem;
+}
+.mt-6 {
+  margin-top: 1.5rem;
+}
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -719,12 +740,6 @@ select {
 .mr-2 {
   margin-right: 0.5rem;
 }
-.ml-2 {
-  margin-left: 0.5rem;
-}
-.mt-4 {
-  margin-top: 1rem;
-}
 .ml-4 {
   margin-left: 1rem;
 }
@@ -737,18 +752,6 @@ select {
 .-mt-px {
   margin-top: -1px;
 }
-.mb-4 {
-  margin-bottom: 1rem;
-}
-.mt-1 {
-  margin-top: 0.25rem;
-}
-.mt-6 {
-  margin-top: 1.5rem;
-}
-.mt-3 {
-  margin-top: 0.75rem;
-}
 .-mr-2 {
   margin-right: -0.5rem;
 }
@@ -773,15 +776,15 @@ select {
 .h-5 {
   height: 1.25rem;
 }
+.h-20 {
+  height: 5rem;
+}
 .h-8 {
   height: 2rem;
 }
 .h-16 {
   height: 4rem;
 }
-.h-20 {
-  height: 5rem;
-}
 .h-10 {
   height: 2.5rem;
 }
@@ -797,20 +800,17 @@ select {
 .w-5 {
   width: 1.25rem;
 }
-.w-8 {
-  width: 2rem;
-}
-.w-auto {
-  width: auto;
-}
 .w-20 {
   width: 5rem;
 }
 .w-full {
   width: 100%;
 }
-.w-48 {
+.w-8 {
-  width: 12rem;
+  width: 2rem;
+}
+.w-auto {
+  width: auto;
 }
 .w-4 {
   width: 1rem;
@@ -818,6 +818,9 @@ select {
 .w-6 {
   width: 1.5rem;
 }
+.w-48 {
+  width: 12rem;
+}
 .max-w-7xl {
   max-width: 80rem;
 }
@@ -895,12 +898,12 @@ select {
 .rounded-md {
   border-radius: 0.375rem;
 }
-.rounded-lg {
-  border-radius: 0.5rem;
-}
 .rounded {
   border-radius: 0.25rem;
 }
+.rounded-lg {
+  border-radius: 0.5rem;
+}
 .rounded-l-md {
   border-top-left-radius: 0.375rem;
   border-bottom-left-radius: 0.375rem;
@@ -984,41 +987,35 @@ select {
   padding-top: 3rem;
   padding-bottom: 3rem;
 }
-.py-4 {
+.py-6 {
-  padding-top: 1rem;
+  padding-top: 1.5rem;
-  padding-bottom: 1rem;
+  padding-bottom: 1.5rem;
 }
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
-.py-1 {
+.py-4 {
-  padding-top: 0.25rem;
+  padding-top: 1rem;
-  padding-bottom: 0.25rem;
+  padding-bottom: 1rem;
 }
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
 }
-.py-6 {
+.py-1 {
-  padding-top: 1.5rem;
+  padding-top: 0.25rem;
-  padding-bottom: 1.5rem;
+  padding-bottom: 0.25rem;
-}
-.pt-8 {
-  padding-top: 2rem;
 }
 .pt-6 {
   padding-top: 1.5rem;
 }
+.pt-8 {
+  padding-top: 2rem;
+}
 .pt-1 {
   padding-top: 0.25rem;
 }
-.pl-3 {
-  padding-left: 0.75rem;
-}
-.pr-4 {
-  padding-right: 1rem;
-}
 .pt-2 {
   padding-top: 0.5rem;
 }
@@ -1031,6 +1028,12 @@ select {
 .pb-1 {
   padding-bottom: 0.25rem;
 }
+.pl-3 {
+  padding-left: 0.75rem;
+}
+.pr-4 {
+  padding-right: 1rem;
+}
 .text-center {
   text-align: center;
 }
@@ -1045,14 +1048,14 @@ select {
   font-size: 1.25rem;
   line-height: 1.75rem;
 }
-.text-lg {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
 .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
 }
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -1090,6 +1093,22 @@ select {
   --tw-text-opacity: 1;
   color: rgb(31 41 55 / var(--tw-text-opacity));
 }
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+.text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity));
+}
+.text-indigo-600 {
+  --tw-text-opacity: 1;
+  color: rgb(79 70 229 / var(--tw-text-opacity));
+}
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
 .text-gray-200 {
   --tw-text-opacity: 1;
   color: rgb(229 231 235 / var(--tw-text-opacity));
@@ -1102,30 +1121,18 @@ select {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
-.text-gray-600 {
-  --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
-}
 .text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
-.text-indigo-600 {
+.text-red-500 {
   --tw-text-opacity: 1;
-  color: rgb(79 70 229 / var(--tw-text-opacity));
+  color: rgb(239 68 68 / var(--tw-text-opacity));
 }
 .text-green-600 {
   --tw-text-opacity: 1;
   color: rgb(22 163 74 / var(--tw-text-opacity));
 }
-.text-red-600 {
-  --tw-text-opacity: 1;
-  color: rgb(220 38 38 / var(--tw-text-opacity));
-}
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
 .text-indigo-700 {
   --tw-text-opacity: 1;
   color: rgb(67 56 202 / var(--tw-text-opacity));
@@ -1280,6 +1287,10 @@ select {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
+.focus\:text-gray-500:focus {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
 .focus\:text-indigo-800:focus {
   --tw-text-opacity: 1;
   color: rgb(55 48 163 / var(--tw-text-opacity));
@@ -1288,10 +1299,6 @@ select {
   --tw-text-opacity: 1;
   color: rgb(31 41 55 / var(--tw-text-opacity));
 }
-.focus\:text-gray-500:focus {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;

resources/sass/app.scss

@@ -0,0 +1 @@
+@import "node_modules/font-awesome/scss/font-awesome.scss";

resources/views/projects/create.blade.php

@@ -9,7 +9,15 @@
         <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
             <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                 <div class="p-6 bg-white border-b border-gray-200">
-                    <x-label class="mb-4" :errors="$errors" />
+                    @if ($errors->any())
+                    <div class="alert alert-danger text-red-500 p-2">
+                        <ul class="list-unstyled alert alert-danger">
+                            @foreach ($errors->all() as $error)
+                            <li>{{ $error }}</li>
+                            @endforeach
+                        </ul>
+                    </div>
+                    @endif
                     <form method="POST" action="{{ route('projects.store') }}">
                         @csrf
                         <!-- Project name -->

resources/views/projects/list.blade.php

@@ -35,7 +35,11 @@
                                 <td class="p-2 border border-gray-200">{{ $project->name }}</td>
                                 <td class="p-2 border border-gray-200">{{ $project->description }}</td>
                                 <td class="p-2 border border-gray-200">{{ $project->mmc_path }}</td>
-                                <td class="p-2 border border-gray-200">&nbsp;</td>
+                                <td class="p-2 border border-gray-200">
+                                    <!-- <div class="btn-group btn-group-sm float-right" role="group" aria-label="Basic example"> -->
+                                        <a href='#' class="btn btn-secondary"><i class="fa fa-pencil"></i></a>
+                                    <!-- </div> -->
+                                </td>
                             </tr>
                             @empty
                             <tr>