CRISTAL-219: UI for creating pages

api/src/api/WikiConfig.ts

@@ -63,4 +63,21 @@ export interface WikiConfig {
    * @since 0.9
    */
   getType(): string;
+
+  /**
+   * Returns the page resource separator for the current configuration.
+   * For instance, "." for XWiki, or "/" for Github and FileSystem.
+   *
+   * @returns the page resource separator
+   * @since 0.10
+   */
+  getPageResourceSeparator(): string;
+
+  /**
+   * Returns the default name for a newly created page.
+   *
+   * @returns the default name
+   * @since 0.10
+   */
+  getNewPageDefaultName(): string;
 }

api/src/components/defaultWikiConfig.ts

@@ -137,4 +137,12 @@ export class DefaultWikiConfig implements WikiConfig {
   getType(): string {
     return "Default";
   }
+
+  getPageResourceSeparator(): string {
+    return "/";
+  }
+
+  getNewPageDefaultName(): string {
+    return "newpage";
+  }
 }

core/backends/backend-xwiki/src/XWikiWikiConfig.ts

@@ -56,4 +56,12 @@ export class XWikiWikiConfig extends DefaultWikiConfig {
   override getType(): string {
     return "XWiki";
   }
+
+  override getPageResourceSeparator(): string {
+    return ".";
+  }
+
+  override getNewPageDefaultName(): string {
+    return "NewPage.WebHome";
+  }
 }

core/navigation-tree/navigation-tree-api/package.json

@@ -21,6 +21,9 @@
     "clean": "rimraf dist",
     "build": "tsc --project tsconfig.json && vite build"
   },
