@live-change/content-frontend 0.2.3 → 0.2.5

package/front/src/App.vue

@@ -29,4 +29,11 @@
     console.log("WATCH CLIENT", oldClient, '=>', newClient)
   })
 
+  import { useApi } from '@live-change/vue3-ssr'
+  const api = useApi()
+  import emailValidator from "@live-change/email-service/clientEmailValidator.js"
+  import passwordValidator from "@live-change/password-authentication-service/clientPasswordValidator.js"
+  api.validators.email = emailValidator
+  api.validators.password = passwordValidator
+
 </script>

package/front/src/NavBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="surface-overlay py-3 px-6 shadow-2 flex align-items-center justify-content-between
-              relative md:sticky top-0 z-5"
+              relative sticky top-0 z-5"
        style="min-height: 80px" key="navbar">
     <img src="/images/logo.svg" alt="Image" height="40" class="mr-0 lg:mr-6">
     <div class="hidden lg:flex">

package/front/src/components/Content.vue

@@ -1,6 +1,6 @@
 <template>
 <!--  <pre>{{ JSON.stringify(content, null, "  ") }}</pre>-->
-  <ContentView :content="JSON.stringify(content.content)" :config="contentConfig" />
+  <ContentView :content="JSON.stringify(content?.content)" :config="contentConfig" />
 </template>
 
 <script setup>
@@ -15,6 +15,10 @@
     object: {
       type: String,
       required: true
+    },
+    preview: {
+      type: Boolean,
+      default: false
     }
   })
 
