vuefilemanager/resources/js/components/FilesView/FileSortingOptions.vue

<template>
    <div>
        <OptionGroup>
            <Option v-if="isList" @click.native="changePreview('grid')" :title="$t('preview_sorting.grid_view')" icon="grid" />
            <Option v-if="isGrid" @click.native="changePreview('list')" :title="$t('preview_sorting.list_view')" icon="list" />
        </OptionGroup>
        <OptionGroup>
            <Option @click.native.stop="sort('created_at')" :arrow="arrowForCreatedAtField" :title="$t('preview_sorting.sort_date')" icon="calendar" />
            <Option @click.native.stop="sort('name')" :arrow="arrowForNameField" :title="$t('preview_sorting.sort_alphabet')" icon="alphabet" />
        </OptionGroup>
    </div>
</template>

<script>

import OptionGroup from '@/components/FilesView/OptionGroup'
import Option from '@/components/FilesView/Option'
import { ArrowUpIcon } from 'vue-feather-icons'
import { mapGetters } from 'vuex'

export default {
    name: 'FileSortingOptions',
    components: {
        OptionGroup,
        ArrowUpIcon,
        Option,
    },
    computed: {
        ...mapGetters([
            'FilePreviewType'
        ]),
        isGrid() {
            return this.FilePreviewType === 'grid'
        },
        isList() {
            return this.FilePreviewType === 'list'
        },
		arrowForCreatedAtField() {
        	if (this.filter.field !== 'created_at')
        		return undefined

			return this.filter.sort === 'DESC' ? 'up' : 'down'
		},
		arrowForNameField() {
        	if (this.filter.field !== 'name')
        		return undefined

			return this.filter.sort === 'DESC' ? 'up' : 'down'
		}
    },
    data() {
        return {
            filter: {
                sort: 'DESC',
                field: undefined
            }
        }
    },
    methods: {
        sort(field) {
            this.filter.field = field

            // Set sorting direction
            if (this.filter.sort === 'DESC')
                this.filter.sort = 'ASC'
            else if (this.filter.sort === 'ASC')
                this.filter.sort = 'DESC'

            // Save to localStorage sorting options
            localStorage.setItem('sorting', JSON.stringify({ sort: this.filter.sort, field: this.filter.field }))

            // Update sorting state in vuex
            this.$store.commit('UPDATE_SORTING')

            // Get data using the application location
            this.$getDataByLocation()
        },
        changePreview(previewType) {
            this.$store.dispatch('changePreviewType', previewType)
        }
    },
    mounted() {
        let sorting = JSON.parse(localStorage.getItem('sorting'))

        // Set default sorting if in not setup in LocalStorage
        this.filter.sort = sorting ? sorting.sort : 'DESC'
        this.filter.field = sorting ? sorting.field : 'created_at'
    }
}
</script>