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): void {

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'),
@@ -651,6 +652,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}api/folders/${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,

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: {},
         };
     },

resources/js/app/components/tree-compact/tree-compact.vue

@@ -0,0 +1,170 @@
+<template>
+    <div class="tree-compact">
+        <tree-panel
+            :can-save-map="canSaveMap"
+            :folders="folders || {}"
+            :languages="languages"
+            :obj="{}"
+            :object-type="'folders'"
+            :schema="schema"
+            :show-panel="newFolder"
+            :tree="tree"
+            @update:showPanel="newFolder = $event; newContent = false"
+            @success="loadTree"
+            v-if="newFolder"
+        />
+        <tree-panel
+            :can-save-map="canSaveMap"
+            :folders="folders || {}"
+            :languages="languages"
+            :obj="{}"
+            :object-type="'choose'"
+            :schema="schema"
+            :show-panel="newContent"
+            :tree="tree"
+            @update:showPanel="newContent = $event; newFolder = false"
+            @success="loadTree"
+            v-if="newContent"
+        />
+        <template v-if="canSave()">
+            <div class="buttons">
+                <button
+                    class="button button-outlined"
+                    @click.prevent="newFolder = true"
+                >
+                    <app-icon icon="carbon:folder-add" />
+                    <span class="ml-05">{{ msgNewFolder }}</span>
+                </button>
+                <button
+                    class="button button-outlined"
+                    @click.prevent="newContent = true"
+                >
+                    <app-icon icon="carbon:document-add" />
+                    <span class="ml-05">{{ msgNewContent }}</span>
+                </button>
+                <span class="tag has-background-module-folders">{{ count }} {{ msgFolders }}</span>
+            </div>
+        </template>
+        <div
+            v-for="rootId in Object.keys(tree)"
+            :key="rootId"
+        >
+            <tree-folder
+                :can-save-map="canSaveMap"
+                :folder="folders?.[rootId] || {}"
+                :folders="folders || {}"
+                :languages="languages"
+                :schema="schema"
+                :subfolders="tree[rootId]?.subfolders || {}"
+                :tree="tree"
+                @force-reload="forceReload"
+            />
+        </div>
+    </div>
+</template>
+<script>
+const API_URL = new URL(BEDITA.base).pathname;
+const API_OPTIONS = {
+    method: 'GET',
+    credentials: 'same-origin',
+    headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+        'X-CSRF-Token': BEDITA.csrfToken,
+    },
+};
+import { t } from 'ttag';
+export default {
+    name: 'TreeCompact',
+    components: {
+        TreeFolder: () => import('./tree-folder.vue'),
+        TreePanel: () => import('./tree-panel.vue'),
+    },
+    props: {
+        canSaveMap: {
+            type: Object,
+            required: true
+        },
+        count: {
+            type: Number,
+            default: 0,
+        },
+        languages: {
+            type: Object,
+            default: () => {},
+        },
+        schema: {
+            type: Object,
+            default: () => ({}),
+        },
+    },
+    data() {
+        return {
+            folders: {},
+            loading: false,
+            msgFolders: t`Folders`,
+            msgNewContent: t`New content`,
+            msgNewFolder: t`New folder`,
+            newContent: false,
+            newFolder: false,
+            tree: {},
+        }
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.loadTree();
+        });
+    },
+    methods: {
+        canSave() {
+            return this.canSaveMap?.['folders'] || false;
+        },
+        forceReload() {
+            this.loadTree(true);
+        },
+        async loadTree(noCache) {
+            try {
+                this.loading = true;
+                this.tree = {};
+                const response = await fetch(`${API_URL}tree/loadAll?objectType=folders${noCache ? '&no_cache=true' : ''}`, API_OPTIONS);
+                const json = await response.json();
+                if (json.error) {
+                    throw new Error(json.error);
+                }
+                this.tree = json?.data?.tree || {};
+                this.folders = json?.data?.folders || [];
+            } catch (error) {
+                BEDITA.error(error);
+            } finally {
+                this.loading = false;
+            }
+        },
+    },
+}
+</script>
+<style scoped>
+div.tree-compact {
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+}
+div.tree-compact > div.buttons {
+    margin-left: 0.5rem;
+    max-width: 1000px;
+}
+div.tree-compact > div.buttons {
+    margin-bottom: 0.5rem;
+    display: flex;
+    flex-direction: row;
+    gap: 0.2rem;
+    align-items: center;
+    justify-content: start;
+    border-bottom: dotted 0.1px silver;
+}
+div.tree-compact > div.buttons > button > span {
+    font-size: 0.7rem;
+}
+div.tree-compact span.tag {
+    margin-left: auto;
+}
+</style>