remove class vue dep (2)
Varun Patil
parent
07379d836c
commit
8d79151a30
|
|
@ -67,8 +67,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Emit, Mixins, Prop, Watch } from "vue-property-decorator";
|
||||
import GlobalMixin from "../../mixins/GlobalMixin";
|
||||
import { defineComponent, PropType } from "vue";
|
||||
|
||||
import { getPreviewUrl } from "../../services/FileUtils";
|
||||
import { IDay, IPhoto } from "../../types";
|
||||
|
|
@ -80,38 +79,48 @@ import Star from "vue-material-design-icons/Star.vue";
|
|||
import Video from "vue-material-design-icons/PlayCircleOutline.vue";
|
||||
import LivePhoto from "vue-material-design-icons/MotionPlayOutline.vue";
|
||||
|
||||
@Component({
|
||||
export default defineComponent({
|
||||
name: "Photo",
|
||||
components: {
|
||||
CheckCircle,
|
||||
Video,
|
||||
Star,
|
||||
LivePhoto,
|
||||
},
|
||||
})
|
||||
export default class Photo extends Mixins(GlobalMixin) {
|
||||
private touchTimer = 0;
|
||||
private src = null;
|
||||
private hasFaceRect = false;
|
||||
|
||||
@Prop() data: IPhoto;
|
||||
@Prop() day: IDay;
|
||||
props: {
|
||||
data: {
|
||||
type: Object as PropType<IPhoto>,
|
||||
required: true,
|
||||
},
|
||||
day: {
|
||||
type: Object as PropType<IDay>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
@Emit("select") emitSelect(data: IPhoto) {}
|
||||
data() {
|
||||
return {
|
||||
touchTimer: 0,
|
||||
src: null,
|
||||
hasFaceRect: false,
|
||||
};
|
||||
},
|
||||
|
||||
@Watch("data")
|
||||
onDataChange(newData: IPhoto, oldData: IPhoto) {
|
||||
// Copy flags relevant to this component
|
||||
if (oldData && newData) {
|
||||
newData.flag |=
|
||||
oldData.flag & (this.c.FLAG_SELECTED | this.c.FLAG_LOAD_FAIL);
|
||||
}
|
||||
}
|
||||
watch: {
|
||||
data(newData: IPhoto, oldData: IPhoto) {
|
||||
// Copy flags relevant to this component
|
||||
if (oldData && newData) {
|
||||
newData.flag |=
|
||||
oldData.flag & (this.c.FLAG_SELECTED | this.c.FLAG_LOAD_FAIL);
|
||||
}
|
||||
},
|
||||
|
||||
@Watch("data.etag")
|
||||
onEtagChange() {
|
||||
this.hasFaceRect = false;
|
||||
this.refresh();
|
||||
}
|
||||
"data.etag": function () {
|
||||
this.hasFaceRect = false;
|
||||
this.refresh();
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.hasFaceRect = false;
|
||||
|
|
@ -122,136 +131,144 @@ export default class Photo extends Mixins(GlobalMixin) {
|
|||
if (video) {
|
||||
utils.setupLivePhotoHooks(video);
|
||||
}
|
||||
}
|
||||
|
||||
get videoDuration() {
|
||||
if (this.data.video_duration) {
|
||||
return utils.getDurationStr(this.data.video_duration);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
get videoUrl() {
|
||||
if (this.data.liveid) {
|
||||
return utils.getLivePhotoVideoUrl(this.data, true);
|
||||
}
|
||||
}
|
||||
|
||||
async refresh() {
|
||||
this.src = await this.getSrc();
|
||||
}
|
||||
|
||||
/** Get src for image to show */
|
||||
async getSrc() {
|
||||
if (this.data.flag & this.c.FLAG_PLACEHOLDER) {
|
||||
return null;
|
||||
} else if (this.data.flag & this.c.FLAG_LOAD_FAIL) {
|
||||
return errorsvg;
|
||||
} else {
|
||||
return this.url();
|
||||
}
|
||||
}
|
||||
|
||||
/** Get url of the photo */
|
||||
url() {
|
||||
let base = 256;
|
||||
|
||||
// Check if displayed size is larger than the image
|
||||
if (this.data.dispH > base * 0.9 && this.data.dispW > base * 0.9) {
|
||||
// Get a bigger image
|
||||
// 1. No trickery here, just get one size bigger. This is to
|
||||
// ensure that the images can be cached even after reflow.
|
||||
// 2. Nextcloud only allows 4**x sized images, so technically
|
||||
// this ends up being equivalent to 1024x1024.
|
||||
base = 512;
|
||||
}
|
||||
|
||||
// Make the shorter dimension equal to base
|
||||
let size = base;
|
||||
if (this.data.w && this.data.h) {
|
||||
size =
|
||||
Math.floor(
|
||||
(base * Math.max(this.data.w, this.data.h)) /
|
||||
Math.min(this.data.w, this.data.h)
|
||||
) - 1;
|
||||
}
|
||||
|
||||
return getPreviewUrl(this.data, false, size);
|
||||
}
|
||||
|
||||
/** Set src with overlay face rect */
|
||||
async addFaceRect() {
|
||||
if (!this.data.facerect || this.hasFaceRect) return;
|
||||
this.hasFaceRect = true;
|
||||
|
||||
const canvas = document.createElement("canvas");
|
||||
const context = canvas.getContext("2d");
|
||||
const img = this.$refs.img as HTMLImageElement;
|
||||
|
||||
canvas.width = img.naturalWidth;
|
||||
canvas.height = img.naturalHeight;
|
||||
context.drawImage(img, 0, 0);
|
||||
context.strokeStyle = "#00ff00";
|
||||
context.lineWidth = 2;
|
||||
context.strokeRect(
|
||||
this.data.facerect.x * img.naturalWidth,
|
||||
this.data.facerect.y * img.naturalHeight,
|
||||
this.data.facerect.w * img.naturalWidth,
|
||||
this.data.facerect.h * img.naturalHeight
|
||||
);
|
||||
|
||||
canvas.toBlob(
|
||||
(blob) => {
|
||||
this.src = URL.createObjectURL(blob);
|
||||
},
|
||||
"image/jpeg",
|
||||
0.95
|
||||
);
|
||||
}
|
||||
|
||||
/** Post load tasks */
|
||||
load() {
|
||||
this.addFaceRect();
|
||||
}
|
||||
|
||||
/** Error in loading image */
|
||||
error(e: any) {
|
||||
this.data.flag |= this.c.FLAG_LOAD_FAIL;
|
||||
this.refresh();
|
||||
}
|
||||
},
|
||||
|
||||
/** Clear timers */
|
||||
beforeUnmount() {
|
||||
clearTimeout(this.touchTimer);
|
||||
}
|
||||
},
|
||||
|
||||
toggleSelect() {
|
||||
if (this.data.flag & this.c.FLAG_PLACEHOLDER) return;
|
||||
this.emitSelect(this.data);
|
||||
}
|
||||
computed: {
|
||||
videoDuration() {
|
||||
if (this.data.video_duration) {
|
||||
return utils.getDurationStr(this.data.video_duration);
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
contextmenu(e: Event) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
videoUrl() {
|
||||
if (this.data.liveid) {
|
||||
return utils.getLivePhotoVideoUrl(this.data, true);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
/** Start preview video */
|
||||
playVideo() {
|
||||
if (this.$refs.video && !(this.data.flag & this.c.FLAG_SELECTED)) {
|
||||
const video = this.$refs.video as HTMLVideoElement;
|
||||
video.currentTime = 0;
|
||||
video.play();
|
||||
}
|
||||
}
|
||||
methods: {
|
||||
emitSelect(data: IPhoto) {
|
||||
this.$emit("select", data);
|
||||
},
|
||||
|
||||
/** Stop preview video */
|
||||
stopVideo() {
|
||||
if (this.$refs.video) {
|
||||
const video = this.$refs.video as HTMLVideoElement;
|
||||
video.pause();
|
||||
}
|
||||
}
|
||||
}
|
||||
async refresh() {
|
||||
this.src = await this.getSrc();
|
||||
},
|
||||
|
||||
/** Get src for image to show */
|
||||
async getSrc() {
|
||||
if (this.data.flag & this.c.FLAG_PLACEHOLDER) {
|
||||
return null;
|
||||
} else if (this.data.flag & this.c.FLAG_LOAD_FAIL) {
|
||||
return errorsvg;
|
||||
} else {
|
||||
return this.url();
|
||||
}
|
||||
},
|
||||
|
||||
/** Get url of the photo */
|
||||
url() {
|
||||
let base = 256;
|
||||
|
||||
// Check if displayed size is larger than the image
|
||||
if (this.data.dispH > base * 0.9 && this.data.dispW > base * 0.9) {
|
||||
// Get a bigger image
|
||||
// 1. No trickery here, just get one size bigger. This is to
|
||||
// ensure that the images can be cached even after reflow.
|
||||
// 2. Nextcloud only allows 4**x sized images, so technically
|
||||
// this ends up being equivalent to 1024x1024.
|
||||
base = 512;
|
||||
}
|
||||
|
||||
// Make the shorter dimension equal to base
|
||||
let size = base;
|
||||
if (this.data.w && this.data.h) {
|
||||
size =
|
||||
Math.floor(
|
||||
(base * Math.max(this.data.w, this.data.h)) /
|
||||
Math.min(this.data.w, this.data.h)
|
||||
) - 1;
|
||||
}
|
||||
|
||||
return getPreviewUrl(this.data, false, size);
|
||||
},
|
||||
|
||||
/** Set src with overlay face rect */
|
||||
async addFaceRect() {
|
||||
if (!this.data.facerect || this.hasFaceRect) return;
|
||||
this.hasFaceRect = true;
|
||||
|
||||
const canvas = document.createElement("canvas");
|
||||
const context = canvas.getContext("2d");
|
||||
const img = this.$refs.img as HTMLImageElement;
|
||||
|
||||
canvas.width = img.naturalWidth;
|
||||
canvas.height = img.naturalHeight;
|
||||
context.drawImage(img, 0, 0);
|
||||
context.strokeStyle = "#00ff00";
|
||||
context.lineWidth = 2;
|
||||
context.strokeRect(
|
||||
this.data.facerect.x * img.naturalWidth,
|
||||
this.data.facerect.y * img.naturalHeight,
|
||||
this.data.facerect.w * img.naturalWidth,
|
||||
this.data.facerect.h * img.naturalHeight
|
||||
);
|
||||
|
||||
canvas.toBlob(
|
||||
(blob) => {
|
||||
this.src = URL.createObjectURL(blob);
|
||||
},
|
||||
"image/jpeg",
|
||||
0.95
|
||||
);
|
||||
},
|
||||
|
||||
/** Post load tasks */
|
||||
load() {
|
||||
this.addFaceRect();
|
||||
},
|
||||
|
||||
/** Error in loading image */
|
||||
error(e: any) {
|
||||
this.data.flag |= this.c.FLAG_LOAD_FAIL;
|
||||
this.refresh();
|
||||
},
|
||||
|
||||
toggleSelect() {
|
||||
if (this.data.flag & this.c.FLAG_PLACEHOLDER) return;
|
||||
this.emitSelect(this.data);
|
||||
},
|
||||
|
||||
contextmenu(e: Event) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
},
|
||||
|
||||
/** Start preview video */
|
||||
playVideo() {
|
||||
if (this.$refs.video && !(this.data.flag & this.c.FLAG_SELECTED)) {
|
||||
const video = this.$refs.video as HTMLVideoElement;
|
||||
video.currentTime = 0;
|
||||
video.play();
|
||||
}
|
||||
},
|
||||
|
||||
/** Stop preview video */
|
||||
stopVideo() {
|
||||
if (this.$refs.video) {
|
||||
const video = this.$refs.video as HTMLVideoElement;
|
||||
video.pause();
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -29,99 +29,111 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Mixins, Emit } from "vue-property-decorator";
|
||||
import { defineComponent, PropType } from "vue";
|
||||
|
||||
import { IAlbum, ITag } from "../../types";
|
||||
import { getPreviewUrl } from "../../services/FileUtils";
|
||||
import { getCurrentUser } from "@nextcloud/auth";
|
||||
|
||||
import NcCounterBubble from "@nextcloud/vue/dist/Components/NcCounterBubble";
|
||||
|
||||
import GlobalMixin from "../../mixins/GlobalMixin";
|
||||
import { constants } from "../../services/Utils";
|
||||
import { API } from "../../services/API";
|
||||
|
||||
@Component({
|
||||
export default defineComponent({
|
||||
name: "Tag",
|
||||
components: {
|
||||
NcCounterBubble,
|
||||
},
|
||||
})
|
||||
export default class Tag extends Mixins(GlobalMixin) {
|
||||
@Prop() data: ITag;
|
||||
@Prop() noNavigate: boolean;
|
||||
|
||||
/**
|
||||
* Open tag event
|
||||
* Unless noNavigate is set, the tag will be opened
|
||||
*/
|
||||
@Emit("open")
|
||||
openTag(tag: ITag) {}
|
||||
props: {
|
||||
data: {
|
||||
type: Object as PropType<ITag>,
|
||||
required: true,
|
||||
},
|
||||
noNavigate: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
get previewUrl() {
|
||||
if (this.face) {
|
||||
return API.FACE_PREVIEW(this.faceApp, this.face.fileid);
|
||||
}
|
||||
computed: {
|
||||
previewUrl() {
|
||||
if (this.face) {
|
||||
return API.FACE_PREVIEW(this.faceApp, this.face.fileid);
|
||||
}
|
||||
|
||||
if (this.album) {
|
||||
const mock = { fileid: this.album.last_added_photo, etag: "", flag: 0 };
|
||||
return getPreviewUrl(mock, true, 512);
|
||||
}
|
||||
if (this.album) {
|
||||
const mock = { fileid: this.album.last_added_photo, etag: "", flag: 0 };
|
||||
return getPreviewUrl(mock, true, 512);
|
||||
}
|
||||
|
||||
return API.TAG_PREVIEW(this.data.name);
|
||||
}
|
||||
return API.TAG_PREVIEW(this.data.name);
|
||||
},
|
||||
|
||||
get subtitle() {
|
||||
if (this.album && this.album.user !== getCurrentUser()?.uid) {
|
||||
return `(${this.album.user})`;
|
||||
}
|
||||
subtitle() {
|
||||
if (this.album && this.album.user !== getCurrentUser()?.uid) {
|
||||
return `(${this.album.user})`;
|
||||
}
|
||||
|
||||
return "";
|
||||
}
|
||||
return "";
|
||||
},
|
||||
|
||||
get face() {
|
||||
return this.data.flag & constants.c.FLAG_IS_FACE_RECOGNIZE ||
|
||||
this.data.flag & constants.c.FLAG_IS_FACE_RECOGNITION
|
||||
? this.data
|
||||
: null;
|
||||
}
|
||||
face() {
|
||||
return this.data.flag & constants.c.FLAG_IS_FACE_RECOGNIZE ||
|
||||
this.data.flag & constants.c.FLAG_IS_FACE_RECOGNITION
|
||||
? this.data
|
||||
: null;
|
||||
},
|
||||
|
||||
get faceApp() {
|
||||
return this.data.flag & constants.c.FLAG_IS_FACE_RECOGNITION
|
||||
? "facerecognition"
|
||||
: "recognize";
|
||||
}
|
||||
faceApp() {
|
||||
return this.data.flag & constants.c.FLAG_IS_FACE_RECOGNITION
|
||||
? "facerecognition"
|
||||
: "recognize";
|
||||
},
|
||||
|
||||
get album() {
|
||||
return this.data.flag & constants.c.FLAG_IS_ALBUM
|
||||
? <IAlbum>this.data
|
||||
: null;
|
||||
}
|
||||
album() {
|
||||
return this.data.flag & constants.c.FLAG_IS_ALBUM
|
||||
? <IAlbum>this.data
|
||||
: null;
|
||||
},
|
||||
|
||||
/** Target URL to navigate to */
|
||||
get target() {
|
||||
if (this.noNavigate) return {};
|
||||
/** Target URL to navigate to */
|
||||
target() {
|
||||
if (this.noNavigate) return {};
|
||||
|
||||
if (this.face) {
|
||||
const name = this.face.name || this.face.fileid.toString();
|
||||
const user = this.face.user_id;
|
||||
return { name: this.faceApp, params: { name, user } };
|
||||
}
|
||||
if (this.face) {
|
||||
const name = this.face.name || this.face.fileid.toString();
|
||||
const user = this.face.user_id;
|
||||
return { name: this.faceApp, params: { name, user } };
|
||||
}
|
||||
|
||||
if (this.album) {
|
||||
const user = this.album.user;
|
||||
const name = this.album.name;
|
||||
return { name: "albums", params: { user, name } };
|
||||
}
|
||||
if (this.album) {
|
||||
const user = this.album.user;
|
||||
const name = this.album.name;
|
||||
return { name: "albums", params: { user, name } };
|
||||
}
|
||||
|
||||
return { name: "tags", params: { name: this.data.name } };
|
||||
}
|
||||
return { name: "tags", params: { name: this.data.name } };
|
||||
},
|
||||
|
||||
get error() {
|
||||
return (
|
||||
Boolean(this.data.flag & this.c.FLAG_LOAD_FAIL) ||
|
||||
Boolean(this.album && this.album.last_added_photo <= 0)
|
||||
);
|
||||
}
|
||||
}
|
||||
error() {
|
||||
return (
|
||||
Boolean(this.data.flag & this.c.FLAG_LOAD_FAIL) ||
|
||||
Boolean(this.album && this.album.last_added_photo <= 0)
|
||||
);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Open tag event
|
||||
* Unless noNavigate is set, the tag will be opened
|
||||
*/
|
||||
openTag(tag: ITag) {
|
||||
this.$emit("open", tag);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -20,8 +20,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Emit, Mixins } from "vue-property-decorator";
|
||||
import GlobalMixin from "../../mixins/GlobalMixin";
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
import * as dav from "../../services/DavRequests";
|
||||
import { showInfo } from "@nextcloud/dialogs";
|
||||
|
|
@ -30,58 +29,65 @@ import { IAlbum, IPhoto } from "../../types";
|
|||
import AlbumPicker from "./AlbumPicker.vue";
|
||||
import Modal from "./Modal.vue";
|
||||
|
||||
@Component({
|
||||
export default defineComponent({
|
||||
name: "AddToAlbumModal",
|
||||
components: {
|
||||
Modal,
|
||||
AlbumPicker,
|
||||
},
|
||||
})
|
||||
export default class AddToAlbumModal extends Mixins(GlobalMixin) {
|
||||
private show = false;
|
||||
private photos: IPhoto[] = [];
|
||||
private photosDone: number = 0;
|
||||
private processing: boolean = false;
|
||||
|
||||
public open(photos: IPhoto[]) {
|
||||
this.photosDone = 0;
|
||||
this.processing = false;
|
||||
this.show = true;
|
||||
this.photos = photos;
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
photos: [] as IPhoto[],
|
||||
photosDone: 0,
|
||||
processing: false,
|
||||
};
|
||||
},
|
||||
|
||||
@Emit("added")
|
||||
public added(photos: IPhoto[]) {}
|
||||
methods: {
|
||||
open(photos: IPhoto[]) {
|
||||
this.photosDone = 0;
|
||||
this.processing = false;
|
||||
this.show = true;
|
||||
this.photos = photos;
|
||||
},
|
||||
|
||||
@Emit("close")
|
||||
public close() {
|
||||
this.photos = [];
|
||||
this.processing = false;
|
||||
this.show = false;
|
||||
}
|
||||
added(photos: IPhoto[]) {
|
||||
this.$emit("added", photos);
|
||||
},
|
||||
|
||||
public async selectAlbum(album: IAlbum) {
|
||||
const name = album.name || album.album_id.toString();
|
||||
const gen = dav.addToAlbum(album.user, name, this.photos);
|
||||
this.processing = true;
|
||||
close() {
|
||||
this.photos = [];
|
||||
this.processing = false;
|
||||
this.show = false;
|
||||
this.$emit("close");
|
||||
},
|
||||
|
||||
for await (const fids of gen) {
|
||||
this.photosDone += fids.filter((f) => f).length;
|
||||
this.added(this.photos.filter((p) => fids.includes(p.fileid)));
|
||||
}
|
||||
async selectAlbum(album: IAlbum) {
|
||||
const name = album.name || album.album_id.toString();
|
||||
const gen = dav.addToAlbum(album.user, name, this.photos);
|
||||
this.processing = true;
|
||||
|
||||
const n = this.photosDone;
|
||||
showInfo(
|
||||
this.n(
|
||||
"memories",
|
||||
"{n} item added to album",
|
||||
"{n} items added to album",
|
||||
n,
|
||||
{ n }
|
||||
)
|
||||
);
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
for await (const fids of gen) {
|
||||
this.photosDone += fids.filter((f) => f).length;
|
||||
this.added(this.photos.filter((p) => fids.includes(p.fileid)));
|
||||
}
|
||||
|
||||
const n = this.photosDone;
|
||||
showInfo(
|
||||
this.n(
|
||||
"memories",
|
||||
"{n} item added to album",
|
||||
"{n} items added to album",
|
||||
n,
|
||||
{ n }
|
||||
)
|
||||
);
|
||||
this.close();
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -141,8 +141,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Mixins, Prop, Watch } from "vue-property-decorator";
|
||||
import GlobalMixin from "../../mixins/GlobalMixin";
|
||||
import { defineComponent, PropType } from "vue";
|
||||
|
||||
import Magnify from "vue-material-design-icons/Magnify.vue";
|
||||
import Close from "vue-material-design-icons/Close.vue";
|
||||
|
|
@ -173,7 +172,8 @@ type Collaborator = {
|
|||
type: Type;
|
||||
};
|
||||
|
||||
@Component({
|
||||
export default defineComponent({
|
||||
name: "AddToAlbumModal",
|
||||
components: {
|
||||
Magnify,
|
||||
Close,
|
||||
|
|
@ -188,250 +188,270 @@ type Collaborator = {
|
|||
NcPopover,
|
||||
NcEmptyContent,
|
||||
},
|
||||
})
|
||||
export default class AddToAlbumModal extends Mixins(GlobalMixin) {
|
||||
@Prop() private albumName: string;
|
||||
@Prop() collaborators: Collaborator[];
|
||||
@Prop() allowPublicLink: boolean;
|
||||
|
||||
private searchText = "";
|
||||
private availableCollaborators: { [key: string]: Collaborator } = {};
|
||||
private selectedCollaboratorsKeys: string[] = [];
|
||||
private currentSearchResults = [];
|
||||
private loadingAlbum = false;
|
||||
private errorFetchingAlbum = null;
|
||||
private loadingCollaborators = false;
|
||||
private errorFetchingCollaborators = null;
|
||||
private randomId = Math.random().toString().substring(2, 10);
|
||||
private publicLinkCopied = false;
|
||||
private config = {
|
||||
minSearchStringLength:
|
||||
parseInt(window.OC.config["sharing.minSearchStringLength"], 10) || 0,
|
||||
};
|
||||
props: {
|
||||
albumName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
collaborators: {
|
||||
type: Array as PropType<Collaborator[]>,
|
||||
required: true,
|
||||
},
|
||||
allowPublicLink: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
|
||||
get searchResults(): string[] {
|
||||
return this.currentSearchResults
|
||||
.filter(({ id }) => id !== getCurrentUser()?.uid)
|
||||
.map(({ type, id }) => `${type}:${id}`)
|
||||
.filter(
|
||||
data() {
|
||||
return {
|
||||
searchText: "",
|
||||
availableCollaborators: {} as { [key: string]: Collaborator },
|
||||
selectedCollaboratorsKeys: [] as string[],
|
||||
currentSearchResults: [] as Collaborator[],
|
||||
loadingAlbum: false,
|
||||
errorFetchingAlbum: null,
|
||||
loadingCollaborators: false,
|
||||
errorFetchingCollaborators: null,
|
||||
randomId: Math.random().toString().substring(2, 10),
|
||||
publicLinkCopied: false,
|
||||
config: {
|
||||
minSearchStringLength:
|
||||
parseInt(window.OC.config["sharing.minSearchStringLength"], 10) || 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
searchResults(): string[] {
|
||||
return this.currentSearchResults
|
||||
.filter(({ id }) => id !== getCurrentUser()?.uid)
|
||||
.map(({ type, id }) => `${type}:${id}`)
|
||||
.filter(
|
||||
(collaboratorKey) =>
|
||||
!this.selectedCollaboratorsKeys.includes(collaboratorKey)
|
||||
);
|
||||
},
|
||||
|
||||
listableSelectedCollaboratorsKeys(): string[] {
|
||||
return this.selectedCollaboratorsKeys.filter(
|
||||
(collaboratorKey) =>
|
||||
!this.selectedCollaboratorsKeys.includes(collaboratorKey)
|
||||
this.availableCollaborators[collaboratorKey].type !==
|
||||
Type.SHARE_TYPE_LINK
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
get listableSelectedCollaboratorsKeys(): string[] {
|
||||
return this.selectedCollaboratorsKeys.filter(
|
||||
(collaboratorKey) =>
|
||||
this.availableCollaborators[collaboratorKey].type !==
|
||||
Type.SHARE_TYPE_LINK
|
||||
);
|
||||
}
|
||||
selectedCollaborators(): Collaborator[] {
|
||||
return this.selectedCollaboratorsKeys.map(
|
||||
(collaboratorKey) => this.availableCollaborators[collaboratorKey]
|
||||
);
|
||||
},
|
||||
|
||||
get selectedCollaborators(): Collaborator[] {
|
||||
return this.selectedCollaboratorsKeys.map(
|
||||
(collaboratorKey) => this.availableCollaborators[collaboratorKey]
|
||||
);
|
||||
}
|
||||
isPublicLinkSelected(): boolean {
|
||||
return this.selectedCollaboratorsKeys.includes(`${Type.SHARE_TYPE_LINK}`);
|
||||
},
|
||||
|
||||
get isPublicLinkSelected(): boolean {
|
||||
return this.selectedCollaboratorsKeys.includes(`${Type.SHARE_TYPE_LINK}`);
|
||||
}
|
||||
|
||||
get publicLink(): Collaborator {
|
||||
return this.availableCollaborators[Type.SHARE_TYPE_LINK];
|
||||
}
|
||||
|
||||
@Watch("collaborators")
|
||||
collaboratorsChanged(collaborators) {
|
||||
this.populateCollaborators(collaborators);
|
||||
}
|
||||
publicLink(): Collaborator {
|
||||
return this.availableCollaborators[Type.SHARE_TYPE_LINK];
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
collaborators(collaborators) {
|
||||
this.populateCollaborators(collaborators);
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.searchCollaborators();
|
||||
this.populateCollaborators(this.collaborators);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Fetch possible collaborators.
|
||||
*/
|
||||
async searchCollaborators() {
|
||||
if (this.searchText.length >= 1) {
|
||||
(<any>this.$refs.popover).$refs.popover.show();
|
||||
}
|
||||
|
||||
try {
|
||||
if (this.searchText.length < this.config.minSearchStringLength) {
|
||||
return;
|
||||
methods: {
|
||||
/**
|
||||
* Fetch possible collaborators.
|
||||
*/
|
||||
async searchCollaborators() {
|
||||
if (this.searchText.length >= 1) {
|
||||
(<any>this.$refs.popover).$refs.popover.show();
|
||||
}
|
||||
|
||||
this.loadingCollaborators = true;
|
||||
const response = await axios.get(
|
||||
generateOcsUrl("core/autocomplete/get"),
|
||||
{
|
||||
params: {
|
||||
search: this.searchText,
|
||||
itemType: "share-recipients",
|
||||
shareTypes: [Type.SHARE_TYPE_USER, Type.SHARE_TYPE_GROUP],
|
||||
},
|
||||
try {
|
||||
if (this.searchText.length < this.config.minSearchStringLength) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.loadingCollaborators = true;
|
||||
const response = await axios.get(
|
||||
generateOcsUrl("core/autocomplete/get"),
|
||||
{
|
||||
params: {
|
||||
search: this.searchText,
|
||||
itemType: "share-recipients",
|
||||
shareTypes: [Type.SHARE_TYPE_USER, Type.SHARE_TYPE_GROUP],
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
this.currentSearchResults = response.data.ocs.data.map(
|
||||
(collaborator) => {
|
||||
switch (collaborator.source) {
|
||||
case "users":
|
||||
return {
|
||||
id: collaborator.id,
|
||||
label: collaborator.label,
|
||||
type: Type.SHARE_TYPE_USER,
|
||||
};
|
||||
case "groups":
|
||||
return {
|
||||
id: collaborator.id,
|
||||
label: collaborator.label,
|
||||
type: Type.SHARE_TYPE_GROUP,
|
||||
};
|
||||
default:
|
||||
throw new Error(
|
||||
`Invalid collaborator source ${collaborator.source}`
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
this.availableCollaborators = {
|
||||
...this.availableCollaborators,
|
||||
...this.currentSearchResults.reduce(this.indexCollaborators, {}),
|
||||
};
|
||||
} catch (error) {
|
||||
this.errorFetchingCollaborators = error;
|
||||
showError(this.t("photos", "Failed to fetch collaborators list."));
|
||||
} finally {
|
||||
this.loadingCollaborators = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Populate selectedCollaboratorsKeys and availableCollaborators.
|
||||
*/
|
||||
populateCollaborators(collaborators: Collaborator[]) {
|
||||
const initialCollaborators = collaborators.reduce(
|
||||
this.indexCollaborators,
|
||||
{}
|
||||
);
|
||||
|
||||
this.currentSearchResults = response.data.ocs.data.map((collaborator) => {
|
||||
switch (collaborator.source) {
|
||||
case "users":
|
||||
return {
|
||||
id: collaborator.id,
|
||||
label: collaborator.label,
|
||||
type: Type.SHARE_TYPE_USER,
|
||||
};
|
||||
case "groups":
|
||||
return {
|
||||
id: collaborator.id,
|
||||
label: collaborator.label,
|
||||
type: Type.SHARE_TYPE_GROUP,
|
||||
};
|
||||
default:
|
||||
throw new Error(
|
||||
`Invalid collaborator source ${collaborator.source}`
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
this.selectedCollaboratorsKeys = Object.keys(initialCollaborators);
|
||||
this.availableCollaborators = {
|
||||
3: {
|
||||
id: "",
|
||||
label: this.t("photos", "Public link"),
|
||||
type: Type.SHARE_TYPE_LINK,
|
||||
},
|
||||
...this.availableCollaborators,
|
||||
...this.currentSearchResults.reduce(this.indexCollaborators, {}),
|
||||
...initialCollaborators,
|
||||
};
|
||||
} catch (error) {
|
||||
this.errorFetchingCollaborators = error;
|
||||
showError(this.t("photos", "Failed to fetch collaborators list."));
|
||||
} finally {
|
||||
this.loadingCollaborators = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Populate selectedCollaboratorsKeys and availableCollaborators.
|
||||
*/
|
||||
populateCollaborators(collaborators: Collaborator[]) {
|
||||
const initialCollaborators = collaborators.reduce(
|
||||
this.indexCollaborators,
|
||||
{}
|
||||
);
|
||||
this.selectedCollaboratorsKeys = Object.keys(initialCollaborators);
|
||||
this.availableCollaborators = {
|
||||
3: {
|
||||
/**
|
||||
* @param {Object<string, Collaborator>} collaborators - Index of collaborators
|
||||
* @param {Collaborator} collaborator - A collaborator
|
||||
*/
|
||||
indexCollaborators(
|
||||
collaborators: { [s: string]: Collaborator },
|
||||
collaborator: Collaborator
|
||||
) {
|
||||
return {
|
||||
...collaborators,
|
||||
[`${collaborator.type}${
|
||||
collaborator.type === Type.SHARE_TYPE_LINK ? "" : ":"
|
||||
}${collaborator.type === Type.SHARE_TYPE_LINK ? "" : collaborator.id}`]:
|
||||
collaborator,
|
||||
};
|
||||
},
|
||||
|
||||
async createPublicLinkForAlbum() {
|
||||
this.selectEntity(`${Type.SHARE_TYPE_LINK}`);
|
||||
await this.updateAlbumCollaborators();
|
||||
try {
|
||||
this.loadingAlbum = true;
|
||||
this.errorFetchingAlbum = null;
|
||||
|
||||
const album = await dav.getAlbum(
|
||||
getCurrentUser()?.uid.toString(),
|
||||
this.albumName
|
||||
);
|
||||
this.populateCollaborators(album.collaborators);
|
||||
} catch (error) {
|
||||
if (error.response?.status === 404) {
|
||||
this.errorFetchingAlbum = 404;
|
||||
} else {
|
||||
this.errorFetchingAlbum = error;
|
||||
}
|
||||
|
||||
showError(this.t("photos", "Failed to fetch album."));
|
||||
} finally {
|
||||
this.loadingAlbum = false;
|
||||
}
|
||||
},
|
||||
|
||||
async deletePublicLink() {
|
||||
this.unselectEntity(`${Type.SHARE_TYPE_LINK}`);
|
||||
this.availableCollaborators[3] = {
|
||||
id: "",
|
||||
label: this.t("photos", "Public link"),
|
||||
type: Type.SHARE_TYPE_LINK,
|
||||
},
|
||||
...this.availableCollaborators,
|
||||
...initialCollaborators,
|
||||
};
|
||||
}
|
||||
};
|
||||
this.publicLinkCopied = false;
|
||||
await this.updateAlbumCollaborators();
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {Object<string, Collaborator>} collaborators - Index of collaborators
|
||||
* @param {Collaborator} collaborator - A collaborator
|
||||
*/
|
||||
indexCollaborators(
|
||||
collaborators: { [s: string]: Collaborator },
|
||||
collaborator: Collaborator
|
||||
) {
|
||||
return {
|
||||
...collaborators,
|
||||
[`${collaborator.type}${
|
||||
collaborator.type === Type.SHARE_TYPE_LINK ? "" : ":"
|
||||
}${collaborator.type === Type.SHARE_TYPE_LINK ? "" : collaborator.id}`]:
|
||||
collaborator,
|
||||
};
|
||||
}
|
||||
async updateAlbumCollaborators() {
|
||||
try {
|
||||
const album = await dav.getAlbum(
|
||||
getCurrentUser()?.uid.toString(),
|
||||
this.albumName
|
||||
);
|
||||
await dav.updateAlbum(album, {
|
||||
albumName: this.albumName,
|
||||
properties: {
|
||||
collaborators: this.selectedCollaborators,
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
showError(this.t("photos", "Failed to update album."));
|
||||
} finally {
|
||||
this.loadingAlbum = false;
|
||||
}
|
||||
},
|
||||
|
||||
async createPublicLinkForAlbum() {
|
||||
this.selectEntity(`${Type.SHARE_TYPE_LINK}`);
|
||||
await this.updateAlbumCollaborators();
|
||||
try {
|
||||
this.loadingAlbum = true;
|
||||
this.errorFetchingAlbum = null;
|
||||
|
||||
const album = await dav.getAlbum(
|
||||
getCurrentUser()?.uid.toString(),
|
||||
this.albumName
|
||||
async copyPublicLink() {
|
||||
await navigator.clipboard.writeText(
|
||||
`${window.location.protocol}//${window.location.host}${generateUrl(
|
||||
`apps/photos/public/${this.publicLink.id}`
|
||||
)}`
|
||||
);
|
||||
this.populateCollaborators(album.collaborators);
|
||||
} catch (error) {
|
||||
if (error.response?.status === 404) {
|
||||
this.errorFetchingAlbum = 404;
|
||||
} else {
|
||||
this.errorFetchingAlbum = error;
|
||||
this.publicLinkCopied = true;
|
||||
setTimeout(() => {
|
||||
this.publicLinkCopied = false;
|
||||
}, 10000);
|
||||
},
|
||||
|
||||
selectEntity(collaboratorKey) {
|
||||
if (this.selectedCollaboratorsKeys.includes(collaboratorKey)) {
|
||||
return;
|
||||
}
|
||||
|
||||
showError(this.t("photos", "Failed to fetch album."));
|
||||
} finally {
|
||||
this.loadingAlbum = false;
|
||||
}
|
||||
}
|
||||
(<any>this.$refs.popover).$refs.popover.hide();
|
||||
this.selectedCollaboratorsKeys.push(collaboratorKey);
|
||||
},
|
||||
|
||||
async deletePublicLink() {
|
||||
this.unselectEntity(`${Type.SHARE_TYPE_LINK}`);
|
||||
this.availableCollaborators[3] = {
|
||||
id: "",
|
||||
label: this.t("photos", "Public link"),
|
||||
type: Type.SHARE_TYPE_LINK,
|
||||
};
|
||||
this.publicLinkCopied = false;
|
||||
await this.updateAlbumCollaborators();
|
||||
}
|
||||
unselectEntity(collaboratorKey) {
|
||||
const index = this.selectedCollaboratorsKeys.indexOf(collaboratorKey);
|
||||
|
||||
async updateAlbumCollaborators() {
|
||||
try {
|
||||
const album = await dav.getAlbum(
|
||||
getCurrentUser()?.uid.toString(),
|
||||
this.albumName
|
||||
);
|
||||
await dav.updateAlbum(album, {
|
||||
albumName: this.albumName,
|
||||
properties: {
|
||||
collaborators: this.selectedCollaborators,
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
showError(this.t("photos", "Failed to update album."));
|
||||
} finally {
|
||||
this.loadingAlbum = false;
|
||||
}
|
||||
}
|
||||
if (index === -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
async copyPublicLink() {
|
||||
await navigator.clipboard.writeText(
|
||||
`${window.location.protocol}//${window.location.host}${generateUrl(
|
||||
`apps/photos/public/${this.publicLink.id}`
|
||||
)}`
|
||||
);
|
||||
this.publicLinkCopied = true;
|
||||
setTimeout(() => {
|
||||
this.publicLinkCopied = false;
|
||||
}, 10000);
|
||||
}
|
||||
|
||||
selectEntity(collaboratorKey) {
|
||||
if (this.selectedCollaboratorsKeys.includes(collaboratorKey)) {
|
||||
return;
|
||||
}
|
||||
|
||||
(<any>this.$refs.popover).$refs.popover.hide();
|
||||
this.selectedCollaboratorsKeys.push(collaboratorKey);
|
||||
}
|
||||
|
||||
unselectEntity(collaboratorKey) {
|
||||
const index = this.selectedCollaboratorsKeys.indexOf(collaboratorKey);
|
||||
|
||||
if (index === -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.selectedCollaboratorsKeys.splice(index, 1);
|
||||
}
|
||||
}
|
||||
this.selectedCollaboratorsKeys.splice(index, 1);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.manage-collaborators {
|
||||
|
|
|
|||
|
|
@ -21,8 +21,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Emit, Mixins } from "vue-property-decorator";
|
||||
import GlobalMixin from "../../mixins/GlobalMixin";
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
import { showError } from "@nextcloud/dialogs";
|
||||
import * as dav from "../../services/DavRequests";
|
||||
|
|
@ -30,53 +29,59 @@ import * as dav from "../../services/DavRequests";
|
|||
import Modal from "./Modal.vue";
|
||||
import AlbumForm from "./AlbumForm.vue";
|
||||
|
||||
@Component({
|
||||
export default defineComponent({
|
||||
name: "AlbumCreateModal",
|
||||
components: {
|
||||
Modal,
|
||||
AlbumForm,
|
||||
},
|
||||
})
|
||||
export default class AlbumCreateModal extends Mixins(GlobalMixin) {
|
||||
private show = false;
|
||||
private album: any = null;
|
||||
|
||||
/**
|
||||
* Open the modal
|
||||
* @param edit If true, the modal will be opened in edit mode
|
||||
*/
|
||||
public async open(edit: boolean) {
|
||||
if (edit) {
|
||||
try {
|
||||
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"));
|
||||
return;
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
album: null as any,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Open the modal
|
||||
* @param edit If true, the modal will be opened in edit mode
|
||||
*/
|
||||
async open(edit: boolean) {
|
||||
if (edit) {
|
||||
try {
|
||||
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"));
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
this.album = null;
|
||||
}
|
||||
} else {
|
||||
this.album = null;
|
||||
}
|
||||
|
||||
this.show = true;
|
||||
}
|
||||
this.show = true;
|
||||
},
|
||||
|
||||
@Emit("close")
|
||||
public close() {
|
||||
this.show = false;
|
||||
}
|
||||
close() {
|
||||
this.show = false;
|
||||
this.$emit("close");
|
||||
},
|
||||
|
||||
public done({ album }: any) {
|
||||
if (!this.album || album.basename !== this.album.basename) {
|
||||
const user = album.filename.split("/")[2];
|
||||
const name = album.basename;
|
||||
this.$router.push({ name: "albums", params: { user, name } });
|
||||
}
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
done({ album }: any) {
|
||||
if (!this.album || album.basename !== this.album.basename) {
|
||||
const user = album.filename.split("/")[2];
|
||||
const name = album.basename;
|
||||
this.$router.push({ name: "albums", params: { user, name } });
|
||||
}
|
||||
this.close();
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -23,70 +23,79 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Emit, Mixins, Watch } from "vue-property-decorator";
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
import NcButton from "@nextcloud/vue/dist/Components/NcButton";
|
||||
const NcTextField = () => import("@nextcloud/vue/dist/Components/NcTextField");
|
||||
import { showError } from "@nextcloud/dialogs";
|
||||
import { getCurrentUser } from "@nextcloud/auth";
|
||||
import Modal from "./Modal.vue";
|
||||
import GlobalMixin from "../../mixins/GlobalMixin";
|
||||
import client from "../../services/DavClient";
|
||||
|
||||
@Component({
|
||||
export default defineComponent({
|
||||
name: "AlbumDeleteModal",
|
||||
components: {
|
||||
NcButton,
|
||||
NcTextField,
|
||||
Modal,
|
||||
},
|
||||
})
|
||||
export default class AlbumDeleteModal extends Mixins(GlobalMixin) {
|
||||
private user: string = "";
|
||||
private name: string = "";
|
||||
private show = false;
|
||||
|
||||
@Emit("close")
|
||||
public close() {
|
||||
this.show = false;
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
user: "",
|
||||
name: "",
|
||||
};
|
||||
},
|
||||
|
||||
public open() {
|
||||
const user = this.$route.params.user || "";
|
||||
if (this.$route.params.user !== getCurrentUser()?.uid) {
|
||||
showError(
|
||||
this.t("memories", 'Only user "{user}" can delete this album', { user })
|
||||
);
|
||||
return;
|
||||
}
|
||||
this.show = true;
|
||||
}
|
||||
|
||||
@Watch("$route")
|
||||
async routeChange(from: any, to: any) {
|
||||
this.refreshParams();
|
||||
}
|
||||
watch: {
|
||||
$route: async function (from: any, to: any) {
|
||||
this.refreshParams();
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.refreshParams();
|
||||
}
|
||||
},
|
||||
|
||||
public refreshParams() {
|
||||
this.user = this.$route.params.user || "";
|
||||
this.name = this.$route.params.name || "";
|
||||
}
|
||||
methods: {
|
||||
close() {
|
||||
this.show = false;
|
||||
this.$emit("close");
|
||||
},
|
||||
|
||||
public async save() {
|
||||
try {
|
||||
await client.deleteFile(`/photos/${this.user}/albums/${this.name}`);
|
||||
this.$router.push({ name: "albums" });
|
||||
this.close();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
showError(
|
||||
this.t("photos", "Failed to delete {name}.", {
|
||||
name: this.name,
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
open() {
|
||||
const user = this.$route.params.user || "";
|
||||
if (this.$route.params.user !== getCurrentUser()?.uid) {
|
||||
showError(
|
||||
this.t("memories", 'Only user "{user}" can delete this album', {
|
||||
user,
|
||||
})
|
||||
);
|
||||
return;
|
||||
}
|
||||
this.show = true;
|
||||
},
|
||||
|
||||
refreshParams() {
|
||||
this.user = this.$route.params.user || "";
|
||||
this.name = this.$route.params.name || "";
|
||||
},
|
||||
|
||||
async save() {
|
||||
try {
|
||||
await client.deleteFile(`/photos/${this.user}/albums/${this.name}`);
|
||||
this.$router.push({ name: "albums" });
|
||||
this.close();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
showError(
|
||||
this.t("photos", "Failed to delete {name}.", {
|
||||
name: this.name,
|
||||
})
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -97,8 +97,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Emit, Mixins, Prop } from "vue-property-decorator";
|
||||
import GlobalMixin from "../../mixins/GlobalMixin";
|
||||
import { defineComponent, PropType } from "vue";
|
||||
|
||||
import { getCurrentUser } from "@nextcloud/auth";
|
||||
import NcButton from "@nextcloud/vue/dist/Components/NcButton";
|
||||
|
|
@ -112,7 +111,8 @@ import AlbumCollaborators from "./AlbumCollaborators.vue";
|
|||
import Send from "vue-material-design-icons/Send.vue";
|
||||
import AccountMultiplePlus from "vue-material-design-icons/AccountMultiplePlus.vue";
|
||||
|
||||
@Component({
|
||||
export default defineComponent({
|
||||
name: "AlbumForm",
|
||||
components: {
|
||||
NcButton,
|
||||
NcLoadingIcon,
|
||||
|
|
@ -122,35 +122,48 @@ import AccountMultiplePlus from "vue-material-design-icons/AccountMultiplePlus.v
|
|||
Send,
|
||||
AccountMultiplePlus,
|
||||
},
|
||||
})
|
||||
export default class AlbumForm extends Mixins(GlobalMixin) {
|
||||
@Prop() private album: any;
|
||||
@Prop() private displayBackButton: boolean;
|
||||
|
||||
private showCollaboratorView = false;
|
||||
private albumName = "";
|
||||
private albumLocation = "";
|
||||
private loading = false;
|
||||
props: {
|
||||
album: {
|
||||
type: Object as PropType<any>,
|
||||
default: null,
|
||||
},
|
||||
displayBackButton: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* @return Whether sharing is enabled.
|
||||
*/
|
||||
get editMode(): boolean {
|
||||
return Boolean(this.album);
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
showCollaboratorView: false,
|
||||
albumName: "",
|
||||
albumLocation: "",
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
|
||||
get saveText(): string {
|
||||
return this.editMode
|
||||
? this.t("photos", "Save")
|
||||
: this.t("photos", "Create album");
|
||||
}
|
||||
computed: {
|
||||
/**
|
||||
* @return Whether sharing is enabled.
|
||||
*/
|
||||
editMode(): boolean {
|
||||
return Boolean(this.album);
|
||||
},
|
||||
|
||||
/**
|
||||
* @return Whether sharing is enabled.
|
||||
*/
|
||||
get sharingEnabled(): boolean {
|
||||
return window.OC.Share !== undefined;
|
||||
}
|
||||
saveText(): string {
|
||||
return this.editMode
|
||||
? this.t("photos", "Save")
|
||||
: this.t("photos", "Create album");
|
||||
},
|
||||
|
||||
/**
|
||||
* @return Whether sharing is enabled.
|
||||
*/
|
||||
sharingEnabled(): boolean {
|
||||
return window.OC.Share !== undefined;
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.editMode) {
|
||||
|
|
@ -158,76 +171,79 @@ export default class AlbumForm extends Mixins(GlobalMixin) {
|
|||
this.albumLocation = this.album.location;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
(<any>this.$refs.nameInput).$el.getElementsByTagName("input")[0].focus();
|
||||
(<any>this.$refs.nameInput)?.$el.getElementsByTagName("input")[0].focus();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
submit(collaborators = []) {
|
||||
if (this.albumName === "" || this.loading) {
|
||||
return;
|
||||
}
|
||||
if (this.editMode) {
|
||||
this.handleUpdateAlbum();
|
||||
} else {
|
||||
this.handleCreateAlbum(collaborators);
|
||||
}
|
||||
}
|
||||
|
||||
async handleCreateAlbum(collaborators = []) {
|
||||
try {
|
||||
this.loading = true;
|
||||
let album = {
|
||||
basename: this.albumName,
|
||||
filename: `/photos/${getCurrentUser()?.uid}/albums/${this.albumName}`,
|
||||
nbItems: 0,
|
||||
location: this.albumLocation,
|
||||
lastPhoto: -1,
|
||||
date: moment().format("MMMM YYYY"),
|
||||
collaborators,
|
||||
};
|
||||
await dav.createAlbum(album.basename);
|
||||
|
||||
if (this.albumLocation !== "" || collaborators.length !== 0) {
|
||||
album = await dav.updateAlbum(album, {
|
||||
albumName: this.albumName,
|
||||
properties: {
|
||||
location: this.albumLocation,
|
||||
collaborators,
|
||||
},
|
||||
});
|
||||
methods: {
|
||||
submit(collaborators = []) {
|
||||
if (this.albumName === "" || this.loading) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$emit("done", { album });
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async handleUpdateAlbum() {
|
||||
try {
|
||||
this.loading = true;
|
||||
let album = { ...this.album };
|
||||
if (this.album.basename !== this.albumName) {
|
||||
album = await dav.renameAlbum(this.album, {
|
||||
currentAlbumName: this.album.basename,
|
||||
newAlbumName: this.albumName,
|
||||
});
|
||||
if (this.editMode) {
|
||||
this.handleUpdateAlbum();
|
||||
} else {
|
||||
this.handleCreateAlbum(collaborators);
|
||||
}
|
||||
if (this.album.location !== this.albumLocation) {
|
||||
album.location = await dav.updateAlbum(this.album, {
|
||||
albumName: this.albumName,
|
||||
properties: { location: this.albumLocation },
|
||||
});
|
||||
}
|
||||
this.$emit("done", { album });
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@Emit("back")
|
||||
back() {}
|
||||
}
|
||||
async handleCreateAlbum(collaborators = []) {
|
||||
try {
|
||||
this.loading = true;
|
||||
let album = {
|
||||
basename: this.albumName,
|
||||
filename: `/photos/${getCurrentUser()?.uid}/albums/${this.albumName}`,
|
||||
nbItems: 0,
|
||||
location: this.albumLocation,
|
||||
lastPhoto: -1,
|
||||
date: moment().format("MMMM YYYY"),
|
||||
collaborators,
|
||||
};
|
||||
await dav.createAlbum(album.basename);
|
||||
|
||||
if (this.albumLocation !== "" || collaborators.length !== 0) {
|
||||
album = await dav.updateAlbum(album, {
|
||||
albumName: this.albumName,
|
||||
properties: {
|
||||
location: this.albumLocation,
|
||||
collaborators,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
this.$emit("done", { album });
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
async handleUpdateAlbum() {
|
||||
try {
|
||||
this.loading = true;
|
||||
let album = { ...this.album };
|
||||
if (this.album.basename !== this.albumName) {
|
||||
album = await dav.renameAlbum(this.album, {
|
||||
currentAlbumName: this.album.basename,
|
||||
newAlbumName: this.albumName,
|
||||
});
|
||||
}
|
||||
if (this.album.location !== this.albumLocation) {
|
||||
album.location = await dav.updateAlbum(this.album, {
|
||||
albumName: this.albumName,
|
||||
properties: { location: this.albumLocation },
|
||||
});
|
||||
}
|
||||
this.$emit("done", { album });
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
back() {
|
||||
this.$emit("back");
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.album-form {
|
||||
|
|
|
|||
|
|
@ -57,8 +57,8 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Emit, Mixins } from "vue-property-decorator";
|
||||
import GlobalMixin from "../../mixins/GlobalMixin";
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
import { getCurrentUser } from "@nextcloud/auth";
|
||||
|
||||
import AlbumForm from "./AlbumForm.vue";
|
||||
|
|
@ -74,7 +74,8 @@ import { IAlbum, IPhoto } from "../../types";
|
|||
import axios from "@nextcloud/axios";
|
||||
import { API } from "../../services/API";
|
||||
|
||||
@Component({
|
||||
export default defineComponent({
|
||||
name: "AlbumPicker",
|
||||
components: {
|
||||
AlbumForm,
|
||||
Plus,
|
||||
|
|
@ -83,6 +84,7 @@ import { API } from "../../services/API";
|
|||
NcListItem,
|
||||
NcLoadingIcon,
|
||||
},
|
||||
|
||||
filters: {
|
||||
toCoverUrl(fileId: string) {
|
||||
return getPreviewUrl(
|
||||
|
|
@ -94,42 +96,48 @@ import { API } from "../../services/API";
|
|||
);
|
||||
},
|
||||
},
|
||||
})
|
||||
export default class AlbumPicker extends Mixins(GlobalMixin) {
|
||||
private showAlbumCreationForm = false;
|
||||
private albums: IAlbum[] = [];
|
||||
private loadingAlbums = true;
|
||||
|
||||
data() {
|
||||
return {
|
||||
showAlbumCreationForm: false,
|
||||
albums: [] as IAlbum[],
|
||||
loadingAlbums: true,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.loadAlbums();
|
||||
}
|
||||
},
|
||||
|
||||
albumCreatedHandler() {
|
||||
this.showAlbumCreationForm = false;
|
||||
this.loadAlbums();
|
||||
}
|
||||
methods: {
|
||||
albumCreatedHandler() {
|
||||
this.showAlbumCreationForm = false;
|
||||
this.loadAlbums();
|
||||
},
|
||||
|
||||
getAlbumName(album: IAlbum) {
|
||||
if (album.user === getCurrentUser()?.uid) {
|
||||
return album.name;
|
||||
}
|
||||
return `${album.name} (${album.user})`;
|
||||
}
|
||||
getAlbumName(album: IAlbum) {
|
||||
if (album.user === getCurrentUser()?.uid) {
|
||||
return album.name;
|
||||
}
|
||||
return `${album.name} (${album.user})`;
|
||||
},
|
||||
|
||||
async loadAlbums() {
|
||||
try {
|
||||
const res = await axios.get<IAlbum[]>(API.ALBUM_LIST());
|
||||
this.albums = res.data;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
this.loadingAlbums = false;
|
||||
}
|
||||
}
|
||||
async loadAlbums() {
|
||||
try {
|
||||
const res = await axios.get<IAlbum[]>(API.ALBUM_LIST());
|
||||
this.albums = res.data;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
this.loadingAlbums = false;
|
||||
}
|
||||
},
|
||||
|
||||
@Emit("select")
|
||||
pickAlbum(album: IAlbum) {}
|
||||
}
|
||||
pickAlbum(album: IAlbum) {
|
||||
this.$emit("select", album);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -28,8 +28,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Emit, Mixins } from "vue-property-decorator";
|
||||
import GlobalMixin from "../../mixins/GlobalMixin";
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
import NcButton from "@nextcloud/vue/dist/Components/NcButton";
|
||||
import NcLoadingIcon from "@nextcloud/vue/dist/Components/NcLoadingIcon";
|
||||
|
|
@ -39,47 +38,53 @@ import * as dav from "../../services/DavRequests";
|
|||
import Modal from "./Modal.vue";
|
||||
import AlbumCollaborators from "./AlbumCollaborators.vue";
|
||||
|
||||
@Component({
|
||||
export default defineComponent({
|
||||
name: "AlbumShareModal",
|
||||
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;
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
album: null as any,
|
||||
show: false,
|
||||
loadingAddCollaborators: false,
|
||||
};
|
||||
},
|
||||
|
||||
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;
|
||||
}
|
||||
methods: {
|
||||
close() {
|
||||
this.show = false;
|
||||
this.album = null;
|
||||
this.$emit("close");
|
||||
},
|
||||
|
||||
async handleSetCollaborators(collaborators: any[]) {
|
||||
try {
|
||||
async open() {
|
||||
this.show = true;
|
||||
this.loadingAddCollaborators = true;
|
||||
await dav.updateAlbum(this.album, {
|
||||
albumName: this.album.basename,
|
||||
properties: { collaborators },
|
||||
});
|
||||
this.close();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
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>
|
||||
Loading…
Reference in New Issue