feat: generic file sidebar in AppWrapper

packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue

@@ -220,7 +220,6 @@ export default defineComponent({
     }
 
     return {
-      $store: store,
       ability,
       space,
       resource,

packages/web-pkg/src/components/AppTemplates/AppWrapper.vue

@@ -9,8 +9,9 @@
     />
     <loading-screen v-if="loading" />
     <error-screen v-else-if="loadingError" :message="loadingError.message" />
-    <div v-else class="oc-height-1-1">
+    <div v-else class="oc-flex oc-width-1-1 oc-height-1-1">
       <slot v-bind="slotAttrs" />
+      <file-side-bar :open="sideBarOpen" :active-panel="sideBarActivePanel" :space="space" />
     </div>
   </main>
 </template>
@@ -35,6 +36,7 @@ import { onBeforeRouteLeave, useRouter } from 'vue-router'
 import AppTopBar from '../AppTopBar.vue'
 import ErrorScreen from './PartialViews/ErrorScreen.vue'
 import LoadingScreen from './PartialViews/LoadingScreen.vue'
+import { FileSideBar } from '../SideBar'
 import {
   UrlForResourceOptions,
   queryItemAsString,
@@ -43,25 +45,34 @@ import {
   useRoute,
   useRouteParam,
   useRouteQuery,
-  useStore
+  useStore,
+  useSelectedResources,
+  useSideBar
+} from '../../composables'
+import {
+  Action,
+  ActionOptions,
+  ModifierKey,
+  Key,
+  useAppMeta,
+  useGetResourceContext,
+  useKeyboardActions
 } from '../../composables'
-import { Resource } from '@ownclouders/web-client'
-import { DavPermission, DavProperty } from '@ownclouders/web-client/src/webdav/constants'
-import { Action, ActionOptions } from '../../composables/actions/types'
 import {
+  Resource,
+  SpaceResource,
   isPersonalSpaceResource,
   isProjectSpaceResource
 } from '@ownclouders/web-client/src/helpers'
+import { DavPermission, DavProperty } from '@ownclouders/web-client/src/webdav/constants'
 import { HttpError } from '@ownclouders/web-client/src/errors'
-import { ModifierKey, Key, useKeyboardActions } from '../../composables/keyboardActions'
-import { useAppMeta } from '../../composables/appDefaults/useAppMeta'
 import { dirname } from 'path'
-import { useGetResourceContext } from '../../composables'
 
 export default defineComponent({
   name: 'AppWrapper',
   components: {
     AppTopBar,
+    FileSideBar,
     ErrorScreen,
     LoadingScreen
   },
@@ -92,9 +103,11 @@ export default defineComponent({
     const currentRoute = useRoute()
     const clientService = useClientService()
     const { getResourceContext } = useGetResourceContext()
+    const { selectedResources } = useSelectedResources({ store })
 
     const applicationName = ref('')
     const resource: Ref<Resource> = ref()
+    const space: Ref<SpaceResource> = ref()
     const currentETag = ref('')
     const url = ref('')
     const loading = ref(true)
@@ -206,18 +219,21 @@ export default defineComponent({
           yield addMissingDriveAliasAndItem()
         }
 
+        space.value = unref(unref(currentFileContext).space)
         resource.value = yield getFileInfo(currentFileContext, {
           davProperties: [DavProperty.FileId, DavProperty.Permissions, DavProperty.Name]
         })
-
-        const space = unref(unref(currentFileContext).space)
+        // FIXME: setter only writes ids => files need to be loaded into activeFiles array as well
+        // FIXME: currentFolder not null every time... needs some more thought
+        store.commit('Files/LOAD_FILES', { currentFolder: null, files: [unref(resource)] })
+        selectedResources.value = [unref(resource)]
 
         const newExtension = props.importResourceWithExtension(unref(resource))
         if (newExtension) {
           const timestamp = DateTime.local().toFormat('yyyyMMddHHmmss')
           const targetPath = `${unref(resource).name}_${timestamp}.${newExtension}`
           if (
-            !(yield clientService.webdav.copyFiles(space, unref(resource), space, {
+            !(yield clientService.webdav.copyFiles(unref(space), unref(resource), unref(space), {
               path: targetPath
             }))
           ) {
@@ -242,12 +258,11 @@ export default defineComponent({
         }
 
         if (unref(hasProp('url'))) {
-          const tmpUrl = yield getUrlForResource(
-            space,
+          url.value = yield getUrlForResource(
+            unref(space),
             unref(resource),
             props.urlForResourceOptions
           )
-          url.value = tmpUrl
         }
         loading.value = false
       } catch (e) {
@@ -441,13 +456,15 @@ export default defineComponent({
     }))
 
     return {
+      ...useSideBar(),
       isEditor,
       closeApp,
       fileActions,
       loading,
       loadingError,
       pageTitle,
       resource,
+      space,
       slotAttrs
     }
   }

packages/web-pkg/src/components/AppTopBar.vue

@@ -73,18 +73,31 @@
           </oc-button>
         </div>
       </span>
+      <oc-button @click="toggleSideBar">
+        {{ sideBarOpen }}
+        <oc-icon name="side-bar-right" />
+      </oc-button>
     </div>
   </portal>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType, unref } from 'vue'
-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, useGetMatchingSpace } from '../composables'
-import { isPublicSpaceResource, isShareSpaceResource } from '@ownclouders/web-client/src/helpers'
+import {
+  Action,
+  SideBarEventTopics,
+  useEventBus,
+  useFolderLink,
+  useGetMatchingSpace,
+  useSideBar
+} from '../composables'
+import {
+  Resource,
+  isPublicSpaceResource,
+  isShareSpaceResource
+} from '@ownclouders/web-client/src/helpers'
 
 export default defineComponent({
   name: 'AppTopBar',
@@ -108,6 +121,7 @@ export default defineComponent({
   emits: ['close'],
   setup(props) {
     const { $gettext } = useGettext()
+    const eventBus = useEventBus()
     const { getMatchingSpace } = useGetMatchingSpace()
 
     const contextMenuLabel = computed(() => $gettext('Show context menu'))
@@ -135,13 +149,20 @@ export default defineComponent({
       return props.resource ? getParentFolderLinkIconAdditionalAttributes(props.resource) : null
     })
 
+    const toggleSideBar = () => {
+      eventBus.publish(SideBarEventTopics.toggle)
+    }
+    const { sideBarOpen } = useSideBar()
+
     return {
       pathPrefix,
       isPathDisplayed,
       contextMenuLabel,
       closeButtonLabel,
       parentFolderName,
-      parentFolderLinkIconAdditionalAttributes
+      parentFolderLinkIconAdditionalAttributes,
+      sideBarOpen,
+      toggleSideBar
     }
   }
 })

packages/web-pkg/src/composables/appDefaults/index.ts

@@ -3,5 +3,6 @@ export * from './useAppConfig'
 export * from './useAppDefaults'
 export * from './useAppFileHandling'
 export * from './useAppFolderHandling'
+export * from './useAppMeta'
 export * from './useAppNavigation'
 export * from './useDocumentTitle'

packages/web-pkg/src/composables/sideBar/useSideBar.ts

@@ -1,4 +1,4 @@
-import { onBeforeUnmount, ref, Ref, unref } from 'vue'
+import { onBeforeUnmount, readonly, ref, Ref, unref } from 'vue'
 import { EventBus, eventBus as defaultEventBus } from '../../services/eventBus'
 import { SideBarEventTopics } from './eventTopics'
 
@@ -48,7 +48,7 @@ export const useSideBar = (options?: SideBarOptions): SideBarResult => {
   })
 
   return {
-    sideBarOpen,
-    sideBarActivePanel
+    sideBarOpen: readonly(sideBarOpen),
+    sideBarActivePanel: readonly(sideBarActivePanel)
   }
 }

web.d.ts

@@ -3,6 +3,7 @@
 import { OwnCloudSdk } from '@ownclouders/web-client/src/types'
 import { UppyService } from '@ownclouders/web-pkg'
 import { Route, Router } from 'vue-router'
+import { Store } from 'vuex'
 
 // This file must have at least one export or import on top-level
 export {}
@@ -16,11 +17,13 @@ declare module 'vue' {
 
     $router: Router
     $route: Route
+
+    $store: Store<any>
   }
 
   interface GlobalComponents {
     // https://github.com/LinusBorg/portal-vue/issues/380
-    Portal: typeof import('portal-vue')['Portal']
-    PortalTarget: typeof import('portal-vue')['PortalTarget']
+    Portal: (typeof import('portal-vue'))['Portal']
+    PortalTarget: (typeof import('portal-vue'))['PortalTarget']
   }
 }