@cwa/nuxt-edge 0.0.0-29696494.72f11a4

package/dist/layer/pages/_cwa/index/composables/useParentPageDataLoader.ts

@@ -0,0 +1,51 @@
+import { ref } from 'vue'
+import { useCwa } from '#cwa/composables/cwa'
+import type { PageDataMetadataResource } from '#cwa/storage/stores/api-documentation/state'
+import type { CwaResource } from '#cwa/resources/resource-utils'
+
+export const useParentPageDataLoader = () => {
+  const $cwa = useCwa()
+  const currentTypeRequestId = ref(0)
+  const currentInstanceRequestId = ref(0)
+  const dataTypes = ref<PageDataMetadataResource[]>()
+  const dataInstances = ref<CwaResource[]>()
+
+  function fqcnToEntrypointKey(fqcn: string): string | undefined {
+    const className = fqcn.split('\\').pop()
+    if (!className) return undefined
+    return className.charAt(0).toLowerCase() + className.slice(1)
+  }
+
+  async function loadDataTypes() {
+    const thisRequestId = currentTypeRequestId.value + 1
+    currentTypeRequestId.value = thisRequestId
+    const docs = await $cwa.getApiDocumentation()
+    if (thisRequestId !== currentTypeRequestId.value) return
+    const allMetadata = docs?.pageDataMetadata?.member
+    if (!allMetadata) {
+      dataTypes.value = []
+      return
+    }
+    dataTypes.value = allMetadata.filter(d => !d.resourceClass.endsWith('\\AbstractPageData'))
+  }
+
+  async function loadDataInstances(entrypointKey: string) {
+    const thisRequestId = currentInstanceRequestId.value + 1
+    currentInstanceRequestId.value = thisRequestId
+    const docs = await $cwa.getApiDocumentation()
+    const endpoint = docs?.entrypoint?.[entrypointKey]
+    if (!endpoint) {
+      if (thisRequestId === currentInstanceRequestId.value) {
+        dataInstances.value = []
+      }
+      return
+    }
+    const { response } = $cwa.fetch({ path: endpoint, noQuery: true })
+    const { _data: data } = await response
+    if (thisRequestId === currentInstanceRequestId.value) {
+      dataInstances.value = data?.member ?? []
+    }
+  }
+
+  return { loadDataTypes, loadDataInstances, dataTypes, dataInstances, fqcnToEntrypointKey }
+}

package/dist/layer/pages/_cwa/index/composables/useParentPageLoader.ts

@@ -0,0 +1,25 @@
+import { ref } from 'vue'
+import type { CwaResource } from '#cwa/resources/resource-utils'
+import { useCwa } from '#imports'
+
+export const useParentPageLoader = () => {
+  const $cwa = useCwa()
+  const currentRequestId = ref(0)
+  const parentPages = ref<CwaResource[]>()
+
+  async function loadParentPageOptions() {
+    const thisRequestId = currentRequestId.value + 1
+    currentRequestId.value = thisRequestId
+    const { response } = $cwa.fetch({ path: '/_/pages', noQuery: true })
+    const { _data: data } = await response
+    if (thisRequestId === currentRequestId.value) {
+      data && (parentPages.value = data['member'])
+    }
+    return parentPages
+  }
+
+  return {
+    loadParentPageOptions,
+    parentPages,
+  }
+}

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

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

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

