Add channels index, show and store

app/Http/Controllers/IndexingChannelController.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Channel;
+
+class IndexingChannelController
+{
+    public function __invoke()
+    {
+
+        return inertia()->render('Channels/index', ['channels' => Channel::all()]);
+    }
+}

app/Http/Controllers/ShowingChannelController.php

@@ -0,0 +1,15 @@
+<?php
+
+
+namespace App\Http\Controllers;
+
+
+use App\Models\Channel;
+
+class ShowingChannelController
+{
+    public function __invoke(Channel $channel)
+    {
+        return inertia()->render('Channels/Videos/index', ['channel' => $channel]);
+    }
+}

app/Http/Controllers/StoringChannelController.php

@@ -0,0 +1,18 @@
+<?php
+
+
+namespace App\Http\Controllers;
+
+
+use App\Models\Channel;
+use Illuminate\Support\Arr;
+
+class StoringChannelController
+{
+    public function __invoke()
+    {
+        Channel::create(array_merge(request()->only(['name', 'identifier']),['user_id'=>auth()->id()]));
+
+        return back();
+    }
+}

app/Models/Channel.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Channel extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'name',
+        'identifier',
+        'user_id'
+    ];
+}

database/migrations/2021_09_03_141146_create_channels_table.php

@@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateChannelsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('channels', function (Blueprint $table) {
+            $table->id();
+            $table->string('name');
+            $table->string('identifier');
+            $table->foreignId('user_id');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('channels');
+    }
+}

public/mix-manifest.json

@@ -0,0 +1,4 @@
+{
+    "/js/app.js": "/js/app.js",
+    "/css/app.css": "/css/app.css"
+}

resources/js/Pages/Channels/Videos/index.vue

@@ -0,0 +1,57 @@
+<template>
+    <app-layout title="Dashboard">
+        <template #header>
+            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+                {{ channel.name }}
+            </h2>
+            <div class="flex justify-end">
+                <form @submit.prevent="submit">
+                    <button
+                        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+                        type="submit">
+                        Sync Videos
+                    </button>
+                </form>
+            </div>
+        </template>
+
+        <div class="py-12">
+            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+                <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
+                    <div class="text-center p-6 border-gray-200">
+                        <ul>
+                            <li v-for="video in channel.video" :key="video.id" class="font-bold">{{ video.name }}</li>
+                        </ul>
+                    </div>
+                    <p class="text-center text-gray-500 text-xs">
+                        &copy;2021 Ahmed Helal Ahmed. All rights reserved.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </app-layout>
+</template>
+
+<script>
+import {defineComponent} from 'vue'
+import AppLayout from '@/Layouts/AppLayout.vue'
+import {Inertia} from '@inertiajs/inertia'
+
+export default defineComponent({
+    setup() {
+        function submit() {
+            if (confirm('Sync videos! Are you sure?')) {
+                Inertia.post('/sync-videos');
+            }
+        }
+
+        return {submit}
+    },
+    props: {
+        channel: Object,
+    },
+    components: {
+        AppLayout,
+    },
+})
+</script>

resources/js/Pages/Channels/index.vue

@@ -0,0 +1,82 @@
+<template>
+    <app-layout title="Dashboard">
+        <template #header>
+            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+                Dashboard
+            </h2>
+        </template>
+
+        <div class="py-12">
+            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+                <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
+                    <div class="w-full ">
+                        <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" @submit.prevent="submit">
+                            <div class="mb-4">
+                                <label class="block text-gray-700 text-sm font-bold mb-2" for="name">
+                                    Name
+                                </label>
+                                <input v-model="form.name"
+                                       class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                                       id="name" type="text" placeholder="Username">
+                            </div>
+                            <div class="mb-6">
+                                <label class="block text-gray-700 text-sm font-bold mb-2" for="identifier">
+                                    Identifier
+                                </label>
+                                <input v-model="form.identifier"
+                                       class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
+                                       id="identifier" type="password" placeholder="******************">
+                            </div>
+                            <div class="flex items-center justify-between">
+                                <button
+                                    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+                                    type="submit">
+                                    Submit
+                                </button>
+                            </div>
+                        </form>
+
+                    </div>
+
+                    <div class="text-center p-6 border-gray-200">
+                        <ul>
+                            <li v-for="channel in channels" :key="channel.id" class="font-bold">
+                                <a :href="route('channels.show',channel.id)">{{ channel.name }}</a>
+                            </li>
+                        </ul>
+                    </div>
+                    <p class="text-center text-gray-500 text-xs">
+                        &copy;2021 Ahmed Helal Ahmed. All rights reserved.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </app-layout>
+</template>
+
+<script>
+import {defineComponent, reactive} from 'vue'
+import AppLayout from '@/Layouts/AppLayout.vue'
+import {Inertia} from '@inertiajs/inertia'
+
+export default defineComponent({
+    setup() {
+        const form = reactive({
+            name: null,
+            identifier: null,
+        })
+
+        function submit() {
+            Inertia.post('/channels', form)
+        }
+
+        return {form, submit}
+    },
+    props: {
+        channels: Array,
+    },
+    components: {
+        AppLayout,
+    },
+})
+</script>

routes/web.php

@@ -1,5 +1,8 @@
 <?php
 
+use App\Http\Controllers\IndexingChannelController;
+use App\Http\Controllers\ShowingChannelController;
+use App\Http\Controllers\StoringChannelController;
 use Illuminate\Foundation\Application;
 use Illuminate\Support\Facades\Route;
 use Inertia\Inertia;
@@ -27,3 +30,14 @@
 Route::middleware(['auth:sanctum', 'verified'])->get('/dashboard', function () {
     return Inertia::render('Dashboard');
 })->name('dashboard');
+
+
+Route::middleware(['auth:sanctum', 'verified'])
+    ->get('/channels', IndexingChannelController::class)
+    ->name('channels.index');
+Route::middleware(['auth:sanctum', 'verified'])
+    ->post('/channels', StoringChannelController::class)
+    ->name('channels.store');
+Route::middleware(['auth:sanctum', 'verified'])
+    ->get('/channels/{channel}', ShowingChannelController::class)
+    ->name('channels.show');