feat: iform type

BREAKING CHANGE: modalTheme no longer a valid prop

Author: vis97c

packages/common-helpers/src/form/composable.ts

@@ -40,35 +40,36 @@ export default function useForm(options: iPluginOptions = {}) {
 		request: tResponseFn<R, RV>,
 		inputs: RV | FormInput[] = [],
 		event?: Event,
+		silent = false,
 		plainValues = true
 	): Promise<iFormResponse<R, HTMLElement | string>> {
 		const { values, invalidInputs } = getFormValues<RV>(inputs, plainValues);
 		const modalTarget = (event?.target as HTMLElement)?.closest("dialog") || "body";
+		const withSwal = !silent && isBrowser;
 		let errors;
 		let requestHadErrors = false;
 		let newResponse: iFetchResponse<R> = {};
 
 		if (!invalidInputs.length) {
 			try {
-				if (isBrowser) Swal.fireLoader({ target: modalTarget });
+				if (withSwal) Swal.fireLoader({ target: modalTarget });
 
 				newResponse = await request(values);
+				// request went ok, but still returned errors
+				errors = newResponse.errors;
 
-				if (newResponse?.errors) {
-					errors = newResponse.errors;
-
-					if (errors || !newResponse.data) requestHadErrors = true;
+				// empty response can be server error
+				if (newResponse.data === null || newResponse.data === undefined) {
+					requestHadErrors = true;
 				}
 			} catch (err) {
-				/**
-				 * Network error probably
-				 */
+				// Network error probably
+
 				errors = err;
-				requestHadErrors = true;
 				// eslint-disable-next-line no-console
 				console.error(err);
 
-				if (isBrowser) {
+				if (withSwal) {
 					const { value } = await Swal.fire({
 						title: t("swal.connection_error"),
 						text: t("swal.connection_error_message"),
@@ -82,8 +83,17 @@ export default function useForm(options: iPluginOptions = {}) {
 					// Page reload if user wish to
 					if (value) location.reload();
 				}
+
+				return {
+					invalidInputs,
+					withErrors: true,
+					requestHadErrors: true,
+					validationHadErrors: false,
+					errors,
+					modalTarget,
+				};
 			}
-		} else if (isBrowser) {
+		} else if (withSwal) {
 			// invalid input filling
 			Swal.fire({
 				title: t("swal.incomplete_data"),
@@ -93,12 +103,12 @@ export default function useForm(options: iPluginOptions = {}) {
 			});
 		}
 
-		const validationHadErrors = invalidInputs.length > 0 || !!(errors && !requestHadErrors);
-		const withErrors = requestHadErrors || validationHadErrors;
+		const validationHadErrors = invalidInputs.length > 0;
+		const withErrors = !!errors || requestHadErrors || validationHadErrors;
 		const response = newResponse.data;
 
-		// hide loader
-		if (isBrowser && !validationHadErrors && response) Swal.close();
+		// success, hide loader
+		if (withSwal && !validationHadErrors) Swal.close();
 
 		return {
 			response,

packages/common-helpers/src/form/input.ts

@@ -255,3 +255,11 @@ export class FormInput<V extends iFormValue = iFormValue>
 		return _.isEqual(this.getObject(this), this.getObject(other));
 	}
 }
+
+export interface iForm {
+	title?: string;
+	inputs: FormInput[];
+	listen?: boolean;
+	/** Make all inputs read only by disabling them */
+	readonly?: boolean;
+}

packages/common-helpers/src/form/utils.ts

@@ -222,6 +222,9 @@ export function getFormInputsValues<V extends Record<string, any>>(
 
 /**
  * Returns the actual data object to send to the api
+ * @param inputs The form inputs.
+ * @param plainValues Whether or not to remove unnecessary arrays.
+ * @returns An object containing the form values and invalid inputs.
  */
 export function getFormValues<V extends Record<string, any>>(
 	inputs: V | FormInput[],

packages/common-helpers/src/locale/en.ts

@@ -41,7 +41,9 @@ export const localeBase: tLocaleBase = {
 	swal: {
 		cancel: "Cancel",
 		continue: "Continue",
-		connection_error: "¡Connection error!",
+		error: "Error!",
+		error_message: "Something went wrong!",
+		connection_error: "Connection error!",
 		connection_error_message:
 			"The server is not responding. Please check your network or try again later",
 		connection_error_confirm: "Retry",

packages/common-helpers/src/locale/es.ts

@@ -41,6 +41,8 @@ export const localeBase: tLocaleBase = {
 	swal: {
 		cancel: "Cancelar",
 		continue: "Continuar",
+		error: "¡Error!",
+		error_message: "¡Sucedio algo malo!",
 		connection_error: "¡Error de conexion!",
 		connection_error_message:
 			"El servidor no responde. Por favor verifica tu conexion o intentalo de nuevo mas tarde",

packages/common-types/src/locale.ts

@@ -53,7 +53,11 @@ export type tLocaleBase = {
 		cancel: string;
 		/** @example "Continue" */
 		continue: string;
-		/** @example "¡Connection error!" */
+		/** @example "Error!" */
+		error: string;
+		/** @example "Something went wrong!" */
+		error_message: string;
+		/** @example "Connection error!" */
 		connection_error: string;
 		/** @example "The server is not responding. Please check your network or try again later" */
 		connection_error_message: string;

packages/components-vue/src/components/Dropdown.vue

@@ -37,6 +37,7 @@
 	import useModifiers from "../composables/modifiers";
 	import useTheme from "../composables/theme";
 	import { useHelpers } from "../composables/utils";
+	import { eColors } from "@open-xamu-co/ui-common-enums";
 
 	type tAlignFirstX = "right" | "left";
 	type tAlignFirstY = "top" | "bottom";
@@ -67,7 +68,9 @@
 
 	defineOptions({ name: "DropdownSimple", inheritAttrs: false });
 
-	const props = defineProps<iDropdownProps>();
+	const props = withDefaults(defineProps<iDropdownProps>(), {
+		theme: eColors.SECONDARY,
+	});
 	const emit = defineEmits(["close", "update:model-value"]);
 
 	const { getModifierClasses: GMC } = useHelpers(useUtils);

packages/components-vue/src/components/Modal.vue

@@ -108,11 +108,12 @@
 		ref,
 		watch,
 		Teleport,
-		type RendererElement,
+		getCurrentInstance,
 	} from "vue";
 	import _ from "lodash";
 
 	import { useI18n, useSwal } from "@open-xamu-co/ui-common-helpers";
+	import { eColors } from "@open-xamu-co/ui-common-enums";
 
 	import BaseErrorBoundary from "./base/ErrorBoundary.vue";
 	import BaseWrapper from "./base/Wrapper.vue";
@@ -122,62 +123,11 @@
 	import ActionButtonToggle from "./action/ButtonToggle.vue";
 	import LoaderSimple from "./loader/Simple.vue";
 
-	import type { iUseThemeProps } from "../types/props";
+	import type { iModalButtonConfig, iModalProps } from "../types/props";
 	import useTheme from "../composables/theme";
 	import useUUID from "../composables/uuid";
 	import { useHelpers } from "../composables/utils";
 
-	interface iButtonConfig {
-		title?: string;
-		visible?: boolean;
-		btnClass?: string;
-	}
-
-	interface iModalProps extends iUseThemeProps {
-		/**
-		 * Modal is loading
-		 * Some of the modal contents could be still loading
-		 */
-		loading?: boolean;
-		/**
-		 * The title of the modal shown in .x-modal-header div. If empty title is not rendered
-		 */
-		title?: string;
-		subtitle?: string;
-		/**
-		 * :class object which is attached to the modal modal element
-		 */
-		modalClass?: string | string[] | Record<string, boolean>;
-		/**
-		 * Save button config
-		 */
-		saveButton?: iButtonConfig & { disabled?: boolean };
-		/**
-		 * Cancel button config
-		 */
-		cancelButton?: iButtonConfig;
-		/**
-		 * Are modal requirement meet?
-		 * This is intended to prevent the usage of certain modals
-		 *
-		 * Ex: user does not have enough permissions
-		 */
-		hide?: boolean;
-		hideMessage?: string;
-		hideFooter?: boolean;
-		/**
-		 * disables modal
-		 */
-		disabled?: boolean;
-		// PRIVATE
-		/**
-		 * Shows/hides the modal
-		 * @private
-		 */
-		modelValue?: boolean;
-		target?: string | RendererElement;
-	}
-
 	/**
 	 * Based on @innologica/vue-stackable-modal
 	 * Modified to support vue3
@@ -188,12 +138,15 @@
 
 	defineOptions({ name: "ModalSimple", inheritAttrs: false });
 
-	const props = defineProps<iModalProps>();
+	const props = withDefaults(defineProps<iModalProps>(), {
+		theme: eColors.SECONDARY,
+	});
 	const emit = defineEmits(["save", "close", "update:model-value"]);
 
 	const { t } = useHelpers(useI18n);
 	const Swal = useHelpers(useSwal);
 	const { themeClasses, invertedThemeValues } = useTheme(props, true);
+	const router = getCurrentInstance()?.appContext.config.globalProperties.$router;
 	const { uuid } = useUUID();
 
 	const resolver = ref<(r?: boolean) => void>();
@@ -208,13 +161,13 @@
 
 		return `modal_${seed.replaceAll(" ", "") || randomId}`;
 	});
-	const saveButtonOptions = computed<iButtonConfig & { disabled?: boolean }>(() => ({
+	const saveButtonOptions = computed<iModalButtonConfig & { disabled?: boolean }>(() => ({
 		title: t("ok"),
 		visible: !!props.saveButton?.title,
 		btnClass: "",
 		...(!!props.saveButton && props.saveButton),
 	}));
-	const cancelButtonOptions = computed<iButtonConfig>(() => ({
+	const cancelButtonOptions = computed<iModalButtonConfig>(() => ({
 		title: t("close"),
 		visible: true,
 		btnClass: "",
@@ -283,6 +236,11 @@
 			},
 			{ immediate: true }
 		);
+
+		if (!router?.currentRoute) return;
+
+		// close on route change
+		watch(router.currentRoute, () => closeModal(), { immediate: false });
 	});
 	onUnmounted(closeModal);
 </script>