@@ -0,0 +1,132 @@
+<template>
+  <ListHeading
+    :title="pageDataClassName"
+    @add="goToAdd"
+  >
+    <div class="cwa:-mt-7 cwa:mb-5">
+      <NuxtLink
+        :to="{ name: '_cwa-data' }"
+        class="cwa:text-sm cwa:flex cwa:items-center cwa:transition-opacity cwa:gap-x-1.5 cwa:opacity-70 cwa:hover:opacity-100"
+      >
+        <CwaUiIconArrowIcon class="cwa:w-4 cwa:rotate-90 cwa:my-2" />
+        <span>Page data categories</span>
+      </NuxtLink>
+    </div>
+  </ListHeading>
+  <ListFilter
+    :order-options="orderOptions"
+    :search-fields="['title']"
+  />
+  <ListContent
+    v-if="endpoint"
+    ref="listContent"
+    :fetch-url="endpoint"
+  >
+    <template #item="{ data }">
+      <div class="cwa:flex cwa:border-b cwa:border-b-stone-700 cwa:py-6 cwa:gap-x-4 cwa:items-center">
+        <div class="cwa:grow cwa:flex cwa:flex-col cwa:gap-y-1">
+          <div class="cwa:flex cwa:items-center cwa:gap-x-3">
+            <span class="cwa:text-xl">{{ data.title }}</span><span :class="['cwa:outline', 'cwa:outline-1', 'cwa:outline-offset-2', 'cwa:w-2', 'cwa:h-2', 'cwa:rounded-full', data.route ? ['cwa:outline-green', 'cwa:bg-green'] : ['cwa:outline-orange', 'cwa:bg-orange']]" />
+          </div>
+          <span class="cwa:text-stone-400">{{ pageDataById[data.page]?.reference || data.page }}</span>
+        </div>
+        <div class="cwa:flex cwa:gap-x-2">
+          <CwaUiFormButton :to="computedItemLink(data['@id'])">
+            <CwaUiIconCogIcon class="cwa:w-6" />
+            <span class="cwa:sr-only">Settings</span>
+          </CwaUiFormButton>
+          <CwaUiFormButton @click="() => goToPage(data['@id'])">
+            <CwaUiIconEyeIcon class="cwa:h-5" />
+            <span class="cwa:sr-only">View</span>
+          </CwaUiFormButton>
+        </div>
+      </div>
+    </template>
+  </ListContent>
+  <ResourceModalOverlay @reload="triggerReload" />
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watchEffect } from 'vue'
+import { useRouter } from 'vue-router'
+import ListHeading from '#cwa/templates/components/core/admin/ListHeading.vue'
+import { definePageMeta, useCwa, useCwaResourceRoute, useHead } from '#imports'
+import { useDataList } from '#cwa-layer/pages/_cwa/index/composables/useDataList'
+import ListFilter from '#cwa/templates/components/core/admin/ListFilter.vue'
+import ResourceModalOverlay from '#cwa/templates/components/core/admin/ResourceModalOverlay.vue'
+import ListContent from '#cwa/templates/components/core/admin/ListContent.vue'
+import { useListPage } from '#cwa-layer/pages/_cwa/index/composables/useListPage'
+import { useDataType } from '#cwa-layer/pages/_cwa/index/composables/useDataType'
+import { useDynamicPageLoader } from '#cwa-layer/pages/_cwa/index/composables/useDynamicPageLoader'
+import type { CwaResource } from '#cwa/resources/resource-utils'
+
+const listContent = ref<InstanceType<typeof ListContent> | null>(null)
+
+const $cwa = useCwa()
+const router = useRouter()
+const { pageDataClassName, dataType } = useDataType()
+
+const { goToAdd, triggerReload, computedItemLink } = useListPage(listContent)
+const { loadDynamicPageOptions, dynamicPages } = useDynamicPageLoader()
+const { getInternalResourceLink } = useCwaResourceRoute()
+
+const endpoint = ref<string>()
+
+const orderOptions = [
+  {
+    label: 'New - Old',
+    value: { createdAt: 'desc' },
+  },
+  {
+    label: 'Old - New',
+    value: { createdAt: 'asc' },
+  },
+  {
+    label: 'A - Z',
+    value: { title: 'asc' },
+  },
+  {
+    label: 'Z - A',
+    value: { title: 'desc' },
+  },
+]
+
+function goToPage(page: string) {
+  router.push(getInternalResourceLink(page))
+}
+
+// to force the loading of api documentation
+useDataList()
+
+onMounted(async () => {
+  await loadDynamicPageOptions()
+})
+
+const pageDataById = computed(() => {
+  if (!dynamicPages.value) {
+    return {}
+  }
+  return dynamicPages.value.reduce((obj, resource) => {
+    obj[resource['@id']] = { ...resource }
+    return obj
+  }, {} as { [iri: string]: CwaResource })
+})
+
+watchEffect(async () => {
+  const docs = await $cwa.getApiDocumentation()
+  if (dataType.value) {
+    endpoint.value = docs?.entrypoint?.[dataType.value]
+  }
+})
+
+useHead({
+  title: () => {
+    return pageDataClassName.value + ' - Page Data'
+  },
+})
+
+definePageMeta({
+  name: '_cwa-data-type',
+  pageTransition: false,
+})
+</script>

