SpaceBar V1.1.0 (#400)

Author: madking2010

src/Modules/SimplCommerce.Module.Cms/Controllers/SpaceBarWidgetApiContorller.cs

@@ -1,12 +1,15 @@
 using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Http;
 using Microsoft.AspNetCore.Mvc;
+using Microsoft.Net.Http.Headers;
 using Newtonsoft.Json;
 using SimplCommerce.Infrastructure.Data;
 using SimplCommerce.Module.Cms.ViewModels;
 using SimplCommerce.Module.Core.Models;
+using SimplCommerce.Module.Core.Services;
 using System;
 using System.Collections.Generic;
+using System.IO;
 using System.Linq;
 using System.Threading.Tasks;
 
@@ -18,11 +21,13 @@ public class SpaceBarWidgetApiContorller : Controller
     {
         private readonly IRepository<WidgetInstance> _widgetInstanceRepository;
         private readonly IRepository<Widget> _widgetRespository;
+        private readonly IMediaService _mediaService;
 
-        public SpaceBarWidgetApiContorller(IRepository<WidgetInstance> widgetInstanceRepository, IRepository<Widget> widgetRepository)
+        public SpaceBarWidgetApiContorller(IRepository<WidgetInstance> widgetInstanceRepository, IRepository<Widget> widgetRepository, IMediaService mediaService)
         {
             _widgetInstanceRepository = widgetInstanceRepository;
             _widgetRespository = widgetRepository;
+            _mediaService = mediaService;
         }
 
         [HttpGet("{id}")]
@@ -39,16 +44,24 @@ public IActionResult Get(long id)
                 DisplayOrder = widgetInstance.DisplayOrder,
                 Items = JsonConvert.DeserializeObject<IList<SpaceBarWidgetSetting>>(widgetInstance.Data)
             };
-
+            foreach (var item in model.Items)
+            {
+                item.ImageUrl = _mediaService.GetMediaUrl(item.Image);
+            }
             return Json(model);
         }
 
         [HttpPost]
-        public IActionResult Post(IFormCollection formCollection)
+        public async Task<IActionResult> Post(IFormCollection formCollection)
         {
             var model = ToSpaceBarWidgetFormModel(formCollection);
             if (ModelState.IsValid)
             {
+                foreach (var item in model.Items)
+                {
+                    item.Image = await SaveFile(item.UploadImage);
+                }
+
                 var widgetInstance = new WidgetInstance
                 {
                     Name = model.Name,
@@ -66,9 +79,21 @@ public IActionResult Post(IFormCollection formCollection)
             return new BadRequestObjectResult(ModelState);
         }
         [HttpPut("{id}")]
-        public IActionResult Put(long id, IFormCollection formCollection)
+        public async Task<IActionResult> Put(long id, IFormCollection formCollection)
         {
             var model = ToSpaceBarWidgetFormModel(formCollection);
+
+            foreach (var item in model.Items)
+            {
+                if (item.UploadImage != null)
+                {
+                    if (!string.IsNullOrWhiteSpace(item.Image))
+                    {
+                        await _mediaService.DeleteMediaAsync(item.Image);
+                    }
+                    item.Image = await SaveFile(item.UploadImage);
+                }
+            }
             if (ModelState.IsValid)
             {
                 var widgetInstance = _widgetInstanceRepository.Query().FirstOrDefault(x => x.Id == id);
@@ -106,9 +131,18 @@ private SpaceBarWidgetForm ToSpaceBarWidgetFormModel(IFormCollection formCollect
                 item.Title = formCollection[$"items[{i}][title]"];
                 item.Description = formCollection[$"items[{i}][description]"];
                 item.IconHtml = formCollection[$"items[{i}][iconHtml]"];
+                item.Image = formCollection[$"items[{i}][image]"];
+                item.UploadImage = formCollection.Files[$"items[{i}][uploadImage]"];
                 model.Items.Add(item);
             }
             return model;
         }
+        private async Task<string> SaveFile(IFormFile file)
+        {
+            var originalFileName = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Value.Trim('"');
+            var fileName = $"{Guid.NewGuid()}{Path.GetExtension(originalFileName)}";
+            await _mediaService.SaveMediaAsync(file.OpenReadStream(), fileName, file.ContentType);
+            return fileName;
+        }
     }
 }

src/Modules/SimplCommerce.Module.Cms/ViewModels/SpaceBarWidgetSetting.cs

@@ -1,4 +1,6 @@
-using System;
+using Microsoft.AspNetCore.Http;
+using Newtonsoft.Json;
+using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Threading.Tasks;
@@ -10,5 +12,11 @@ public class SpaceBarWidgetSetting
         public string IconHtml { get; set; }
         public string Title { get; set; }
         public string Description { get; set; }
+        public string Image { get; set; }
+
+        public string ImageUrl { get; set; }
+
+        [JsonIgnore]
+        public IFormFile UploadImage { get; set; }
     }
 }

