AbpComponentDemoSectionTagHelper updated

6 years ago · 61b0bd6e7e
2 changed files with 107 additions and 21 deletions
--- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/TagHelpers/AbpComponentDemoSectionTagHelper.cs
+++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/TagHelpers/AbpComponentDemoSectionTagHelper.cs
@ -4,6 +4,7 @@ using System.Threading.Tasks;
 using Microsoft.AspNetCore.Razor.TagHelpers;
 using Microsoft.Extensions.FileProviders;
 using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers;
+using Volo.Abp.Guids;
 using Volo.Abp.VirtualFileSystem;

 namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.TagHelpers
@ -17,10 +18,14 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.S
        public string Title { get; set; }

        private readonly IVirtualFileProvider _virtualFileProvider;
+        private readonly IGuidGenerator _guidGenerator;

-        public AbpComponentDemoSectionTagHelper(IVirtualFileProvider virtualFileProvider)
+        public AbpComponentDemoSectionTagHelper(
+            IVirtualFileProvider virtualFileProvider, 
+            IGuidGenerator guidGenerator)
        {
            _virtualFileProvider = virtualFileProvider;
+            _guidGenerator = guidGenerator;
        }

        public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
@ -29,34 +34,69 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.S

            var content = await output.GetChildContentAsync();

-            output.PreContent.AppendHtml("<div class=\"abp-component-demo-section\">");
-            output.PreContent.AppendHtml($"<h2>{Title}</h2>");
-            output.PreContent.AppendHtml("<div class=\"abp-component-demo-section-body\">");
+            var previewId = _guidGenerator.Create();
+            var codeBlockId = _guidGenerator.Create();
+
+            var codeBlockTabId = _guidGenerator.Create();
+            var tagHelperCodeBlockId = _guidGenerator.Create();
+            var bootstrapCodeBlockId = _guidGenerator.Create();
+            
+            output.PreContent.AppendHtml("<div class=\"card\">");
+            output.PreContent.AppendHtml("<div class=\"card-header\">");
+            output.PreContent.AppendHtml("<div class=\"row\">");
+            output.PreContent.AppendHtml($"<div class=\"col\"><h4 class=\"card-title my-1\">{Title}</h4></div>");
+            output.PreContent.AppendHtml("<div class=\"col-auto\">");
+            output.PreContent.AppendHtml("<nav>");
+            output.PreContent.AppendHtml("<div class=\"nav nav-tabs nav-pills\" role=\"tablist\">");
+            output.PreContent.AppendHtml($"<a class=\"nav-item nav-link active\" id=\"nav-preview-tab-{previewId}\" data-toggle=\"tab\" href=\"#nav-preview-{previewId}\" role=\"tab\" aria-controls=\"nav-preview-{previewId}\" aria-selected=\"true\">Preview</a>");
+            output.PreContent.AppendHtml($"<a class=\"nav-item nav-link\" id=\"nav-code-tab-{codeBlockId}\" data-toggle=\"tab\" href=\"#nav-code-{codeBlockId}\" role=\"tab\" aria-controls=\"nav-code-{codeBlockId}\" aria-selected=\"false\">Code</a>");
+            output.PreContent.AppendHtml("</div>");
+            output.PreContent.AppendHtml("</nav>");
+            output.PreContent.AppendHtml("</div>"); // col-auto
+            output.PreContent.AppendHtml("</div>"); // row
+            output.PreContent.AppendHtml("</div>"); // card-header
+            output.PreContent.AppendHtml("<div class=\"card-body\">");
+            output.PreContent.AppendHtml($"<div class=\"tab-content\" id=\"nav-preview-tabContent-{previewId}\">");
+            output.PreContent.AppendHtml($"<div class=\"tab-pane fade show active\" id=\"nav-preview-{previewId}\" role=\"tabpanel\" aria-labelledby=\"nav-preview-tab-{previewId}\">");
+            
            /* component rendering here */
-            output.PostContent.AppendHtml("</div>"); //abp-component-demo-section-body
-            AppendRawSource(output);
-            AppendBootstrapSource(output, content);
-            output.PostContent.AppendHtml("</div>"); //abp-component-demo-section
-        }