package/dist/layer/pages/_cwa/index/data/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <ListHeading
+    title="Page Data Categories"
+    :hide-add="true"
+  />
+  <ListContainer>
+    <div class="cwa:relative">
+      <Transition
+        appear
+        mode="out-in"
+        enter-from-class="cwa:transform cwa:opacity-0"
+        enter-active-class="cwa:duration-200 cwa:ease-out"
+        enter-to-class="cwa:opacity-100"
+        leave-from-class="cwa:opacity-100"
+        leave-active-class="cwa:duration-200 cwa:ease-in"
+        leave-to-class="cwa:transform cwa:opacity-0"
+      >
+        <Spinner
+          v-if="isLoadingDataTypes"
+          class="cwa:absolute cwa:top-5"
+          :show="true"
+        />
+        <div
+          v-else-if="!dataTypes.length"
+          class="cwa:flex cwa:justify-center"
+        >
+          <div class="cwa:w-full cwa:max-w-xl cwa:text-center cwa:flex cwa:flex-col cwa:gap-y-2 cwa:text-stone-400">
+            <div class="cwa:flex cwa:justify-center">
+              <CwaUiIconWarningIcon class="cwa:w-20" />
+            </div>
+            <h2 class="cwa:font-bold">
+              Sorry, no items found
+            </h2>
+          </div>
+        </div>
+        <ul
+          v-else
+          class="cwa:my-6 cwa:flex cwa:flex-col cwa:gap-y-4"
+        >
+          <li
+            v-for="pageData of dataTypes"
+            :key="pageData['@id']"
+          >
+            <NuxtLink
+              :to="{ name: '_cwa-data-type', params: { type: fqcnToEntrypointKey(pageData.resourceClass) } }"
+              class="cwa:flex cwa:p-4 cwa:border cwa:border-stone-700 cwa:py-6 cwa:gap-x-4 cwa:items-center cwa:bg-dark/80 cwa:hover:bg-dark cwa:cursor-pointer cwa:transition-colors"
+            >
+              <div class="cwa:grow cwa:flex cwa:flex-col cwa:gap-y-1">
+                <div class="cwa:flex cwa:items-center cwa:gap-x-3">
+                  <span class="cwa:text-xl">{{ displayPageDataClassName(pageData.resourceClass) }}</span>
+                </div>
+              </div>
+              <div class="cwa:flex cwa:gap-x-2">
+                <CwaUiFormButton class="cwa:pointer-events-none">
+                  <CwaUiIconArrowIcon class="cwa:w-5 cwa:-rotate-90 cwa:my-2" />
+                  <span class="cwa:sr-only">View</span>
+                </CwaUiFormButton>
+              </div>
+            </NuxtLink>
+          </li>
+        </ul>
+      </Transition>
+    </div>
+  </ListContainer>
+</template>
+
+<script setup lang="ts">
+import ListHeading from '#cwa/templates/components/core/admin/ListHeading.vue'
+import ListContainer from '#cwa/templates/components/core/admin/ListContainer.vue'
+import { useDataList } from '#cwa-layer/pages/_cwa/index/composables/useDataList'
+import Spinner from '#cwa/templates/components/utils/Spinner.vue'
+import { definePageMeta, useHead } from '#imports'
+
+const { displayPageDataClassName, dataTypes, fqcnToEntrypointKey, isLoadingDataTypes } = useDataList()
+
+useHead({
+  title: 'Page Data Categories',
+})
+
+definePageMeta({
+  name: '_cwa-data',
+  pageTransition: false,
+})
+</script>

package/dist/layer/pages/_cwa/index/layouts/[iri].vue

