From e417732a981a512ba4aede729d2f2e35614b65ac Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Sun, 19 Apr 2020 18:22:44 +0200
Subject: [PATCH] loading + error states for forms

---
 zero.Web/App/Components/Forms/form.vue       | 41 +++++++++++++++++++-
 zero.Web/Controllers/BackofficeController.cs | 22 +++++++++++
 zero.Web/Controllers/UsersController.cs      |  8 +---
 3 files changed, 64 insertions(+), 7 deletions(-)

diff --git a/zero.Web/App/Components/Forms/form.vue b/zero.Web/App/Components/Forms/form.vue
index ee3dabdc..4e7cac8a 100644
--- a/zero.Web/App/Components/Forms/form.vue
+++ b/zero.Web/App/Components/Forms/form.vue
@@ -1,7 +1,9 @@
 <template>
   <form class="ui-form" @submit.prevent="onSubmit" @change="onChange">
     <slot v-if="loadingState === 'default'" v-bind="slotProps" />
-
+    <div v-if="loadingState == 'loading'" class="ui-form-loading">
+      <i class="ui-form-loading-progress"></i>
+    </div>
     <ui-error-view v-if="loadingState === 'error'" :error="loadingError" />
   </form>
 </template>
@@ -254,4 +256,41 @@
   {
     min-height: 100%;
   }
+
+  .ui-form-loading
+  {
+    display: flex;
+    width: 100%;
+    height: 100vh;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ui-form-loading-progress
+  {   
+    width: 32px;
+    height: 32px;
+    z-index: 2;
+    border-radius: 40px;
+    border: 2px solid var(--color-bg-mid);
+    border-left-color: var(--color-fg);
+    opacity: 1;
+    will-change: transform;
+    animation: rotating .5s linear infinite;
+    transition: opacity .25s ease;
+  }
+
+  @keyframes rotating
+  {
+    from
+    {
+      -webkit-transform: rotate(0);
+      transform: rotate(0)
+    }
+    to
+    {
+      -webkit-transform: rotate(1turn);
+      transform: rotate(1turn)
+    }
+  }
 </style>
\ No newline at end of file
diff --git a/zero.Web/Controllers/BackofficeController.cs b/zero.Web/Controllers/BackofficeController.cs
index e6c9d602..7007354f 100644
--- a/zero.Web/Controllers/BackofficeController.cs
+++ b/zero.Web/Controllers/BackofficeController.cs
@@ -1,6 +1,8 @@
 using Microsoft.AspNetCore.Mvc;
+using System.Threading.Tasks;
 using zero.Core;
 using zero.Core.Identity;
+using zero.Web.Mapper;
 
 namespace zero.Web.Controllers
 {
@@ -9,10 +11,30 @@ namespace zero.Web.Controllers
   {
     protected IZeroConfiguration Configuration { get; set; }
 
+    protected IMapper Mapper { get; set; }
+
+
+    public BackofficeController(IZeroConfiguration config, IMapper mapper)
+    {
+      Configuration = config;
+      Mapper = mapper;
+    }
+
 
     public BackofficeController(IZeroConfiguration config)
     {
       Configuration = config;
     }
+
+
+    protected IActionResult Json<T, TTarget>(T model) where TTarget : class, new()
+    {
+      if (model == null)
+      {
+        return new StatusCodeResult(404);
+      }
+
+      return Json(Mapper.Map<T, TTarget>(model));
+    }
   }
 }
diff --git a/zero.Web/Controllers/UsersController.cs b/zero.Web/Controllers/UsersController.cs
index e99c4aea..7d9968b7 100644
--- a/zero.Web/Controllers/UsersController.cs
+++ b/zero.Web/Controllers/UsersController.cs
@@ -14,12 +14,9 @@ namespace zero.Web.Controllers
   {
     private IUserApi Api { get; set; }
 
-    private IMapper Mapper { get; set; }
-
-    public UsersController(IZeroConfiguration config, IUserApi api, IMapper mapper) : base(config)
+    public UsersController(IZeroConfiguration config, IUserApi api, IMapper mapper) : base(config, mapper)
     {
       Api = api;
-      Mapper = mapper;
     }
 
 
@@ -28,8 +25,7 @@ namespace zero.Web.Controllers
     /// </summary>    
     public async Task<IActionResult> GetById([FromQuery] string id)
     {
-      await Task.Delay(500);
-      return Json(Mapper.Map<User, UserEditModel>(await Api.GetUserById(id)));
+      return Json<User, UserEditModel>(await Api.GetUserById(id));
     }