From 9a0451e1ad80bed64f4852a13e2f8f2fc2187b7b Mon Sep 17 00:00:00 2001
From: AndyButland <abutland73@gmail.com>
Date: Wed, 30 Jul 2014 09:43:37 +0200
Subject: [PATCH] Improvements to UI for selecting additional columns for
 container list view

---
 .../listview/listview.controller.js           |   2 +-
 .../controls/ContentTypeControlNew.ascx       | 175 ++++++++++++++++--
 .../ContentTypeControlNew.ascx.designer.cs    |   1 +
 .../ContentAndMediaTypeBaseController.cs      |  10 +-
 .../controls/ContentTypeControlNew.ascx.cs    |  70 +++++--
 5 files changed, 229 insertions(+), 29 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js
index 7cc4643aa4..aac3e436af 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js
@@ -41,7 +41,7 @@ function listViewController($rootScope, $scope, $routeParams, $injector, notific
         allowBulkDelete: true,
         additionalColumns: [
                 { alias: 'UpdateDate', header: 'Last edited', localizationKey: 'defaultdialogs_lastEdited' },
-                { alias: 'Owner', header: 'Last edited', localizationKey: 'content_updatedBy' }
+                { alias: 'Updator', header: 'Last edited', localizationKey: 'content_updatedBy' }
             ]
     };
 
diff --git a/src/Umbraco.Web.UI/umbraco/controls/ContentTypeControlNew.ascx b/src/Umbraco.Web.UI/umbraco/controls/ContentTypeControlNew.ascx
index 1c1e4cc625..4e3e26bd6c 100644
--- a/src/Umbraco.Web.UI/umbraco/controls/ContentTypeControlNew.ascx
+++ b/src/Umbraco.Web.UI/umbraco/controls/ContentTypeControlNew.ascx
@@ -76,51 +76,200 @@
         <cc2:PropertyPanel ID="pp_Root" runat="server" Text="Allow at root <br/><small>Only Content Types with this checked can be created at the root level of Content and Media trees</small>">
             <asp:CheckBox runat="server" ID="allowAtRoot" Text="Yes" /><br />            
         </cc2:PropertyPanel>
+
+        <!-- Styling for list view configuration -->
+        <style type="text/css">
+            #container-config-column-list { margin: 8px 0 16px 0; }
+            #container-config-column-list th, #container-config-column-list td { text-align: left; padding: 2px 0px 4px 10px; }
+            #<%= txtContainerConfigAdditionalColumns.ClientID %> { display: none; }
+        </style>
         
