Adds "Textbox List" editor

.github/IDEAS.md

@@ -23,10 +23,6 @@
 - Wizard - overlay panel with a step wizard, each containing multiple fields, that populate the next set of fields. (Similar to the cascading editor, above.)
   Making use of the [`<umb-pagination>` directive](https://github.com/umbraco/Umbraco-CMS/search?q=general_previous)?
 
-- Data Source powered Multiple Textbox. Lists out a textbox for each items in the data source.
-  e.g. similar to https://our.umbraco.com/packages/backoffice-extensions/multilanguage-textbox/
-  Could be useful for social networks, e.g. facebook, twitter links.
-  https://github.com/leekelleher/umbraco-contentment/pull/195
 
 - Editor Note
   https://github.com/leekelleher/umbraco-contentment/discussions/187

.github/README.md

@@ -32,6 +32,7 @@ Let's take a look inside...
 - [Number Input](../docs/editors/number-input.md) - a numeric editor, with sizing configurations.
 - [Render Macro](../docs/editors/render-macro.md) - a read-only label dynamically generated from an Umbraco Macro.
 - [Templated Label](../docs/editors/templated-label.md) - a display label, ideal for showing data from 3rd-party systems.
+- [Textbox List](../docs/editors/textbox-list.md) - a multi-textstring editor, adds a textbox for each item in a custom data source.
 - [Text Input](../docs/editors/text-input.md) - a textstring editor, configurable with HTML5 options.
 
 #### Telemetry

docs/README.md

@@ -21,6 +21,7 @@ Here is the documentation for the Contentment property-editors...
 - [Number Input](../docs/editors/number-input.md) - a numeric editor, with sizing configurations.
 - [Render Macro](../docs/editors/render-macro.md) - a read-only label dynamically generated from an Umbraco Macro.
 - [Templated Label](../docs/editors/templated-label.md) - a display label, ideal for showing data from 3rd-party systems.
+- [Textbox List](../docs/editors/textbox-list.md) - a multi-textstring editor, adds a textbox for each item in a custom data source.
 - [Text Input](../docs/editors/text-input.md) - a textstring editor, configurable with HTML5 options.
 
 

docs/editors/textbox-list.md

@@ -0,0 +1,88 @@
+<img src="../assets/img/logo.png" alt="Contentment for Umbraco logo" title="A state of Umbraco happiness." height="130" align="right">
+
+## Contentment for Umbraco
+
+### Textbox List
+
+Textbox List is a property-editor that uses a data-source to give you a textbox for each item in the data-source.
+
+> This property-editor has taken inspiration from the community packages, [KeyValue Editor](https://our.umbraco.com/packages/backoffice-extensions/keyvalue-editor/) by Chriztian Steinmeier and [Multilanguage Textbox](https://our.umbraco.com/packages/backoffice-extensions/multilanguage-textbox/) by Dave Woestenborghs.
+
+For information about data-sources, please see [the documentation for the Data List property-editor](data-list.md).
+
+
+### How to configure the editor?
+
+In your new Data Type, selected the "[Contentment] Textbox List" option. You will see the following configuration fields.
+
+![Configuration Editor for Textbox List](textbox-list--configuration-editor-01.png)
+
+The first field is **Data source**, this is used to provide a list of predefined values to suggest to the user for the textbox list.
+
+The configuration of the data source uses the same approach as the **Data List** editor, [please see the documentation for example data source options](data-list.md#how-to-configure-the-editor).
+
+> [An extensive list of all the **built-in data-sources** is available](../data-sources/README.md).
+
+For our example, let's choose **User-defined List**. You will then be presented with configuration options for this data source.
+
+![Configuration Editor for Textbox List - data source configuration (for User-defined List)](textbox-list--configuration-editor-02.png)
+
+![Configuration Editor for Textbox List - data source configuration (for User-defined List)](textbox-list--configuration-editor-03.png)
+
+Once you have configured the data source, press the **Done** button at the bottom of the overlay. You should notice that the **Preview** for the data source has been updated.
+
+The next fields, **Default icon** and **Label style** are for the presentation of the icon and label that is associated with each textbox in the list.
+
+When you are happy with the configuration, you can **Save** the Data Type and add it to your Document Type.
+
+
+### How to use the editor?
+
+Once you have added the configured Data Type to your Document Type, the Textbox List editor will be displayed on the content page's property panel.
+
+![Textbox List property-editor - displaying a textbox for each item in the data source](textbox-list--property-editor-01.png)
+
+
+### How to get the value?
+
+The value for the Textbox List will be a [`NameValueCollection`](https://docs.microsoft.com/en-us/dotnet/api/system.collections.specialized.namevaluecollection) object-type.
+
+To use this in your view templates, here are some examples.
+
+For our example, we'll assume that your property's alias is `"textboxList"`, then...
+
+Using Umbraco's Models Builder...
+
+```cshtml
+<dl>
+    @foreach (var key in Model.TextboxList.AllKeys)
+    {
+        <dt>@key</dt>
+        <dd>@Model.TextboxList[key]</dd>
+    }
+</dl>
+```
+
+...or if you don't need to loop over the values, you can access them directly like this...
+
+```cshtml
+@Model.TextboxList["email"]
+```
+
+Without ModelsBuilder...
+
+The weakly-typed API may give you some headaches, I suggest using strongly-typed, (or preferably Models Builder).
+
+Here's an example of strongly-typed...
+
+```cshtml
+<dl>
+    @foreach (var key in Model.Value<System.Collections.Specialized.NameValueCollection>("textboxList").AllKeys)
+    {
+        <dt>@key</dt>
+        <dd>@Model.TextboxList[key]</dd>
+    }
+</dl>
+```
+
+

src/Umbraco.Cms.9.0.0/Views/testMiscPage.cshtml

@@ -0,0 +1,18 @@
+@inherits UmbracoViewPage<TestMiscPage>
+@{
+    Layout = "_layout.cshtml";
+}
+
+@section body
+{
+    <h1>@Model.Name</h1>
+    <h3>@nameof(Model.Properties)</h3>
+    @foreach (var property in Model.Properties)
+    {
+        <div>
+            <h4>@property.Alias</h4>
+            <div><code>@property.PropertyType.ClrType</code></div>
+            <pre><code>@property.GetSourceValue()</code></pre>
+        </div>
+    }
+}

src/Umbraco.Cms.9.0.0/uSync/v9/Content/home.config

@@ -43,7 +43,7 @@
     "key": "a11ccbdb-76eb-4f7d-88e0-555fb9ca0c56",
     "icon": "icon-navigation-top color-blue-grey",
     "value": {
-      "mainMenu": "umb://document/7c6bcf13fa7d4949b975ffb331ee0dcc,umb://document/3f755f025f6e42cca7ea4b769e3232b2,umb://document/f584df3eeffe42698cf41366a03f4fff"
+      "mainMenu": "umb://document/7c6bcf13fa7d4949b975ffb331ee0dcc,umb://document/3f755f025f6e42cca7ea4b769e3232b2,umb://document/f584df3eeffe42698cf41366a03f4fff,umb://document/ddf45934719e4f178cd1384d3a5a0172"
     }
   }
 ]]]></Value>

