Implement useFolderLink composable

owncloud · Oct 17, 2023 · a0d3f7a · a0d3f7a
1 parent 5326678
commit a0d3f7a
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 46 deletions.
diff --git a/packages/web-pkg/src/components/AppTopBar.vue b/packages/web-pkg/src/components/AppTopBar.vue
@@ -8,6 +8,11 @@
             id="app-top-bar-resource"
             :is-thumbnail-displayed="false"
             :resource="resource"
+            :parent-folder-name="parentFolderName"
+            :parent-folder-link-icon-additional-attributes="
+              parentFolderLinkIconAdditionalAttributes
+            "
+            :is-path-displayed="true"
           />
         </div>
         <div class="oc-flex main-actions">
@@ -77,6 +82,7 @@ import { Resource } from '@ownclouders/web-client/src'
 import { Action } from '../composables/actions/types'
 import ContextActionMenu from './ContextActions/ContextActionMenu.vue'
 import { useGettext } from 'vue3-gettext'
+import { useFolderLink } from '../composables'
 
 export default defineComponent({
   name: 'AppTopBar',
@@ -98,15 +104,21 @@ export default defineComponent({
     }
   },
   emits: ['close'],
-  setup() {
+  setup(props) {
     const { $gettext } = useGettext()
 
     const contextMenuLabel = computed(() => $gettext('Show context menu'))
     const closeButtonLabel = computed(() => $gettext('Close'))
 
+    const { getParentFolderName, getParentFolderLinkIconAdditionalAttributes } = useFolderLink()
+
     return {
       contextMenuLabel,
-      closeButtonLabel
+      closeButtonLabel,
+      parentFolderName: getParentFolderName(props.resource),
+      parentFolderLinkIconAdditionalAttributes: getParentFolderLinkIconAdditionalAttributes(
+        props.resource
+      )
     }
   }
 })

diff --git a/packages/web-pkg/src/components/Search/ResourcePreview.vue b/packages/web-pkg/src/components/Search/ResourcePreview.vue
@@ -31,7 +31,8 @@ import { dirname } from 'path'
 import {
   useCapabilityShareJailEnabled,
   useGetMatchingSpace,
-  useFileActions
+  useFileActions,
+  useFolderLink
 } from '../../composables'
 import {
   extractParentFolderName,
@@ -63,6 +64,7 @@ export default defineComponent({
   },
   setup(props) {
     const { getInternalSpace, getMatchingSpace } = useGetMatchingSpace()
+    const { getParentFolderName, getParentFolderLinkIconAdditionalAttributes } = useFolderLink()
     const previewData = ref()
 
     const resource = computed((): Resource => {
@@ -86,7 +88,11 @@ export default defineComponent({
       hasShareJail: useCapabilityShareJailEnabled(),
       previewData,
       resource,
-      resourceDisabled
+      resourceDisabled,
+      parentFolderName: getParentFolderName(unref(resource)),
+      parentFolderLinkIconAdditionalAttributes: getParentFolderLinkIconAdditionalAttributes(
+        unref(resource)
+      )
     }
   },
   computed: {
@@ -114,30 +120,6 @@ export default defineComponent({
     matchingSpace() {
       return this.getMatchingSpace(this.resource)
     },
-    parentFolderName() {
-      if (isShareRoot(this.resource)) {
-        return this.$gettext('Shared with me')
-      }
-
-      const parentFolder = extractParentFolderName(this.resource)
-      if (parentFolder) {
-        return parentFolder
-      }
-
-      if (!this.hasShareJail) {
-        return this.$gettext('All files and folders')
-      }
-
-      if (isProjectSpaceResource(this.resource)) {
-        return this.$gettext('Spaces')
-      }
-
-      if (isProjectSpaceResource(this.matchingSpace) || isShareSpaceResource(this.matchingSpace)) {
-        return this.matchingSpace.name
-      }
-
-      return this.$gettext('Personal')
-    },
     displayThumbnails() {
       return (
         !this.configuration?.options?.disablePreviews &&
@@ -155,24 +137,6 @@ export default defineComponent({
         return createLocationSpaces('files-spaces-projects')
       }
       return this.createFolderLink(dirname(this.resource.path), this.resource.parentFolderId)
-    },
-
-    parentFolderLinkIconAdditionalAttributes() {
-      // Identify if resource is project space or is part of a project space and the resource is located in its root
-      if (
-        isProjectSpaceResource(this.resource) ||
-        (isProjectSpaceResource(
-          this.getInternalSpace(this.resource.storageId) || ({} as Resource)
-        ) &&
-          this.resource.path.split('/').length === 2)
-      ) {
-        return {
-          name: 'layout-grid',
-          'fill-type': 'fill'
-        }
-      }
-
-      return {}
     }
   },
   mounted() {

diff --git a/packages/web-pkg/src/composables/folderLink/index.ts b/packages/web-pkg/src/composables/folderLink/index.ts
@@ -0,0 +1 @@
+export * from './useFolderLink'
diff --git a/packages/web-pkg/src/composables/folderLink/useFolderLink.ts b/packages/web-pkg/src/composables/folderLink/useFolderLink.ts
@@ -0,0 +1,65 @@
+import { Resource } from '@ownclouders/web-client'
+import {
+  extractParentFolderName,
+  isProjectSpaceResource,
+  isShareRoot,
+  isShareSpaceResource
+} from '@ownclouders/web-client/src/helpers'
+import { useGettext } from 'vue3-gettext'
+import { unref } from 'vue'
+import { computed } from 'vue/dist/vue'
+import { useCapabilityShareJailEnabled } from '../capability'
+import { useGetMatchingSpace } from '../spaces'
+
+export const useFolderLink = () => {
+  const { $gettext } = useGettext()
+  const hasShareJail = useCapabilityShareJailEnabled()
+  const { getInternalSpace, getMatchingSpace } = useGetMatchingSpace()
+
+  const getParentFolderName = (resource: Resource) => {
+    if (isShareRoot(resource)) {
+      return $gettext('Shared with me')
+    }
+
+    const parentFolder = extractParentFolderName(resource)
+    if (parentFolder) {
+      return parentFolder
+    }
+
+    if (!unref(hasShareJail)) {
+      return $gettext('All files and folders')
+    }
+
+    if (isProjectSpaceResource(resource)) {
+      return $gettext('Spaces')
+    }
+
+    const matchingSpace = unref(getMatchingSpace(resource))
+    if (isProjectSpaceResource(matchingSpace) || isShareSpaceResource(matchingSpace)) {
+      return matchingSpace.name
+    }
+
+    return $gettext('Personal')
+  }
+
+  const getParentFolderLinkIconAdditionalAttributes = (resource: Resource) => {
+    // Identify if resource is project space or is part of a project space and the resource is located in its root
+    if (
+      isProjectSpaceResource(resource) ||
+      (isProjectSpaceResource(getInternalSpace(resource.storageId) || ({} as Resource)) &&
+        resource.path.split('/').length === 2)
+    ) {
+      return {
+        name: 'layout-grid',
+        'fill-type': 'fill'
+      }
+    }
+
+    return {}
+  }
+
+  return {
+    getParentFolderName,
+    getParentFolderLinkIconAdditionalAttributes
+  }
+}
diff --git a/packages/web-pkg/src/composables/index.ts b/packages/web-pkg/src/composables/index.ts
@@ -29,3 +29,4 @@ export * from './spaces'
 export * from './store'
 export * from './upload'
 export * from './viewMode'
+export * from './folderLink'