Build: Add Support of cover image for pages and also grid view for list of pages

app/App/helpers.php

@@ -128,3 +128,18 @@ function sortUrl(string $path, array $data, array $overrideData = []): string
 
     return url($path . '?' . implode('&', $queryStringSections));
 }
+
+function getCover($entity, $type)
+{
+    if (!in_array($type, ['page', 'book', 'bookshelf'])) {
+        return '';
+    }
+
+    if ($type === 'page') {
+        return $entity->getPageCover();
+    }
+
+    if ($type === 'book' || $type === 'bookshelf') {
+        return $entity->getBookCover();
+    }
+}

app/Config/setting-defaults.php

@@ -41,6 +41,7 @@
         'bookshelves_view_type' => env('APP_VIEWS_BOOKSHELVES', 'grid'),
         'bookshelf_view_type'   => env('APP_VIEWS_BOOKSHELF', 'grid'),
         'books_view_type'       => env('APP_VIEWS_BOOKS', 'grid'),
+        'pages_view_type'       => env('APP_VIEWS_BOOKS', 'grid'),
     ],
 
 ];

app/Entities/Controllers/ChapterController.php

@@ -75,6 +75,7 @@ public function store(Request $request, string $bookSlug)
      */
     public function show(string $bookSlug, string $chapterSlug)
     {
+        $view = setting()->getForCurrentUser(key: 'pages_view_type');
         $chapter = $this->queries->findVisibleBySlugsOrFail($bookSlug, $chapterSlug);
         $this->checkOwnablePermission('chapter-view', $chapter);
 
@@ -96,6 +97,7 @@ public function show(string $bookSlug, string $chapterSlug)
             'next'           => $nextPreviousLocator->getNext(),
             'previous'       => $nextPreviousLocator->getPrevious(),
             'referenceCount' => $this->referenceFetcher->getReferenceCountToEntity($chapter),
+            'view'    => $view,
         ]);
     }
 

app/Entities/Controllers/PageController.php

@@ -222,6 +222,12 @@ public function update(Request $request, string $bookSlug, string $pageSlug)
         $page = $this->queries->findVisibleBySlugsOrFail($bookSlug, $pageSlug);
         $this->checkOwnablePermission('page-update', $page);
 
+        if ($request->has('image_reset')) {
+            $request['image'] = null;
+        } elseif (array_key_exists('image', $request->all()) && is_null($request['image'])) {
+            unset($request['image']);
+        }
+
         $this->pageRepo->update($page, $request->all());
 
         return redirect($page->getUrl());

app/Entities/Models/Page.php

@@ -2,10 +2,12 @@
 
 namespace BookStack\Entities\Models;
 
+use BookStack\Uploads\Image;
 use BookStack\Entities\Tools\PageContent;
 use BookStack\Entities\Tools\PageEditorType;
 use BookStack\Permissions\PermissionApplicator;
 use BookStack\Uploads\Attachment;
+use Exception;
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\Collection;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
@@ -24,12 +26,13 @@
  * @property bool         $draft
  * @property int          $revision_count
  * @property string       $editor
+ * @property Image|null   $cover
  * @property Chapter      $chapter
  * @property Collection   $attachments
  * @property Collection   $revisions
  * @property PageRevision $currentRevision
  */
-class Page extends BookChild
+class Page extends BookChild implements HasCoverImage
 {
     use HasFactory;
 
@@ -143,4 +146,28 @@ public function forJsonDisplay(): self
 
         return $refreshed;
     }
+
+    public function getPageCover(int $width = 440, int $height = 250): string
+    {
+        $default = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+        if (!$this->image_id || !$this->cover) {
+            return $default;
+        }
+
+        try {
+            return $this->cover->getThumb($width, $height, false) ?? $default;
+        } catch (Exception $err) {
+            return $default;
+        }
+    }
+
+    public function cover(): BelongsTo
+    {
+        return $this->belongsTo(Image::class, 'image_id');
+    }
+
+    public function coverImageTypeKey(): string
+    {
+        return 'cover_page';
+    }
 }

