cms/resources/js/components/blueprints/ImportField.vue at 9c2f4f10563c37a132e3e57713c9d63c3acc3500 · 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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<template>
    <div class="blueprint-section-field field-grid-item pr-1.5 w-full bg-white dark:bg-gray-850 rounded-xl ring ring-gray-200 dark:ring-x-0 dark:ring-b-0 dark:ring-gray-700 blueprint-section-field-w-full">
        <div class="pr-1.5 w-full bg-white dark:bg-gray-850 rounded-xl ring ring-gray-200 dark:ring-x-0 dark:ring-b-0 dark:ring-gray-700">
            <ui-card class="py-0.75! px-2! z-10 relative blueprint-section/import w-full">
                <div class="flex items-center gap-2">
                    <ui-icon name="handles" class="blueprint-drag-handle size-4 cursor-grab text-gray-300 dark:text-gray-600" />
                    <div class="flex flex-1 items-center justify-between">
                        <div class="flex flex-1 items-center py-2">
                            <ui-icon class="size-4 me-2 text-ui-accent-text/80" name="fieldsets" />
                            <div class="flex items-center gap-2">
                                <a class="cursor-pointer overflow-hidden text-ellipsis text-sm text-ui-accent-text hover:text-ui-accent-text/80" :href="fieldsetEditUrl" v-text="fieldsetTitle" v-tooltip="__('Edit fieldset')" />
                                <ui-icon name="link" class="text-gray-400" />
                                <span class="text-gray-500 font-mono text-2xs" v-text="__('Fieldset')" />
                                <ui-badge v-if="sectionBadgeText" size="sm" color="gray" :text="sectionBadgeText" />
                                <ui-badge
                                    v-if="field.prefix"
                                    size="sm"
                                    color="gray"
                                    :text="`${__('Prefix')}: ${field.prefix}`"
                                />
                            </div>
                        </div>
                        <div class="flex items-center">
                            <ui-button size="sm" icon="cog" variant="subtle" inset @click.prevent="$emit('edit')" v-tooltip="__('Configure import')" />
                            <ui-button size="sm" icon="trash" variant="subtle" inset @click.prevent="$emit('deleted')" v-tooltip="__('Remove')" />
                            <ui-stack :open="isEditing" @update:open="editorClosed" inset :show-close-button="false" :wrap-slot="false">
                                <field-settings
                                    ref="settings"
                                    :id="field._id"
                                    :root="isRoot"
                                    :fields="fields"
                                    :config="fieldConfig"
                                    :is-inside-set="isInsideSet"
                                    @committed="settingsUpdated"
                                    @closed="editorClosed"
                                />
                            </ui-stack>
                        </div>
                    </div>
                </div>
            </ui-card>
        </div>
    </div>
</template>

<script>
import Field from './Field.vue';
import FieldSettings from '../fields/ImportSettings.vue';

export default {
    mixins: [Field],

    components: { FieldSettings },

    inject: {
        isInsideSet: { default: false },
    },

    computed: {
        fieldsetTitle() {
            const title = this.$page?.props?.fieldsets?.[this.field.fieldset]?.title;

            return title ? __(title) : this.field.fieldset;
        },

        fieldsetHasSections() {
            return this.$page?.props?.fieldsets?.[this.field.fieldset]?.has_sections === true;
        },

        fieldsetSectionsCount() {
            return this.$page?.props?.fieldsets?.[this.field.fieldset]?.sections_count ?? 0;
        },

        fieldsetEditUrl() {
            return cp_url(`fields/fieldsets/${this.field.fieldset}/edit`);
        },

        sectionBehavior() {
            return this.field.section_behavior ?? 'preserve';
        },

        sectionBadgeText() {
            if (!this.fieldsetHasSections) {
                return null;
            }

            if (this.sectionBehavior === 'flatten') {
                return this.fieldsetSectionsCount === 1
                    ? __('Ignoring Section')
                    : __('Ignoring Sections');
            }

            return this.fieldsetSectionsCount === 1
                ? __('Has Section')
                : __('Has Sections');
        },

        fieldConfig() {
            const { _id, type, ...config } = this.field;
            return config;
        },
    },

    methods: {
        settingsUpdated(settings) {
            const field = Object.assign({}, this.field, settings);
            this.$emit('updated', field);
        },

        editorClosed() {
            this.$emit('editor-closed');
        },
    },
};
</script>