fix logout issue on payment and recurring-invoice view page

composer.json

@@ -17,6 +17,7 @@
     "fideloper/proxy": "^4.0",
     "fruitcake/laravel-cors": "^1.0",
     "guzzlehttp/guzzle": "^7.0.1",
+    "innocenzi/laravel-vite": "^0.1.1",
     "intervention/image": "^2.3",
     "jasonmccreary/laravel-test-assertions": "^2.0",
     "laravel/framework": "^8.0",

config/vite.php

@@ -0,0 +1,67 @@
+<?php
+
+return [
+    /*
+    |--------------------------------------------------------------------------
+    | Entrypoints
+    |--------------------------------------------------------------------------
+    | The files in the configured directories will be considered
+    | entry points and will not be required in the configuration file.
+    | To disable the feature, set to false.
+    */
+    'entrypoints' => [
+        'resources/scripts/main.js',
+    ],
+    'ignore_patterns' => ["/\.d\.ts$/"],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Aliases
+    |--------------------------------------------------------------------------
+    | These aliases will be added to the Vite configuration and used
+    | to generate a proper tsconfig.json file.
+    */
+    'aliases' => [
+        '@' => 'resources',
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Static assets path
+    |--------------------------------------------------------------------------
+    | This option defines the directory that Vite considers as the
+    | public directory. Its content will be copied to the build directory
+    | at build-time.
+    | https://vitejs.dev/config/#publicdir
+    */
+    'public_directory' => resource_path('static'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Ping timeout
+    |--------------------------------------------------------------------------
+    | The maximum duration, in seconds, that the ping to the development
+    | server should take while trying to determine whether to use the
+    | manifest or the server in a local environment.
+    */
+    'ping_timeout' => .1,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Build path
+    |--------------------------------------------------------------------------
+    | The directory, relative to /public, in which Vite will build
+    | the production files. This should match "build.outDir" in the Vite
+    | configuration file.
+    */
+    'build_path' => 'build',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Development URL
+    |--------------------------------------------------------------------------
+    | The URL at which the Vite development server runs.
+    | This is used to generate the script tags when developing.
+    */
+    'dev_url' => 'http://localhost:3000',
+];

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "scripts": {
-    "dev": "vite --port=3000",
+    "dev": "vite",
     "build": "vite build",
     "serve": "vite preview",
     "test": "eslint ./resources/scripts --ext .js,.vue"
@@ -18,12 +18,13 @@
     "eslint": "^7.27.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-vue": "^7.0.0-beta.4",
+    "laravel-vite": "^0.0.7",
     "postcss": "^8.4.5",
     "prettier": "^2.3.0",
     "sass": "^1.32.12",
     "tailwind-scrollbar": "^1.3.1",
     "tailwindcss": "^3.0.6",
-    "vite": "^4.0.0"
+    "vite": "^2.6.1"
   },
   "dependencies": {
     "@headlessui/vue": "^1.4.0",
@@ -31,11 +32,10 @@
     "@popperjs/core": "^2.9.2",
     "@stripe/stripe-js": "^1.21.2",
     "@tailwindcss/line-clamp": "^0.3.0",
-    "@tiptap/core": "^2.0.3",
+    "@tiptap/core": "^2.0.0-beta.85",
-    "@tiptap/extension-text-align": "^2.0.3",
+    "@tiptap/extension-text-align": "^2.0.0-beta.29",
-    "@tiptap/pm": "^2.0.3",
+    "@tiptap/starter-kit": "^2.0.0-beta.81",
-    "@tiptap/starter-kit": "^2.0.3",
+    "@tiptap/vue-3": "^2.0.0-beta.38",
-    "@tiptap/vue-3": "^2.0.3",
     "@vuelidate/components": "^1.1.12",
     "@vuelidate/core": "^2.0.0-alpha.32",
     "@vuelidate/validators": "^2.0.0-alpha.25",
@@ -43,7 +43,6 @@
     "axios": "^0.19",
     "chart.js": "^2.7.3",
     "guid": "0.0.12",
-    "laravel-vite-plugin": "^0.7.4",
     "lodash": "^4.17.13",
     "maska": "^1.4.6",
     "mini-svg-data-uri": "^1.3.3",

resources/scripts/admin/views/customers/partials/CustomerChart.vue

@@ -35,16 +35,7 @@
       </div>
 
       <div
-        class="
+        class="grid col-span-12 mt-6 text-center xl:mt-0 sm:grid-cols-4 xl:text-right xl:col-span-3 xl:grid-cols-1 xxl:col-span-2"
-          grid
-          col-span-12
-          mt-6
-          text-center
-          xl:mt-0
-          sm:grid-cols-4
-          xl:text-right xl:col-span-3 xl:grid-cols-1
-          xxl:col-span-2
-        "
       >
         <div class="px-6 py-2">
           <span class="text-xs leading-5 lg:text-sm">
@@ -177,10 +168,12 @@ const getChartInvoices = computed(() => {
   return []
 })
 
+const customerId = computed(() => route.params.id)
+
 watch(
-  route,
+  () => customerId.value,
-  () => {
+  (id) => {
-    if (route.params.id) {
+    if (id && route.name === 'customers.view') {
       loadCustomer()
     }
     selectedYear.value = 'This year'

resources/scripts/admin/views/estimates/View.vue

@@ -37,32 +37,10 @@
 
     <!-- Sidebar -->
     <div
-      class="
+      class="fixed top-0 left-0 hidden h-full pt-16 pb-[6.4rem] ml-56 bg-white xl:ml-64 w-88 xl:block"
-        fixed
-        top-0
-        left-0
-        hidden
-        h-full
-        pt-16
-        pb-[6.4rem]
-        ml-56
-        bg-white
-        xl:ml-64
-        w-88
-        xl:block
-      "
     >
       <div
-        class="
+        class="flex items-center justify-between px-4 pt-8 pb-2 border border-gray-200 border-solid height-full"
-          flex
-          items-center
-          justify-between
-          px-4
-          pt-8
-          pb-2
-          border border-gray-200 border-solid
-          height-full
-        "
       >
         <div class="mb-6">
           <BaseInput
@@ -92,14 +70,7 @@
             </template>
 
             <div
-              class="
+              class="px-4 py-1 pb-2 mb-1 mb-2 text-sm border-b border-gray-200 border-solid"
-                px-4
-                py-1
-                pb-2
-                mb-1 mb-2
-                text-sm
-                border-b border-gray-200 border-solid
-              "
             >
               {{ $t('general.sort_by') }}
             </div>
@@ -156,12 +127,7 @@
 
       <div
         ref="estimateListSection"
-        class="
+        class="h-full overflow-y-scroll border-l border-gray-200 border-solid base-scroll"
-          h-full
-          overflow-y-scroll
-          border-l border-gray-200 border-solid
-          base-scroll
-        "
       >
         <div v-for="(estimate, index) in estimateList" :key="index">
           <router-link
@@ -181,29 +147,11 @@
               <BaseText
                 :text="estimate.customer.name"
                 :length="30"
-                class="
+                class="pr-2 mb-2 text-sm not-italic font-normal leading-5 text-black capitalize truncate"
-                  pr-2
-                  mb-2
-                  text-sm
-                  not-italic
-                  font-normal
-                  leading-5
-                  text-black
-                  capitalize
-                  truncate
-                "
               />
 
               <div
-                class="
+                class="mt-1 mb-2 text-xs not-italic font-medium leading-5 text-gray-600"
-                  mt-1
-                  mb-2
-                  text-xs
-                  not-italic
-                  font-medium
-                  leading-5
-                  text-gray-600
-                "
               >
                 {{ estimate.estimate_number }}
               </div>
@@ -220,26 +168,11 @@
               <BaseFormatMoney
                 :amount="estimate.total"
                 :currency="estimate.customer.currency"
-                class="
+                class="block mb-2 text-xl not-italic font-semibold leading-8 text-right text-gray-900"
-                  block
-                  mb-2
-                  text-xl
-                  not-italic
-                  font-semibold
-                  leading-8
-                  text-right text-gray-900
-                "
               />
 
               <div
-                class="
+                class="text-sm not-italic font-normal leading-5 text-right text-gray-600 est-date"
-                  text-sm
-                  not-italic
-                  font-normal
-                  leading-5
-                  text-right text-gray-600
-                  est-date
-                "
               >
                 {{ estimate.formatted_estimate_date }}
               </div>
@@ -264,13 +197,7 @@
     >
       <iframe
         :src="`${shareableLink}`"
-        class="
+        class="flex-1 border border-gray-400 border-solid rounded-md bg-white frame-style"
-          flex-1
-          border border-gray-400 border-solid
-          rounded-md
-          bg-white
-          frame-style
-        "
       />
     </div>
   </BasePage>
@@ -345,11 +272,14 @@ const getCurrentEstimateId = computed(() => {
   return null
 })
 
-watch(route, (to, from) => {
+const estimateId = computed(() => route.params.id)
-  if (to.name === 'estimates.view') {
+
-    loadEstimate()
+watch(
+  () => estimateId.value,
+  (id) => {
+    if (id && route.name === 'estimates.view') loadEstimate()
   }
-})
+)
 
 loadEstimates()
 loadEstimate()

resources/scripts/admin/views/invoices/View.vue

@@ -65,11 +65,14 @@ const getCurrentInvoiceId = computed(() => {
   return null
 })
 
-watch(route, (to, from) => {
+const invoiceId = computed(() => route.params.id)
-  if (to.name === 'invoices.view') {
+
-    loadInvoice()
+watch(
+  () => invoiceId.value,
+  (id) => {
+    if (id && route.name === 'invoices.view') loadInvoice()
   }
-})
+)
 
 async function onMarkAsSent() {
   dialogStore
@@ -286,32 +289,10 @@ onSearched = debounce(onSearched, 500)
 
     <!-- sidebar -->
     <div
-      class="
+      class="fixed top-0 left-0 hidden h-full pt-16 pb-[6.4rem] ml-56 bg-white xl:ml-64 w-88 xl:block"
-        fixed
-        top-0
-        left-0
-        hidden
-        h-full
-        pt-16
-        pb-[6.4rem]
-        ml-56
-        bg-white
-        xl:ml-64
-        w-88
-        xl:block
-      "
     >
       <div
-        class="
+        class="flex items-center justify-between px-4 pt-8 pb-2 border border-gray-200 border-solid height-full"
-          flex
-          items-center
-          justify-between
-          px-4
-          pt-8
-          pb-2
-          border border-gray-200 border-solid
-          height-full
-        "
       >
         <div class="mb-6">
           <BaseInput
@@ -335,14 +316,7 @@ onSearched = debounce(onSearched, 500)
               </BaseButton>
             </template>
             <div
-              class="
+              class="px-2 py-1 pb-2 mb-1 mb-2 text-sm border-b border-gray-200 border-solid"
-                px-2
-                py-1
-                pb-2
-                mb-1 mb-2
-                text-sm
-                border-b border-gray-200 border-solid
-              "
             >
               {{ $t('general.sort_by') }}
             </div>
@@ -399,12 +373,7 @@ onSearched = debounce(onSearched, 500)
 
       <div
         ref="invoiceListSection"
-        class="
+        class="h-full overflow-y-scroll border-l border-gray-200 border-solid base-scroll"
-          h-full
-          overflow-y-scroll
-          border-l border-gray-200 border-solid
-          base-scroll
-        "
       >
         <div v-for="(invoice, index) in invoiceList" :key="index">
           <router-link
@@ -424,29 +393,11 @@ onSearched = debounce(onSearched, 500)
               <BaseText
                 :text="invoice.customer.name"
                 :length="30"
-                class="
+                class="pr-2 mb-2 text-sm not-italic font-normal leading-5 text-black capitalize truncate"
-                  pr-2
-                  mb-2
-                  text-sm
-                  not-italic
-                  font-normal
-                  leading-5
-                  text-black
-                  capitalize
-                  truncate
-                "
               />
 
               <div
-                class="
+                class="mt-1 mb-2 text-xs not-italic font-medium leading-5 text-gray-600"
-                  mt-1
-                  mb-2
-                  text-xs
-                  not-italic
-                  font-medium
-                  leading-5
-                  text-gray-600
-                "
               >
                 {{ invoice.invoice_number }}
               </div>
@@ -460,27 +411,12 @@ onSearched = debounce(onSearched, 500)
 
             <div class="flex-1 whitespace-nowrap right">
               <BaseFormatMoney
-                class="
+                class="mb-2 text-xl not-italic font-semibold leading-8 text-right text-gray-900 block"
-                  mb-2
-                  text-xl
-                  not-italic
-                  font-semibold
-                  leading-8
-                  text-right text-gray-900
-                  block
-                "
                 :amount="invoice.total"
                 :currency="invoice.customer.currency"
               />
               <div
-                class="
+                class="text-sm not-italic font-normal leading-5 text-right text-gray-600 est-date"
-                  text-sm
-                  not-italic
-                  font-normal
-                  leading-5
-                  text-right text-gray-600
-                  est-date
-                "
               >
                 {{ invoice.formatted_invoice_date }}
               </div>
@@ -505,13 +441,7 @@ onSearched = debounce(onSearched, 500)
     >
       <iframe
         :src="`${shareableLink}`"
-        class="
+        class="flex-1 border border-gray-400 border-solid bg-white rounded-md frame-style"
-          flex-1
-          border border-gray-400 border-solid
-          bg-white
-          rounded-md
-          frame-style
-        "
       />
     </div>
   </BasePage>

resources/scripts/admin/views/payments/View.vue

@@ -22,31 +22,10 @@
 
     <!-- Sidebar -->
     <div
-      class="
+      class="fixed top-0 left-0 hidden h-full pt-16 pb-[6rem] ml-56 bg-white xl:ml-64 w-88 xl:block"
-        fixed
-        top-0
-        left-0
-        hidden
-        h-full
-        pt-16
-        pb-[6rem]
-        ml-56
-        bg-white
-        xl:ml-64
-        w-88
-        xl:block
-      "
     >
       <div
-        class="
+        class="flex items-center justify-between px-4 pt-8 pb-6 border border-gray-200 border-solid"
-          flex
-          items-center
-          justify-between
-          px-4
-          pt-8
-          pb-6
-          border border-gray-200 border-solid
-        "
       >
         <BaseInput
           v-model="searchData.searchText"
@@ -70,14 +49,7 @@
             </template>
 
             <div
-              class="
+              class="px-4 py-1 pb-2 mb-2 text-sm border-b border-gray-200 border-solid"
-                px-4
-                py-1
-                pb-2
-                mb-2
-                text-sm
-                border-b border-gray-200 border-solid
-              "
             >
               {{ $t('general.sort_by') }}
             </div>
@@ -159,43 +131,17 @@
               <BaseText
                 :text="payment?.customer?.name"
                 :length="30"
-                class="
+                class="pr-2 mb-2 text-sm not-italic font-normal leading-5 text-black capitalize truncate"
-                  pr-2
-                  mb-2
-                  text-sm
-                  not-italic
-                  font-normal
-                  leading-5
-                  text-black
-                  capitalize
-                  truncate
-                "
               />
 
               <div
-                class="
+                class="mb-1 text-xs not-italic font-medium leading-5 text-gray-500 capitalize"
-                  mb-1
-                  text-xs
-                  not-italic
-                  font-medium
-                  leading-5
-                  text-gray-500
-                  capitalize
-                "
               >
                 {{ payment?.payment_number }}
               </div>
 
               <div
-                class="
+                class="mb-1 text-xs not-italic font-medium leading-5 text-gray-500 capitalize"
-                  mb-1
-                  text-xs
-                  not-italic
-                  font-medium
-                  leading-5
-                  text-gray-500
-                  capitalize
-                "
               >
                 {{ payment?.invoice_number }}
               </div>
@@ -203,15 +149,7 @@
 
             <div class="flex-1 whitespace-nowrap right">
               <BaseFormatMoney
-                class="
+                class="block mb-2 text-xl not-italic font-semibold leading-8 text-right text-gray-900"
-                  block
-                  mb-2
-                  text-xl
-                  not-italic
-                  font-semibold
-                  leading-8
-                  text-right text-gray-900
-                "
                 :amount="payment?.amount"
                 :currency="payment.customer?.currency"
               />
@@ -313,9 +251,14 @@ const paymentDate = computed(() => {
   )
 })
 
-watch(route, () => {
+const paymentId = computed(() => route.params.id)
-  loadPayment()
+
-})
+watch(
+  () => paymentId.value,
+  (id) => {
+    if (id && route.name === 'payments.view') loadPayment()
+  }
+)
 
 loadPayments()
 loadPayment()

resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceInfo.vue

@@ -78,10 +78,12 @@ let isLoading = computed(() => {
   return recurringInvoiceStore.isFetchingViewData
 })
 
+const invoiceId = computed(() => route.params.id)
+
 watch(
-  route,
+  () => invoiceId.value,
-  () => {
+  (id) => {
-    if (route.params.id && route.name === 'recurring-invoices.view') {
+    if (id && route.name === 'recurring-invoices.view') {
       loadRecurringInvoice()
     }
   },

resources/views/app.blade.php

@@ -21,7 +21,7 @@
         <link rel="stylesheet" href="/modules/styles/{{ $name }}">
     @endforeach
 
-    @vite('resources/scripts/main.js')
+    @vite
 </head>
 
 <body
@@ -57,15 +57,15 @@
 
         window.login_page_description = "{{$login_page_description}}"
 
-        @endif
+        @endif     
         @if(isset($copyright_text))
 
         window.copyright_text = "{{$copyright_text}}"
 
-        @endif
+        @endif    
 
-        // window.Crater.start()
+        window.Crater.start()
     </script>
 </body>
 
-</html>
+</html>

vite.config.ts

@@ -1,24 +1,17 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from 'laravel-vite'
-import laravel from 'laravel-vite-plugin'
 import vue from '@vitejs/plugin-vue'
 
 export default defineConfig({
     server: {
-      watch: {
+        watch: {
-        ignored: ['**/.env/**'],
+            ignored: ['**/.env/**'],
-      },
+        },
     },
-    plugins: [
-      vue(),
-      laravel({
-        input: ['resources/scripts/main.js'],
-        valetTls: false,
-      }),
-    ],
     resolve: {
-      alias: {
+        alias: {
-        '@': '/resources',
+            "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js"
-        'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
+        }
-      },
+    }
-    },
+}).withPlugins(
-  })
+    vue
+)