Add album share modal
parent
1d6cec1028
commit
5927163b33
|
@ -53,7 +53,6 @@
|
||||||
:user="availableCollaborators[collaboratorKey].id"
|
:user="availableCollaborators[collaboratorKey].id"
|
||||||
:display-name="availableCollaborators[collaboratorKey].label"
|
:display-name="availableCollaborators[collaboratorKey].label"
|
||||||
:aria-label="t('photos', 'Add {collaboratorLabel} to the collaborators list', {collaboratorLabel: availableCollaborators[collaboratorKey].label})"
|
:aria-label="t('photos', 'Add {collaboratorLabel} to the collaborators list', {collaboratorLabel: availableCollaborators[collaboratorKey].label})"
|
||||||
tabindex="0"
|
|
||||||
@click="selectEntity(collaboratorKey)" />
|
@click="selectEntity(collaboratorKey)" />
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
@ -46,11 +46,7 @@ export default class AlbumCreateModal extends Mixins(GlobalMixin) {
|
||||||
public async open(edit: boolean) {
|
public async open(edit: boolean) {
|
||||||
if (edit) {
|
if (edit) {
|
||||||
try {
|
try {
|
||||||
const album: any = await dav.getAlbum(this.$route.params.user, this.$route.params.name);
|
this.album = await dav.getAlbum(this.$route.params.user, this.$route.params.name);
|
||||||
this.album = {
|
|
||||||
...album.data,
|
|
||||||
...album.data.props,
|
|
||||||
};
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error(e);
|
console.error(e);
|
||||||
showError(this.t('photos', 'Could not load the selected album'));
|
showError(this.t('photos', 'Could not load the selected album'));
|
||||||
|
|
|
@ -46,7 +46,7 @@
|
||||||
</NcButton>
|
</NcButton>
|
||||||
</span>
|
</span>
|
||||||
<span class="right-buttons">
|
<span class="right-buttons">
|
||||||
<NcButton v-if="sharingEnabled"
|
<NcButton v-if="sharingEnabled && !editMode"
|
||||||
:aria-label="t('photos', 'Go to the add collaborators view.')"
|
:aria-label="t('photos', 'Go to the add collaborators view.')"
|
||||||
type="secondary"
|
type="secondary"
|
||||||
:disabled="albumName.trim() === '' || loading"
|
:disabled="albumName.trim() === '' || loading"
|
||||||
|
|
|
@ -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>
|
|
@ -40,6 +40,8 @@ export default class Modal extends Vue {
|
||||||
|
|
||||||
.head {
|
.head {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
font-size: 1.15em;
|
||||||
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep .buttons {
|
:deep .buttons {
|
||||||
|
|
|
@ -16,6 +16,11 @@
|
||||||
{{ t('memories', 'Create new album') }}
|
{{ t('memories', 'Create new album') }}
|
||||||
<template #icon> <PlusIcon :size="20" /> </template>
|
<template #icon> <PlusIcon :size="20" /> </template>
|
||||||
</NcActionButton>
|
</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
|
<NcActionButton :aria-label="t('memories', 'Edit album details')" @click="$refs.createModal.open(true)" close-after-click
|
||||||
v-if="!isAlbumList">
|
v-if="!isAlbumList">
|
||||||
{{ t('memories', 'Edit album details') }}
|
{{ t('memories', 'Edit album details') }}
|
||||||
|
@ -31,6 +36,7 @@
|
||||||
|
|
||||||
<AlbumCreateModal ref="createModal" />
|
<AlbumCreateModal ref="createModal" />
|
||||||
<AlbumDeleteModal ref="deleteModal" />
|
<AlbumDeleteModal ref="deleteModal" />
|
||||||
|
<AlbumShareModal ref="shareModal" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -41,12 +47,14 @@ import UserConfig from "../../mixins/UserConfig";
|
||||||
|
|
||||||
import AlbumCreateModal from '../modal/AlbumCreateModal.vue';
|
import AlbumCreateModal from '../modal/AlbumCreateModal.vue';
|
||||||
import AlbumDeleteModal from '../modal/AlbumDeleteModal.vue';
|
import AlbumDeleteModal from '../modal/AlbumDeleteModal.vue';
|
||||||
|
import AlbumShareModal from '../modal/AlbumShareModal.vue';
|
||||||
|
|
||||||
import { NcActions, NcActionButton, NcActionCheckbox } from '@nextcloud/vue';
|
import { NcActions, NcActionButton, NcActionCheckbox } from '@nextcloud/vue';
|
||||||
import BackIcon from 'vue-material-design-icons/ArrowLeft.vue';
|
import BackIcon from 'vue-material-design-icons/ArrowLeft.vue';
|
||||||
import EditIcon from 'vue-material-design-icons/Pencil.vue';
|
import EditIcon from 'vue-material-design-icons/Pencil.vue';
|
||||||
import DeleteIcon from 'vue-material-design-icons/Close.vue';
|
import DeleteIcon from 'vue-material-design-icons/Close.vue';
|
||||||
import PlusIcon from 'vue-material-design-icons/Plus.vue';
|
import PlusIcon from 'vue-material-design-icons/Plus.vue';
|
||||||
|
import ShareIcon from 'vue-material-design-icons/ShareVariant.vue';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
components: {
|
components: {
|
||||||
|
@ -56,11 +64,13 @@ import PlusIcon from 'vue-material-design-icons/Plus.vue';
|
||||||
|
|
||||||
AlbumCreateModal,
|
AlbumCreateModal,
|
||||||
AlbumDeleteModal,
|
AlbumDeleteModal,
|
||||||
|
AlbumShareModal,
|
||||||
|
|
||||||
BackIcon,
|
BackIcon,
|
||||||
EditIcon,
|
EditIcon,
|
||||||
DeleteIcon,
|
DeleteIcon,
|
||||||
PlusIcon,
|
PlusIcon,
|
||||||
|
ShareIcon,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
export default class AlbumTopMatter extends Mixins(GlobalMixin, UserConfig) {
|
export default class AlbumTopMatter extends Mixins(GlobalMixin, UserConfig) {
|
||||||
|
|
|
@ -730,10 +730,19 @@ export async function getAlbum(user: string, name: string, extraProps = {}) {
|
||||||
${extraProps}
|
${extraProps}
|
||||||
</d:prop>
|
</d:prop>
|
||||||
</d:propfind>`;
|
</d:propfind>`;
|
||||||
return await client.stat(`/photos/${user}/albums/${name}`, {
|
let album = await client.stat(`/photos/${user}/albums/${name}`, {
|
||||||
data: req,
|
data: req,
|
||||||
details: true,
|
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 */
|
/** Rename an album */
|
||||||
|
|
Loading…
Reference in New Issue