@evanschleret/formforgeclient 1.0.0

package/dist/runtime/renderers/default/FormForgeResponse.vue

@@ -0,0 +1,744 @@
+<script setup>
+import { computed, ref, useRoute, watch } from "#imports";
+import { useFormForgeGetForm } from "../../composables/useFormForgeGetForm";
+import { useFormForgeI18n } from "../../composables/useFormForgeI18n";
+import { useFormForgeResponses } from "../../composables/useFormForgeResponses";
+const props = defineProps({
+  responseUuid: { type: String, required: true },
+  formKey: { type: String, required: false, default: void 0 },
+  endpoint: { type: String, required: false, default: void 0 },
+  layout: { type: String, required: false, default: "line" },
+  clientConfig: { type: Object, required: false, default: void 0 }
+});
+const route = useRoute();
+const { t } = useFormForgeI18n({
+  locale: () => props.clientConfig?.locale
+});
+const responseResource = ref(null);
+const localError = ref(null);
+const formLoadError = ref(null);
+const previewImage = ref(null);
+const resolvedFormKey = computed(() => {
+  if (typeof props.formKey === "string" && props.formKey.trim() !== "") {
+    return props.formKey.trim();
+  }
+  const routeForm = route.params.form;
+  if (typeof routeForm === "string" && routeForm.trim() !== "") {
+    return routeForm.trim();
+  }
+  if (Array.isArray(routeForm) && typeof routeForm[0] === "string" && routeForm[0].trim() !== "") {
+    return routeForm[0].trim();
+  }
+  return "";
+});
+const resolvedResponseUuid = computed(() => {
+  return typeof props.responseUuid === "string" ? props.responseUuid.trim() : "";
+});
+const responses = useFormForgeResponses({
+  key: resolvedFormKey.value === "" ? "__missing_form_key__" : resolvedFormKey.value,
+  immediate: false,
+  endpoint: props.endpoint,
+  querySync: {
+    enabled: false
+  },
+  clientConfig: props.clientConfig
+});
+const formSchema = useFormForgeGetForm({
+  endpoint: props.endpoint,
+  clientConfig: props.clientConfig
+});
+const loading = computed(() => responses.loading.value || formSchema.loading.value);
+const isLineLayout = computed(() => props.layout === "line");
+const isPreviewOpen = computed(() => previewImage.value !== null);
+const error = computed(() => {
+  return localError.value ?? responses.error.value;
+});
+const payload = computed(() => {
+  if (responseResource.value === null) {
+    return {};
+  }
+  const responsePayload = responseResource.value.payload;
+  if (isRecord(responsePayload)) {
+    return responsePayload;
+  }
+  return {};
+});
+function isRecord(value) {
+  if (value === null || Array.isArray(value) || typeof value !== "object") {
+    return false;
+  }
+  return true;
+}
+function pickString(value, keys) {
+  for (const key of keys) {
+    const candidate = value[key];
+    if (typeof candidate === "string" && candidate.trim() !== "") {
+      return candidate;
+    }
+  }
+  return void 0;
+}
+function basename(path) {
+  const value = path.split("/").at(-1);
+  if (typeof value === "string" && value !== "") {
+    return value;
+  }
+  return path;
+}
+function looksLikeImage(name, mimeType) {
+  if (typeof mimeType === "string" && mimeType.startsWith("image/")) {
+    return true;
+  }
+  return /\.(png|jpe?g|gif|webp|svg|bmp|ico|avif)$/i.test(name);
+}
+function looksLikeFileReference(value) {
+  const trimmed = value.trim();
+  if (trimmed === "") {
+    return false;
+  }
+  if (trimmed.startsWith("http://") || trimmed.startsWith("https://") || trimmed.startsWith("/")) {
+    return true;
+  }
+  if (trimmed.includes("/")) {
+    return true;
+  }
+  return /\.(pdf|docx?|xlsx?|csv|txt|zip|png|jpe?g|gif|webp|svg|bmp|ico|avif)(\?.*)?$/i.test(trimmed);
+}
+function normalizeFileItem(value, index) {
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (!looksLikeFileReference(trimmed)) {
+      return null;
+    }
+    const name2 = basename(trimmed);
+    return {
+      id: `file-${index}`,
+      name: name2,
+      url: trimmed,
+      isImage: looksLikeImage(name2)
+    };
+  }
+  if (!isRecord(value)) {
+    return null;
+  }
+  if ("start" in value || "end" in value) {
+    return null;
+  }
+  const url = pickString(value, ["url", "download_url", "preview_url", "signed_url", "public_url", "path"]) ?? null;
+  const mimeType = pickString(value, ["mime_type", "mimeType"]);
+  const name = pickString(value, ["original_name", "file_name", "filename", "name"]) ?? (url !== null ? basename(url) : t("response.file.unnamed"));
+  const hasFileSignal = url !== null || mimeType !== void 0 || "disk" in value || "size" in value || "extension" in value;
+  if (!hasFileSignal) {
+    return null;
+  }
+  return {
+    id: `file-${index}`,
+    name,
+    url,
+    mimeType,
+    isImage: looksLikeImage(name, mimeType)
+  };
+}
+function collectFiles(value, allowFiles) {
+  if (!allowFiles) {
+    return [];
+  }
+  if (Array.isArray(value)) {
+    const files = [];
+    for (const [index, item] of value.entries()) {
+      const normalized = normalizeFileItem(item, index);
+      if (normalized !== null) {
+        files.push(normalized);
+      }
+    }
+    return files;
+  }
+  const single = normalizeFileItem(value, 0);
+  if (single !== null) {
+    return [single];
+  }
+  return [];
+}
+function formatAnswerText(value) {
+  if (value === void 0 || value === null) {
+    return t("response.answer.empty");
+  }
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    return trimmed === "" ? t("response.answer.empty") : trimmed;
+  }
+  if (typeof value === "number") {
+    return String(value);
+  }
+  if (typeof value === "boolean") {
+    return value ? t("response.answer.yes") : t("response.answer.no");
+  }
+  if (Array.isArray(value)) {
+    if (value.length === 0) {
+      return t("response.answer.empty");
+    }
+    return value.map((item) => formatAnswerText(item)).join(", ");
+  }
+  if (isRecord(value)) {
+    const start = value.start;
+    const end = value.end;
+    if (start !== void 0 || end !== void 0) {
+      const startText = formatAnswerText(start);
+      const endText = formatAnswerText(end);
+      if (startText === t("response.answer.empty") && endText === t("response.answer.empty")) {
+        return t("response.answer.empty");
+      }
+      if (startText === t("response.answer.empty")) {
+        return endText;
+      }
+      if (endText === t("response.answer.empty")) {
+        return startText;
+      }
+      return `${startText} - ${endText}`;
+    }
+    return JSON.stringify(value);
+  }
+  return t("response.answer.empty");
+}
+function makeAnswer(value, allowFiles) {
+  const files = collectFiles(value, allowFiles);
+  if (files.length > 0) {
+    return {
+      kind: "files",
+      value: files
+    };
+  }
+  return {
+    kind: "text",
+    value: formatAnswerText(value)
+  };
+}
+function toOptionKey(value) {
+  if (value === null) {
+    return "null";
+  }
+  if (typeof value === "string") {
+    return `string:${value}`;
+  }
+  if (typeof value === "number") {
+    return `number:${value}`;
+  }
+  if (typeof value === "boolean") {
+    return `boolean:${value ? "true" : "false"}`;
+  }
+  return null;
+}
+function normalizeOptionLabels(options) {
+  if (!Array.isArray(options)) {
+    return {};
+  }
+  const labels = {};
+  for (const option of options) {
+    if (option === null || typeof option === "string" || typeof option === "number" || typeof option === "boolean") {
+      const key2 = toOptionKey(option);
+      if (key2 !== null) {
+        labels[key2] = String(option ?? "");
+      }
+      continue;
+    }
+    if (!isRecord(option)) {
+      continue;
+    }
+    const optionValue = option.value;
+    const key = toOptionKey(optionValue);
+    if (key === null) {
+      continue;
+    }
+    const label = typeof option.label === "string" ? option.label : String(optionValue ?? "");
+    labels[key] = label;
+  }
+  return labels;
+}
+function mapOptionValue(optionLabels, value) {
+  const optionKey = toOptionKey(value);
+  if (optionKey === null) {
+    return value;
+  }
+  return optionLabels[optionKey] ?? value;
+}
+function mapFieldAnswerValue(field, value) {
+  const optionLabelCount = Object.keys(field.optionLabels).length;
+  if (optionLabelCount === 0) {
+    return value;
+  }
+  if (Array.isArray(value)) {
+    return value.map((entry) => mapOptionValue(field.optionLabels, entry));
+  }
+  return mapOptionValue(field.optionLabels, value);
+}
+function normalizeField(value, index) {
+  if (!isRecord(value)) {
+    return null;
+  }
+  const fieldKey = typeof value.field_key === "string" && value.field_key !== "" ? value.field_key : `field_${index + 1}`;
+  const name = typeof value.name === "string" && value.name !== "" ? value.name : "";
+  const label = typeof value.label === "string" ? value.label : void 0;
+  const type = typeof value.type === "string" ? value.type : void 0;
+  const optionLabels = normalizeOptionLabels(value.options);
+  if (name === "") {
+    return null;
+  }
+  return {
+    fieldKey,
+    name,
+    type,
+    label,
+    optionLabels
+  };
+}
+function normalizePages(schemaValue) {
+  if (!isRecord(schemaValue)) {
+    return [];
+  }
+  const schemaPages = schemaValue.pages;
+  if (Array.isArray(schemaPages) && schemaPages.length > 0) {
+    const pages = [];
+    for (const [pageIndex, pageValue] of schemaPages.entries()) {
+      if (!isRecord(pageValue)) {
+        continue;
+      }
+      const pageKey = typeof pageValue.page_key === "string" && pageValue.page_key !== "" ? pageValue.page_key : `page_${pageIndex + 1}`;
+      const title = typeof pageValue.title === "string" ? pageValue.title : t("response.page.fallback", { index: pageIndex + 1 });
+      const description = typeof pageValue.description === "string" && pageValue.description.trim() !== "" ? pageValue.description : void 0;
+      const rawFields2 = Array.isArray(pageValue.fields) ? pageValue.fields : [];
+      const fields2 = [];
+      for (const [fieldIndex, fieldValue] of rawFields2.entries()) {
+        const field = normalizeField(fieldValue, fieldIndex);
+        if (field !== null) {
+          fields2.push(field);
+        }
+      }
+      pages.push({
+        pageKey,
+        title,
+        description,
+        fields: fields2
+      });
+    }
+    if (pages.length > 0) {
+      return pages;
+    }
+  }
+  const rawFields = Array.isArray(schemaValue.fields) ? schemaValue.fields : [];
+  const fields = [];
+  for (const [fieldIndex, fieldValue] of rawFields.entries()) {
+    const field = normalizeField(fieldValue, fieldIndex);
+    if (field !== null) {
+      fields.push(field);
+    }
+  }
+  if (fields.length === 0) {
+    return [];
+  }
+  return [
+    {
+      pageKey: "page_1",
+      title: t("response.page.fallback", { index: 1 }),
+      fields
+    }
+  ];
+}
+function createPagesFromSchema(schemaValue) {
+  const pages = normalizePages(schemaValue);
+  return pages.map((page, pageIndex) => ({
+    id: page.pageKey,
+    title: page.title.trim() !== "" ? page.title : t("response.page.fallback", { index: pageIndex + 1 }),
+    description: page.description,
+    items: page.fields.map((field, fieldIndex) => ({
+      id: field.fieldKey,
+      question: typeof field.label === "string" && field.label.trim() !== "" ? field.label : t("response.question.fallback", { index: fieldIndex + 1 }),
+      answer: makeAnswer(
+        mapFieldAnswerValue(field, payload.value[field.name]),
+        field.type === "file"
+      )
+    }))
+  }));
+}
+function createPagesFromPayload() {
+  const entries = Object.entries(payload.value);
+  if (entries.length === 0) {
+    return [];
+  }
+  return [
+    {
+      id: "page_1",
+      title: t("response.page.fallback", { index: 1 }),
+      items: entries.map(([key, value], index) => ({
+        id: `payload-${key}`,
+        question: key !== "" ? key : t("response.question.fallback", { index: index + 1 }),
+        answer: makeAnswer(value, true)
+      }))
+    }
+  ];
+}
+const responsePages = computed(() => {
+  const schema = formSchema.form.value;
+  if (schema !== null) {
+    return createPagesFromSchema(schema);
+  }
+  return createPagesFromPayload();
+});
+function openImagePreview(file) {
+  if (file.url === null) {
+    return;
+  }
+  previewImage.value = file;
+}
+function closeImagePreview() {
+  previewImage.value = null;
+}
+async function downloadFile(file) {
+  if (file.url === null || import.meta.server) {
+    return;
+  }
+  try {
+    const response = await fetch(file.url, {
+      credentials: "include"
+    });
+    if (!response.ok) {
+      throw new Error(`Download failed: ${response.status}`);
+    }
+    const blob = await response.blob();
+    const objectUrl = window.URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = objectUrl;
+    link.download = file.name;
+    link.rel = "noopener";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(objectUrl);
+  } catch {
+    const link = document.createElement("a");
+    link.href = file.url;
+    link.download = file.name;
+    link.target = "_blank";
+    link.rel = "noopener noreferrer";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+}
+async function loadResponseView() {
+  localError.value = null;
+  formLoadError.value = null;
+  responseResource.value = null;
+  previewImage.value = null;
+  formSchema.clear();
+  if (resolvedResponseUuid.value === "") {
+    localError.value = t("response.error.missingResponseUuid");
+    return;
+  }
+  if (resolvedFormKey.value === "") {
+    localError.value = t("response.error.missingFormKey");
+    return;
+  }
+  try {
+    responseResource.value = await responses.getResponse(resolvedResponseUuid.value);
+  } catch (caughtError) {
+    localError.value = caughtError instanceof Error ? caughtError.message : t("response.error.load");
+    return;
+  }
+  try {
+    await formSchema.getForm({
+      key: resolvedFormKey.value
+    });
+  } catch (caughtError) {
+    formLoadError.value = caughtError instanceof Error ? caughtError.message : t("response.error.loadForm");
+  }
+}
+watch(
+  () => [resolvedFormKey.value, resolvedResponseUuid.value],
+  () => {
+    loadResponseView().catch(() => {
+    });
+  },
+  {
+    immediate: true
+  }
+);
+</script>
+
+<template>
+  <div class="w-full">
+    <p
+      v-if="loading"
+      class="text-sm text-neutral-500"
+    >
+      {{ t("response.loading") }}
+    </p>
+
+    <p
+      v-else-if="error !== null"
+      class="text-sm text-red-600"
+    >
+      {{ error }}
+    </p>
+
+    <p
+      v-else-if="responsePages.length === 0"
+      class="text-sm text-neutral-500"
+    >
+      {{ t("response.empty") }}
+    </p>
+
+    <div
+      v-else
+      class="space-y-12"
+    >
+      <p
+        v-if="formLoadError !== null"
+        class="text-sm text-amber-700"
+      >
+        {{ formLoadError }}
+      </p>
+
+      <section
+        v-for="(page, pageIndex) in responsePages"
+        :key="page.id"
+        class="space-y-4"
+      >
+        <div class="space-y-1">
+          <h3 class="text-base font-semibold text-neutral-900">
+            {{ page.title || t("response.page.fallback", { index: pageIndex + 1 }) }}
+          </h3>
+          <p
+            v-if="typeof page.description === 'string' && page.description.trim() !== ''"
+            class="text-sm text-neutral-500"
+          >
+            {{ page.description }}
+          </p>
+        </div>
+
+        <div class="space-y-5">
+          <article
+            v-for="item in page.items"
+            :key="item.id"
+            class="space-y-2"
+          >
+            <div
+              v-if="isLineLayout"
+              class="grid grid-cols-1 gap-2 md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] md:gap-6"
+            >
+              <p class="whitespace-pre-wrap text-sm font-medium text-neutral-900">
+                {{ item.question }}
+              </p>
+
+              <div
+                v-if="item.answer.kind === 'text'"
+                class="whitespace-pre-wrap text-sm text-neutral-700"
+              >
+                {{ item.answer.value }}
+              </div>
+
+              <div
+                v-else
+                class="space-y-2"
+              >
+                <div
+                  v-for="file in item.answer.value"
+                  :key="file.id"
+                  class="flex items-center gap-3"
+                >
+                  <button
+                    v-if="file.isImage && file.url !== null"
+                    type="button"
+                    class="inline-flex h-12 w-12 items-center justify-center overflow-hidden rounded border border-neutral-200 bg-white"
+                    @click="openImagePreview(file)"
+                  >
+                    <img
+                      :src="file.url"
+                      :alt="file.name"
+                      class="h-full w-full object-cover"
+                    >
+                  </button>
+
+                  <UIcon
+                    v-else
+                    name="i-lucide-file"
+                    class="h-5 w-5 shrink-0 text-neutral-500"
+                  />
+
+                  <div class="min-w-0 flex-1">
+                    <p class="truncate text-sm text-neutral-700">
+                      {{ file.name }}
+                    </p>
+                    <p
+                      v-if="file.mimeType"
+                      class="text-xs text-neutral-500"
+                    >
+                      {{ file.mimeType }}
+                    </p>
+                  </div>
+
+                  <div class="flex items-center gap-1">
+                    <UButton
+                      v-if="file.url !== null"
+                      :href="file.url"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      variant="ghost"
+                      color="neutral"
+                      icon="i-lucide-external-link"
+                      size="xs"
+                    >
+                      {{ t("response.action.preview") }}
+                    </UButton>
+
+                    <UButton
+                      v-if="file.url !== null"
+                      type="button"
+                      variant="ghost"
+                      color="neutral"
+                      icon="i-lucide-download"
+                      size="xs"
+                      @click="downloadFile(file)"
+                    >
+                      {{ t("response.action.download") }}
+                    </UButton>
+
+                    <UTooltip
+                      v-else
+                      :text="t('response.file.missingUrlHint')"
+                    >
+                      <span class="inline-flex h-7 w-7 items-center justify-center text-amber-600">
+                        <UIcon
+                          name="i-lucide-triangle-alert"
+                          class="h-4 w-4"
+                        />
+                      </span>
+                    </UTooltip>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div
+              v-else
+              class="space-y-1"
+            >
+              <p class="whitespace-pre-wrap text-sm font-medium text-neutral-900">
+                {{ item.question }}
+              </p>
+
+              <p
+                v-if="item.answer.kind === 'text'"
+                class="whitespace-pre-wrap text-sm text-neutral-700"
+              >
+                {{ item.answer.value }}
+              </p>
+
+              <div
+                v-else
+                class="space-y-2"
+              >
+                <div
+                  v-for="file in item.answer.value"
+                  :key="file.id"
+                  class="flex items-center gap-3"
+                >
+                  <button
+                    v-if="file.isImage && file.url !== null"
+                    type="button"
+                    class="inline-flex h-12 w-12 items-center justify-center overflow-hidden rounded border border-neutral-200 bg-white"
+                    @click="openImagePreview(file)"
+                  >
+                    <img
+                      :src="file.url"
+                      :alt="file.name"
+                      class="h-full w-full object-cover"
+                    >
+                  </button>
+
+                  <UIcon
+                    v-else
+                    name="i-lucide-file"
+                    class="h-5 w-5 shrink-0 text-neutral-500"
+                  />
+
+                  <div class="min-w-0 flex-1">
+                    <p class="truncate text-sm text-neutral-700">
+                      {{ file.name }}
+                    </p>
+                    <p
+                      v-if="file.mimeType"
+                      class="text-xs text-neutral-500"
+                    >
+                      {{ file.mimeType }}
+                    </p>
+                  </div>
+
+                  <div class="flex items-center gap-1">
+                    <UButton
+                      v-if="file.url !== null"
+                      :href="file.url"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      variant="ghost"
+                      color="neutral"
+                      icon="i-lucide-external-link"
+                      size="xs"
+                    >
+                      {{ t("response.action.preview") }}
+                    </UButton>
+
+                    <UButton
+                      v-if="file.url !== null"
+                      type="button"
+                      variant="ghost"
+                      color="neutral"
+                      icon="i-lucide-download"
+                      size="xs"
+                      @click="downloadFile(file)"
+                    >
+                      {{ t("response.action.download") }}
+                    </UButton>
+
+                    <UTooltip
+                      v-else
+                      :text="t('response.file.missingUrlHint')"
+                    >
+                      <span class="inline-flex h-7 w-7 items-center justify-center text-amber-600">
+                        <UIcon
+                          name="i-lucide-triangle-alert"
+                          class="h-4 w-4"
+                        />
+                      </span>
+                    </UTooltip>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </article>
+        </div>
+      </section>
+    </div>
+
+    <UModal
+      :open="isPreviewOpen"
+      @update:open="(open) => !open && closeImagePreview()"
+    >
+      <template #content>
+        <div class="space-y-3 p-3">
+          <img
+            v-if="previewImage?.url"
+            :src="previewImage.url"
+            :alt="previewImage.name"
+            class="max-h-[80vh] w-full rounded object-contain"
+          >
+          <p
+            v-if="previewImage"
+            class="truncate text-sm text-neutral-600"
+          >
+            {{ previewImage.name }}
+          </p>
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>