app/Entities/Queries/PageQueries.php

@@ -15,7 +15,7 @@ class PageQueries implements ProvidesEntityQueries
     ];
     protected static array $listAttributes = [
         'name', 'id', 'slug', 'book_id', 'chapter_id', 'draft',
-        'template', 'text', 'created_at', 'updated_at', 'priority', 'owned_by',
+        'template', 'text', 'created_at', 'updated_at', 'priority', 'owned_by','image_id',
     ];
 
     public function start(): Builder
@@ -75,7 +75,7 @@ public function visibleForList(): Builder
 
     public function visibleForChapterList(int $chapterId): Builder
     {
-        return $this->visibleForList()
+        return $this->visibleForListWithCover()
             ->where('chapter_id', '=', $chapterId)
             ->orderBy('draft', 'desc')
             ->orderBy('priority', 'asc');
@@ -109,4 +109,9 @@ protected function mergeBookSlugForSelect(array $columns): array
                 ->whereColumn('books.id', '=', 'pages.book_id');
         }]);
     }
+
+    public function visibleForListWithCover(): Builder
+    {
+        return $this->visibleForList()->with('cover');
+    }
 }

app/Entities/Repos/PageRepo.php

@@ -78,6 +78,10 @@ public function publishDraft(Page $draft, array $input): Page
         $this->updateTemplateStatusAndContentFromInput($draft, $input);
         $this->baseRepo->update($draft, $input);
 
+        if (array_key_exists('image', $input)) {
+            $this->baseRepo->updateCoverImage($draft, $input['image'], $input['image'] === null);
+        }
+
         $summary = trim($input['summary'] ?? '') ?: trans('entities.pages_initial_revision');
         $this->revisionRepo->storeNewForPage($draft, $summary);
         $draft->refresh();
@@ -116,6 +120,10 @@ public function update(Page $page, array $input): Page
             $this->revisionRepo->storeNewForPage($page, $summary);
         }
 
+        if (array_key_exists('image', $input)) {
+            $this->baseRepo->updateCoverImage($page, $input['image'], $input['image'] === null);
+        }
+
         Activity::add(ActivityType::PAGE_UPDATE, $page);
 
         return $page;

app/Users/Controllers/UserPreferencesController.php

