@live-change/content-frontend 0.2.15 → 0.2.17

package/front/src/components/{PageAdminButtons.vue → ContentAdminButtons.vue}

@@ -1,6 +1,6 @@
 <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">
+    <router-link :to="editorRoute(objectType, object)" 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>
@@ -14,13 +14,25 @@
   import Button from 'primevue/button'
 
   const props = defineProps({
-    page: {
+    objectType: {
+      type: String,
+      required: true
+    },
+    object: {
       type: String,
       required: true
     },
     name: {
       type: String,
       default: ""
+    },
+    editorRoute: {
+      type: Function,
+      default: (objectType, object) => {
+        const [service, type] = objectType.split('_')
+        const prop = type[0].toLowerCase()+type.slice(1)
+        return { name: `${service}:${prop}Editor`, params: { [prop+'Id']: object }}
+      }
     }
   })
 

package/front/src/components/ContentEditor.vue

@@ -1,9 +1,143 @@
 <template>
 
+  <DocumentEditor :targetType="objectType" :target="object"
+                  :purpose="purpose" :type="contentType"
+                  :config="contentConfig || defaultContentConfig"
+                  :class="className" :style="style"
+                  v-model:saveState="saveState" v-model:version="version">
+
+    <template #menuEnd="{}">
+
+      <router-link :to="previewRoute(objectType, object)" target="_blank"
+                   class="no-underline">
+        <Button icon="pi pi-eye" label="Preview" class="p-button-secondary p-button-sm mr-1 mb-1" />
+      </router-link>
+
+      <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="[saveState == '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>
+
+  <div></div><!-- Because bug in vue -->
+
 </template>
 
 <script setup>
 
+  import Button from 'primevue/button'
+
+  import { DocumentEditor, EditorMenu } from "@live-change/wysiwyg-frontend"
+
+  import defaultContentConfig from "./contentConfig.js"
+
+  const props = defineProps({
+    objectType: {
+      type: String,
+      required: true
+    },
+    object: {
+      type: String,
+      required: true
+    },
+    previewRoute: {
+      type: Function,
+      default: (objectType, object) => {
+        const [service, type] = objectType.split('_')
+        const prop = type[0].toLowerCase()+type.slice(1)
+        return { name: `${service}:${prop}Preview`, params: { [prop]: object }}
+      }
+    },
+    publishTarget: {
+      type: String,
+      required: true
+    },
+    contentType: {
+      type: String,
+      required: true
+    },
+    purpose: {
+      type: String,
+      required: true
+    },
+    contentConfig: {
+      type: Object,
+      default: () => null
+    },
+    class: {},
+    style: {}
+  })
+  import { toRefs } from "@vueuse/core"
+  const {
+    objectType, object, previewRoute, publishTarget, contentType, purpose, contentConfig,
+    class: className, style
+  } = toRefs(props)
+
+  import { computed, watch, ref, onMounted, inject } from 'vue'
+
+  const document = computed(() => `${JSON.stringify(objectType.value)}:${JSON.stringify(object.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 liveCanonicalUrlPath = computed(
+    () =>  p.url.targetOwnedCanonical({ targetType: objectType.value, target: object.value })
+  )
+
+  const [canonicalUrlData] = await Promise.all([
+    live(liveCanonicalUrlPath),
+  ]).catch(e => [null, null, null, null])
+
+
+  function publish() {
+    const snapshotVersion = version.value
+    const typeName = objectType.value.split('_')[1]
+    const typeNameLower = typeName[0].toLowerCase()+typeName.slice(1)
+    confirm.require({
+      target: event.currentTarget,
+      message: `Do you want to publish this content version ${snapshotVersion} to ${publishTarget.value}`,
+      icon: 'pi pi-info-circle',
+      acceptClass: 'p-button-danger',
+      accept: async () => {
+        api.actions.content.publish({
+          objectType: objectType.value, object: object.value, version: snapshotVersion, type: contentType.value
+        }).then(() => {
+          toast.add({ severity: 'success', summary: 'Published', detail: typeName+' published', life: 3000 })
+        }).catch(e => {
+          toast.add({ severity: 'error', summary: 'Error', detail: 'Error publishing ' + typeNameLower, life: 3000 })
+        })
+      },
+      reject: () => {
+        toast.add({ severity:'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 })
+      }
+    })
+
+  }
+
 </script>
 
 <style scoped>

package/front/src/components/ContentPreview.vue

@@ -0,0 +1,71 @@
+<template>
+
+  <LimitedAccess :requiredRoles="['writer']" :objectType="objectType" :object="object" 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="editorRoute(objectType, object)" 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="objectType" :object="object" :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({
+    objectType: {
+      type: String,
+      required: true
+    },
+    object: {
+      type: String,
+      required: true
+    },
+    class: {
+      type: String,
+      default: ''
+    },
+    style: {
+      type: String,
+      default: ''
+    },
+    editorRoute: {
+      type: Function,
+      default: (objectType, object) => {
+        const [service, type] = objectType.split('_')
+        const prop = type[0].toLowerCase()+type.slice(1)
+        return { name: `${service}:${prop}Editor`, params: { [prop+'Id']: object }}
+      }
+    },
+  })
+  const { objectType, object, class: clazz, style } = toRefs(props)
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/components/ContentSettings.vue

@@ -0,0 +1,80 @@
+<template>
+  <Accordion :multiple="true" class="w-full mb-2">
+    <AccordionTab>
+      <template #header>
+        <UrlsInfo :targetType="objectType" :target="object" class="w-full" />
+      </template>
+      <Urls :key="key" :targetType="objectType" :target="object" />
+    </AccordionTab>
+    <AccordionTab>
+      <template #header>
+        <span class="font-bold mr-1">Public access: {{ publicAccessLevel }}</span>
+      </template>
+      <AccessControl :objectType="objectType" :object="object" />
+    </AccordionTab>
+    <AccordionTab>
+      <template #header>
+        <span v-if="metadata" class="font-bold mr-1">Metadata:</span>
+        <span v-if="metadata" class="mr-1 font-normal">{{ metadata.title }}</span>
+        <span v-else class="font-bold text-red-600">Metadata not set</span>
+      </template>
+      <MetadataEditor :objectType="objectType" :object="object" :key="key"></MetadataEditor>
+    </AccordionTab>
+  </Accordion>
+</template>
+
+<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 { AccessControl } from '@live-change/access-control-frontend'
+  import MetadataEditor from "./MetadataEditor.vue"
+
+  const props = defineProps({
+    objectType: {
+      type: String,
+      required: true
+    },
+    object: {
+      type: String,
+      required: true
+    }
+  })
+
+  import { toRefs } from "@vueuse/core"
+  import { computed } from 'vue'
+
+  const { objectType, object } = toRefs(props)
+
+  const key = computed(() => `${objectType.value}:${object.value}`)
+
+  import { useApi, path, live } from '@live-change/vue3-ssr'
+  const api = useApi()
+  const p = path()
+
+  const livePublicAccessPath = computed(
+    () =>  p.accessControl.objectOwnedPublicAccess({ objectType: objectType.value, object: object.value })
+  )
+  const liveMetadataPath = computed(
+    () =>  p.content.objectOwnedMetadata({ objectType: objectType.value, object: object.value })
+  )
+
+  const [publicAccessData, metadata] = await Promise.all([
+    live(livePublicAccessPath),
+    live(liveMetadataPath)
+  ]).catch(e => [null, null, null, null])
+
+  const publicAccessLevel = computed(() => {
+    if(publicAccessData?.sessionRoles?.includes('reader')) return 'session'
+    if(publicAccessData?.userRoles?.includes('reader')) return 'user'
+    return 'none'
+  })
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/components/Metadata.vue

@@ -11,10 +11,6 @@
     object: {
       type: String,
       required: true
-    },
-    url: {
-      type: Object,
-      required: true
     }
   })
 
@@ -58,75 +54,77 @@
   const canonicalUrl = `https://${canonicalUrlDomain}/${canonical.value?.path ?? ''}`
 
   let ogImage = []
-  if(m.ogImage) {
-    const image = m.ogImage
-    ogImage = [
-      { property: 'og:image', content: `https://${canonicalUrlDomain}/api/image/image/${image.id}` },
-      { property: 'og:image:width', content: image.width },
-      { property: 'og:image:height', content: image.height },
-      { property: 'og:image:type', content: 'image/'+image.extension }
-    ]
-  }
+  if(m) {
+    if (m.ogImage) {
+      const image = m.ogImage
+      ogImage = [
+        {property: 'og:image', content: `https://${canonicalUrlDomain}/api/image/image/${image.id}`},
+        {property: 'og:image:width', content: image.width},
+        {property: 'og:image:height', content: image.height},
+        {property: 'og:image:type', content: 'image/' + image.extension}
+      ]
+    }
 
-  useMeta({
-    title: m.title,
-    description: m.description,
-    link: [
-      { rel: 'canonical', href: canonicalUrl }
-    ],
-    meta: [
-      metaProperty('og:title', m.og.title),
-      metaProperty('og:description', m.og.description),
-      ...ogImage,
-      metaProperty('og:determiner', m.og.determiner),
-      metaProperty('og:locale', m.og.locale),
-      ...metaProperties('og:locale:alternate', m.og.localeAlternate),
-      metaProperty('og:type', m.og.type),
-
-      metaProperty('og:music:duration', m.og.music.duration),
-      ...metaPropertiesObjects('og:music:album', m.og.music.album),
-      ...metaPropertiesObjects('og:music:song', m.og.music.song),
-      ...metaProperties('og:music:musician', m.og.music.duration),
-      metaProperty('og:music:release_date', m.og.music.releaseDate),
-      ...metaProperties('og:music:creator', m.og.music.creator),
-
-      metaProperty('og:video:duration', m.og.video.duration),
-      metaProperty('og:viceo:release_date', m.og.video.releaseDate),
-      ...metaPropertiesObjects('og:video:duration', m.og.video.actors),
-      ...metaProperties('og:video:director', m.og.video.director),
-      ...metaProperties('og:video:writer', m.og.video.writer),
-      ...metaProperties('og:video:series', m.og.video.series),
-      ...metaProperties('og:video:tag', m.og.video.tag),
-
-      ...metaProperties('og:profile:first_name', m.og.profile.firstName),
-      ...metaProperties('og:profile:last_name', m.og.profile.lastName),
-      ...metaProperties('og:profile:username', m.og.profile.username),
-      ...metaProperties('og:profile:gender', m.og.profile.gender),
-
-      metaProperty('og:article:published_time', m.og.article.publishedTime),
-      metaProperty('og:article:modified_time', m.og.article.modifiedTime),
-      metaProperty('og:article:expiration_time', m.og.article.expirationTime),
-      ...metaProperties('og:article:author', m.og.article.author),
-      metaProperty('og:article:section', m.og.article.section),
-      ...metaProperties('og:article:tag', m.og.article.tag),
-
-      ...metaProperties('og:book:author', m.og.book.author),
-      metaProperty('og:book:isbn', m.og.book.isbn),
-      metaProperty('og:book:release_date', m.og.book.releaseDate),
-      ...metaProperties('og:book:tag', m.og.book.tag),
-
-      { property: 'og:url', content: canonicalUrl },
-
-
-      /*      { property: 'og:url', content: m.url },
-            { property: 'og:type', content: 'website' },
-            { property: 'twitter:card', content: 'summary_large_image' },
-            { property: 'twitter:title', content: metadata.value.title },
-            { property: 'twitter:description', content: metadata.value.description },
-            { property: 'twitter:image', content: metadata.value.image },
-            { property: 'twitter:url', content: metadata.value.url }*/
-    ].filter(x => !!x)
-  })
+    useMeta({
+      title: m.title,
+      description: m.description,
+      link: [
+        {rel: 'canonical', href: canonicalUrl}
+      ],
+      meta: [
+        metaProperty('og:title', m.og.title),
+        metaProperty('og:description', m.og.description),
+        ...ogImage,
+        metaProperty('og:determiner', m.og.determiner),
+        metaProperty('og:locale', m.og.locale),
+        ...metaProperties('og:locale:alternate', m.og.localeAlternate),
+        metaProperty('og:type', m.og.type),
+
+        metaProperty('og:music:duration', m.og.music.duration),
+        ...metaPropertiesObjects('og:music:album', m.og.music.album),
+        ...metaPropertiesObjects('og:music:song', m.og.music.song),
+        ...metaProperties('og:music:musician', m.og.music.duration),
+        metaProperty('og:music:release_date', m.og.music.releaseDate),
+        ...metaProperties('og:music:creator', m.og.music.creator),
+
+        metaProperty('og:video:duration', m.og.video.duration),
+        metaProperty('og:viceo:release_date', m.og.video.releaseDate),
+        ...metaPropertiesObjects('og:video:duration', m.og.video.actors),
+        ...metaProperties('og:video:director', m.og.video.director),
+        ...metaProperties('og:video:writer', m.og.video.writer),
+        ...metaProperties('og:video:series', m.og.video.series),
+        ...metaProperties('og:video:tag', m.og.video.tag),
+
+        ...metaProperties('og:profile:first_name', m.og.profile.firstName),
+        ...metaProperties('og:profile:last_name', m.og.profile.lastName),
+        ...metaProperties('og:profile:username', m.og.profile.username),
+        ...metaProperties('og:profile:gender', m.og.profile.gender),
+
+        metaProperty('og:article:published_time', m.og.article.publishedTime),
+        metaProperty('og:article:modified_time', m.og.article.modifiedTime),
+        metaProperty('og:article:expiration_time', m.og.article.expirationTime),
+        ...metaProperties('og:article:author', m.og.article.author),
+        metaProperty('og:article:section', m.og.article.section),
+        ...metaProperties('og:article:tag', m.og.article.tag),
+
+        ...metaProperties('og:book:author', m.og.book.author),
+        metaProperty('og:book:isbn', m.og.book.isbn),
+        metaProperty('og:book:release_date', m.og.book.releaseDate),
+        ...metaProperties('og:book:tag', m.og.book.tag),
+
+        {property: 'og:url', content: canonicalUrl},
+
+
+        /*      { property: 'og:url', content: m.url },
+              { property: 'og:type', content: 'website' },
+              { property: 'twitter:card', content: 'summary_large_image' },
+              { property: 'twitter:title', content: metadata.value.title },
+              { property: 'twitter:description', content: metadata.value.description },
+              { property: 'twitter:image', content: metadata.value.image },
+              { property: 'twitter:url', content: metadata.value.url }*/
+      ].filter(x => !!x)
+    })
+  }
 </script>
 
 <style scoped>

package/front/src/components/NotAuthorizedAdminButtons.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="absolute top-0 right-0 pr-4 max-h-0 flex align-items-center z-5">
+    <router-link :to="editorRoute(objectType, object)" 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>
+</template>
+
+<script setup>
+  import Button from 'primevue/button'
+
+  const props = defineProps({
+    path: {
+      type: String,
+      required: true
+    },
+    objectType: {
+      type: String,
+      required: true
+    },
+    object: {
+      type: String,
+      required: true
+    },
+    editorRoute: {
+      type: Function,
+      default: (objectType, object) => {
+        const [service, type] = objectType.split('_')
+        const prop = type[0].toLowerCase()+type.slice(1)
+        return { name: `${service}:${prop}Editor`, params: { [prop+'Id']: object }}
+      }
+    }
+  })
+
+  import { toRefs } from "@vueuse/core"
+
+  const { objectType, object, editorRoute } = toRefs(props)
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/components/NotFoundAdminButtons.vue

@@ -2,7 +2,7 @@
   <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" />
+            @click="createContent" />
   </div>
 </template>
 
@@ -13,15 +13,36 @@
     path: {
       type: String,
       required: true
+    },
+    objectType: {
+      type: String,
+      required: true
+    },
+    editorRoute: {
+      type: Function,
+      default: (objectType, object) => {
+        const [service, type] = objectType.split('_')
+        const prop = type[0].toLowerCase()+type.slice(1)
+        return { name: `${service}:${prop}Editor`, params: { [prop+'Id']: object }}
+      }
+    },
+    createActionName: {
+      type: String,
+      default: null
+    },
+    createActionParams: {
+      type: Object,
+      default: () => {}
     }
   })
 
   import { toRefs } from "@vueuse/core"
