Create a sidebar of my app from Files

Hi everyone ! :slight_smile:

I would like to create a sidebar from files for my app.

I see the code of sharerenamer and activity :

I created :

A SidebarTab.vue template

<template>
	<div>
		<p>
			coucou
		</p>
	</div>
</template>

<script>

export default {
	name: 'SidebarTab',
	components: {
	},
	data() {
		return {
			loading: false,
			token: null,
			fileInfo: {},
			shares: [],
		}
	},
}
</script>

<style scoped>
#tab-sharerenamer {
	height: 100%;
	padding: 0;
}
</style>

The sidebar.js file

import Vue from 'vue'
import { translate, translatePlural } from 'nextcloud-l10n'

import SidebarTab from './SidebarTab'

Vue.prototype.t = translate
Vue.prototype.n = translatePlural

const View = Vue.extend(SidebarTab)
let tabInstance = null
console.error('Ceci est un test depuis main.js')
const workspaceTab = new OCA.Files.Sidebar.Tab({
	id: 'workspace',
	name: t('workspace', 'Workspace'),
	icon: 'icon-rename',

	async mount(el, fileInfo, context) {
		if (tabInstance) {
			tabInstance.$destroy()
		}
		tabInstance = new View({
			// Better integration with vue parent component
			parent: context,
		})
		// Only mount after we have all the info we need
		await tabInstance.update(fileInfo)
		tabInstance.$mount(el)
	},
	update(fileInfo) {
		tabInstance.update(fileInfo)
	},
	destroy() {
		tabInstance.$destroy()
		tabInstance = null
	},
})

window.addEventListener('DOMContentLoaded', function() {
	if (OCA.Files && OCA.Files.Sidebar) {
		OCA.Files.Sidebar.registerTab(workspaceTab)
	} else {
		console.error('Error with OCA.Files and/or OCA.Files.Sidebar')
	}
})

A LoadSidebarScripts.php listener

<?php

namespace OCA\Workspace\Listener;

use OCP\Util;
use OCP\EventDispatcher\Event;
use OCA\Workspace\AppInfo\Application;
use OCP\EventDispatcher\IEventListener;
use OCA\Files\Event\LoadSidebar;

class LoadSidebarScripts implements IEventListener {
    public function handle(Event $event) :void {
        if (!($event instanceof LoadSidebar)) {
            return;
        }

        Util::addStyle(Application::APP_ID, 'workspace-style');
        Util::addScript(Application::APP_ID, 'workspace-sidebar');
    }
}

And I called the LoadSideBarScripts.php from Application.php

<?php
/**
 * @copyright 2021 Arawa <TODO>
 *
 * @author 2021 Cyrille Bollu <cyrille@bollu.be>
 * @license GNU AGPL version 3 or any later version
 */

namespace OCA\Workspace\AppInfo;

use OCA\Workspace\Listener\LoadSidebarScripts;
use OCA\Workspace\Middleware\IsGeneralManagerMiddleware;
use OCA\Workspace\Middleware\WorkspaceAccessControlMiddleware;
use OCA\Workspace\Middleware\IsSpaceAdminMiddleware;
use OCA\Workspace\Service\UserService;
use OCP\AppFramework\App;
use OCP\AppFramework\Bootstrap\IRegistrationContext;
use OCP\AppFramework\Utility\IControllerMethodReflector;
use OCP\IRequest;
use OCP\IURLGenerator;
use OCA\Files\Event\LoadSidebar;

class Application extends App {

        public const APP_ID = 'workspace';
	    public const GROUP_WKSUSER = 'WorkspacesManagers';	// Group that holds all workspace users (members managed by the application)
        public const GENERAL_MANAGER = "GeneralManager";	// Group that holds the application administrators
	    // TODO Remove the '_01' suffix 
        public const ESPACE_MANAGER_01 = "GE-";
        public const ESPACE_USERS_01 = "U-";
        public const GID_SPACE = "SPACE-";


        public function __construct(array $urlParams=[] ) {
                parent::__construct(self::APP_ID, $urlParams);

                // code
        }

        public function register(IRegistrationContext $context): void {
            $context->registerEventListener(LoadSidebar::class,LoadSidebarScripts::class);
        }
}

And it doesn’t work !
I get this error message (see below my screenshot)

I searched on this error and there is this subject which is solved : "/apps/files" blocked due to MIME type [Solved]

However, I changed the rights on my project folders and files. And it didn’t work again :confused:

Note : I am working with Docker.

My docker-compose.yml :

version: '3'

services:
  nextcloud-db-23:
    image: mariadb
    restart: always
    command: --transaction-isolation=READ-COMMITTED --binlog-format=ROW
    volumes:
      - ./db:/var/lib/mysql
    environment:
      - MYSQL_ROOT_PASSWORD=password
      - MYSQL_PASSWORD=password
      - MYSQL_DATABASE=nextcloud
      - MYSQL_USER=nextcloud

  nextcloud-web-23:
    image: nextcloud:23
    restart: always
    ports:
      - 8223:80
    links:
      - nextcloud-db-23
    volumes:
      - ./server:/var/www/html/
    environment:
      - MYSQL_PASSWORD=password
      - MYSQL_DATABASE=nextcloud
      - MYSQL_USER=nextcloud
      - MYSQL_HOST=nextcloud-db-23

Do you have an idea how to solve this problem ? :slight_smile:

The error indicates that the file in apps/workspace/js/tab-main.js could not be loaded. Are you sure that the output javascript file from your vue code exists?