{"version":3,"file":"PhotosPicker-Co0d4oE2.chunk.mjs","sources":["../src/components/PhotosPicker.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<NcDialog\n\t\tcontent-classes=\"photos-picker\"\n\t\t:name=\"name\"\n\t\t:open=\"open\"\n\t\tout-transition\n\t\tsize=\"large\"\n\t\t@update:open=\"(open) => $emit('update:open', open)\">\n\t\t<!-- Navigation containing the months available -->\n\t\t<template v-if=\"monthsList.length > 0\" #navigation=\"{ isCollapsed }\">\n\t\t\t<!-- Mobile view -->\n\t\t\t<NcSelect\n\t\t\t\tv-if=\"isCollapsed\"\n\t\t\t\tv-model=\"targetMonth\"\n\t\t\t\t:aria-label-listbox=\"t('photos', 'Dates')\"\n\t\t\t\tclass=\"photos-picker__navigation__month-select\"\n\t\t\t\t:clearable=\"false\"\n\t\t\t\t:input-label=\"t('photos', 'Jump to specific date in list')\"\n\t\t\t\t:options=\"monthsList\">\n\t\t\t\t<template #selected-option=\"{ label }\">\n\t\t\t\t\t{{ dateMonthAndYear(label) }}\n\t\t\t\t</template>\n\t\t\t\t<template #option=\"{ label }\">\n\t\t\t\t\t{{ dateMonthAndYear(label) }}\n\t\t\t\t</template>\n\t\t\t</NcSelect>\n\n\t\t\t<!-- Default view -->\n\t\t\t<ul v-else :aria-label=\"t('photos', 'Dates')\">\n\t\t\t\t<li\n\t\t\t\t\tv-for=\"month in monthsList\"\n\t\t\t\t\t:key=\"month\"\n\t\t\t\t\tclass=\"photos-picker__navigation__month\">\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\t:type=\"targetMonth === month ? 'secondary' : 'tertiary'\"\n\t\t\t\t\t\t:aria-label=\"t('photos', 'Jump to {date}', { date: dateMonthAndYear(month) })\"\n\t\t\t\t\t\t@click=\"targetMonth = month\">\n\t\t\t\t\t\t{{ dateMonthAndYear(month) }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</template>\n\n\t\t<!-- The actions on the bottom -->\n\t\t<template #actions>\n\t\t\t<div class=\"photos-picker__actions\">\n\t\t\t\t<div class=\"photos-picker__actions__buttons\">\n\t\t\t\t\t<UploadPicker\n\t\t\t\t\t\t:accept=\"allowedMimes\"\n\t\t\t\t\t\t:context=\"uploadContext\"\n\t\t\t\t\t\t:destination=\"photosLocationFolder\"\n\t\t\t\t\t\tmultiple\n\t\t\t\t\t\t@uploaded=\"refreshFiles\" />\n\t\t\t\t\t<NcButton type=\"primary\" :disabled=\"loading || selectedFileIds.length === 0\" @click=\"emitPickedEvent\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<ImagePlusOutline v-if=\"!loading\" />\n\t\t\t\t\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t{{ t('photos', 'Add to {destination}', { destination }, undefined, { escape: false, sanitize: false }) }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t</div>\n\t\t\t\t<NcNoteCard v-if=\"photosLocationFolder?.attributes['owner-id'] !== currentUser\" type=\"warning\">\n\t\t\t\t\t{{ t('photos', 'The destination folder is owned by {owner}', { owner: photosLocationFolder?.attributes['owner-id'] }) }}\n\t\t\t\t</NcNoteCard>\n\t\t\t</div>\n\t\t</template>\n\n\t\t<FilesListViewer\n\t\t\tclass=\"photos-picker__file-list\"\n\t\t\t:class=\"{ 'photos-picker__file-list--placeholder': monthsList.length === 0 }\"\n\t\t\t:file-ids-by-section=\"fileIdsByMonth\"\n\t\t\t:empty-message=\"t('photos', 'There are no photos or videos yet!')\"\n\t\t\t:sections=\"monthsList\"\n\t\t\t:loading=\"loadingFiles\"\n\t\t\t:base-height=\"100\"\n\t\t\t:section-header-height=\"50\"\n\t\t\t:scroll-to-section=\"targetMonth\"\n\t\t\t@need-content=\"getFiles\"\n\t\t\t@focusout.native=\"onFocusOut\">\n\t\t\t<template slot-scope=\"{ file, height, isHeader, distance }\">\n\t\t\t\t<h3\n\t\t\t\t\tv-if=\"isHeader\"\n\t\t\t\t\t:id=\"`photos-picker-section-header-${file.id}`\"\n\t\t\t\t\t:style=\"{ height: `${height}px` }\"\n\t\t\t\t\tclass=\"section-header\">\n\t\t\t\t\t{{ dateMonthAndYear(file.id) }}\n\t\t\t\t</h3>\n\n\t\t\t\t<FileComponent\n\t\t\t\t\tv-else\n\t\t\t\t\t:file=\"files[file.id]\"\n\t\t\t\t\t:allow-selection=\"true\"\n\t\t\t\t\t:selected=\"selection[file.id] === true\"\n\t\t\t\t\t:distance=\"distance\"\n\t\t\t\t\t@select-toggled=\"onFileSelectToggle\" />\n\t\t\t</template>\n\t\t</FilesListViewer>\n\t</NcDialog>\n</template>\n\n<script lang='ts'>\nimport type { File } from '@nextcloud/files'\n\nimport { getCurrentUser } from '@nextcloud/auth'\nimport { t } from '@nextcloud/l10n'\nimport moment from '@nextcloud/moment'\nimport { UploadPicker } from '@nextcloud/upload'\nimport { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'\nimport {\n\ttype PropType,\n\n\tdefineComponent,\n} from 'vue'\nimport NcButton from '@nextcloud/vue/components/NcButton'\nimport NcDialog from '@nextcloud/vue/components/NcDialog'\nimport NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'\nimport NcNoteCard from '@nextcloud/vue/components/NcNoteCard'\nimport NcSelect from '@nextcloud/vue/components/NcSelect'\nimport ImagePlusOutline from 'vue-material-design-icons/ImagePlusOutline.vue'\nimport FileComponent from './FileComponent.vue'\nimport FilesListViewer from './FilesListViewer.vue'\nimport FetchFilesMixin from '../mixins/FetchFilesMixin.js'\nimport FilesByMonthMixin from '../mixins/FilesByMonthMixin.js'\nimport FilesSelectionMixin from '../mixins/FilesSelectionMixin.js'\nimport allowedMimes from '../services/AllowedMimes.js'\n\nexport default defineComponent({\n\tname: 'PhotosPicker',\n\n\tcomponents: {\n\t\tFileComponent,\n\t\tFilesListViewer,\n\t\tImagePlusOutline,\n\t\tNcButton,\n\t\tNcDialog,\n\t\tNcLoadingIcon,\n\t\tNcSelect,\n\t\tNcNoteCard,\n\t\tUploadPicker,\n\t},\n\n\tmixins: [\n\t\tFetchFilesMixin,\n\t\tFilesByMonthMixin,\n\t\tFilesSelectionMixin,\n\t],\n\n\tprops: {\n\t\t/**\n\t\t * If the photos picker should be opened\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Name to be used as heading\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t// Label to show in the submit button.\n\t\tdestination: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t// List of file ids to not show.\n\t\tblacklistIds: {\n\t\t\ttype: Array as PropType<string[]>,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t// Whether we should disable the submit button and show a spinner.\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: ['files-picked', 'update:open'],\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\tallowedMimes,\n\t\t\ttargetMonth: null as string | null,\n\t\t\tuploadContext: {\n\t\t\t\troute: 'albumpicker',\n\t\t\t},\n\n\t\t\tcurrentUser: getCurrentUser()?.uid,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tfiles() {\n\t\t\treturn this.$store.state.files.files\n\t\t},\n\n\t\tphotosLocationFolder() {\n\t\t\treturn this.$store.state.userConfig.photosLocationFolder\n\t\t},\n\t},\n\n\twatch: {\n\t\tmonthsList(value) {\n\t\t\tif (this.targetMonth === null) {\n\t\t\t\tthis.targetMonth = value[0]\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonFocusOut(event: FocusEvent) {\n\t\t\tif (event.relatedTarget === null) { // Focus escaping to body\n\t\t\t\tevent.target?.focus({ preventScroll: true })\n\t\t\t}\n\t\t},\n\n\t\tgetFiles() {\n\t\t\tthis.fetchFiles({}, this.shouldShowFile)\n\t\t},\n\n\t\trefreshFiles() {\n\t\t\tthis.fetchFiles({ firstResult: 0 }, this.shouldShowFile, true)\n\t\t},\n\n\t\tshouldShowFile(file: File) {\n\t\t\treturn file.attributes['mount-type'] === '' && !this.blacklistIds.includes(file.fileid?.toString() ?? '')\n\t\t},\n\n\t\temitPickedEvent() {\n\t\t\tthis.$emit('files-picked', this.selectedFileIds)\n\t\t\tthis.resetSelection()\n\t\t},\n\n\t\t/**\n\t\t * @param date - In the following format: YYYYMM\n\t\t */\n\t\tdateMonthAndYear(date) {\n\t\t\tif (this.isMobile) {\n\t\t\t\treturn moment(date, 'YYYYMM').format('MMM YYYY')\n\t\t\t}\n\t\t\treturn moment(date, 'YYYYMM').format('MMMM YYYY')\n\t\t},\n\n\t\tt,\n\t},\n})\n</script>\n\n<style lang=\"scss\" scoped>\n:deep(.photos-picker) {\n\tdisplay: flex;\n\t// remove padding to move scrollbar to the very end\n\tpadding-inline-end: 0 !important;\n}\n\n.photos-picker {\n\n\t&__navigation {\n\t\t&__month {\n\t\t\t// For focus-visible outline\n\t\t\tmargin: 4px;\n\t\t}\n\n\t\t&__month-select {\n\t\t\tflex: 1;\n\t\t\t// align with other content\n\t\t\tpadding-inline-end: 12px;\n\t\t\tpadding-block-end: 6px;\n\t\t}\n\t}\n\n\t&__file-list {\n\t\tflex-grow: 1;\n\t\tmin-width: 0;\n\t\theight: 100%;\n\t\tpadding: 0 4px;\n\n\t\t&--placeholder {\n\t\t\tbackground: var(--color-primary-element-light);\n\t\t\tborder-radius: var(--border-radius-large);\n\t\t}\n\n\t\t.section-header {\n\t\t\tfont-weight: bold;\n\t\t\tfont-size: 20px;\n\t\t\tpadding: 8px 0 4px 0;\n\t\t}\n\n\t\t:deep(.empty-content) {\n\t\t\theight: fit-content;\n\t\t\tmargin-block: 1em;\n\t\t\tmargin-inline-end: 12px;\n\t\t\twidth: calc(100% - 12px);\n\t\t}\n\t}\n\n\t&__actions {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tflex-grow: 1;\n\n\t\t&__buttons {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: flex-end;\n\t\t\tgap: 16px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","defineComponent","FileComponent","FilesListViewer","ImagePlusOutline","NcButton","NcDialog","NcLoadingIcon","NcSelect","NcNoteCard","UploadPicker","FetchFilesMixin","FilesByMonthMixin","FilesSelectionMixin","useIsMobile","allowedMimes","getCurrentUser","value","event","file","date","moment","t"],"mappings":"ouBAkIA,MAAAA,EAAAC,EAAA,CACA,KAAA,eAEA,WAAA,CACA,cAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,SAAAC,EACA,SAAAC,EACA,cAAAC,EACA,SAAAC,EACA,WAAAC,EACA,aAAAC,CACA,EAEA,OAAA,CACAC,EACAC,EACAC,CACA,EAEA,MAAA,CAIA,KAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,KAAA,CACA,KAAA,OACA,SAAA,EACA,EAGA,YAAA,CACA,KAAA,OACA,SAAA,EACA,EAGA,aAAA,CACA,KAAA,MACA,QAAA,IAAA,CAAA,CACA,EAGA,QAAA,CACA,KAAA,QACA,QAAA,EAAA,CAEA,EAEA,MAAA,CAAA,eAAA,aAAA,EAEA,OAAA,CACA,MAAA,CACA,SAAAC,EAAA,CACA,CACA,EAEA,MAAA,CACA,MAAA,CAAA,aACAC,EACA,YAAA,KACA,cAAA,CACA,MAAA,aACA,EAEA,YAAAC,KAAA,GACA,CACA,EAEA,SAAA,CACA,OAAA,CACA,OAAA,KAAA,OAAA,MAAA,MAAA,KACA,EAEA,sBAAA,CACA,OAAA,KAAA,OAAA,MAAA,WAAA,oBAAA,CAEA,EAEA,MAAA,CACA,WAAAC,EAAA,CACA,KAAA,cAAA,OACA,KAAA,YAAAA,EAAA,CAAA,EACA,CAEA,EAEA,QAAA,CACA,WAAAC,EAAA,CACAA,EAAA,gBAAA,MACAA,EAAA,QAAA,MAAA,CAAA,cAAA,GAAA,CAEA,EAEA,UAAA,CACA,KAAA,WAAA,GAAA,KAAA,cAAA,CACA,EAEA,cAAA,CACA,KAAA,WAAA,CAAA,YAAA,GAAA,KAAA,eAAA,EAAA,CACA,EAEA,eAAAC,EAAA,CACA,OAAAA,EAAA,WAAA,YAAA,IAAA,IAAA,CAAA,KAAA,aAAA,SAAAA,EAAA,QAAA,SAAA,GAAA,EAAA,CACA,EAEA,iBAAA,CACA,KAAA,MAAA,eAAA,KAAA,eAAA,EACA,KAAA,eAAA,CACA,EAKA,iBAAAC,EAAA,CACA,OAAA,KAAA,SACAC,EAAAD,EAAA,QAAA,EAAA,OAAA,UAAA,EAEAC,EAAAD,EAAA,QAAA,EAAA,OAAA,WAAA,CACA,EAEAE,EAAAA,CAAA,CAEA,CAAA"}