src/Umbraco.Cms.9.0.0/uSync/v9/Content/test-misc.config

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Content Key="ddf45934-719e-4f17-8cd1-384d3a5a0172" Alias="Test - Misc" Level="3">
+  <Info>
+    <Parent Key="7c6bcf13-fa7d-4949-b975-ffb331ee0dcc">Home</Parent>
+    <Path>/Contentment/Home/TestMisc</Path>
+    <Trashed>false</Trashed>
+    <ContentType>testMiscPage</ContentType>
+    <CreateDate>2022-01-27T15:01:56</CreateDate>
+    <NodeName Default="Test - Misc" />
+    <SortOrder>2</SortOrder>
+    <Published Default="true" />
+    <Schedule />
+    <Template Key="32cf5caf-9267-4cf4-8327-2dcbd24a1cd7">testMiscPage</Template>
+  </Info>
+  <Properties>
+    <testTextbox>
+      <Value><![CDATA[Hello world]]></Value>
+    </testTextbox>
+    <textboxList>
+      <Value><![CDATA[{
+  "telephone": "+44123456789",
+  "email": "test@test.test",
+  "website": "https://github.com/sponsors/leekelleher"
+}]]></Value>
+    </textboxList>
+  </Properties>
+</Content>

src/Umbraco.Cms.9.0.0/uSync/v9/ContentTypes/homepage.config

@@ -26,6 +26,7 @@
     <ContentType Key="15cf8bbd-22f2-4b61-a295-18235c978614" SortOrder="0">contentPage</ContentType>
     <ContentType Key="a36df9f1-1586-4594-a85a-c99259234aeb" SortOrder="1">testDataListPage</ContentType>
     <ContentType Key="4128a049-f8bf-426a-b4ed-e1bd6df03d2c" SortOrder="2">testNotesPage</ContentType>
+    <ContentType Key="be1a660e-e7b1-49b7-8101-45095e56350a" SortOrder="3">testMiscPage</ContentType>
   </Structure>
   <GenericProperties />
   <Tabs />

