@oxygen-cms/ui 1.9.1 → 2.1.0

package/src/components/pages/PageChooseParent.vue

@@ -0,0 +1,170 @@
+<template>
+    <div class="page-choose-parent">
+        <b-field v-if="label" :label="label">
+            <b-autocomplete
+                v-model="searchQuery"
+                :key="autocompleteKey"
+                :disabled="isLoading || loadingCurrentParent"
+                open-on-focus
+                :data="sortedPagesList"
+                :placeholder="placeholder"
+                clearable
+                @select="onSelect">
+                <template #default="props">
+                    <span :style="getOptionStyle(props.option)">
+                        {{ props.option.title }} - {{ props.option.slug }}
+                        <span v-if="isCurrentParent(props.option)" style="opacity: 0.6;"> (current parent)</span>
+                    </span>
+                </template>
+                <template #empty>No results found</template>
+            </b-autocomplete>
+        </b-field>
+        <b-autocomplete
+            v-else
+            v-model="searchQuery"
+            :key="autocompleteKey"
+            :disabled="isLoading || loadingCurrentParent"
+            open-on-focus
+            :data="sortedPagesList"
+            :placeholder="placeholder"
+            clearable
+            @select="onSelect">
+            <template #default="props">
+                <span :style="getOptionStyle(props.option)">
+                    {{ props.option.title }} - {{ props.option.slug }}
+                    <span v-if="isCurrentParent(props.option)" style="opacity: 0.6;"> (current parent)</span>
+                </span>
+            </template>
+            <template #empty>No results found</template>
+        </b-autocomplete>
+    </div>
+</template>
+
+<script>
+import PagesApi from "../../PagesApi.js";
+
+export default {
+    name: "PageChooseParent",
+    props: {
+        currentParentId: {
+            type: Number,
+            default: null
+        },
+        label: {
+            type: String,
+            default: ''
+        },
+        excludePageId: {
+            type: Number,
+            default: null  // Don't allow selecting this page (e.g., can't move page to itself)
+        },
+        showSlug: {
+            type: Boolean,
+            default: false  // If true, show slug in placeholder; otherwise show title
+        }
+    },
+    data() {
+        return {
+            pagesApi: new PagesApi(),
+            searchQuery: '',
+            isLoading: false,
+            pagesList: [],
+            autocompleteKey: 0,  // Force re-render after selection
+            currentParentPage: null,
+            loadingCurrentParent: false
+        }
+    },
+    computed: {
+        sortedPagesList() {
+            // Sort with Home page (slug '/') at the top, then alphabetically by title
+            // Also filter out the excluded page
+            return [...this.pagesList]
+                .filter(page => !this.excludePageId || page.id !== this.excludePageId)
+                .sort((a, b) => {
+                    if (a.slug === '/') return -1;
+                    if (b.slug === '/') return 1;
+                    return a.title.localeCompare(b.title);
+                });
+        },
+        placeholder() {
+            if (this.loadingCurrentParent) {
+                return '';
+            }
+            if (this.currentParentPage) {
+                if (this.showSlug) {
+                    // For PageEdit - show slug, and (root) for root pages
+                    return this.currentParentPage.slug === '/' ? '(root)' : this.currentParentPage.slug;
+                } else {
+                    // For PageActions - show title
+                    return this.currentParentPage.title;
+                }
+            }
+            return this.showSlug ? '(root)' : '(root)';
+        }
+    },
+    watch: {
+        'searchQuery': 'fetchData',
+        'currentParentId': {
+            immediate: true,
+            handler(newId) {
+                this.loadCurrentParent(newId);
+            }
+        }
+    },
+    created() {
+        this.isLoading = true;
+        this.fetchData();
+    },
+    methods: {
+        async fetchData() {
+            let data = await this.pagesApi.list({ inTrash: false, page: 1, q: this.searchQuery });
+            this.pagesList = data.items;
+            this.isLoading = false;
+        },
+        async loadCurrentParent(parentId) {
+            if (!parentId || typeof parentId !== 'number') {
+                this.currentParentPage = null;
+                this.loadingCurrentParent = false;
+                return;
+            }
+
+            this.loadingCurrentParent = true;
+            try {
+                const response = await this.pagesApi.get(parentId);
+                this.currentParentPage = response.data || response.item;
+            } catch (error) {
+                console.error('Failed to load current parent page:', error);
+                this.currentParentPage = null;
+            } finally {
+                this.loadingCurrentParent = false;
+            }
+        },
+        onSelect(parentPage) {
+            // Don't allow selecting current parent
+            if (this.isCurrentParent(parentPage)) {
+                return;
+            }
+
+            this.$emit('select', parentPage);
+
+            // Clear search query and force re-render of autocomplete
+            this.searchQuery = '';
+            this.autocompleteKey++;
+        },
+        isCurrentParent(page) {
+            if (!this.currentParentId) return false;
+            return page.id === this.currentParentId;
+        },
+        getOptionStyle(option) {
+            let style = '';
+            if (option.slug === '/') {
+                style += 'font-weight: bold;';
+            }
+            if (this.isCurrentParent(option)) {
+                style += ' opacity: 0.5; cursor: not-allowed;';
+            }
+            return style;
+        }
+    }
+}
+</script>

