123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299 |
- <!--
- - @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>
- -
- - @author John Molakvoæ <skjnldsv@protonmail.com>
- -
- - @license GNU AGPL version 3 or any later version
- -
- - 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/>.
- -
- -->
-
- <template>
- <Modal v-if="opened"
- :clear-view-delay="-1"
- class="templates-picker"
- size="large"
- @close="close">
- <form class="templates-picker__form"
- :style="style"
- @submit.prevent.stop="onSubmit">
- <h2>{{ t('files', 'Pick a template for {name}', { name: nameWithoutExt }) }}</h2>
-
- <!-- Templates list -->
- <ul class="templates-picker__list">
- <TemplatePreview
- v-bind="emptyTemplate"
- :checked="checked === emptyTemplate.fileid"
- @check="onCheck" />
-
- <TemplatePreview
- v-for="template in provider.templates"
- :key="template.fileid"
- v-bind="template"
- :checked="checked === template.fileid"
- :ratio="provider.ratio"
- @check="onCheck" />
- </ul>
-
- <!-- Cancel and submit -->
- <div class="templates-picker__buttons">
- <button @click="close">
- {{ t('files', 'Cancel') }}
- </button>
- <input type="submit"
- class="primary"
- :value="t('files', 'Create')"
- :aria-label="t('files', 'Create a new file with the selected template')">
- </div>
- </form>
-
- <EmptyContent v-if="loading" class="templates-picker__loading" icon="icon-loading">
- {{ t('files', 'Creating file') }}
- </EmptyContent>
- </Modal>
- </template>
-
- <script>
- import { normalize } from 'path'
- import { showError } from '@nextcloud/dialogs'
- import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
- import Modal from '@nextcloud/vue/dist/Components/Modal'
-
- import { getCurrentDirectory } from '../utils/davUtils'
- import { createFromTemplate, getTemplates } from '../services/Templates'
- import TemplatePreview from '../components/TemplatePreview'
-
- const border = 2
- const margin = 8
- const width = margin * 20
-
- export default {
- name: 'TemplatePicker',
-
- components: {
- EmptyContent,
- Modal,
- TemplatePreview,
- },
-
- props: {
- logger: {
- type: Object,
- required: true,
- },
- },
-
- data() {
- return {
- // Check empty template by default
- checked: -1,
- loading: false,
- name: null,
- opened: false,
- provider: null,
- }
- },
-
- computed: {
- /**
- * Strip away extension from name
- * @returns {string}
- */
- nameWithoutExt() {
- return this.name.indexOf('.') > -1
- ? this.name.split('.').slice(0, -1).join('.')
- : this.name
- },
-
- emptyTemplate() {
- return {
- basename: t('files', 'Blank'),
- fileid: -1,
- filename: this.t('files', 'Blank'),
- hasPreview: false,
- mime: this.provider?.mimetypes[0] || this.provider?.mimetypes,
- }
- },
-
- selectedTemplate() {
- return this.provider.templates.find(template => template.fileid === this.checked)
- },
-
- /**
- * Style css vars bin,d
- * @returns {Object}
- */
- style() {
- return {
- '--margin': margin + 'px',
- '--width': width + 'px',
- '--border': border + 'px',
- '--fullwidth': width + 2 * margin + 2 * border + 'px',
- '--height': this.provider.ratio ? Math.round(width / this.provider.ratio) + 'px' : null,
- }
- },
- },
-
- methods: {
- /**
- * Open the picker
- * @param {string} name the file name to create
- * @param {object} provider the template provider picked
- */
- async open(name, provider) {
-
- this.checked = this.emptyTemplate.fileid
- this.name = name
- this.provider = provider
-
- const templates = await getTemplates()
- const fetchedProvider = templates.find((fetchedProvider) => fetchedProvider.app === provider.app && fetchedProvider.label === provider.label)
- if (fetchedProvider === null) {
- throw new Error('Failed to match provider in results')
- }
- this.provider = fetchedProvider
-
- // If there is no templates available, just create an empty file
- if (fetchedProvider.templates.length === 0) {
- this.onSubmit()
- return
- }
-
- // Else, open the picker
- this.opened = true
- },
-
- /**
- * Close the picker and reset variables
- */
- close() {
- this.checked = this.emptyTemplate.fileid
- this.loading = false
- this.name = null
- this.opened = false
- this.provider = null
- },
-
- /**
- * Manages the radio template picker change
- * @param {number} fileid the selected template file id
- */
- onCheck(fileid) {
- this.checked = fileid
- },
-
- async onSubmit() {
- this.loading = true
- const currentDirectory = getCurrentDirectory()
- const fileList = OCA?.Files?.App?.currentFileList
-
- // If the file doesn't have an extension, add the default one
- if (this.nameWithoutExt === this.name) {
- this.logger.debug('Fixed invalid filename', { name: this.name, extension: this.provider?.extension })
- this.name = this.name + this.provider?.extension
- }
-
- try {
- const fileInfo = await createFromTemplate(
- normalize(`${currentDirectory}/${this.name}`),
- this.selectedTemplate?.filename,
- this.selectedTemplate?.templateType,
- )
- this.logger.debug('Created new file', fileInfo)
-
- await fileList?.addAndFetchFileInfo(this.name)
-
- // Run default action
- const fileAction = OCA.Files.fileActions.getDefaultFileAction(fileInfo.mime, 'file', OC.PERMISSION_ALL)
- fileAction.action(fileInfo.basename, {
- $file: fileList?.findFileEl(this.name),
- dir: currentDirectory,
- fileList,
- fileActions: fileList?.fileActions,
- fileInfoModel: fileList?.getModelForFile(this.name),
- })
-
- this.close()
- } catch (error) {
- this.logger.error('Error while creating the new file from template')
- console.error(error)
- showError(this.t('files', 'Unable to create new file from template'))
- } finally {
- this.loading = false
- }
- },
- },
- }
- </script>
-
- <style lang="scss" scoped>
- .templates-picker {
- &__form {
- padding: calc(var(--margin) * 2);
- // Will be handled by the buttons
- padding-bottom: 0;
-
- h2 {
- text-align: center;
- font-weight: bold;
- margin: var(--margin) 0 calc(var(--margin) * 2);
- }
- }
-
- &__list {
- display: grid;
- grid-gap: calc(var(--margin) * 2);
- grid-auto-columns: 1fr;
- // We want maximum 5 columns. Putting 6 as we don't count the grid gap. So it will always be lower than 6
- max-width: calc(var(--fullwidth) * 6);
- grid-template-columns: repeat(auto-fit, var(--fullwidth));
- // Make sure all rows are the same height
- grid-auto-rows: 1fr;
- // Center the columns set
- justify-content: center;
- }
-
- &__buttons {
- display: flex;
- justify-content: space-between;
- padding: calc(var(--margin) * 2) var(--margin);
- position: sticky;
- bottom: 0;
- background-image: linear-gradient(0, var(--gradient-main-background));
-
- button, input[type='submit'] {
- height: 44px;
- }
- }
-
- // Make sure we're relative for the loading emptycontent on top
- ::v-deep .modal-container {
- position: relative;
- overflow-y: auto !important;
- }
-
- &__loading {
- position: absolute;
- top: 0;
- left: 0;
- justify-content: center;
- width: 100%;
- height: 100%;
- margin: 0;
- background-color: var(--color-main-background-translucent);
- }
- }
-
- </style>
|