v1.5-alpha.10

resources/js/views/Mobile/MobileSettings.vue

@@ -25,15 +25,20 @@
             return {
                 navigation: [
                     {
-                        icon: 'hard-drive',
+                        icon: 'user',
                         title: 'Profile Settings',
                         routeName: 'Profile',
                     },
                     {
-                        icon: 'latest',
+                        icon: 'lock',
                         title: 'Password',
                         routeName: 'Password',
                     },
+                    {
+                        icon: 'hard-drive',
+                        title: 'Storage',
+                        routeName: 'Storage',
+                    },
                 ]
             }
         },

resources/js/views/Settings.vue

@@ -25,14 +25,14 @@
                             Password
                         </div>
                     </router-link>
-                    <!--<router-link :to="{name: 'Profile'}" class="menu-list-item link">
+                    <router-link :to="{name: 'Storage'}" class="menu-list-item link">
                         <div class="icon">
                             <hard-drive-icon size="17"></hard-drive-icon>
                         </div>
                         <div class="label">
                             Storage
                         </div>
-                    </router-link>-->
+                    </router-link>
                 </div>
             </ContentGroup>
         </ContentSidebar>
@@ -46,6 +46,7 @@
     import ContentGroup from '@/components/Sidebar/ContentGroup'
     import UserHeadline from '@/components/Sidebar/UserHeadline'
     import {
+        HardDriveIcon,
         UserIcon,
         LockIcon,
     } from 'vue-feather-icons'
@@ -54,6 +55,7 @@
         name: 'Settings',
         components: {
             ContentSidebar,
+            HardDriveIcon,
             UserHeadline,
             ContentGroup,
             UserIcon,

resources/js/views/User/Storage.vue

@@ -0,0 +1,91 @@
+<template>
+    <div id="user-settings" v-if="app">
+
+        <MobileHeader/>
+        <PageHeader :title="$router.currentRoute.meta.title"/>
+
+        <div class="content-page">
+            <SectionTitle>Storage Capacity</SectionTitle>
+            <StorageItemDetail type="disk" :title="'Total used ' + storage.used" :percentage="storage.percentage" :used="storage.capacity"/>
+
+            <SectionTitle>Capacity Used Details</SectionTitle>
+            <StorageItemDetail type="images" title="Images" :percentage="storageDetails.images.percentage" :used="storageDetails.images.used" />
+            <StorageItemDetail type="videos" title="Videos" :percentage="storageDetails.videos.percentage" :used="storageDetails.videos.used" />
+            <StorageItemDetail type="documents" title="Documents" :percentage="storageDetails.documents.percentage" :used="storageDetails.documents.used" />
+            <StorageItemDetail type="others" title="Others" :percentage="storageDetails.others.percentage" :used="storageDetails.others.used" />
+        </div>
+    </div>
+</template>
+
+<script>
+    import StorageItemDetail from '@/components/Others/StorageItemDetail'
+    import MobileHeader from '@/components/Mobile/MobileHeader'
+    import SectionTitle from '@/components/Others/SectionTitle'
+    import PageHeader from '@/components/Others/PageHeader'
+    import {mapGetters} from 'vuex'
+    import axios from 'axios'
+
+    export default {
+        name: 'Profile',
+        components: {
+            StorageItemDetail,
+            SectionTitle,
+            MobileHeader,
+            PageHeader,
+        },
+        computed: {
+            ...mapGetters(['app']),
+        },
+        data() {
+            return {
+                storage: undefined,
+                storageDetails: undefined
+            }
+        },
+        created() {
+            axios.get('/api/user/storage')
+                .then(response => {
+                    this.storage = response.data.data.attributes
+                    this.storageDetails = response.data.data.relationships
+                })
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    #user-settings {
+        overflow: hidden;
+        width: 100%;
+        height: 100%;
+        position: relative;
+
+        .content-page {
+            overflow-y: auto;
+            height: 100%;
+            padding-bottom: 100px;
+            max-width: 700px;
+            width: 100%;
+            margin: 0 auto;
+        }
+    }
+
+    @media only screen and (max-width: 960px) {
+
+        #user-settings {
+
+            .content-page {
+                padding-left: 15px;
+                padding-right: 15px;
+            }
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+
+    }
+
+</style>