Add album share modal

src/components/modal/AlbumCollaborators.vue

@@ -53,7 +53,6 @@
 							:user="availableCollaborators[collaboratorKey].id"
 							:display-name="availableCollaborators[collaboratorKey].label"
 							:aria-label="t('photos', 'Add {collaboratorLabel} to the collaborators list', {collaboratorLabel: availableCollaborators[collaboratorKey].label})"
-							tabindex="0"
 							@click="selectEntity(collaboratorKey)" />
 					</li>
 				</ul>

src/components/modal/AlbumCreateModal.vue

@@ -46,11 +46,7 @@ export default class AlbumCreateModal extends Mixins(GlobalMixin) {
     public async open(edit: boolean) {
         if (edit) {
             try {
-                const album: any = await dav.getAlbum(this.$route.params.user, this.$route.params.name);
-                this.album = {
-                    ...album.data,
-                    ...album.data.props,
-                };
+                this.album = await dav.getAlbum(this.$route.params.user, this.$route.params.name);
             } catch (e) {
                 console.error(e);
                 showError(this.t('photos', 'Could not load the selected album'));

src/components/modal/AlbumForm.vue

@@ -46,7 +46,7 @@
                 </NcButton>
             </span>
             <span class="right-buttons">
-                <NcButton v-if="sharingEnabled"
+                <NcButton v-if="sharingEnabled && !editMode"
                     :aria-label="t('photos', 'Go to the add collaborators view.')"
                     type="secondary"
                     :disabled="albumName.trim() === '' || loading"

src/components/modal/AlbumShareModal.vue

@@ -0,0 +1,76 @@
+<template>
+    <Modal @close="close" v-if="show">
+        <template #title>
+            {{ t('memories', 'Share Album') }}
+        </template>
+
+        <AlbumCollaborators v-if="album"
+            :album-name="album.basename"
+            :collaborators="album.collaborators"
+            :public-link="album.publicLink">
+            <template slot-scope="{collaborators}">
+                <NcButton :aria-label="t('photos', 'Save collaborators for this album.')"
+                    type="primary"
+                    :disabled="loadingAddCollaborators"
+                    @click="handleSetCollaborators(collaborators)">
+                    <template #icon>
+                        <NcLoadingIcon v-if="loadingAddCollaborators" />
+                    </template>
+                    {{ t('photos', 'Save') }}
+                </NcButton>
+            </template>
+        </AlbumCollaborators>
+    </Modal>
+</template>
+
+<script lang="ts">
+import { Component, Emit, Mixins } from 'vue-property-decorator';
+import GlobalMixin from '../../mixins/GlobalMixin';
+
+import { NcButton, NcLoadingIcon } from '@nextcloud/vue';
+import * as dav from '../../services/DavRequests';
+
+import Modal from './Modal.vue';
+import AlbumCollaborators from './AlbumCollaborators.vue';
+
+@Component({
+    components: {
+        NcButton,
+        NcLoadingIcon,
+        Modal,
+        AlbumCollaborators,
+    }
+})
+export default class AlbumShareModal extends Mixins(GlobalMixin) {
+    private album: any = null;
+    private show = false;
+    private loadingAddCollaborators = false;
+
+    @Emit('close')
+    public close() {
+        this.show = false;
+        this.album = null;
+    }
+
+    public async open() {
+        this.show = true;
+        this.loadingAddCollaborators = true;
+        const user = this.$route.params.user || '';
+        const name = this.$route.params.name || '';
+        this.album = await dav.getAlbum(user, name);
+        this.loadingAddCollaborators = false;
+    }
+
+    async handleSetCollaborators(collaborators: any[]) {
+        try {
+            this.loadingAddCollaborators = true
+            await dav.updateAlbum(this.album, { albumName: this.album.basename, properties: { collaborators } })
+            this.close();
+        } catch (error) {
+            console.error(error);
+        } finally {
+            this.loadingAddCollaborators = false
+        }
+    }
+}
+</script>

src/components/modal/Modal.vue

@@ -40,6 +40,8 @@ export default class Modal extends Vue {
 
     .head {
         font-weight: 500;
+        font-size: 1.15em;
+        margin-bottom: 5px;
     }
 
     :deep .buttons {

src/components/top-matter/AlbumTopMatter.vue

@@ -16,6 +16,11 @@
                     {{ t('memories', 'Create new album') }}
                     <template #icon> <PlusIcon :size="20" /> </template>
                 </NcActionButton>
+                <NcActionButton :aria-label="t('memories', 'Share album')" @click="$refs.shareModal.open(false)" close-after-click
+                    v-if="!isAlbumList">
+                    {{ t('memories', 'Share album') }}
+                    <template #icon> <ShareIcon :size="20" /> </template>
+                </NcActionButton>
                 <NcActionButton :aria-label="t('memories', 'Edit album details')" @click="$refs.createModal.open(true)" close-after-click
                     v-if="!isAlbumList">
                     {{ t('memories', 'Edit album details') }}
@@ -31,6 +36,7 @@
 
         <AlbumCreateModal ref="createModal" />
         <AlbumDeleteModal ref="deleteModal" />
+        <AlbumShareModal ref="shareModal" />
     </div>
 </template>
 
@@ -41,12 +47,14 @@ import UserConfig from "../../mixins/UserConfig";
 
 import AlbumCreateModal from '../modal/AlbumCreateModal.vue';
 import AlbumDeleteModal from '../modal/AlbumDeleteModal.vue';
+import AlbumShareModal from '../modal/AlbumShareModal.vue';
 
 import { NcActions, NcActionButton, NcActionCheckbox } from '@nextcloud/vue';
 import BackIcon from 'vue-material-design-icons/ArrowLeft.vue';
 import EditIcon from 'vue-material-design-icons/Pencil.vue';
 import DeleteIcon from 'vue-material-design-icons/Close.vue';
 import PlusIcon from 'vue-material-design-icons/Plus.vue';
+import ShareIcon from 'vue-material-design-icons/ShareVariant.vue';
 
 @Component({
     components: {
@@ -56,11 +64,13 @@ import PlusIcon from 'vue-material-design-icons/Plus.vue';
 
         AlbumCreateModal,
         AlbumDeleteModal,
+        AlbumShareModal,
 
         BackIcon,
         EditIcon,
         DeleteIcon,
         PlusIcon,
+        ShareIcon,
     },
 })
 export default class AlbumTopMatter extends Mixins(GlobalMixin, UserConfig) {

src/services/DavRequests.ts

@@ -730,10 +730,19 @@ export async function getAlbum(user: string, name: string, extraProps = {}) {
                 ${extraProps}
             </d:prop>
         </d:propfind>`;
-    return await client.stat(`/photos/${user}/albums/${name}`, {
+    let album = await client.stat(`/photos/${user}/albums/${name}`, {
         data: req,
         details: true,
-    })
+    }) as any;
+
+    // Post processing
+    album = {
+        ...album.data,
+        ...album.data.props,
+    };
+    const c = album?.collaborators?.collaborator;
+    album.collaborators = c ? (Array.isArray(c) ? c : [c]) : [];
+    return album;
 }
 
 /** Rename an album */