#14 - crud for news (#39)

* feat: add blades

* feat: add

* fix: refactor routing

* feat: add editor and remove tests

* feat: cleaning

* fix: after review

* fix: cleaning

* fix: after review and dump error

* fix: remove files

* Update resources/css/app.css

Co-authored-by: Kamil Piech <[email protected]>

* fix: after review

* fix: after review

* fix: remove purifier

* fix: after review

* feat: update routing and fixed bug

* fix: after review

* fix: after review

* fix: change chmod

* fix: eslint run

Co-authored-by: Kamil Piech <[email protected]>
Co-authored-by: aleksander.kowalski <[email protected]>

.gitignore

@@ -23,3 +23,4 @@ storage/redis/dump.rdb
 /storage/src/*
 composer.lock
 package-lock.json
+yarn.lock

config/app.php

@@ -52,5 +52,6 @@
         "Auth" => Illuminate\Support\Facades\Auth::class,
         "Constants" => Blumilk\Meetup\Core\Models\Utils\Constants::class,
         "AvailableNewsletter" => Blumilk\Meetup\Core\Enums\AvailableNewsletter::class,
+        "Str" => Illuminate\Support\Str::class,
     ],
 ];

database/migrations/2022_03_18_195003_create_news_table.php

@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class() extends Migration {
+    public function up(): void
+    {
+        Schema::create("news", function (Blueprint $table): void {
+            $table->id();
+            $table->foreignId("author_id")->constrained()->onDelete("cascade");
+            $table->string("title");
+            $table->longText("text");
+            $table->string("slug")->unique();
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists("news");
+    }
+};

database/seeders/DummyDataSeeder.php

@@ -11,7 +11,6 @@
 use Blumilk\Meetup\Core\Models\User;
 use Illuminate\Database\Seeder;
 use Illuminate\Support\Carbon;
-use Illuminate\Support\Facades\Hash;
 
 class DummyDataSeeder extends Seeder
 {
@@ -20,7 +19,7 @@ public function run(): void
         $user = User::factory([
             "name" => "Admin",
             "email" => "[email protected]",
-            "password" => Hash::make("password"),
+            "password" => "password",
             "email_verified_at" => Carbon::createFromDate(2022, 01, 01),
         ])->create();
 

package.json

@@ -37,6 +37,8 @@
     "eslint-plugin-tailwindcss": "^3.5.0"
   },
   "dependencies": {
+    "@toast-ui/editor": "^3.1.4",
+    "codemirror": "^5.65.2",
     "alpinejs": "^3.9.6",
     "cross-env": "^7.0.3",
     "tailwindcss": "^3.0.23",

resources/js/app.js

@@ -1,4 +1,32 @@
 import Alpine from 'alpinejs'
+import Editor from '@toast-ui/editor'
+import 'codemirror/lib/codemirror.css'
+import '@toast-ui/editor/dist/toastui-editor.css'
+
+const editor = new Editor({
+  el: document.querySelector('#editor'),
+  height: '400px',
+  initialEditType: 'markdown',
+  placeholder: 'Write something cool!',
+})
+
+if (document.querySelector('#createNews')) {
+  document.querySelector('#createNews').addEventListener('submit', event => {
+    event.preventDefault()
+    document.querySelector('#text').value = editor.getMarkdown()
+    event.target.submit()
+  })
+}
+
+if (document.querySelector('#editNews')) {
+  editor.setMarkdown(document.querySelector('#oldText').value)
+
+  document.querySelector('#editNews').addEventListener('submit', event => {
+    event.preventDefault()
+    document.querySelector('#text').value = editor.getMarkdown()
+    event.target.submit()
+  })
+}
 
 window.Alpine = Alpine
 

resources/static/.gitignore

@@ -1,2 +1,2 @@
-css/*
 js/*
+css/*

resources/views/meetups/index.blade.php

@@ -17,7 +17,7 @@
                         {{ $meetup->language }}
 
                         <a href="{{ route('meetups.edit', $meetup) }}">Edit</a>
-                        <form action="{{ route('meetups.destroy', $meetup) }}" method="post">
+                        <form action="{{ route('meetups.destroy', $meetup) }}">
                             @csrf
                             @method('DELETE')
                             <button type="submit"  onclick="return confirm('Delete meetup? This operation is irreversible.')">Delete</button>

resources/views/news/create.blade.php

@@ -0,0 +1,29 @@
+@extends('layouts.app')
+
+@section('content')
+    <div>
+        <div>
+            <h1>Create News</h1>
+            @auth
+                <form action="{{ route('news.store') }}" method="post" id="createNews">
+                    @csrf
+                    <div>
+                        <label for="title">Title:</label>
+                        <input type="text" id="title" name="title" value="{{ old('title') }}">
+                        <x-input-error for="title"/>
+                    </div>
+                    <label for="editor">Content:</label>
+                    <div class="flex flex-col space-y-2">
+                        <div id="editor" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm"></div>
+                    </div>
+                    <x-input-error for="editor"/>
+                    <input type="hidden" name="text" id="text">
+                    <div>
+                        <button type="submit">Post</button>
+                    </div>
+                </form>
+            @endauth
+        </div>
+    </div>
+    <script src="{{ asset('static/js/app.js') }}"></script>
+@endsection

resources/views/news/edit.blade.php

@@ -0,0 +1,31 @@
+@extends('layouts.app')
+
+@section('content')
+    <div>
+        <div>
+            <h1>Edit News</h1>
+            @auth
+                <form method="post" action="{{ route('news.update', $news) }}" id="editNews">
+                    @method('PUT')
+                    @csrf
+                    <div>
+                        <label for="name">Title:</label>
+                        <input type="text" id="title" name="title" value="{{ old('title', $news->title) }}">
+                        <x-input-error for="name"/>
+                    </div>
+                    <label for="editor">Content:</label>
+                    <div class="flex flex-col space-y-2">
+                        <div id="editor" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm"></div>
+                    </div>
+                    <x-input-error for="editor"/>
+                    <input type="hidden" id="oldText" value="{{ $news->text }}">
+                    <input type="hidden" name="text" id="text">
+                    <div>
+                        <button type="submit">Update</button>
+                    </div>
+                </form>
+            @endauth
+        </div>
+    </div>
+    <script src="{{ asset('static/js/app.js') }}"></script>
+@endsection

resources/views/news/index.blade.php

@@ -0,0 +1,30 @@
+@extends('layouts.app')
+
+@section('content')
+    <div>
+        <div>
+            <h1>News</h1>
+            @auth
+                <a href="{{ route('news.create') }}">Create new news</a>
+            @endauth
+            @if ($news->count())
+                @foreach ($news as $singleNews)
+                    <div>
+                        {{ $singleNews->title }}
+                        {!! Str::markdown($singleNews->text) !!}
+                        {{ $singleNews->author }}
+
+                        <a href="{{ route('news.edit', $singleNews) }}">Edit</a>
+                        <form action="{{ route('news.destroy', $singleNews) }}">
+                            @csrf
+                            @method('DELETE')
+                            <button type="submit"  onclick="return confirm('Delete News? This operation is irreversible.')">Delete</button>
+                        </form>
+                    </div>
+                @endforeach
+            @else
+                <p>There are no news</p>
+            @endif
+        </div>
+    </div>
+@endsection

src/Http/Controllers/NewsController.php

@@ -0,0 +1,55 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Blumilk\Meetup\Core\Http\Controllers;
+
+use Blumilk\Meetup\Core\Http\Requests\News\NewsRequest;
+use Blumilk\Meetup\Core\Models\News;
+use Illuminate\Contracts\View\View;
+use Illuminate\Http\RedirectResponse;
+
+class NewsController extends Controller
+{
+    public function index(): View
+    {
+        $news = News::query()->orderBy("date")->paginate(20);
+
+        return view("news.index")
+            ->with("news", $news);
+    }
+
+    public function create(): View
+    {
+        return view("news.create");
+    }
+
+    public function store(NewsRequest $request): RedirectResponse
+    {
+        $input = $request->validated();
+
+        $request->user()->news()->create($input);
+
+        return redirect()->route("news");
+    }
+
+    public function edit(News $news): View
+    {
+        return view("news.edit")
+            ->with("news", $news);
+    }
+
+    public function update(NewsRequest $request, News $news): RedirectResponse
+    {
+        $news->update($request->validated());
+
+        return redirect()->route("news");
+    }
+
+    public function destroy(News $news): RedirectResponse
+    {
+        $news->delete();
+
+        return back();
+    }
+}

src/Http/Requests/News/NewsRequest.php

@@ -0,0 +1,25 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Blumilk\Meetup\Core\Http\Requests\News;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class NewsRequest extends FormRequest
+{
+    public function rules(): array
+    {
+        return [
+            "title" => "required|string",
+            "text" => "required|string",
+        ];
+    }
+
+    protected function prepareForValidation(): void
+    {
+        $this->merge([
+            "text" => strip_tags($this->text),
+        ]);
+    }
+}

src/Http/Routing/WebRouting.php

@@ -12,6 +12,7 @@
 use Blumilk\Meetup\Core\Http\Controllers\ContactController;
 use Blumilk\Meetup\Core\Http\Controllers\InvitationController;
 use Blumilk\Meetup\Core\Http\Controllers\MeetupController;
+use Blumilk\Meetup\Core\Http\Controllers\NewsController;
 use Blumilk\Meetup\Core\Http\Controllers\NewsletterSubscriberController;
 use Blumilk\Meetup\Core\Http\Controllers\OrganizationController;
 use Blumilk\Meetup\Core\Http\Controllers\OrganizationProfileController;
@@ -95,6 +96,15 @@ public function wire(): void
             $this->router->delete("/speakers/{speaker}", "destroy")->name("speakers.destroy");
         });
 
+        $this->router->controller(NewsController::class)->group(function (): void {
+            $this->router->get("/news", "index")->name("news");
+            $this->router->get("/news/create", "create")->middleware("auth")->name("news.create");
+            $this->router->post("/news", "store")->middleware("auth")->name("news.store");
+            $this->router->get("/news/{news}/edit", "edit")->middleware("auth")->name("news.edit");
+            $this->router->put("/news/{news}", "update")->middleware("auth")->name("news.update");
+            $this->router->delete("/news/{news}", "destroy")->middleware("auth")->name("news.destroy");
+        });
+
         $this->router->controller(NewsletterSubscriberController::class)->group(function (): void {
             $this->router->get("/newsletter", "create")->name("newsletter");
             $this->router->post("/newsletter/subscribe", "store")->name("newsletter.store");

src/Models/News.php

@@ -8,11 +8,12 @@
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Support\Carbon;
+use Illuminate\Support\Str;
 
 /**
  * @property int $id
  * @property string $name
- * @property string|null $content
+ * @property string|null $text
  * @property Carbon|null $createdAt
  * @property Carbon|null $updatedAt
  * @property-read User $user
@@ -22,8 +23,11 @@ class News extends Model
     use HasFactory;
 
     protected $fillable = [
+        "author_id",
+        "slug",
+        "title",
         "name",
-        "content",
+        "text",
     ];
     protected $casts = [
         "date:" . Formats::DATETIME,
@@ -33,4 +37,12 @@ public function user(): BelongsTo
     {
         return $this->belongsTo(User::class);
     }
+
+    protected static function boot(): void
+    {
+        parent::boot();
+        static::creating(function (self $news): void {
+            $news->slug = Str::slug($news->title);
+        });
+    }
 }

src/Models/User.php

@@ -72,6 +72,11 @@ public function socialAccounts(): HasMany
         return $this->hasMany(SocialAccount::class);
     }
 
+    public function news(): HasMany
+    {
+        return $this->hasMany(News::class);
+    }
+
     protected static function newFactory(): UserFactory
     {
         return UserFactory::new();

webpack.mix.js

@@ -6,4 +6,4 @@ mix
     .setPublicPath('resources/static')
     .postCss('resources/css/app.css', 'resources/static/css', [
         require('tailwindcss'),
-    ]);
+    ]);