#274 allow to create folder

packages/web/src/appobj/AppObjectList.svelte

@@ -1,5 +1,5 @@
 <script>
-  import _ from 'lodash';
+  import _, { sortBy } from 'lodash';
   import { asyncFilter } from '../utility/common';
   import AppObjectGroup from './AppObjectGroup.svelte';
   import { plusExpandIcon } from '../icons/expandIcons';
@@ -18,10 +18,12 @@
   export let passProps;
   export let getIsExpanded = null;
   export let setIsExpanded = null;
+  export let sortGroups = false;
 
   export let groupIconFunc = plusExpandIcon;
   export let groupFunc = undefined;
   export let onDropOnGroup = undefined;
+  export let emptyGroupNames = [];
 
   $: filtered = !groupFunc
     ? list.filter(data => {
@@ -64,11 +66,22 @@
       )
     : null;
 
-  $: groups = groupFunc ? _.groupBy(listGrouped, 'group') : null;
+  function extendGroups(base, emptyList) {
+    const res = {
+      ...base,
+    };
+    for (const item of emptyList) {
+      if (res[item]) continue;
+      res[item] = [];
+    }
+    return res;
+  }
+
+  $: groups = groupFunc ? extendGroups(_.groupBy(listGrouped, 'group'), emptyGroupNames) : null;
 </script>
 
 {#if groupFunc}
-  {#each _.keys(groups) as group}
+  {#each sortGroups ? _.sortBy(_.keys(groups)) : _.keys(groups) as group}
     <AppObjectGroup
       {group}
       {module}