+        <!-- Scripting for list view configuration -->
+        <script type="text/javascript">            
+            jQuery(document).ready(function () {               
+
+                var isContainerCheckBox = jQuery("#<%= cb_isContainer.ClientID %>");
+                var containerConfigPanel = jQuery("#container-config-panel");
+                var containerConfigAddColumnSelect = jQuery("#<%= ddlContainerConfigAdditionalColumnsChooser.ClientID %>");
+                var containerConfigColumnList = jQuery("#container-config-column-list");
+                var containerConfigHiddenField = jQuery("#<%= txtContainerConfigAdditionalColumns.ClientID %>");
+
+                function showHideContainerConfig(closingAnimation) {                                        
+                    if (isContainerCheckBox.is(":checked")) {
+                        containerConfigPanel.slideDown();
+                    }
+                    else
+                    {       
+                        if (closingAnimation == 'hide') {
+                            
+                            containerConfigPanel.hide();
+                        } else {
+                            containerConfigPanel.slideUp();
+                        }
+                    }
+                }
+
+                function loadColumnListFromHiddenField() {
+                    if (containerConfigHiddenField.val() != '') {
+                        var columns = getSelectedColumnAliases();
+                        for (var i = 0; i < columns.length; i++) {
+                            addColumnToList(columns[i]);
+                        }
+                        bindRemoveLinks();
+                    }
+                }
+
+                function getSelectedColumnAliases() {
+                    return containerConfigHiddenField.val().split(',');
+                }
+
+                function getColumnName(alias) {
+                    return jQuery('option[value="' + alias + '"]', containerConfigAddColumnSelect).text();
+                }
+
+                function addColumn() {
+                    var alias = containerConfigAddColumnSelect.val();  
+                    if (!isColumnAlreadyAdded(alias)) {
+                        addColumnToList(alias);
+                        addColumnToField(alias);
+                        bindRemoveLinks();
+                    }
+                }
+
+                function isColumnAlreadyAdded(alias) {
+                    var columns = getSelectedColumnAliases();
+                    for (var i = 0; i < columns.length; i++) {
+                        if (columns[i] == alias) {
+                            return true;
+                        }
+                    }
+                    return false;
+                }
+
+                function getColumnIndex(alias) {
+                    var columns = getSelectedColumnAliases();
+                    var index = 0;
+                    for (var i = 0; i < columns.length; i++) {
+                        if (columns[i] == alias) {
+                            return index;
+                        }
+                        index++;
+                    }
+                    return -1;
+                }
+
+                function addColumnToList(alias) {
+                    var html = '<tr>' +
+                        '<td><i class="icon-navigation handle"></i></td>' +
+                        '<td>' + getColumnName(alias) + '</td><td><button type="button" class="remove" data-alias="' + alias + '">Remove</button></td>' +
+                        '</tr>';
+                    jQuery('tbody', containerConfigColumnList).append(html);
+                }
+
+                function addColumnToField(alias) {
+                    if (containerConfigHiddenField.val() == '') {
+                        containerConfigHiddenField.val(alias)
+                    } else {
+                        var columns = getSelectedColumnAliases();
+                        columns.push(alias);
+                        containerConfigHiddenField.val(columns.join());
+                    }
+                }
+
+                function removeColumn(alias) {
+                    var index = getColumnIndex(alias);
+                    removeColumnFromList(index);
+                    removeColumnFromField(index);
+                }
+
+                function removeColumnFromList(index) {
+                    jQuery('tbody tr:eq(' + index + ')', containerConfigColumnList).fadeOut(300, function() { 
+                        jQuery(this).remove(); 
+                    })
+                }
+
+                function removeColumnFromField(index) {
+                    var columns = getSelectedColumnAliases();
+                    columns.splice(index, 1);
+                    containerConfigHiddenField.val(columns.join());
+                }
+
+                function bindRemoveLinks() {
+                    jQuery(".remove", containerConfigColumnList).off('click').on('click', function (e) {
+                        e.preventDefault();
+                        var alias = jQuery(this).attr('data-alias');
+                        removeColumn(alias);
+                    });
+                }
+                
+                isContainerCheckBox.on("change", function () {
+                    showHideContainerConfig();
+                });
+
+                containerConfigAddColumnSelect.on('change', function () {
+                    var ddl = jQuery(this);
+                    if (ddl.val() != '') {
+                        addColumn();
+                        ddl.prop('selectedIndex', 0);
+                    }
+                });
+
+                showHideContainerConfig('hide');
+                loadColumnListFromHiddenField();
+            });
+        </script>
         <cc2:PropertyPanel ID="pp_isContainer" runat="server" Text="Container<br/><small>A container type doesn't display children in the tree, but as a grid instead</small>">
             <asp:CheckBox runat="server" ID="cb_isContainer" Text="Yes" /><br />            
         </cc2:PropertyPanel>   
 
-        <div style="margin-left: 20px;">
-            <cc2:PropertyPanel ID="pp_containerConfigPageSize" runat="server" Text="Page size<br/><small>Number of entries per page when selected for display in list view.<br/>Default if not provided: 10</small>">
+        <div id="container-config-panel" style="margin-left: 20px;">
+            <cc2:PropertyPanel ID="pp_containerConfigPageSize" runat="server" Text="Page size<br/><small>Number of entries per page when selected for display in list view.</small>">
                 <asp:TextBox ID="txtContainerConfigPageSize" CssClass="guiInputText guiInputStandardSize" runat="server" type="number" min="1" max="100"></asp:TextBox>        
             </cc2:PropertyPanel> 
 
