Merge pull request #657 from code16/scoped-page-alerts

Scoped page alerts

Author: aguingand

demo/app/Sharp/Dashboard/DemoDashboard.php

@@ -135,6 +135,7 @@ protected function buildPageAlert(PageAlert $pageAlert): void
     {
         $pageAlert
             ->setLevelInfo()
+            ->onSection('stats-section')
             ->setMessage(
                 sprintf(
                     'Graphs below are delimited by period %s - %s (and yes, visits figures are randomly generated)',

demo/app/Sharp/Posts/PostShow.php

@@ -118,14 +118,13 @@ protected function buildPageAlert(PageAlert $pageAlert): void
     {
         $pageAlert
             ->setLevelInfo()
-            ->setMessage(function (array $data) {
-                return $data['publication']['is_planned']
-                    ? sprintf(
-                        'This post is planned for publication, on %s',
-                        $data['publication']['published_at'],
-                    )
-                    : null;
-            });
+            ->setMessage(fn (array $data) => $data['publication']['is_planned']
+                ? sprintf(
+                    'This post is planned for publication, on %s',
+                    $data['publication']['published_at'],
+                )
+                : null
+            );
     }
 
     public function getInstanceCommands(): ?array

docs/guide/page-alerts.md

@@ -91,3 +91,33 @@ class MyEntityList extends SharpEntityList
 }
 ```
 
+## Attach the page alert to a specific section (Show Page and Dashboard only)
+
+The `onSection()` method allows you to specify the section where the alert should be displayed (instead of the default, the top of the page):
+
+```php
+class MyShow extends SharpShow
+{
+    // ...
+    
+    protected function buildShowLayout(ShowLayout $showLayout): void
+    {
+        $showLayout
+            ->addSection(function (ShowLayoutSection $section) {
+                $section
+                    ->setKey('content')
+                    ->addColumn(/* ... */);
+            })
+            ->addSection(/* ... */);
+    }
+    
+    protected function buildPageAlert(PageAlert $pageAlert): void
+    {
+        $pageAlert
+            ->setMessage('This page has been edited recently.')
+            ->onSection('content');
+    }
+}
+```
+
+

resources/js/Pages/Dashboard/Dashboard.vue

@@ -62,7 +62,7 @@
         </template>
 
         <div class="container @container mx-auto">
-            <div :class="dashboard.pageAlert ? 'pt-4' : 'pt-10'">
+            <div :class="dashboard.pageAlert && !dashboard.pageAlert.sectionKey ? 'pt-4' : 'pt-10'">
                 <DashboardComponent
                     :dashboard-key="dashboardKey"
                     :dashboard="dashboard"

resources/js/Pages/Show/Show.vue

@@ -134,8 +134,8 @@
 
         <WithCommands :commands="commands">
             <div class="@container">
-                <div :class="show.pageAlert ? 'pt-4' : 'pt-6 @3xl:pt-10'">
-                    <template v-if="show.pageAlert">
+                <div :class="show.pageAlert && !show.pageAlert.sectionKey ? 'pt-4' : 'pt-6 @3xl:pt-10'">
+                    <template v-if="show.pageAlert && !show.pageAlert.sectionKey">
                         <div class="container">
                             <PageAlert
                                 class="mb-4"
@@ -153,6 +153,14 @@
                                 v-show="show.sectionShouldBeVisible(section, locale) || i == 0"
                                 v-slot="{ collapsed, onCollapseToggle }"
                             >
+                                <template v-if="show.pageAlert?.sectionKey && show.pageAlert.sectionKey === section.key">
+                                    <div class="container">
+                                        <PageAlert
+                                            class="mb-4"
+                                            :page-alert="show.pageAlert"
+                                        />
+                                    </div>
+                                </template>
                                 <template v-if="show.sectionHasField(section, 'entityList')">
                                     <template v-for="column in section.columns">
                                         <template v-for="row in column.fields">

resources/js/dashboard/Dashboard.ts

@@ -9,7 +9,7 @@ export class Dashboard {
     layout: DashboardData['layout'];
     data: DashboardData['data'];
     filterValues: DashboardData['filterValues'];
-    pageAlert:DashboardData['pageAlert'];
+    pageAlert: DashboardData['pageAlert'];
     query: DashboardData['query'];
 
     dashboardKey: string;

resources/js/dashboard/components/Dashboard.vue

@@ -66,7 +66,7 @@
 
 <template>
     <WithCommands :commands="commands">
-        <template v-if="dashboard?.pageAlert">
+        <template v-if="dashboard && dashboard.pageAlert && !dashboard.pageAlert.sectionKey">
             <PageAlert
                 class="mb-8"
                 :page-alert="dashboard.pageAlert"
@@ -186,6 +186,12 @@
                                         </h2>
                                     </template>
                                 </template>
+                                <template v-if="dashboard.pageAlert?.sectionKey && dashboard.pageAlert.sectionKey === section.key">
+                                    <PageAlert
+                                        class="mb-4"
+                                        :page-alert="dashboard.pageAlert"
+                                    />
+                                </template>
                                 <template v-if="dashboard.sectionVisibleFilters(section)?.length || dashboard.visibleCommands?.[section.key]?.flat().length">
                                     <div class="flex gap-2 mb-4">
                                         <template v-if="dashboard.sectionVisibleFilters(section)?.length">

resources/js/types/generated.d.ts

@@ -723,6 +723,7 @@ export type OrderedListWidgetData = {
 export type PageAlertData = {
   level: PageAlertLevel;
   text: string;
+  sectionKey: string | null;
   buttonLabel: string | null;
   buttonUrl: string | null;
 };

src/Data/PageAlertData.php

@@ -12,6 +12,7 @@ final class PageAlertData extends Data
     public function __construct(
         public PageAlertLevel $level,
         public string $text,
+        public ?string $sectionKey = null,
         public ?string $buttonLabel = null,
         public ?string $buttonUrl = null,
     ) {}

src/Utils/PageAlerts/PageAlert.php

@@ -12,6 +12,7 @@ class PageAlert
     protected PageAlertLevel $pageAlertLevel = PageAlertLevel::Info;
     protected ?string $text;
     protected array $data;
+    protected ?string $sectionKey = null;
     protected ?string $buttonLabel = null;
     protected ?string $buttonUrl = null;
 
@@ -54,6 +55,13 @@ public function setLevelSecondary(): self
         return $this->setLevel(PageAlertLevel::Secondary);
     }
 
+    public function onSection(string $sectionKey): self
+    {
+        $this->sectionKey = $sectionKey;
+
+        return $this;
+    }
+
     public function setMessage(Closure|string $message): self
     {
         $this->text = $message instanceof Closure
@@ -77,6 +85,7 @@ final public function toArray(): ?array
             ? Arr::whereNotNull([
                 'level' => $this->pageAlertLevel,
                 'text' => $this->text,
+                'sectionKey' => $this->sectionKey,
                 'buttonLabel' => $this->buttonLabel,
                 'buttonUrl' => $this->buttonUrl,
             ])