Merge pull request #6308 from christianbeeznest/GH-5454-2

Pages: Support public view by slug and admin preview by ID - refs #5454

Author: christianbeeznest

assets/vue/components/page/Form.vue

@@ -18,15 +18,15 @@
 
     <p
       class="text-sm m-2 text-gray-500"
-      v-if="props.modelValue.slug || v$.item.slug.$model"
+      v-if="pageId"
     >
       {{ t("Preview") }}:
       <a
-        :href="`/page/${v$.item.slug.$model || props.modelValue.slug}`"
+        :href="`/pages/${pageId}/preview`"
         target="_blank"
         class="text-blue-600 underline"
       >
-        {{ window.location.origin + "/page/" + (v$.item.slug.$model || props.modelValue.slug) }}
+        {{ window.location.origin + `/pages/${pageId}/preview` }}
       </a>
     </p>
 
@@ -109,6 +109,13 @@ let categories = ref([])
 
 const findAllPageCategories = async () => (categories.value = await pageCategoryService.findAll())
 
+const pageId = computed(() => {
+  const rawId = props.modelValue?.["@id"]
+  if (!rawId) return null
+  const matches = rawId.match(/\/(\d+)$/)
+  return matches ? matches[1] : null
+})
+
 findAllPageCategories()
 
 const validations = {

assets/vue/views/page/List.vue

@@ -66,25 +66,25 @@
     <Column :exportable="false">
       <template #body="slotProps">
         <div class="text-right space-x-2">
-          <!--          <Button-->
-          <!--            class="p-button-icon-only p-button-plain p-button-outlined p-button-sm"-->
-          <!--            icon="mdi mdi-information"-->
-          <!--            @click="showHandler(slotProps.data)"-->
-          <!--          />-->
-
           <Button
             v-if="securityStore.isAuthenticated"
             class="p-button-icon-only p-button-plain p-button-outlined p-button-sm"
             icon="mdi mdi-pencil"
             @click="goToEditItem(slotProps.data)"
           />
-
           <Button
             v-if="securityStore.isAuthenticated"
             class="p-button-icon-only p-button-danger p-button-outlined p-button-sm"
             icon="mdi mdi-delete"
             @click="confirmDeleteItem(slotProps.data)"
           />
+          <Button
+            v-if="slotProps.data.enabled && slotProps.data.slug"
+            class="p-button-icon-only p-button-plain p-button-outlined p-button-sm"
+            icon="mdi mdi-link-variant"
+            :title="t('Show public link')"
+            @click="showPublicLinkDialog(slotProps.data)"
+          />
         </div>
       </template>
     </Column>
@@ -121,16 +121,17 @@
 
     <template #footer>
       <Button
-        class="p-button-text"
-        icon="pi pi-times"
-        label="Cancel"
-        @click="hideDialog"
+        v-if="securityStore.isAuthenticated"
+        class="p-button-icon-only p-button-plain p-button-outlined p-button-sm"
+        icon="mdi mdi-pencil"
+        @click="goToEditItem(slotProps.data)"
       />
+
       <Button
-        class="p-button-text"
-        icon="pi pi-check"
-        label="Save"
-        @click="saveItem"
+        v-if="securityStore.isAuthenticated"
+        class="p-button-icon-only p-button-danger p-button-outlined p-button-sm"
+        icon="mdi mdi-delete"
+        @click="confirmDeleteItem(slotProps.data)"
       />
     </template>
   </Dialog>
@@ -198,6 +199,24 @@
       />
     </template>
   </Dialog>
+
+  <Dialog
+    v-model:visible="publicLinkDialogVisible"
+    :header="t('Public link')"
+    :modal="true"
+    :style="{ width: '500px' }"
+  >
+    <div class="text-center">
+      <p class="text-sm mb-2">{{ t("You can share or copy this link:") }}</p>
+      <InputText
+        v-model="publicLink"
+        readonly
+        class="w-full mb-3 cursor-pointer"
+        @focus="$event.target.select()"
+      />
+      <p class="text-xs text-gray-500 italic">{{ t("Select the link above and press Ctrl+C to copy it") }}</p>
+    </div>
+  </Dialog>
 </template>
 
 <script setup>
@@ -242,8 +261,6 @@ onMounted(() => {
 })
 
 const items = computed(() => store.state["page"].recents)
-
-// const deletedPage = computed(() => store.state['page'].deleted);
 const isLoading = computed(() => store.state["page"].isLoading)
 const totalItems = computed(() => store.state["page"].totalItems)
 
@@ -270,31 +287,6 @@ const sortingChanged = (event) => {
   onUpdateOptions(options.value)
 }
 
-/*const openNew = () => {
-  item.value = {};
-  submitted.value = false;
-  itemDialog.value = true;
-};*/
-
-const saveItem = () => {
-  submitted.value = true
-
-  if (item.value.title.trim()) {
-    if (!item.value.id) {
-      // item.value.creator
-      //createCategory.value(item.value);
-      toast.add({
-        severity: "success",
-        detail: t("Saved"),
-        life: 3500,
-      })
-    }
-
-    itemDialog.value = false
-    item.value = {}
-  }
-}
-
 const deleteMultipleItems = () => {
   console.log("deleteMultipleItems".selectedItems.value)
 
@@ -311,31 +303,25 @@ const deleteMultipleItems = () => {
 
   onUpdateOptions(options.value)
 }
-
-const hideDialog = () => {
-  itemDialog.value = false
-  submitted.value = false
-}
-
-/*const editItem = (item) => {
-  item.value = { ...item };
-  itemDialog.value = true;
-};*/
-
 const confirmDeleteItem = (itemToDelete) => {
   item.value = itemToDelete
   deleteItemDialog.value = true
 }
 
-/*const confirmDeleteMultiple = () => {
-  deleteMultipleDialog.value = true;
-};*/
-
 const btnCofirmSingleDeleteOnClick = () => {
   deleteItem(item)
 
   item.value = {}
 
   deleteItemDialog.value = false
 }
+
+const publicLinkDialogVisible = ref(false)
+const publicLink = ref("")
+
+const showPublicLinkDialog = (item) => {
+  if (!item.slug) return
+  publicLink.value = `${window.location.origin}/pages/${item.slug}`
+  publicLinkDialogVisible.value = true
+}
 </script>

src/CoreBundle/Controller/PageController.php

@@ -0,0 +1,55 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Chamilo\CoreBundle\Controller;
+
+use Chamilo\CoreBundle\Repository\PageRepository;
+use Chamilo\CoreBundle\ServiceHelper\AccessUrlHelper;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+use Symfony\Component\Security\Http\Attribute\IsGranted;
+
+#[Route('/pages')]
+class PageController extends AbstractController
+{
+    public function __construct(
+        private readonly AccessUrlHelper $accessUrlHelper
+    ) {}
+
+    #[Route('/{slug}', name: 'public_page_show', methods: ['GET'])]
+    public function show(string $slug, PageRepository $pageRepo): Response
+    {
+        $accessUrl = $this->accessUrlHelper->getCurrent();
+
+        $page = $pageRepo->findOneBy([
+            'slug' => $slug,
+            'enabled' => true,
+            'url' => $accessUrl,
+        ]);
+
+        if (!$page) {
+            throw $this->createNotFoundException('Page not found or not available for this access URL');
+        }
+
+        return $this->render('@ChamiloCore/Page/show.html.twig', [
+            'page' => $page,
+        ]);
+    }
+
+    #[Route('/{id}/preview', name: 'admin_page_preview', methods: ['GET'])]
+    #[IsGranted('ROLE_ADMIN')]
+    public function preview(int $id, PageRepository $pageRepo): Response
+    {
+        $page = $pageRepo->find($id);
+
+        if (!$page) {
+            throw $this->createNotFoundException('Page not found');
+        }
+
+        return $this->render('@ChamiloCore/Page/preview.html.twig', [
+            'page' => $page,
+        ]);
+    }
+}

src/CoreBundle/Resources/views/Page/preview.html.twig

@@ -0,0 +1,13 @@
+{% extends '@ChamiloCore/Layout/layout_one_col.html.twig' %}
+
+{% block content %}
+    <section class="py-8 max-w-4xl mx-auto border border-yellow-300 bg-yellow-50 p-4 rounded">
+        <div class="text-sm text-yellow-700 mb-2">
+            {{ 'Page preview for administrators only'|trans }}
+        </div>
+        <h1 class="text-3xl font-bold mb-4">{{ page.title }}</h1>
+        <article class="prose prose-lg">
+            {{ page.content|raw }}
+        </article>
+    </section>
+{% endblock %}

src/CoreBundle/Resources/views/Page/show.html.twig

@@ -0,0 +1,10 @@
+{% extends '@ChamiloCore/Layout/layout_one_col.html.twig' %}
+
+{% block content %}
+    <section class="py-8 max-w-4xl mx-auto">
+        <h1 class="text-3xl font-bold mb-4">{{ page.title }}</h1>
+        <article class="prose prose-lg">
+            {{ page.content|raw }}
+        </article>
+    </section>
+{% endblock %}