-            <cc2:PropertyPanel ID="pp_containerConfigAdditionalColumns" runat="server" Text="Additional columns<br/><small>A comma separated list of the names (native properties) or aliases (custom properties) for additional columns displayed after the node name.<br/>Default if not provided: UpdateDate,Owner</small>">
+            <cc2:PropertyPanel ID="pp_containerConfigAdditionalColumns" runat="server" Text="Additional columns<br/><small>Select the additional columns displayed after the node name.</small>">
+                <asp:DropDownList ID="ddlContainerConfigAdditionalColumnsChooser" CssClass="guiInputText guiInputStandardSize" runat="server"></asp:DropDownList>   
+                <table id="container-config-column-list">
+                    <thead>
+                        <tr>
+                            <th></th>
+                            <th>Selected columns</th>
+                            <th></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                    </tbody>
+                </table>
                 <asp:TextBox ID="txtContainerConfigAdditionalColumns" CssClass="guiInputText guiInputStandardSize" runat="server"></asp:TextBox>   
             </cc2:PropertyPanel> 
 
-            <cc2:PropertyPanel ID="pp_containerConfigOrderBy" runat="server" Text="Order by<br/><small>The name (native properties) or alias (custom properties) for the default order for the list.<br/>Default if not provided: UpdateDate</small>">
-                <asp:TextBox ID="txtContainerConfigOrderBy" CssClass="guiInputText guiInputStandardSize" runat="server"></asp:TextBox>   
+            <cc2:PropertyPanel ID="pp_containerConfigOrderBy" runat="server" Text="Order by<br/><small>The default order for the list.</small>">
+                <asp:DropDownList ID="ddlContainerConfigOrderBy" CssClass="guiInputText guiInputStandardSize" runat="server"></asp:DropDownList>   
             </cc2:PropertyPanel> 
                     
-            <cc2:PropertyPanel ID="pp_containerConfigOrderDirection" runat="server" Text="Order direction<br/><small>The direction of the default order for the list.<br/>default if not provided: Descending</small>">
+            <cc2:PropertyPanel ID="pp_containerConfigOrderDirection" runat="server" Text="Order direction<br/><small>The direction of the default order for the list.</small>">
                 <asp:DropDownList ID="ddlContainerConfigOrderDirection" CssClass="guiInputText guiInputStandardSize" runat="server">
-                    <asp:ListItem Value=""></asp:ListItem>
                     <asp:ListItem Value="asc">Ascending</asp:ListItem>
                     <asp:ListItem Value="desc">Descending</asp:ListItem>
                 </asp:DropDownList>        
             </cc2:PropertyPanel> 
 
-            <cc2:PropertyPanel ID="pp_allowBulkPublish" runat="server" Text="Allow bulk publish<br/><small>Indicates if bulk publishing is allowed when defined as a list view<br/>Default if not provided: Yes</small>">
+            <cc2:PropertyPanel ID="pp_allowBulkPublish" runat="server" Text="Allow bulk publish<br/><small>Indicates if bulk publishing is allowed when defined as a list view</small>">
                 <asp:DropDownList ID="ddlContainerConfigAllowBulkPublish" CssClass="guiInputText guiInputStandardSize" runat="server">
-                    <asp:ListItem Value=""></asp:ListItem>
                     <asp:ListItem Value="1">Yes</asp:ListItem>
                     <asp:ListItem Value="0">No</asp:ListItem>
                 </asp:DropDownList>       
             </cc2:PropertyPanel>    
             
-            <cc2:PropertyPanel ID="pp_allowBulkUnpublish" runat="server" Text="Allow bulk unpublish<br/><small>Indicates if bulk unpublishing is allowed when defined as a list view<br/>Default if not provided: Yes</small>">
+            <cc2:PropertyPanel ID="pp_allowBulkUnpublish" runat="server" Text="Allow bulk unpublish<br/><small>Indicates if bulk unpublishing is allowed when defined as a list view</small>">
                 <asp:DropDownList ID="ddlContainerConfigAllowBulkUnpublish" CssClass="guiInputText guiInputStandardSize" runat="server">
