Skip to content

Commit

Permalink
make use of useFolerLink in ResourceTable
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlexAndBear
AlexAndBear committed Oct 19, 2023
1 parent c372ebc commit 527ec1e
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 102 deletions.
123 changes: 34 additions & 89 deletions packages/web-pkg/src/components/FilesList/ResourceTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,10 +66,10 @@
:is-icon-displayed="!$slots['image']"
:is-extension-displayed="areFileExtensionsShown"
:is-resource-clickable="isResourceClickable(item.id)"
:folder-link="folderLink(item)"
:parent-folder-link="parentFolderLink(item)"
:folder-link="getFolderLink(item)"
:parent-folder-link="getParentFolderLink(item)"
:parent-folder-link-icon-additional-attributes="
parentFolderLinkIconAdditionalAttributes(item)
getParentFolderLinkIconAdditionalAttributes(item)
"
:class="{ 'resource-table-resource-cut': isResourceCut(item) }"
@click="emitFileClick(item)"
Expand Down Expand Up @@ -211,17 +211,9 @@
<script lang="ts">
import { defineComponent, PropType, computed, unref, ref, ComputedRef } from 'vue'
import { mapGetters, mapActions, mapState } from 'vuex'
import { dirname } from 'path'
import { useWindowSize } from '@vueuse/core'
import { Resource } from '@ownclouders/web-client'
import {
extractDomSelector,
extractParentFolderName,
isProjectSpaceResource,
isShareRoot,
isShareSpaceResource,
SpaceResource
} from '@ownclouders/web-client/src/helpers'
import { extractDomSelector, SpaceResource } from '@ownclouders/web-client/src/helpers'
import { ShareTypes } from '@ownclouders/web-client/src/helpers/share'
import {
Expand All @@ -233,7 +225,8 @@ import {
useUserContext,
ViewModeConstants,
useConfigurationManager,
useGetMatchingSpace
useGetMatchingSpace,
useFolderLink
} from '../../composables'
import { EVENT_TROW_MOUNTED, EVENT_FILE_DROPPED, ImageDimension } from '../../constants'
import { eventBus } from '../../services'
Expand All @@ -250,7 +243,7 @@ import { useResourceRouteResolver } from '../../composables/filesList/useResourc
import { ClipboardActions } from '../../helpers/clipboardActions'
import { determineSortFields } from '../../helpers/ui/resourceTable'
import { useFileActionsRename } from '../../composables/actions'
import { createLocationShares, createLocationCommon, createLocationSpaces } from '../../router'
import { createLocationCommon } from '../../router'
import get from 'lodash-es/get'
// ODS component import is necessary here for CERN to overwrite OcTable
Expand Down Expand Up @@ -444,6 +437,12 @@ export default defineComponent({
setup(props, context) {
const store = useStore()
const configurationManager = useConfigurationManager()
const {
getFolderLink,
getParentFolderLink,
getParentFolderName,
getParentFolderLinkIconAdditionalAttributes
} = useFolderLink()
const { width } = useWindowSize()
const hasTags = computed(
Expand Down Expand Up @@ -486,7 +485,11 @@ export default defineComponent({
targetRouteCallback: computed(() => props.targetRouteCallback)
},
context
)
),
getFolderLink,
getParentFolderLink,
getParentFolderName,
getParentFolderLinkIconAdditionalAttributes
}
},
data() {
Expand Down Expand Up @@ -769,47 +772,6 @@ export default defineComponent({
}
eventBus.publish(SideBarEventTopics.openWithPanel, panelToOpen)
},
folderLink(file: Resource) {
return this.createFolderLink({
path: file.path,
fileId: file.fileId,
resource: file
})
},
parentFolderLink(file: Resource) {
const space = this.getMatchingSpace(file)
const parentFolderAccessible = this.isResourceAccessible({
space,
path: dirname(file.path)
})
if ((file.shareId && file.path === '/') || !parentFolderAccessible) {
return createLocationShares('files-shares-with-me')
}
if (isProjectSpaceResource(file)) {
return createLocationSpaces('files-spaces-projects')
}
return this.createFolderLink({
path: dirname(file.path),
...(file.parentFolderId && { fileId: file.parentFolderId }),
resource: file
})
},
parentFolderLinkIconAdditionalAttributes(file) {
// Identify if resource is project space or is part of a project space and the resource is located in its root
if (
isProjectSpaceResource(file) ||
(isProjectSpaceResource(this.getInternalSpace(file.storageId) || ({} as Resource)) &&
file.path.split('/').length === 2)
) {
return {
name: 'layout-grid',
'fill-type': 'fill'
}
}
return {}
},
fileDragged(file) {
this.addSelectedResource(file)
},
Expand Down Expand Up @@ -978,39 +940,6 @@ export default defineComponent({
resourceType,
ownerName: resource.owner[0].displayName
})
},
getParentFolderName(resource: Resource) {
const space = this.getMatchingSpace(resource)
const parentFolderAccessible = this.isResourceAccessible({
space,
path: dirname(resource.path)
})
if (isShareRoot(resource) || !parentFolderAccessible) {
return this.$gettext('Shared with me')
}
const parentFolder = extractParentFolderName(resource)
if (parentFolder) {
return parentFolder
}
if (isShareSpaceResource(space)) {
return space.name
}
if (this.hasProjectSpaces) {
if (isProjectSpaceResource(resource)) {
return this.$gettext('Spaces')
}
if (space?.driveType === 'project') {
return space.name
}
}
if (!this.hasShareJail) {
return this.$gettext('All files and folders')
}
return this.$gettext('Personal')
}
}
})
Expand All @@ -1019,10 +948,12 @@ export default defineComponent({
.oc-table.condensed > tbody > tr {
height: 0 !important;
}
.resource-table {
&-resource-cut {
opacity: 0.6;
}
&-resource-wrapper {
display: flex;
align-items: center;
Expand All @@ -1037,21 +968,26 @@ export default defineComponent({
}
}
}
&-tag {
max-width: 80px;
}
&-tag-more {
cursor: pointer;
border: 0 !important;
vertical-align: text-bottom;
}
&-edit-name {
display: inline-flex;
margin-left: var(--oc-space-xsmall);
svg {
fill: var(--oc-color-text-muted);
}
}
&-people {
position: absolute;
right: var(--oc-space-xsmall);
Expand Down Expand Up @@ -1266,15 +1202,18 @@ export default defineComponent({
display: none;
}
}
.oc-resource-icon-status-badge,
.oc-resource-thumbnail-status-badge {
.oc-icon {
margin-top: -2px;
margin-left: -1.5px;
svg {
fill: var(--oc-color-background-default) !important;
}
}
.oc-spinner {
margin-left: -2px;
margin-top: -2px;
Expand All @@ -1288,26 +1227,32 @@ export default defineComponent({
bottom: 2px !important;
}
}
// on table row hover change the status badge background color
.oc-tbody-tr:hover .oc-resource-icon-status-badge {
background: var(--oc-color-background-hover) !important;
.oc-icon {
svg {
fill: var(--oc-color-background-hover) !important;
}
}
.oc-spinner {
color: var(--oc-color-background-hover) !important;
}
}
// on table row highlight change the status badge background color
.oc-table-highlighted .oc-resource-icon-status-badge {
background: var(--oc-color-background-highlight) !important;
.oc-icon {
svg {
fill: var(--oc-color-background-highlight) !important;
}
}
.oc-spinner {
color: var(--oc-color-background-highlight) !important;
}
Expand Down
7 changes: 5 additions & 2 deletions packages/web-pkg/src/composables/filesList/useResourceRouteResolver.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { unref, Ref } from 'vue'
import {unref, Ref} from 'vue'

import { ConfigurationManager } from '../../configuration'
import { useGetMatchingSpace } from '../spaces'
Expand All @@ -14,7 +14,10 @@ type ResourceRouteResolverOptions = {
space?: Ref<SpaceResource>
}

export const useResourceRouteResolver = (options: ResourceRouteResolverOptions, context) => {
export const useResourceRouteResolver = (
options: ResourceRouteResolverOptions,
context?: {emit: Function}
) => {
const configurationManager = options.configurationManager || useConfigurationManager()
const targetRouteCallback = options.targetRouteCallback
const { getInternalSpace, getMatchingSpace } = useGetMatchingSpace(options)
Expand Down
69 changes: 58 additions & 11 deletions packages/web-pkg/src/composables/folderLink/useFolderLink.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,35 +7,80 @@ import {
} from '@ownclouders/web-client/src/helpers'
import { useGettext } from 'vue3-gettext'
import { unref } from 'vue'
import { useCapabilityShareJailEnabled } from '../capability'
import { useCapabilityProjectSpacesEnabled, useCapabilityShareJailEnabled } from '../capability'
import { useGetMatchingSpace } from '../spaces'
import { dirname } from 'path'
import { useResourceRouteResolver } from '../filesList'
import { createLocationShares, createLocationSpaces } from '../../router'
import { useConfigurationManager } from '../configuration'

export const useFolderLink = () => {
const { $gettext } = useGettext()
const hasShareJail = useCapabilityShareJailEnabled()
const { getInternalSpace, getMatchingSpace } = useGetMatchingSpace()
const hasProjectSpaces = useCapabilityProjectSpacesEnabled()
const { getInternalSpace, getMatchingSpace, isResourceAccessible } = useGetMatchingSpace()
const configurationManager = useConfigurationManager()
const { createFolderLink } = useResourceRouteResolver({
configurationManager
})

const getFolderLink = (resource: Resource) => {
return createFolderLink({
path: resource.path,
fileId: resource.fileId,
resource
})
}

const getParentFolderLink = (resource: Resource) => {
const space = getMatchingSpace(resource)
const parentFolderAccessible = isResourceAccessible({
space,
path: dirname(resource.path)
})
if ((resource.shareId && resource.path === '/') || !parentFolderAccessible) {
return createLocationShares('files-shares-with-me')
}
if (isProjectSpaceResource(resource)) {
return createLocationSpaces('files-spaces-projects')
}

return createFolderLink({
path: dirname(resource.path),
...(resource.parentFolderId && { fileId: resource.parentFolderId }),
resource
})
}

const getParentFolderName = (resource: Resource) => {
if (isShareRoot(resource)) {
const space = getMatchingSpace(resource)
const parentFolderAccessible = isResourceAccessible({
space,
path: dirname(resource.path)
})
if (isShareRoot(resource) || !parentFolderAccessible) {
return $gettext('Shared with me')
}

const parentFolder = extractParentFolderName(resource)
if (parentFolder) {
return parentFolder
}

if (!unref(hasShareJail)) {
return $gettext('All files and folders')
if (isShareSpaceResource(space)) {
return space.name
}

if (isProjectSpaceResource(resource)) {
return $gettext('Spaces')
if (unref(hasProjectSpaces)) {
if (isProjectSpaceResource(resource)) {
return $gettext('Spaces')
}
if (space?.driveType === 'project') {
return space.name
}
}

const matchingSpace = unref(getMatchingSpace(resource))
if (isProjectSpaceResource(matchingSpace) || isShareSpaceResource(matchingSpace)) {
return matchingSpace.name
if (!unref(hasShareJail)) {
return $gettext('All files and folders')
}

return $gettext('Personal')
Expand All @@ -58,6 +103,8 @@ export const useFolderLink = () => {
}

return {
getFolderLink,
getParentFolderLink,
getParentFolderName,
getParentFolderLinkIconAdditionalAttributes
}
Expand Down

0 comments on commit 527ec1e

Please sign in to comment.