Add images to space overview

owncloud · Jan 20, 2022 · 7d7f45d · 7d7f45d
1 parent 051fcdb
commit 7d7f45d
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 17 deletions.
diff --git a/packages/web-app-files/src/router/spaces.ts b/packages/web-app-files/src/router/spaces.ts
@@ -44,7 +44,7 @@ export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
         }
       },
       {
-        path: 'project/:spaceId*',
+        path: 'projects/:spaceId*',
         name: locationSpacesProject.name,
         component: components.Spaces?.Project,
         meta: {

diff --git a/packages/web-app-files/src/views/spaces/Project.vue b/packages/web-app-files/src/views/spaces/Project.vue
@@ -1,11 +1,15 @@
 <template>
-  <div class="oc-p-s">
+  <div class="space-overview oc-p-s">
     <list-loader v-if="loadSpaceTask.isRunning" />
     <template v-else>
       <not-found-message v-if="!space.id" class="files-not-found oc-height-1-1" />
       <div v-else class="oc-grid oc-grid-match oc-child-width-1-3@s">
         <div class="oc-mt-s">
-          <img class="space-image" alt="" :src="'data:image/jpeg;base64,' + imageContent" />
+          <img
+            class="space-overview-image"
+            alt=""
+            :src="'data:image/jpeg;base64,' + imageContent"
+          />
         </div>
         <div>
           <h3 class="oc-mb-s">{{ space.name }}</h3>
@@ -98,7 +102,6 @@ export default {
       })
 
       imageContent.value = arrayBuffToB64(response.data)
-      console.log(imageContent.value)
     })
 
     loadSpaceTask.perform()
@@ -169,17 +172,20 @@ export default {
 </script>
 
 <style lang="scss">
-.space-image {
-  border-radius: 5px;
-  max-height: 250px;
-}
+.space-overview {
+  &-image {
+    border-radius: 5px;
+    max-height: 250px;
+  }
 
-.markdown-container * {
-  color: grey !important;
-}
+  .markdown-container * {
+    color: grey !important;
+  }
 
-.markdown-container.collapsed {
-  max-height: 150px;
-  overflow: hidden;
+  .markdown-container.collapsed {
+    max-height: 150px;
+    overflow: hidden;
+    -webkit-mask-image: linear-gradient(180deg, #000 90%, transparent);
+  }
 }
 </style>
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -31,8 +31,13 @@
           <div v-for="space in spaces" :key="space.id" class="oc-mb-m">
             <span class="spaces-list-card oc-border oc-card oc-card-default">
               <span class="oc-card-media-top oc-border-b">
-                <router-link :to="getSpaceProjectRoute(space.id)">
-                  <img v-if="space.image" :src="space.image" alt="" />
+                <router-link v-if="!loadImagesTask.isRunning" :to="getSpaceProjectRoute(space.id)">
+                  <img
+                    v-if="imageContentObject[space.id]"
+                    class="space-image"
+                    :src="'data:image/jpeg;base64,' + imageContentObject[space.id]"
+                    alt=""
+                  />
                   <oc-icon v-else name="layout-grid" size="xxlarge" class="oc-px-m oc-py-m" />
                 </router-link>
               </span>
@@ -59,6 +64,8 @@ import { ref } from '@vue/composition-api'
 import { useStore } from '../../composables'
 import { useTask } from 'vue-concurrency'
 import { createLocationSpaces } from '../../router'
+import axios from 'axios'
+import { arrayBuffToB64 } from '../../helpers/commonUtil'
 
 export default {
   components: {
@@ -68,6 +75,7 @@ export default {
   setup() {
     const store = useStore()
     const spaces = ref([])
+    const imageContentObject = ref({})
     const { graph } = client(store.getters.configuration.server, store.getters.getToken)
 
     const loadSpacesTask = useTask(function* () {
@@ -79,11 +87,44 @@ export default {
 
     loadSpacesTask.perform()
 
+    const loadImageTask = useTask(function* (signal, { spaceId, webDavUrl, token }) {
+      const response = yield axios.get(webDavUrl, {
+        headers: {
+          Authorization: `Bearer ${token}`
+        },
+        responseType: 'arraybuffer'
+      })
+
+      imageContentObject.value[spaceId] = arrayBuffToB64(response.data)
+    })
+
+    const loadImagesTask = useTask(function* (signal, ref) {
+      for (const space of spaces.value) {
+        const imageEntry = space?.special?.find((el) => el?.specialFolder?.name === 'image')
+
+        if (!imageEntry) {
+          return
+        }
+
+        yield loadImageTask.perform({
+          spaceId: space?.id,
+          webDavUrl: imageEntry?.webDavUrl,
+          token: ref.getToken
+        })
+      }
+    })
+
     return {
       spaces,
-      loadSpacesTask
+      loadSpacesTask,
+      loadImagesTask,
+      imageContentObject
     }
   },
+  async mounted() {
+    await this.loadSpacesTask.last
+    await this.loadImagesTask.perform(this)
+  },
   methods: {
     getSpaceProjectRoute(spaceId) {
       return createLocationSpaces('files-spaces-project', {
@@ -110,5 +151,9 @@ export default {
     background-color: var(--oc-color-background-muted);
     max-height: 150px;
   }
+  .space-image {
+    max-width: 100%;
+    height: auto;
+  }
 }
 </style>