+  "dependencies": {
+    "@xwiki/cristal-api": "workspace:*"
+  },
   "publishConfig": {
     "exports": {
       ".": {

core/navigation-tree/navigation-tree-api/src/index.ts

@@ -18,13 +18,16 @@
  * 02110-1301 USA, or see the FSF site: http://www.fsf.org.
  */
 
+import type { PageData } from "@xwiki/cristal-api";
+
 /**
  * Description of a navigation tree node.
  * @since 0.10
  */
 type NavigationTreeNode = {
   id: string;
   label: string;
+  location: string;
   url: string;
   has_children: boolean;
 };
@@ -43,6 +46,14 @@ interface NavigationTreeSource {
    * @returns the descendants in the navigation tree
    */
   getChildNodes(id?: string): Promise<Array<NavigationTreeNode>>;
+
+  /**
+   * Returns the ids of the parents nodes for a given page.
+   *
+   * @param page the data of the page
+   * @returns the parents nodes ids
+   **/
+  getParentNodesId(page?: PageData): Array<string>;
 }
 
 /**

core/navigation-tree/navigation-tree-default/src/components/componentsInit.ts

@@ -19,13 +19,14 @@
  */
 
 import { Container, inject, injectable } from "inversify";
-import type { CristalApp, Logger } from "@xwiki/cristal-api";
+import type { CristalApp, Logger, PageData } from "@xwiki/cristal-api";
 import {
   name as NavigationTreeSourceName,
   type NavigationTreeNode,
   type NavigationTreeSource,
   type NavigationTreeSourceProvider,
 } from "@xwiki/cristal-navigation-tree-api";
+import { getParentNodesIdFromPath } from "../utils";
 
 /**
  * Default implementation for NavigationTreeSource.
@@ -46,6 +47,10 @@ class DefaultNavigationTreeSource implements NavigationTreeSource {
   async getChildNodes(): Promise<Array<NavigationTreeNode>> {
     return [];
   }
+
+  getParentNodesId(page?: PageData): Array<string> {
+    return getParentNodesIdFromPath(page);
+  }
 }
 
 /**

core/navigation-tree/navigation-tree-default/src/index.ts

@@ -19,5 +19,6 @@
  */
 
 import { ComponentInit } from "./components/componentsInit";
+import { getParentNodesIdFromPath } from "./utils";
 
-export { ComponentInit };
+export { ComponentInit, getParentNodesIdFromPath };

core/navigation-tree/navigation-tree-default/src/utils.ts

@@ -0,0 +1,44 @@
+/*
+ * See the LICENSE file distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation; either version 2.1 of
+ * the License, or (at your option) any later version.
+ *
+ * This software is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this software; if not, write to the Free
+ * Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
+ * 02110-1301 USA, or see the FSF site: http://www.fsf.org.
+ */
+
+import type { PageData } from "@xwiki/cristal-api";
+
+/**
+ * Returns the ids of the parents nodes for a path-like page id.
+ *
+ * @param pageData the data of the page
+ * @returns the parents nodes ids
+ * @since 0.10
+ **/
+export function getParentNodesIdFromPath(page?: PageData): Array<string> {
+  const result: Array<string> = [];
+  if (page) {
+    const parents = page.id.split("/");
+    let currentParent = "";
+    let i;
+    for (i = 0; i < parents.length - 1; i++) {
+      currentParent += parents[i];
+      result.push(currentParent);
+      currentParent += "/";
+    }
+    result.push(page.id);
+  }
+  return result;
+}

core/navigation-tree/navigation-tree-filesystem/package.json

@@ -25,6 +25,7 @@
     "@xwiki/cristal-api": "workspace:*",
     "@xwiki/cristal-electron-storage": "workspace:*",
     "@xwiki/cristal-navigation-tree-api": "workspace:*",
+    "@xwiki/cristal-navigation-tree-default": "workspace:*",
     "inversify": "6.0.2"
   },
   "publishConfig": {

core/navigation-tree/navigation-tree-filesystem/src/components/componentsInit.ts

@@ -19,12 +19,13 @@
  */
 
 import { Container, inject, injectable } from "inversify";
-import type { CristalApp, Logger } from "@xwiki/cristal-api";
+import type { CristalApp, Logger, PageData } from "@xwiki/cristal-api";
 import {
   name as NavigationTreeSourceName,
   type NavigationTreeNode,
   type NavigationTreeSource,
 } from "@xwiki/cristal-navigation-tree-api";
+import { getParentNodesIdFromPath } from "@xwiki/cristal-navigation-tree-default";
 
 /**
  * Implementation of NavigationTreeSource for the FileSystem backend.
@@ -63,6 +64,7 @@ class FileSystemNavigationTreeSource implements NavigationTreeSource {
         navigationTree.push({
           id: id,
           label: currentPageData ? currentPageData.name : child,
+          location: id,
           url: this.cristalApp.getRouter().resolve({
             name: "view",
             params: {
@@ -76,6 +78,10 @@ class FileSystemNavigationTreeSource implements NavigationTreeSource {
 
     return navigationTree;
   }
+
+  getParentNodesId(page?: PageData): Array<string> {
+    return getParentNodesIdFromPath(page);
+  }
 }
 
 export class ComponentInit {

core/navigation-tree/navigation-tree-github/package.json

@@ -24,6 +24,7 @@
   "dependencies": {
     "@xwiki/cristal-api": "workspace:*",
     "@xwiki/cristal-navigation-tree-api": "workspace:*",
+    "@xwiki/cristal-navigation-tree-default": "workspace:*",
     "inversify": "6.0.2"
   },
   "publishConfig": {

core/navigation-tree/navigation-tree-github/src/components/componentsInit.ts

@@ -19,12 +19,13 @@
  */
 
 import { Container, inject, injectable } from "inversify";
-import type { CristalApp, Logger } from "@xwiki/cristal-api";
+import type { CristalApp, Logger, PageData } from "@xwiki/cristal-api";
 import {
   name as NavigationTreeSourceName,
   type NavigationTreeNode,
   type NavigationTreeSource,
 } from "@xwiki/cristal-navigation-tree-api";
+import { getParentNodesIdFromPath } from "@xwiki/cristal-navigation-tree-default";
 
 /**
  * Implementation of NavigationTreeSource for the GitHub backend.
@@ -69,6 +70,7 @@ class GitHubNavigationTreeSource implements NavigationTreeSource {
           navigationTree.push({
             id: treeNode.path,
             label: treeNode.name,
+            location: treeNode.path,
             url: this.cristalApp.getRouter().resolve({
               name: "view",
               params: {
@@ -85,6 +87,10 @@ class GitHubNavigationTreeSource implements NavigationTreeSource {
     }
     return navigationTree;
   }
+
+  getParentNodesId(page?: PageData): Array<string> {
+    return getParentNodesIdFromPath(page);
+  }
 }
 
 export class ComponentInit {

core/navigation-tree/navigation-tree-nextcloud/package.json

@@ -24,6 +24,7 @@
   "dependencies": {
     "@xwiki/cristal-api": "workspace:*",
     "@xwiki/cristal-navigation-tree-api": "workspace:*",
+    "@xwiki/cristal-navigation-tree-default": "workspace:*",
     "inversify": "6.0.2"
   },
   "publishConfig": {

core/navigation-tree/navigation-tree-nextcloud/src/components/componentsInit.ts

@@ -19,12 +19,13 @@
  */
 
 import { Container, inject, injectable } from "inversify";
-import type { CristalApp, Logger } from "@xwiki/cristal-api";
+import type { CristalApp, Logger, PageData } from "@xwiki/cristal-api";
 import {
   name as NavigationTreeSourceName,
   type NavigationTreeNode,
   type NavigationTreeSource,
 } from "@xwiki/cristal-navigation-tree-api";
+import { getParentNodesIdFromPath } from "@xwiki/cristal-navigation-tree-default";
 
 /**
  * Implementation of NavigationTreeSource for the Nextcloud backend.
@@ -57,6 +58,7 @@ class NextcloudNavigationTreeSource implements NavigationTreeSource {
       navigationTree.push({
         id: d,
         label: currentPageData ? currentPageData.name : d.split("/").pop()!,
+        location: d,
         url: this.cristalApp.getRouter().resolve({
           name: "view",
           params: {
@@ -112,6 +114,10 @@ class NextcloudNavigationTreeSource implements NavigationTreeSource {
     return subdirectories;
   }
 
+  getParentNodesId(page?: PageData): Array<string> {
+    return getParentNodesIdFromPath(page);
+  }
+
   private getBaseHeaders() {
     // TODO: the authentication is currently hardcoded.
     return {

core/navigation-tree/navigation-tree-xwiki/src/components/componentsInit.ts

@@ -19,7 +19,7 @@
  */
 
 import { Container, inject, injectable } from "inversify";
-import type { CristalApp, Logger } from "@xwiki/cristal-api";
+import type { CristalApp, Logger, PageData } from "@xwiki/cristal-api";
 import {
   name as NavigationTreeSourceName,
   type NavigationTreeNode,
@@ -78,19 +78,21 @@ class XWikiNavigationTreeSource implements NavigationTreeSource {
           a_attr: { href: string };
         }) => {
           if (!["attachments", "translations"].includes(treeNode.data.type)) {
+            const pageId = decodeURIComponent(
+              this.cristalApp
+                .getWikiConfig()
+                .storage.getPageFromViewURL(
+                  `${baseXWikiURL}${treeNode.a_attr.href}`,
+                )!,
+            );
             navigationTree.push({
               id: treeNode.id,
               label: treeNode.text,
+              location: pageId.replace(/\.WebHome$/, ""),
               url: this.cristalApp.getRouter().resolve({
                 name: "view",
                 params: {
-                  page: decodeURIComponent(
-                    this.cristalApp
-                      .getWikiConfig()
-                      .storage.getPageFromViewURL(
-                        `${baseXWikiURL}${treeNode.a_attr.href}`,
-                      )!,
-                  ),
+                  page: pageId,
                 },
               }).href,
               has_children: treeNode.children, //TODO: ignore translations and attachments
@@ -104,6 +106,32 @@ class XWikiNavigationTreeSource implements NavigationTreeSource {
     }
     return navigationTree;
   }
+
+  getParentNodesId(page?: PageData): Array<string> {
+    const result = [];
+    if (page) {
+      const documentId = page.document.getIdentifier();
+      if (!documentId) {
+        this.logger.debug(
+          `No identifier found for page ${page.name}, cannot resolve parents.`,
+        );
+        return [];
+      }
+      const parents = documentId
+        .replace(/\.WebHome$/, "")
+        .split(/(?<![^\\](?:\\\\)*\\)\./);
+      let currentParent = "";
+      let i;
+      for (i = 0; i < parents.length - 1; i++) {
+        currentParent += parents[i];
+        // TODO: Support subwikis.
+        result.push(`document:xwiki:${currentParent}.WebHome`);
+        currentParent += ".";
+      }
+      result.push(`document:xwiki:${documentId}`);
+    }
+    return result;
+  }
 }
 
 export class ComponentInit {

ds/shoelace/src/vue/form/x-form.vue

@@ -11,4 +11,8 @@ function submit() {
   </form>
 </template>
 
-<style scoped></style>
+<style scoped>
+form {
+  padding: 16px;
+}
+</style>

ds/shoelace/src/vue/form/x-text-field.vue

@@ -3,14 +3,18 @@ import { type TextFieldProps } from "@xwiki/cristal-dsapi";
 import "@shoelace-style/shoelace/dist/components/input/input";
 
 defineProps<TextFieldProps>();
+
+const input = defineModel<string>();
 </script>
 
 <template>
   <sl-input
     :label="label"
     :name="name"
     :required="required"
+    :value="input"
     type="text"
+    @input="input = $event.target.value"
   ></sl-input>
 </template>