-                    <asp:ListItem Value=""></asp:ListItem>
                     <asp:ListItem Value="1">Yes</asp:ListItem>
                     <asp:ListItem Value="0">No</asp:ListItem>
                 </asp:DropDownList>           
             </cc2:PropertyPanel>
             
-            <cc2:PropertyPanel ID="pp_allowBulkDelete" runat="server" Text="Allow bulk publish<br/><small>Indicates if bulk deletion is allowed when defined as a list view<br/>Default if not provided: Yes</small>">
+            <cc2:PropertyPanel ID="pp_allowBulkDelete" runat="server" Text="Allow bulk publish<br/><small>Indicates if bulk deletion is allowed when defined as a list view</small>">
                 <asp:DropDownList ID="ddlContainerConfigAllowBulkDelete" CssClass="guiInputText guiInputStandardSize" runat="server">
-                    <asp:ListItem Value=""></asp:ListItem>
                     <asp:ListItem Value="1">Yes</asp:ListItem>
                     <asp:ListItem Value="0">No</asp:ListItem>
                 </asp:DropDownList>       
diff --git a/src/Umbraco.Web.UI/umbraco/controls/ContentTypeControlNew.ascx.designer.cs b/src/Umbraco.Web.UI/umbraco/controls/ContentTypeControlNew.ascx.designer.cs
index 582c67837d..deda04c7b6 100644
--- a/src/Umbraco.Web.UI/umbraco/controls/ContentTypeControlNew.ascx.designer.cs
+++ b/src/Umbraco.Web.UI/umbraco/controls/ContentTypeControlNew.ascx.designer.cs
@@ -11,5 +11,6 @@ namespace Umbraco.Web.UI.Umbraco.Controls {
     
     
     public partial class ContentTypeControlNew {
+        
     }
 }
diff --git a/src/Umbraco.Web/Editors/ContentAndMediaTypeBaseController.cs b/src/Umbraco.Web/Editors/ContentAndMediaTypeBaseController.cs
index c289b80888..8a57ce921d 100644
--- a/src/Umbraco.Web/Editors/ContentAndMediaTypeBaseController.cs
+++ b/src/Umbraco.Web/Editors/ContentAndMediaTypeBaseController.cs
@@ -87,15 +87,21 @@ namespace Umbraco.Web.Editors
                             column.Header = "Last edited";
                             column.LocalizationKey = "defaultdialogs_lastEdited";
                         }
-                        else if (alias == "Owner")
+                        else if (alias == "Updator")
                         {
                             // Special case to restore hard-coded column titles (2)
                             column.Header = "Updated by";
                             column.LocalizationKey = "content_updatedBy";
                         }
+                        else if (alias == "Owner")
+                        {
+                            // Special case to restore hard-coded column titles (3)
+                            column.Header = "Created by";
+                            column.LocalizationKey = "content_createBy";
+                        }
                         else
                         {
-                            // Otherwise just sentence case the alias
+                            // For others just sentence case the alias and camel case for the key
                             column.Header = alias.ToFirstUpper().SplitPascalCasing();
                             column.LocalizationKey = "content_" + alias.ToFirstLower();
                         }
diff --git a/src/Umbraco.Web/umbraco.presentation/umbraco/controls/ContentTypeControlNew.ascx.cs b/src/Umbraco.Web/umbraco.presentation/umbraco/controls/ContentTypeControlNew.ascx.cs
index 3156cf5cdb..60223b37ef 100644
--- a/src/Umbraco.Web/umbraco.presentation/umbraco/controls/ContentTypeControlNew.ascx.cs
+++ b/src/Umbraco.Web/umbraco.presentation/umbraco/controls/ContentTypeControlNew.ascx.cs
@@ -293,7 +293,14 @@ namespace umbraco.controls
                         //_contentType.ContentTypeItem.Thumbnail = ddlThumbnails.SelectedValue;
                     _contentType.ContentTypeItem.AllowedAsRoot = allowAtRoot.Checked;
                     _contentType.ContentTypeItem.IsContainer = cb_isContainer.Checked;
