@cwa/nuxt-edge 1.0.0-29138192.e49c1a0

package/README.md

@@ -0,0 +1,38 @@
+<!---
+This file is auto-generate by a github hook please modify README.template.md if you don't want to lose your work
+-->
+# CWA Nuxt 3 Module (in development)
+
+[![codecov](https://codecov.io/github/components-web-app/cwa-nuxt-module/branch/feat/manager-tabs/graph/badge.svg?token=Z6GQJN413O)](https://app.codecov.io/gh/components-web-app/cwa-nuxt-module/tree/feat/manager-tabs)
+
+This module is designed to work with the [API Component Bundle](https://github.com/components-web-app/api-components-bundle) and will provide a full user-interface and utilities to easily create custom web apps with an advanced in-line content management system
+
+## CWA Module in Action
+
+### Template using this module for front-end and API Components Bundle for back-end
+https://github.com/components-web-app/components-web-app/tree/v3
+
+### Template application deployed online
+https://cwa-v3-silverback-web-apps.vercel.app/
+
+## Development
+
+- Run `pnpm run dev:prepare` to generate type stubs.
+- Use `pnpm run dev` to start [playground](./playground) in development mode.
+
+### Linting
+
+- Run `pnpm run lint` or `pnpm run lint:fix`
+
+### Testing
+
+We have built in testing using `vitest`.
+
+- To run tests as a one-off use `pnpm run test`
+- To include coverage run `pnpm run test:coverage`
+- To run tests in watch mode during development run `pnpm run test:watch`
+- If you want to check coverage updates at the same time as watching for file changes you can run `pnpm run test:watch:coverage`
+
+## Test coverage for branch `feat/manager-tabs`
+
+![Codecov sunburst image](https://codecov.io/github/components-web-app/cwa-nuxt-module/branch/feat/manager-tabs/graphs/sunburst.svg?token=Z6GQJN413O)

package/README.template.md

@@ -0,0 +1,32 @@
+# CWA Nuxt 3 Module (in development)
+
+[![codecov](https://codecov.io/github/components-web-app/cwa-nuxt-module/branch/{{ current.branch }}/graph/badge.svg?token=Z6GQJN413O)](https://app.codecov.io/gh/components-web-app/cwa-nuxt-module/tree/{{ current.branch }})
+
+This module is designed to work with the [API Component Bundle](https://github.com/components-web-app/api-components-bundle) and will provide a full user-interface and utilities to easily create custom web apps with an advanced in-line content management system
+
+## CWA Module in Action
+
+### Template using this module for front-end and API Components Bundle for back-end
+https://github.com/components-web-app/components-web-app/tree/v3
+
+## Development
+
+- Run `pnpm run dev:prepare` to generate type stubs.
+- Use `pnpm run dev` to start [playground](./playground) in development mode.
+
+### Linting
+
+- Run `pnpm run lint` or `pnpm run lint:fix`
+
+### Testing
+
+We have built in testing using `vitest`.
+
+- To run tests as a one-off use `pnpm run test`
+- To include coverage run `pnpm run test:coverage`
+- To run tests in watch mode during development run `pnpm run test:watch`
+- If you want to check coverage updates at the same time as watching for file changes you can run `pnpm run test:watch:coverage`
+
+## Test coverage for branch `{{ current.branch }}`
+
+![Codecov sunburst image](https://codecov.io/github/components-web-app/cwa-nuxt-module/branch/{{ current.branch }}/graphs/sunburst.svg?token=Z6GQJN413O)

package/dist/layer/error.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+defineProps<{
+  error: NuxtError
+}>()
+</script>
+
+<template>
+  <NuxtLayout>
+    <CwaErrorPage :error="error" />
+  </NuxtLayout>
+</template>

package/dist/layer/layouts/CwaRootLayout.vue

@@ -0,0 +1,140 @@
+<template>
+  <div
+    id="cwa-root-layout"
+    ref="rootLayout"
+    class="cwa:relative cwa:h-full cwa:flex cwa:flex-col"
+    @contextmenu="closeContextMenu"
+  >
+    <ClientOnly>
+      <LazyCwaAdminHeader v-if="showAdmin" />
+      <OutdatedContentNotice
+        v-else
+        class="cwa:absolute cwa:top-0 cwa:mt-1.5 cwa:left-1/2 cwa:-translate-x-1/2 cwa:z-50"
+      />
+    </ClientOnly>
+    <component
+      :is="resolvedComponent"
+      v-if="resolvedComponent"
+      class="cwa:relative"
+      @click.stop="onLayoutClick"
+      @contextmenu.stop="onLayoutContextMenu"
+    >
+      <div
+        ref="page"
+        class="cwa:grow"
+        @click.stop="onPageClick"
+        @contextmenu.stop="onPageContextMenu"
+      >
+        <slot />
+      </div>
+    </component>
+    <ClientOnly>
+      <template v-if="showAdmin">
+        <LazyCwaAdminResourceManager ref="resourceManager" />
+        <LayoutPageOverlay
+          v-if="$cwa.admin.isEditing && page && rootLayout"
+          :page="page"
+          :layout="rootLayout"
+        />
+        <teleport to="body">
+          <DialogsWrapper />
+        </teleport>
+      </template>
+    </ClientOnly>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, getCurrentInstance, watch, nextTick } from 'vue'
+import { DialogsWrapper } from 'vuejs-confirm-dialog'
+import { useRouter } from 'vue-router'
+import { useWindowScroll } from '@vueuse/core'
+import { useCwa } from '#imports'
+import { LazyCwaAdminHeader, LazyCwaAdminResourceManager, LazyCwaDefaultLayout } from '#components'
+import OutdatedContentNotice from '#cwa/runtime/templates/components/main/admin/header/_parts/OutdatedContentNotice.vue'
+import type { GlobalComponentNames } from '#cwa/module'
+import LayoutPageOverlay from '#cwa/runtime/templates/components/main/admin/resource-manager/LayoutPageOverlay.vue'
+
+const $cwa = useCwa()
+const currentRoute = useRouter().currentRoute
+const resourceManager = ref<null | InstanceType<typeof LazyCwaAdminResourceManager>>(null)
+const page = ref<null | HTMLDivElement>(null)
+const rootLayout = ref<null | HTMLDivElement>(null)
+const instance = getCurrentInstance()
+
+const cwaPageMeta = computed(() => {
+  return currentRoute.value.meta?.cwa
+})
+
+function callResourceManagerHandler(handler: 'contextMenuHandler' | 'clickHandler', e: MouseEvent, type: 'layout' | 'page') {
+  resourceManager.value && resourceManager.value[handler](e, type)
+}
+
+function closeContextMenu(e: MouseEvent) {
+  resourceManager.value && resourceManager.value.closeContextMenu(e)
+}
+
+function onLayoutContextMenu(e: MouseEvent) {
+  callResourceManagerHandler('contextMenuHandler', e, 'layout')
+}
+
+function onPageContextMenu(e: MouseEvent) {
+  callResourceManagerHandler('contextMenuHandler', e, 'page')
+}
+
+function onPageClick(e: MouseEvent) {
+  callResourceManagerHandler('clickHandler', e, 'page')
+}
+
+function onLayoutClick(e: MouseEvent) {
+  callResourceManagerHandler('clickHandler', e, 'layout')
+}
+
+const layoutResource = computed(() => {
+  return $cwa.resources.layout.value
+})
+
+const layoutUiComponent = computed<GlobalComponentNames>(() => {
+  return cwaPageMeta.value?.staticLayout || (layoutResource.value?.data?.uiComponent as GlobalComponentNames) || LazyCwaDefaultLayout
+})
+
+// todo: adjust to not be global https://github.com/nuxt/nuxt/issues/14036#issuecomment-2110180751
+const resolvedComponent = computed(() => {
+  // todo: add checks to ensure component exists - otherwise output a warning and/or default
+  if (
+    typeof instance?.appContext.components !== 'object'
+    || !layoutUiComponent.value
+  ) {
+    return LazyCwaDefaultLayout
+  }
+  return layoutUiComponent.value
+})
+
+const cachedWindowScroll = ref<{ x: number, y: number }>()
+const windowScroll = useWindowScroll()
+
+watch(() => $cwa.admin.isEditing, () => {
+  cachedWindowScroll.value = {
+    x: windowScroll.x.value,
+    y: windowScroll.y.value,
+  }
+}, {
+  flush: 'pre',
+})
+
+watch(() => $cwa.admin.isEditing, async () => {
+  // when lots of elements on the page are replaced with drafts, it can cause the scroll to revert to the top of the page. Prevent this.
+  // we may need to wait for other components to have loaded in from drafts... todo: have a think about draft component loading and taking some time.
+  await nextTick()
+  setTimeout(() => {
+    if (cachedWindowScroll.value) {
+      window.scrollTo(cachedWindowScroll.value.x, cachedWindowScroll.value.y)
+      cachedWindowScroll.value = undefined
+    }
+  }, 10)
+}, {
+  flush: 'post',
+})
+
+const showAdmin = $cwa.auth.isAdmin
+</script>

package/dist/layer/nuxt.config.spec.ts

@@ -0,0 +1,10 @@
+import { vi, describe, test, expect } from 'vitest'
+import * as nuxt from 'nuxt/config'
+
+describe('defineNuxtConfig called with correct object', () => {
+  test('Config is correct', async () => {
+    vi.spyOn(nuxt, 'defineNuxtConfig').mockImplementationOnce(() => {})
+    await import('./nuxt.config')
+    expect(nuxt.defineNuxtConfig).toHaveBeenCalledWith({})
+  })
+})

package/dist/layer/nuxt.config.ts

@@ -0,0 +1,3 @@
+import { defineNuxtConfig } from 'nuxt/config'
+
+export default defineNuxtConfig({})

package/dist/layer/pages/_cwa/composables/useDataList.ts

@@ -0,0 +1,50 @@
+import { onMounted, ref } from 'vue'
+import { useCwa } from '#cwa/runtime/composables/cwa'
+import type { PageDataMetadataResource } from '#cwa/runtime/storage/stores/api-documentation/state'
+
+export const useDataList = () => {
+  const $cwa = useCwa()
+  const dataTypes = ref<PageDataMetadataResource[]>([])
+  const isLoadingDataTypes = ref(true)
+
+  function fqcnToEntrypointKey(fqcn: string) {
+    // e.g. App\\Entity\\BlogArticleData -> blogArticleData
+    const className = fqcn.split('\\').pop()
+    if (!className) {
+      return
+    }
+    return className.charAt(0).toLowerCase() + className.slice(1)
+  }
+
+  function displayPageDataClassName(cls: string) {
+    const clsName = cls.split('\\').pop()
+    const configName = clsName ? $cwa.pageDataConfig?.[clsName]?.name : undefined
+    return configName || clsName || cls
+  }
+
+  onMounted(async () => {
+    if (!$cwa.auth.user?.['@id']) {
+      return
+    }
+    isLoadingDataTypes.value = true
+    // need to fetch a resource to get the docs from link header if not set - user should always be there as we are logged in
+    await $cwa.fetchResource({
+      path: $cwa.auth.user?.['@id'],
+    })
+    const docs = await $cwa.getApiDocumentation()
+    const allMetadata = docs?.pageDataMetadata?.['hydra:member']
+    if (!allMetadata) {
+      isLoadingDataTypes.value = false
+      return
+    }
+    dataTypes.value = allMetadata.filter(data => (!data.resourceClass.endsWith('\\AbstractPageData')))
+    isLoadingDataTypes.value = false
+  })
+
+  return {
+    displayPageDataClassName,
+    dataTypes,
+    fqcnToEntrypointKey,
+    isLoadingDataTypes,
+  }
+}

package/dist/layer/pages/_cwa/composables/useDataType.ts

@@ -0,0 +1,30 @@
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useCwa } from '#cwa/runtime/composables/cwa'
+
+export const useDataType = () => {
+  const $cwa = useCwa()
+  const route = useRoute()
+  const dataType = computed(() => {
+    const typeParam = route.params.type
+    return Array.isArray(typeParam) ? typeParam[0] : typeParam
+  })
+  const dataTypeClassName = computed(() => {
+    if (!dataType.value) {
+      return
+    }
+    return dataType.value.charAt(0).toUpperCase() + dataType.value.slice(1)
+  })
+  const pageDataClassName = computed(() => {
+    if (!dataTypeClassName.value) {
+      return 'Unknown'
+    }
+    return $cwa.pageDataConfig?.[dataTypeClassName.value]?.name || dataType.value
+  })
+
+  return {
+    dataTypeClassName,
+    dataType,
+    pageDataClassName,
+  }
+}

package/dist/layer/pages/_cwa/composables/useDynamicPageLoader.ts

@@ -0,0 +1,28 @@
+import { ref } from 'vue'
+import type { CwaResource } from '#cwa/runtime/resources/resource-utils'
+import { useCwa } from '#imports'
+
+export const useDynamicPageLoader = () => {
+  const $cwa = useCwa()
+  const loadingDynamicPages = ref(false)
+  const currentRequestId = ref(0)
+  const dynamicPages = ref<CwaResource[]>()
+
+  async function loadDynamicPageOptions() {
+    const thisRequestId = currentRequestId.value + 1
+    currentRequestId.value = thisRequestId
+    loadingDynamicPages.value = true
+    const { response } = $cwa.fetch({ path: '/_/pages?isTemplate=true', noQuery: true })
+    const { _data: data } = await response
+    if (thisRequestId === currentRequestId.value) {
+      data && (dynamicPages.value = data['hydra:member'])
+      loadingDynamicPages.value = false
+    }
+    return dynamicPages
+  }
+
+  return {
+    loadDynamicPageOptions,
+    dynamicPages,
+  }
+}

package/dist/layer/pages/_cwa/composables/useItemPage.ts

@@ -0,0 +1,172 @@
+import { computed, type ComputedRef, isRef, onMounted, type Ref, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import dayjs from 'dayjs'
+import type { CwaResource } from '#cwa/runtime/resources/resource-utils'
+import { useCwa } from '#cwa/runtime/composables/cwa'
+import { ErrorType } from '#cwa/runtime/storage/stores/error/state'
+
+type TempCwaResource = Omit<CwaResource, '@id' | '_metadata'>
+
+type StartsWithHash = `#${string}`
+
+type UseItemOps = {
+  createEndpoint: string | Ref<string>
+  emit: ((evt: 'close') => void) & ((evt: 'reload') => void)
+  resourceType: string
+  defaultResource: Omit<TempCwaResource, '@type'>
+  validate?: (data: any) => boolean | string
+  endpoint?: Ref<string | undefined>
+  routeHashAfterAdd?: ComputedRef<StartsWithHash>
+  iri?: Ref<string | undefined>
+  excludeFields?: string[]
+}
+
+export const useItemPage = ({ emit, resourceType, defaultResource, createEndpoint, validate, endpoint: userDefinedEndpoint, routeHashAfterAdd, iri, excludeFields }: UseItemOps) => {
+  const $cwa = useCwa()
+  const router = useRouter()
+  const route = useRoute()
+  const endpoint = computed(() => userDefinedEndpoint?.value || (Array.isArray(route.params.iri) ? route.params.iri[0] : route.params.iri))
+  if (!endpoint.value) {
+    throw new Error('No Endpoint Found For useItemPage composable')
+  }
+
+  const isLoading = ref(true)
+  const isUpdating = ref(false)
+  const localResourceData = ref<TempCwaResource | CwaResource>()
+
+  const isAdding = computed(() => endpoint.value === 'add')
+  const resource = computed(() => isAdding.value ? localResourceData.value : $cwa.resources.getResource(iri?.value || endpoint.value).value?.data)
+
+  function formatDate(dateStr: string) {
+    return dayjs(dateStr).format('DD/MM/YY @ HH:mm UTCZ')
+  }
+
+  function loadResource() {
+    if (isAdding.value) {
+      localResourceData.value = {
+        '@type': resourceType,
+        ...defaultResource,
+      }
+      return localResourceData.value
+    }
+    return $cwa.fetchResource({
+      path: endpoint.value,
+      iri: iri?.value,
+      shallowFetch: true,
+    })
+  }
+
+  async function deleteResource(refreshEndpoints?: string[]) {
+    isUpdating.value = true
+    await $cwa.resourcesManager.deleteResource({
+      endpoint: iri?.value || endpoint.value,
+      refreshEndpoints,
+    })
+    emit('reload')
+    emit('close')
+    isUpdating.value = false
+  }
+
+  function saveTitle() {
+    if (isAdding.value) {
+      return
+    }
+    return saveResource()
+  }
+
+  async function saveResource(close = false) {
+    if (!localResourceData.value) {
+      return
+    }
+    if (validate) {
+      const result = validate(localResourceData.value)
+      if (result !== true) {
+        if (result !== false) {
+          $cwa.resourcesManager.addError({
+            type: ErrorType.VALIDATION,
+            timestamp: (new Date()).getTime(),
+            statusCode: 0,
+            detail: result,
+            violations: [
+              {
+                message: result,
+                property: 'plainPassword',
+              },
+            ],
+          })
+        }
+        return
+      }
+    }
+    const doRequest = async () => {
+      const data: { [key: string]: any } = {
+        ...localResourceData.value,
+      }
+      if (excludeFields) {
+        for (const field of excludeFields) {
+          data[field] && (delete data[field])
+        }
+      }
+      if (isAdding.value) {
+        const newResource = await $cwa.resourcesManager.createResource({
+          endpoint: isRef(createEndpoint) ? createEndpoint.value : createEndpoint,
+          data,
+          source: 'admin-modal',
+        })
+        if (newResource) {
+          emit('reload')
+          if (close) {
+            emit('close')
+          }
+          else {
+            router.push({ name: route.name, params: { iri: newResource['@id'] }, query: route.query, hash: routeHashAfterAdd?.value })
+          }
+        }
+        return newResource
+      }
+
+      const updatedResource = await $cwa.resourcesManager.updateResource({
+        endpoint: iri?.value || endpoint.value,
+        data,
+      })
+      if (close && updatedResource) {
+        emit('close')
+      }
+      return updatedResource
+    }
+
+    isUpdating.value = true
+    const resource = await doRequest()
+    isUpdating.value = false
+    return resource
+  }
+
+  function syncLocalResourceWithStore(newResource: TempCwaResource | undefined) {
+    !isAdding.value && newResource && (localResourceData.value = { ...newResource })
+  }
+
+  watch(resource, syncLocalResourceWithStore)
+
+  onMounted(async () => {
+    await loadResource()
+    if (!resource.value || (resourceType !== undefined && resource.value['@type'] !== resourceType)) {
+      emit('close')
+      isLoading.value = false
+      return
+    }
+    isLoading.value = false
+  })
+
+  return {
+    isLoading,
+    isUpdating,
+    resource,
+    localResourceData,
+    isAdding,
+    formatDate,
+    deleteResource,
+    saveTitle,
+    saveResource,
+    loadResource,
+  }
+}

package/dist/layer/pages/_cwa/composables/useListPage.ts

@@ -0,0 +1,43 @@
+import { type RouteLocationRaw, useRoute, useRouter } from 'vue-router'
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+import type ListContent from '#cwa/runtime/templates/components/core/admin/ListContent.vue'
+
+export const useListPage = (listContent: Ref<InstanceType<typeof ListContent> | null>, clearPageNumberQuery?: boolean) => {
+  const router = useRouter()
+  const route = useRoute()
+
+  function triggerReload() {
+    listContent.value?.reloadItems()
+  }
+
+  function goToAdd() {
+    router.push(computedItemLink.value('add'))
+  }
+
+  const computedItemLink = computed(() => {
+    return (iri: string, routeName?: string, hash?: string, params?: { [key: string]: string }): RouteLocationRaw => {
+      const currentRouteName = routeName || route.name?.toString()
+      if (!currentRouteName) {
+        return '#'
+      }
+      const upperRouteName = currentRouteName.replace(/-iri$/, '')
+
+      if (!params) {
+        params = {}
+      }
+      params.iri = iri
+
+      const query = { ...route.query }
+      clearPageNumberQuery && delete query.page
+
+      return { name: `${upperRouteName}-iri`, params, query, hash }
+    }
+  })
+
+  return {
+    goToAdd,
+    triggerReload,
+    computedItemLink,
+  }
+}

package/dist/layer/pages/_cwa/data/[type]/[iri].vue

@@ -0,0 +1,17 @@
+<template>
+  <PageDataAdminModal
+    :resource-type="dataTypeClassName || ''"
+    @reload="$emit('reload')"
+  />
+</template>
+
+<script lang="ts" setup>
+import PageDataAdminModal from '#cwa/runtime/templates/components/core/admin/PageDataAdminModal.vue'
+import { useDataType } from '#cwa/layer/pages/_cwa/composables/useDataType'
+
+const { dataTypeClassName } = useDataType()
+
+defineEmits<{
+  reload: []
+}>()
+</script>