diff --git a/apps/files/appinfo/routes.php b/apps/files/appinfo/routes.php index 6c94490b085..29859d78b0d 100644 --- a/apps/files/appinfo/routes.php +++ b/apps/files/appinfo/routes.php @@ -45,13 +45,34 @@ $application->registerRoutes( $this, [ 'routes' => [ + [ + 'name' => 'view#index', + 'url' => '/', + 'verb' => 'GET', + ], + [ + 'name' => 'view#index', + 'url' => '/{view}', + 'verb' => 'GET', + 'postfix' => 'view', + ], + [ + 'name' => 'view#index', + 'url' => '/{view}/{fileid}', + 'verb' => 'GET', + 'postfix' => 'fileid', + ], [ 'name' => 'View#showFile', 'url' => '/f/{fileid}', 'verb' => 'GET', 'root' => '', ], - + [ + 'name' => 'ajax#getStorageStats', + 'url' => '/ajax/getstoragestats', + 'verb' => 'GET', + ], [ 'name' => 'API#getThumbnail', 'url' => '/api/v1/thumbnail/{x}/{y}/{file}', @@ -94,16 +115,6 @@ $application->registerRoutes( 'url' => '/api/v1/showgridview', 'verb' => 'GET' ], - [ - 'name' => 'view#index', - 'url' => '/', - 'verb' => 'GET', - ], - [ - 'name' => 'ajax#getStorageStats', - 'url' => '/ajax/getstoragestats', - 'verb' => 'GET', - ], [ 'name' => 'API#toggleShowFolder', 'url' => '/api/v1/toggleShowFolder/{key}', diff --git a/apps/files/js/app.js b/apps/files/js/app.js index 8053f89268c..c88ea42a487 100644 --- a/apps/files/js/app.js +++ b/apps/files/js/app.js @@ -27,9 +27,9 @@ */ OCA.Files.App = { /** - * Navigation control + * Navigation instance * - * @member {OCA.Files.Navigation} + * @member {OCP.Files.Navigation} */ navigation: null, @@ -51,7 +51,7 @@ * Initializes the files app */ initialize: function() { - this.navigation = new OCA.Files.Navigation($('#app-navigation')); + this.navigation = OCP.Files.Navigation; this.$showHiddenFiles = $('input#showhiddenfilesToggle'); var showHidden = $('#showHiddenFiles').val() === "1"; this.$showHiddenFiles.prop('checked', showHidden); @@ -159,7 +159,6 @@ * Destroy the app */ destroy: function() { - this.navigation = null; this.fileList.destroy(); this.fileList = null; this.files = null; @@ -216,7 +215,8 @@ * @return app container */ getCurrentAppContainer: function() { - return this.navigation.getActiveContainer(); + var viewId = this.getActiveView(); + return $('#app-content-' + viewId); }, /** @@ -224,7 +224,7 @@ * @param viewId view id */ setActiveView: function(viewId, options) { - this.navigation.setActiveItem(viewId, options); + window._nc_event_bus.emit('files:view:changed', { id: viewId }) }, /** @@ -232,7 +232,8 @@ * @return view id */ getActiveView: function() { - return this.navigation.getActiveItem(); + return this.navigation.active + && this.navigation.active.id; }, /** @@ -254,6 +255,7 @@ $('#app-content').delegate('>div', 'afterChangeDirectory', _.bind(this._onAfterDirectoryChanged, this)); $('#app-content').delegate('>div', 'changeViewerMode', _.bind(this._onChangeViewerMode, this)); + window._nc_event_bus.subscribe('files:view:changed', _.bind(this._onNavigationChanged, this)) $('#app-navigation').on('itemChanged', _.bind(this._onNavigationChanged, this)); this.$showHiddenFiles.on('change', _.bind(this._onShowHiddenFilesChange, this)); this.$cropImagePreviews.on('change', _.bind(this._onCropImagePreviewsChange, this)); @@ -308,16 +310,24 @@ /** * Event handler for when the current navigation item has changed */ - _onNavigationChanged: function(e) { + _onNavigationChanged: function(view) { var params; - if (e && e.itemId) { - params = { - view: typeof e.view === 'string' && e.view !== '' ? e.view : e.itemId, - dir: e.dir ? e.dir : '/' - }; + if (view && (view.itemId || view.id)) { + if (view.id) { + params = { + view: view.id, + dir: '/', + } + } else { + // Legacy handling + params = { + view: typeof view.view === 'string' && view.view !== '' ? view.view : view.itemId, + dir: view.dir ? view.dir : '/' + } + } this._changeUrl(params.view, params.dir); OCA.Files.Sidebar.close(); - this.navigation.getActiveContainer().trigger(new $.Event('urlChanged', params)); + this.getCurrentAppContainer().trigger(new $.Event('urlChanged', params)); window._nc_event_bus.emit('files:navigation:changed') } }, @@ -327,7 +337,7 @@ */ _onDirectoryChanged: function(e) { if (e.dir && !e.changedThroughUrl) { - this._changeUrl(this.navigation.getActiveItem(), e.dir, e.fileId); + this._changeUrl(this.getActiveView(), e.dir, e.fileId); } }, @@ -336,7 +346,7 @@ */ _onAfterDirectoryChanged: function(e) { if (e.dir && e.fileId) { - this._changeUrl(this.navigation.getActiveItem(), e.dir, e.fileId); + this._changeUrl(this.getActiveView(), e.dir, e.fileId); } }, @@ -361,15 +371,15 @@ dir: '/', view: 'files' }, params); - var lastId = this.navigation.getActiveItem(); - if (!this.navigation.itemExists(params.view)) { + var lastId = this.navigation.active; + if (!this.navigation.views.find(view => view.id === params.view)) { params.view = 'files'; } - this.navigation.setActiveItem(params.view, {silent: true}); - if (lastId !== this.navigation.getActiveItem()) { - this.navigation.getActiveContainer().trigger(new $.Event('show')); + this.setActiveView(params.view, {silent: true}); + if (lastId !== this.getActiveView()) { + this.getCurrentAppContainer().trigger(new $.Event('show')); } - this.navigation.getActiveContainer().trigger(new $.Event('urlChanged', params)); + this.getCurrentAppContainer().trigger(new $.Event('urlChanged', params)); window._nc_event_bus.emit('files:navigation:changed') }, diff --git a/apps/files/js/merged-index.json b/apps/files/js/merged-index.json index 478db35f6fb..01a46958d8b 100644 --- a/apps/files/js/merged-index.json +++ b/apps/files/js/merged-index.json @@ -19,7 +19,6 @@ "jquery.fileupload.js", "keyboardshortcuts.js", "mainfileinfodetailview.js", - "navigation.js", "newfilemenu.js", "operationprogressbar.js", "recentfilelist.js", diff --git a/apps/files/lib/AppInfo/Application.php b/apps/files/lib/AppInfo/Application.php index 2662f2d6e9b..f2104be4df8 100644 --- a/apps/files/lib/AppInfo/Application.php +++ b/apps/files/lib/AppInfo/Application.php @@ -172,7 +172,6 @@ class Application extends App implements IBootstrap { 'script' => 'simplelist.php', 'order' => 5, 'name' => $l10n->t('Favorites'), - 'expandedState' => 'show_Quick_Access' ]; }); } diff --git a/apps/files/lib/Controller/ApiController.php b/apps/files/lib/Controller/ApiController.php index e29e81d6296..a87b4f9490a 100644 --- a/apps/files/lib/Controller/ApiController.php +++ b/apps/files/lib/Controller/ApiController.php @@ -346,18 +346,18 @@ class ApiController extends Controller { * @throws \OCP\PreConditionNotMetException */ public function toggleShowFolder(int $show, string $key): Response { - // ensure the edited key exists - $navItems = \OCA\Files\App::getNavigationManager()->getAll(); - foreach ($navItems as $item) { - // check if data is valid - if (($show === 0 || $show === 1) && isset($item['expandedState']) && $key === $item['expandedState']) { - $this->config->setUserValue($this->userSession->getUser()->getUID(), 'files', $key, (string)$show); - return new Response(); - } + if ($show !== 0 && $show !== 1) { + return new DataResponse([ + 'message' => 'Invalid show value. Only 0 and 1 are allowed.' + ], Http::STATUS_BAD_REQUEST); } - $response = new Response(); - $response->setStatus(Http::STATUS_FORBIDDEN); - return $response; + + $userId = $this->userSession->getUser()->getUID(); + + // Set the new value and return it + // Using a prefix prevents the user from setting arbitrary keys + $this->config->setUserValue($userId, 'files', 'show_' . $key, (string)$show); + return new JSONResponse([$key => $show]); } /** diff --git a/apps/files/lib/Controller/ViewController.php b/apps/files/lib/Controller/ViewController.php index 1da9814d7e8..63863b3e367 100644 --- a/apps/files/lib/Controller/ViewController.php +++ b/apps/files/lib/Controller/ViewController.php @@ -186,13 +186,14 @@ class ViewController extends Controller { * @throws NotFoundException */ public function index($dir = '', $view = '', $fileid = null, $fileNotFound = false, $openfile = null) { - if ($fileid !== null && $dir === '') { - try { - return $this->redirectToFile($fileid); - } catch (NotFoundException $e) { - return new RedirectResponse($this->urlGenerator->linkToRoute('files.view.index', ['fileNotFound' => true])); - } - } + + // if ($fileid !== null && $dir === '') { + // try { + // return $this->redirectToFile($fileid); + // } catch (NotFoundException $e) { + // return new RedirectResponse($this->urlGenerator->linkToRoute('files.view.index', ['fileNotFound' => true])); + // } + // } $nav = new \OCP\Template('files', 'appnavigation', ''); @@ -205,11 +206,11 @@ class ViewController extends Controller { // FIXME: Make non static $storageInfo = $this->getStorageInfo(); - $user = $this->userSession->getUser()->getUID(); + $userId = $this->userSession->getUser()->getUID(); // Get all the user favorites to create a submenu try { - $favElements = $this->activityHelper->getFavoriteFilePaths($this->userSession->getUser()->getUID()); + $favElements = $this->activityHelper->getFavoriteFilePaths($userId); } catch (\RuntimeException $e) { $favElements['folders'] = []; } @@ -234,7 +235,7 @@ class ViewController extends Controller { 'order' => $navBarPositionPosition, 'folderPosition' => $sortingValue, 'name' => basename($favElement), - 'icon' => 'files', + 'icon' => 'folder', 'quickaccesselement' => 'true' ]; @@ -248,11 +249,9 @@ class ViewController extends Controller { $navItems['favorites']['sublist'] = $favoritesSublistArray; $navItems['favorites']['classes'] = $collapseClasses; - // parse every menu and add the expandedState user value + // parse every menu and add the expanded user value foreach ($navItems as $key => $item) { - if (isset($item['expandedState'])) { - $navItems[$key]['defaultExpandedState'] = $this->config->getUserValue($this->userSession->getUser()->getUID(), 'files', $item['expandedState'], '0') === '1'; - } + $navItems[$key]['expanded'] = $this->config->getUserValue($userId, 'files', 'show_' . $item['id'], '0') === '1'; } $nav->assign('navigationItems', $navItems); @@ -267,10 +266,12 @@ class ViewController extends Controller { $nav->assign('quota', $storageInfo['quota']); $nav->assign('usage_relative', $storageInfo['relative']); - $nav->assign('webdav_url', \OCP\Util::linkToRemote('dav/files/' . rawurlencode($user))); + $nav->assign('webdav_url', \OCP\Util::linkToRemote('dav/files/' . rawurlencode($userId))); $contentItems = []; + $this->initialState->provideInitialState('navigation', $navItems); + // render the container content for every navigation item foreach ($navItems as $item) { $content = ''; @@ -314,12 +315,12 @@ class ViewController extends Controller { $params['ownerDisplayName'] = $storageInfo['ownerDisplayName'] ?? ''; $params['isPublic'] = false; $params['allowShareWithLink'] = $this->shareManager->shareApiAllowLinks() ? 'yes' : 'no'; - $params['defaultFileSorting'] = $this->config->getUserValue($user, 'files', 'file_sorting', 'name'); - $params['defaultFileSortingDirection'] = $this->config->getUserValue($user, 'files', 'file_sorting_direction', 'asc'); - $params['showgridview'] = $this->config->getUserValue($user, 'files', 'show_grid', false); - $showHidden = (bool) $this->config->getUserValue($this->userSession->getUser()->getUID(), 'files', 'show_hidden', false); + $params['defaultFileSorting'] = $this->config->getUserValue($userId, 'files', 'file_sorting', 'name'); + $params['defaultFileSortingDirection'] = $this->config->getUserValue($userId, 'files', 'file_sorting_direction', 'asc'); + $params['showgridview'] = $this->config->getUserValue($userId, 'files', 'show_grid', false); + $showHidden = (bool) $this->config->getUserValue($userId, 'files', 'show_hidden', false); $params['showHiddenFiles'] = $showHidden ? 1 : 0; - $cropImagePreviews = (bool) $this->config->getUserValue($this->userSession->getUser()->getUID(), 'files', 'crop_image_previews', true); + $cropImagePreviews = (bool) $this->config->getUserValue($userId, 'files', 'crop_image_previews', true); $params['cropImagePreviews'] = $cropImagePreviews ? 1 : 0; $params['fileNotFound'] = $fileNotFound ? 1 : 0; $params['appNavigation'] = $nav; diff --git a/apps/files/src/legacy/navigationMapper.js b/apps/files/src/legacy/navigationMapper.js new file mode 100644 index 00000000000..a78faf0af52 --- /dev/null +++ b/apps/files/src/legacy/navigationMapper.js @@ -0,0 +1,54 @@ +/** + * @copyright Copyright (c) 2022 John Molakvoæ + * + * @author John Molakvoæ + * + * @license AGPL-3.0-or-later + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ + +import { loadState } from '@nextcloud/initial-state' +import logger from '../logger.js' + +/** + * Fetch and register the legacy files views + */ +export default function() { + const legacyViews = Object.values(loadState('files', 'navigation', {})) + + if (legacyViews.length > 0) { + logger.debug('Legacy files views detected. Processing...', legacyViews) + legacyViews.forEach(view => { + registerLegacyView(view) + if (view.sublist) { + view.sublist.forEach(subview => registerLegacyView({ ...subview, parent: view.id })) + } + }) + } +} + +const registerLegacyView = function({ id, name, order, icon, parent, classes = '', expanded }) { + OCP.Files.Navigation.register({ + id, + name, + iconClass: icon ? `icon-${icon}` : 'nav-icon-' + id, + order, + parent, + legacy: true, + sticky: classes.includes('pinned'), + expanded: expanded === true, + }) +} diff --git a/apps/files/src/logger.js b/apps/files/src/logger.js index 0005ee13cb4..39283bd331d 100644 --- a/apps/files/src/logger.js +++ b/apps/files/src/logger.js @@ -1,8 +1,7 @@ /** - * @copyright 2019 Christoph Wurst + * @copyright Copyright (c) 2022 John Molakvoæ * - * @author Christoph Wurst - * @author Roeland Jago Douma + * @author John Molakvoæ * * @license AGPL-3.0-or-later * @@ -20,20 +19,9 @@ * along with this program. If not, see . * */ - -import { getCurrentUser } from '@nextcloud/auth' import { getLoggerBuilder } from '@nextcloud/logger' -const getLogger = user => { - if (user === null) { - return getLoggerBuilder() - .setApp('files') - .build() - } - return getLoggerBuilder() - .setApp('files') - .setUid(user.uid) - .build() -} - -export default getLogger(getCurrentUser()) +export default getLoggerBuilder() + .setApp('files') + .detectUser() + .build() diff --git a/apps/files/src/main.js b/apps/files/src/main.js index a979822bdc4..948e1b68aca 100644 --- a/apps/files/src/main.js +++ b/apps/files/src/main.js @@ -1,3 +1,31 @@ -import './files-app-settings' -import './templates' -import './legacy/filelistSearch' +import './files-app-settings.js' +import './templates.js' +import './legacy/filelistSearch.js' +import processLegacyFilesViews from './legacy/navigationMapper.js' + +import Vue from 'vue' +import NavigationService from './services/Navigation.ts' +import NavigationView from './views/Navigation.vue' + +import router from './router/router.js' + +// Init Files App Navigation Service +const Navigation = new NavigationService() + +// Assign Navigation Service to the global OCP.Files +window.OCP.Files = window.OCP.Files ?? {} +Object.assign(window.OCP.Files, { Navigation }) + +// Init Navigation View +const View = Vue.extend(NavigationView) +const FilesNavigationRoot = new View({ + name: 'FilesNavigationRoot', + propsData: { + Navigation, + }, + router, +}) +FilesNavigationRoot.$mount('#app-navigation-files') + +// Init legacy files views +processLegacyFilesViews() diff --git a/apps/files/src/router/router.js b/apps/files/src/router/router.js new file mode 100644 index 00000000000..a2d063a9532 --- /dev/null +++ b/apps/files/src/router/router.js @@ -0,0 +1,52 @@ +/** + * @copyright Copyright (c) 2022 John Molakvoæ + * + * @author John Molakvoæ + * + * @license AGPL-3.0-or-later + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ +import Vue from 'vue' +import Router from 'vue-router' +import { generateUrl } from '@nextcloud/router' + +Vue.use(Router) + +export default new Router({ + mode: 'history', + + // if index.php is in the url AND we got this far, then it's working: + // let's keep using index.php in the url + base: generateUrl('/apps/files', ''), + linkActiveClass: 'active', + + routes: [ + { + path: '/', + // Pretending we're using the default view + alias: '/files', + }, + { + path: '/:view/:fileId?', + name: 'filelist', + props: true, + }, + { + path: '/not-found', + name: 'notfound', + }, + ], +}) diff --git a/apps/files/src/services/Navigation.ts b/apps/files/src/services/Navigation.ts new file mode 100644 index 00000000000..e3286c79a88 --- /dev/null +++ b/apps/files/src/services/Navigation.ts @@ -0,0 +1,217 @@ +/** + * @copyright Copyright (c) 2022 John Molakvoæ + * + * @author John Molakvoæ + * + * @license AGPL-3.0-or-later + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ +import type Node from '@nextcloud/files/dist/files/node' +import isSvg from 'is-svg' + +import logger from '../logger' + +export interface Column { + /** Unique column ID */ + id: string + /** Translated column title */ + title: string + /** Property key from Node main or additional attributes. + Will be used if no custom sort function is provided. + Sorting will be done by localCompare */ + property: string + /** Special function used to sort Nodes between them */ + sortFunction?: (nodeA: Node, nodeB: Node) => number; + /** Custom summary of the column to display at the end of the list. + Will not be displayed if nothing is provided */ + summary?: (node: Node[]) => string +} + +export interface Navigation { + /** Unique view ID */ + id: string + /** Translated view name */ + name: string + /** Method return the content of the provided path */ + getFiles: (path: string) => Node[] + /** The view icon as an inline svg */ + icon: string + /** The view order */ + order: number + /** This view column(s). Name and actions are + by default always included */ + columns?: Column[] + /** The empty view element to render your empty content into */ + emptyView?: (div: HTMLDivElement) => void + /** The parent unique ID */ + parent?: string + /** This view is sticky (sent at the bottom) */ + sticky?: boolean + /** This view has children and is expanded or not */ + expanded?: boolean + + /** + * This view is sticky a legacy view. + * Here until all the views are migrated to Vue. + * @deprecated It will be removed in a near future + */ + legacy?: boolean + /** + * An icon class. + * @deprecated It will be removed in a near future + */ + iconClass?: string +} + +export default class { + + private _views: Navigation[] = [] + private _currentView: Navigation | null = null + + constructor() { + logger.debug('Navigation service initialized') + } + + register(view: Navigation) { + try { + isValidNavigation(view) + isUniqueNavigation(view, this._views) + } catch (e) { + if (e instanceof Error) { + logger.error(e.message, { view }) + } + throw e + } + + if (view.legacy) { + logger.warn('Legacy view detected, please migrate to Vue') + } + + if (view.iconClass) { + view.legacy = true + } + + this._views.push(view) + } + + get views(): Navigation[] { + return this._views + } + + setActive(view: Navigation | null) { + this._currentView = view + } + + get active(): Navigation | null { + return this._currentView + } + +} + +/** + * Make sure the given view is unique + * and not already registered. + */ +const isUniqueNavigation = function(view: Navigation, views: Navigation[]): boolean { + if (views.find(search => search.id === view.id)) { + throw new Error(`Navigation id ${view.id} is already registered`) + } + return true +} + +/** + * Typescript cannot validate an interface. + * Please keep in sync with the Navigation interface requirements. + */ +const isValidNavigation = function(view: Navigation): boolean { + if (!view.id || typeof view.id !== 'string') { + throw new Error('Navigation id is required and must be a string') + } + + if (!view.name || typeof view.name !== 'string') { + throw new Error('Navigation name is required and must be a string') + } + + /** + * Legacy handle their content and icon differently + * TODO: remove when support for legacy views is removed + */ + if (!view.legacy) { + if (!view.getFiles || typeof view.getFiles !== 'function') { + throw new Error('Navigation getFiles is required and must be a function') + } + + if (!view.icon || typeof view.icon !== 'string' || !isSvg(view.icon)) { + throw new Error('Navigation icon is required and must be a valid svg string') + } + } + + if (!('order' in view) || typeof view.order !== 'number') { + throw new Error('Navigation order is required and must be a number') + } + + // Optional properties + if (view.columns) { + view.columns.forEach(isValidColumn) + } + + if (view.emptyView && typeof view.emptyView !== 'function') { + throw new Error('Navigation emptyView must be a function') + } + + if (view.parent && typeof view.parent !== 'string') { + throw new Error('Navigation parent must be a string') + } + + if ('sticky' in view && typeof view.sticky !== 'boolean') { + throw new Error('Navigation sticky must be a boolean') + } + + if ('expanded' in view && typeof view.expanded !== 'boolean') { + throw new Error('Navigation expanded must be a boolean') + } + + return true +} + +/** + * Typescript cannot validate an interface. + * Please keep in sync with the Column interface requirements. + */ +const isValidColumn = function(column: Column): boolean { + if (!column.id || typeof column.id !== 'string') { + throw new Error('Column id is required') + } + + if (!column.title || typeof column.title !== 'string') { + throw new Error('Column title is required') + } + + if (!column.property || typeof column.property !== 'string') { + throw new Error('Column property is required') + } + + // Optional properties + if (column.sortFunction && typeof column.sortFunction !== 'function') { + throw new Error('Column sortFunction must be a function') + } + + if (column.summary && typeof column.summary !== 'function') { + throw new Error('Column summary must be a function') + } + + return true +} diff --git a/apps/files/src/views/Navigation.vue b/apps/files/src/views/Navigation.vue new file mode 100644 index 00000000000..50f5e6f5d77 --- /dev/null +++ b/apps/files/src/views/Navigation.vue @@ -0,0 +1,156 @@ + + + + + + diff --git a/apps/files/templates/appnavigation.php b/apps/files/templates/appnavigation.php index 5684c3d0d32..9da3f764a7f 100644 --- a/apps/files/templates/appnavigation.php +++ b/apps/files/templates/appnavigation.php @@ -1,4 +1,5 @@ -