Update #18: UX Document Template Bulk Generating

Improved UX

Disco.Web/Areas/API/Controllers/DocumentTemplateController.cs

@@ -453,7 +453,7 @@ namespace Disco.Web.Areas.API.Controllers
                     throw new InvalidOperationException("Unknown DocumentType Scope");
             }
 
-            var dataIds = DataIds.Split(new string[] { Environment.NewLine }, StringSplitOptions.RemoveEmptyEntries);
+            var dataIds = DataIds.Split(new string[] { Environment.NewLine, ",", ";" }, StringSplitOptions.RemoveEmptyEntries);
             var timeStamp = DateTime.Now;
             var pdf = documentTemplate.GeneratePdfBulk(Database, UserService.CurrentUser, timeStamp, dataIds);
 

Disco.Web/Areas/Config/Views/DocumentTemplate/Show.cshtml

@@ -383,20 +383,6 @@
                 }
             </td>
         </tr>
-        @if (canBulkGenerate)
-        {
-            <tr>
-                <th>Bulk Generate
-                </th>
-                <td>
-                    @using (Html.BeginForm(MVC.API.DocumentTemplate.BulkGenerate(Model.DocumentTemplate.Id), FormMethod.Post))
-                    {
-                        <textarea name="DataIds"></textarea>
-                        <input class="button" type="submit" value="Generate" />
-                    }
-                </td>
-            </tr>
-        }
     </table>
 </div>
 <h2>Template Expressions</h2>
@@ -443,6 +429,80 @@
     {
         @Html.ActionLinkButton("Expression Browser", MVC.Config.DocumentTemplate.ExpressionBrowser())
     }