src/Umbraco.Cms.9.0.0/uSync/v9/ContentTypes/testmiscpage.config

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ContentType Key="be1a660e-e7b1-49b7-8101-45095e56350a" Alias="testMiscPage" Level="2">
+  <Info>
+    <Name>Test Misc Page</Name>
+    <Icon>icon-defrag color-indigo</Icon>
+    <Thumbnail>folder.png</Thumbnail>
+    <Description>A demo page to test miscellaneous property editors</Description>
+    <AllowAtRoot>False</AllowAtRoot>
+    <IsListView>False</IsListView>
+    <Variations>Nothing</Variations>
+    <IsElement>false</IsElement>
+    <Folder>Pages</Folder>
+    <Compositions />
+    <DefaultTemplate>testMiscPage</DefaultTemplate>
+    <AllowedTemplates>
+      <Template Key="32cf5caf-9267-4cf4-8327-2dcbd24a1cd7">testMiscPage</Template>
+    </AllowedTemplates>
+  </Info>
+  <Structure />
+  <GenericProperties>
+    <GenericProperty>
+      <Key>5049c7f6-0ccb-4315-b4fb-3c860d7c39cc</Key>
+      <Name>Test Textbox</Name>
+      <Alias>testTextbox</Alias>
+      <Definition>0cc0eba1-9960-42c9-bf9b-60e150b429ae</Definition>
+      <Type>Umbraco.TextBox</Type>
+      <Mandatory>false</Mandatory>
+      <Validation></Validation>
+      <Description><![CDATA[Used as a guide/comparison for the Textbox List editor.]]></Description>
+      <SortOrder>10</SortOrder>
+      <Tab Alias="textboxes">Textboxes</Tab>
+      <Variations>Nothing</Variations>
+      <MandatoryMessage></MandatoryMessage>
+      <ValidationRegExpMessage></ValidationRegExpMessage>
+      <LabelOnTop>false</LabelOnTop>
+    </GenericProperty>
+    <GenericProperty>
+      <Key>8293bcfa-382d-4532-9501-ee14e808322d</Key>
+      <Name>Textbox List</Name>
+      <Alias>textboxList</Alias>
+      <Definition>d4b7c5c9-dbc1-41b4-8b90-41b7cf8bb061</Definition>
+      <Type>Umbraco.Community.Contentment.TextboxList</Type>
+      <Mandatory>false</Mandatory>
+      <Validation></Validation>
+      <Description><![CDATA[]]></Description>
+      <SortOrder>50</SortOrder>
+      <Tab Alias="textboxes">Textboxes</Tab>
+      <Variations>Nothing</Variations>
+      <MandatoryMessage></MandatoryMessage>
+      <ValidationRegExpMessage></ValidationRegExpMessage>
+      <LabelOnTop>false</LabelOnTop>
+    </GenericProperty>
+  </GenericProperties>
+  <Tabs>
+    <Tab>
+      <Caption>Textboxes</Caption>
+      <Alias>textboxes</Alias>
+      <Type>Group</Type>
+      <SortOrder>10</SortOrder>
+    </Tab>
+  </Tabs>
+</ContentType>

src/Umbraco.Cms.9.0.0/uSync/v9/DataTypes/ContentmentTextboxListExample.config

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<DataType Key="d4b7c5c9-dbc1-41b4-8b90-41b7cf8bb061" Alias="[Contentment] Textbox List - Example" Level="2">
+  <Info>
+    <Name>[Contentment] Textbox List - Example</Name>
+    <EditorAlias>Umbraco.Community.Contentment.TextboxList</EditorAlias>
+    <DatabaseType>Ntext</DatabaseType>
+    <Folder>Test+Misc</Folder>
+  </Info>
+  <Config><![CDATA[{
+  "dataSource": [
+    {
+      "key": "Umbraco.Community.Contentment.DataEditors.UserDefinedDataListSource, Umbraco.Community.Contentment",
+      "value": {
+        "items": [
+          {
+            "icon": "icon-old-phone color-black",
+            "name": "Telephone",
+            "value": "telephone",
+            "description": ""
+          },
+          {
+            "icon": "icon-message color-black",
+            "name": "Email",
+            "value": "email",
+            "description": ""
+          },
+          {
+            "icon": "icon-umb-translation color-black",
+            "name": "Website",
+            "value": "website",
+            "description": ""
+          }
+        ]
+      }
+    }
+  ],
+  "defaultIcon": "icon-document color-black",
+  "labelStyle": "both",
+  "enableDevMode": "1"
+}]]></Config>
+</DataType>

src/Umbraco.Cms.9.0.0/uSync/v9/Templates/testmiscpage.config

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Template Key="32cf5caf-9267-4cf4-8327-2dcbd24a1cd7" Alias="testMiscPage" Level="2">
+  <Name>Test Misc Page</Name>
+  <Parent>_layout</Parent>
+</Template>

