Disco/Disco.Web/Views/Device/DeviceParts/_Flags.cshtml

@model Disco.Web.Models.Device.ShowModel
@using Disco.Services.Devices.DeviceFlags;
@{
    var flagAssignments = Model.Device.DeviceFlagAssignments.Select(a => Tuple.Create(a, DeviceFlagService.GetDeviceFlag(a.DeviceFlagId))).Where(a => a.Item2.permission.CanShow()).ToList();
    var activeAssignmentCount = flagAssignments.Count(a => !a.Item1.RemovedDate.HasValue);
}
<div id="DeviceDetailTab-Flags" class="DevicePart">
    @if (flagAssignments.Count > 0)
    {
        <table id="deviceFlags">
            <tr>
                <th class="name">Name</th>
                <th class="added">Added</th>
                <th class="sla">Detail</th>
                <th class="removed">Removed</th>
            </tr>
            @foreach (var fa in flagAssignments.OrderByDescending(a => a.Item1.AddedDate))
            {
                <tr data-deviceflagassignmentid="@fa.Item1.Id" data-flagassignmentaddeddate="@(fa.Item1.AddedDate.ToString("s"))" class="@(!fa.Item1.RemovedDate.HasValue ? "added" : "removed")" data-canremove="@fa.Item1.CanRemove()" data-removeon="@(fa.Item1.RemoveDate.HasValue ? fa.Item1.RemoveDate.Value.ToString("yyyy-MM-dd") : null)">
                    <td class="name">
                        <i class="fa fa-@(fa.Item2.flag.Icon) fa-fw fa-lg d-@(fa.Item2.flag.IconColour)"></i>
                        @if (Authorization.Has(Claims.Config.DeviceFlag.Show))
                        {
                            @Html.ActionLink(fa.Item2.flag.Name, MVC.Config.DeviceFlag.Index(fa.Item2.flag.Id))
                        }
                        else
                        {
                            @fa.Item2.flag.Name
                        }
                    </td>
                    <td class="added">
                        @CommonHelpers.FriendlyDateAndUser(fa.Item1.AddedDate, fa.Item1.AddedUser)
                        @if (fa.Item1.OnAssignmentExpressionResult != null)
                        {
                            <div class="expressionResult">@fa.Item1.OnAssignmentExpressionResult</div>
                        }
                    </td>
                    <td class="comments">
                        @if (fa.Item2.permission.CanEdit())
                        {
                            <div class="editable"><i class="fa fa-fw fa-edit" title="Edit Comments"></i></div>
                        }
                        @if (fa.Item1.Comments == null)
                        {
                            <div class="comments smallMessage">[no comments]</div>
                        }
                        else
                        {
                            <div class="comments">@fa.Item1.Comments.ToHtmlComment()</div>
                            <div class="commentsRaw">@fa.Item1.Comments</div>
                        }
                        @if (!fa.Item1.RemovedDate.HasValue && fa.Item1.RemoveDate.HasValue)
                        {
                            <div class="removeDate" data-date="@fa.Item1.RemoveDate.Value.ToString("yyyy-MM-dd")">Removing @CommonHelpers.FriendlyDate(fa.Item1.RemoveDate.Value)</div>
                        }
                    </td>
                    <td class="removed@(!fa.Item1.RemovedDate.HasValue ? " na" : null)">
                        @if (fa.Item1.RemovedDate.HasValue)
                        {
                            @CommonHelpers.FriendlyDateAndUser(fa.Item1.RemovedDate.Value, fa.Item1.RemovedUser)
                            if (fa.Item1.RemoveDate.HasValue)
                            {
                                <em>(scheduled)</em>
                            }
                            if (fa.Item1.OnUnassignmentExpressionResult != null)
                            {
                                <div class="expressionResult">@fa.Item1.OnUnassignmentExpressionResult</div>
                            }
                        }
                        else if (fa.Item1.CanRemove())
                        {
                            <button type="button" class="button small remove">Remove</button>
                        }
                    </td>
                </tr>
            }
        </table>
        <div id="Device_Show_Flags_Actions_Remove_Dialog" class="dialog" title="Remove this flag from the device?">
            @using (Html.BeginForm(MVC.API.DeviceFlagAssignment.RemoveDevice()))
            {
                @Html.AntiForgeryToken()
                <input id="Device_Show_Flags_Actions_Remove_Dialog_Id" type="hidden" name="id" value="" />
                <p>
                    <i class="fa fa-exclamation-triangle fa-lg"></i>&nbsp;Are you sure?
                </p>
            }
        </div>
        <div id="Device_Show_Flags_Actions_EditComments_Dialog" class="dialog" title="Edit Details">
            @using (Html.BeginForm(MVC.API.DeviceFlagAssignment.Edit()))
            {
                @Html.AntiForgeryToken()
                <input id="Device_Show_Flags_Actions_EditComments_Dialog_Id" type="hidden" name="id" value="" />
                <input type="hidden" name="redirect" value="true" />
                <h4>Comments:</h4>
                <p>
                    <textarea id="Device_Show_Flags_Actions_EditComments_Dialog_Comments" name="Comments" class="block"></textarea>
                </p>
                <div>
                    <h4>Remove On</h4>
                    <input name="RemoveDate" id="Device_Show_Flags_Actions_EditComments_Dialog_RemoveDate" type="date" min="@(DateTime.Today.AddDays(1).ToString("yyyy-MM-dd"))" />
                    <span>12:00 AM</span>
                </div>
            }
        </div>
        <script type="text/javascript">
            $(function () {
                const deviceFlags = $('#deviceFlags');

                let dialog = null;
                let dialogEditComments = null;

                deviceFlags.on('click', 'button.remove', function (e) {
                    const $this = $(this);
                    const DeviceFlagAssignmentId = $this.closest('tr').attr('data-deviceflagassignmentid');

                    if (!dialog) {
                        dialog = $('#Device_Show_Flags_Actions_Remove_Dialog');
                        dialog.dialog({
                            resizable: false,
                            modal: true,
                            autoOpen: false,
                            buttons: {
                                "Remove Flag": function () {
                                    const $this = $(this);
                                    $this.dialog("disable");
                                    $this.dialog("option", "buttons", null);
                                    $this.find('form').submit();
                                },
                                Cancel: function () {
                                    $(this).dialog("close");
                                }
                            }
                        });
                    }

                    $('#Device_Show_Flags_Actions_Remove_Dialog_Id').val(DeviceFlagAssignmentId);
                    dialog.dialog('open');

                    e.preventDefault();
                    return false;
                });

                deviceFlags.on('click', 'td.comments i.fa-edit', function (e) {
                    const $this = $(this);
                    const $row = $this.closest('tr');
                    const DeviceFlagAssignmentId = $row.attr('data-deviceflagassignmentid');
                    const canRemove = $row.attr('data-canremove') === 'True';
                    const removeOn = $row.attr('data-removeon');

                    if (!dialogEditComments) {
                        dialogEditComments = $('#Device_Show_Flags_Actions_EditComments_Dialog');
                        dialogEditComments.dialog({
                            resizable: false,
                            modal: true,
                            width: 320,
                            autoOpen: false,
                            buttons: {
                                "Save Changes": function () {
                                    const $this = $(this);
                                    $this.dialog("disable");
                                    $this.dialog("option", "buttons", null);
                                    $this.find('form').submit();
                                },
                                Cancel: function () {
                                    $(this).dialog("close");
                                }
                            }
                        });
                    }

                    const $comments = $this.closest('td').find('.commentsRaw');
                    if ($comments.hasClass('smallMessage')) {
                        $('#Device_Show_Flags_Actions_EditComments_Dialog_Comments').val('');
                    } else {
                        $('#Device_Show_Flags_Actions_EditComments_Dialog_Comments').val($comments.text());
                    }

                    const removeOnInput = $('#Device_Show_Flags_Actions_EditComments_Dialog_RemoveDate');
                    if (canRemove) {
                        removeOnInput.prop('disabled', false);
                        if (removeOn) {
                            removeOnInput.val(removeOn);
                        } else {
                            removeOnInput.val('');
                        }
                        removeOnInput.closest('div').css('display', 'block');
                    } else {
                        removeOnInput.prop('disabled', true);
                        removeOnInput.val('');
                        removeOnInput.closest('div').css('display', 'none');
                    }

                    $('#Device_Show_Flags_Actions_EditComments_Dialog_Id').val(DeviceFlagAssignmentId);
                    dialogEditComments.dialog('open');
                    e.preventDefault();
                    return false;
                });
            });
        </script>
    }
    else
    {
        <div class="none">This device has no associated flags</div>
    }
    <script>
        $('#DeviceDetailTabItems').append('<li><a href="#DeviceDetailTab-Flags">Flags [@activeAssignmentCount]</a></li>');
    </script>
</div>