+    @if (canBulkGenerate)
+    {
+        <a id="buttonBulkGenerate" href="#" class="button">Bulk Generate</a>
+        <div id="dialogBulkGenerate" class="hiddenDialog" title="Bulk Generate: @(Model.DocumentTemplate.Id)">
+            <div class="brief">
+                <div>
+                    Enter multiple <span class="scopeDescBulkGenerate"></span>&nbsp;separated by <code>&lt;new line&gt;</code>, commas (<code>,</code>) or semicolons (<code>;</code>).
+                </div>
+                <div class="examples clearfix">
+                    <h4>Examples:</h4>
+                    <div class="example1 code"></div>
+                    <div class="example2 code"></div>
+                    <div class="example3 code"></div>
+                </div>
+            </div>
+            @using (Html.BeginForm(MVC.API.DocumentTemplate.BulkGenerate(Model.DocumentTemplate.Id), FormMethod.Post))
+            {
+                <div class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="DataIds"></div>
+                <textarea id="inputBulkGenerateDataIds" name="DataIds" data-val="true" data-val-required="Identifiers are required"></textarea>
+            }
+        </div>
+
+        <script>
+            $(function () {
+                var dialog;
+
+                $('#buttonBulkGenerate').click(function () {
+                    if (!dialog) {
+                        dialog = $('#dialogBulkGenerate').dialog({
+                            resizable: false,
+                            modal: true,
+                            autoOpen: false,
+                            width: 460,
+                            buttons: {
+                                "Bulk Generate": function () {
+                                    dialog.find('form').submit();
+                                    dialog.dialog("disable");
+                                },
+                                Close: function () {
+                                    $(this).dialog("close");
+                                }
+                            }
+                        });
+
+                        $.validator.unobtrusive.reparse('#inputBulkGenerateDataIds');
+                    }
+
+                    switch ($('#DocumentTemplate_Scope').val()) {
+                        case 'Device':
+                            dialog.find('.scopeDescBulkGenerate').text('Device Serial Numbers');
+                            dialog.find('.example1').html('01234567<br />ABCD9876<br />8VQ6G2R');
+                            dialog.find('.example2').text('01234567,ABCD9876,8VQ6G2R');
+                            dialog.find('.example3').text('01234567;ABCD9876;8VQ6G2R');
+                            break;
+                        case 'Job':
+                            dialog.find('.scopeDescBulkGenerate').text('Job Ids');
+                            dialog.find('.example1').html('86<br />99<br />44');
+                            dialog.find('.example2').text('86,99,44');
+                            dialog.find('.example3').text('86;99;44');
+                            break;
+                        case 'User':
+                            dialog.find('.scopeDescBulkGenerate').text('User Ids');
+                            dialog.find('.example1').html('user6<br />smi0099<br />rsmith');
+                            dialog.find('.example2').text('user6,smi0099,rsmith');
+                            dialog.find('.example3').text('user6;smi0099;rsmith');
+                            break;
+                    }
+
+                    dialog.dialog('open');
+                    return false;
+                });
+            });
+        </script>
+    }
     @if (Authorization.Has(Claims.Config.DocumentTemplate.Delete))
     {
         @Html.ActionLinkButton("Delete", MVC.API.DocumentTemplate.Delete(Model.DocumentTemplate.Id, true), "buttonDelete")

Disco.Web/Areas/Config/Views/DocumentTemplate/Show.generated.cs

@@ -2,7 +2,7 @@
 //------------------------------------------------------------------------------
 // <auto-generated>
 //     This code was generated by a tool.
-//     Runtime Version:4.0.30319.18051
+//     Runtime Version:4.0.30319.34003
 //
 //     Changes to this file may cause incorrect behavior and will be lost if
 //     the code is regenerated.
@@ -965,75 +965,11 @@ WriteLiteral("\r\n                </div>\r\n");
             
             #line default
             #line hidden
-WriteLiteral("            </td>\r\n        </tr>\r\n");
+WriteLiteral("            </td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n<h2>Template Expressions<" +
+"/h2>\r\n");
 
             
-            #line 386 "..\..\Areas\Config\Views\DocumentTemplate\Show.cshtml"
+            #line 389 "..\..\Areas\Config\Views\DocumentTemplate\Show.cshtml"
-        
-            
-            #line default
-            #line hidden
-            
-            #line 386 "..\..\Areas\Config\Views\DocumentTemplate\Show.cshtml"
-         if (canBulkGenerate)
-        {
-
-            
-            #line default
-            #line hidden
-WriteLiteral("            <tr>\r\n                <th>Bulk Generate\r\n                </th>\r\n     " +
-"           <td>\r\n");
-
-            
-            #line 392 "..\..\Areas\Config\Views\DocumentTemplate\Show.cshtml"
-                    
-            
-            #line default
-            #line hidden
-            
-            #line 392 "..\..\Areas\Config\Views\DocumentTemplate\Show.cshtml"
-                     using (Html.BeginForm(MVC.API.DocumentTemplate.BulkGenerate(Model.DocumentTemplate.Id), FormMethod.Post))
-                    {
-
-            
-            #line default
-            #line hidden
-WriteLiteral("                        <textarea");
-
-WriteLiteral(" name=\"DataIds\"");
-
-WriteLiteral("></textarea>\r\n");
-
-WriteLiteral("                        <input");
-
-WriteLiteral(" class=\"button\"");
-
-WriteLiteral(" type=\"submit\"");
-
-WriteLiteral(" value=\"Generate\"");
-
-WriteLiteral(" />\r\n");
-
-            
-            #line 396 "..\..\Areas\Config\Views\DocumentTemplate\Show.cshtml"
-                    }
-
-            
-            #line default
-            #line hidden
-WriteLiteral("                </td>\r\n            </tr>\r\n");
-
-            
-            #line 399 "..\..\Areas\Config\Views\DocumentTemplate\Show.cshtml"
-        }
-
-            
-            #line default
-            #line hidden
-WriteLiteral("    </table>\r\n</div>\r\n<h2>Template Expressions</h2>\r\n");
-
-            
-            #line 403 "..\..\Areas\Config\Views\DocumentTemplate\Show.cshtml"
 Write(Html.Partial(MVC.Config.DocumentTemplate.Views._ExpressionsTable, Model.TemplateExpressions));
 
             
@@ -1097,13 +1033,13 @@ WriteLiteral(" class=\"actionBar\"");
 WriteLiteral(">\r\n");
 
             
-            #line 442 "..\..\Areas\Config\Views\DocumentTemplate\Show.cshtml"
+            #line 428 "..\..\Areas\Config\Views\DocumentTemplate\Show.cshtml"
     
             
             #line default
             #line hidden
             
-            #line 442 "..\..\Areas\Config\Views\DocumentTemplate\Show.cshtml"
+            #line 428 "..\..\Areas\Config\Views\DocumentTemplate\Show.cshtml"
      if (Authorization.Has(Claims.Config.Show))
     {
         
@@ -1111,14 +1047,14 @@ WriteLiteral(">\r\n");
             #line default
             #line hidden
             
-            #line 444 "..\..\Areas\Config\Views\DocumentTemplate\Show.cshtml"
+            #line 430 "..\..\Areas\Config\Views\DocumentTemplate\Show.cshtml"
    Write(Html.ActionLinkButton("Expression Browser", MVC.Config.DocumentTemplate.ExpressionBrowser()));
 
             
             #line default
             #line hidden
             
-            #line 444 "..\..\Areas\Config\Views\DocumentTemplate\Show.cshtml"
+            #line 430 "..\..\Areas\Config\Views\DocumentTemplate\Show.cshtml"
                                                                                                      
     }
 
@@ -1128,7 +1064,164 @@ WriteLiteral(">\r\n");
 WriteLiteral("    ");
 
             
-            #line 446 "..\..\Areas\Config\Views\DocumentTemplate\Show.cshtml"
+            #line 432 "..\..\Areas\Config\Views\DocumentTemplate\Show.cshtml"
+     if (canBulkGenerate)
+    {
+
+            
+            #line default
+            #line hidden
+WriteLiteral("        <a");
+
+WriteLiteral(" id=\"buttonBulkGenerate\"");
+
+WriteLiteral(" href=\"#\"");
+
+WriteLiteral(" class=\"button\"");
+
+WriteLiteral(">Bulk Generate</a>\r\n");
+
+WriteLiteral("        <div");
+
+WriteLiteral(" id=\"dialogBulkGenerate\"");
+
+WriteLiteral(" class=\"hiddenDialog\"");
+
+WriteAttribute("title", Tuple.Create(" title=\"", 20958), Tuple.Create("\"", 21009)
+, Tuple.Create(Tuple.Create("", 20966), Tuple.Create("Bulk", 20966), true)
+, Tuple.Create(Tuple.Create(" ", 20970), Tuple.Create("Generate:", 20971), true)
+            
+            #line 435 "..\..\Areas\Config\Views\DocumentTemplate\Show.cshtml"
+, Tuple.Create(Tuple.Create(" ", 20980), Tuple.Create<System.Object, System.Int32>(Model.DocumentTemplate.Id
+            
+            #line default
+            #line hidden
+, 20981), false)
+);
+
+WriteLiteral(">\r\n            <div");
+
+WriteLiteral(" class=\"brief\"");
+
+WriteLiteral(">\r\n                <div>\r\n                    Enter multiple <span");
+
+WriteLiteral(" class=\"scopeDescBulkGenerate\"");
+
+WriteLiteral("></span>&nbsp;separated by <code>&lt;new line&gt;</code>, commas (<code>,</code>)" +
+" or semicolons (<code>;</code>).\r\n                </div>\r\n                <div");
+
+WriteLiteral(" class=\"examples clearfix\"");
+
+WriteLiteral(">\r\n                    <h4>Examples:</h4>\r\n                    <div");
+
+WriteLiteral(" class=\"example1 code\"");
+
+WriteLiteral("></div>\r\n                    <div");
+
+WriteLiteral(" class=\"example2 code\"");
+
+WriteLiteral("></div>\r\n                    <div");
+
+WriteLiteral(" class=\"example3 code\"");
+
+WriteLiteral("></div>\r\n                </div>\r\n            </div>\r\n");
+
+            
+            #line 447 "..\..\Areas\Config\Views\DocumentTemplate\Show.cshtml"
+            
+            
+            #line default
+            #line hidden
+            
+            #line 447 "..\..\Areas\Config\Views\DocumentTemplate\Show.cshtml"
+             using (Html.BeginForm(MVC.API.DocumentTemplate.BulkGenerate(Model.DocumentTemplate.Id), FormMethod.Post))
+            {
+
+            
+            #line default
+            #line hidden
+WriteLiteral("                <div");
+
+WriteLiteral(" class=\"field-validation-valid\"");
+
+WriteLiteral(" data-valmsg-replace=\"true\"");
+
+WriteLiteral(" data-valmsg-for=\"DataIds\"");
+
+WriteLiteral("></div>\r\n");
+
+WriteLiteral("                <textarea");
+
+WriteLiteral(" id=\"inputBulkGenerateDataIds\"");
+
+WriteLiteral(" name=\"DataIds\"");
+
+WriteLiteral(" data-val=\"true\"");
+
+WriteLiteral(" data-val-required=\"Identifiers are required\"");
+
+WriteLiteral("></textarea>\r\n");
+
+            
+            #line 451 "..\..\Areas\Config\Views\DocumentTemplate\Show.cshtml"
+            }
+
+            
+            #line default
+            #line hidden
+WriteLiteral("        </div>\r\n");
+
+            
+            #line 453 "..\..\Areas\Config\Views\DocumentTemplate\Show.cshtml"
+
+
+            
+            #line default
+            #line hidden
+WriteLiteral("        <script>\r\n            $(function () {\r\n                var dialog;\r\n\r\n   " +
+"             $(\'#buttonBulkGenerate\').click(function () {\r\n                    i" +
+"f (!dialog) {\r\n                        dialog = $(\'#dialogBulkGenerate\').dialog(" +
+"{\r\n                            resizable: false,\r\n                            mo" +
+"dal: true,\r\n                            autoOpen: false,\r\n                      " +
+"      width: 460,\r\n                            buttons: {\r\n                     " +
+"           \"Bulk Generate\": function () {\r\n                                    d" +
+"ialog.find(\'form\').submit();\r\n                                    dialog.dialog(" +
+"\"disable\");\r\n                                },\r\n                               " +
+" Close: function () {\r\n                                    $(this).dialog(\"close" +
+"\");\r\n                                }\r\n                            }\r\n         " +
+"               });\r\n\r\n                        $.validator.unobtrusive.reparse(\'#" +
+"inputBulkGenerateDataIds\');\r\n                    }\r\n\r\n                    switch" +
+" ($(\'#DocumentTemplate_Scope\').val()) {\r\n                        case \'Device\':\r" +
+"\n                            dialog.find(\'.scopeDescBulkGenerate\').text(\'Device " +
+"Serial Numbers\');\r\n                            dialog.find(\'.example1\').html(\'01" +
+"234567<br />ABCD9876<br />8VQ6G2R\');\r\n                            dialog.find(\'." +
+"example2\').text(\'01234567,ABCD9876,8VQ6G2R\');\r\n                            dialo" +
+"g.find(\'.example3\').text(\'01234567;ABCD9876;8VQ6G2R\');\r\n                        " +
+"    break;\r\n                        case \'Job\':\r\n                            dia" +
+"log.find(\'.scopeDescBulkGenerate\').text(\'Job Ids\');\r\n                           " +
+" dialog.find(\'.example1\').html(\'86<br />99<br />44\');\r\n                         " +
+"   dialog.find(\'.example2\').text(\'86,99,44\');\r\n                            dialo" +
+"g.find(\'.example3\').text(\'86;99;44\');\r\n                            break;\r\n     " +
+"                   case \'User\':\r\n                            dialog.find(\'.scope" +
+"DescBulkGenerate\').text(\'User Ids\');\r\n                            dialog.find(\'." +
+"example1\').html(\'user6<br />smi0099<br />rsmith\');\r\n                            " +
+"dialog.find(\'.example2\').text(\'user6,smi0099,rsmith\');\r\n                        " +
+"    dialog.find(\'.example3\').text(\'user6;smi0099;rsmith\');\r\n                    " +
+"        break;\r\n                    }\r\n\r\n                    dialog.dialog(\'open" +
+"\');\r\n                    return false;\r\n                });\r\n            });\r\n  " +
+"      </script>\r\n");
+
+            
+            #line 505 "..\..\Areas\Config\Views\DocumentTemplate\Show.cshtml"
+    }
+
+            
+            #line default
+            #line hidden
+WriteLiteral("    ");
+
+            
+            #line 506 "..\..\Areas\Config\Views\DocumentTemplate\Show.cshtml"
      if (Authorization.Has(Claims.Config.DocumentTemplate.Delete))
     {
         
@@ -1136,14 +1229,14 @@ WriteLiteral("    ");
             #line default
             #line hidden
             
-            #line 448 "..\..\Areas\Config\Views\DocumentTemplate\Show.cshtml"
+            #line 508 "..\..\Areas\Config\Views\DocumentTemplate\Show.cshtml"
    Write(Html.ActionLinkButton("Delete", MVC.API.DocumentTemplate.Delete(Model.DocumentTemplate.Id, true), "buttonDelete"));
 
             
             #line default
             #line hidden
             
-            #line 448 "..\..\Areas\Config\Views\DocumentTemplate\Show.cshtml"
+            #line 508 "..\..\Areas\Config\Views\DocumentTemplate\Show.cshtml"
                                                                                                                           
     }
 

Disco.Web/ClientSource/Style/Config.css

@@ -542,6 +542,29 @@ div.logEventsViewport table.logEventsViewport > tbody > tr > td.eventType {
   padding: 2px;
   height: 430px;
 }
+#dialogBulkGenerate .brief {
+  margin: 0 0 8px 0;
+}
+#dialogBulkGenerate .brief .scopeDescBulkGenerate {
+  font-weight: bold;
+}
+#dialogBulkGenerate .brief div.examples {
+  margin: 8px auto;
+  width: 300px;
+}
+#dialogBulkGenerate .brief div.examples div {
+  margin: 2px 4px 2px 0;
+  width: 150px;
+  float: left;
+}
+#dialogBulkGenerate .brief div.examples div.example1 {
+  width: 100px;
+}
+#dialogBulkGenerate textarea {
+  width: 100%;
+  height: 200px;
+  margin: 0 auto;
+}
 #importStatus #sessions .session {
   padding: 4px;
   margin-bottom: 10px;

Disco.Web/ClientSource/Style/Config.less

@@ -540,6 +540,38 @@ div.logEventsViewport {
     }
 }
 
+// Document Templates
+#dialogBulkGenerate {
+    .brief {
+        margin: 0 0 8px 0;
+
+        .scopeDescBulkGenerate {
+            font-weight: bold;
+        }
+
+        div.examples {
+            margin: 8px auto;
+            width: 300px;
+
+            div {
+                margin: 2px 4px 2px 0;
+                width: 150px;
+                float: left;
+
+                &.example1 {
+                    width: 100px;
+                }
+            }
+        }
+    }
+
+    textarea {
+        width: 100%;
+        height: 200px;
+        margin: 0 auto;
+    }
+}
+
 // Document Templates - Import Status
 #importStatus {
     #sessions {
@@ -757,7 +789,6 @@ div.logEventsViewport {
         text-align: right;
     }
 }
-
 // Device Batches
 .deviceBatches {
     #DeviceBatch_PurchaseDetails_Container {
@@ -792,9 +823,7 @@ div.logEventsViewport {
         height: 200px;
     }
 }
-
 // Plugins
-
 #plugins {
     .pageMenuArea a > h3 {
         display: inline;