output children count for media folders

zero.Core/Api/MediaApi.cs

@@ -93,19 +93,29 @@ namespace zero.Core.Api
         .OrderByDescending(x => x.IsFolder)
         .ThenBy(query.OrderBy, query.OrderIsDescending, query.OrderType == ListQueryOrderType.String ? OrderingType.String : OrderingType.Double);
 
-      using (IAsyncDocumentSession session = Raven.OpenAsyncSession())
+      using IAsyncDocumentSession session = Raven.OpenAsyncSession();
+      session.Advanced.MaxNumberOfRequestsPerSession = query.PageSize + 1;
+
+      IRavenQueryable<MediaListItem> dbQuery = session.Query<MediaListItem, Media_ByParent>()
+        .ProjectInto<MediaListItem>()
+        .Scope(Scope);
+
+      if (query.Search.IsNullOrWhiteSpace() || !query.SearchIsGlobal)
       {
-        IRavenQueryable<MediaListItem> dbQuery = session.Query<MediaListItem, Media_ByParent>()
-          .ProjectInto<MediaListItem>()
-          .Scope(Scope);
-
-        if (query.Search.IsNullOrWhiteSpace() || !query.SearchIsGlobal)
-        {
-          dbQuery = dbQuery.WhereIf(x => x.ParentId == query.FolderId, !query.FolderId.IsNullOrEmpty(), x => x.ParentId == null);
-        }
-
-        return await dbQuery.ToQueriedListAsync(query);
+        dbQuery = dbQuery.WhereIf(x => x.ParentId == query.FolderId, !query.FolderId.IsNullOrEmpty(), x => x.ParentId == null);
       }
+
+      ListResult<MediaListItem> result = await dbQuery.ToQueriedListAsync(query);
+
+      foreach (MediaListItem item in result.Items)
+      {
+        if (item.IsFolder)
+        {
+          item.Children = await session.Query<MediaListItem, Media_ByParent>().CountAsync(x => x.ParentId == item.Id);
+        }
+      }
+
+      return result;
     }
 
 

zero.Core/Database/Indexes/Media_ByParent.cs

@@ -18,6 +18,7 @@ namespace zero.Core.Database.Indexes
         IsFolder = true,
         Name = item.Name,
         Image = null,
+        Children = 0,
         Size = 0
       }));
 
@@ -30,6 +31,7 @@ namespace zero.Core.Database.Indexes
         IsFolder = false,
         Name = item.Name,
         Image = item.PreviewSource,
+        Children = 0,
         Size = item.Size
       }));
 

zero.Core/Entities/Media/MediaListItem.cs

@@ -20,6 +20,8 @@ namespace zero.Core.Entities
 
     public long Size { get; set; }
 
+    public int Children { get; set; }
+
     public bool HasTransparency { get; set; }
   }
 }

zero.Web.UI/App/components/datagrid/datagrid.vue

@@ -71,7 +71,10 @@
     components: { UiPagination },
 
     watch: {
-      '$route': 'load',
+      '$route': function (val)
+      {
+        this.load(true);
+      },
       'value.search': function (val)
       {
         this.filter.search = val;
@@ -140,6 +143,12 @@
       // load items based on the current filter
       load(initial)
       {
+        if (initial)
+        {
+          this.filter.page = 1;
+          this.filter.search = null;
+        }
+
         this.configuration.items(this.filter).then(result =>
         {
           this.pages = result.totalPages;

zero.Web.UI/App/components/modules/modules.vue

@@ -167,7 +167,7 @@
   .ui-module-item + .ui-module-item,
   .ui-modules-inner-sortable + .ui-modules-start
   {
-    margin-top: 3px;
+    margin-top: 10px;
   }
 
   .ui-modules-start-button

zero.Web.UI/App/pages/login/login.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-auth">
+  <div class="app-auth theme-dark">
     <i class="fth-home app-auth-font-trigger"></i>
     <span></span>
     <ui-form class="app-auth-inner" v-slot="form" @submit="onSubmit">

zero.Web.UI/App/pages/media/media-item.vue

@@ -6,7 +6,8 @@
     </div>
     <p class="media-item-text">
       <span :title="value.name">{{value.name}}</span>
-      <span class="-minor" v-if="value.size"><br><span v-filesize="value.size"></span></span>
+      <span class="-minor" v-if="!value.isFolder"><br><span v-filesize="value.size"></span></span>
+      <span class="-minor" v-if="value.isFolder"><br><span v-localize="{ key: value.children === 1 ? '@media.child_count_1' : '@media.child_count_x', tokens: { count: value.children }}"></span></span>
     </p>
   </router-link>
 </template>
@@ -75,7 +76,7 @@
   {
     width: 100%;
     height: 100%;
-    object-fit: contain;
+    object-fit: cover;
     position: relative;
     border-radius: var(--radius);
     z-index: 1;
@@ -88,10 +89,12 @@
     text-overflow: ellipsis;
     margin: 0;
     padding-right: 16px;
+    font-weight: bold;
 
     .-minor
     {
-      color: var(--color-fg-dim-two);
+      font-weight: 400;
+      color: var(--color-fg-dim);
     }
   }
 

zero.Web.UI/App/pages/media/media.vue

@@ -297,7 +297,6 @@
   {
     width: 100%;
     height: 100vh;
-    background: var(--color-bg);
     overflow-y: auto;
   }
 

zero.Web.UI/App/pages/settings/settings.vue

@@ -60,7 +60,7 @@
   {
     min-height: 100%;
     position: relative;
-    padding: 58px var(--padding);
+    padding: 45px var(--padding);
     width: 100%;
     max-width: 2000px;
     display: grid;

zero.Web.UI/Sass/Core/_settings.scss

@@ -64,7 +64,7 @@
 
 .theme-dark
 {
-  $color-primary: transparent;
+  $color-primary: #fff;
   $color-shade-base: #252b33;
   $color-bg: #15191f;
 
@@ -107,7 +107,7 @@
 {
   $color-primary: #15191f;
   $color-shade-base: #f4f8fb;
-  $color-bg: #f4f4f6;
+  $color-bg: #f1f1f4;
 
   // accent colors
   --color-primary: #{$color-primary}; // #fdd330; //linear-gradient(75deg, #48da9c, #3eb8ad); //#484c5b; // #292b2c; // #00aea2
@@ -134,7 +134,7 @@
 
   // misc colors
   --color-shadow: rgba(0, 0, 0, 0.07);
-  --color-shadow-short: 0.5px 1px 1.5px 0 rgba(0, 0, 0, 0.05);
+  --color-shadow-short: 0.5px 0.5px 2px 0 rgba(0, 0, 0, 0.06);
   --color-overlay-shade: rgba(0, 0, 0, 0.3);
 
   // lines

zero.Web/Resources/Localization/zero.en-us.json

@@ -505,7 +505,9 @@
     "deleteoverlay": {
       "folder_text": "This will delete the folder and all its descendants including subfolders and files. Are you sure?",
       "folder_success_text": "You have successfully deleted this folder"
-    }
+    },
+    "child_count_1": "{count} item",
+    "child_count_x": "{count} items"
   },
 
   "space": {