opnform-host-nginx/client/pages/forms/[slug]/show.vue

<template>
  <div class="bg-white">
    <template v-if="form">
      <div class="flex bg-gray-50">
        <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4">
          <div class="pt-4 pb-0">
            <a
              href="#"
              class="flex text-blue mb-2 font-semibold text-sm"
              @click.prevent="goBack"
            >
              <svg
                class="w-3 h-3 text-blue mt-1 mr-1"
                viewBox="0 0 6 10"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M5 9L1 5L5 1"
                  stroke="currentColor"
                  stroke-width="1.5"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
              Go back
            </a>

            <div class="flex flex-wrap">
              <h2 class="flex-grow text-gray-900 truncate">
                {{ form.title }}
              </h2>
              <div class="flex mt-4 gap-2 lg:mt-0">
                <UButton
                  v-if="form.visibility === 'draft'"
                  color="white"
                  class="hover:no-underline"
                  icon="i-heroicons-eye"
                  @click="showDraftFormWarningNotification"
                >
                  <span class="hidden sm:inline">View <span class="hidden md:inline">form</span></span>
                </UButton>
                <UButton
                  v-else
                  v-track.view_form_click="{form_id:form.id, form_slug:form.slug}"
                  target="_blank"
                  :to="form.share_url"
                  color="white"
                  class="hover:no-underline"
                  icon="i-heroicons-eye"
                >
                  <span class="hidden sm:inline">View <span class="hidden md:inline">form</span></span>
                </UButton>
                <UButton
                  v-if="!workspace.is_readonly"
                  v-track.edit_form_click="{form_id: form.id, form_slug: form.slug}"
                  color="primary"
                  icon="i-heroicons-pencil"
                  class="hover:no-underline"
                  :to="{ name: 'forms-slug-edit', params: { slug: form.slug } }"
                >
                  Edit <span class="hidden md:inline">form</span>
                </UButton>
                <extra-menu
                  v-if="!workspace.is_readonly"
                  :form="form"
                />
              </div>
            </div>

            <p class="text-gray-500 text-sm">
              <span class="pr-1">{{ form.views_count }} view{{
                form.views_count > 0 ? "s" : ""
              }}</span>
              <span class="pr-1">- {{ form.submissions_count }} submission{{
                form.submissions_count > 0 ? "s" : ""
              }}
              </span>
              <span>- Edited {{ form.last_edited_human }}</span>
            </p>
            <div
              v-if="
                ['draft', 'closed'].includes(form.visibility) ||
                  (form.tags && form.tags.length > 0)
              "
              class="mt-2 flex items-center flex-wrap gap-3"
            >
              <span
                v-if="form.visibility == 'draft'"
                class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700"
              >
                Draft - not publicly accessible
              </span>
              <span
                v-else-if="form.visibility == 'closed'"
                class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700"
              >
                Closed - won't accept new submissions
              </span>
              <span
                v-for="(tag) in form.tags"
                :key="tag"
                class="inline-flex items-center rounded-full bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700"
              >
                {{ tag }}
              </span>
            </div>

            <p
              v-if="form.closes_at"
              class="text-yellow-500"
            >
              <span v-if="form.is_closed">
                This form stopped accepting submissions on the
                {{ displayClosesDate }}
              </span>
              <span v-else>
                This form will stop accepting submissions on the
                {{ displayClosesDate }}
              </span>
            </p>
            <p
              v-if="form.max_submissions_count > 0"
              class="text-yellow-500"
            >
              <span v-if="form.max_number_of_submissions_reached">
                The form is now closed because it reached its limit of
                {{ form.max_submissions_count }} submissions.
              </span>
              <span v-else>
                This form will stop accepting submissions after
                {{ form.max_submissions_count }} submissions.
              </span>
            </p>

            <form-cleanings
              class="mt-4"
              :form="form"
            />

            <div class="border-b border-gray-200 dark:border-gray-700">
              <ul class="flex flex-wrap -mb-px text-sm font-medium text-center">
                <li
                  v-for="(tab, i) in tabsList"
                  :key="i + 1"
                  class="mr-6"
                >
                  <nuxt-link
                    :to="{ name: tab.route, params: tab.params ?? {} }"
                    class="hover:no-underline inline-block py-4 rounded-t-lg border-b-2 text-gray-500 hover:text-gray-600"
                    active-class="text-blue-600 hover:text-blue-900 dark:text-blue-500 dark:hover:text-blue-500 border-blue-600 dark:border-blue-500"
                  >
                    {{ tab.name }}
                  </nuxt-link>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-col bg-white">
        <NuxtPage :form="form" />
      </div>
    </template>
    <div
      v-else-if="loading"
      class="text-center w-full p-5"
    >
      <Loader class="h-6 w-6 mx-auto" />
    </div>
    <div
      v-else
      class="text-center w-full p-5"
    >
      Form not found.
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue"
import ExtraMenu from "../../../components/pages/forms/show/ExtraMenu.vue"
import FormCleanings from "../../../components/pages/forms/show/FormCleanings.vue"

definePageMeta({
  middleware: "auth",
})
useOpnSeoMeta({
  title: "Home",
})

const route = useRoute()
const formsStore = useFormsStore()
const workingFormStore = useWorkingFormStore()
const workspacesStore = useWorkspacesStore()

const slug = useRoute().params.slug

formsStore.startLoading()
const form = computed(() => formsStore.getByKey(slug))
const workspace = computed(() => workspacesStore.getCurrent)

const loading = computed(() => formsStore.loading || workspacesStore.loading)
const displayClosesDate = computed(() => {
  if (form.value && form.value.closes_at) {
    const dateObj = new Date(form.value.closes_at)
    return (
      dateObj.getFullYear() +
      "-" +
      String(dateObj.getMonth() + 1).padStart(2, "0") +
      "-" +
      String(dateObj.getDate()).padStart(2, "0") +
      " " +
      String(dateObj.getHours()).padStart(2, "0") +
      ":" +
      String(dateObj.getMinutes()).padStart(2, "0")
    )
  }
  return ""
})

const tabsList = [
  {
    name: "Submissions",
    route: "forms-slug-show-submissions",
    params: { 'slug': slug }
  },
  ...workspace.value.is_readonly ? [] : [
    {
      name: "Integrations",
      route: "forms-slug-show-integrations",
      params: { 'slug': slug }
    },
  ],
  {
    name: "Analytics",
    route: "forms-slug-show-stats",
    params: { 'slug': slug }
  },
  {
    name: "Share",
    route: "forms-slug-show-share",
    params: { 'slug': slug }
  },
]

onMounted(() => {
  workingFormStore.reset()
  if (form.value) {
    workingFormStore.set(form.value)
  } else {
    formsStore.loadForm(route.params.slug)
  }
})

watch(
  () => form?.value?.id,
  (id) => {
    if (id) {
      workingFormStore.set(form.value)
    }
  },
)

const goBack = () => {
  useRouter().push({ name: "home" })
}

const showDraftFormWarningNotification = () => {
  useAlert().warning(
    "This form is currently in Draft mode and is not publicly accessible, You can change the form status on the edit form page.",
  )
}
</script>