@@ -0,0 +1,180 @@
+<template>
+  <ResourceModal
+    v-if="localResourceData"
+    v-model="localResourceData.reference"
+    :is-loading="isLoading"
+    @close="$emit('close')"
+    @save="saveTitle"
+  >
+    <ResourceModalTabs :tabs="tabs">
+      <template #details>
+        <div class="cwa:flex cwa:flex-col cwa:gap-y-2">
+          <div>
+            <ModalSelect
+              v-model="localResourceData.uiComponent"
+              label="Layout UI"
+              :options="layoutComponentOptions"
+            />
+          </div>
+          <div v-if="layoutStyleOptions.length">
+            <ModalSelect
+              v-model="localResourceData.uiClassNames"
+              label="Style"
+              :options="layoutStyleOptions"
+            />
+          </div>
+          <div class="cwa:flex cwa:justify-end cwa:pt-2 cwa:gap-x-2">
+            <div>
+              <CwaUiFormButton
+                color="dark"
+                :disabled="isUpdating"
+                @click="saveResource(!isAdding)"
+              >
+                {{ isAdding ? 'Add Now' : 'Save & Close' }}
+              </CwaUiFormButton>
+            </div>
+            <div>
+              <CwaUiFormButton
+                color="blue"
+                :disabled="isUpdating"
+                @click="() => saveResource(isAdding)"
+              >
+                {{ isAdding ? 'Add & Close' : 'Save' }}
+              </CwaUiFormButton>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template #info>
+        <div class="cwa:flex cwa:flex-col cwa:gap-y-2">
+          <div>
+            <ModalInfo
+              label="Created"
+              :content="formatDate(localResourceData.createdAt)"
+            />
+          </div>
+          <div>
+            <ModalInfo
+              label="Updated"
+              :content="formatDate(localResourceData.updatedAt)"
+            />
+          </div>
+          <div>
+            <ModalInfo
+              label="ID"
+              :content="localResourceData['@id']"
+            />
+          </div>
+          <div class="cwa:flex cwa:justify-start cwa:pt-6">
+            <div>
+              <CwaUiFormButton
+                :disabled="isUpdating"
+                @click="handleDeleteClick"
+              >
+                Delete
+              </CwaUiFormButton>
+            </div>
+          </div>
+        </div>
+      </template>
+    </ResourceModalTabs>
+  </ResourceModal>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useItemPage } from '../composables/useItemPage'
+import { definePageMeta, useCwa } from '#imports'
+import type { SelectOption } from '#cwa/composables/cwa-select-input'
+import ResourceModal from '#cwa/templates/components/core/admin/ResourceModal.vue'
+import ResourceModalTabs from '#cwa/templates/components/core/admin/ResourceModalTabs.vue'
+import type { ResourceModalTab } from '#cwa/templates/components/core/admin/ResourceModalTabs.vue'
+import ModalSelect from '#cwa/templates/components/core/admin/form/ModalSelect.vue'
+import { componentNames } from '#components'
+import ModalInfo from '#cwa/templates/components/core/admin/form/ModalInfo.vue'
+
+definePageMeta({
+  name: '_cwa-layouts-iri',
+})
+
+const emit = defineEmits<{
+  close: []
+  reload: []
+}>()
+
+const layoutComponentNames = computed(() => {
+  return componentNames.filter(n => n.startsWith('CwaLayout'))
+})
+
+function cleanUiName(componentName: string) {
+  return componentName.replace(/^CwaLayout/, '')
+}
+
+const layoutComponentOptions = computed(() => {
+  const options = []
+  for (const componentName of layoutComponentNames.value) {
+    const cleanName = cleanUiName(componentName)
+    options.push({
+      label: $cwa.layoutsConfig?.[cleanName]?.name || cleanName,
+      value: componentName,
+    })
+  }
+  return options
+})
+
+const layoutStyleOptions = computed(() => {
+  if (!localResourceData.value?.uiComponent) {
+    return []
+  }
+  const cleanName = cleanUiName(localResourceData.value?.uiComponent)
+  const configuredClasses = $cwa.layoutsConfig?.[cleanName]?.classes
+  if (!configuredClasses) {
+    return []
+  }
+  const options: SelectOption[] = [
+    {
+      label: 'Default',
+      value: null,
+    },
+  ]
+  for (const [label, value] of Object.entries(configuredClasses)) {
+    options.push({
+      label,
+      value,
+    })
+  }
+  return options
+})
+
+const tabs = computed<ResourceModalTab[]>(() => {
+  const t: ResourceModalTab[] = [
+    {
+      label: 'Details',
+      id: 'details',
+    },
+  ]
+  if (!isAdding.value) {
+    t.push({
+      label: 'Info',
+      id: 'info',
+    })
+  }
+  return t
+})
+
+const $cwa = useCwa()
+
+const { isAdding, isLoading, isUpdating, localResourceData, formatDate, deleteResource, saveResource, saveTitle } = useItemPage({
+  createEndpoint: '/_/layouts',
+  emit,
+  resourceType: 'Layout',
+  defaultResource: {
+    reference: null,
+    uiComponent: layoutComponentOptions.value[0]?.value,
+  },
+})
+
+function handleDeleteClick() {
+  deleteResource()
+}
+</script>

