Add set as space img/md action

changelog/unreleased/enhancement-space-image-and-description-handling

@@ -0,0 +1,6 @@
+Enhancement: Implement solutions to update space image and description
+
+We have implemented multiple ways to update the image and description of a space.
+
+https://github.com/owncloud/web/pull/6410
+https://github.com/owncloud/web/issues/6377

packages/web-app-files/src/components/AppBar/AppBar.vue

@@ -19,10 +19,7 @@
         :items="breadcrumbs"
       >
         <template #contextMenu>
-          <context-actions
-            v-if="currentFolder && breadcrumbs.length > 1"
-            :items="[currentFolder]"
-          />
+          <context-actions v-if="showContextActions" :items="[currentFolder]" />
         </template>
       </oc-breadcrumb>
       <h1 class="oc-invisible-sr" v-text="pageTitle" />
@@ -105,6 +102,13 @@ export default {
     ...mapGetters('Files', ['files', 'currentFolder', 'selectedFiles', 'publicLinkPassword']),
     ...mapState('Files', ['areHiddenFilesShown']),
 
+    showContextActions() {
+      if (this.isSpacesProjectLocation) {
+        return this.currentFolder && this.breadcrumbs.length > 2
+      }
+
+      return this.currentFolder && this.breadcrumbs.length > 1
+    },
     currentPath() {
       const path = this.$route.params.item || ''
       if (path.endsWith('/')) {

packages/web-app-files/src/components/FilesList/ContextActions.vue

@@ -39,6 +39,8 @@ import Restore from '../../mixins/actions/restore'
 import ShowActions from '../../mixins/actions/showActions'
 import ShowDetails from '../../mixins/actions/showDetails'
 import ShowShares from '../../mixins/actions/showShares'
+import SetSpaceImage from '../../mixins/spaces/actions/setImage'
+import SetSpaceReadme from '../../mixins/spaces/actions/setReadme'
 
 export default {
   name: 'ContextActions',
@@ -60,7 +62,9 @@ export default {
     Restore,
     ShowActions,
     ShowDetails,
-    ShowShares
+    ShowShares,
+    SetSpaceImage,
+    SetSpaceReadme
   ],
 
   props: {
@@ -159,7 +163,9 @@ export default {
         ...this.$_rename_items,
         ...this.$_restore_items,
         ...this.$_acceptShare_items,
-        ...this.$_declineShare_items
+        ...this.$_declineShare_items,
+        ...this.$_setSpaceImage_items,
+        ...this.$_setSpaceReadme_items
       ].filter((item) => item.isEnabled(this.filterParams))
     },
 

packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue

@@ -1,13 +1,45 @@
 <template>
-  <oc-list id="oc-spaces-actions-sidebar" class-name="oc-mt-s">
-    <action-menu-item
-      v-for="(action, index) in actions"
-      :key="`action-${index}`"
-      :action="action"
-      :items="resources"
-      class="oc-py-xs"
+  <div>
+    <portal v-if="$data.$_editReadmeContent_modalOpen" to="app.runtime.modal">
+      <oc-modal
+        focus-trap-initial="#description-input-area"
+        :title="$gettext('Edit description for space') + ' ' + resources[0].name"
+        :button-cancel-text="$gettext('Cancel')"
+        :button-confirm-text="$gettext('Confirm')"
+        @confirm="$_editReadmeContent_editReadmeContentSpace"
+        @cancel="$_editReadmeContent_closeModal"
+      >
+        <template #content>
+          <label v-translate class="oc-label" for="description-input-area">Space description</label>
+          <textarea
+            id="description-input-area"
+            v-model="$data.$_editReadmeContent_content"
+            class="oc-width-1-1 oc-height-1-1 oc-text-input"
+            rows="30"
+          ></textarea>
+        </template>
+      </oc-modal>
+    </portal>
+    <input
+      id="space-image-upload-input"
+      ref="spaceImageInput"
+      type="file"
+      name="file"
+      multiple
+      tabindex="-1"
+      accept="image/*"
+      @change="$_uploadImage_uploadImageSpace"
     />
-  </oc-list>
+    <oc-list id="oc-spaces-actions-sidebar" class-name="oc-mt-s">
+      <action-menu-item
+        v-for="(action, index) in actions"
+        :key="`action-${index}`"
+        :action="action"
+        :items="resources"
+        class="oc-py-xs"
+      />
+    </oc-list>
+  </div>
 </template>
 
 <script>
@@ -18,14 +50,16 @@ import Delete from '../../../mixins/spaces/actions/delete'
 import Disable from '../../../mixins/spaces/actions/disable'
 import Restore from '../../../mixins/spaces/actions/restore'
 import EditDescription from '../../../mixins/spaces/actions/editDescription'
+import EditReadmeContent from '../../../mixins/spaces/actions/editReadmeContent'
+import UploadImage from '../../../mixins/spaces/actions/uploadImage'
 
 export default {
   name: 'SpaceActions',
   title: ($gettext) => {
     return $gettext('Actions')
   },
   components: { ActionMenuItem },
-  mixins: [Rename, Delete, EditDescription, Disable, Restore],
+  mixins: [Rename, Delete, EditDescription, EditReadmeContent, Disable, Restore, UploadImage],
   computed: {
     ...mapGetters('Files', ['highlightedFile']),
 
@@ -37,6 +71,8 @@ export default {
       return [
         ...this.$_rename_items,
         ...this.$_editDescription_items,
+        ...this.$_uploadImage_items,
+        ...this.$_editReadmeContent_items,
         ...this.$_restore_items,
         ...this.$_delete_items,
         ...this.$_disable_items
@@ -47,6 +83,11 @@ export default {
 </script>
 
 <style lang="scss">
+#space-image-upload-input {
+  position: absolute;
+  left: -99999px;
+}
+
 #oc-spaces-actions-sidebar {
   > li a,
   > li a:hover {

packages/web-app-files/src/components/SideBar/Details/SpaceDetails.vue

@@ -1,13 +1,31 @@
 <template>
   <div id="oc-space-details-sidebar">
+    <input
+      id="space-image-upload-input"
+      ref="spaceImageInput"
+      type="file"
+      name="file"
+      multiple
+      tabindex="-1"
+      accept="image/*"
+      @change="$_uploadImage_uploadImageSpace"
+    />
     <div class="oc-space-details-sidebar-image oc-text-center">
       <oc-spinner v-if="loadImageTask.isRunning" />
-      <img
-        v-else-if="spaceImage"
-        :src="'data:image/jpeg;base64,' + spaceImage"
-        alt=""
-        class="oc-mb-m"
-      />
+      <div v-else-if="spaceImage" class="oc-position-relative">
+        <oc-button
+          id="space-image-upload-button"
+          class="oc-position-absolute oc-mt-s oc-mr-s"
+          variation="passive"
+          size="small"
+          appearance="filled"
+          @click="$_uploadImage_trigger({ resources: [space] })"
+        >
+          <oc-icon name="image-add" />
+          <translate>Upload new space image</translate>
+        </oc-button>
+        <img :src="'data:image/jpeg;base64,' + spaceImage" alt="" class="oc-mb-m" />
+      </div>
       <oc-icon
         v-else
         name="layout-grid"
@@ -56,11 +74,12 @@ import { buildWebDavSpacesPath } from '../../../helpers/resources'
 import { useStore } from 'web-pkg/src/composables'
 import { clientService } from 'web-pkg/src/services'
 import SpaceQuota from '../../SpaceQuota.vue'
+import UploadImage from '../../../mixins/spaces/actions/uploadImage'
 
 export default {
   name: 'SpaceDetails',
   components: { SpaceQuota },
-  mixins: [Mixins, MixinResources],
+  mixins: [Mixins, MixinResources, UploadImage],
   inject: ['displayedItem'],
   title: ($gettext) => {
     return $gettext('Details')
@@ -79,8 +98,13 @@ export default {
         return
       }
 
+      const webDavPathComponents = ref.space.spaceImageData.webDavUrl.split('/')
+      const path = webDavPathComponents
+        .slice(webDavPathComponents.indexOf(ref.space.id) + 1)
+        .join('/')
+
       const fileContents = yield ref.$client.files.getFileContents(
-        buildWebDavSpacesPath(ref.space.id, ref.space.spaceImageData.name),
+        buildWebDavSpacesPath(ref.space.id, path),
         { responseType: 'arrayBuffer' }
       )
 
@@ -208,6 +232,11 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+#space-image-upload-button {
+  top: 0;
+  right: 0;
+}
+
 .oc-space-details-sidebar {
   &-image img {
     max-height: 150px;

packages/web-app-files/src/mixins/spaces/actions/delete.js

@@ -68,6 +68,9 @@ export default {
         .then(() => {
           this.hideModal()
           this.REMOVE_FILE({ id })
+          this.showMessage({
+            title: this.$gettext('Space successfully deleted')
+          })
         })
         .catch((error) => {
           this.showMessage({

packages/web-app-files/src/mixins/spaces/actions/disable.js

@@ -68,6 +68,9 @@ export default {
             field: 'disabled',
             value: true
           })
+          this.showMessage({
+            title: this.$gettext('Space successfully disabled')
+          })
         })
         .catch((error) => {
           this.showMessage({

packages/web-app-files/src/mixins/spaces/actions/editDescription.js

@@ -11,10 +11,10 @@ export default {
           name: 'editDescription',
           icon: 'pencil',
           label: () => {
-            return this.$gettext('Change description')
+            return this.$gettext('Change subtitle')
           },
           handler: this.$_editDescription_trigger,
-          isEnabled: () => false, // @TODO enable as soon as backend supports this
+          isEnabled: ({ resources }) => resources.length === 1,
           componentType: 'oc-button',
           class: 'oc-files-actions-edit-description-trigger'
         }
@@ -38,11 +38,11 @@ export default {
 
       const modal = {
         variation: 'passive',
-        title: this.$gettext('Change description for space') + ' ' + resources[0].name,
+        title: this.$gettext('Change subtitle for space') + ' ' + resources[0].name,
         cancelText: this.$gettext('Cancel'),
         confirmText: this.$gettext('Confirm'),
         hasInput: true,
-        inputLabel: this.$gettext('Space description'),
+        inputLabel: this.$gettext('Space subtitle'),
         inputValue: resources[0].description,
         onCancel: this.hideModal,
         onConfirm: (description) =>
@@ -63,10 +63,13 @@ export default {
             field: 'description',
             value: description
           })
+          this.showMessage({
+            title: this.$gettext('Space subtitle successfully changed')
+          })
         })
         .catch((error) => {
           this.showMessage({
-            title: this.$gettext('Renaming space description failed…'),
+            title: this.$gettext('Changing space subtitle failed…'),
             desc: error,
             status: 'danger'
           })

packages/web-app-files/src/mixins/spaces/actions/editReadmeContent.js

@@ -0,0 +1,88 @@
+import { mapActions, mapMutations, mapState } from 'vuex'
+
+export default {
+  data: function () {
+    return {
+      $_editReadmeContent_modalOpen: false,
+      $_editReadmeContent_content: ''
+    }
+  },
+  computed: {
+    ...mapState('Files', ['currentFolder']),
+    $_editReadmeContent_items() {
+      return [
+        {
+          name: 'editReadmeContent',
+          icon: 'markdown',
+          label: () => {
+            return this.$gettext('Edit description')
+          },
+          handler: this.$_editReadmeContent_trigger,
+          isEnabled: ({ resources }) => {
+            if (resources.length !== 1) {
+              return false
+            }
+
+            return resources[0].spaceReadmeData
+          },
+          componentType: 'oc-button',
+          class: 'oc-files-actions-edit-readme-content-trigger'
+        }
+      ]
+    }
+  },
+  methods: {
+    ...mapActions([
+      'createModal',
+      'hideModal',
+      'setModalInputErrorMessage',
+      'showMessage',
+      'toggleModalConfirmButton'
+    ]),
+    ...mapMutations('Files', ['UPDATE_RESOURCE_FIELD']),
+
+    $_editReadmeContent_trigger({ resources }) {
+      if (resources.length !== 1) {
+        return
+      }
+      const webDavPathComponents = resources[0].spaceReadmeData.webDavUrl.split('/')
+      const path = webDavPathComponents.slice(webDavPathComponents.indexOf('dav') + 1).join('/')
+
+      this.$client.files.getFileContents(path).then((readmeContent) => {
+        this.$data.$_editReadmeContent_modalOpen = true
+        this.$data.$_editReadmeContent_content = readmeContent
+      })
+    },
+
+    $_editReadmeContent_editReadmeContentSpace() {
+      const space = this.currentFolder
+      const webDavPathComponents = space.spaceReadmeData.webDavUrl.split('/')
+      const path = webDavPathComponents.slice(webDavPathComponents.indexOf('dav') + 1).join('/')
+
+      return this.$client.files
+        .putFileContents(path, this.$data.$_editReadmeContent_content)
+        .then((readmeMetaData) => {
+          this.$_editReadmeContent_closeModal()
+          this.UPDATE_RESOURCE_FIELD({
+            id: space.id,
+            field: 'spaceReadmeData',
+            value: { ...space.spaceReadmeData, ...{ etag: readmeMetaData.ETag } }
+          })
+          this.showMessage({
+            title: this.$gettext('Space description successfully edited')
+          })
+        })
+        .catch((error) => {
+          this.showMessage({
+            title: this.$gettext('Editing space description failed…'),
+            desc: error,
+            status: 'danger'
+          })
+        })
+    },
+
+    $_editReadmeContent_closeModal() {
+      this.$data.$_editReadmeContent_modalOpen = false
+    }
+  }
+}

packages/web-app-files/src/mixins/spaces/actions/rename.js

@@ -70,6 +70,9 @@ export default {
             field: 'name',
             value: name
           })
+          this.showMessage({
+            title: this.$gettext('Space name successfully changed')
+          })
         })
         .catch((error) => {
           this.showMessage({