package/src/components/pages/PageEdit.vue

@@ -0,0 +1,149 @@
+<template>
+  <ContentResourceEdit
+    :resource-api="pagesApi"
+    display-name="Page"
+    route-prefix="pages"
+    list-route-name="pages.list"
+    trash-route-name="pages.trash"
+    :published-stage="STAGE_PUBLISHED"
+    :has-slug="true"
+    :has-hierarchy="true"
+    :has-version-actions="true"
+    :has-full-page-preview="true"
+  >
+    <!-- Page-specific settings fields -->
+    <template #settings-drawer-fields="{ model }">
+      <b-field>
+        <template #label>
+          URL
+          <b-tooltip multilined position="is-right" type="is-dark" label="The URL at which this page is located. Change the parent page to update the path prefix.">
+            <b-icon size="is-small" icon="question-circle"></b-icon>
+          </b-tooltip>
+        </template>
+        <p class="control">
+          <PageChooseParent
+            ref="parentChooser"
+            :current-parent-id="model.parent"
+            :exclude-page-id="model.id"
+            :show-slug="true"
+            @select="moveToParent($event, model)"
+          />
+        </p>
+        <p class="control">
+          <b-button disabled style="border-left: 0; border-radius: 0;">/</b-button>
+        </p>
+        <b-input v-model="model.slugPart" placeholder="url-slug" expanded></b-input>
+      </b-field>
+
+      <b-field label="Description">
+        <b-input v-model="model.description" type="textarea" placeholder="Page description"></b-input>
+      </b-field>
+
+      <b-field>
+        <template #label>
+          Tags
+          <b-tooltip multilined position="is-right" type="is-dark" label="A list of keywords for this page. Used for SEO">
+            <b-icon size="is-small" icon="question-circle"></b-icon>
+          </b-tooltip>
+        </template>
+        <b-taginput v-model="model.tags"></b-taginput>
+      </b-field>
+
+      <div class="field">
+        <label class="label">
+          Metadata
+          <b-tooltip multilined label="An HTML field used to inject custom metadata into the page. Used for SEO." position="is-right" type="is-dark">
+            <b-icon size="is-small" icon="question-circle"></b-icon>
+          </b-tooltip>
+        </label>
+        <div class="control">
+          <CodeEditor v-model="model.meta" lang="html" height="10rem" />
+        </div>
+      </div>
+
+      <div class="field">
+        <label class="label">Options</label>
+        <div class="control">
+          <CodeEditor v-model="model.options" lang="json" height="10rem" />
+        </div>
+      </div>
+    </template>
+
+    <!-- Page-specific dropdown actions -->
+    <template #dropdown-actions="{ model, isPublished }">
+      <b-dropdown-item
+        v-if="isPublished"
+        aria-role="menuitem"
+        @click="viewOnSite(model)"
+      >
+        <b-icon icon="external-link-alt"></b-icon>
+        View on Site
+      </b-dropdown-item>
+    </template>
+
+    <!-- Version-specific actions (e.g., View on Site for published versions) -->
+    <template #version-dropdown-actions="{ version, isPublished }">
+      <b-dropdown-item
+        v-if="isPublished"
+        aria-role="menuitem"
+        @click="viewVersionOnSite(version)"
+      >
+        <b-icon icon="external-link-alt"></b-icon>
+        View on Site
+      </b-dropdown-item>
+    </template>
+  </ContentResourceEdit>
+</template>
+
+<script>
+import ContentResourceEdit from '../ContentResourceEdit.vue';
+import CodeEditor from '../CodeEditor.vue';
+import PageChooseParent from './PageChooseParent.vue';
+import PagesApi from '../../PagesApi.js';
+import { morphToNotification } from '../../api.js';
+
+export default {
+  name: "PageEdit",
+  components: { ContentResourceEdit, CodeEditor, PageChooseParent },
+  data() {
+    return {
+      pagesApi: new PagesApi(),
+      STAGE_PUBLISHED: PagesApi.STAGE_PUBLISHED
+    }
+  },
+  methods: {
+    viewOnSite(model) {
+      const url = PagesApi.slugToUrl(model.slug || model.slugPart);
+      window.open(url, '_blank');
+    },
+    viewVersionOnSite(version) {
+      const url = PagesApi.slugToUrl(version.slug);
+      window.open(url, '_blank');
+    },
+    async moveToParent(parentPage, model) {
+      try {
+        const data = await this.pagesApi.update({
+          id: model.id,
+          parent: parentPage.id,
+          autoConvertToDraft: 'no',
+          version: false
+        });
+        this.$buefy.toast.open(morphToNotification(data));
+
+        // Tell PageChooseParent to reload the NEW parent for display (use parentPage.id, not model.parent)
+        this.$nextTick(() => {
+          if (this.$refs.parentChooser) {
+            this.$refs.parentChooser.loadCurrentParent(parentPage.id);
+          }
+        });
+      } catch (error) {
+        console.error('Failed to move page:', error);
+        this.$buefy.toast.open({
+          message: 'Failed to move page',
+          type: 'is-danger'
+        });
+      }
+    }
+  }
+}
+</script>