package/dist/layer/pages/_cwa/index/layouts.vue

@@ -0,0 +1,77 @@
+<template>
+  <ListHeading
+    title="Layouts"
+    @add="goToAdd"
+  />
+  <ListFilter
+    :order-options="orderOptions"
+    :search-fields="['reference', 'uiComponent']"
+  />
+  <ListContent
+    ref="listContent"
+    fetch-url="/_/layouts"
+  >
+    <template #item="{ data }">
+      <div class="cwa:flex cwa:border-b cwa:border-b-stone-700 cwa:py-6 cwa:gap-x-4 cwa:items-center">
+        <div class="cwa:grow cwa:flex cwa:flex-col cwa:gap-y-1">
+          <span class="cwa:text-xl">{{ data.reference }}</span>
+          <span class="cwa:text-stone-400">UI: {{ data.uiComponent ? getDisplayLayoutUi(data.uiComponent) : 'Unknown' }}</span>
+        </div>
+        <div>
+          <CwaUiFormButton :to="computedItemLink(data['@id'])">
+            <CwaUiIconCogIcon class="cwa:w-6" />
+            <span class="cwa:sr-only">Settings</span>
+          </CwaUiFormButton>
+        </div>
+      </div>
+    </template>
+  </ListContent>
+  <ResourceModalOverlay @reload="triggerReload" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import ListHeading from '#cwa/templates/components/core/admin/ListHeading.vue'
+import ListContent from '#cwa/templates/components/core/admin/ListContent.vue'
+import ListFilter from '#cwa/templates/components/core/admin/ListFilter.vue'
+import ResourceModalOverlay from '#cwa/templates/components/core/admin/ResourceModalOverlay.vue'
+import { useListPage } from '#cwa-layer/pages/_cwa/index/composables/useListPage'
+import { definePageMeta, useCwa, useHead } from '#imports'
+
+const listContent = ref<InstanceType<typeof ListContent> | null>(null)
+
+const $cwa = useCwa()
+const { goToAdd, triggerReload, computedItemLink } = useListPage(listContent)
+
+const orderOptions = [
+  {
+    label: 'New - Old',
+    value: { createdAt: 'desc' },
+  },
+  {
+    label: 'Old - New',
+    value: { createdAt: 'asc' },
+  },
+  {
+    label: 'A - Z',
+    value: { reference: 'asc' },
+  },
+  {
+    label: 'Z - A',
+    value: { reference: 'desc' },
+  },
+]
+
+function getDisplayLayoutUi(ui: string) {
+  return $cwa.layoutsConfig?.[ui]?.name || ui.replace(/^CwaLayout/, '')
+}
+
+useHead({
+  title: 'Layouts',
+})
+
+definePageMeta({
+  name: '_cwa-layouts',
+  pageTransition: false,
+})
+</script>

package/dist/layer/pages/_cwa/index/pages/[iri].vue

@@ -0,0 +1,16 @@
+<template>
+  <PageAdminModal @reload="$emit('reload')" />
+</template>
+
+<script lang="ts" setup>
+import PageAdminModal from '#cwa/templates/components/core/admin/PageAdminModal.vue'
+import { definePageMeta } from '#imports'
+
+definePageMeta({
+  name: '_cwa-pages-iri',
+})
+
+defineEmits<{
+  reload: []
+}>()
+</script>