Disco/Disco.Web/Areas/Config/Views/Organisation/Index.cshtml

@model Disco.Web.Areas.Config.Models.Organisation.IndexModel
@{
    Authorization.Require(Claims.Config.Organisation.Show);

    var canConfigAddresses = Authorization.Has(Claims.Config.Organisation.ConfigureAddresses);

    ViewBag.Title = Html.ToBreadcrumb("Configuration", MVC.Config.Config.Index(), "Organisation Details");
    Html.BundleDeferred("~/ClientScripts/Modules/Disco-PropertyChangeHelpers");
    Html.BundleDeferred("~/ClientScripts/Modules/Disco-AjaxHelperIcons");
}
<div class="form" style="width: 700px">
    <h2>Details</h2>
    <table>
        <tr>
            <th style="width: 160px">
                Name:
            </th>
            <td>
                @if (Authorization.Has(Claims.Config.Organisation.ConfigureName))
                {
                    @Html.EditorFor(m => m.OrganisationName)
                    @AjaxHelpers.AjaxLoader()
                    <script type="text/javascript">
                    $(function () {
                        var field = $('#OrganisationName');
                        document.DiscoFunctions.PropertyChangeHelper(
                        field,
                        'Unknown',
                        '@(Url.Action(MVC.API.System.UpdateOrganisationName()))',
                        'OrganisationName'
                        );
                    });
                    </script>
                }
                else
                {
                    <h3>@Model.OrganisationName</h3>
                }
            </td>
        </tr>
        <tr>
            <th style="width: 160px">
                Logo:
                @if (Authorization.Has(Claims.Config.Organisation.ConfigureLogo))
                {
                    <br />
                    <br />
                    <a id="buttonUpdateOrganisationLogo" href="#" class="button">Update</a>
                }
            </th>
            <td>
                <div style="text-align: center;">
                    <img style="height: 256px; width: 256px;" alt="Organisation Logo" src="@(Url.OrganisationLogoUrl())" />
                </div>
            </td>
        </tr>
        <tr>
            <th style="width: 160px">
                Multi-Site Mode:
            </th>
            <td>
                @if (Authorization.Has(Claims.Config.Organisation.ConfigureMultiSiteMode))
                {
                    @Html.EditorFor(m => m.MultiSiteMode) @Html.LabelFor(m => m.MultiSiteMode)
                    @AjaxHelpers.AjaxLoader()
                    <script type="text/javascript">
                    $(function () {
                        var field = $('#MultiSiteMode');
                        document.DiscoFunctions.PropertyChangeHelper(
                        field,
                        null,
                        '@(Url.Action(MVC.API.System.UpdateMultiSiteMode()))',
                        'MultiSiteMode'
                        );
                    });
                    </script>
                }
                else
                {
                    <input name="MultiSiteMode" class="check-box" id="MultiSiteMode" type="checkbox" @(Model.MultiSiteMode ? new HtmlString("checked=\"checked\" ") : new HtmlString(string.Empty)) disabled="disabled"> @Html.LabelFor(m => m.MultiSiteMode)
                }
                @if (Model.OrganisationAddresses.Count > 1)
                {
                    <div id="messageMultiSiteMode" class="info-box">
                        <p class="fa-p">
                            <i class="fa fa-info-circle"></i>Multi-Site mode is recommended where multiple addresses are configured.
                        </p>
                    </div>
                }
            </td>
        </tr>
        <tr>
            <th style="width: 160px">
                Addresses:
                @if (canConfigAddresses)
                {
                    <br />
                    <br />
                    <button id="createAddress" class="button">Create</button>
                }
            </th>
            <td>
                @if (Model.OrganisationAddresses.Count > 0)
                {
                    <table id="organisationAddresses">
                        <tr>
                            <th>
                                Name
                            </th>
                            <th>
                                Address
                            </th>
                            <th></th>
                        </tr>
                        @foreach (var item in Model.OrganisationAddresses)
                        {
                            <tr data-addressid="@item.Id">
                                <td>
                                    <span>@Html.DisplayFor(modelItem => item.Name)</span> (<span>@Html.DisplayFor(modelItem => item.ShortName)</span>)
                                </td>
                                <td>
                                    <span>@Html.DisplayFor(modelItem => item.Address)</span>
                                    <br /><span>@Html.DisplayFor(modelItem => item.Suburb)</span> <span>@Html.DisplayFor(modelItem => item.Postcode)</span>
                                    <br /><span>@Html.DisplayFor(modelItem => item.State)</span> <span>@Html.DisplayFor(modelItem => item.Country)</span>
                                    @if (!string.IsNullOrWhiteSpace(item.PhoneNumber))
                                    {
                                        <br /><span class="smallMessage">Phone:</span> <span>@Html.DisplayFor(modelItem => item.PhoneNumber)</span>
                                    }
                                    @if (!string.IsNullOrWhiteSpace(item.FaxNumber))
                                    {
                                        <br /><span class="smallMessage">Fax:</span> <span>@Html.DisplayFor(modelItem => item.FaxNumber)</span>
                                    }
                                    @if (!string.IsNullOrWhiteSpace(item.EmailAddress))
                                    {
                                        <br /><span>@Html.DisplayFor(modelItem => item.EmailAddress)</span>
                                    }
                                </td>
                                <td>
                                    @if (canConfigAddresses)
                                    {
                                        <i class="fa fa-edit information edit" title="Edit Address"></i> <i class="fa fa-times-circle warning delete" title="Delete Address"></i>
                                        <script class="addressJson" type="application/json">@Html.Raw(Json.Encode(item))</script>
                                    }
                                </td>
                            </tr>
                        }
                    </table>
                }
                else
                {
                    <span class="smallMessage">No Addresses Stored</span>
                }
            </td>
        </tr>
    </table>
