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

This commit is contained in:
Dillon Ngo
2026-07-01 10:10:07 +08:00
parent dc553e5e95
commit 2566f26c53
14 changed files with 55 additions and 61 deletions
@@ -172,7 +172,7 @@ import { useVuelidate } from '@vuelidate/core';
import { required, email, numeric, sameAs, requiredIf } from '@vuelidate/validators';
import { useAuthStore } from '@/stores/auth';
import { useUiStore } from '@/stores/ui';
import { useRequest } from '@/composables/useRequest';
import { useModalFormHandler } from '@/composables/useModalFormHandler';
import route from '@/general/functions/router';
import ErrorMessageComponent from '@/components/general/elements/ErrorMessageComponent.vue';
import ValidationWrapperComponent from '@/components/general/forms/ValidationWrapperComponent.vue';
@@ -181,7 +181,7 @@ const props = defineProps<{
section: string;
}>();
const { submit } = useRequest();
const { submit } = useModalFormHandler(props);
const authStore = useAuthStore();
const uiStore = useUiStore();
@@ -266,9 +266,6 @@ const submitForm = async () => {
access_token: response.payload.access_token,
redirect_url: response.payload.redirect_url
});
},
errorHandler: (response: any) => {
error.value = response.message;
}
}
);
@@ -44,7 +44,7 @@
import { reactive, ref } from 'vue';
import { useVuelidate } from '@vuelidate/core';
import { required, email } from '@vuelidate/validators';
import { useRequest } from '@/composables/useRequest';
import { useModalFormHandler } from '@/composables/useModalFormHandler';
import { useAuthStore } from '@/stores/auth';
import { useUiStore } from '@/stores/ui';
import route from '@/general/functions/router';
@@ -55,7 +55,7 @@ const props = defineProps<{
section: string;
}>();
const { submit } = useRequest();
const { submit } = useModalFormHandler(props);
const authStore = useAuthStore();
const uiStore = useUiStore();
const rules = {
@@ -92,11 +92,8 @@ const submitForm = async () => {
access_token: response.payload.access_token,
redirect_url: response.payload.redirect_url
});
},
errorHandler: (response: any) => {
error.value = response.message;
}
}
);
};
</script>
</script>
@@ -80,7 +80,7 @@ import { useVuelidate } from '@vuelidate/core';
import { required, email, numeric, sameAs } from '@vuelidate/validators';
import { useAuthStore } from '@/stores/auth';
import { useUiStore } from '@/stores/ui';
import { useRequest } from '@/composables/useRequest';
import { useModalFormHandler } from '@/composables/useModalFormHandler';
import route from '@/general/functions/router';
import ErrorMessageComponent from '@/components/general/elements/ErrorMessageComponent.vue';
import ValidationWrapperComponent from '@/components/general/forms/ValidationWrapperComponent.vue';
@@ -90,7 +90,7 @@ const props = defineProps<{
section: string;
}>();
const { submit } = useRequest();
const { submit } = useModalFormHandler(props);
const authStore = useAuthStore();
const uiStore = useUiStore();
@@ -135,9 +135,6 @@ const submitForm = async () => {
access_token: response.payload.access_token,
redirect_url: response.payload.redirect_url
});
},
errorHandler: (response: any) => {
error.value = response.message;
}
}
);
@@ -92,9 +92,6 @@ const submitForm = async () => {
access_token: response.payload.access_token,
redirect_url: response.payload.redirect_url
});
},
errorHandler: (response: any) => {
error.value = response.message;
}
}
);
@@ -76,7 +76,7 @@ import { useVuelidate } from '@vuelidate/core';
import { required, email, numeric, sameAs } from '@vuelidate/validators';
import { useAuthStore } from '@/stores/auth';
import { useUiStore } from '@/stores/ui';
import { useRequest } from '@/composables/useRequest';
import { useModalFormHandler } from '@/composables/useModalFormHandler';
import route from '@/general/functions/router';
import ErrorMessageComponent from '@/components/general/elements/ErrorMessageComponent.vue';
import ValidationWrapperComponent from '@/components/general/forms/ValidationWrapperComponent.vue';
@@ -85,7 +85,7 @@ const props = defineProps<{
section: string;
}>();
const { submit } = useRequest();
const { submit } = useModalFormHandler(props);
const authStore = useAuthStore();
const uiStore = useUiStore();
@@ -132,9 +132,6 @@ const submitForm = async () => {
redirect_url: response.payload.redirect_url
});
},
errorHandler: (response: any) => {
error.value = response.message;
}
}
);
};
@@ -34,20 +34,29 @@
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import { useVuelidate } from '@vuelidate/core';
import { required, email } from '@vuelidate/validators';
import { useUiStore } from '@/stores/ui';
import { useRequest } from '@/composables/useRequest';
import { useModalFormHandler } from '@/composables/useModalFormHandler';
import route from '@/general/functions/router';
import ValidationWrapperComponent from '@/components/general/forms/ValidationWrapperComponent.vue';
interface Props {
data?: any;
section: string;
}
const props = withDefaults(defineProps<Props>(), {
data: null
});
const emit = defineEmits(['updateStatus']);
const { submit } = useRequest();
const { submit } = useModalFormHandler(props);
const uiStore = useUiStore();
const parameters = reactive({
@@ -260,7 +260,7 @@ import { computed, reactive, ref } from 'vue';
import { useVuelidate } from '@vuelidate/core';
import { required, email, numeric, sameAs, requiredIf } from '@vuelidate/validators';
import { useAuthStore } from '@/stores/auth';
import { useRequest } from '@/composables/useRequest';
import { useModalFormHandler } from '@/composables/useModalFormHandler';
import route from '@/general/functions/router';
import ErrorMessageComponent from '@/components/general/elements/ErrorMessageComponent.vue';
import ValidationWrapperComponent from '@/components/general/forms/ValidationWrapperComponent.vue';
@@ -270,7 +270,7 @@ const props = defineProps<{
section: string;
}>();
const { submit } = useRequest();
const { submit } = useModalFormHandler(props);
const authStore = useAuthStore();
const error = ref('');
@@ -354,9 +354,6 @@ const submitForm = async () => {
access_token: response.payload.access_token,
redirect_url: response.payload.redirect_url
});
},
errorHandler: (response: any) => {
error.value = response.message;
}
}
);
@@ -364,4 +361,4 @@ const submitForm = async () => {
await changeStep('next');
}
};
</script>
</script>
@@ -125,6 +125,7 @@ import { ref, watch } from 'vue';
import { useQueueStore } from '@/stores/queue';
import { useRequest } from '@/composables/useRequest';
import route from '@/general/functions/router';
import { useModalFormHandler } from '@/composables/useModalFormHandler';
interface Props {
data?: any;
@@ -136,7 +137,7 @@ const props = withDefaults(defineProps<Props>(), {
});
const queueStore = useQueueStore();
const { submit } = useRequest();
const { submit } = useModalFormHandler(props);
const item = ref(props.data ? JSON.parse(JSON.stringify(props.data)) : {});
const isLoading = ref(false);
@@ -165,9 +166,6 @@ const errorHandler = (err: any) => {
const approveAddress = (status: number) => {
isLoading.value = true;
const url = route('api.order.address.status.update', item.value.id, status);
submit(url, 'put', 'addressVerificationSection', true, true, null, {
successHandler: successHandler,
errorHandler: errorHandler
});
submit(url, 'put', 'addressVerificationSection', true, true, null);
};
</script>
@@ -321,4 +321,5 @@ const submitForm = async () => {
}
});
};
</script>
@@ -184,7 +184,7 @@
<script setup lang="ts">
import { ref, watch } from 'vue';
import { useQueueStore } from '@/stores/queue';
import { useRequest } from '@/composables/useRequest';
import { useModalFormHandler } from '@/composables/useModalFormHandler';
import { useUiStore } from '@/stores/ui';
import { useAuthStore } from '@/stores/auth';
import route from '@/general/functions/router';
@@ -197,7 +197,7 @@ const props = defineProps<{
const queueStore = useQueueStore();
const uiStore = useUiStore();
const authStore = useAuthStore();
const { submit } = useRequest();
const { submit } = useModalFormHandler(props);
const expanded = ref(false);
const isEditIdentificationNumber = ref(false);
@@ -229,9 +229,6 @@ const errorHandler = (err: any) => {
const approveDocument = (status: string) => {
isLoading.value = true;
const url = route('api.company.identification.approval', item.value.owner.id, item.value.id, status);
submit(url, 'put', 'identificationVerificationSection', true, true, null, {
successHandler: successHandler,
errorHandler: errorHandler
});
submit(url, 'put', 'identificationVerificationSection', true, true, null);
};
</script>
@@ -209,7 +209,7 @@ const props = defineProps<{
no_action?: boolean;
}>();
const { submit, closeModal, formHandler } = useModalFormHandler({ section: props.section });
const { submit } = useModalFormHandler({ section: props.section });
const item = ref(props.data);
const isLoading = ref(false);
@@ -221,17 +221,6 @@ watch(() => props.data, (newData) => {
const approvePayment = async (status: string) => {
isLoading.value = true;
await submit(route('api.transaction.payment.approval', item.value.id, status), 'put', 'identificationVerificationSection', true, true, null, {
successHandler: () => {
isLoading.value = false;
closeModal();
formHandler();
},
errorHandler: () => {
isLoading.value = false;
closeModal();
formHandler();
}
});
await submit(route('api.transaction.payment.approval', item.value.id, status), 'put', 'identificationVerificationSection', true, true, null);
};
</script>
@@ -74,6 +74,7 @@ const submitForm = async () => {
formHandler('');
authStore.updateProfile(response.payload.data.name);
}
});
};
</script>
@@ -65,6 +65,7 @@ const submitForm = async () => {
closeModal();
formHandler('');
}
});
};
</script>
@@ -1,4 +1,4 @@
import { inject, computed } from 'vue';
import { ref, computed } from 'vue';
import { useRequest } from '@/composables/useRequest';
import { useQueueStore } from '@/stores/queue';
import { useUiStore } from '@/stores/ui';
@@ -10,8 +10,14 @@ export function useModalFormHandler(props: { section: string; }) {
const uiStore = useUiStore();
const { error, errorMessageHandler } = useErrorMessageHandler();
// const closeModal = inject('closeModal', null) as (() => void) | null;
const localLoading = ref(false);
const isLoading = computed(() => uiStore.isLoading(props.section));
const isLoading = computed(() => {
if (props.section) {
return uiStore.isLoading(props.section);
}
return localLoading.value;
});
const closeModal = () => {
if ((window as any).$) {
@@ -20,7 +26,10 @@ export function useModalFormHandler(props: { section: string; }) {
};
const formHandler = (errorMessage?: string) => {
queueStore.reloadList({ name: props.section });
localLoading.value = false;
if (props.section) {
queueStore.reloadList({ name: props.section });
}
if (errorMessage) {
errorMessageHandler(errorMessage);
}
@@ -46,6 +55,12 @@ export function useModalFormHandler(props: { section: string; }) {
parameters?: any,
options: any = {}
) => {
const activeSection = section || props.section;
if (!activeSection) {
localLoading.value = true;
}
const { successHandler: customSuccessHandler, errorHandler: customErrorHandler, ...restOptions } = options;
const mergedOptions = {
...restOptions,
@@ -60,6 +75,7 @@ export function useModalFormHandler(props: { section: string; }) {
if (customErrorHandler) {
customErrorHandler(response, statusCode, section);
} else {
localLoading.value = false;
errorHandler(response);
}
}
@@ -68,7 +84,7 @@ export function useModalFormHandler(props: { section: string; }) {
return await request.submit(
url,
method,
section || props.section,
activeSection,
successNotification,
errorNotification,
parameters,