@@ -26,7 +30,9 @@
 
   const p = path()
   const liveContentPath = computed(() =>
-    p.content.content({ objectType: props.objectType, object: props.object })
+    props.preview
+      ? p.content.contentPreview({ objectType: props.objectType, object: props.object })
+      : p.content.content({ objectType: props.objectType, object: props.object })
   )
 
   const [content] = await Promise.all([

package/front/src/components/NotFoundAdminButtons.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="absolute top-0 right-0 pr-4 max-h-0 flex align-items-center z-5">
+    <Button icon="pi pi-plus"
+            class="p-button p-button-icon-only p-button-rounded p-button-danger"
+            @click="createPage" />
+  </div>
+</template>
+
+<script setup>
+  import Button from 'primevue/button'
+
+  const props = defineProps({
+    path: {
+      type: String,
+      required: true
+    }
+  })
+
+  import { toRefs } from "@vueuse/core"
+
+  import { useHost } from "@live-change/frontend-base"
+  const host = useHost()
+
+  const { path } = toRefs(props)
+
+  import { useToast } from 'primevue/usetoast'
+  const toast = useToast()
+  import { useConfirm } from 'primevue/useconfirm'
+  const confirm = useConfirm()
+
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+
+  function createPage() {
+    confirm.require({
+      target: event.currentTarget,
+      message: `Do you want to create page at ${host}/${path.value} ?`,
+      icon: 'pi pi-info-circle',
+      acceptClass: 'p-button-danger',
+      accept: async () => {
+        const pageId = await api.actions.content.createPage()
+        await api.actions.url.takeUrl({
+          target: pageId, targetType: 'content_Page', path: path.value, domain: host, redirect: false
+        })
+        toast.add({ severity:'success', summary: 'Page created', life: 1500 })
+        setTimeout(() => {
+          router.push({ name: 'content:pageEditor', params: { pageId } })
+        }, 200)
+      },
+      reject: () => {
+        toast.add({ severity:'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 })
+      }
+    })
+  }
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/components/Page.vue

@@ -1,43 +1,29 @@
 <template>
   <ResolveUrl targetType="content_Page" :path="urlPath" :fetchMore="urlMore">
-    <template #default="{ target }">
+    <template #default="{ target, style, class: clazz }">
       <LimitedAccess :requiredRoles="['writer']" objectType="content_Page" :object="target" hidden>
-        <div class="absolute top-0 right-0 pr-4 max-h-0 flex align-items-center z-5">
-          <Button icon="pi pi-pencil"
-                  class="p-button p-button-icon-only p-button-rounded p-button-warning mr-2"
-                  @click="editPage(target)" />
-          <Button icon="pi pi-trash"
-                  class="p-button p-button-icon-only p-button-rounded p-button-danger"
-                  @click="deletePage(target)" />
-        </div>
+        <PageAdminButtons :page="target" :style="style" :class="clazz" :name="urlPath.value" />
       </LimitedAccess>
       <Content objectType="content_Page" :object="target" />
     </template>
-    <template #notFound="{ path }">
-      <div class="surface-section px-4 py-8 md:px-6 lg:px-8">
-        <div style="background: radial-gradient(50% 109137.91% at 50% 50%, rgba(233, 30, 99, 0.1) 0%, rgba(254, 244, 247, 0) 100%);" class="text-center">
-          <span class="bg-white text-pink-500 font-bold text-2xl inline-block px-3">404</span>
-        </div>
-        <div class="mt-6 mb-5 font-bold text-6xl text-900 text-center">Page Not Found</div>
-        <p class="text-700 text-3xl mt-0 mb-6 text-center">Sorry, we couldn't find the page.</p>
-        <div class="text-center">
-          <Button class="p-button-text mr-2" label="Go Back" icon="pi pi-arrow-left"></Button>
-          <Button label="Go to Dashboard" icon="pi pi-home"></Button>
-        </div>
-      </div>
+    <template #notFound="{ path, style, class: clazz }">
+      <NotFoundAdminButtons v-if="canCreatePage" :path="urlPath" :style="style" :class="clazz" />
+      <NotFound :style="style" :class="clazz" />
     </template>
   </ResolveUrl>
 </template>
 
 <script setup>
   import Button from "primevue/button"
-  import { ResolveUrl } from "@live-change/url-frontend"
-  import {LimitedAccess} from "@live-change/access-control-frontend";
+  import PageAdminButtons from "./PageAdminButtons.vue"
+  import NotFoundAdminButtons from "./NotFoundAdminButtons.vue"
+
+  import { ResolveUrl, NotFound } from "@live-change/url-frontend"
+  import { LimitedAccess } from "@live-change/access-control-frontend";
   import Content from "./Content.vue"
 
   import { computed, watch, ref, onMounted } from 'vue'
   import { toRefs } from "@vueuse/core"
-  import { useHost } from "@live-change/frontend-base"
 
   const isMounted = ref(false)
   onMounted(() => isMounted.value = true)
@@ -47,40 +33,27 @@
   const p = path()
 
   const urlMore = [
-    url => p.content.page({ page: url.target })
+    url => p.content.page({ page: url.target }),
+    url => p.content.content({ objectType: 'content_Page', object: url.target })
   ]
 
+  const canCreatePage = computed(() => api.client.value.roles.includes('writer'))
+
   const props = defineProps({
     path: {
       type: String,
       required: true
+    },
+    class: {
+      type: String,
+      default: ''
+    },
+    style: {
+      type: String,
+      default: ''
     }
   })
-  const { path: urlPath } = toRefs(props)
-
-  import { useToast } from 'primevue/usetoast'
-  const toast = useToast()
-  import { useConfirm } from 'primevue/useconfirm'
-  const confirm = useConfirm()
-
-  function editPage(page) {
-
-  }
-  function deletePage(page) {
-    confirm.require({
-      target: event.currentTarget,
-      message: `Do you want to remove page ${urlPath.value} ?`,
-      icon: 'pi pi-info-circle',
-      acceptClass: 'p-button-danger',
-      accept: async () => {
-        await api.actions.content.deletePage({ page })
-        toast.add({ severity:'info', summary: 'Page deleted', life: 1500 })
-      },
-      reject: () => {
-        toast.add({ severity:'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 })
-      }
-    })
-  }
+  const { path: urlPath, class: clazz, style } = toRefs(props)
 
 </script>
 

package/front/src/components/PageAdminButtons.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="absolute top-0 right-0 pr-4 max-h-0 flex align-items-center z-5">
+    <router-link :to="{ name: 'content:pageEditor', params: { pageId: page } }" class="no-underline">
+      <Button icon="pi pi-pencil"
+              class="p-button p-button-icon-only p-button-rounded p-button-warning mr-2" />
+    </router-link>
+    <Button icon="pi pi-trash"
+            class="p-button p-button-icon-only p-button-rounded p-button-danger"
+            @click="deletePage" />
+  </div>
+</template>
+
+<script setup>
+  import Button from 'primevue/button'
+
+  const props = defineProps({
+    page: {
+      type: String,
+      required: true
+    },
+    name: {
+      type: String,
+      default: ""
+    }
+  })
+
+  import { toRefs } from "@vueuse/core"
+
+  const { page, name } = toRefs(props)
+
+  import { useToast } from 'primevue/usetoast'
+  const toast = useToast()
+  import { useConfirm } from 'primevue/useconfirm'
+  const confirm = useConfirm()
+
+  function deletePage() {
+    confirm.require({
+      target: event.currentTarget,
+      message: `Do you want to remove page ${name} ?`,
+      icon: 'pi pi-info-circle',
+      acceptClass: 'p-button-danger',
+      accept: async () => {
+        await api.actions.content.deletePage({ page })
+        toast.add({ severity:'info', summary: 'Page deleted', life: 1500 })
+      },
+      reject: () => {
+        toast.add({ severity:'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 })
+      }
+    })
+  }
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/components/PageEditor.vue

@@ -1,8 +1,123 @@
 <template>
+  <Accordion v-if="pageData" :multiple="true" class="w-full">
+    <AccordionTab>
+      <template #header>
+        <UrlsInfo targetType="content_Page" :target="pageId" class="w-full" />
+      </template>
+      <Urls :key="pageId" targetType="content_Page" :target="pageId" />
+    </AccordionTab>
+<!--<AccordionTab header="Header II">
+      Content
+    </AccordionTab>
+    <AccordionTab header="Header III">
+      Content
+    </AccordionTab>-->
+  </Accordion>
 
+  <DocumentEditor v-if="pageData" targetType="content_Page" :target="pageId"
+                  :config="contentConfig" type="content" v-model:saveState="saveState" v-model:version="version">
+    <template #menuEnd="{}">
+
+      <Button icon="pi pi-eye" label="Preview" class="p-button-secondary p-button-sm mr-1 mb-1" />
+
+      <div class="p-buttonset mr-1 mb-1 border-round">
+        <button type="button"
+                class="p-button p-component p-button-sm p-button-outlined p-button-secondary cursor-auto inline-block"
+                :class="{ 'p-disabled': saveState == 'saving' }">
+          <span class="pi p-button-icon p-button-icon-left"
+                :class="[stateSave == 'saving' ? 'pi-sync' : 'pi-hashtag' ]" />
+          <span class="p-button-label">{{ ( version ?? 0 ).toFixed().padStart(10, '0') }}</span>
+        </button>
+        <Button icon="pi pi-save" label="Publish" class="p-button-success p-button-sm" type="button"
+                :disabled="saveState == 'saving'" @click="publish" />
+      </div>
+
+    </template>
+  </DocumentEditor>
+
+  <NotFound v-if="pageData === null" />
 </template>
 
-<script>
+<script setup>
+
+  import Accordion from 'primevue/accordion'
+  import AccordionTab from 'primevue/accordiontab'
+  import Button from 'primevue/button'
+
+  import { UrlsInfo, Urls, NotFound } from '@live-change/url-frontend'
+  import { DocumentEditor, EditorMenu } from "@live-change/wysiwyg-frontend"
+  import contentConfig from "./contentConfig.js";
+
+  import { computed, watch, ref, onMounted, inject } from 'vue'
+  import { toRefs } from "@vueuse/core"
+
+  const isMounted = ref(false)
+  onMounted(() => isMounted.value = true)
+
+  const props = defineProps({
+    pageId: {
+      type: String,
+      required: true
+    },
+    class: {},
+    style: {}
+  })
+  const { pageId, class: clazz, style } = toRefs(props)
+
+  const document = computed(() => `${JSON.stringify('content_Page')}:${JSON.stringify(pageId.value)}`)
+
+  const saveState = ref()
+  const version = ref()
+
+  import { useToast } from 'primevue/usetoast'
+  const toast = useToast()
+  import { useConfirm } from 'primevue/useconfirm'
+  const confirm = useConfirm()
+
+  const workingZone = inject('workingZone')
+
+  import { useApi, path, live } from '@live-change/vue3-ssr'
+
+  const api = useApi()
+
+  const p = path()
+
+  const livePagePath = computed(
+    () =>  p.content.page({ page: pageId.value })
+  )
+  const liveCanonicalUrlPath = computed(
+    () =>  p.url.targetOwnedCanonical({ targetType: 'content_Page', target: pageId.value })
+  )
+  const [pageData, canonicalUrlData] = await Promise.all([
+    live(livePagePath),
+    live(liveCanonicalUrlPath)
+  ])
+
+  function publish() {
+    const snapshotVersion = version.value
+
+    confirm.require({
+      target: event.currentTarget,
+      message: `Do you want to publish this content version ${snapshotVersion} to page `+
+        `${canonicalUrlData.value.domain ?? '*'}/${canonicalUrlData.value.path}?`,
+      icon: 'pi pi-info-circle',
+      acceptClass: 'p-button-danger',
+      accept: async () => {
+        api.actions.content.publish({
+          objectType: 'content_Page', object: pageId.value, version: snapshotVersion, type: 'content'
+        }).then(() => {
+          toast.add({ severity: 'success', summary: 'Published', detail: 'Page published', life: 3000 })
+        }).catch(e => {
+          toast.add({ severity: 'error', summary: 'Error', detail: 'Error publishing page', life: 3000 })
+        })
+      },
+      reject: () => {
+        toast.add({ severity:'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 })
+      }
+    })
+
+
+  }
 
 </script>
 

package/front/src/components/PagePreview.vue

@@ -0,0 +1,59 @@
+<template>
+
+  <LimitedAccess :requiredRoles="['writer']" objectType="content_Page" :object="pageId" hidden>
+    <div class="absolute top-0 right-0 pr-4 max-h-0 flex align-items-center z-5">
+      <Badge severity="warning" value="This is page preview" class="mr-2" />
+      <router-link :to="{ name: 'content:pageEditor', params: { pageId } }" class="no-underline">
+        <Button icon="pi pi-pencil"
+                class="p-button p-button-icon-only p-button-rounded p-button-warning mr-2" />
+      </router-link>
+    </div>
+    <Content objectType="content_Page" :object="pageId" :style="style" :class="clazz" preview />
+  </LimitedAccess>
+
+</template>
+
+<script setup>
+  import Button from "primevue/button"
+  import Badge from "primevue/badge"
+
+  import { ResolveUrl, NotFound } from "@live-change/url-frontend"
+  import { LimitedAccess } from "@live-change/access-control-frontend";
+  import Content from "./Content.vue"
+
+  import { computed, watch, ref, onMounted } from 'vue'
+  import { toRefs } from "@vueuse/core"
+  import { useHost } from "@live-change/frontend-base"
+
+  const isMounted = ref(false)
+  onMounted(() => isMounted.value = true)
+
+  import { path, live, useApi } from '@live-change/vue3-ssr'
+  const api = useApi()
+  const p = path()
+
+  const urlMore = [
+    url => p.content.page({ page: url.target })
+  ]
+
+  const props = defineProps({
+    pageId: {
+      type: String,
+      required: true
+    },
+    class: {
+      type: String,
+      default: ''
+    },
+    style: {
+      type: String,
+      default: ''
+    }
+  })
+  const { pageId, class: clazz, style } = toRefs(props)
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/components/routes.js

@@ -5,10 +5,12 @@ export function contentEditRoutes(config = {}) {
 
   return [
 
-    route({ name: 'content:editor', path: prefix + 'content-editor/:documentId', meta: { },
+    route({ name: 'content:editor', path: prefix + 'content-editor/:documentId', meta: { }, props: true,
       component: () => import("./ContentEditor.vue") }),
-    route({ name: 'content:pageEditor', path: prefix + 'page-editor/:pageId', meta: { },
+    route({ name: 'content:pageEditor', path: prefix + 'page-editor/:pageId', meta: { }, props: true,
       component: () => import("./PageEditor.vue") }),
+    route({ name: 'content:pagePreview', path: prefix + 'page-preview/:pageId', meta: { }, props: true,
+      component: () => import("./PagePreview.vue") }),
 
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/content-frontend",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "scripts": {
     "memDev": "lcli memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -21,13 +21,13 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.1.1",
-    "@live-change/cli": "0.6.14",
+    "@live-change/cli": "0.7.2",
     "@live-change/dao": "0.5.6",
     "@live-change/dao-vue3": "0.5.6",
     "@live-change/dao-websocket": "0.5.6",
-    "@live-change/framework": "0.6.14",
-    "@live-change/image-service": "0.2.51",
-    "@live-change/session-service": "0.2.51",
+    "@live-change/framework": "0.7.2",
+    "@live-change/image-service": "0.3.0",
+    "@live-change/session-service": "0.3.0",
     "@live-change/vue3-components": "0.2.15",
     "@live-change/vue3-ssr": "0.2.15",
     "@tiptap/extension-highlight": "^2.0.0-beta.33",
@@ -42,8 +42,8 @@
     "pica": "^9.0.1",
     "pretty-bytes": "^6.0.0",
     "primeflex": "^3.2.1",
-    "primeicons": "^5.0.0",
-    "primevue": "^3.15.0",
+    "primeicons": "^6.0.1",
+    "primevue": "^3.18.1",
     "rollup-plugin-node-builtins": "^2.1.2",
     "rollup-plugin-visualizer": "5.6.0",
     "serialize-javascript": "^6.0.0",
@@ -54,7 +54,7 @@
     "vue3-scroll-border": "0.1.2"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "0.6.14",
+    "@live-change/codeceptjs-helper": "0.7.2",
     "@wdio/selenium-standalone-service": "^7.20.8",
     "codeceptjs": "^3.3.4",
     "generate-password": "1.7.0",
@@ -66,5 +66,5 @@
   "author": "",
   "license": "ISC",
   "description": "",
-  "gitHead": "a91ef8d26ea58cabf9fef85347826ccd32096f8d"
+  "gitHead": "76ac0dd54acf671cb564a1aa943d81a9e2bc99e9"
 }

package/server/init.js

@@ -43,9 +43,9 @@ module.exports = async function(services) {
     id: documentId,
     ownerType: 'content_Page',
     owner: 'one',
-    type: 'rich',
+    type: 'content',
     purpose: 'page',
-    version: 0,
+    version: 1,
     content: documentContent,
     created: documentTime,
     lastModified: documentTime
@@ -53,7 +53,7 @@ module.exports = async function(services) {
   await services.prosemirror.models.Snapshot.create({
     id: snapshotId,
     document: documentId,
-    version: 0,
+    version: 1,
     content: documentContent,
     timestamp: documentTime,
   })

package/server/services.config.js

@@ -43,7 +43,7 @@ module.exports = {
       name: 'prosemirror',
       path: '@live-change/prosemirror-service',
       documentTypes: {
-        rich: require('./rich.documentType.js'),
+        content: require('./content.documentType.js'),
       },
       testLatency: 2000
     },