Firebase Realtime Database Albums

vue-firebase-albums-mixin.js

export default {
    data() {
        return {
            galleryAlbums: [],
            dialogAlbumImages: false
        }
    },

    created() {
        this.getAlbums()
    },

    computed: {
        reverseAlbums() {
            return this.galleryAlbums.slice().reverse()
        }
    },

    methods: {
        async getAlbums() {
            const album = await this.$database.ref(`albums`).once('value')
            const albumData = await album.val() || {}
            const newAlbum = []

            Object.entries(albumData).map(albums => {
                const images = []
                const covers = []
                const id = albums[0]

                Object.values(albums[1]).map(async imageId => {
                    const image = await this.$database.ref(`images/${imageId}`).once('value')
                    const snapshotData = image.val()

                    delete snapshotData.original
                    delete snapshotData.slider

                    const gallery = snapshotData.gallery['url']
                    const about = snapshotData.about['url']
                    const icon = snapshotData.icon['url']

                    covers.push(icon)
                    images.push({ gallery, about, icon })
                })

                newAlbum.push({id, covers, images})

                this.galleryAlbums = []
                this.galleryAlbums.push(...newAlbum) // Array.from(new Set([...newAlbum]))
            })
        }
    }
}