@cwa/nuxt-edge 0.0.0-29696494.72f11a4

package/dist/runtime/templates/components/core/admin/PageAdminModal.vue

@@ -0,0 +1,404 @@
+<template>
+  <ResourceModal
+    v-if="localResourceData"
+    v-model="localResourceData.reference"
+    title-placeholder="No Reference"
+    :is-loading="isLoading"
+    :border-color-class="localResourceData.isTemplate ? 'cwa:border-b-yellow' : 'cwa:border-b-blue-600'"
+    @close="$emit('close')"
+    @save="saveTitle"
+  >
+    <template #title>
+      <PageTypeSelect v-model="localResourceData.isTemplate" />
+    </template>
+    <template
+      v-if="!hideViewLink && !isAdding"
+      #icons
+    >
+      <div>
+        <NuxtLink :to="getInternalResourceLink(localResourceData['@id'])">
+          <CwaUiIconEyeIcon class="cwa:w-9" />
+        </NuxtLink>
+      </div>
+    </template>
+    <template
+      v-if="depthChain.length > 1"
+      #subheader
+    >
+      <div class="cwa:flex cwa:gap-x-1 cwa:justify-center cwa:flex-wrap">
+        <button
+          v-for="option in depthChain"
+          :key="String(option.value)"
+          type="button"
+          class="cwa:py-1 cwa:px-3 cwa:text-sm cwa:rounded cwa:transition cwa:cursor-pointer"
+          :class="displayIri === option.value ? 'cwa:text-stone-100 cwa:bg-stone-700/80' : 'cwa:text-stone-400 cwa:hover:text-stone-300'"
+          @click="displayIri = option.value"
+        >
+          {{ option.label }}
+        </button>
+      </div>
+    </template>
+    <ResourceModalTabs :tabs="tabs">
+      <template #details>
+        <div class="cwa:flex cwa:flex-col cwa:gap-y-2">
+          <div class="cwa:flex cwa:flex-col cwa:gap-y-2 cwa:pb-2 cwa:border-b cwa:border-stone-500">
+            <span class="cwa:text-xs cwa:text-stone-400 cwa:uppercase cwa:tracking-wide cwa:px-1">Parent page</span>
+            <ModalRadioTabs
+              v-model="parentType"
+              :options="parentTypeOptions"
+            />
+            <div v-if="parentType === 'page'">
+              <ModalSelect
+                v-model="localResourceData.parentPage"
+                label="Parent Page"
+                :options="parentPageOptions"
+              />
+            </div>
+            <template v-if="parentType === 'data'">
+              <div>
+                <ModalSelect
+                  v-model="selectedParentDataType"
+                  label="Parent Data Type"
+                  :options="dataTypeOptions"
+                />
+              </div>
+              <div v-if="selectedParentDataType">
+                <ModalSelect
+                  v-model="localResourceData.parentPageData"
+                  label="Parent Data"
+                  :options="dataInstanceOptions"
+                />
+              </div>
+            </template>
+          </div>
+          <div>
+            <ModalInput
+              v-model="localResourceData.title"
+              label="SEO Page Title"
+            />
+          </div>
+          <div>
+            <ModalInput
+              v-model="localResourceData.metaDescription"
+              label="SEO Meta Description"
+            />
+          </div>
+          <div>
+            <ModalSelect
+              v-model="localResourceData.layout"
+              label="Layout"
+              :options="layoutOptions"
+            />
+          </div>
+          <div class="cwa:flex cwa:gap-x-2">
+            <div class="cwa:grow">
+              <ModalSelect
+                v-model="localResourceData.uiComponent"
+                label="Page UI"
+                :options="pageComponentOptions"
+              />
+            </div>
+            <div
+              v-if="pageStyleOptions.length"
+              class="cwa:w-1/2"
+            >
+              <ModalSelect
+                v-model="localResourceData.uiClassNames"
+                label="Style"
+                :options="pageStyleOptions"
+              />
+            </div>
+          </div>
+          <div class="cwa:flex cwa:justify-end cwa:pt-2 cwa:gap-x-2">
+            <div>
+              <CwaUiFormButton
+                color="dark"
+                :disabled="isUpdating"
+                @click="saveResource(true)"
+              >
+                {{ isAdding ? "Add" : "Save" }} & Close
+              </CwaUiFormButton>
+            </div>
+            <div>
+              <CwaUiFormButton
+                color="blue"
+                :disabled="isUpdating"
+                @click="() => saveResource(false)"
+              >
+                {{ isAdding ? "Add Now" : "Save" }}
+              </CwaUiFormButton>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template #routes>
+        <RoutesTab
+          v-if="resource && resource.hasOwnProperty('@id')"
+          :page-resource="resource"
+          @reload="loadResource"
+        />
+      </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>
+import { computed, onMounted, ref, watch } from "vue";
+import ResourceModal from "#cwa/templates/components/core/admin/ResourceModal.vue";
+import ResourceModalTabs from "#cwa/templates/components/core/admin/ResourceModalTabs.vue";
+import ModalInfo from "#cwa/templates/components/core/admin/form/ModalInfo.vue";
+import ModalInput from "#cwa/templates/components/core/admin/form/ModalInput.vue";
+import { useItemPage } from "#cwa-layer/pages/_cwa/index/composables/useItemPage";
+import { useParentPageLoader } from "#cwa-layer/pages/_cwa/index/composables/useParentPageLoader";
+import { useParentPageDataLoader } from "#cwa-layer/pages/_cwa/index/composables/useParentPageDataLoader";
+import { componentNames } from "#components";
+import { useCwa } from "#imports";
+import ModalSelect from "#cwa/templates/components/core/admin/form/ModalSelect.vue";
+import ModalRadioTabs from "#cwa/templates/components/core/admin/form/ModalRadioTabs.vue";
+import PageTypeSelect from "#cwa/templates/components/core/admin/form/PageTypeSelect.vue";
+import RoutesTab from "#cwa/templates/components/core/admin/RoutesTab.vue";
+const emit = defineEmits(["close", "reload"]);
+const props = defineProps({
+  iri: { type: String, required: false },
+  hideViewLink: { type: Boolean, required: false }
+});
+const $cwa = useCwa();
+const { parentPages, loadParentPageOptions } = useParentPageLoader();
+const { dataTypes, dataInstances, loadDataTypes, loadDataInstances, fqcnToEntrypointKey } = useParentPageDataLoader();
+const displayIri = ref(props.iri);
+function getResourceData(iri) {
+  return $cwa.resources.getResource(iri).value;
+}
+const parentTypeOptions = [
+  { label: "None", value: null },
+  { label: "Page", value: "page" },
+  { label: "Data", value: "data" }
+];
+const selectedParentDataType = ref(null);
+const parentType = ref(null);
+const depthChain = computed(() => {
+  const chain = [];
+  let iri = props.iri;
+  while (iri) {
+    const res = getResourceData(iri);
+    chain.unshift({
+      label: res?.data?.reference || res?.data?.title || iri,
+      value: iri
+    });
+    iri = res?.data?.parentPage || res?.data?.parentPageData || null;
+  }
+  return chain;
+});
+function isDescendantOfCurrentPage(candidateIri) {
+  const allPages = parentPages.value ?? [];
+  const byId = Object.fromEntries(allPages.map((p) => [p["@id"], p]));
+  const visited = /* @__PURE__ */ new Set();
+  let current = byId[candidateIri]?.parentPage;
+  while (current) {
+    if (visited.has(current)) break;
+    visited.add(current);
+    if (current === props.iri) return true;
+    current = byId[current]?.parentPage;
+  }
+  return false;
+}
+const parentPageOptions = computed(() => {
+  const options = [{ label: "None", value: null }];
+  for (const page of parentPages.value ?? []) {
+    if (page["@id"] !== props.iri && !isDescendantOfCurrentPage(page["@id"])) {
+      options.push({ label: page.reference, value: page["@id"] });
+    }
+  }
+  return options;
+});
+const dataTypeOptions = computed(() => {
+  const options = [{ label: "Select type\u2026", value: null }];
+  for (const type of dataTypes.value ?? []) {
+    const key = fqcnToEntrypointKey(type.resourceClass);
+    if (key) {
+      options.push({ label: type.resourceClass.split("\\").pop() ?? key, value: key });
+    }
+  }
+  return options;
+});
+const dataInstanceOptions = computed(() => {
+  const options = [{ label: "Select\u2026", value: null }];
+  for (const instance of dataInstances.value ?? []) {
+    options.push({ label: instance.title || instance["@id"], value: instance["@id"] });
+  }
+  return options;
+});
+const pageComponentNames = computed(() => {
+  return componentNames.filter((n) => n.startsWith("CwaPage"));
+});
+function cleanUiName(componentName) {
+  return componentName.replace(/^CwaPage/, "");
+}
+const pageComponentOptions = computed(() => {
+  const options = [];
+  for (const componentName of pageComponentNames.value) {
+    const cleanName = cleanUiName(componentName);
+    options.push({
+      label: $cwa.pagesConfig?.[cleanName]?.name || cleanName,
+      value: cleanName
+    });
+  }
+  return options;
+});
+const pageStyleOptions = computed(() => {
+  if (!localResourceData.value?.uiComponent) {
+    return [];
+  }
+  const cleanName = cleanUiName(localResourceData.value?.uiComponent);
+  const configuredClasses = $cwa.pagesConfig?.[cleanName]?.classes;
+  if (!configuredClasses) {
+    return [];
+  }
+  const options = [
+    {
+      label: "Default",
+      value: null
+    }
+  ];
+  for (const [label, value] of Object.entries(configuredClasses)) {
+    options.push({
+      label,
+      value
+    });
+  }
+  return options;
+});
+const layoutOptions = computed(() => {
+  if (!layouts.value) {
+    return [];
+  }
+  const options = [];
+  for (const layout of layouts.value) {
+    options.push({
+      label: layout.reference,
+      value: layout["@id"]
+    });
+  }
+  return options;
+});
+const { isAdding, isLoading, isUpdating, localResourceData, resource, formatDate, deleteResource, saveResource: _saveResource, saveTitle: _saveTitle, loadResource, getInternalResourceLink } = useItemPage({
+  createEndpoint: "/_/pages",
+  emit,
+  resourceType: "Page",
+  defaultResource: {
+    isTemplate: false,
+    uiComponent: pageComponentOptions.value[0]?.value
+  },
+  endpoint: displayIri,
+  routeHashAfterAdd: computed(() => localResourceData.value?.isTemplate ? "#data" : "#routes"),
+  excludeFields: ["componentGroups"]
+});
+function saveResource(close = false) {
+  if (localResourceData.value) {
+    if (parentType.value !== "page") localResourceData.value.parentPage = null;
+    if (parentType.value !== "data") localResourceData.value.parentPageData = null;
+  }
+  return _saveResource(close);
+}
+function saveTitle() {
+  if (isAdding.value) return;
+  return saveResource();
+}
+const tabs = computed(() => {
+  const t = [
+    {
+      label: "Details",
+      id: "details"
+    }
+  ];
+  if (!isAdding.value) {
+    t.push({
+      label: "Routes",
+      id: "routes"
+    });
+    t.push({
+      label: "Info",
+      id: "info"
+    });
+  }
+  return t;
+});
+const currentRequestId = ref(0);
+const layouts = ref();
+function handleDeleteClick() {
+  deleteResource();
+}
+async function loadLayoutOptions() {
+  const thisRequestId = currentRequestId.value + 1;
+  currentRequestId.value = thisRequestId;
+  isLoading.value = true;
+  const { response } = $cwa.fetch({ path: "/_/layouts", noQuery: true });
+  const { _data: data } = await response;
+  if (thisRequestId === currentRequestId.value) {
+    data && (layouts.value = data["member"]);
+    isLoading.value = false;
+  }
+  if (!layouts.value?.length) {
+    emit("close");
+    return;
+  }
+  if (isAdding.value && localResourceData.value && !localResourceData.value.layout) {
+    localResourceData.value.layout = layoutOptions.value[0]?.value;
+  }
+}
+watch(() => localResourceData.value?.isTemplate, (isTemplate, oldIsTemplate) => {
+  !isAdding.value && isTemplate !== void 0 && oldIsTemplate !== void 0 && saveResource(false);
+});
+watch(selectedParentDataType, (key, oldKey) => {
+  if (oldKey && localResourceData.value) localResourceData.value.parentPageData = null;
+  if (key) loadDataInstances(key);
+});
+watch(localResourceData, (data, oldData) => {
+  if (data?.parentPage) parentType.value = "page";
+  else if (data?.parentPageData) parentType.value = "data";
+  else parentType.value = null;
+  if (data && !oldData && data.parentPageData) {
+    const pdResource = $cwa.resources.getResource(data.parentPageData).value;
+    const pdType = pdResource?.data?.["@type"];
+    if (pdType) {
+      const key = fqcnToEntrypointKey(pdType);
+      if (key) selectedParentDataType.value = key;
+    }
+  }
+}, { immediate: true });
+onMounted(async () => {
+  await Promise.all([loadLayoutOptions(), loadParentPageOptions(), loadDataTypes()]);
+});
+</script>

package/dist/runtime/templates/components/core/admin/PageAdminModal.vue.d.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    iri?: string;
+    hideViewLink?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    reload: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onReload?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/templates/components/core/admin/PageDataAdminModal.d.vue.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    iri?: string;
+    hideViewLink?: boolean;
+    resourceType: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    reload: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onReload?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;