first draft of media picker works!

zero.Core/Api/UserApi.cs

@@ -68,7 +68,7 @@ namespace zero.Core.Api
     /// <inheritdoc />
     public async Task<EntityResult<User>> Save(User model)
     {
-      return await Save(model); //, new UserValidator<User>());
+      return await SaveModel(model); //, new UserValidator<User>());
     }
 
 

zero.Core/Entities/ListQuery.cs

@@ -22,7 +22,7 @@ namespace zero.Core.Entities
 
     public ListQueryOrderType OrderType { get; set; } = ListQueryOrderType.String;
 
-    public bool OrderIsDescending { get; set; } = false;
+    public bool OrderIsDescending { get; set; } = true;
 
     public int Page { get; set; } = 1;
 

zero.Web.UI/App/components/overlays/overlay-holder.vue

@@ -50,7 +50,6 @@
     z-index: 5;
     justify-content: center;
     align-items: center;
-    will-change: opacity;
 
     & + .app-overlay-outer .app-overlay
     {
@@ -67,7 +66,6 @@
     bottom: 0;
     background: var(--color-overlay-shade);
     z-index: 2;
-    will-change: opacity;
     opacity: 1;
   }
 
@@ -83,7 +81,6 @@
    // max-width: 460px;
     text-align: center;
     position: relative;
-    will-change: transform, opacity;
     -webkit-backface-visibility: hidden;
     z-index: 3;
     color: var(--color-fg);

zero.Web.UI/App/components/pickers/mediaPicker/mediapicker.vue

@@ -110,6 +110,10 @@
 
 
     computed: {
+      multiple()
+      {
+        return this.configuration.limit > 1;
+      },
       canAdd()
       {
         return !this.disabled && this.configuration.limit - this.previews.length > 0;
@@ -230,8 +234,22 @@
 
         return Overlay.open(options).then(value =>
         {
-          //this.onChange(value);
-          //this.$refs.input.value = value;
+          let newValue = this.value;
+
+          if (this.multiple)
+          {
+            if (!newValue)
+            {
+              newValue = [];
+            }
+            newValue.push(value.id);
+          }
+          else
+          {
+            newValue = value.id;
+          }
+
+          this.onChange(newValue);
         });
       }
       

zero.Web.UI/App/components/pickers/mediaPicker/overlay.vue

@@ -11,12 +11,13 @@
     </nav>
 
     <div class="ui-mediapicker-overlay-items">
-      <button v-if="folderId" type="button" class="ui-mediapicker-overlay-item is-upload" @click="upload">
+      <div v-if="folderId" class="ui-mediapicker-overlay-item is-upload">
+        <input class="ui-mediapicker-overlay-upload" type="file" multiple @change="onUpload" />
         <span class="-preview"><i class="fth-plus"></i></span>
         <p class="ui-mediapicker-overlay-item-text">
           Upload media
         </p>
-      </button>
+      </div>
 
       <button type="button" v-for="item in items" class="ui-mediapicker-overlay-item" @click="select(item)">
         <img class="-preview" v-if="item.type === 'image'" :src="item.source" />
@@ -40,6 +41,7 @@
   import MediaApi from 'zero/resources/media.js'
   import Overlay from 'zero/services/overlay.js'
   import AddFolderOverlay from 'zero/pages/media/folder'
+  import UploadStatusOverlay from 'zero/pages/media/upload-status'
   import { debounce as _debounce, filter as _filter } from 'underscore'
 
   export default {
@@ -177,19 +179,36 @@
           component: AddFolderOverlay,
           model: { parentId: this.folderId },
           theme: 'dark'
-        }).then(item =>
+        }).then(() => { }, () =>
         {
           setTimeout(() =>
           {
             this.selectFolder(item.model.id);
           }, 1000);
-        }, () => { });
+        });
       },
 
       // uploads a new media item within the current parent
-      upload()
+      onUpload(event)
       {
-        console.info('upload');
+        let options = {
+          title: 'Upload status',
+          closeLabel: '@ui.close',
+          component: UploadStatusOverlay,
+          isCreate: true,
+          model: event.target.files,
+          folderId: this.folderId,
+          theme: 'dark',
+          width: 520
+        };
+
+        return Overlay.open(options).then(value =>
+        {
+          setTimeout(() =>
+          {
+            this.getItems();
+          }, 500);
+        }, () => { });
       },
 
       // select an item, this can either be a folder or a media item
@@ -199,6 +218,10 @@
         {
           return this.selectFolder(item.id);
         }
+        else
+        {
+          this.config.confirm(item, this.config);
+        }
       }
     }
   }
@@ -278,6 +301,11 @@
       color: var(--color-primary-fg);
     }*/
 
+    &.is-upload
+    {
+      position: relative;
+    }
+
     .-extension
     {
       font-size: 12px;
@@ -299,4 +327,17 @@
     text-overflow: ellipsis;
     margin: 0;
   }
+
+  input[type="file"].ui-mediapicker-overlay-upload
+  {
+    position: absolute;
+    height: 100%;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 1;
+    bottom: 0;
+    opacity: 0.001;
+    cursor: pointer;
+  }
 </style>

zero.Web.UI/App/navigation.vue

@@ -31,8 +31,8 @@
       <ui-dropdown align="left bottom">
         <template v-slot:button>
           <button type="button" class="app-nav-account-button">
-            <img class="-image" v-if="user.avatar" :src="user.avatar.source" :alt="user.name" />
-            <span class="-image" v-if="!user.avatar"><i class="fth-user"></i></span>
+            <img class="-image" v-if="userAvatar" :src="userAvatar" :alt="user.name" />
+            <span class="-image" v-if="!userAvatar"><i class="fth-user"></i></span>
             <p class="-text"><strong>{{user.name}}</strong><br>{{user.email}}</p>
             <i class="-arrow fth-chevron-down"></i>
           </button>
@@ -48,6 +48,7 @@
 <script>
   import { map as _map, find as _find } from 'underscore';
   import AuthApi from 'zero/services/auth.js'
+  import MediaApi from 'zero/resources/media.js'
 
   export default {
     name: 'app-navigation',
@@ -57,6 +58,7 @@
       applicationItems: [],
       sections: zero.sections,
       user: null,
+      userAvatar: null,
       userActions: []
     }),
 
@@ -71,10 +73,11 @@
 
     created()
     {
-      this.user = AuthApi.user;
+      this.buildUser(AuthApi.user);
+
       AuthApi.$on('user', user =>
       {
-        this.user = user;
+        this.buildUser(user);
       });
 
       this.userActions.push({
@@ -164,6 +167,23 @@
 
     methods: {
 
+      buildUser(user)
+      {
+        this.user = user;
+
+        if (user && user.avatarId)
+        {
+          MediaApi.getById(user.avatarId).then(res =>
+          {
+            this.userAvatar = res.entity.source;
+          });
+        }
+        else
+        {
+          this.userAvatar = null;
+        }
+      },
+
       hasChildren(section)
       {
         return section.children && section.children.length > 0;

zero.Web/Controllers/MediaController.cs

@@ -35,7 +35,7 @@ namespace zero.Web.Controllers
     /// </summary>  
     public async Task<IActionResult> GetById([FromQuery] string id)
     {
-      return await As<Media, MediaEditModel>(await Api.GetById(id));
+      return JsonEdit(await Api.GetById(id));
     }