CRISTAL-408: We don't check if a page already exists on page creation

* Use link instead of button in the alert * Check that the user has edit rights before displaying "edit" action
xwiki-contrib · Jan 20, 2025 · 5a65ce7 · 5a65ce7
1 parent 7ffb555
commit 5a65ce7
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 33 deletions.
diff --git a/skin/langs/translation-en.json b/skin/langs/translation-en.json
@@ -1,8 +1,9 @@
 {
   "third": "Third",
   "page.actions.create.label": "Create a new document",
-  "page.creation.menu.alert.action.edit": "Edit",
-  "page.creation.menu.alert.content": "The page {pageName} already exists, either use another name or edit the existing page.",
+  "page.creation.menu.alert.content": "The page {pageName} already exists, use another name.",
+  "page.creation.menu.alert.content.edit": "The page {pageName} already exists, either use another name or {link}.",
+  "page.creation.menu.alert.content.edit.link": "edit the existing page",
   "page.creation.menu.button": "New Page",
   "page.creation.menu.field.location": "Parent location",
   "page.creation.menu.field.name": "Name",

diff --git a/skin/langs/translation-fr.json b/skin/langs/translation-fr.json
@@ -1,8 +1,9 @@
 {
     "third": "Troisième",
     "page.actions.create.label": "Créer un nouveau document",
-    "page.creation.menu.alert.action.edit": "Éditer",
-    "page.creation.menu.alert.content": "La page {pageName} existe déjà, choisissez un autre nom ou éditez la page existante.",
+    "page.creation.menu.alert.content": "La page {pageName} existe déjà, choisissez un autre nom.",
+    "page.creation.menu.alert.content.edit": "La page {pageName} existe déjà, choisissez un autre nom ou {link}.",
+    "page.creation.menu.alert.content.edit.link": "éditez la page existante",
     "page.creation.menu.button": "Nouvelle page",
     "page.creation.menu.field.location": "Emplacement du parent",
     "page.creation.menu.field.name": "Nom",

diff --git a/skin/src/vue/c-page-creation-menu.vue b/skin/src/vue/c-page-creation-menu.vue
@@ -48,9 +48,9 @@ const dialogOpen: Ref<boolean> = ref(false);
 const name: Ref<string> = ref("");
 const namePlaceholder: Ref<string> = ref("");
 const location: Ref<string> = ref("");
-const pageAlreadyExists: Ref<boolean> = ref(false);
+const existingPage: Ref<PageData | undefined> = ref(undefined);
 var locationReference: SpaceReference | undefined = undefined;
-var newDocumentReference: string = "";
+let newDocumentReference: string = "";
 
 defineProps<{
   currentPage: PageData;
@@ -79,10 +79,9 @@ async function createPage() {
     ),
   )!;
 
-  pageAlreadyExists.value =
-    (await cristal.getPage(newDocumentReference)) !== undefined;
+  existingPage.value = await cristal.getPage(newDocumentReference);
 
-  if (!pageAlreadyExists.value) {
+  if (!existingPage.value) {
     cristal.setCurrentPage(newDocumentReference, "edit");
 
     dialogOpen.value = false;
@@ -117,24 +116,56 @@ function editExistingPage() {
         <!-- We need 2 different divs to implement the following behavior:
                - Use max available width from the parent
                - Do not resize the parent if the content is larger -->
-        <div id="new-page-alerts-wrapper">
-          <div id="new-page-alerts">
+        <div class="alerts-wrapper">
+          <div class="alerts">
             <!-- Indicate that the selected page already exists. -->
-            <x-alert
-              v-if="pageAlreadyExists"
-              type="error"
-              :actions="[
-                {
-                  name: t('page.creation.menu.alert.action.edit'),
-                  callback: editExistingPage,
-                },
-              ]"
-              :description="
-                t('page.creation.menu.alert.content', {
-                  pageName: newDocumentReference,
-                })
-              "
-            >
+            <x-alert v-if="existingPage !== undefined" type="error">
+              <i18n-t
+                v-if="!existingPage!.canEdit"
+                keypath="page.creation.menu.alert.content"
+                tag="span"
+              >
+                <template #pageName>
+                  <a
+                    :href="
+                      cristal.getRouter().resolve({
+                        name: 'view',
+                        params: { page: newDocumentReference },
+                      }).href
+                    "
+                    >{{ newDocumentReference }}</a
+                  >
+                </template>
+              </i18n-t>
+              <i18n-t
+                v-else
+                keypath="page.creation.menu.alert.content.edit"
+                tag="span"
+              >
+                <template #pageName>
+                  <a
+                    :href="
+                      cristal.getRouter().resolve({
+                        name: 'view',
+                        params: { page: newDocumentReference },
+                      }).href
+                    "
+                    >{{ newDocumentReference }}</a
+                  >
+                </template>
+                <template #link>
+                  <a
+                    :href="
+                      cristal.getRouter().resolve({
+                        name: 'edit',
+                        params: { page: newDocumentReference },
+                      }).href
+                    "
+                    @click.prevent="editExistingPage"
+                    >{{ t("page.creation.menu.alert.content.edit.link") }}</a
+                  >
+                </template>
+              </i18n-t>
             </x-alert>
           </div>
         </div>
@@ -176,13 +207,6 @@ function editExistingPage() {
 </template>
 
 <style scoped>
-#new-page-alerts-wrapper {
-  display: flex;
-}
-#new-page-alerts {
-  flex-grow: 1;
-  width: 0;
-}
 #new-page-button {
   cursor: pointer;
 }
@@ -211,6 +235,13 @@ function editExistingPage() {
   gap: 0.5rem;
 }
 
+.alerts-wrapper {
+  display: flex;
+}
+.alerts {
+  flex-grow: 1;
+  width: 0;
+}
 input[type="submit"] {
   display: none;
 }