package/src/components/pages/PageList.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import PageTable from "../PageTable.vue";
+import PageTable from "./PageTable.vue";
 import PagesApi from "../../PagesApi.js";
 
 export default {

package/src/components/{PageNestedRow.vue → pages/PageNestedRow.vue}

@@ -17,8 +17,8 @@
 
 <script>
 import PageStatusIcon from "./PageStatusIcon.vue";
-import Updated from "./Updated.vue";
-import PagesApi from "../PagesApi.js";
+import Updated from "../Updated.vue";
+import PagesApi from "../../PagesApi.js";
 
 export default {
     name: "PageNestedRow",
@@ -38,7 +38,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-    @import "../styles/pages-table.scss";
+    @import "../../styles/pages-table.scss";
 
     //.has-darker-top-border {
     ////border-top-color: $grey-dark;

package/src/components/{PageStatusIcon.vue → pages/PageStatusIcon.vue}

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import PagesApi from "../PagesApi.js";
+import PagesApi from "../../PagesApi.js";
 
 export default {
     name: "PageStatusIcon",

package/src/components/{PageTable.vue → pages/PageTable.vue}

@@ -27,7 +27,7 @@
         @details-close="item => setExpanded(item, false)"
         @sort="onSort">
         <b-table-column v-slot="props" label="Title" :sortable="!!onSort" field="title">{{ props.row.title }} <PageStatusIcon :item="props.row"></PageStatusIcon></b-table-column>
-        <b-table-column v-slot="props" label="URL" :sortable="!!onSort" field="slugPart"><a :href="PagesApi.slugToUrl(props.row.slug)" class="is-size-7" target="_blank" v-if="props.row.stage === PagesApi.STAGE_PUBLISHED">{{ PagesApi.slugToUrl(props.row.slug) }} <b-icon icon="external-link-alt"></b-icon></a><em v-else class="is-size-7">(unpublished)</em></b-table-column>
+        <b-table-column v-slot="props" label="URL" :sortable="!!onSort" field="slugPart"><a v-if="props.row.stage === PagesApi.STAGE_PUBLISHED" :href="PagesApi.slugToUrl(props.row.slug)" class="is-size-7" target="_blank">{{ PagesApi.slugToUrl(props.row.slug) }} <b-icon icon="external-link-alt"></b-icon></a><em v-else class="is-size-7">(unpublished)</em></b-table-column>
         <b-table-column v-slot="props" label="Description" width="30%" :sortable="!!onSort" field="description"><div class="is-size-7">{{ props.row.description }}</div></b-table-column>
         <b-table-column v-slot="props" label="Last Updated" field="updatedAt" :sortable="!!onSort">
             <div v-if="props.row.updatedAt" class="is-size-7"><Updated :model="props.row"></Updated></div>
@@ -66,8 +66,8 @@
 
 <script>
 import PageStatusIcon from "./PageStatusIcon.vue";
-import Updated from "./Updated.vue";
-import PagesApi from "../PagesApi.js";
+import Updated from "../Updated.vue";
+import PagesApi from "../../PagesApi.js";
 import Vue from "vue";
 import PageNestedRow from "./PageNestedRow.vue";
 import PageNestedPagination from "./PageNestedPagination.vue";
@@ -146,11 +146,11 @@ export default {
 </script>
 
 <style scoped lang="scss">
-    @import "./util.css";
+    @import "../util.css";
 
     ::v-deep .table-wrapper.has-sticky-header {
         flex: 1 1 auto;
     }
 
-    @import "../styles/pages-table";
+    @import "../../styles/pages-table";
 </style>

package/src/components/partials/CreatePartialDropdown.vue

@@ -101,7 +101,7 @@ export default {
                 this.$buefy.toast.open(morphToNotification(response));
                 this.close();
                 this.$emit('created', response.item);
-                this.$router.push('/partials/' + response.item.id + '/edit');
+                this.$router.push({ name: 'partials.edit', params: { id: response.item.id } });
             } catch(e) {
                 // Error handled by API layer
             }

package/src/components/{PartialActions.vue → partials/PartialActions.vue}

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import PartialsApi from "../PartialsApi.js";
+import PartialsApi from "../../PartialsApi.js";
 
 export default {
     name: "PartialActions",

package/src/components/partials/PartialEdit.vue

@@ -0,0 +1,49 @@
+<template>
+  <ContentResourceEdit
+    :resource-api="partialsApi"
+    display-name="Partial"
+    route-prefix="partials"
+    list-route-name="partials.list"
+    trash-route-name="partials.trash"
+    :published-stage="STAGE_PUBLISHED"
+    :has-slug="false"
+    :has-hierarchy="false"
+  >
+    <!-- Partial-specific settings fields -->
+    <template #settings-drawer-fields="{ model }">
+      <b-field label="Key">
+        <template #label>
+          Key
+          <b-tooltip multilined position="is-bottom-right" type="is-dark"
+                     label="A unique machine-readable identifier for this partial (e.g., 'footer.copyright', 'header.navigation')">
+            <b-icon size="is-small" icon="question-circle"></b-icon>
+          </b-tooltip>
+        </template>
+        <b-input v-model="model.key" placeholder="e.g., footer.copyright" />
+      </b-field>
+
+      <b-field label="Author">
+        <b-input v-model="model.author" placeholder="Author name" />
+      </b-field>
+    </template>
+
+    <!-- No dropdown-actions slot needed - partials don't have "View on Site" -->
+    <!-- No version-dropdown-actions slot needed either -->
+  </ContentResourceEdit>
+</template>
+
+<script>
+import ContentResourceEdit from '../ContentResourceEdit.vue';
+import PartialsApi from '../../PartialsApi.js';
+
+export default {
+  name: "PartialEdit",
+  components: { ContentResourceEdit },
+  data() {
+    return {
+      partialsApi: new PartialsApi(),
+      STAGE_PUBLISHED: PartialsApi.STAGE_PUBLISHED
+    }
+  }
+}
+</script>

package/src/components/{PartialList.vue → partials/PartialList.vue}

@@ -19,8 +19,8 @@
 </template>
 
 <script>
-import PartialsApi from "../PartialsApi.js";
-import ContentEditor from "./content/ContentEditor.vue";
+import PartialsApi from "../../PartialsApi.js";
+import ContentEditor from "../content/ContentEditor.vue";
 
 export default {
     name: "PartialList",
@@ -66,7 +66,7 @@ export default {
 </script>
 
 <style scoped>
-    @import "./util.css";
+    @import "../util.css";
 
     .card {
         cursor: pointer;

package/src/components/{PartialStatusIcon.vue → partials/PartialStatusIcon.vue}

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import PartialsApi from "../PartialsApi.js";
+import PartialsApi from "../../PartialsApi.js";
 
 export default {
     name: "PartialStatusIcon",

package/src/components/{PartialTable.vue → partials/PartialTable.vue}

@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import Updated from "./Updated.vue";
+import Updated from "../Updated.vue";
 import PartialStatusIcon from "./PartialStatusIcon.vue";
 
 export default {

package/src/icons.js

@@ -102,7 +102,15 @@ import {
     faCog,
     faArchive,
     faGlobeAsia,
-    faPenSquare, faKey
+    faBars,
+    faPenSquare,
+    faKey,
+    faHistory,
+    faEllipsisV,
+    faImage,
+    faCompress,
+    faExpand,
+    faStar
 } from "@fortawesome/free-solid-svg-icons";
 
 export const addIconsToLibrary = () => {
@@ -115,5 +123,6 @@ export const addIconsToLibrary = () => {
         faFileExcel, faFileCsv, faChevronCircleDown, faChevronCircleUp, faTrash,
         faEye, faEyeSlash, faCaretDown, faCaretUp, faUpload, faUser, faFolder, faHome, faFilePdf, faSignOutAlt, faTag, faStrikethrough, faUnderline, faRemoveFormat, faLink,
         faFolderPlus, faTimes, faQuestionCircle, faFileUpload, faLandmark, faRulerHorizontal, faCog, faArchive, faGlobeAsia, faPenSquare, faKey,
-        faFolderOpen, faFile, faFileAudio, faFileImage, faShare, faGripVertical, faImages, faCalendarPlus, faPaperPlane, faHandshake, faHandshakeSlash, faExclamation, faMousePointer, faUnlink, faAngry);
+        faFolderOpen, faFile, faFileAudio, faFileImage, faShare, faGripVertical, faImages, faCalendarPlus, faPaperPlane, faHandshake, faHandshakeSlash, faExclamation, faMousePointer, faUnlink, faAngry,
+        faHistory, faEllipsisV, faImage, faCompress, faExpand, faBars, faStar);
 };

package/src/modules/PagesPartials.js

@@ -1,13 +1,13 @@
-import LegacyPage from "../components/LegacyPage.vue";
 import { WEB_CONTENT } from "../main.js";
-import PageEdit from "../components/PageEdit.vue";
+import PageEdit from "../components/pages/PageEdit.vue";
+import PartialEdit from "../components/partials/PartialEdit.vue";
 import ResourceList from "../components/ResourceList.vue";
-import PageTable from "../components/PageTable.vue";
+import PageTable from "../components/pages/PageTable.vue";
 import PagesApi from "../PagesApi.js";
 import PartialsApi from "../PartialsApi.js";
-import PartialTable from "../components/PartialTable.vue";
-import PageActions from "../components/PageActions.vue";
-import PartialActions from "../components/PartialActions.vue";
+import PartialTable from "../components/partials/PartialTable.vue";
+import PageActions from "../components/pages/PageActions.vue";
+import PartialActions from "../components/partials/PartialActions.vue";
 import CreatePageDropdown from "../components/pages/CreatePageDropdown.vue";
 import CreatePartialDropdown from "../components/partials/CreatePartialDropdown.vue";
 
@@ -41,17 +41,6 @@ export default function(ui) {
     const pagesProps = { displayName: 'Pages', routePrefix: 'pages', inTrash: false, tableComponent: PageTable, actionsComponent: PageActions, singularDisplayName: 'Page', defaultSortField: 'title', defaultSortOrder: 'asc', resourceApi: new PagesApi(), createDropdownComponent: CreatePageDropdown }
 
     ui.addAuthenticatedRoutes([
-        {
-            path: '(pages|partials)/:subpath/edit',
-            component: LegacyPage,
-            props: (route) => {
-                return {
-                    fullPath: route.fullPath,
-                    legacyPrefix: '/oxygen/view',
-                    adminPrefix: '/oxygen'
-                }
-            }
-        },
         {
             path: 'partials/trash',
             name: 'partials.trash',
@@ -68,9 +57,9 @@ export default function(ui) {
         },
         {
             path: 'partials/:id',
-            redirect: to => {
-                return { path: 'partials/' + to.params.id + '/edit' }
-            }
+            name: 'partials.edit',
+            component: PartialEdit,
+            meta: { title: 'Edit Partial' }
         },
         {
             path: 'partials/create',
@@ -84,17 +73,11 @@ export default function(ui) {
             props: { ...pagesProps, inTrash: true }
         },
         {
-            path: 'pages2/:id',
+            path: 'pages/:id',
             name: 'pages.edit',
             component: PageEdit,
             meta: { title: 'Edit Page' }
         },
-        {
-            path: 'pages/:id',
-            redirect: to => {
-                return { path: 'pages/' + to.params.id + '/edit' }
-            }
-        },
         {
             path: 'pages',
             name: 'pages.list',