Add collaborators management views

Signed-off-by: Louis Chemineau <louis@chmn.me>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

1 files changed, 1591 insertions, 0 deletions

diff --git a/js/photos-src_mixins_FetchAlbumsMixin_js-src_components_Albums_AlbumForm_vue.js b/js/photos-src_mixins_FetchAlbumsMixin_js-src_components_Albums_AlbumForm_vue.js
new file mode 100644
index 00000000..ca855727
--- /dev/null
+++ b/js/photos-src_mixins_FetchAlbumsMixin_js-src_components_Albums_AlbumForm_vue.js
@@ -0,0 +1,1591 @@
+"use strict";
+(self["webpackChunkphotos"] = self["webpackChunkphotos"] || []).push([["src_mixins_FetchAlbumsMixin_js-src_components_Albums_AlbumForm_vue"],{
+
+/***/ "./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/Albums/AlbumForm.vue?vue&type=script&lang=js&":
+/*!**************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/Albums/AlbumForm.vue?vue&type=script&lang=js& ***!
+  \**************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! vuex */ "./node_modules/vuex/dist/vuex.esm.js");
+/* harmony import */ var vue_material_design_icons_MapMarker__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue-material-design-icons/MapMarker */ "./node_modules/vue-material-design-icons/MapMarker.vue");
+/* harmony import */ var vue_material_design_icons_AccountMultiplePlus__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vue-material-design-icons/AccountMultiplePlus */ "./node_modules/vue-material-design-icons/AccountMultiplePlus.vue");
+/* harmony import */ var vue_material_design_icons_Send__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! vue-material-design-icons/Send */ "./node_modules/vue-material-design-icons/Send.vue");
+/* harmony import */ var _nextcloud_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @nextcloud/vue */ "./node_modules/@nextcloud/vue/dist/ncvuecomponents.js");
+/* harmony import */ var _nextcloud_vue__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_nextcloud_vue__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _nextcloud_moment__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @nextcloud/moment */ "./node_modules/@nextcloud/moment/dist/index.js");
+/* harmony import */ var _nextcloud_moment__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_nextcloud_moment__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _CollaboratorsSelectionForm_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./CollaboratorsSelectionForm.vue */ "./src/components/Albums/CollaboratorsSelectionForm.vue");
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+
+
+
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
+  name: 'AlbumForm',
+  components: {
+    MapMarker: vue_material_design_icons_MapMarker__WEBPACK_IMPORTED_MODULE_0__["default"],
+    AccountMultiplePlus: vue_material_design_icons_AccountMultiplePlus__WEBPACK_IMPORTED_MODULE_1__["default"],
+    Send: vue_material_design_icons_Send__WEBPACK_IMPORTED_MODULE_2__["default"],
+    NcButton: _nextcloud_vue__WEBPACK_IMPORTED_MODULE_3__.NcButton,
+    NcLoadingIcon: _nextcloud_vue__WEBPACK_IMPORTED_MODULE_3__.NcLoadingIcon,
+    NcTextField: _nextcloud_vue__WEBPACK_IMPORTED_MODULE_3__.NcTextField,
+    CollaboratorsSelectionForm: _CollaboratorsSelectionForm_vue__WEBPACK_IMPORTED_MODULE_5__["default"]
+  },
+  props: {
+    album: {
+      type: Object,
+      default: null
+    },
+    displayBackButton: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      showCollaboratorView: false,
+      albumName: '',
+      albumLocation: '',
+      loading: false
+    };
+  },
+
+  computed: {
+    /**
+     * @return {boolean} Whether sharing is enabled.
+     */
+    editMode() {
+      return this.album !== null;
+    },
+
+    /**
+     * @return {boolean} Whether sharing is enabled.
+     */
+    sharingEnabled() {
+      return OC.Share !== undefined;
+    }
+
+  },
+
+  mounted() {
+    if (this.editMode) {
+      this.albumName = this.album.basename;
+      this.albumLocation = this.album.location;
+    }
+
+    this.$nextTick(() => {
+      this.$refs.nameInput.$el.getElementsByTagName('input')[0].focus();
+    });
+  },
+
+  methods: { ...(0,vuex__WEBPACK_IMPORTED_MODULE_6__.mapActions)(['createAlbum', 'renameAlbum', 'updateAlbum']),
+
+    submit() {
+      let collaborators = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+
+      if (this.albumName === '' || this.loading) {
+        return;
+      }
+
+      if (this.editMode) {
+        this.handleUpdateAlbum();
+      } else {
+        this.handleCreateAlbum(collaborators);
+      }
+    },
+
+    async handleCreateAlbum() {
+      let collaborators = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+
+      try {
+        this.loading = true;
+        let album = await this.createAlbum({
+          album: {
+            basename: this.albumName,
+            nbItems: 0,
+            location: this.albumLocation,
+            lastPhoto: -1,
+            date: _nextcloud_moment__WEBPACK_IMPORTED_MODULE_4___default()().format('MMMM YYYY'),
+            collaborators
+          }
+        });
+
+        if (this.albumLocation !== '' || collaborators.length !== 0) {
+          album = await this.updateAlbum({
+            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 this.renameAlbum({
+            currentAlbumName: this.album.basename,
+            newAlbumName: this.albumName
+          });
+        }
+
+        if (this.album.location !== this.albumLocation) {
+          album.location = await this.updateAlbum({
+            albumName: this.albumName,
+            properties: {
+              location: this.albumLocation
+            }
+          });
+        }
+
+        this.$emit('done', {
+          album
+        });
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    back() {
+      this.$emit('back');
+    }
+
+  }
+});
+
+/***/ }),
+
+/***/ "./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/Albums/CollaboratorsSelectionForm.vue?vue&type=script&lang=js&":
+/*!*******************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/Albums/CollaboratorsSelectionForm.vue?vue&type=script&lang=js& ***!
+  \*******************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var vue_material_design_icons_Magnify__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue-material-design-icons/Magnify */ "./node_modules/vue-material-design-icons/Magnify.vue");
+/* harmony import */ var vue_material_design_icons_Close__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vue-material-design-icons/Close */ "./node_modules/vue-material-design-icons/Close.vue");
+/* harmony import */ var _nextcloud_axios__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @nextcloud/axios */ "./node_modules/@nextcloud/axios/dist/index.esm.js");
+/* harmony import */ var _nextcloud_dialogs__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @nextcloud/dialogs */ "./node_modules/@nextcloud/dialogs/dist/index.es.js");
+/* harmony import */ var _nextcloud_auth__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @nextcloud/auth */ "./node_modules/@nextcloud/auth/dist/index.esm.js");
+/* harmony import */ var _nextcloud_router__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @nextcloud/router */ "./node_modules/@nextcloud/router/dist/index.js");
+/* harmony import */ var _nextcloud_vue__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @nextcloud/vue */ "./node_modules/@nextcloud/vue/dist/ncvuecomponents.js");
+/* harmony import */ var _nextcloud_vue__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_nextcloud_vue__WEBPACK_IMPORTED_MODULE_6__);
+/* harmony import */ var _services_logger_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../services/logger.js */ "./src/services/logger.js");
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+
+
+
+
+
+
+const SHARE = {
+  TYPE: {
+    USER: 0,
+    GROUP: 1 // LINK: 3,
+
+  }
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
+  name: 'CollaboratorsSelectionForm',
+  components: {
+    Magnify: vue_material_design_icons_Magnify__WEBPACK_IMPORTED_MODULE_0__["default"],
+    Close: vue_material_design_icons_Close__WEBPACK_IMPORTED_MODULE_1__["default"],
+    NcLoadingIcon: _nextcloud_vue__WEBPACK_IMPORTED_MODULE_6__.NcLoadingIcon,
+    NcButton: _nextcloud_vue__WEBPACK_IMPORTED_MODULE_6__.NcButton,
+    NcListItemIcon: _nextcloud_vue__WEBPACK_IMPORTED_MODULE_6__.NcListItemIcon,
+    NcTextField: _nextcloud_vue__WEBPACK_IMPORTED_MODULE_6__.NcTextField,
+    NcPopover: _nextcloud_vue__WEBPACK_IMPORTED_MODULE_6__.NcPopover
+  },
+  props: {
+    albumName: {
+      type: String,
+      required: true
+    },
+    collaborators: {
+      type: Array,
+      default: () => []
+    },
+    publicLink: {
+      type: String,
+      default: ''
+    },
+    allowPublicLink: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      searchText: '',
+      availableCollaborators: {},
+      selectedCollaboratorsKeys: [],
+      currentSearchResults: [],
+      loadingCollaborators: false,
+      randomId: Math.random().toString().substring(2, 10),
+      publicLinkCopied: false,
+      config: {
+        minSearchStringLength: parseInt(OC.config['sharing.minSearchStringLength'], 10) || 0
+      }
+    };
+  },
+
+  computed: {
+    /**
+     * @return {string[]}
+     */
+    searchResults() {
+      return this.currentSearchResults.filter(_ref => {
+        let {
+          id
+        } = _ref;
+        return id !== (0,_nextcloud_auth__WEBPACK_IMPORTED_MODULE_4__.getCurrentUser)().uid;
+      }).map(_ref2 => {
+        let {
+          source,
+          id
+        } = _ref2;
+        return `${source}:${id}`;
+      }).filter(key => !this.selectedCollaboratorsKeys.includes(key)).map(key => ({
+        key,
+        height: 48
+      }));
+    },
+
+    /**
+     * @return {object[]}
+     */
+    selectedCollaborators() {
+      return this.selectedCollaboratorsKeys.map(collaboratorKey => this.availableCollaborators[collaboratorKey]);
+    }
+
+  },
+
+  mounted() {
+    this.searchCollaborators();
+    this.selectedCollaboratorsKeys = this.collaborators.map(_ref3 => {
+      let {
+        source,
+        id
+      } = _ref3;
+      return `${source}:${id}`;
+    });
+    this.availableCollaborators = { ...this.availableCollaborators,
+      ...this.collaborators.reduce((collaborators, collaborator) => ({ ...collaborators,
+        [`${collaborator.source}:${collaborator.id}`]: collaborator
+      }), {})
+    };
+  },
+
+  methods: {
+    /**
+     * Fetch possible collaborators.
+     */
+    async searchCollaborators() {
+      try {
+        if (this.searchText.length < this.config.minSearchStringLength) {
+          return;
+        }
+
+        this.loadingCollaborators = true;
+        const response = await _nextcloud_axios__WEBPACK_IMPORTED_MODULE_2__["default"].get((0,_nextcloud_router__WEBPACK_IMPORTED_MODULE_5__.generateOcsUrl)('core/autocomplete/get'), {
+          params: {
+            search: this.searchText,
+            itemType: 'share-recipients',
+            shareTypes: [SHARE.TYPE.USER, SHARE.TYPE.GROUP]
+          }
+        });
+        this.currentSearchResults = response.data.ocs.data;
+        this.availableCollaborators = { ...this.availableCollaborators,
+          ...response.data.ocs.data.reduce((collaborators, collaborator) => ({ ...collaborators,
+            [`${collaborator.source}:${collaborator.id}`]: collaborator
+          }), {})
+        };
+      } catch (error) {
+        this.errorFetchingCollaborators = error;
+        _services_logger_js__WEBPACK_IMPORTED_MODULE_7__["default"].error(t('photos', 'Failed to fetch collaborators list.'), error);
+        (0,_nextcloud_dialogs__WEBPACK_IMPORTED_MODULE_3__.showError)(t('photos', 'Failed to fetch collaborators list.'));
+      } finally {
+        this.loadingCollaborators = false;
+      }
+    },
+
+    // TODO: implement public sharing
+    // async createPublicLinkForAlbum() {
+    // return axios.put(generateOcsUrl(`apps/photos/createPublicLink/${this.albumName}`))
+    // },
+    // async deletePublicLink() {
+    // return axios.delete(generateOcsUrl(`apps/photos/createPublicLink/${this.albumName}`))
+    // },
+    // async copyPublicLink() {
+    // await navigator.clipboard.writeText(this.publicLink)
+    // this.publicLinkCopied = true
+    // setTimeout(() => {
+    // this.publicLinkCopied = false
+    // }, 10000)
+    // },
+    selectEntity(collaboratorKey) {
+      if (this.selectedCollaboratorsKeys.includes(collaboratorKey)) {
+        return;
+      }
+
+      this.$refs.popover.$refs.popover.hide();
+      this.selectedCollaboratorsKeys.push(collaboratorKey);
+    },
+
+    unselectEntity(collaboratorKey) {
+      const index = this.selectedCollaboratorsKeys.indexOf(collaboratorKey);
+      this.selectedCollaboratorsKeys.splice(index, 1);
+    }
+
+  }
+});
+
+/***/ }),
+
+/***/ "./src/mixins/FetchAlbumsMixin.js":
+/*!****************************************!*\
+  !*** ./src/mixins/FetchAlbumsMixin.js ***!
+  \****************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! vuex */ "./node_modules/vuex/dist/vuex.esm.js");
+/* harmony import */ var _nextcloud_moment__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @nextcloud/moment */ "./node_modules/@nextcloud/moment/dist/index.js");
+/* harmony import */ var _nextcloud_moment__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_nextcloud_moment__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _nextcloud_dialogs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @nextcloud/dialogs */ "./node_modules/@nextcloud/dialogs/dist/index.es.js");
+/* harmony import */ var _nextcloud_auth__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @nextcloud/auth */ "./node_modules/@nextcloud/auth/dist/index.esm.js");
+/* harmony import */ var _services_DavClient_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../services/DavClient.js */ "./src/services/DavClient.js");
+/* harmony import */ var _services_logger_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../services/logger.js */ "./src/services/logger.js");
+/* harmony import */ var _utils_fileUtils_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../utils/fileUtils.js */ "./src/utils/fileUtils.js");
+/* harmony import */ var _AbortControllerMixin_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./AbortControllerMixin.js */ "./src/mixins/AbortControllerMixin.js");
+/**
+ * @copyright Copyright (c) 2022 Louis Chemineau <louis@chmn.me>
+ *
+ * @author Louis Chemineau <louis@chmn.me>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+
+
+
+
+
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
+  name: 'FetchAlbumsMixin',
+
+  data() {
+    return {
+      errorFetchingAlbums: null,
+      loadingAlbums: false
+    };
+  },
+
+  mixins: [_AbortControllerMixin_js__WEBPACK_IMPORTED_MODULE_6__["default"]],
+
+  async beforeMount() {
+    this.fetchAlbums();
+  },
+
+  computed: { ...(0,vuex__WEBPACK_IMPORTED_MODULE_7__.mapGetters)(['albums'])
+  },
+  methods: {
+    async fetchAlbums() {
+      if (this.loadingAlbums) {
+        return;
+      }
+
+      try {
+        this.loadingAlbums = true;
+        this.errorFetchingAlbums = null;
+        const response = await _services_DavClient_js__WEBPACK_IMPORTED_MODULE_3__["default"].getDirectoryContents(`/photos/${(0,_nextcloud_auth__WEBPACK_IMPORTED_MODULE_2__.getCurrentUser)()?.uid}/albums`, {
+          data: `<?xml version="1.0"?>
+							<d:propfind xmlns:d="DAV:"
+								xmlns:oc="http://owncloud.org/ns"
+								xmlns:nc="http://nextcloud.org/ns"
+								xmlns:ocs="http://open-collaboration-services.org/ns">
+								<d:prop>
+									<nc:last-photo />
+									<nc:nbItems />
+									<nc:location />
+									<nc:dateRange />
+									<nc:collaborators />
+									</d:prop>
+									</d:propfind>`,
+          // TODO: implement public sharing
+          // <nc:publicLink />
+          details: true,
+          signal: this.abortController.signal
+        });
+        const albums = response.data.filter(album => album.filename !== `/photos/${(0,_nextcloud_auth__WEBPACK_IMPORTED_MODULE_2__.getCurrentUser)()?.uid}/albums`) // Ensure that we have a proper collaborators array.
+        .map(album => {
+          if (album.props.collaborators === '') {
+            album.props.collaborators = [];
+          } else if (typeof album.props.collaborators.collaborator === 'object') {
+            if (Array.isArray(album.props.collaborators.collaborator)) {
+              album.props.collaborators = album.props.collaborators.collaborator;
+            } else {
+              album.props.collaborators = [album.props.collaborators.collaborator];
+            }
+          }
+
+          return album;
+        }).map(album => (0,_utils_fileUtils_js__WEBPACK_IMPORTED_MODULE_5__.genFileInfo)(album)).map(album => {
+          const dateRange = JSON.parse(album.dateRange?.replace(/&quot;/g, '"') ?? '{}');
+
+          if (dateRange.start === null) {
+            dateRange.start = _nextcloud_moment__WEBPACK_IMPORTED_MODULE_0___default()().unix();
+            dateRange.end = _nextcloud_moment__WEBPACK_IMPORTED_MODULE_0___default()().unix();
+          }
+
+          const dateRangeFormated = {
+            startDate: _nextcloud_moment__WEBPACK_IMPORTED_MODULE_0___default().unix(dateRange.start).format('MMMM YYYY'),
+            endDate: _nextcloud_moment__WEBPACK_IMPORTED_MODULE_0___default().unix(dateRange.end).format('MMMM YYYY')
+          };
+
+          if (dateRangeFormated.startDate === dateRangeFormated.endDate) {
+            return { ...album,
+              date: dateRangeFormated.startDate
+            };
+          } else {
+            return { ...album,
+              date: this.t('photos', '{startDate} to {endDate}', dateRangeFormated)
+            };
+          }
+        });
+        this.$store.dispatch('addAlbums', {
+          albums
+        });
+        _services_logger_js__WEBPACK_IMPORTED_MODULE_4__["default"].debug(`[FetchAlbumsMixin] Fetched ${albums.length} new files: `, albums);
+      } catch (error) {
+        if (error.response?.status === 404) {
+          this.errorFetchingAlbums = 404;
+        } else if (error.code === 'ERR_CANCELED') {
+          return;
+        } else {
+          this.errorFetchingAlbums = error;
+        }
+
+        _services_logger_js__WEBPACK_IMPORTED_MODULE_4__["default"].error(t('photos', 'Failed to fetch albums list.'), error);
+        (0,_nextcloud_dialogs__WEBPACK_IMPORTED_MODULE_1__.showError)(t('photos', 'Failed to fetch albums list.'));
+      } finally {
+        this.loadingAlbums = false;
+      }
+    }
+
+  }
+});
+
+/***/ }),
+
+/***/ "./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-2[0].rules[0].use[3]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/Albums/AlbumForm.vue?vue&type=style&index=0&id=1d54fb78&lang=scss&scoped=true&":
+/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-2[0].rules[0].use[3]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/Albums/AlbumForm.vue?vue&type=style&index=0&id=1d54fb78&lang=scss&scoped=true& ***!
+  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ "./node_modules/css-loader/dist/runtime/noSourceMaps.js");
+/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js");
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, ".album-form[data-v-1d54fb78] {\n  display: flex;\n  flex-direction: column;\n  height: 350px;\n  padding: 16px;\n}\n.album-form .form-title[data-v-1d54fb78] {\n  font-weight: bold;\n}\n.album-form .form-subtitle[data-v-1d54fb78] {\n  color: var(--color-text-lighter);\n}\n.album-form .form-inputs[data-v-1d54fb78] {\n  flex-grow: 1;\n  justify-items: flex-end;\n}\n.album-form .form-inputs input[data-v-1d54fb78] {\n  width: 100%;\n}\n.album-form .form-inputs label[data-v-1d54fb78] {\n  display: flex;\n  margin-top: 16px;\n}\n.album-form .form-inputs label[data-v-1d54fb78]  svg {\n  margin-right: 12px;\n}\n.album-form .form-buttons[data-v-1d54fb78] {\n  display: flex;\n  just