Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)

2026-08-27 08:24:06 +00:00 · 2026-07-04 20:30:12 +08:00
parent bd5a6eff69
commit 7238ec8356
25 changed files with 25 additions and 27 deletions
@@ -153,7 +153,6 @@ app.use(VMoney);
 (app.config.globalProperties as any).uiStore = useUiStore();

 app.config.globalProperties.route = window.route;
-app.config.globalProperties.asset = window.Vapor.asset;
 app.config.globalProperties.emitter = emitter;

 // Auto-register components (eager loaded)
@@ -103,7 +103,7 @@ const emit = defineEmits<{

 const authStore = useAuthStore();
 const { item } = useComponentHandler(props);
-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;

 const callAttention = () => {
    if (item.value.status === 2 || item.value.status === 1) emit('attention');
@@ -252,7 +252,7 @@ const handleCancel = () => {
    }
 };

-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;

 const submitForm = async () => {
    const isValid = await v$.value.$validate();
@@ -317,7 +317,7 @@ const displaySelection = computed(() => {
    return defaultName;
 });

-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;

 const updateServiceType = (service: any) => {
    serviceType.id = service.id;
@@ -438,7 +438,7 @@ const v$ = useVuelidate(rules, { amount });

 const { submit } = useFormHandler(props);

-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;

 const walletOutstanding = computed(() => {
    if (!calculation.value) return 0.00;
@@ -590,7 +590,7 @@ const rules = {

 const v$ = useVuelidate(rules, { amount });

-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;

 const updatePaymentType = (payment: { name: string; id: string }) => {
    paymentMethod.name = payment.name;
@@ -146,7 +146,7 @@ const props = defineProps<{

 const { item } = useComponentHandler(props);

-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;
 import route from '@/general/functions/router';

 const getRecipientBanks = (payment: any = null) => {
@@ -109,7 +109,7 @@ const parameters = reactive({

 const isPurchaseOrderWithTablesPDF = computed(() => allTablesForExportImport.value.length > 0);

-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;

 const onDragEnter = () => { isDragging.value = true; };
 const onDragOver = (e: DragEvent) => {
@@ -413,7 +413,7 @@ watch(() => props.data, () => {
    }
 }, { deep: true });

-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;

 const updateQuantity = (type?: string) => {
    if (!interval.value) {
@@ -66,7 +66,7 @@ import { useQueueStore } from '@/stores/queue';
 import route from '@/general/functions/router';
 import useVuelidate from '@vuelidate/core';

-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;

 interface Filters {
    currency_id: number | null;
@@ -46,7 +46,7 @@
 import { ref, computed } from 'vue';
 import { useComponentHandler } from '@/composables/useComponentHandler';

-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;

 const props = withDefaults(defineProps<{
    section: string;
@@ -82,7 +82,7 @@ const rules = {

 const v$ = useVuelidate(rules, { parameters });

-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;

 const setMarkingFromQuery = () => {
    const urlSearchParams = new URLSearchParams(window.location.search);
@@ -192,7 +192,7 @@ import AdvertisementComponent from '@/components/general/elements/AdvertisementC
 import C2cConfirmationFormComponent from '@/components/general/forms/C2cConfirmationFormComponent.vue';
 import { useRequest } from '@/composables/useRequest';

-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;

 const props = defineProps<{
    data: any;
@@ -96,7 +96,7 @@ const props = defineProps<Props>();

 const { parameters, submit, error } = useFormHandler(props);

-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;

 const hydrateParameters = () => {
    parameters.value = {
@@ -48,7 +48,7 @@ const type = computed(() => {
    return props.file.file.mime_type === 'application/pdf' ? 'pdf' : 'image';
 });

-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;

 const renderPdf = () => {
    isLoading.value = false;
@@ -110,7 +110,7 @@ const isLoading = computed(() => uiStore.isLoading(props.section));
 const listData = computed(() => queueStore.getListData(props.section));
 const pendingList = computed(() => queueStore.isInCompleteQueue(props.section));

-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;

 const setDecoratorDefault = () => {
    filters.value = queueStore.normalizeListFilters(filters.value);
@@ -90,7 +90,7 @@ const notifications = ref<any[]>([]);
 const isClicked = ref(false);
 const notificationsLength = ref(0);

-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;

 const fetchNotification = async () => {
    isLoading.value = true;
@@ -47,5 +47,5 @@ const props = defineProps<{

 const { isLoading } = useFormHandler(props);

-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;
 </script>
@@ -53,7 +53,7 @@ const queueStore = useQueueStore();
 const filters = ref<Record<string, any>>({});
 const filtersForm = ref<any>(null);

-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;

 const updateFilters = () => {
    if (queueStore.isInQueue(props.section)) {
@@ -14,5 +14,5 @@
 </template>

 <script setup lang="ts">
-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;
 </script>
@@ -131,13 +131,13 @@ onMounted(() => {
        if (file.name.split('.').pop() === 'pdf') {
            const thumbnailElement = (file as any).previewElement?.querySelector('[data-dz-thumbnail]');
            if (thumbnailElement) {
-                thumbnailElement.src = (window as any).Vapor.asset('images/icons/pdf.png');
+                thumbnailElement.src = window.Vapor.asset('images/icons/pdf.png');
            }
        }
        if ((file.name.split('.').pop() ?? '').indexOf('xls') !== -1) {
            const thumbnailElement = (file as any).previewElement?.querySelector('[data-dz-thumbnail]');
            if (thumbnailElement) {
-                thumbnailElement.src = (window as any).Vapor.asset('images/icons/xlsx.png');
+                thumbnailElement.src = window.Vapor.asset('images/icons/xlsx.png');
            }
        }

@@ -96,7 +96,7 @@ const rules = {
    },
 };
 const v$ = useVuelidate(rules, { parameters });
-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;

 const onSelect = (val: any) => {
    parameters.value.id = val;
@@ -127,7 +127,7 @@ onMounted(() => {
    queueStore.updateListQueue({ name: section });
 });

-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;

 const download = async (targetCompany: any, paramShowingPreciseAmount: boolean) => {
    const url = route('wallet.details-export', targetCompany.reference, paramShowingPreciseAmount);
@@ -94,7 +94,7 @@ const authStore = useAuthStore();

 const reload = ref(false);

-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;

 const downloadInvoiceUrl = () => {
    return route('customers.invoices') + '?marking=' + item.value.reference;
@@ -6,7 +6,7 @@ declare global {
    interface Window {
        route: any;
        asset: any;
-        Vapor: any;
+        Vapor: import('laravel-vapor').Vapor;
        Laravel: any;
        $: any;
        grecaptcha: any;
@@ -19,6 +19,5 @@ declare global {
    }

    const route: any;
-    // const asset: any;
    const $: any;
 }