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

@model Disco.Web.Areas.Config.Models.Organisation.IndexModel
@{
    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>
                @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>
            </td>
        </tr>
        <tr>
            <th style="width: 160px">Logo:
                <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>
                @Html.EditorFor(m => m.MultiSiteMode) @Html.LabelFor(m => m.MultiSiteMode)
                @AjaxHelpers.AjaxLoader()
                <div id="messageMultiSiteMode" style="display: none; padding: 0.7em 0.7em; margin-top: 20px;" class="ui-state-highlight ui-corner-all">
                    <span style="margin-right: 0.3em; float: left;" class="ui-icon ui-icon-info"></span>
                    Multi-Site mode is recommended where multiple addresses are configured.
                </div>
                <script type="text/javascript">
                    $(function () {
                        var field = $('#MultiSiteMode');
                        document.DiscoFunctions.PropertyChangeHelper(
                        field,
                        null,
                        '@(Url.Action(MVC.API.System.UpdateMultiSiteMode()))',
                        'MultiSiteMode'
                        );

                        var $orgAddresses = $('#organisationAddresses');
                        if ($orgAddresses.length > 0 && $orgAddresses.find('tr').length > 2)
                            $('#messageMultiSiteMode').show();
                    });
                </script>
            </td>
        </tr>
        <tr>
            <th style="width: 160px">Addresses:
                <br />
                <br />
                <a href="#" id="createAddress" class="button">Create</a>
            </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 class="name">@Html.DisplayFor(modelItem => item.Name)</span> (<span class="shortName">@Html.DisplayFor(modelItem => item.ShortName)</span>)
                                </td>
                                <td>
                                    <span class="address">@Html.DisplayFor(modelItem => item.Address)</span><br />
                                    <span class="suburb">@Html.DisplayFor(modelItem => item.Suburb)</span> <span class="postcode">@Html.DisplayFor(modelItem => item.Postcode)</span><br />
                                    <span class="state">@Html.DisplayFor(modelItem => item.State)</span> <span class="country">@Html.DisplayFor(modelItem => item.Country)</span><br />
                                    <span class="smallMessage">Phone:</span> <span class="phoneNumber">@Html.DisplayFor(modelItem => item.PhoneNumber)</span><br />
                                    <span class="smallMessage">Fax:</span> <span class="faxNumber">@Html.DisplayFor(modelItem => item.FaxNumber)</span>
                                </td>
                                <td>
                                    <span class="edit" title="Edit Address"></span><span class="delete" title="Delete Address"></span>
                                </td>
                            </tr>
                        }
                    </table>
                }
                else
                { 
                    <span class="smallMessage">No Addresses Stored</span>
                }
            </td>
        </tr>
    </table>
