Pages: Add slug edition, return to list and pagination memory - refs #5454

assets/vue/components/page/Form.vue

@@ -8,6 +8,28 @@
       :label="t('Title')"
     />
 
+    <BaseInputText
+      id="slug"
+      v-model="v$.item.slug.$model"
+      :error-text="v$.item.slug.$errors.map((error) => error.$message).join('<br>')"
+      :is-invalid="v$.item.slug.$error"
+      :label="t('Friendly URL')"
+    />
+
+    <p
+      class="text-sm m-2 text-gray-500"
+      v-if="props.modelValue.slug || v$.item.slug.$model"
+    >
+      {{ t("Preview") }}:
+      <a
+        :href="`/page/${v$.item.slug.$model || props.modelValue.slug}`"
+        target="_blank"
+        class="text-blue-600 underline"
+      >
+        {{ window.location.origin + "/page/" + (v$.item.slug.$model || props.modelValue.slug) }}
+      </a>
+    </p>
+
     <BaseCheckbox
       id="enabled"
       v-model="v$.item.enabled.$model"
@@ -59,7 +81,7 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from "vue"
+import { computed, nextTick, ref, watch } from "vue"
 import BaseInputText from "../basecomponents/BaseInputText.vue"
 import BaseCheckbox from "../basecomponents/BaseCheckbox.vue"
 import BaseDropdown from "../basecomponents/BaseDropdown.vue"
@@ -89,22 +111,6 @@ const findAllPageCategories = async () => (categories.value = await pageCategory
 
 findAllPageCategories()
 
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    if (!newValue) {
-      return
-    }
-
-    if (!isEmpty(newValue.category) && !isEmpty(newValue.category["@id"])) {
-      emit("update:modelValue", {
-        ...newValue,
-        category: newValue.category["@id"],
-      })
-    }
-  },
-)
-
 const validations = {
   item: {
     title: {
@@ -122,11 +128,35 @@ const validations = {
     category: {
       required,
     },
+    slug: {
+      required,
+    },
   },
 }
 
 const v$ = useVuelidate(validations, { item: computed(() => props.modelValue) })
 
+watch(
+  () => props.modelValue,
+  async (newValue) => {
+    if (!newValue) return
+
+    await nextTick()
+
+    if (!v$.value.item.slug.$model && newValue.slug) {
+      v$.value.item.slug.$model = newValue.slug
+    }
+
+    if (!isEmpty(newValue.category) && !isEmpty(newValue.category["@id"])) {
+      emit("update:modelValue", {
+        ...newValue,
+        category: newValue.category["@id"],
+      })
+    }
+  },
+  { immediate: true },
+)
+
 function btnSaveOnClick() {
   const item = { ...props.modelValue, ...v$.value.item.$model }
 

assets/vue/composables/datatableList.js

@@ -74,8 +74,12 @@ export function useDatatableList(servicePrefix) {
   }
 
   function goToEditItem(item) {
-    let folderParams = route.query
-    folderParams["id"] = item["@id"]
+    const folderParams = {
+      ...route.query,
+      id: item["@id"],
+      page: options.value.page,
+      itemsPerPage: options.value.itemsPerPage,
+    }
 
     if ("folder" === item.filetype || isEmpty(item.filetype)) {
       router.push({
@@ -88,14 +92,12 @@ export function useDatatableList(servicePrefix) {
     if ("file" === item.filetype) {
       folderParams["getFile"] = true
       if (
-        item.resourceNode.firstResourceFile &&
-        item.resourceNode.firstResourceFile.mimeType &&
-        "text/html" === item.resourceNode.firstResourceFile.mimeType
+        item.resourceNode?.firstResourceFile?.mimeType === "text/html"
       ) {
-        //folderParams['getFile'] = true;
+        // Keep getFile = true
       }
 
-      this.$router.push({
+      router.push({
         name: `${servicePrefix}UpdateFile`,
         params: { id: item["@id"] },
         query: folderParams,

assets/vue/views/page/List.vue

@@ -222,6 +222,11 @@ const toast = useToast()
 const layoutMenuItems = inject("layoutMenuItems")
 
 onMounted(() => {
+  const { page, itemsPerPage } = router.currentRoute.value.query
+
+  if (page) options.value.page = parseInt(page)
+  if (itemsPerPage) options.value.itemsPerPage = parseInt(itemsPerPage)
+
   filters.value.loadNode = 0
 
   onUpdateOptions(options.value)

assets/vue/views/page/Update.vue

@@ -1,17 +1,33 @@
 <template>
-  <PageForm
-    v-model="item"
-    @submit="updateItem"
-  />
-  <Loading :visible="isLoading" />
+  <div>
+    <div class="mb-4">
+      <Button
+        icon="mdi mdi-arrow-left"
+        :label="t('Back to list')"
+        class="p-button-secondary"
+        @click="router.push({ name: 'PageList', query: $route.query })"
+      />
+    </div>
+
+    <PageForm
+      v-model="item"
+      @submit="updateItem"
+    />
+    <Loading :visible="isLoading" />
+  </div>
 </template>
 
 <script setup>
+import { useRouter, useRoute } from "vue-router"
+import { useI18n } from "vue-i18n"
 import Loading from "../../components/Loading.vue"
 import PageForm from "../../components/page/Form.vue"
 import { useDatatableUpdate } from "../../composables/datatableUpdate"
 
 const { item, isLoading, retrieve, updateItem } = useDatatableUpdate("Page")
+const router = useRouter()
+const route = useRoute()
+const { t } = useI18n()
 
 retrieve()
 </script>

src/CoreBundle/Entity/Page.php

@@ -70,6 +70,7 @@ class Page
     #[ORM\Column(name: 'content', type: 'text')]
     protected string $content;
 
+    #[Groups(['page:read', 'page:write'])]
     #[Gedmo\Slug(fields: ['title'], updatable: true, unique: true)]
     #[ORM\Column(name: 'slug', type: 'string', length: 255)]
     protected string $slug;