nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-28 11:00:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

storage page refactoring

Browse Source
This commit is contained in:
Čarodej
2021-11-23 15:53:18 +01:00
parent c5aadd3c6e
commit 946dfa7d99
17 changed files with 448 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/views/User/Storage.vue
+21 -25
View File
@@ -1,53 +1,49 @@
<template>
<PageTab v-if="storage">
<PageTabGroup>
<FormLabel>{{ $t('storage.sec_capacity') }}</FormLabel>
<StorageItemDetail type="disk" :title="$t('storage.total_used', {used: storage.attributes.used})" :percentage="storage.attributes.percentage" :used="$t('storage.total_capacity', {capacity: storage.attributes.capacity})"/>
</PageTabGroup>
<PageTabGroup>
<FormLabel>{{ $t('storage.sec_details') }}</FormLabel>
<StorageItemDetail type="images" :title="$t('storage.images')" :percentage="storage.meta.images.percentage" :used="storage.meta.images.used" />
<StorageItemDetail type="videos" :title="$t('storage.videos')" :percentage="storage.meta.videos.percentage" :used="storage.meta.videos.used" />
<StorageItemDetail type="audios" :title="$t('storage.audios')" :percentage="storage.meta.audios.percentage" :used="storage.meta.audios.used" />
<StorageItemDetail type="documents" :title="$t('storage.documents')" :percentage="storage.meta.documents.percentage" :used="storage.meta.documents.used" />
<StorageItemDetail type="others" :title="$t('storage.others')" :percentage="storage.meta.others.percentage" :used="storage.meta.others.used" />
</PageTabGroup>
<PageTab>
<div class="card shadow-card">
<FormLabel icon="hard-drive">
{{ $t('Storage Usage') }}
</FormLabel>
<div v-if="distribution">
<b class="mb-3 block text-sm text-gray-400">
{{ $t('Total') }} {{ storage.data.attributes.used }} {{ $t('of') }} {{ storage.data.attributes.capacity }} {{ $t('Used') }}
</b>
<ProgressLine :data="distribution" />
</div>
</div>
</PageTab>
</template>
<script>
import ProgressLine from "../../components/Admin/ProgressLine";
import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
import PageTab from '/resources/js/components/Others/Layout/PageTab'
import StorageItemDetail from '/resources/js/components/Others/StorageItemDetail'
import MobileHeader from '/resources/js/components/Mobile/MobileHeader'
import SectionTitle from '/resources/js/components/Others/SectionTitle'
import PageHeader from '/resources/js/components/Others/PageHeader'
import Spinner from '/resources/js/components/FilesView/Spinner'
import axios from 'axios'
export default {
name: 'Storage',
components: {
PageTabGroup,
ProgressLine,
FormLabel,
PageTab,
StorageItemDetail,
SectionTitle,
MobileHeader,
PageHeader,
Spinner,
},
data() {
return {
isLoading: true,
storage: undefined,
distribution: undefined,
storage: undefined
}
},
created() {
axios.get('/api/user/storage')
.then(response => {
this.storage = response.data.data
this.distribution = this.$mapStorageUsage(response.data)
this.storage = response.data
this.isLoading = false
})
}