</div>
<div id="dialogUpdateOrganisationLogo" title="Update Organisation Logo">
    @using (Html.BeginForm(MVC.API.System.OrganisationLogo(true, null, null), FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <h3>Update Action</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-left: 10px;">
                <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,
            height: 200,
            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>
<div id="dialogConfirmRemove" title="Delete this Component?">
    <p>
        <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
        This item will be permanently deleted and cannot be recovered. Are you sure?
    </p>
</div>
<div id="dialogEdit" title="Edit/Create Address">
    <table>
        <tr>
            <td>Short&nbsp;Name
            </td>
            <td>
                <input id="editShortName" type="text" />
            </td>
        </tr>
        <tr>
            <td>Name
            </td>
            <td>
                <input id="editName" type="text" />
            </td>
        </tr>
        <tr>
            <td>Address
            </td>
            <td>
                <input id="editAddress" type="text" />
            </td>
        </tr>
        <tr>
            <td>Suburb
            </td>
            <td>
                <input id="editSuburb" type="text" />
            </td>
        </tr>
        <tr>
            <td>Postcode
            </td>
            <td>
                <input id="editPostcode" type="text" />
            </td>
        </tr>
        <tr>
            <td>State
            </td>
            <td>
                <input id="editState" type="text" />
            </td>
        </tr>
        <tr>
            <td>Country
            </td>
            <td>
                <input id="editCountry" type="text" />
            </td>
        </tr>
        <tr>
            <td>Phone Number
            </td>
            <td>
                <input id="editPhoneNumber" type="text" />
            </td>
        </tr>
        <tr>
            <td>Fax Number
            </td>
            <td>
                <input id="editFaxNumber" type="text" />
            </td>
        </tr>
    </table>
</div>
<script type="text/javascript">
    $(function () {
        $("#dialogConfirmRemove").dialog({
            resizable: false,
            modal: true,
            autoOpen: false,
            buttons: {
                "Delete": function () {
                    return null;
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
        $('#organisationAddresses').find('span.delete').click(function () {
            var componentRow = $(this).closest('tr');
            var id = componentRow.attr('data-addressid');
            if (id) {
                var dialog = $("#dialogConfirmRemove");
                var buttons = dialog.dialog("option", "buttons");
                buttons['Delete'] = function () { $(this).dialog("disable"); window.location.href = '@(Url.Action(MVC.API.System.DeleteOrganisationAddress()))' + '?redirect=true&id=' + id; };
                var buttons = dialog.dialog("option", "buttons", buttons);
                dialog.dialog('open');
            }
        });

        var editAddress = function (element) {
            var id = '', shortName = '', name = '', address = '', suburb = '', postcode = '', state = '', country = '', phoneNumber = '', faxNumber = '';
            var dialog = $('#dialogEdit');
            if (element) {
                id = element.attr('data-addressid');
                shortName = element.find('.shortName').text();
                name = element.find('.name').text();
                address = element.find('.address').text();
                suburb = element.find('.suburb').text();
                postcode = element.find('.postcode').text();
                state = element.find('.state').text();
                country = element.find('.country').text();
                phoneNumber = element.find('.phoneNumber').text();
                faxNumber = element.find('.faxNumber').text();
                dialog.attr('data-addressid', id);
                dialog.dialog('option', 'title', 'Edit Address: ' + name);
            } else {
                dialog.attr('data-addressid', null);
                dialog.dialog('option', 'title', 'Create Address');
            }

            $('#editShortName').val(shortName);
            $('#editName').val(name);
            $('#editAddress').val(address);
            $('#editSuburb').val(suburb);
            $('#editPostcode').val(postcode);
            $('#editState').val(state);
            $('#editCountry').val(country);
            $('#editPhoneNumber').val(phoneNumber);
            $('#editFaxNumber').val(faxNumber);
            dialog.dialog('open');
        }

        $('#organisationAddresses').find('span.edit').click(function () {
            var componentRow = $(this).closest('tr');
            editAddress(componentRow);
        });

        $('#createAddress').click(function () {
            editAddress();
            return false;
        });

        var submitAddress = function () {
            var dialog = $('#dialogEdit');
            var data = {
                Id: dialog.attr('data-addressid'),
                ShortName: $('#editShortName').val(),
                Name: $('#editName').val(),
                Address: $('#editAddress').val(),
                Suburb: $('#editSuburb').val(),
                Postcode: $('#editPostcode').val(),
                State: $('#editState').val(),
                Country: $('#editCountry').val(),
                PhoneNumber: $('#editPhoneNumber').val(),
                FaxNumber: $('#editFaxNumber').val()
            };

            $.ajax({
                url: '@(Url.Action(MVC.API.System.UpdateOrganisationAddress()))',
                dataType: 'json',
                data: data,
                type: 'post',
                success: function (d) {
                    if (d == 'OK') {
                        window.location.href = '@(Url.Action(MVC.Config.Organisation.Index()))';
                    } else {
                        alert('Unable to update address:\n' + d);
                        dialog.dialog('enable');
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('Unable to update address:\n' + textStatus);
                    dialog.dialog('enable');
                }
            });

        };
        $("#dialogEdit").dialog({
            resizable: false,
            modal: true,
            autoOpen: false,
            width: 350,
            buttons: {
                "Save": function () {
                    submitAddress();
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });

    });
</script>