+  import { computed } from "vue"
 
   import { useHost } from "@live-change/frontend-base"
   const host = useHost()
 
-  const { path } = toRefs(props)
+  const { path, objectType } = toRefs(props)
 
   import { useToast } from 'primevue/usetoast'
   const toast = useToast()
@@ -31,20 +52,32 @@
   import { useRouter } from 'vue-router'
   const router = useRouter()
 
-  function createPage() {
+  const serviceName = computed(() => {
+    const [service, type] = objectType.value.split('_')
+    return service
+  })
+  const typeName = computed(() => {
+    const [service, type] = objectType.value.split('_')
+    return type
+  })
+  const typeNameLower = computed(() => typeName.value[0].toLowerCase()+typeName.value.slice(1))
+
+  function createContent() {
     confirm.require({
       target: event.currentTarget,
-      message: `Do you want to create page at ${host}/${path.value} ?`,
+      message: `Do you want to create ${typeNameLower.value} at ${host}/${path.value} ?`,
       icon: 'pi pi-info-circle',
       acceptClass: 'p-button-danger',
       accept: async () => {
-        const pageId = await api.actions.content.createPage()
+        const contentId = await api.actions[serviceName.value][props.createActionName || `create${typeName.value}`]({
+          ...props.createActionParams
+        })
         await api.actions.url.takeUrl({
-          target: pageId, targetType: 'content_Page', path: path.value, domain: host, redirect: false
+          target: contentId, targetType: objectType.value, path: path.value, domain: host, redirect: false
         })
-        toast.add({ severity:'success', summary: 'Page created', life: 1500 })
+        toast.add({ severity:'success', summary: `${typeName} created`, life: 1500 })
         setTimeout(() => {
-          router.push({ name: 'content:pageEditor', params: { pageId } })
+          router.push(props.editorRoute(objectType.value, contentId))
         }, 200)
       },
       reject: () => {

package/front/src/components/Page.vue

@@ -1,61 +1,19 @@
 <template>
-  <ResolveUrl targetType="content_Page" :path="urlPath" :fetchMore="urlMore">
-    <template #default="{ target, style, class: clazz }">
-      <Metadata objectType="content_Page" :object="target" />
-      <LimitedAccess :requiredRoles="['writer']" objectType="content_Page" :object="target" hidden>
-        <PageAdminButtons :page="target" :style="style" :class="clazz" :name="urlPath.value" />
-      </LimitedAccess>
-      <Content objectType="content_Page" :object="target" />
-    </template>
-    <template #notFound="{ path, style, class: clazz }">
-      <NotFoundAdminButtons v-if="canCreatePage" :path="urlPath" :style="style" :class="clazz" />
-      <NotFound :style="style" :class="clazz" />
-    </template>
-  </ResolveUrl>
+  <UrlContent objectType="content_Page" :path="urlPath" :class="clazz" :style="style" />
 </template>
 
 <script setup>
-  import Button from "primevue/button"
-  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 Metadata from "./Metadata.vue"
-
-  import { computed, watch, ref, onMounted } from 'vue'
   import { toRefs } from "@vueuse/core"
-
-  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 }),
-    url => p.content.content({ objectType: 'content_Page', object: url.target }),
-    url => p.content.objectOwnedMetadata({ objectType: 'content_Page', object: url.target }),
-    url => p.url.targetOwnedCanonical({ targetType: 'content_Page', target: url.target })
-  ]
-
-  const canCreatePage = computed(() => api.client.value.roles.includes('writer'))
+  import UrlContent from "./UrlContent.vue";
 
   const props = defineProps({
     path: {
       type: String,
       required: true
     },
-    class: {
-      type: String,
-      default: ''
-    },
-    style: {
-      type: String,
-      default: ''
-    }
+    class: { },
+    style: { }
   })
   const { path: urlPath, class: clazz, style } = toRefs(props)
 

package/front/src/components/PageEditor.vue

@@ -1,62 +1,19 @@
 <template>
-  <Accordion v-if="pageData" :multiple="true" class="w-full mb-2">
-    <AccordionTab>
-      <template #header>
-        <UrlsInfo targetType="content_Page" :target="pageId" class="w-full" />
-      </template>
-      <Urls :key="pageId" targetType="content_Page" :target="pageId" />
-    </AccordionTab>
-    <AccordionTab>
-      <template #header>
-        <span class="font-bold mr-1">Public access: {{ publicAccessLevel }}</span>
-      </template>
-      <AccessControl objectType="content_Page" :object="pageId" />
-    </AccordionTab>
-    <AccordionTab>
-      <template #header>
-        <span v-if="metadata" class="font-bold mr-1">Metadata:</span>
-        <span v-if="metadata" class="mr-1 font-normal">{{ metadata.title }}</span>
-        <span v-else class="font-bold text-red-600">Metadata not set</span>
-      </template>
-      <MetadataEditor objectType="content_Page" :object="pageId" :key="pageId"></MetadataEditor>
-    </AccordionTab>
-  </Accordion>
-
-  <DocumentEditor v-if="pageData" targetType="content_Page" :target="pageId" purpose="page"
-                  :config="contentConfig" type="page" 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="[saveState == '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>
+<!--  <ContentSettings v-if="pageData" objectType="content_Page" :object="pageId" />-->
 
+  <ContentEditor v-if="pageData"
+               objectType="content_Page" :object="pageId"
+               :publishTarget="`page `+`${canonicalUrlData.domain ?? '*'}/${canonicalUrlData.path}`"
+               contentType="page" purpose="page" />
   <NotFound v-if="pageData === null" />
+
 </template>
 
 <script setup>
+  import { NotFound } from "@live-change/url-frontend";
 
-  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 { AccessControl } from '@live-change/access-control-frontend'
-  import MetadataEditor from "./MetadataEditor.vue"
-  import contentConfig from "./contentConfig.js";
+  import ContentSettings from "./ContentSettings.vue"
+  import ContentEditor from "./ContentEditor.vue"
 
   import { computed, watch, ref, onMounted, inject } from 'vue'
   import { toRefs } from "@vueuse/core"
@@ -74,22 +31,8 @@
   })
   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(
@@ -112,36 +55,11 @@
     live(liveMetadataPath)
   ]).catch(e => [null, null, null, null])
 