-                    _contentType.ContentTypeItem.ContainerConfig = GetProvidedContainerConfigAsJsonString();
+                    if (cb_isContainer.Checked)
+                    {
+                        _contentType.ContentTypeItem.ContainerConfig = GetProvidedContainerConfigAsJsonString();
+                    }
+                    else
+                    {
+                        _contentType.ContentTypeItem.ContainerConfig = string.Empty;
+                    }
                     
                     int i = 0;
                     var ids = SaveAllowedChildTypes();
@@ -367,9 +374,9 @@ namespace umbraco.controls
 
             // Set defaults for saving if not all fields are provided
             var pageSize = 10;
-            var additionalColumns = "UpdateDate,Owner";
-            var orderBy = "UpdateDate";
-            var orderDirection = "desc";
+            var additionalColumns = string.Empty;
+            var orderBy = "Name";
+            var orderDirection = "asc";
             var allowBulkPublish = true;
             var allowBulkUnpublish = true;
             var allowBulkDelete = true;
@@ -384,9 +391,9 @@ namespace umbraco.controls
                 configProvided = true;
             }
 
-            if (!string.IsNullOrEmpty(txtContainerConfigOrderBy.Text))
+            if (ddlContainerConfigOrderBy.SelectedIndex > 0)
             {
-                orderBy = txtContainerConfigOrderBy.Text;
+                orderBy = ddlContainerConfigOrderBy.SelectedItem.Value;
                 configProvided = true; 
             }
 
@@ -645,27 +652,63 @@ jQuery(document).ready(function() {{ refreshDropDowns(); }});
                 DualAllowedContentTypes.Value = chosenContentTypeIDs;
             }
 
+            // Set up options for columns and order by
+            ddlContainerConfigOrderBy.Items.Add(new ListItem(string.Empty, string.Empty));
+            ddlContainerConfigOrderBy.Items.Add(new ListItem("Node name", "Name"));
+            ddlContainerConfigOrderBy.Items.Add(new ListItem("Last edited on", "UpdateDate"));
+            ddlContainerConfigOrderBy.Items.Add(new ListItem("Last updated by", "Updator"));
+            ddlContainerConfigOrderBy.Items.Add(new ListItem("Created on", "CreateDate"));
+            ddlContainerConfigOrderBy.Items.Add(new ListItem("Created by", "Owner"));
+
+            ddlContainerConfigAdditionalColumnsChooser.Items.Add(new ListItem("Select a column...", string.Empty));
+            ddlContainerConfigAdditionalColumnsChooser.Items.Add(new ListItem("Node name", "Name"));
+            ddlContainerConfigAdditionalColumnsChooser.Items.Add(new ListItem("Last edited on", "UpdateDate"));
+            ddlContainerConfigAdditionalColumnsChooser.Items.Add(new ListItem("Last updated by", "Updator"));
+            ddlContainerConfigAdditionalColumnsChooser.Items.Add(new ListItem("Created on", "CreateDate"));
+            ddlContainerConfigAdditionalColumnsChooser.Items.Add(new ListItem("Created by", "Owner"));
+            ddlContainerConfigAdditionalColumnsChooser.Items.Add(new ListItem("---", string.Empty));
+
+            // - get properties from allowed document types (i.e. those that might appear in the list view)
+            var allPropertiesOfAllowedContentTypes = Services.ContentTypeService
+                .GetAllContentTypes(_contentType.AllowedChildContentTypeIDs)
+                .SelectMany(x => x.PropertyTypes)
+                .ToList();
+            foreach (var property in allPropertiesOfAllowedContentTypes)
+            {
+                ddlContainerConfigAdditionalColumnsChooser.Items.Add(new ListItem(property.Name, property.Alias));
+            }
+            
+            // Populate controls with values
             allowAtRoot.Checked = _contentType.AllowAtRoot;
             cb_isContainer.Checked = _contentType.IsContainerContentType;
 