</div>
@if (Authorization.Has(Claims.Config.Organisation.ConfigureLogo))
{
    <div id="dialogUpdateOrganisationLogo" title="Update Organisation Logo" class="dialog">
        @using (Html.BeginForm(MVC.API.System.OrganisationLogo(true, null, null), FormMethod.Post, new { enctype = "multipart/form-data" }))
        {
            @Html.AntiForgeryToken()
            <h3>Update Organisation Logo</h3>
            <div style="margin-top: 10px; padding-bottom: 5px;">
                <input id="updateOrganisationLogoResetLogo" type="radio" name="ResetLogo" value="true"
                       checked="checked" /><label for="updateOrganisationLogoResetLogo">Remove Logo</label>
            </div>
            <div style="margin-top: 5px; border-top: 1px dashed #aaa; padding-top: 5px;">
                <input id="updateOrganisationLogoUploadLogo" type="radio" name="ResetLogo" value="false" /><label for="updateOrganisationLogoUploadLogo">Upload Logo</label>
                <div id="updateOrganisationLogoUploadLogoContainer" style="display: none; padding: 4px 0 0 14px;">
                    <input id="updateOrganisationLogoUploadLogoImage" type="file" name="Image" />
                    <span id="updateOrganisationLogoUploadLogoImageRequired" class="field-validation-valid field-validation-error">* Required</span>
                </div>
            </div>
        }
    </div>
    <script type="text/javascript">
        $(function () {
            var button = $('#buttonUpdateOrganisationLogo');
            var buttonDialog = $('#dialogUpdateOrganisationLogo');
            button.click(function () {
                buttonDialog.dialog('open');
                return false;
            });
            buttonDialog.find('input[type="radio"]').click(function () {
                if ($('#updateOrganisationLogoUploadLogo').is(':checked')) {
                    $('#updateOrganisationLogoUploadLogoImage').removeAttr('disabled');
                    $('#updateOrganisationLogoUploadLogoContainer').slideDown();
                }
                else {
                    $('#updateOrganisationLogoUploadLogoContainer').slideUp();
                    $('#updateOrganisationLogoUploadLogoImage').attr('disabled', 'disabled');
                }
            });
            buttonDialog.dialog({
                resizable: false,
                modal: true,
                autoOpen: false,
                buttons: {
                    "Save": function () {
                        var $this = $(this);

                        var $image = $('#updateOrganisationLogoUploadLogoImage');
                        if ($('#updateOrganisationLogoUploadLogo').is(':checked') && $image.val() == '') {
                            $image.addClass('input-validation-error');
                            $('#updateOrganisationLogoUploadLogoImageRequired').removeClass('field-validation-valid');
                        } else {
                            $image.removeClass('input-validation-error');
                            $('#updateOrganisationLogoUploadLogoImageRequired').addClass('field-validation-valid');
                            $this.dialog("disable");
                            $this.dialog("option", "buttons", null);
                            $this.find('form').submit();
                        }
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
            });
        });
    </script>
}
@if (canConfigAddresses)
{
    <div id="dialogConfirmRemove" title="Delete this Address?" class="dialog">
        <p>
            <i class="fa fa-exclamation-triangle fa-lg warning"></i>
            This item will be permanently deleted.
        </p>
        <p>
            <strong>Are you sure?</strong>
        </p>
        @using (Html.BeginForm(MVC.API.System.DeleteOrganisationAddress()))
        {
            @Html.AntiForgeryToken()
            <input name="Id" value="" type="hidden" />
            <input name="redirect" value="true" type="hidden" />
        }
    </div>
    <div id="dialogEdit" title="Edit/Create Address" class="dialog">
        @using (Html.BeginForm(MVC.API.System.UpdateOrganisationAddress()))
        {
            @Html.AntiForgeryToken()
            <input name="redirect" value="true" type="hidden" />
            <input name="Id" value="" type="hidden" data-bind />
            <table>
                <tr>
                    <td>
                        <label for="editShortName">Short&nbsp;Name&nbsp;*</label>
                    </td>
                    <td>
                        <input id="editShortName" name="ShortName" type="text" required data-bind />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="editName">Name&nbsp;*</label>
                    </td>
                    <td>
                        <input id="editName" name="Name" type="text" required data-bind />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="editAddress">Address&nbsp;*</label>
                    </td>
                    <td>
                        <input id="editAddress" name="Address" type="text" required data-bind />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="editSuburb">Suburb&nbsp;*</label>
                    </td>
                    <td>
                        <input id="editSuburb" name="Suburb" type="text" required data-bind />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="editPostcode">Postcode&nbsp;*</label>
                    </td>
                    <td>
                        <input id="editPostcode" name="Postcode" type="text" required data-bind />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="editState">State&nbsp;*</label>
                    </td>
                    <td>
                        <input id="editState" name="State" type="text" required data-bind />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="editCountry">Country&nbsp;*</label>
                    </td>
                    <td>
                        <input id="editCountry" name="Country" type="text" required data-bind />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="editPhoneNumber">Phone Number</label>
                    </td>
                    <td>
                        <input id="editPhoneNumber" name="PhoneNumber" type="text" data-bind />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="editFaxNumber">Fax Number</label>
                    </td>
                    <td>
                        <input id="editFaxNumber" name="FaxNumber" type="text" data-bind />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="editEmailAddress">Email Address</label>
                    </td>
                    <td>
                        <input id="editEmailAddress" name="EmailAddress" type="text" data-bind />
                    </td>
                </tr>
            </table>
        }
    </div>
    <script type="text/javascript">
        $(function () {
            let $addressEditDialog = null;
            let $addressRemoveDialog = null;

            $('#organisationAddresses').find('i.delete').click(function () {
                const id = $(this).closest('tr').attr('data-addressid');
                if (id) {
                    if ($addressRemoveDialog === null) {
                        $addressRemoveDialog = $("#dialogConfirmRemove").dialog({
                            resizable: false,
                            modal: true,
                            autoOpen: false,
                            buttons: {
                                "Delete": function () {
                                    const $this = $(this);
                                    $this.dialog("disable");
                                    $this.dialog("option", "buttons", null);
                                    $this.find('form').trigger('submit');
                                },
                                Cancel: function () {
                                    $(this).dialog("close");
                                }
                            }
                        });
                    }
                    const $dialog = $addressRemoveDialog;
                    $dialog.find('input[name="Id"]').val(id);
                    $dialog.dialog('open');
                }
            });

            function editAddress(e) {
                if ($addressEditDialog === null) {
                    $addressEditDialog = $("#dialogEdit").dialog({
                        resizable: false,
                        modal: true,
                        autoOpen: false,
                        width: 350,
                        buttons: {
                            "Save": function () {
                                const $form = $addressEditDialog.find('form');
                                if ($form[0].reportValidity()) {
                                    const $this = $(this);
                                    $this.dialog("disable");
                                    $this.dialog("option", "buttons", null);
                                    $form.trigger('submit');
                                }
                            },
                            Cancel: function () {
                                $(this).dialog("close");
                            }
                        }
                    });
                    $addressEditDialog.find('form').removeAttr('novalidate');
                }
                const $dialog = $addressEditDialog;

                if (e && e.currentTarget) {
                    const address = JSON.parse($(e.currentTarget).closest('tr').find('script.addressJson').html());

                    $dialog.dialog('option', 'title', 'Edit Address: ' + address.Name);

                    $dialog.find('input[data-bind]').each(function () {
                        const $this = $(this);
                        const name = $this.attr('name');
                        if (address[name]) {
                            $this.val(address[name]);
                        } else {
                            $this.val('');
                        }
                    });
                } else {
                    $dialog.dialog('option', 'title', 'Create Address');
                    $dialog.find('input[data-bind]').val('');
                }
                $dialog.dialog('open');
                $dialog.find('input[type="text"]').first().focus();
            }

            $('#organisationAddresses').on('click', 'i.edit', editAddress)
            $('#createAddress').on('click', function (e) {
                e.preventDefault();
                editAddress();
                return false;
            });
        });
    </script>
}