-  const publicAccessLevel = computed(() => {
-    if(publicAccessData?.sessionRoles?.includes('reader')) return 'session'
-    if(publicAccessData?.userRoles?.includes('reader')) return 'user'
-    return 'none'
-  })
 
-  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 })
-      }
-    })
-
-  }
+  const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
+
+  console.log("WAITING!")
+  await sleep(5000)
 
 </script>
 

package/front/src/components/PagePreview.vue

@@ -1,40 +1,11 @@
 <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>
-
+  <ContentPreview objectType="content_Page" :object="pageId" :style="style" :class="clazz" />
 </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 ContentPreview from "./ContentPreview.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: {
@@ -51,7 +22,6 @@
     }
   })
   const { pageId, class: clazz, style } = toRefs(props)
-
 </script>
 
 <style scoped>

package/front/src/components/UrlContent.vue

@@ -0,0 +1,81 @@
+<template>
+  <ResolveUrl :targetType="objectType" :path="urlPath" :fetchMore="urlMore">
+    <template #default="{ target, style, class: clazz }">
+      <Metadata :objectType="objectType" :object="target" />
+      <LimitedAccess :requiredRoles="['writer']" :objectType="objectType" :object="target" hidden>
+        <ContentAdminButtons :objectType="objectType" :object="target" :style="style" :class="clazz"
+                             :name="urlPath.value" :editorRoute="editorRoute" />
+      </LimitedAccess>
+      <Content :objectType="objectType" :object="target" class="w-full" :style="style" :class="clazz" />
+    </template>
+    <template #notFound="{ path, style, class: clazz }">
+      <NotFoundAdminButtons v-if="canCreateContent" :path="urlPath"
+                            :objectType="objectType" :editorRoute="editorRoute"
+                            :style="style" :class="clazz" />
+      <NotFound :style="style" :class="clazz" />
+    </template>
+    <template #notAuthorized="{ path, style, class: clazz, target, access }">
+      <NotAuthorizedAdminButtons v-if="(access?.roles ?? []).includes('writer')"
+                                 :path="urlPath" :style="style" :class="clazz" :object="target"
+                                 :objectType="objectType" :editorRoute="editorRoute"/>
+      <NotAuthorized :style="style" :class="clazz" />
+    </template>
+  </ResolveUrl>
+</template>
+
+<script setup>
+  import Button from "primevue/button"
+  import ContentAdminButtons from "./ContentAdminButtons.vue"
+  import NotFoundAdminButtons from "./NotFoundAdminButtons.vue"
+  import NotAuthorizedAdminButtons from "./NotAuthorizedAdminButtons.vue"
+
+  import { ResolveUrl, NotFound, NotAuthorized } from "@live-change/url-frontend"
+  import { LimitedAccess } from "@live-change/access-control-frontend";
+  import Content from "./Content.vue"
+  import Metadata from "./Metadata.vue"
+
+  import { computed, watch, ref, onMounted } from 'vue'
+  import { toRefs } from "@vueuse/core"
+
+  const isMounted = ref(false)
+  onMounted(() => isMounted.value = true)
+
+  import { path, live, useApi } from '@live-change/vue3-ssr'
+  const api = useApi()
+  const p = path()
+
+  const props = defineProps({
+    objectType: {
+      type: String,
+      required: true
+    },
+    path: {
+      type: String,
+      required: true
+    },
+    editorRoute: {
+      type: Function,
+      default: (objectType, object) => {
+        const [service, type] = objectType.split('_')
+        const prop = type[0].toLowerCase()+type.slice(1)
+        return { name: `${service}:${prop}Editor`, params: { [prop+'Id']: object }}
+      }
+    },
+    class: {},
+    style: {}
+  })
+  const { objectType, path: urlPath, class: clazz, style } = toRefs(props)
+
+  const urlMore = computed(() => [
+    url => p.content.content({ objectType: objectType.value, object: url.target }),
+    url => p.content.objectOwnedMetadata({ objectType: objectType.value, object: url.target }),
+    url => p.url.targetOwnedCanonical({ targetType: objectType.value, target: url.target })
+  ])
+
+  const canCreateContent = computed(() => api.client.value.roles.includes('writer'))
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/router.js

