Disco/Disco.Web/Views/Job/JobParts/Flags.cshtml

@model Disco.Web.Models.Job.ShowModel
@{
    Authorization.Require(Claims.Job.ShowFlags);

    var validFlags = Model.Job.ValidFlagsGrouped();

    if (validFlags.Count == 0)
    {
        return;
    }

    var canEdit = Authorization.Has(Claims.Job.Properties.Flags);
}
<div id="jobDetailTab-Flags" class="jobPart">
    <table id="jobFlags">
        @foreach (var flagGroup in validFlags)
        {
            <tr>
                <th>
                    <span class="flagGroupName">@flagGroup.Key</span><br />
                    @AjaxHelpers.AjaxLoader()
                </th>
                <td>
                    @foreach (var flagItem in flagGroup.Value)
                    {
                        <div>
                            <input type="checkbox" value="@flagItem.Item1" id="jobFlag_@(flagItem.Item1)" @(flagItem.Item3 ? new HtmlString("checked=\"checked\"") : new HtmlString(string.Empty)) @(canEdit ? new HtmlString(string.Empty) : new HtmlString("disabled=\"disabled\"")) /><label id="jobFlagLabel_@(flagItem.Item1)" for="jobFlag_@(flagItem.Item1)">@flagItem.Item2</label>
                        </div>
                    }
                </td>
            </tr>
        }
    </table>
    @if (canEdit)
    {
        <div id="dialogFlagsAction" class="dialog" title="Add Flag">
            @using (Html.BeginForm(MVC.API.Job.UpdateFlag(Model.Job.Id, null, null, true)))
            {
                @Html.AntiForgeryToken()
                <input id="dialogFlagsActionFlag" type="hidden" name="Flag" value="0" />
                <h3>Reason:</h3>
                <p>
                    <textarea name="Reason" class="block"></textarea>
                </p>
            }
        </div>
        <script type="text/javascript">
            $('#jobDetailTabItems').append('<li><a href="#jobDetailTab-Flags">Flags [@(validFlags.SelectMany(g => g.Value).Count(f => f.Item3))]</a></li>');
            $(function () {
                const $flagCheckboxes = $('#jobFlags').find('input[type="checkbox"]');
                let $dialogFlagsAction = null;

                var updateFlags = function () {
                    const $flagCheckbox = $(this);
                    const flagValue = $flagCheckbox.val();

                    if ($flagCheckbox.is(':checked')) {
                        // Add
                        $('#dialogFlagsActionFlag').val(flagValue);
                        const title = 'Add Flag: ' + $flagCheckbox.closest('tr').find('th .flagGroupName').text() + ': ' + $('#jobFlagLabel_' + flagValue).text();

                        if (!$dialogFlagsAction) {
                            $dialogFlagsAction = $('#dialogFlagsAction').dialog({
                                resizable: false,
                                height: 240,
                                modal: true,
                                autoOpen: false,
                                buttons: {
                                    "Add": function () {
                                        var $this = $(this);
                                        $this.dialog("disable");
                                        $this.dialog("option", "buttons", null);
                                        $this.find('form').first().submit();
                                    },
                                    Cancel: function () {
                                        $(this).dialog("close");
                                    }
                                },
                                close: function () {
                                    $flagCheckbox.prop('checked', false);
                                }
                            });
                        }

                        $dialogFlagsAction.dialog('option', 'title', title);
                        $dialogFlagsAction.dialog('open');
                    } else {
                        // Remove
                        var $ajaxLoading = $flagCheckbox.closest('tr').find('span.ajaxLoading');
                        $ajaxLoading.show();

                        const body = new FormData();
                        body.append('__RequestVerificationToken', document.body.dataset.antiforgery);
                        body.append('Flag', '-' + flagValue);
                        fetch('@(Url.Action(MVC.API.Job.UpdateFlag(Model.Job.Id, null, null, false)))', {
                            method: 'post',
                            body: body
                        }).then(r => {
                            if (r.ok) {
                                $ajaxLoading.hide().next('.ajaxOk').show().delay('fast').fadeOut('slow');
                            } else {
                                alert('Unable to change Flag:\n' + r.statusText);
                                $ajaxLoading.hide();
                            }
                        }).catch(e => {
                            alert('Unable to change Flag:\n' + e);
                            $ajaxLoading.hide();
                        });
                    }
                }

                $flagCheckboxes.on('click', updateFlags);
            });
        </script>
    }
    else
    {
        <script>
            $('#jobDetailTabItems').append('<li><a href="#jobDetailTab-Flags">Flags [@(validFlags.SelectMany(g => g.Value).Count(f => f.Item3))]</a></li>');
        </script>
    }
</div>