{"version":3,"file":"CollectionContent-DjRoRvK_.chunk.mjs","sources":["../src/components/Collection/CollectionContent.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n<template>\n\t<!-- Errors handlers-->\n\t<NcEmptyContent\n\t\tv-if=\"(collection === undefined && !loading) || error === 404\"\n\t\tclass=\"empty-content-with-illustration\"\n\t\t:name=\"t('photos', 'This collection does not exist')\">\n\t\t<ImageMultipleOutline slot=\"icon\" />\n\t</NcEmptyContent>\n\t<NcEmptyContent v-else-if=\"error\" :name=\"t('photos', 'An error occurred')\">\n\t\t<AlertCircleOutline slot=\"icon\" />\n\t</NcEmptyContent>\n\n\t<div v-else class=\"collection\">\n\t\t<!-- Header -->\n\t\t<slot\n\t\t\tclass=\"collection__header\"\n\t\t\tname=\"header\"\n\t\t\t:selected-file-ids=\"selectedFileIds\"\n\t\t\t:reset-selection=\"resetSelection\" />\n\n\t\t<!-- No content -->\n\t\t<slot v-if=\"sortedCollectionFileIds.length === 0 && !loading\" name=\"empty-content\" />\n\n\t\t<!-- Media list -->\n\t\t<FilesListViewer\n\t\t\tv-if=\"collection !== undefined && sortedCollectionFileIds.length > 0 \"\n\t\t\t:container-element=\"appContent\"\n\t\t\tclass=\"collection__media\"\n\t\t\t:file-ids=\"sortedCollectionFileIds\"\n\t\t\t:base-height=\"isMobile ? 120 : 200\"\n\t\t\t:loading=\"loading\">\n\t\t\t<FileComponent\n\t\t\t\tslot-scope=\"{ file, distance }\"\n\t\t\t\t:file=\"files[file.id]\"\n\t\t\t\t:allow-selection=\"allowSelection\"\n\t\t\t\t:selected=\"selection[file.id] === true\"\n\t\t\t\t:distance=\"distance\"\n\t\t\t\t@click=\"openViewer\"\n\t\t\t\t@select-toggled=\"onFileSelectToggle\" />\n\t\t</FilesListViewer>\n\t</div>\n</template>\n\n<script lang='ts'>\nimport type { File } from '@nextcloud/files'\nimport type { PropType } from 'vue'\nimport type { Collection } from '../../services/collectionFetcher.js'\n\nimport { subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport { translate } from '@nextcloud/l10n'\nimport { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'\nimport { defineComponent } from 'vue'\nimport NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'\nimport AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'\nimport ImageMultipleOutline from 'vue-material-design-icons/ImageMultipleOutline.vue'\nimport FileComponent from '../FileComponent.vue'\nimport FilesListViewer from '../FilesListViewer.vue'\nimport FilesSelectionMixin from '../../mixins/FilesSelectionMixin.js'\nimport { toViewerFileInfo } from '../../utils/fileUtils.js'\n\nexport default defineComponent({\n\tname: 'CollectionContent',\n\n\tcomponents: {\n\t\tAlertCircleOutline,\n\t\tImageMultipleOutline,\n\t\tNcEmptyContent,\n\t\tFilesListViewer,\n\t\tFileComponent,\n\t},\n\n\tmixins: [FilesSelectionMixin],\n\n\tprops: {\n\t\tcollection: {\n\t\t\ttype: Object as PropType<Collection>,\n\t\t\tdefault: () => undefined,\n\t\t},\n\n\t\tcollectionFileIds: {\n\t\t\ttype: Array as PropType<string[]>,\n\t\t\trequired: true,\n\t\t},\n\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\tallowSelection: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\terror: {\n\t\t\ttype: [Error, Number],\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tsetup() {\n\t\treturn {\n\t\t\tisMobile: useIsMobile(),\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tappContent: document.getElementById('app-content-vue'),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tfiles() {\n\t\t\treturn this.$store.getters.files\n\t\t},\n\n\t\tsortedCollectionFileIds() {\n\t\t\treturn this.collectionFileIds.toSorted((fileId1, fileId2) => this.files[fileId1].attributes.timestamp < this.files[fileId2].attributes.timestamp ? -1 : 1)\n\t\t},\n\t},\n\n\tmounted() {\n\t\tsubscribe('files:node:deleted', this.handleFileDeleted)\n\t},\n\n\tdestroyed() {\n\t\tunsubscribe('files:node:deleted', this.handleFileDeleted)\n\t},\n\n\tmethods: {\n\t\topenViewer(fileId: string) {\n\t\t\twindow.OCA.Viewer.open({\n\t\t\t\tfileInfo: toViewerFileInfo(this.files[fileId]),\n\t\t\t\tlist: this.sortedCollectionFileIds.map((fileId) => toViewerFileInfo(this.files[fileId])),\n\t\t\t})\n\t\t},\n\n\t\thandleFileDeleted({ fileid }: File) {\n\t\t\tthis.$store.commit('removeFilesFromCollection', { collectionFileName: this.collection.root + this.collection.path, fileIdsToRemove: [fileid?.toString()] })\n\t\t},\n\n\t\tt: translate,\n\t},\n})\n\n</script>\n\n<style lang=\"scss\" scoped>\n.collection {\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t&__media {\n\t\tpadding: 0 64px;\n\n\t\t@media only screen and (max-width: 1200px) {\n\t\t\tpadding: 0 4px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","defineComponent","AlertCircleOutline","ImageMultipleOutline","NcEmptyContent","FilesListViewer","FileComponent","FilesSelectionMixin","useIsMobile","fileId1","fileId2","subscribe","unsubscribe","fileId","toViewerFileInfo","fileid","translate"],"mappings":"6ZAgEA,MAAAA,EAAAC,EAAA,CACA,KAAA,oBAEA,WAAA,CACA,mBAAAC,EACA,qBAAAC,EACA,eAAAC,EACA,gBAAAC,EACA,cAAAC,CACA,EAEA,OAAA,CAAAC,CAAA,EAEA,MAAA,CACA,WAAA,CACA,KAAA,OACA,QAAA,IAAA,CAAA,CACA,EAEA,kBAAA,CACA,KAAA,MACA,SAAA,EACA,EAEA,QAAA,CACA,KAAA,QACA,QAAA,EACA,EAEA,eAAA,CACA,KAAA,QACA,QAAA,EACA,EAEA,MAAA,CACA,KAAA,CAAA,MAAA,MAAA,EACA,QAAA,IAAA,CAEA,EAEA,OAAA,CACA,MAAA,CACA,SAAAC,EAAA,CACA,CACA,EAEA,MAAA,CACA,MAAA,CACA,WAAA,SAAA,eAAA,iBAAA,CACA,CACA,EAEA,SAAA,CACA,OAAA,CACA,OAAA,KAAA,OAAA,QAAA,KACA,EAEA,yBAAA,CACA,OAAA,KAAA,kBAAA,SAAA,CAAAC,EAAAC,IAAA,KAAA,MAAAD,CAAA,EAAA,WAAA,UAAA,KAAA,MAAAC,CAAA,EAAA,WAAA,UAAA,GAAA,CAAA,CAAA,CAEA,EAEA,SAAA,CACAC,EAAA,qBAAA,KAAA,iBAAA,CACA,EAEA,WAAA,CACAC,EAAA,qBAAA,KAAA,iBAAA,CACA,EAEA,QAAA,CACA,WAAAC,EAAA,CACA,OAAA,IAAA,OAAA,KAAA,CACA,SAAAC,EAAA,KAAA,MAAAD,CAAA,CAAA,EACA,KAAA,KAAA,wBAAA,IAAAA,GAAAC,EAAA,KAAA,MAAAD,CAAA,CAAA,CAAA,CAAA,CACA,CACA,EAEA,kBAAA,CAAA,OAAAE,GAAA,CACA,KAAA,OAAA,OAAA,4BAAA,CAAA,mBAAA,KAAA,WAAA,KAAA,KAAA,WAAA,KAAA,gBAAA,CAAAA,GAAA,SAAA,CAAA,EAAA,CACA,EAEA,EAAAC,CAAA,CAEA,CAAA"}