Disco/Disco.Web/Views/Device/Export.cshtml

@using Disco.Web.Models.Device;
@model ExportModel
@{
    Authorization.RequireAny(Claims.Device.Actions.Export);

    ViewBag.Title = Html.ToBreadcrumb("Devices", MVC.Device.Index(), "Export");
}
<div id="Devices_Export">
    @using (Html.BeginForm(MVC.API.Device.Export(), FormMethod.Post, new { @data_saveaction = Url.Action(MVC.API.Device.SaveExport()) }))
    {
        @Html.AntiForgeryToken()
        <div id="Devices_Export_Type" class="form" style="width: 570px">
            <h2>Export Type</h2>
            <table>
                <tr>
                    <th style="width: 150px">
                        Type:
                    </th>
                    <td>
                        @Html.DropDownListFor(m => m.Options.ExportType, Enum.GetNames(typeof(Disco.Models.Services.Devices.DeviceExportTypes)).Select(t => new SelectListItem() { Text = t, Value = t }))
                        <div id="Devices_Export_Type_Target_Batch" class="Devices_Export_Type_Target">
                            @Html.DropDownListFor(m => m.Options.ExportTypeTargetId, Model.DeviceBatches.Select(i => new SelectListItem() { Value = i.Key.ToString(), Text = i.Value }))
                        </div>
                        <div id="Devices_Export_Type_Target_Model" class="Devices_Export_Type_Target">
                            @Html.DropDownListFor(m => m.Options.ExportTypeTargetId, Model.DeviceModels.Select(i => new SelectListItem() { Value = i.Key.ToString(), Text = i.Value }))
                        </div>
                        <div id="Devices_Export_Type_Target_Profile" class="Devices_Export_Type_Target">
                            @Html.DropDownListFor(m => m.Options.ExportTypeTargetId, Model.DeviceProfiles.Select(i => new SelectListItem() { Value = i.Key.ToString(), Text = i.Value }))
                        </div>
                    </td>
                </tr>
                <tr>
                    <th>@Html.LabelFor(m => m.Options.Format)</th>
                    <td>
                        @Html.DropDownListFor(m => m.Options.Format, Enum.GetNames(typeof(Disco.Models.Exporting.ExportFormat)).Select(v => new SelectListItem() { Value = v, Text = v }))
                    </td>
                </tr>
            </table>
        </div>
        @Html.Partial(MVC.Shared.Views._ExportFields, Model.Fields.FieldGroups)
        <script>
            $(function () {
                const $exportType = $('#Options_ExportType');
                const $exportTypeTargetContainers = $('#Devices_Export_Type').find('.Devices_Export_Type_Target');
                const $form = $exportType.closest('form');
                let $exportingDialog = null;

                $exportType.on('change', function () {
                    $exportTypeTargetContainers.hide();
                    $exportTypeTargetContainers.find('select').prop('disabled', true);

                    switch ($exportType.val()) {
                        case 'Batch':
                            $('#Devices_Export_Type_Target_Batch').show().find('select').prop('disabled', false);
                            break;
                        case 'Profile':
                            $('#Devices_Export_Type_Target_Profile').show().find('select').prop('disabled', false);
                            break;
                        case 'Model':
                            $('#Devices_Export_Type_Target_Model').show().find('select').prop('disabled', false);
                            break;
                    }
                }).trigger('change');

                $.validator.unobtrusive.parse($form);
                $form.data("validator").settings.submitHandler = function () {
                    const exportFieldCount = $('#Export_Fields').find('input:checked').length;
                    if (exportFieldCount > 0) {
                        if ($exportingDialog == null) {
                            $exportingDialog = $('#Export_Exporting').dialog({
                                width: 400,
                                height: 164,
                                resizable: false,
                                modal: true,
                                autoOpen: false
                            });
                        }
                        $exportingDialog.dialog('open');

                        $form[0].submit();
                        return;
                    }

                    alert('Select at least one field to export.');
                };

                $('#Devices_Export_Button').on('click', function () {
                    $form.submit();
                });
                $('#Devices_Export_Save_Button').on('click', function () {
                    $form.attr('action', $form[0].dataset.saveaction);
                    $form.submit();
                });
            });
        </script>
    }
</div>
@if (Model.ExportId.HasValue)
{
    <div id="Export_Download_Dialog" class="dialog" title="Export Devices">
        @if (Model.ExportResult.RecordCount == 0)
        {
            <h4>No records matched the filter criteria</h4>
        }
        else
        {
            <h4>@Model.ExportResult.RecordCount record@(Model.ExportResult.RecordCount != 1 ? "s" : null) were successfully exported.</h4>
            <a href="@Url.Action(MVC.API.Device.ExportRetrieve(Model.ExportId.Value))" class="button"><i class="fa fa-download fa-lg"></i>Download Device Export</a>
        }
    </div>
    <script>
        $(function () {
            $('#Export_Download_Dialog')
                .dialog({
                    width: 400,
                    height: 164,
                    resizable: false,
                    modal: true,
                    autoOpen: true
                });
        });
    </script>
}
<div id="Export_Exporting" class="dialog" title="Exporting Devices...">
    <h4><i class="fa fa-lg fa-cog fa-spin" title="Please Wait"></i>Exporting devices...</h4>
</div>
<div class="actionBar">
    @if (Authorization.Has(Claims.Config.ManageSavedExports))
    {
        <button type="button" id="Devices_Export_Save_Button" class="button">Save Export</button>
    }
    else
    {
        <button type="button" class="button" disabled title="Requires Manage Saved Exports Permission">Save Export</button>
    }

    <button type="button" id="Devices_Export_Button" class="button">Export Now</button>
</div>