build version 400

resources/assets/js/views/layouts/LayoutBasic.vue

@@ -1,83 +1,61 @@
 <template>
-  <div class="template-container" v-if="isAppLoaded">
+  <div v-if="isAppLoaded" class="h-full">
     <base-modal />
-    <site-header/>
-    <site-sidebar type="basic"/>
-
-    <transition
-      name="fade"
-      mode="out-in">
+    <site-header />
+    <div class="flex h-screen pt-16 pb-10 overflow-hidden">
+      <site-sidebar />
       <router-view />
-    </transition>
-    <site-footer/>
+    </div>
+    <site-footer />
   </div>
-  <div v-else class="template-container">
-    <font-awesome-icon icon="spinner" class="fa-spin"/>
+  <div v-else class="h-full">
+    <refresh-icon class="h-6 animate-spin" />
   </div>
 </template>
+
 <script type="text/babel">
 import SiteHeader from './partials/TheSiteHeader.vue'
 import SiteFooter from './partials/TheSiteFooter.vue'
 import SiteSidebar from './partials/TheSiteSidebar.vue'
-import Layout from '../../helpers/layout'
 import BaseModal from '../../components/base/modal/BaseModal'
+import { RefreshIcon } from '@vue-hero-icons/solid'
 import { mapActions, mapGetters } from 'vuex'
 
 export default {
   components: {
-    SiteHeader, SiteSidebar, SiteFooter, BaseModal
-  },
-  data () {
-    return {
-      'header': 'header'
-    }
+    SiteHeader,
+    SiteSidebar,
+    SiteFooter,
+    BaseModal,
+    RefreshIcon,
   },
+
   computed: {
-    ...mapGetters([
-      'isAppLoaded'
-    ]),
+    ...mapGetters(['isAppLoaded']),
 
     ...mapGetters('company', {
       selectedCompany: 'getSelectedCompany',
-      companies: 'getCompanies'
     }),
 
-    isShow () {
+    isShow() {
       return true
-    }
-  },
-  mounted () {
-    Layout.set('layout-default')
+    },
   },
 
-  created () {
-    this.bootstrap().then((res) => {
+  created() {
+    this.bootstrap().then(() => {
       this.setInitialCompany()
     })
   },
 
   methods: {
     ...mapActions(['bootstrap']),
+
     ...mapActions('company', ['setSelectedCompany']),
-    setInitialCompany () {
-      let selectedCompany = Ls.get('selectedCompany') !== null
 
-      if (selectedCompany) {
-        let foundCompany = this.companies.find((company) => company.id === parseInt(selectedCompany))
-
-        if (foundCompany) {
-          this.setSelectedCompany(foundCompany)
-          return
-        }
-      }
-
-      this.setSelectedCompany(this.companies[0])
-    }
-  }
+    setInitialCompany() {
+      this.setSelectedCompany(this.selectedCompany)
+    },
+  },
 }
 </script>
-<style lang="scss" scoped>
-body {
-  background-color: #f8f8f8;
-}
-</style>