Add admin pages views

resources/views/admin/pages/edit.blade.php

@@ -1,19 +1,37 @@
 @extends('admin.partial.template')
 
+@include('admin.settings.sidebar')
+
 @section('section')
   <div class="title">
     <h3 class="font-weight-bold">Edit Page</h3>
-    <p class="lead">{{request()->query('page')}}</p>
+    <p class="lead">{{$page->slug}}</p>
   </div>
   <hr>
 
   <div>
+    <input type="hidden" id="slug" name="slug" value="{{$page->slug}}">
+    <input class="form-control form-control-lg" id="title" name="title" placeholder="Title">
+    <p class="small text-muted">
+      Page URL: <span class="page-url font-weight-bold">{{$page->url()}}</span>
+      <span class="pl-1"><a href="#" class="font-weight-bold">Edit</a></span>
+    </p>
     <div id="editor" style="height: 400px">
-      <p class="lead">PixelFed is a federated image sharing platform, powered by the <a href="#">ActivityPub</a> protocol.</p>
+      {!!$page->content!!}
+    </div>
+    <div class="mt-3 d-flex justify-content-between">
+      <div>
+        <div class="custom-control custom-switch d-inline pr-3">
+          <input type="checkbox" class="custom-control-input" id="activeSwitch" {{$page->active?'checked="true"':''}}>
+          <label class="custom-control-label font-weight-bold" for="activeSwitch">Active</label>
+        </div>
+        <a class="btn btn-light font-weight-bold py-0" href="#">Set Expire Date</a>
+      </div>
+      <div>
+        <a class="btn btn-light font-weight-bold py-0" href="#">Preview</a>
+        <a class="btn btn-primary font-weight-bold py-0 btn-save" href="#">Save</a>
+      </div>
     </div>
-    <p class="mt-3 text-right mb-0">
-      <a class="btn btn-primary font-weight-bold" href="#">Save</a>
-    </p>
   </div>
 
 @endsection
@@ -38,8 +56,29 @@
 
 <!-- Initialize Quill editor -->
 <script>
-  var quill = new Quill('#editor', {
+  window.editor = new Quill('#editor', {
     theme: 'snow'
   });
+  $('.btn-save').on('click', function(e) {
+    e.preventDefault();
+    let html = editor.container.firstChild.innerHTML;
+    let title = $('#title').val();
+    let active = $('#activeSwitch')[0].checked;
+    axios.post(window.location.href, {
+      slug: '{{$page->slug}}',
+      title: title,
+      content: html,
+      active: active      
+    }).then((res) => {
+      window.location.href = '{{$page->url()}}';
+    }).catch((err) => {
+      console.log(err)
+    });
+  });
+
+  $('#title').on('change input', function(e) {
+    e.preventDefault();
+    let title = this.value.split(' ').join('-').toLowerCase();
+  })
 </script>
 @endpush

resources/views/admin/pages/home.blade.php

@@ -0,0 +1,47 @@
+@extends('admin.partial.template')
+
+@include('admin.settings.sidebar')
+
+@section('section')
+  <div class="title">
+    <h3 class="font-weight-bold">Pages</h3>
+    <p class="lead">Set custom page content</p>
+  </div>
+  <hr>
+  
+  <div class="table-responsive">
+    <table class="table">
+      <thead class="bg-light">
+        <tr class="text-center">
+          <th scope="col" class="border-0" width="5%">
+            <span>ID</span> 
+          </th>
+          <th scope="col" class="border-0" width="50%">
+            <span>Slug</span>
+          </th>
+          <th scope="col" class="border-0" width="15%">
+            <span>Active</span>
+          </th>
+          <th scope="col" class="border-0" width="30%">
+            <span>Updated</span>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        @foreach($pages as $page)
+        <tr class="font-weight-bold text-center page-row">
+          <th scope="row">
+            <a href="{{$page->editUrl()}}">{{$page->id}}</a>
+          </th>
+          <td>{{$page->slug}}</td>
+          <td>{{$page->active ? 'active':'inactive'}}</td>
+          <td>{{$page->updated_at->diffForHumans(null, true, true, true)}}</td>
+        </tr>
+        @endforeach
+      </tbody>
+    </table>
+  </div>
+  <div class="d-flex justify-content-center mt-5 small">
+    {{$pages->links()}}
+  </div>
+@endsection