wip

resources/js/components/CreateImportForm.vue

@@ -0,0 +1,92 @@
+<template>
+    <div class="mt-3 card p-0 overflow-hidden">
+        <form class="p-4" @submit.prevent="save">
+            <h2>{{ __('New Import') }}</h2>
+
+            <publish-container
+                name="base"
+                :blueprint="blueprint"
+                :values="values"
+                :meta="meta"
+                :errors="errors"
+                :track-dirty-state="false"
+                @updated="values = $event"
+            >
+                <div slot-scope="{ setFieldValue, setFieldMeta }">
+                    <div class="-mx-6">
+                        <publish-fields
+                            :fields="fields"
+                            @updated="setFieldValue"
+                            @meta-updated="setFieldMeta"
+                        />
+                    </div>
+                </div>
+            </publish-container>
+
+            <div class="flex justify-center">
+                <button class="btn-primary" :disabled="saving">{{ __('Save & Configure') }}</button>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+import axios from 'axios';
+import HasInputOptions from '../../../vendor/statamic/cms/resources/js/components/fieldtypes/HasInputOptions.js';
+import Mappings from "./Mappings.vue";
+
+export default {
+    components: {Mappings},
+    mixins: [HasInputOptions],
+
+    props: {
+        action: String,
+        blueprint: Object,
+        fields: Array,
+        initialMeta: Object,
+        initialValues: Object,
+    },
+
+    data() {
+        return {
+            error: null,
+            errors: {},
+            saving: false,
+            meta: this.initialMeta,
+            values: this.initialValues,
+        }
+    },
+
+    methods: {
+        clearErrors() {
+            this.error = null;
+            this.errors = {};
+        },
+
+        save() {
+            this.saving = true;
+            this.clearErrors();
+
+            axios.post(this.action, this.values)
+                .then(response => {
+                    this.saving = false;
+                    window.location = response.data.redirect;
+                })
+                .catch(e => {
+                    this.saving = false;
+
+                    if (e.response && e.response.status === 422) {
+                        const { message, errors } = e.response.data;
+                        this.error = message;
+                        this.errors = errors;
+                        this.$toast.error(message);
+                        return;
+                    }
+
+                    const message = data_get(e, 'response.data.message');
+                    this.$toast.error(message || e);
+                });
+        }
+    }
+}
+</script>

resources/js/components/EditImportForm.vue

@@ -0,0 +1,86 @@
+<template>
+    <div>
+        <breadcrumb v-if="breadcrumbs" :url="breadcrumbs[0].url" :title="breadcrumbs[0].text" />
+
+        <div class="flex items-center justify-between mb-6">
+            <h1 v-text="title"></h1>
+
+            <div class="flex items-center space-x-4">
+                <button class="btn" :disabled="saving" @click="save()">{{ __('Save') }}</button>
+                <button class="btn-primary" :disabled="saving" @click="save(true)">{{ __('Save & Run') }}</button>
+            </div>
+        </div>
+
+        <div class="mt-3 card overflow-hidden">
+            <Mappings
+                :config="config"
+                :errors="errors"
+                :mappings-url="mappingsUrl"
+                @updated="config = $event"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+import axios from 'axios';
+import Mappings from "./Mappings.vue";
+
+export default {
+    components: {Mappings},
+
+    props: {
+        action: String,
+        breadcrumbs: Array,
+        title: String,
+        initialConfig: Object,
+        mappingsUrl: String,
+    },
+
+    data() {
+        return {
+            error: null,
+            errors: {},
+            saving: false,
+            config: this.initialConfig,
+        }
+    },
+
+    methods: {
+        clearErrors() {
+            this.error = null;
+            this.errors = {};
+        },
+
+        save(shouldRun = false) {
+            this.saving = true;
+            this.clearErrors();
+
+            axios.patch(this.action, {
+                mappings: this.config.mappings,
+                unique_key: this.config.unique_key,
+                run: shouldRun,
+            })
+                .then(response => {
+                    this.saving = false;
+                    if (shouldRun) this.$toast.success(__('Saved & Running'));
+                    if (! shouldRun) this.$toast.success(__('Saved'));
+                })
+                .catch(e => {
+                    this.saving = false;
+
+                    if (e.response && e.response.status === 422) {
+                        const { message, errors } = e.response.data;
+                        this.error = message;
+                        this.errors = errors;
+                        this.$toast.error(message);
+                        return;
+                    }
+
+                    const message = data_get(e, 'response.data.message');
+                    this.$toast.error(message || e);
+                });
+        },
+    },
+}
+</script>