cms/resources/js/pages/forms/Index.vue at 70d6ee3bf23a1c7658b5a805a03bd3c8132813c4 · statamic/cms · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<script setup>
import { computed } from 'vue';
import Head from '@/pages/layout/Head.vue';
import { Header, Button, CommandPaletteItem, EmptyStateMenu, EmptyStateItem, DocsCallout, Icon, Listing, DropdownItem } from '@ui';
import useStatamicPageProps from '@/composables/page-props.js';
import { Link, router } from '@inertiajs/vue3';

const props = defineProps([
    'forms',
    'initialColumns',
    'actionUrl',
    'canCreate',
    'createUrl',
    'configureEmailUrl',
]);

const { isPro } = useStatamicPageProps();
const isEmpty = computed(() => props.forms.length === 0);

const reloadPage = () => router.reload();
</script>

<template>
    <Head :title="__('Forms')" />

    <div class="max-w-page mx-auto">
        <template v-if="isEmpty">
            <header class="py-8 pt-16 text-center">
                <h1 class="text-[25px] font-medium antialiased flex justify-center items-center gap-2 sm:gap-3">
                    <Icon name="collections" class="size-5 text-gray-500" />
                    {{ __('Forms') }}
                </h1>
            </header>

            <EmptyStateMenu :heading="__('statamic::messages.form_configure_intro')">
                <EmptyStateItem
                    v-if="canCreate"
                    :href="createUrl"
                    icon="forms"
                    :heading="__('Create Form')"
                    :description="__('statamic::messages.form_create_description')"
                />
                <EmptyStateItem
                    :href="configureEmailUrl"
                    icon="mail-settings"
                    :heading="__('Configure Email')"
                    :description="__('statamic::messages.form_configure_email_description')"
                />
            </EmptyStateMenu>

            <DocsCallout :topic="__('Forms')" url="forms" />
        </template>

        <template v-else>
            <Header :title="__('Forms')" icon="forms">
                <CommandPaletteItem
                    v-if="isPro && canCreate"
                    category="Actions"
                    :text="__('Create Form')"
                    icon="forms"
                    :url="createUrl"
                    v-slot="{ text, url }"
                >
                    <Button :href="url" :text="text" variant="primary" />
                </CommandPaletteItem>
            </Header>

            <Listing :items="forms" :columns="initialColumns" :action-url="actionUrl" @refreshing="reloadPage">
                <template #cell-title="{ row: form }">
                    <Link :href="form.fields_url">{{ form.title }}</Link>
                </template>
                <template #cell-submissions="{ row: form, value: submissions }">
                    <Link :href="form.show_url">{{ submissions }}</Link>
                </template>
                <template #prepended-row-actions="{ row: form }">
                    <DropdownItem v-if="form.can_edit" :text="__('Configure')" :href="form.edit_url" icon="cog" />
                </template>
            </Listing>

            <DocsCallout :topic="__('Forms')" url="forms" />
        </template>
    </div>
</template>