@@ -8,7 +8,7 @@ import { dbAdminRoutes } from "@live-change/db-admin"
 import { userRoutes } from "@live-change/user-frontend";
 import { catchAllPagesRoute, contentEditRoutes, pagesSitemap } from "./components/routes";
 
-export function wysiwygRoutes(config = {}) {
+export function contentRoutes(config = {}) {
   const { prefix = '/', route = (r) => r } = config
   return [
     ...userRoutes({ ...config, prefix: prefix + 'user/' }),
@@ -35,7 +35,7 @@ export async function sitemap(route, api) {
 export function createRouter(app, config) {
   const router = _createRouter({
     history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
-    routes: wysiwygRoutes(config)
+    routes: contentRoutes(config)
   })
   return router
 }

package/index.js

@@ -1,17 +1,24 @@
-import Content from './front/src/components/Content.vue'
-import ContentEditor from './front/src/components/ContentEditor.vue'
 import Metadata from './front/src/components/Metadata.vue'
 import MetadataEditor from './front/src/components/MetadataEditor.vue'
+import Content from './front/src/components/Content.vue'
+import ContentEditor from './front/src/components/ContentEditor.vue'
+import ContentPreview from './front/src/components/ContentPreview.vue'
+import ContentSettings from './front/src/components/ContentSettings.vue'
+
+export { Metadata, MetadataEditor, Content, ContentEditor, ContentPreview, ContentSettings }
+
 import NotFoundAdminButtons from './front/src/components/NotFoundAdminButtons.vue'
+import NotAuthorizedAdminButtons from "./front/src/components/NotAuthorizedAdminButtons.vue"
+import ContentAdminButtons from './front/src/components/ContentAdminButtons.vue'
+import UrlContent from './front/src/components/UrlContent.vue'
+
+export { NotFoundAdminButtons, NotAuthorizedAdminButtons, ContentAdminButtons, UrlContent }
+
 import Page from './front/src/components/Page.vue'
 import PageEditor from './front/src/components/PageEditor.vue'
 import PagePreview from './front/src/components/PagePreview.vue'
-import PageAdminButtons from './front/src/components/PageAdminButtons.vue'
 
-export {
-  Content, ContentEditor, Metadata, MetadataEditor, NotFoundAdminButtons, Page, PageEditor, PagePreview,
-  PageAdminButtons
-}
+export { Page, PageEditor, PagePreview }
 
 import { catchAllPagesRoute, contentEditRoutes, pagesSitemap } from "./front/src/components/routes"
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/content-frontend",
-  "version": "0.2.15",
+  "version": "0.2.17",
   "scripts": {
     "memDev": "lcli memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -21,13 +21,14 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.2.0",
-    "@live-change/cli": "0.7.5",
+    "@live-change/cli": "0.7.6",
     "@live-change/dao": "0.5.8",
     "@live-change/dao-vue3": "0.5.8",
     "@live-change/dao-websocket": "0.5.8",
-    "@live-change/framework": "0.7.5",
-    "@live-change/image-service": "0.3.5",
-    "@live-change/session-service": "0.3.5",
+    "@live-change/framework": "0.7.6",
+    "@live-change/image-service": "0.3.8",
+    "@live-change/session-service": "0.3.8",
+    "@live-change/url-frontend": "^0.2.17",
     "@live-change/vue3-components": "0.2.16",
     "@live-change/vue3-ssr": "0.2.16",
     "@vueuse/core": "^9.1.0",
@@ -48,10 +49,10 @@
     "v-shared-element": "3.1.0",
     "vue-meta": "^3.0.0-alpha.9",
     "vue-router": "^4.1.3",
-    "vue3-scroll-border": "0.1.2"
+    "vue3-scroll-border": "0.1.4"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "0.7.5",
+    "@live-change/codeceptjs-helper": "0.7.6",
     "@wdio/selenium-standalone-service": "^7.20.8",
     "codeceptjs": "^3.3.4",
     "generate-password": "1.7.0",
@@ -63,5 +64,5 @@
   "author": "",
   "license": "ISC",
   "description": "",
-  "gitHead": "c3a1b57517db93829f3a733379a82496651c1039"
+  "gitHead": "61ea1e9554f3bf8cb8f9debffdabd8a88855c3b2"
 }

package/server/init.js

@@ -40,7 +40,7 @@ module.exports = async function(services) {
       id: documentId,
       ownerType: 'content_Page',
       owner: pageId,
-      type: 'content',
+      type: 'page',
       purpose: 'page',
       version: 1,
       content: documentContent,