@cwa/nuxt-edge 1.0.0-29138192.e49c1a0

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

@@ -0,0 +1,131 @@
+<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 { useHead } from '#app'
+import ListHeading from '#cwa/runtime/templates/components/core/admin/ListHeading.vue'
+import { definePageMeta, useCwa } from '#imports'
+import { useDataList } from '#cwa/layer/pages/_cwa/composables/useDataList'
+import ListFilter from '#cwa/runtime/templates/components/core/admin/ListFilter.vue'
+import ResourceModalOverlay from '#cwa/runtime/templates/components/core/admin/ResourceModalOverlay.vue'
+import ListContent from '#cwa/runtime/templates/components/core/admin/ListContent.vue'
+import { useListPage } from '#cwa/layer/pages/_cwa/composables/useListPage'
+import { useDataType } from '#cwa/layer/pages/_cwa/composables/useDataType'
+import { useDynamicPageLoader } from '#cwa/layer/pages/_cwa/composables/useDynamicPageLoader'
+import type { CwaResource } from '#cwa/runtime/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 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(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({
+  pageTransition: false,
+})
+</script>

package/dist/layer/pages/_cwa/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 { useHead } from '#app'
+import ListHeading from '#cwa/runtime/templates/components/core/admin/ListHeading.vue'
+import ListContainer from '#cwa/runtime/templates/components/core/admin/ListContainer.vue'
+import { useDataList } from '#cwa/layer/pages/_cwa/composables/useDataList'
+import Spinner from '#cwa/runtime/templates/components/utils/Spinner.vue'
+import { definePageMeta } from '#imports'
+
+const { displayPageDataClassName, dataTypes, fqcnToEntrypointKey, isLoadingDataTypes } = useDataList()
+
+useHead({
+  title: 'Page Data Categories',
+})
+
+definePageMeta({
+  pageTransition: false,
+})
+</script>

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

@@ -0,0 +1,174 @@
+<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 { type SelectOption, useCwa } from '#imports'
+import ResourceModal from '#cwa/runtime/templates/components/core/admin/ResourceModal.vue'
+import ResourceModalTabs, { type ResourceModalTab } from '#cwa/runtime/templates/components/core/admin/ResourceModalTabs.vue'
+import ModalSelect from '#cwa/runtime/templates/components/core/admin/form/ModalSelect.vue'
+import { componentNames } from '#components'
+import ModalInfo from '#cwa/runtime/templates/components/core/admin/form/ModalInfo.vue'
+
+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/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 { useHead } from '#app'
+import ListHeading from '#cwa/runtime/templates/components/core/admin/ListHeading.vue'
+import ListContent from '#cwa/runtime/templates/components/core/admin/ListContent.vue'
+import ListFilter from '#cwa/runtime/templates/components/core/admin/ListFilter.vue'
+import ResourceModalOverlay from '#cwa/runtime/templates/components/core/admin/ResourceModalOverlay.vue'
+import { useListPage } from '#cwa/layer/pages/_cwa/composables/useListPage'
+import { definePageMeta, useCwa } 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({
+  pageTransition: false,
+})
+</script>

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

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

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

