AzuraCast/frontend/vue/components/Stations/BulkMedia.vue

<template>
    <div class="row">
        <div class="col-md-6">
            <section
                class="card"
                role="region"
            >
                <div class="card-header bg-primary-dark">
                    <h2 class="card-title">
                        {{ $gettext('Export Media to CSV') }}
                    </h2>
                </div>

                <div class="card-body">
                    <p class="card-text">
                        {{
                            $gettext('Click the button below to generate a CSV file with all of this station\'s media. You can make any necessary changes, and then import the file using the file picker on the right.')
                        }}
                    </p>
                    <p class="card-text">
                        {{
                            $gettext('Note: If your media metadata has UTF-8 characters, you should use a spreadsheet editor that supports UTF-8 encoding, like OpenOffice.')
                        }}
                    </p>

                    <div class="buttons">
                        <b-button
                            variant="primary"
                            size="lg"
                            block
                            :href="apiUrl"
                        >
                            {{ $gettext('Export Media to CSV') }}
                        </b-button>
                    </div>
                </div>
            </section>
        </div>
        <div class="col-md-6">
            <section
                class="card"
                role="region"
            >
                <div class="card-header bg-primary-dark">
                    <h2 class="card-title">
                        {{ $gettext('Import Changes from CSV') }}
                    </h2>
                </div>

                <div class="card-body">
                    <p class="card-text">
                        {{
                            $gettext('The format and headers of this CSV should match the format generated by the export function on this page.')
                        }}
                    </p>

                    <b-form
                        class="form"
                        @submit.prevent="doSubmit"
                    >
                        <b-form-group label-for="import_file">
                            <template #label>
                                {{ $gettext('Select CSV File') }}
                            </template>
                            <b-form-file
                                id="import_modal_playlist_file"
                                v-model="importFile"
                            />
                        </b-form-group>

                        <b-button
                            type="submit"
                            size="lg"
                            block
                            variant="primary"
                            class="mt-2"
                        >
                            {{ $gettext('Import Changes from CSV') }}
                        </b-button>
                    </b-form>
                </div>
            </section>
        </div>

        <b-modal
            id="import_modal"
            ref="modal"
            :title="$gettext('Import Results')"
        >
            <div>
                <p class="card-text">
                    {{ importResults.message }}
                </p>

                <b-table-simple
                    striped
                    responsive
                    style="max-height: 300px; overflow-y: scroll;"
                >
                    <b-thead>
                        <b-tr>
                            <b-th class="p-2">
                                {{ $gettext('Media File') }}
                            </b-th>
                            <b-th class="p-2">
                                {{ $gettext('Import Results') }}
                            </b-th>
                        </b-tr>
                    </b-thead>
                    <b-tbody>
                        <b-tr
                            v-for="row in importResults.import_results"
                            :key="row.id"
                        >
                            <b-td
                                class="p-2"
                                style="overflow-x: auto;"
                            >
                                <b>{{ row.title }}</b><br>
                                {{ row.artist }}
                            </b-td>
                            <b-td
                                class="p-2"
                                style="overflow-x: auto;"
                            >
                                <template v-if="row.success">
                                    <div class="text-success">
                                        {{ $gettext('Updated successfully.') }}
                                    </div>
                                </template>
                                <template v-else>
                                    <div class="text-danger">
                                        {{ $gettext('Unable to update.') }}
                                    </div>
                                    <div v-if="row.error">
                                        {{ row.error }}
                                    </div>
                                </template>
                            </b-td>
                        </b-tr>
                    </b-tbody>
                </b-table-simple>
            </div>
            <template #modal-footer>
                <b-button
                    variant="default"
                    type="button"
                    @click="closeModal"
                >
                    {{ $gettext('Close') }}
                </b-button>
            </template>
        </b-modal>
    </div>
</template>

<script>
export default {
    name: 'StationsBulkMedia',
    props: {
        apiUrl: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            importFile: null,
            importResults: {},
        };
    },
    methods: {
        doSubmit() {
            let formData = new FormData();
            formData.append('import_file', this.importFile);

            this.$wrapWithLoading(
                this.axios.post(this.apiUrl, formData)
            ).then((resp) => {
                this.importFile = null;
                
                if (resp.data.success) {
                    this.importResults = resp.data;
                    this.$notifySuccess(resp.data.message);
                    this.$refs.modal.show();
                } else {
                    this.$notifyError(resp.data.message);
                    this.close();
                }
            });
        },
        closeModal() {
            this.$refs.modal.hide();
        }
    }
};
</script>