+            ddlContainerConfigOrderBy.SelectedIndex = -1;
             ddlContainerConfigOrderDirection.SelectedIndex = -1;
             ddlContainerConfigAllowBulkPublish.SelectedIndex = -1;
             ddlContainerConfigAllowBulkUnpublish.SelectedIndex = -1;
             ddlContainerConfigAllowBulkDelete.SelectedIndex = -1;
-            if (!string.IsNullOrEmpty(_contentType.ContainerConfig))
+
+            if (_contentType.IsContainerContentType && !string.IsNullOrEmpty(_contentType.ContainerConfig))
             {
                 var containerConfig = GetContentTypeContainerConfigurationFromJsonString(_contentType.ContainerConfig);
                 txtContainerConfigPageSize.Text = containerConfig.PageSize.ToString();
                 txtContainerConfigAdditionalColumns.Text = containerConfig.AdditionalColumnAliases;
-                txtContainerConfigOrderBy.Text = containerConfig.OrderBy;
+                ddlContainerConfigOrderBy.Items.FindByValue(containerConfig.OrderBy).Selected = true;
                 ddlContainerConfigOrderDirection.Items.FindByValue(containerConfig.OrderDirection).Selected = true;
-                ddlContainerConfigAllowBulkPublish.SelectedIndex = containerConfig.AllowBulkPublish ? 1 : 2;
-                ddlContainerConfigAllowBulkUnpublish.SelectedIndex = containerConfig.AllowBulkUnpublish ? 1 : 2;
-                ddlContainerConfigAllowBulkDelete.SelectedIndex = containerConfig.AllowBulkDelete ? 1 : 2;
+                ddlContainerConfigAllowBulkPublish.SelectedIndex = containerConfig.AllowBulkPublish ? 0 : 1;
+                ddlContainerConfigAllowBulkUnpublish.SelectedIndex = containerConfig.AllowBulkUnpublish ? 0 : 1;
+                ddlContainerConfigAllowBulkDelete.SelectedIndex = containerConfig.AllowBulkDelete ? 0 : 1;
             }
             else
             {
-                txtContainerConfigPageSize.Text = string.Empty;
+                // Set defaults matching original hard-coded values unless config has been provided
+                txtContainerConfigPageSize.Text = "10";
+                txtContainerConfigAdditionalColumns.Text = "UpdateDate,Updator";
+                ddlContainerConfigOrderBy.Items.FindByValue("UpdateDate").Selected = true;
+                ddlContainerConfigOrderDirection.Items.FindByValue("desc").Selected = true;
+                ddlContainerConfigAllowBulkPublish.SelectedIndex = 0;
+                ddlContainerConfigAllowBulkUnpublish.SelectedIndex = 0;
+                ddlContainerConfigAllowBulkDelete.SelectedIndex = 0;
             }
         }
 
@@ -1445,10 +1488,11 @@ jQuery(document).ready(function() {{ refreshDropDowns(); }});
         protected global::System.Web.UI.WebControls.TextBox txtContainerConfigPageSize;
 
         protected global::umbraco.uicontrols.PropertyPanel pp_containerConfigAdditionalColumns;
+        protected global::System.Web.UI.WebControls.DropDownList ddlContainerConfigAdditionalColumnsChooser;
         protected global::System.Web.UI.WebControls.TextBox txtContainerConfigAdditionalColumns;
 
         protected global::umbraco.uicontrols.PropertyPanel pp_containerConfigOrderBy;
-        protected global::System.Web.UI.WebControls.TextBox txtContainerConfigOrderBy;
+        protected global::System.Web.UI.WebControls.DropDownList ddlContainerConfigOrderBy;
 
         protected global::umbraco.uicontrols.PropertyPanel pp_containerConfigOrderDirection;
         protected global::System.Web.UI.WebControls.DropDownList ddlContainerConfigOrderDirection;