Skip to content

Commit

Permalink
feat(systemtags): add systemtag manage keyboard shortcut
Browse files Browse the repository at this point in the history
Signed-off-by: skjnldsv <skjnldsv@protonmail.com>
  • Loading branch information
skjnldsv committed Dec 17, 2024
1 parent 4f65e9b commit ed83171
Show file tree
Hide file tree
Showing 13 changed files with 161 additions and 43 deletions.
1 change: 0 additions & 1 deletion apps/files/src/store/active.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import { getNavigation } from '@nextcloud/files'
import { subscribe } from '@nextcloud/event-bus'

import logger from '../logger.ts'
import type { set } from 'lodash'

export const useActiveStore = function(...args) {
const store = defineStore('active', {
Expand Down
4 changes: 4 additions & 0 deletions apps/files/src/store/userconfig.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,17 @@ export const useUserConfigStore = function(...args) {
actions: {
/**
* Update the user config local store
* @param key
* @param value
*/
onUpdate(key: string, value: boolean) {
Vue.set(this.userConfig, key, value)
},

/**
* Update the user config local store AND on server side
* @param key
* @param value
*/
async update(key: string, value: boolean) {
await axios.put(generateUrl('/apps/files/api/v1/config/' + key), {
Expand Down
6 changes: 3 additions & 3 deletions apps/files/src/views/FilesList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -222,16 +222,16 @@ export default defineComponent({
},

setup() {
const { currentView } = useNavigation()
const { directory, fileId } = useRouteParameters()
const fileListWidth = useFileListWidth()
const filesStore = useFilesStore()
const filtersStore = useFiltersStore()
const pathsStore = usePathsStore()
const selectionStore = useSelectionStore()
const uploaderStore = useUploaderStore()
const userConfigStore = useUserConfigStore()
const viewConfigStore = useViewConfigStore()
const { currentView } = useNavigation()
const fileListWidth = useFileListWidth()
const { directory, fileId } = useRouteParameters()

const enableGridView = (loadState('core', 'config', [])['enable_non-accessible_features'] ?? true)
const forbiddenCharacters = loadState<string[]>('files', 'forbiddenCharacters', [])
Expand Down
82 changes: 60 additions & 22 deletions apps/files/src/views/Settings.vue
Original file line number Diff line number Diff line change
Expand Up @@ -90,31 +90,41 @@
<h3>{{ t('files', 'Actions') }}</h3>
<dl>
<div>
<dt class="shortcut-key"><kbd>a</kbd></dt>
<dt class="shortcut-key">
<kbd>a</kbd>
</dt>
<dd class="shortcut-description">
{{ t('files', 'Open the actions menu for a file') }}
</dd>
</div>
<div>
<dt class="shortcut-key"><kbd>F2</kbd></dt>
<dt class="shortcut-key">
<kbd>F2</kbd>
</dt>
<dd class="shortcut-description">
{{ t('files', 'Rename a file') }}
</dd>
</div>
<div>
<dt class="shortcut-key"><kbd>Del</kbd></dt>
<dt class="shortcut-key">
<kbd>Del</kbd>
</dt>
<dd class="shortcut-description">
{{ t('files', 'Delete a file') }}
</dd>
</div>
<div>
<dt class="shortcut-key"><kbd>s</kbd></dt>
<dt class="shortcut-key">
<kbd>s</kbd>
</dt>
<dd class="shortcut-description">
{{ t('files', 'Favorite or remove a file from favorites') }}
</dd>
</div>
<div>
<dt class="shortcut-key"><kbd>t</kbd></dt>
<div v-if="isSystemtagsEnabled">
<dt class="shortcut-key">
<kbd>t</kbd>
</dt>
<dd class="shortcut-description">
{{ t('files', 'Manage tags for a file') }}
</dd>
Expand All @@ -124,25 +134,33 @@
<h3>{{ t('files', 'Selection') }}</h3>
<dl>
<div>
<dt class="shortcut-key"><kbd>Ctrl</kbd> + <kbd>A</kbd></dt>
<dt class="shortcut-key">
<kbd>Ctrl</kbd> + <kbd>A</kbd>
</dt>
<dd class="shortcut-description">
{{ t('files', 'Select all files') }}
</dd>
</div>
<div>
<dt class="shortcut-key"><kbd>ESC</kbd></dt>
<dt class="shortcut-key">
<kbd>ESC</kbd>
</dt>
<dd class="shortcut-description">
{{ t('files', 'Deselect all files') }}
</dd>
</div>
<div>
<dt class="shortcut-key"><kbd>Ctrl</kbd> + <kbd>Space</kbd></dt>
<dt class="shortcut-key">
<kbd>Ctrl</kbd> + <kbd>Space</kbd>
</dt>
<dd class="shortcut-description">
{{ t('files', 'Select or deselect a file') }}
</dd>
</div>
<div>
<dt class="shortcut-key"><kbd>Ctrl</kbd> + <kbd>Shift</kbd> <span>+ <kbd>Space</kbd></span></dt>
<dt class="shortcut-key">
<kbd>Ctrl</kbd> + <kbd>Shift</kbd> <span>+ <kbd>Space</kbd></span>
</dt>
<dd class="shortcut-description">
{{ t('files', 'Select a range of files') }}
</dd>
Expand All @@ -152,31 +170,41 @@
<h3>{{ t('files', 'Navigation') }}</h3>
<dl>
<div>
<dt class="shortcut-key"><kbd>↑</kbd></dt>
<dt class="shortcut-key">
<kbd>Alt</kbd> + <kbd>↑</kbd>
</dt>
<dd class="shortcut-description">
{{ t('files', 'Navigate to the file above') }}
{{ t('files', 'Navigate to the parent folder') }}
</dd>
</div>
<div>
<dt class="shortcut-key"><kbd>Alt</kbd> + <kbd>↑</kbd></dt>
<dt class="shortcut-key">
<kbd>↑</kbd>
</dt>
<dd class="shortcut-description">
{{ t('files', 'Navigate to the parent folder') }}
{{ t('files', 'Navigate to the file above') }}
</dd>
</div>
<div>
<dt class="shortcut-key"><kbd>↓</kbd></dt>
<dt class="shortcut-key">
<kbd>↓</kbd>
</dt>
<dd class="shortcut-description">
{{ t('files', 'Navigate to the file below') }}
</dd>
</div>
<div>
<dt class="shortcut-key"><kbd>←</kbd></dt>
<dt class="shortcut-key">
<kbd>←</kbd>
</dt>
<dd class="shortcut-description">
{{ t('files', 'Navigate to the file on the left (in grid mode)') }}
</dd>
</div>
<div>
<dt class="shortcut-key"><kbd>→</kbd></dt>
<dt class="shortcut-key">
<kbd>→</kbd>
</dt>
<dd class="shortcut-description">
{{ t('files', 'Navigate to the file on the right (in grid mode)') }}
</dd>
Expand All @@ -186,19 +214,25 @@
<h3>{{ t('files', 'View') }}</h3>
<dl>
<div>
<dt class="shortcut-key"><kbd>V</kbd></dt>
<dt class="shortcut-key">
<kbd>V</kbd>
</dt>
<dd class="shortcut-description">
{{ t('files', 'Toggle the grid view') }}
</dd>
</div>
<div>
<dt class="shortcut-key"><kbd>D</kbd></dt>
<dt class="shortcut-key">
<kbd>D</kbd>
</dt>
<dd class="shortcut-description">
{{ t('files', 'Open the sidebar for a file') }}
</dd>
</div>
<div>
<dt class="shortcut-key"><kbd>?</kbd></dt>
<dt class="shortcut-key">
<kbd>?</kbd>
</dt>
<dd class="shortcut-description">
{{ t('files', 'Show those shortcuts') }}
</dd>
Expand All @@ -209,20 +243,22 @@
</template>

<script>
import { getCapabilities } from '@nextcloud/capabilities'
import Clipboard from 'vue-material-design-icons/ContentCopy.vue'
import NcAppSettingsDialog from '@nextcloud/vue/dist/Components/NcAppSettingsDialog.js'
import NcAppSettingsSection from '@nextcloud/vue/dist/Components/NcAppSettingsSection.js'
import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
import Clipboard from 'vue-material-design-icons/ContentCopy.vue'
import NcInputField from '@nextcloud/vue/dist/Components/NcInputField.js'
import Setting from '../components/Setting.vue'

import { generateRemoteUrl, generateUrl } from '@nextcloud/router'
import { getCurrentUser } from '@nextcloud/auth'
import { loadState } from '@nextcloud/initial-state'
import { showError, showSuccess } from '@nextcloud/dialogs'
import { t } from '@nextcloud/l10n'
import { useHotKey } from '@nextcloud/vue/dist/Composables/useHotKey.js'

import { useUserConfigStore } from '../store/userconfig.ts'
import Setting from '../components/Setting.vue'

export default {
name: 'Settings',
Expand All @@ -244,7 +280,9 @@ export default {

setup() {
const userConfigStore = useUserConfigStore()
const isSystemtagsEnabled = getCapabilities()?.systemtags?.enabled === true
return {
isSystemtagsEnabled,
userConfigStore,
t,
}
Expand Down
2 changes: 1 addition & 1 deletion apps/systemtags/src/components/SystemTagPicker.vue
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ import TagIcon from 'vue-material-design-icons/Tag.vue'
import { createTag, fetchTag, fetchTags, getTagObjects, setTagObjects, updateTag } from '../services/api'
import { getNodeSystemTags, setNodeSystemTags } from '../utils'
import { elementColor, invertTextColor, isDarkModeEnabled } from '../utils/colorUtils'
import logger from '../services/logger'
import logger from '../logger.ts'

const debounceUpdateTag = debounce(updateTag, 500)
const mainBackgroundColor = getComputedStyle(document.body)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import '../css/fileEntryInlineSystemTags.scss'
import { elementColor, isDarkModeEnabled } from '../utils/colorUtils'
import { fetchTags } from '../services/api'
import { getNodeSystemTags } from '../utils'
import logger from '../services/logger'
import logger from '../logger.ts'

// Init tag cache
const cache: TagWithId[] = []
Expand Down
8 changes: 7 additions & 1 deletion apps/systemtags/src/init.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,20 @@
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
import { registerDavProperty, registerFileAction } from '@nextcloud/files'
import { registerHotkeys } from './services/HotKeysService'
import { registerSystemTagsView } from './files_views/systemtagsView'

import { action as bulkSystemTagsAction } from './files_actions/bulkSystemTagsAction'
import { action as inlineSystemTagsAction } from './files_actions/inlineSystemTagsAction'
import { action as openInFilesAction } from './files_actions/openInFilesAction'
import { registerSystemTagsView } from './files_views/systemtagsView'

registerDavProperty('nc:system-tags')
registerFileAction(bulkSystemTagsAction)
registerFileAction(inlineSystemTagsAction)
registerFileAction(openInFilesAction)

registerSystemTagsView()

document.addEventListener('DOMContentLoaded', () => {
registerHotkeys()
})
2 changes: 1 addition & 1 deletion apps/systemtags/src/logger.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

import { getLoggerBuilder } from '@nextcloud/logger'

export const logger = getLoggerBuilder()
export default getLoggerBuilder()
.setApp('systemtags')
.detectUser()
.build()
56 changes: 56 additions & 0 deletions apps/systemtags/src/services/HotKeysService.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
/**
* SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
import { describe, it, vi, expect, beforeEach, beforeAll } from 'vitest'
import { File, Permission, View } from '@nextcloud/files'

import { getPinia } from '../../../files/src/store/index.ts'
import { useActiveStore } from '../../../files/src/store/active.ts'

import { action as bulkSystemTagsAction } from '../files_actions/bulkSystemTagsAction.ts'
import { registerHotkeys } from './HotKeysService.ts'

let file: File
const view = {
id: 'files',
name: 'Files',
} as View

vi.mock('../files_actions/bulkSystemTagsAction.ts', { spy: true })

describe('HotKeysService testing', () => {
const activeStore = useActiveStore(getPinia())

beforeAll(() => {
registerHotkeys()
})

beforeEach(() => {
// Make sure the file is reset before each test
file = new File({
id: 1,
source: 'https://cloud.domain.com/remote.php/dav/files/admin/foobar.txt',
owner: 'admin',
mime: 'text/plain',
permissions: Permission.ALL,
})

// Setting the view first as it reset the active node
activeStore.onChangedView(view)
activeStore.setActiveNode(file)
})

it('Pressing t should open the tag management dialog', () => {
window.dispatchEvent(new KeyboardEvent('keydown', { key: 't', code: 'KeyT' }))

// Modifier keys should not trigger the action
window.dispatchEvent(new KeyboardEvent('keydown', { key: 't', code: 'KeyT', ctrlKey: true }))
window.dispatchEvent(new KeyboardEvent('keydown', { key: 't', code: 'KeyT', altKey: true }))
window.dispatchEvent(new KeyboardEvent('keydown', { key: 't', code: 'KeyT', shiftKey: true }))
window.dispatchEvent(new KeyboardEvent('keydown', { key: 't', code: 'KeyT', metaKey: true }))

expect(bulkSystemTagsAction.enabled).toHaveReturnedWith(true)
expect(bulkSystemTagsAction.exec).toHaveBeenCalledOnce()
})
})
24 changes: 24 additions & 0 deletions apps/systemtags/src/services/HotKeysService.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/**
* SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
import { useHotKey } from '@nextcloud/vue/dist/Composables/useHotKey.js'

import { action as manageTagAction } from '../files_actions/bulkSystemTagsAction.ts'
import { executeAction } from '../../../files/src/utils/actionUtils.ts'
import logger from '../logger.ts'

/**
* This register the hotkeys for the Files app.
* As much as possible, we try to have all the hotkeys in one place.
* Please make sure to add tests for the hotkeys after adding a new one.
*/
export const registerHotkeys = function() {
// t opens the tag management dialog
useHotKey('t', () => executeAction(manageTagAction), {
stop: true,
prevent: true,
})

logger.debug('Hotkeys registered')
}
2 changes: 1 addition & 1 deletion apps/systemtags/src/services/api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { t } from '@nextcloud/l10n'

import { davClient } from './davClient.js'
import { formatTag, parseIdFromLocation, parseTags } from '../utils'
import { logger } from '../logger.js'
import logger from '../logger.ts'
import { emit } from '@nextcloud/event-bus'

export const fetchTagsPayload = `<?xml version="1.0"?>
Expand Down
5 changes: 3 additions & 2 deletions apps/systemtags/src/services/files.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,11 @@ import type { FileStat, ResponseDataDetailed } from 'webdav'
import type { ServerTagWithId, Tag, TagWithId } from '../types.js'

import { t } from '@nextcloud/l10n'
import { davClient } from './davClient.js'

import { createTag, fetchTagsPayload } from './api.js'
import { davClient } from './davClient.js'
import { formatTag, parseTags } from '../utils.js'
import { logger } from '../logger.js'
import logger from '../logger.ts'

export const fetchTagsForFile = async (fileId: number): Promise<TagWithId[]> => {
const path = '/systemtags-relations/files/' + fileId
Expand Down
Loading

0 comments on commit ed83171

Please sign in to comment.