Folders tree compact view

config/routes.php

@@ -101,6 +101,11 @@
         ['controller' => 'Tree', 'action' => 'get'],
         ['_name' => 'tree:get']
     );
+    $routes->connect(
+        '/tree/loadAll',
+        ['controller' => 'Tree', 'action' => 'loadAll'],
+        ['_name' => 'tree:load:all']
+    );
     $routes->connect(
         '/tree/node/{id}',
         ['controller' => 'Tree', 'action' => 'node'],
@@ -122,6 +127,11 @@
         ['controller' => 'Tree', 'action' => 'slug'],
         ['_name' => 'tree:slug']
     );
+    $routes->connect(
+        '/tree/{id}/children',
+        ['controller' => 'Tree', 'action' => 'children'],
+        ['_name' => 'tree:children', 'pass' => ['id']]
+    );
 
     // Admin.
     $routes->prefix('admin', ['_namePrefix' => 'admin:'], function (RouteBuilder $routes) {

locales/default.pot

@@ -451,6 +451,9 @@ msgstr ""
 msgid "Less"
 msgstr ""
 
+msgid "Limit"
+msgstr ""
+
 msgid "List"
 msgstr ""
 
@@ -585,6 +588,9 @@ msgstr ""
 msgid "Number of created objects"
 msgstr ""
 
+msgid "Number of folders"
+msgstr ""
+
 msgid "Number of login errors"
 msgstr ""
 
@@ -876,6 +882,9 @@ msgstr ""
 msgid "Temporary folder missing"
 msgstr ""
 
+msgid "The number of folders is too high to be displayed in tree-compact view"
+msgstr ""
+
 msgid "There were errors creating the thumbnail(s)"
 msgstr ""
 
@@ -927,6 +936,9 @@ msgstr ""
 msgid "Trashd"
 msgstr ""
 
+msgid "Tree compact"
+msgstr ""
+
 msgid "Tree view"
 msgstr ""
 
@@ -1017,6 +1029,9 @@ msgstr ""
 msgid "You are not authorized to access this resource"
 msgstr ""
 
+msgid "You cannot see folders in tree-compact view"
+msgstr ""
+
 msgid "You do not have the required permissions to view this page."
 msgstr ""
 
@@ -1550,6 +1565,30 @@ msgstr ""
 msgid "View"
 msgstr ""
 
+msgid "New content"
+msgstr ""
+
+msgid "New folder"
+msgstr ""
+
+msgid "Open in new tab"
+msgstr ""
+
+msgid "Undo"
+msgstr ""
+
+msgid "Choose object type"
+msgstr ""
+
+msgid "Object type"
+msgstr ""
+
+msgid "Parent folder"
+msgstr ""
+
+msgid "/ (root)"
+msgstr ""
+
 msgid "Add new tag"
 msgstr ""
 
@@ -1919,9 +1958,6 @@ msgstr ""
 msgid "Invalid date range"
 msgstr ""
 
-msgid "Undo"
-msgstr ""
-
 msgid "Copied!"
 msgstr ""
 

locales/en_US/default.po

@@ -454,6 +454,9 @@ msgstr ""
 msgid "Less"
 msgstr ""
 
+msgid "Limit"
+msgstr ""
+
 msgid "List"
 msgstr ""
 
@@ -588,6 +591,9 @@ msgstr ""
 msgid "Number of created objects"
 msgstr ""
 
+msgid "Number of folders"
+msgstr ""
+
 msgid "Number of login errors"
 msgstr ""
 
@@ -879,6 +885,9 @@ msgstr ""
 msgid "Temporary folder missing"
 msgstr ""
 
+msgid "The number of folders is too high to be displayed in tree-compact view"
+msgstr ""
+
 msgid "There were errors creating the thumbnail(s)"
 msgstr ""
 
@@ -930,6 +939,9 @@ msgstr ""
 msgid "Trashd"
 msgstr "Trashed"
 
+msgid "Tree compact"
+msgstr ""
+
 msgid "Tree view"
 msgstr ""
 
@@ -1020,6 +1032,9 @@ msgstr ""
 msgid "You are not authorized to access this resource"
 msgstr ""
 
+msgid "You cannot see folders in tree-compact view"
+msgstr ""
+
 msgid "You do not have the required permissions to view this page."
 msgstr ""
 
@@ -1553,6 +1568,30 @@ msgstr ""
 msgid "View"
 msgstr ""
 
+msgid "New content"
+msgstr ""
+
+msgid "New folder"
+msgstr ""
+
+msgid "Open in new tab"
+msgstr ""
+
+msgid "Undo"
+msgstr ""
+
+msgid "Choose object type"
+msgstr ""
+
+msgid "Object type"
+msgstr ""
+
+msgid "Parent folder"
+msgstr ""
+
+msgid "/ (root)"
+msgstr ""
+
 msgid "Add new tag"
 msgstr ""
 
@@ -1922,9 +1961,6 @@ msgstr ""
 msgid "Invalid date range"
 msgstr ""
 
-msgid "Undo"
-msgstr ""
-
 msgid "Copied!"
 msgstr ""
 

locales/it_IT/default.po

@@ -457,6 +457,9 @@ msgstr "Tipi di sinistra"
 msgid "Less"
 msgstr "Meno"
 
+msgid "Limit"
+msgstr "Limite"
+
 msgid "List"
 msgstr "Lista"
 
@@ -593,6 +596,9 @@ msgstr "Non trovato"
 msgid "Number of created objects"
 msgstr "Numero di oggetti creati"
 
+msgid "Number of folders"
+msgstr "Numero di cartelle"
+
 msgid "Number of login errors"
 msgstr "Numero di errori di accesso"
 
@@ -887,6 +893,9 @@ msgstr "Tag"
 msgid "Temporary folder missing"
 msgstr "Cartella temporanea mancante"
 
+msgid "The number of folders is too high to be displayed in tree-compact view"
+msgstr "Il numero di cartelle è troppo elevato per essere visualizzato nella vista compatta ad albero."
+
 msgid "There were errors creating the thumbnail(s)"
 msgstr "È avvenuto un errore nella creazione delle miniature"
 
@@ -938,6 +947,9 @@ msgstr "Cestino"
 msgid "Trashd"
 msgstr "Cancellato"
 
+msgid "Tree compact"
+msgstr "Albero compatto"
+
 msgid "Tree view"
 msgstr "Vista ad albero"
 
@@ -1028,6 +1040,9 @@ msgstr "Non sei autorizzato ad accedere a quest'area."
 msgid "You are not authorized to access this resource"
 msgstr "Non sei autorizzato ad accedere a questa risorsa"
 
+msgid "You cannot see folders in tree-compact view"
+msgstr "Non puoi vedere le cartelle nella vista compatta ad albero."
+
 msgid "You do not have the required permissions to view this page."
 msgstr "Non hai i permessi necessari per visualizzare questa pagina."
 
@@ -1572,6 +1587,30 @@ msgstr "pagina"
 msgid "View"
 msgstr "Vedi"
 
+msgid "New content"
+msgstr "Nuovo contenuto"
+
+msgid "New folder"
+msgstr "Nuova cartella"
+
+msgid "Open in new tab"
+msgstr "Apri in una nuova scheda"
+
+msgid "Undo"
+msgstr "Annulla"
+
+msgid "Choose object type"
+msgstr "Scegli il tipo di oggetto"
+
+msgid "Object type"
+msgstr "Tipo di oggetto"
+
+msgid "Parent folder"
+msgstr "Cartella padre"
+
+msgid "/ (root)"
+msgstr "/ (radice)"
+
 msgid "Add new tag"
 msgstr "Aggiungi un nuovo tag"
 
@@ -1947,9 +1986,6 @@ msgstr "Tutti i giorni"
 msgid "Invalid date range"
 msgstr "Intervallo date non valido"
 
-msgid "Undo"
-msgstr "Annulla"
-
 msgid "Copied!"
 msgstr "Copiato!"
 

resources/js/app/app.js

@@ -49,6 +49,7 @@
         DateRangesList: () => import(/* webpackChunkName: "date-ranges-list" */'app/components/date-ranges-list/date-ranges-list'),
         TreeView: () => import(/* webpackChunkName: "tree-view" */'app/components/tree-view/tree-view'),
         TreeSlug: () => import(/* webpackChunkName: "tree-slug" */'app/components/tree-slug/tree-slug'),
+        TreeCompact: () => import(/* webpackChunkName: "tree-compact" */'app/components/tree-compact/tree-compact'),
         IndexCell: () => import(/* webpackChunkName: "index-cell" */'app/components/index-cell/index-cell'),
         ModulesIndex: () => import(/* webpackChunkName: "modules-index" */'app/pages/modules/index'),
         ModulesView: () => import(/* webpackChunkName: "modules-view" */'app/pages/modules/view'),
@@ -646,6 +647,6 @@
 Vue.component('ObjectCaptions', _vueInstance.$options.components.ObjectCaptions);
 Vue.component('ObjectInfo', _vueInstance.$options.components.ObjectInfo);
 Vue.component('RelatedObjectsFilter', _vueInstance.$options.components.RelatedObjectsFilter);
 Vue.component('Thumbnail', _vueInstance.$options.components.Thumbnail);
 Vue.component('RibbonItem', _vueInstance.$options.components.RibbonItem);
 Vue.component('UploadedObject', _vueInstance.$options.components.UploadedObject);

resources/js/app/components/folder-picker/folder-picker.js

@@ -63,7 +63,7 @@ export default {
 
     async created() {
         if (this.initialFolder) {
-            const response = await fetch(`${API_URL}api/folders/${this.initialFolder}`);
+            const response = await fetch(`${API_URL}tree/${this.initialFolder}/children`);
             const json = await response.json();
             const data = json.data;
             const folder = { id: data.id, label: data.attributes.title };

resources/js/app/components/module/module-properties.vue

@@ -75,7 +75,7 @@ export default {
     props: {
         module: {
             type: Object,
-            required: true,
+            default: () => ({}),
         },
         objectType: {
             type: String,
@@ -150,7 +150,7 @@ export default {
         this.$nextTick(() => {
             this.originalVal = JSON.stringify(this.module);
             this.fields.forEach((field) => {
-                this.map[field] = this.module[field] || '';
+                this.map[field] = this.module?.[field] || '';
             });
         });
     },

resources/js/app/components/object-info/object-info.vue

@@ -17,6 +17,14 @@ import { t } from 'ttag';
 export default {
     name: 'ObjectInfo',
     props: {
+        borderColor: {
+            type: String,
+            default: 'black',
+        },
+        color: {
+            type: String,
+            default: 'white',
+        },
         objectData: {
             type: Object,
             required: true
@@ -29,6 +37,10 @@ export default {
             labelsMap: new Map(),
             msgShowObjectInfo: t`Show object info`,
             reloadedData: this.objectData || {},
+            styles: {
+                borderColor: this.borderColor,
+                color: this.color,
+            },
             values: {},
         };
     },
@@ -55,7 +67,7 @@ export default {
             }).join(' ');
         },
         fillData() {
-            const source = BEDITA?.indexLists?.[this.reloadedData?.type] || {};
+            const source = BEDITA?.indexLists?.[this.reloadedData?.type] || [];
             this.fields = source || ['title', 'description'];
             this.fields = this.fields?.filter((value, index, array) => {
                 return array.indexOf(value) === index;