@@ -0,0 +1,129 @@
+<template>
+  <ListHeading
+    title="Pages"
+    @add="goToAdd"
+  />
+  <ListFilter
+    :order-options="orderOptions"
+    :search-fields="['reference', 'title', 'uiComponent']"
+  />
+  <ListContainer>
+    <div>
+      <div>
+        <FilterFormWrapper
+          label="Page Type"
+          input-id="page-type"
+        >
+          <div class="cwa:flex cwa:gap-x-2">
+            <div>
+              <ListFilterButton
+                v-model="selectedTypesModel"
+                value="false"
+                label="Static"
+                background-color-class="cwa:bg-blue-600/20"
+                border-color-class="cwa:border-blue-600"
+              />
+            </div>
+            <div>
+              <ListFilterButton
+                v-model="selectedTypesModel"
+                value="true"
+                label="Dynamic"
+                background-color-class="cwa:bg-yellow/20"
+                border-color-class="cwa:border-yellow"
+              />
+            </div>
+          </div>
+        </FilterFormWrapper>
+      </div>
+    </div>
+  </ListContainer>
+  <ListContent
+    ref="listContent"
+    fetch-url="/_/pages"
+  >
+    <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.reference }}</span><span :class="['cwa:outline', 'cwa:outline-1', 'cwa:outline-offset-2', 'cwa:w-2', 'cwa:h-2', 'cwa:rounded-full', data.isTemplate ? 'cwa:outline-yellow cwa:bg-yellow' : 'cwa:outline-blue-600 cwa:bg-blue-600']" />
+          </div>
+          <span class="cwa:text-stone-400">UI: {{ data.uiComponent ? getDisplayPageUi(data.uiComponent) : 'Unknown' }}</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 lang="ts" setup>
+import { useRouter } from 'vue-router'
+import { ref } from 'vue'
+import { useListPage } from './composables/useListPage'
+import { useHead } from '#app'
+import ListHeading from '#cwa/runtime/templates/components/core/admin/ListHeading.vue'
+import ListContent from '#cwa/runtime/templates/components/core/admin/ListContent.vue'
+import ListFilter from '#cwa/runtime/templates/components/core/admin/ListFilter.vue'
+import ListContainer from '#cwa/runtime/templates/components/core/admin/ListContainer.vue'
+import FilterFormWrapper from '#cwa/runtime/templates/components/core/admin/form/FilterFormWrapper.vue'
+import ListFilterButton from '#cwa/runtime/templates/components/core/admin/ListFilterButton.vue'
+import { useQueryBoundModel } from '#cwa/runtime/composables/cwa-query-bound-model'
+import ResourceModalOverlay from '#cwa/runtime/templates/components/core/admin/ResourceModalOverlay.vue'
+import { definePageMeta, useCwa } from '#imports'
+
+const listContent = ref<InstanceType<typeof ListContent> | null>(null)
+
+const $cwa = useCwa()
+const { goToAdd, triggerReload, computedItemLink } = useListPage(listContent)
+
+const router = useRouter()
+
+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' },
+  },
+]
+
+const { model: selectedTypesModel } = useQueryBoundModel('isTemplate[]', {
+  defaultValue: ['true', 'false'],
+})
+
+function goToPage(page: string) {
+  router.push(page)
+}
+
+function getDisplayPageUi(ui: string) {
+  return $cwa.pagesConfig?.[ui]?.name || ui
+}
+
+useHead({
+  title: 'Pages',
+})
+
+definePageMeta({
+  pageTransition: false,
+})
+</script>

package/dist/layer/pages/_cwa/routes.vue

@@ -0,0 +1,72 @@
+<template>
+  <ListHeading
+    title="Routes"
+    :hide-add="true"
+  />
+  <ListFilter
+    :order-options="orderOptions"
+    :search-fields="['path']"
+  />
+  <ListContent
+    ref="listContent"
+    fetch-url="/_/routes"
+  >
+    <template #item="{ data, rawData }">
+      <RouteListRow
+        :data="data"
+        :associated-resources="rawData.associatedResources"
+        :link-fn="computedItemLink"
+        @delete="deleteRoute"
+      />
+    </template>
+  </ListContent>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useHead } from '#app'
+import ListHeading from '#cwa/runtime/templates/components/core/admin/ListHeading.vue'
+import ListContent from '#cwa/runtime/templates/components/core/admin/ListContent.vue'
+import ListFilter from '#cwa/runtime/templates/components/core/admin/ListFilter.vue'
+import { useListPage } from '#cwa/layer/pages/_cwa/composables/useListPage'
+import { definePageMeta, useCwa } from '#imports'
+import RouteListRow from '#cwa/runtime/templates/components/core/admin/RouteListRow.vue'
+
+const $cwa = useCwa()
+const listContent = ref<InstanceType<typeof ListContent> | null>(null)
+const { computedItemLink, triggerReload } = useListPage(listContent, true)
+
+async function deleteRoute(routeIri: string) {
+  await $cwa.resourcesManager.deleteResource({
+    endpoint: routeIri,
+  })
+  triggerReload()
+}
+
+const orderOptions = [
+  {
+    label: 'New - Old',
+    value: { createdAt: 'desc' },
+  },
+  {
+    label: 'Old - New',
+    value: { createdAt: 'asc' },
+  },
+  {
+    label: 'A - Z',
+    value: { path: 'asc' },
+  },
+  {
+    label: 'Z - A',
+    value: { path: 'desc' },
+  },
+]
+
+useHead({
+  title: 'Routes',
+})
+
+definePageMeta({
+  pageTransition: false,
+})
+</script>