src/Umbraco.Cms.9.0.0/umbraco/models/TestMiscPage.generated.cs

@@ -0,0 +1,68 @@
+//------------------------------------------------------------------------------
+// <auto-generated>
+//   This code was generated by a tool.
+//
+//    Umbraco.ModelsBuilder.Embedded v9.0.0+5bfab13dc5a268714aad2426a2b68ab5561a6407
+//
+//   Changes to this file will be lost if the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+
+using System;
+using System.Linq.Expressions;
+using Umbraco.Cms.Core.Models.PublishedContent;
+using Umbraco.Cms.Core.PublishedCache;
+using Umbraco.Cms.Infrastructure.ModelsBuilder;
+using Umbraco.Cms.Core;
+using Umbraco.Extensions;
+
+namespace Umbraco.Cms.Web.Common.PublishedModels
+{
+	/// <summary>Test Misc Page</summary>
+	[PublishedModel("testMiscPage")]
+	public partial class TestMiscPage : PublishedContentModel
+	{
+		// helpers
+#pragma warning disable 0109 // new is redundant
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "9.0.0+5bfab13dc5a268714aad2426a2b68ab5561a6407")]
+		public new const string ModelTypeAlias = "testMiscPage";
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "9.0.0+5bfab13dc5a268714aad2426a2b68ab5561a6407")]
+		public new const PublishedItemType ModelItemType = PublishedItemType.Content;
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "9.0.0+5bfab13dc5a268714aad2426a2b68ab5561a6407")]
+		[return: global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		public new static IPublishedContentType GetModelContentType(IPublishedSnapshotAccessor publishedSnapshotAccessor)
+			=> PublishedModelUtility.GetModelContentType(publishedSnapshotAccessor, ModelItemType, ModelTypeAlias);
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "9.0.0+5bfab13dc5a268714aad2426a2b68ab5561a6407")]
+		[return: global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		public static IPublishedPropertyType GetModelPropertyType<TValue>(IPublishedSnapshotAccessor publishedSnapshotAccessor, Expression<Func<TestMiscPage, TValue>> selector)
+			=> PublishedModelUtility.GetModelPropertyType(GetModelContentType(publishedSnapshotAccessor), selector);
+#pragma warning restore 0109
+
+		private IPublishedValueFallback _publishedValueFallback;
+
+		// ctor
+		public TestMiscPage(IPublishedContent content, IPublishedValueFallback publishedValueFallback)
+			: base(content, publishedValueFallback)
+		{
+			_publishedValueFallback = publishedValueFallback;
+		}
+
+		// properties
+
+		///<summary>
+		/// Test Textbox: Used as a guide/comparison for the Textbox List editor.
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "9.0.0+5bfab13dc5a268714aad2426a2b68ab5561a6407")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("testTextbox")]
+		public virtual string TestTextbox => this.Value<string>(_publishedValueFallback, "testTextbox");
+
+		///<summary>
+		/// Textbox List
+		///</summary>
+		[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Umbraco.ModelsBuilder.Embedded", "9.0.0+5bfab13dc5a268714aad2426a2b68ab5561a6407")]
+		[global::System.Diagnostics.CodeAnalysis.MaybeNull]
+		[ImplementPropertyType("textboxList")]
+		public virtual global::System.Collections.Specialized.NameValueCollection TextboxList => this.Value<global::System.Collections.Specialized.NameValueCollection>(_publishedValueFallback, "textboxList");
+	}
+}

src/Umbraco.Community.Contentment.sln

@@ -53,6 +53,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Editors", "Editors", "{A529
 		..\docs\editors\render-macro.md = ..\docs\editors\render-macro.md
 		..\docs\editors\templated-label.md = ..\docs\editors\templated-label.md
 		..\docs\editors\text-input.md = ..\docs\editors\text-input.md
+		..\docs\editors\textbox-list.md = ..\docs\editors\textbox-list.md
 	EndProjectSection
 EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "ISSUE_TEMPLATE", "ISSUE_TEMPLATE", "{02357F6B-DA34-47CC-BA3E-A737CEC66B0D}"

src/Umbraco.Community.Contentment/DataEditors/Buttons/buttons.js

@@ -37,8 +37,8 @@ angular.module("umbraco").controller("Umbraco.Community.Contentment.DataEditors.
 
             vm.items = config.items.slice();
 
-            vm.hideIcon = config.labelStyle === 'text';
-            vm.hideName = config.labelStyle === 'icon';
+            vm.hideIcon = config.labelStyle === "text";
+            vm.hideName = config.labelStyle === "icon";
 
             vm.uniqueId = $scope.model.hasOwnProperty("dataTypeKey")
                 ? [$scope.model.alias, $scope.model.dataTypeKey.substring(0, 8)].join("-")