@@ -18,7 +18,7 @@ public function __construct(
      */
     public function changeView(Request $request, string $type)
     {
-        $valueViewTypes = ['books', 'bookshelves', 'bookshelf'];
+        $valueViewTypes = ['books', 'bookshelves', 'bookshelf','pages'];
         if (!in_array($type, $valueViewTypes)) {
             return $this->redirectToRequest($request);
         }

database/migrations/2024_10_24_074404_add_image_id_in_page_table.php

@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('pages', function (Blueprint $table) {
+            $table->integer('image_id')->after('priority')->nullable()->default(null);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('page', function (Blueprint $table) {
+            //
+        });
+    }
+};

resources/sass/_colors.scss

@@ -103,3 +103,6 @@
 .bg-bookshelf {
   background-color: var(--color-bookshelf);
 }
+.bg-page {
+  background-color: var(--color-page);
+}

resources/views/chapters/show.blade.php

@@ -26,11 +26,19 @@
         <div refs="entity-search@contentView" class="chapter-content">
             <div class="text-muted break-text">{!! $chapter->descriptionHtml() !!}</div>
             @if(count($pages) > 0)
-                <div class="entity-list book-contents">
-                    @foreach($pages as $page)
-                        @include('pages.parts.list-item', ['page' => $page])
-                    @endforeach
-                </div>
+                @if($view === 'list')
+                    <div class="entity-list book-contents">
+                        @foreach($pages as $page)
+                            @include('pages.parts.list-item', ['page' => $page])
+                        @endforeach
+                    </div>
+                @else
+                    <div class="grid third">
+                        @foreach($pages as $page)
+                            @include('entities.grid-item', ['entity' => $page])
+                        @endforeach
+                    </div>
+                @endif   
             @else
                 <div class="mt-xl">
                     <hr>
@@ -107,6 +115,8 @@
         <h5>{{ trans('common.actions') }}</h5>
         <div class="icon-list text-link">
 
+            @include('entities.view-toggle', ['view' => $view, 'type' => 'pages'])
+
             @if(userCan('page-create', $chapter))
                 <a href="{{ $chapter->getUrl('/create-page') }}" data-shortcut="new" class="icon-list-item">
                     <span>@icon('add')</span>

resources/views/entities/grid-item.blade.php

@@ -1,7 +1,7 @@
 <a href="{{ $entity->getUrl() }}" class="grid-card"
    data-entity-type="{{ $entity->getType() }}" data-entity-id="{{ $entity->id }}">
     <div class="bg-{{ $entity->getType() }} featured-image-container-wrap">
-        <div class="featured-image-container" @if($entity->cover) style="background-image: url('{{ $entity->getBookCover() }}')"@endif>
+        <div class="featured-image-container" @if($entity->cover) style="background-image: url('{{ getCover($entity,$entity->getType()) }}')"@endif>
         </div>
         @icon($entity->getType())
     </div>

resources/views/pages/edit.blade.php

@@ -5,7 +5,7 @@
 @section('content')
 
     <div id="main-content" class="flex-fill flex height-fill">
-        <form action="{{ $page->getUrl() }}" autocomplete="off" data-page-id="{{ $page->id }}" method="POST" class="flex flex-fill">
+        <form action="{{ $page->getUrl() }}" autocomplete="off" data-page-id="{{ $page->id }}" method="POST" class="flex flex-fill" enctype="multipart/form-data">
             {{ csrf_field() }}
 
             @if(!$isDraft) {{ method_field('PUT') }} @endif

resources/views/pages/parts/editor-toolbox.blade.php

@@ -11,6 +11,7 @@
             @if($comments->enabled())
                 <button type="button" refs="editor-toolbox@tab-button" data-tab="comments" title="{{ trans('entities.comments') }}">@icon('comment')</button>
             @endif
+            <button type="button" refs="editor-toolbox@tab-button" data-tab="cover_image" title="{{ trans('common.cover_image') }}">@icon('image')</button>
         </div>
     </div>
 
@@ -37,4 +38,18 @@
         @include('pages.parts.toolbox-comments')
     @endif
 
+    <div refs="editor-toolbox@tab-content" data-tab-content="cover_image" class="toolbox-tab-content">
+        <h4>{{ trans('common.cover_image') }}</h4>
+        <div class="px-l">
+                <p class="small">{{ trans('common.cover_image_description') }}</p>
+
+                @include('form.image-picker', [
+                    'defaultImage' => url('/book_default_cover.png'),
+                    'currentImage' => (isset($page) && $page->cover) ? $page->getPageCover() : url('/book_default_cover.png') ,
+                    'name' => 'image',
+                    'imageClass' => 'cover'
+                ])
+        </div>
+    </div>
+
 </div>

resources/views/pages/parts/list-item.blade.php

@@ -1,5 +1,12 @@
-@component('entities.list-item-basic', ['entity' => $page])
-    <div class="entity-item-snippet">
-        <p class="text-muted break-text">{{ $page->getExcerpt() }}</p>
+<a href="{{ $page->getUrl() }}" class="chapter entity-list-item " data-entity-type="chapter" data-entity-id="{{$page->id}}">
+    <span class="icon text-page">@icon('page')</span>
+    <div class="entity-list-item-image bg-page mr-xxs" style="background-image: url('{{$page->getPageCover()}}');width: 120px;">
+        @icon('page')
     </div>
-@endcomponent
+    <div class="content">
+        <h4 class="entity-list-item-name break-text">{{ $page->name }}</h4>
+        <div class="entity-item-snippet">
+            <p class="text-muted break-text">{{ $page->getExcerpt() }}</p>
+        </div>
+    </div>
+</a>