Allow tag's color to be picked upon creation
MODIFY
app/Http/Controllers/TagController.php
app/Http/Controllers/TagController.php
@@ -9,8 +9,8 @@ use App\Tag;
class TagController extends Controller {
private $validationRules = [
- 'name' => 'required|max:255'
- // TODO ADD COLOR
+ 'name' => 'required|max:255',
+ 'color' => 'required|max:6'
];
public function index() {
@@ -29,7 +29,7 @@ class TagController extends Controller {
Tag::create([
'space_id' => session('space')->id,
'name' => $request->input('name'),
- 'color' => Tag::randomColor()
+ 'color' => $request->input('color')
]);
return redirect()->route('tags.index');

MODIFY
resources/assets/js/components/ColorPicker.vue
resources/assets/js/components/ColorPicker.vue
<script>
export default {
- props: ['initialColor'],
+ props: {
+ initialColor: {
+ type: String,
+ default: function () {
+ return (Math.random() * 0xFFFFFF<<0).toString(16)
+ }
+ }
+ },
data() {
return {

MODIFY
resources/views/tags/create.blade.php
resources/views/tags/create.blade.php
<form method="POST" action="/tags" autocomplete="off">
{{ csrf_field() }}
<div class="box__section">
- <div class="input input--small mb-0">
+ <div class="input input--small">
<label>{{ __('fields.name') }}</label>
<input type="text" name="name" />
@include('partials.validation_error', ['payload' => 'name'])
</div>
+ <div class="input input--small mb-0">
+ <label>{{ __('fields.color') }}</label>
+ <color-picker></color-picker>
+ @include('partials.validation_error', ['payload' => 'color'])
+ </div>
</div>
<div class="box__section box__section--highlight row row--right">
<div class="row__column row__column--compact row__column--middle">

Allow tag's color to be picked upon creation