Dashboard completed. Demo files added

src/layout/AppConfig.vue

@@ -244,7 +244,7 @@
 
 <script setup>
 import { ref } from 'vue';
-import { useLayoutService } from '@/composables/layoutService';
+import { useLayoutService } from '@/layout/composables/layoutService';
 
 const scales = ref([12, 13, 14, 15, 16]);
 const visible = ref(false);

src/layout/AppFooter.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-import { useLayoutService } from '@/composables/layoutService';
+import { useLayoutService } from '@/layout/composables/layoutService';
 
 const { layoutConfig } = useLayoutService();
 

src/layout/AppLayout.vue

@@ -21,7 +21,7 @@ import AppTopbar from './AppTopbar.vue';
 import AppFooter from './AppFooter.vue';
 import AppSidebar from './AppSidebar.vue';
 import AppConfig from './AppConfig.vue';
-import { useLayoutService } from '@/composables/layoutService';
+import { useLayoutService } from '@/layout/composables/layoutService';
 
 const { layoutConfig, layoutState, isSidebarActive } = useLayoutService();
 

src/layout/AppTopbar.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script setup>
-import { useLayoutService } from '@/composables/layoutService';
+import { useLayoutService } from '@/layout/composables/layoutService';
 
 const { layoutConfig, onMenuToggle } = useLayoutService();
 

src/layout/composables/layoutService.js

@@ -0,0 +1,48 @@
+import { toRefs, reactive, computed } from 'vue';
+
+const layoutConfig = reactive({
+    ripple: false,
+    darkTheme: false,
+    inputStyle: 'outlined',
+    menuMode: 'static',
+    theme: 'lara-light-indigo',
+    scale: 14
+});
+
+const layoutState = reactive({
+    staticMenuDesktopInactive: false,
+    overlayMenuActive: false,
+    profileSidebarVisible: false,
+    configSidebarVisible: false,
+    staticMenuMobileActive: false,
+    menuHoverActive: false
+});
+
+export function useLayoutService () {
+    const changeThemeSettings = (theme, darkTheme) => {
+        layoutConfig.theme = theme;
+        layoutConfig.darkTheme = darkTheme;
+    };
+
+    const setScale = scale => {
+        layoutConfig.scale = scale;
+    };
+
+    const onMenuToggle = () => {
+        if (layoutConfig.menuMode === 'overlay') {
+            layoutState.overlayMenuActive = !layoutState.overlayMenuActive;
+        }
+
+        if (window.innerWidth > 991) {
+            layoutState.staticMenuDesktopInactive = !layoutState.staticMenuDesktopInactive;
+        } else {
+            layoutState.staticMenuMobileActive = !layoutState.staticMenuMobileActive;
+        }
+    };
+
+    const isSidebarActive = computed(() => layoutState.overlayMenuActive || layoutState.staticMenuMobileActive);
+
+    const isDarkTheme = computed(() => layoutConfig.darkTheme);
+
+    return { layoutConfig: toRefs(layoutConfig), layoutState: toRefs(layoutState), changeThemeSettings, setScale, onMenuToggle, isSidebarActive, isDarkTheme };
+}

src/layout/service/CountryService.js

@@ -0,0 +1,6 @@
+export default class CountryService {
+
+    getCountries() {
+        return fetch('data/countries.json').then(res => res.json()).then(d => d.data);
+    }
+}

src/layout/service/CustomerService.js

@@ -0,0 +1,25 @@
+export default class CustomerService {
+
+    getCustomersSmall() {
+        return fetch('data/customers-small.json').then(res => res.json()).then(d => d.data);
+    }
+  
+    getCustomersMedium() {
+        return fetch('data/customers-medium.json').then(res => res.json()).then(d => d.data);
+    }
+  
+    getCustomersLarge() {
+        return fetch('data/customers-large.json').then(res => res.json()).then(d => d.data);
+    }
+  
+    getCustomersXLarge() {
+        return fetch('data/customers-xlarge.json').then(res => res.json()).then(d => d.data);
+    }
+  
+    getCustomers(params) {
+        const queryParams = Object.keys(params).map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k])).join('&');
+        return fetch('https://www.primefaces.org/data/customers?' + queryParams).then(res => res.json())
+    }
+    
+}
+  

src/layout/service/NodeService.js

@@ -0,0 +1,11 @@
+export default class NodeService {
+
+    getTreeTableNodes() {
+        return fetch('data/treetablenodes.json').then(res => res.json()).then(d => d.root);
+    }
+
+    getTreeNodes() {
+        return fetch('data/treenodes.json').then(res => res.json()).then(d => d.root);
+    }
+    
+}

src/layout/service/PhotoService.js

@@ -0,0 +1,7 @@
+export default class PhotoService {
+
+    getImages() {
+        return fetch('data/photos.json').then(res => res.json())
+                .then(d => d.data);
+    }
+}

src/layout/service/ProductService.js

@@ -0,0 +1,15 @@
+export default class ProductService {
+
+    getProductsSmall() {
+		return fetch('data/products-small.json').then(res => res.json()).then(d => d.data);
+	}
+
+	getProducts() {
+		return fetch('data/products.json').then(res => res.json()).then(d => d.data);
+    }
+
+    getProductsWithOrdersSmall() {
+		return fetch('data/products-orders-small.json').then(res => res.json()).then(d => d.data);
+	}
+	
+}