-        private static void AppendBootstrapSource(TagHelperOutput output, TagHelperContent content)
-        {
-            output.PostContent.AppendHtml("<div class=\"abp-component-demo-section-bs-source\">");
-            output.PostContent.AppendHtml("<h3>Bootstrap</h3>");
+            output.PostContent.AppendHtml("</div>"); // tab-pane
+            output.PostContent.AppendHtml($"<div class=\"tab-pane fade\" id=\"nav-code-{codeBlockId}\" role=\"tabpanel\" aria-labelledby=\"nav-code-tab-{codeBlockId}\">");
+            
+            /* CodeBlock tabs */
+            
+            output.PostContent.AppendHtml($"<ul class=\"nav nav-tabs mb-3\" id=\"code-block-tab-{codeBlockTabId}\" role=\"tablist\">");
+            output.PostContent.AppendHtml("<li class=\"nav-item\">");
+            output.PostContent.AppendHtml($"<a class=\"nav-link active\" id=\"tag-helper-tab-{tagHelperCodeBlockId}\" data-toggle=\"pill\" href=\"#tag-helper-{tagHelperCodeBlockId}\" role=\"tab\" aria-controls=\"tag-helper-{tagHelperCodeBlockId}\" aria-selected=\"true\">Abp Tag Helper</a>");
+            output.PostContent.AppendHtml("</li>");
+            output.PostContent.AppendHtml("<li class=\"nav-item\">");
+            output.PostContent.AppendHtml($"<a class=\"nav-link\" id=\"bootstrap-tab-{bootstrapCodeBlockId}\" data-toggle=\"pill\" href=\"#bootstrap-{bootstrapCodeBlockId}\" role=\"tab\" aria-controls=\"bootstrap-{tagHelperCodeBlockId}\" aria-selected=\"true\">Bootstrap Render</a>");
+            output.PostContent.AppendHtml("</li>");
+            output.PostContent.AppendHtml("</ul>");
+            output.PostContent.AppendHtml($"<div class=\"tab-content\" id=\"code-block-tabContent-{codeBlockTabId}\">");
+            
+            output.PostContent.AppendHtml($"<div class=\"tab-pane fade show active\" id=\"tag-helper-{tagHelperCodeBlockId}\" role=\"tabpanel\" aria-labelledby=\"tag-helper-tab-{tagHelperCodeBlockId}\">");
            output.PostContent.AppendHtml("<pre>");
-            output.PostContent.Append(content.GetContent());
+            output.PostContent.AppendHtml("<code>");
+            output.PostContent.Append(GetRawDemoSource());
+            output.PostContent.AppendHtml("</code>");
            output.PostContent.AppendHtml("</pre>");
            output.PostContent.AppendHtml("</div>");
-        }
-
-        private void AppendRawSource(TagHelperOutput output)
-        {
-            output.PostContent.AppendHtml("<div class=\"abp-component-demo-section-raw-source\">");
-            output.PostContent.AppendHtml("<h3>ABP Tag Helpers</h3>");
+            
+            output.PostContent.AppendHtml($"<div class=\"tab-pane fade\" id=\"bootstrap-{bootstrapCodeBlockId}\" role=\"tabpanel\" aria-labelledby=\"bootstrap-tab-{bootstrapCodeBlockId}\">");
            output.PostContent.AppendHtml("<pre>");
-            output.PostContent.Append(GetRawDemoSource());
+            output.PostContent.AppendHtml("<code>");
+            output.PostContent.Append(content.GetContent());
+            output.PostContent.AppendHtml("</code>");
            output.PostContent.AppendHtml("</pre>");
            output.PostContent.AppendHtml("</div>");
+            
+            output.PostContent.AppendHtml("</div>"); // tab-content
+            output.PostContent.AppendHtml("</div>"); // tab-pane
+            output.PostContent.AppendHtml("</div>"); // tab-content
+            output.PostContent.AppendHtml("</div>"); // card-body
+            output.PostContent.AppendHtml("</div>"); // card
        }

        private string GetRawDemoSource()
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/wwwroot/libs/abp/luxon/abp.luxon.js
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/wwwroot/libs/abp/luxon/abp.luxon.js
@ -0,0 +1,46 @@
+var abp = abp || {};
+(function () {
+
+    if (!luxon) {
+        throw "abp/luxon library requires the luxon library included to the page!";
+    }
+
+    /* TIMING *************************************************/
+
+    abp.timing = abp.timing || {};
+
+    var setObjectValue = function (obj, property, value) {
+        if (typeof property === "string") {
+            property = property.split('.');
+        }
+
+        if (property.length > 1) {
+            var p = property.shift();
+            setObjectValue(obj[p], property, value);
+        } else {
+            obj[property[0]] = value;
+        }
+    }
+
+    var getObjectValue = function (obj, property) {
+        return property.split('.').reduce((a, v) => a[v], obj)
+    }
+
+    abp.timing.convertFieldsToIsoDate = function (form, fields) {
+        for (var field of fields) {
+            var dateTime = luxon.DateTime
+                .fromFormat(
+                    getObjectValue(form, field),
+                    abp.localization.currentCulture.dateTimeFormat.shortDatePattern,
+                    {locale: abp.localization.currentCulture.cultureName}
+                );
+
+            if (!dateTime.invalid) {
+                setObjectValue(form, field, dateTime.toFormat("yyyy-MM-dd HH:mm:ss"))
+            }
+        }
+
+        return form;
+    }
+
+})(jQuery);