memories/src/components/FirstStart.vue

<template>
    <NcContent app-name="memories">
        <NcAppContent>
            <div class="outer fill-block" :class="{ show }">
                <div class="title">
                    <img :src="banner" />
                </div>

                <div class="text">
                    {{ t('memories', 'A better photos experience awaits you') }} <br/>
                    {{ t('memories', 'Choose the root folder of your timeline to begin') }}
                </div>

                <div class="admin-text" v-if="isAdmin">
                    {{ t('memories', 'If you just installed Memories, run:') }}
                    <br/>
                    <code>occ memories:index</code>
                </div>

                <div class="error" v-if="error">
                    {{ error }}
                </div>

                <div class="info" v-if="info">
                    {{ info }} <br/>

                    <NcButton @click="finish" class="button" type="primary">
                        {{ t('memories', 'Continue to Memories') }}
                    </NcButton>
                </div>

                <NcButton @click="begin" class="button" v-if="info">
                    {{ t('memories', 'Choose again') }}
                </NcButton>
                <NcButton @click="begin" class="button" type="primary" v-else>
                    {{ t('memories', 'Click here to start') }}
                </NcButton>

                <div class="footer">
                    {{ t('memories', 'You can always change this later in settings') }}
                </div>
            </div>
        </NcAppContent>
    </NcContent>
</template>

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator';
import { NcContent, NcAppContent, NcButton } from '@nextcloud/vue';
import { getFilePickerBuilder } from '@nextcloud/dialogs'
import { generateUrl } from '@nextcloud/router'
import { getCurrentUser } from '@nextcloud/auth';
import axios from '@nextcloud/axios'

import GlobalMixin from '../mixins/GlobalMixin';
import UserConfig from '../mixins/UserConfig';

import banner from "../assets/banner.svg";
import { IDay } from '../types';

@Component({
    components: {
        NcContent,
        NcAppContent,
        NcButton,
    },
})
export default class FirstStart extends Mixins(GlobalMixin, UserConfig) {
    banner = banner;
    error = '';
    info = ''
    show = false;
    chosenPath = '';

    mounted() {
        window.setTimeout(() => {
            this.show = true;
        }, 300);
    }

    get isAdmin() {
        return getCurrentUser().isAdmin;
    }

    async begin() {
        const path = await this.chooseFolder(this.t('memories', 'Choose the root of your timeline'), '/');

        // Get folder days
        this.error = '';
        this.info = '';
        const query = new URLSearchParams();
        query.set('timelinePath', path);
        let url = generateUrl('/apps/memories/api/days?' + query.toString());
        const res = await axios.get<IDay[]>(url);

        // Check response
        if (res.status !== 200) {
            this.error = this.t('memories', 'The selected folder does not seem to be valid. Try again.');
            return;
        }

        // Count total photos
        const total = res.data.reduce((acc, day) => acc + day.count, 0);
        this.info = this.t('memories', 'Found {total} photos in {path}', { total, path });
        this.chosenPath = path;
    }

    async finish() {
        this.show = false;
        await new Promise(resolve => setTimeout(resolve, 500));
        this.config_timelinePath = this.chosenPath;
        await this.updateSetting('timelinePath');
    }

    async chooseFolder(title: string, initial: string) {
        const picker = getFilePickerBuilder(title)
				.setMultiSelect(false)
				.setModal(true)
				.setType(1)
				.addMimeTypeFilter('httpd/unix-directory')
				.allowDirectories()
				.startAt(initial)
				.build();

        return await picker.pick();
    }
}
</script>

<style lang="scss" scoped>
.outer {
    padding: 20px;
    text-align: center;

    transition: opacity 1s ease;
    opacity: 0;
    &.show { opacity: 1; }

    .title {
        font-size: 2.8em;
        line-height: 1.1em;
        font-family: cursive;
        font-weight: 500;
        margin-top: 10px;
        margin-bottom: 20px;
        width: 100%;
        filter: var(--background-invert-if-dark);

        > img {
            max-width: calc(100vw - 40px);
        }
    }

    .admin-text {
        margin-top: 10px;
    }

    .error {
        color: red;
    }

    .info {
        margin-top: 10px;
        font-weight: bold;
    }

    .button {
        display: inline-block;
        margin: 15px;
    }

    .footer {
        font-size: 0.8em;
    }
}
</style>