Edit.vue

<template>
    <div>
        <h1 class="mb-8 font-bold text-3xl">
            <inertia-link class="text-indigo-400 hover:text-indigo-600" :href="route('tokens')">
                Tokens
            </inertia-link>
            <span class="text-indigo-400 font-medium">/</span>
            <inertia-link class="text-indigo-400 hover:text-indigo-600" :href="route('token.edit', token.id)">
                {{ token.login }}
            </inertia-link>
            <span class="text-indigo-400 font-medium">/</span>
            {{ campaign.name }}
        </h1>
        <div class="mb-6 flex justify-between items-center">
            <div class="mt-4 flex flex-wrap">
                <select-input v-model="variable"
                              class="pr-6"
                              label="Variable"
                >
                    <option value="add">
                        [Add new]
                    </option>
                    <option v-for="variable in variables" :key="variable.id" :value="variable.id">
                        {{ variable.name }}
                    </option>
                </select-input>
                <text-input v-if="variable === 'add'"
                            v-model="name"
                            :error="errors.name"
                            class="pr-6"
                            label="New variable name"
                >
                </text-input>
                <text-input v-if="variable === 'add'"
                            v-model="default_value"
                            :error="errors.default_value"
                            class="pr-6"
                            label="New variable default value"
                >
                </text-input>
                <text-input v-model="value"
                            :error="errors.value"
                            class="pr-6"
                            label="Campaign default value"
                >
                </text-input>
                <button class="btn-indigo hover:underline"
                        tabindex="-1"
                        type="button"
                        @click="add"
                >
                    Add
                </button>
            </div>
        </div>
        <div class="bg-white rounded-md shadow overflow-x-auto">
            <table class="w-full whitespace-nowrap">
                <tr class="text-left font-bold">
                    <th class="px-6 pt-6 pb-4">Name</th>
                    <th class="px-6 pt-6 pb-4">Default value</th>
                </tr>
                <tr v-for="variable in variables" :key="variable.id" class="hover:bg-gray-100 focus-within:bg-gray-100">
                    <td class="px-6 py-4 border-t">
                        <div
                            v-if="!inputs[variable.id] || !inputs[variable.id].name || !inputs[variable.id].name.editable"
                            class="hover:text-indigo-500 focus:text-indigo-500 cursor-pointer"
                            @click="edit(variable.id, [
                                 {
                                     name: 'default_value',
                                     val: variable.default_value,
                                 },
                                 {
                                      name: 'name',
                                     val: variable.name,
                                 }
                             ])"
                        >
                            {{ variable.name }}
                        </div>
                        <div v-else class="inline-flex">
                            <text-input v-model="inputs[variable.id].name.val"
                                        class="pr-6"
                                        label="Variable name"
                            >
                            </text-input>
                            <text-input v-model="inputs[variable.id].default_value.val"
                                        class="pr-6"
                                        label="Variable default value"
                            >
                            </text-input>
                            <button class="btn-indigo hover:underline mr-6"
                                    tabindex="-1"
                                    type="button"
                                    @click="save(variable.id, ['name', 'default_value'])"
                            >

                                Save
                            </button>
                            <button class="btn-indigo hover:underline"
                                    tabindex="-1"
                                    type="button"
                                    @click="editCancel(variable.id, 'name')"
                            >

                                Cancel
                            </button>
                        </div>
                    </td>
                    <td class="px-6 py-4 border-t">
                        <div
                            v-if="!inputs[variable.id] || !inputs[variable.id].value || !inputs[variable.id].value.editable"
                            class="hover:text-indigo-500 focus:text-indigo-500 cursor-pointer"
                            @click="edit(variable.id, [
                                 {
                                     name: 'value',
                                     val: !variable.campaign
                                        ? ''
                                        : variable.campaign.pivot.value,
                                 },
                             ])"
                        >
                            {{ !variable.campaign
                            ? variable.default_value
                            : variable.campaign.pivot.value }}
                        </div>
                        <div v-else class="inline-flex">
                            <text-input v-model="inputs[variable.id].value.val"
                                        class="pr-6"
                                        label="Campaign default value"
                            >
                            </text-input>
                            <button class="btn-indigo hover:underline mr-6"
                                    tabindex="-1"
                                    type="button"
                                    @click="save(variable.id, ['value'])"
                            >

                                Save
                            </button>
                            <button class="btn-indigo hover:underline"
                                    tabindex="-1"
                                    type="button"
                                    @click="editCancel(variable.id, 'value')"
                            >

                                Cancel
                            </button>
                        </div>
                    </td>
                    <td class="px-6 py-4 border-t w-px">
                        <button class="px-4 flex items-center"
                                type="button"
                                tabindex="-1"
                                @click="destroy(variable.id)"
                        >
                            <icon name="trash" class="block w-6 h-6 fill-gray-400"/>
                        </button>
                    </td>
                </tr>
                <tr v-if="variables.length === 0">
                    <td class="border-t px-6 py-4" colspan="4">No variables found.</td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
    import Layout from '@/Shared/Layout'
    import Icon from '@/Shared/Icon'
    import TextInput from '@/Shared/TextInput'
    import SelectInput from "../../Shared/SelectInput";

    export default {
        metaInfo() {
            return {title: this.campaign.name}
        },
        components: {
            Icon,
            TextInput,
            SelectInput,
        },
        layout: Layout,
        props: {
            token: Object,
            variables: Array,
            campaign: Object,
            errors: Object,
        },
        data() {
            return {
                variable: this.variables.length ? null : 'add',
                default_value: '',
                name: '',
                value: '',
                inputs: {},
            }
        },
        watch: {},
        methods: {
            add() {
                this.$inertia.post(this.route('token.campaign.variables', [this.token.id, this.campaign.id]), {
                    variable: this.variable,
                    default_value: this.default_value,
                    name: this.name,
                    value: this.value,
                });

                this.name = '';
                this.value = '';
            },
            edit(campaign_var_id, options) {
                options.map((option) => {
                    this.inputs = {
                        ...this.inputs,
                        [campaign_var_id]: {
                            ...this.inputs[campaign_var_id],
                            [option.name]: {
                                editable: true,
                                val: option.val,
                            }
                        }
                    };
                });
            },
            editCancel(campaign_var_id, key) {
                this.inputs = {
                    ...this.inputs,
                    [campaign_var_id]: {
                        ...this.inputs[campaign_var_id],
                        [key]: {
                            ...this.inputs[campaign_var_id][key],
                            editable: false,
                        }
                    }
                };
            },
            save(campaign_var_id, names) {

                const method = names.indexOf('name') !== -1
                    ? 'patch'
                    : 'put';

                let data = {
                    id: campaign_var_id,
                };

                names.map((name) => {
                    data[name] = this.inputs[campaign_var_id][name].val;
                    this.editCancel(campaign_var_id, name);
                });

                this.$inertia[method](this.route('token.campaign.variables', [this.token.id, this.campaign.id]), data);
            },
            destroy(campaign_var_id) {
                if (confirm('Are you sure you want to delete this campaign var?')) {
                    this.$inertia.delete(this.route('token.campaign.variable.destroy', [this.token.id, this.campaign.id, campaign_var_id]));
                }
            },
        },
    }
</script>