src/Modules/SimplCommerce.Module.Cms/Views/Components/SpaceBarWidget.cshtml

@@ -2,14 +2,30 @@
 <div align="center" class="row">
     @foreach (var item in Model.Items)
     {
-        <div class="col-md-4 col-sm-6 col-xs-12">
-            <i class='@item.IconHtml space-bar-widget-icon' aria-hidden='true'></i>
-            <div class="portfolio-overlay">
-                <h4>@item.Title</h4>
-                <p>
-                    @item.Description
-                </p>
+        @if (!(string.IsNullOrEmpty(item.IconHtml)))
+        {
+            <div class="col-md-4 col-sm-6 col-xs-12">
+                <i class='@item.IconHtml space-bar-widget-icon' aria-hidden='true'></i>
+                <div class="portfolio-overlay">
+                    <h4>@item.Title</h4>
+                    <p>
+                        @item.Description
+                    </p>
+                </div>
             </div>
-        </div>
+        }
+        else
+        {
+            <div class="col-md-4 col-sm-6 col-xs-12">
+                <i aria-hidden='true'><img src="/user-content/@item.Image" alt="" style="width: 150px; height: 150px;" class="img-responsive" /></i>
+                <div class="portfolio-overlay">
+                    <h4>@item.Title</h4>
+                    <p>
+                        @item.Description
+                    </p>
+                </div>
+            </div>
+        }
     }
 </div>
+

src/Modules/SimplCommerce.Module.Cms/wwwroot/admin/spacebar-widget/spacebar-widget-form.html

@@ -55,7 +55,7 @@ <h2 ng-if="vm.isEditMode">{{::vm.translate.get('Edit SpaceBar Widget')}}</h2>
             <div class="form-group">
                 <label class="col-sm-2 control-label">{{::vm.translate.get('Items')}}</label>
                 <div class="col-sm-10">
-                    <div class="form-group row" ng-repeat="item in vm.widgetInstance.items">
+                    <div class="form-group row tabbable-panel-line" ng-repeat="item in vm.widgetInstance.items">
                         <div class="col-md-11">
                             <div class="form-group">
                                 <label class="col-sm-2 control-label">{{::vm.translate.get('Icon:')}}</label>
@@ -75,6 +75,14 @@ <h2 ng-if="vm.isEditMode">{{::vm.translate.get('Edit SpaceBar Widget')}}</h2>
                                     <input ng-model="item.description" class="form-control" />
                                 </div>
                             </div>
+                            <div class="form-group">
+                                <label class="col-sm-2 control-label">{{::vm.translate.get('Image')}}</label>
+                                <div class="col-sm-10">
+                                    <input class="form-control" type="file" ngf-select ng-model="item.uploadImage" name="images" ngf-accept="'image/*'">
+                                    <img ngf-src="item.uploadImage" ngf-resize="{width: 100, height: 100, quality: 0.9}">
+                                    <img ng-show="!item.uploadImage && item.imageUrl" ng-src="{{item.imageUrl}}" style="width: 320px; height: 100px" />
+                                </div>
+                            </div>
                         </div>
                         <div class="col-md-1 text-right">
                             <button ng-click="vm.removeItem(item)" type="button" class="btn btn-default btn-xs">

src/SimplCommerce.WebHost/wwwroot/themes/SampleTheme/site.css

@@ -9,3 +9,7 @@
 .main-nav .dropdown-menu .active > a, .main-nav .dropdown-menu li > a:hover, .main-nav .dropdown-menu li.dropdown-submenu:hover > a {
     background-color:coral;
 }
+.tabbable-panel-line {
+    border: 1px solid #eee;
+    padding: 10px;
+}