Refactoring the code and Fixing Bug Risks

app.vue

@@ -17,7 +17,7 @@ export default {
 		const dialog = useDialog();
 
 		function handleDialogOnBackdrop() {
-			return dialog.value && dialog.value.triggerPrimaryActionOnBackdropClick;
+			return dialog.value?.triggerPrimaryActionOnBackdropClick;
 		}
 
 		const user = useUser();

components/Btn.vue

@@ -47,7 +47,7 @@ export default defineComponent({
 					? `secondary bg-transparent text-heading hover:bg-transparent border ${props.borderColor} hover:ring-4 md:hover:ring-8 hover:ring-tertiary`
 					: '',
 				props.tertiary
-					? `tertiary bg-transparent text-heading hover:bg-transparent hover:scale-105 border border-transparent hover:ring-4 md:hover:ring-8 hover:ring-transparent`
+					? "tertiary bg-transparent text-heading hover:bg-transparent hover:scale-105 border border-transparent hover:ring-4 md:hover:ring-8 hover:ring-transparent"
 					: '',
 			];
 		});

components/Chip.vue

@@ -45,7 +45,7 @@ export default defineComponent({
 				'chip-color-12',
 			];
 
-			return !!props.color
+			return (props.color)
 				? props.color
 				: colors[getRandomNumber(0, colors.length - 1)];
 		});

components/Reported-Tasks/Table.vue

@@ -105,7 +105,7 @@ export default {
     const router = useRouter();
 
     function onclickEditItem(item: any) {
-      if (!!!item || !!!item.id) return;
+      if (Boolean(!item) || Boolean(!item.id)) return;
       const reportReason = useReportReason();
       reportReason.value = item?.comment ?? "";
       const reportSubtaskType = useReportSubtaskType();

components/ScrollToBtn.vue

@@ -17,7 +17,7 @@ export default defineComponent({
   },
   setup(props) {
     function onclickScrollUp() {
-      if (!!!props.scrollRef) return;
+      if (!props.scrollRef) return;
       props.scrollRef.scrollIntoView({
         block: "start",
         behavior: "smooth",

components/SectionTitle.vue

@@ -44,9 +44,9 @@ export default defineComponent({
 		size: { type: String, default: 'md' },
 		center: { type: Boolean, default: false },
 		full: { type: Boolean, default: false },
-		heading: { type: String, default: `` },
-		subheading: { type: String, default: `` },
-		body: { type: String, default: `` },
+		heading: { type: String, default: "" },
+		subheading: { type: String, default: "" },
+		body: { type: String, default: "" },
 		sub: { type: Boolean, default: false },
 		noLink: { type: Boolean, default: false },
 		link: { default: { to: '', text: '' } },

components/Table.vue

@@ -70,7 +70,7 @@ export default defineComponent({
 		function handleWindowResize() {
 			windowWidth.value = window?.innerWidth ?? 0;
 			if (
-				!!windowWidth.value &&
+				Boolean(windowWidth.value) &&
 				windowWidth.value > 0 &&
 				windowWidth.value <= 767
 			) {

components/appUsers/Account.vue

@@ -145,7 +145,7 @@ export default defineComponent({
 		watch(
 			() => id.value,
 			async (newValue, oldValue) => {
-				if (!!newValue) {
+				if (newValue) {
 					const [balance, errorBalance] = await getBalanceOfThisUser(newValue);
 					totalCoins.value = balance?.coins ?? 0;
 				}

components/appUsers/Progress.vue

@@ -74,7 +74,7 @@ export default defineComponent({
 		watch(
 			() => id.value,
 			async (newValue, oldValue) => {
-				if (!!newValue) {
+				if (newValue) {
 					loading.value = true;
 					const [success, error] = await getXPOfThisUser(newValue);
 					loading.value = false;

components/appUsers/Table.vue

@@ -275,7 +275,7 @@ export default {
     const router = useRouter();
     const appUser = useAppUser();
     function onclickViewUser(user: any) {
-      if (!!!user || !!!user.id) return;
+      if (Boolean(!user) || Boolean(!user.id)) return;
 
       appUser.value = user;
       router.push(`/dashboard/users/${user.id}`);

components/companies/Table.vue

@@ -172,7 +172,7 @@ export default {
     const company = useCompany();
 
     function onclickEditItem(item: any) {
-      if (!!!item || !!!item.id) return;
+      if (Boolean(!item) || Boolean(!item.id)) return;
 
       company.value = item;
       router.push(`/dashboard/companies/${item.id}`);

components/form/Coins.vue

@@ -66,14 +66,14 @@ export default defineComponent({
 				valid: false,
 				value: 0,
 				rules: [
-					(v: number) => !!v || 'Coins cannot be empty',
+					(v: number) => Boolean(v) || 'Coins cannot be empty',
 					(v: number) => v >= 0 || 'Coins cannot be less than 0',
 				],
 			},
 			description: {
 				valid: false,
 				value: '',
-				rules: [(v: number) => !!v || 'Description cannot be empty'],
+				rules: [(v: number) => Boolean(v) || 'Description cannot be empty'],
 			},
 			credit_note: {
 				valid: true,

components/form/Company.vue

@@ -99,7 +99,7 @@ export default defineComponent({
 				valid: false,
 				value: '',
 				rules: [
-					(v: string) => !!v || 'Error.InputEmpty_Inputs.CompanyName',
+					(v: string) => Boolean(v) || 'Error.InputEmpty_Inputs.CompanyName',
 					(v: string) => !v || v.length >= 3 || 'Error.InputMinLength_3',
 					(v: string) => v.length <= 255 || 'Error.InputMaxLength_255',
 				],
@@ -181,7 +181,7 @@ export default defineComponent({
 		watch(
 			() => props.data,
 			(newValue, oldValue) => {
-				if (!!!newValue) return;
+				if (!newValue) return;
 				form.name.value = newValue?.name ?? '';
 				form.description.value = newValue?.description ?? '';
 				form.website.value = newValue?.website ?? '';
@@ -196,7 +196,7 @@ export default defineComponent({
 		async function onclickSubmitForm() {
 			if (form.validate()) {
 				form.submitting = true;
-				const [success, error] = !!props.data
+				const [success, error] = (props.data)
 					? await editCompany(props.data.id, form.body())
 					: await createCompany(form.body());
 				form.submitting = false;
@@ -209,7 +209,7 @@ export default defineComponent({
 
 		const router = useRouter();
 		function successHandler(res: any) {
-			router.push(`/dashboard/companies`);
+			router.push("/dashboard/companies");
 		}
 
 		function errorHandler(res: any) {

components/form/Job.vue

@@ -170,7 +170,7 @@ export default defineComponent({
 					unit: 'MC',
 					per: 'task',
 				},
-				rules: [(v: any) => !!v || 'Error.InputEmpty_Inputs.ThisField'],
+				rules: [(v: any) => Boolean(v) || 'Error.InputEmpty_Inputs.ThisField'],
 			},
 			company_id: {
 				valid: true,
@@ -181,7 +181,7 @@ export default defineComponent({
 				valid: false,
 				value: '',
 				rules: [
-					(v: string) => !!v || 'Error.InputEmpty_Inputs.JobTitle',
+					(v: string) => Boolean(v) || 'Error.InputEmpty_Inputs.JobTitle',
 					(v: string) => !v || v.length >= 5 || 'Error.InputMinLength_5',
 					(v: string) => v.length <= 255 || 'Error.InputMaxLength_255',
 				],
@@ -190,7 +190,7 @@ export default defineComponent({
 				valid: false,
 				value: '',
 				rules: [
-					(v: string) => !!v || 'Error.InputEmpty_Inputs.Contact',
+					(v: string) => Boolean(v) || 'Error.InputEmpty_Inputs.Contact',
 					(v: string) => !v || v.length >= 5 || 'Error.InputMinLength_5',
 					(v: string) => v.length <= 255 || 'Error.InputMaxLength_255',
 				],
@@ -199,7 +199,7 @@ export default defineComponent({
 				valid: false,
 				value: '',
 				rules: [
-					(v: string) => !!v || 'Error.InputEmpty_Inputs.JobLocation',
+					(v: string) => Boolean(v) || 'Error.InputEmpty_Inputs.JobLocation',
 					(v: string) => v.length <= 255 || 'Error.InputMaxLength_255',
 				],
 			},
@@ -259,7 +259,7 @@ export default defineComponent({
 				valid: false,
 				value: '',
 				rules: [
-					(v: string) => !!v || 'Error.InputEmpty_Inputs.Description',
+					(v: string) => Boolean(v) || 'Error.InputEmpty_Inputs.Description',
 					(v: string) => v.length <= 2000 || 'Error.InputMaxLength_2000',
 				],
 			},
@@ -277,7 +277,7 @@ export default defineComponent({
 				value: {},
 				rules: [
 					(v: any) =>
-						!!form.skill_requirements.value ||
+						Boolean(form.skill_requirements.value) ||
 						'Error.InputEmpty_Inputs.SkillRequirements',
 				],
 			},
@@ -313,7 +313,7 @@ export default defineComponent({
 		watch(
 			() => props.data,
 			(newValue, oldValue) => {
-				if (!!!newValue) return;
+				if (!newValue) return;
 				form.company_id.value = newValue?.company?.id ?? '';
 				form.title.value = newValue?.title ?? '';
 				form.contact.value = newValue?.contact ?? '';
@@ -341,7 +341,7 @@ export default defineComponent({
 		async function onclickSubmitForm() {
 			if (form.validate()) {
 				form.submitting = true;
-				const [success, error] = !!props.data
+				const [success, error] = (props.data)
 					? await editJob(props.data.id, form.body())
 					: await createJob(form.body());
 				form.submitting = false;

components/form/Login.vue

@@ -60,19 +60,19 @@ export default defineComponent({
 				valid: false,
 				value: '',
 				rules: [
-					(v: string) => !!v || 'Error.InputEmpty_Inputs.EmailOrUsername',
+					(v: string) => Boolean(v) || 'Error.InputEmpty_Inputs.EmailOrUsername',
 				],
 			},
 			password: {
 				valid: false,
 				value: '',
-				rules: [(v: string) => !!v || 'Error.InputEmpty_Inputs.Password'],
+				rules: [(v: string) => Boolean(v) || 'Error.InputEmpty_Inputs.Password'],
 			},
 			mfa_code: {
 				valid: true,
 				value: '',
 				rules: [
-					(v: string) => !!v || 'Error.InputEmpty_Inputs.MFACode',
+					(v: string) => Boolean(v) || 'Error.InputEmpty_Inputs.MFACode',
 					(v: string) => v.length >= 6 || 'Error.InputMinLength_6',
 				],
 			},
@@ -134,7 +134,7 @@ export default defineComponent({
 				form.submitting = false;
 
 				// checking is logged in user is admin or not
-				if (!!success && user.value.admin == false) {
+				if (Boolean(success) && user.value.admin == false) {
 					errorHandler({ detail: 'Error.NotAuthorized' });
 					setStates(null);
 					return;
@@ -147,7 +147,7 @@ export default defineComponent({
 		}
 
 		function successHandler(res: any) {
-			router.push(`/dashboard`);
+			router.push("/dashboard");
 		}
 
 		const needMFA = ref(false);
@@ -157,7 +157,7 @@ export default defineComponent({
 
 			let isMFA = msg == 'Error.InvalidCode';
 
-			if (!!isMFA && !!needMFA.value) {
+			if (Boolean(isMFA) && Boolean(needMFA.value)) {
 				openSnackbar('error', msg);
 			}
 

components/form/Skill.vue

@@ -84,12 +84,12 @@ export default defineComponent({
 			id: {
 				valid: false,
 				value: '',
-				rules: [(v: string) => !!v || 'Error.InputEmpty_Inputs.SkillID'],
+				rules: [(v: string) => Boolean(v) || 'Error.InputEmpty_Inputs.SkillID'],
 			},
 			name: {
 				valid: false,
 				value: '',
-				rules: [(v: string) => !!v || 'Error.InputEmpty_Inputs.SkillName'],
+				rules: [(v: string) => Boolean(v) || 'Error.InputEmpty_Inputs.SkillName'],
 			},
 			icon: {
 				valid: true,
@@ -139,10 +139,10 @@ export default defineComponent({
 			() => props.data,
 			(newValue, oldValue) => {
 				form.id.value = newValue?.id ?? '';
-				form.id.valid = !!form.id.value;
+				form.id.valid = Boolean(form.id.value);
 
 				form.name.value = newValue?.name ?? '';
-				form.name.valid = !!form.name.value;
+				form.name.valid = Boolean(form.name.value);
 
 				form.icon.value = newValue?.icon ?? '';
 				form.dependencies.value = newValue?.dependencies ?? [];
@@ -155,7 +155,7 @@ export default defineComponent({
 		async function onclickSubmitForm() {
 			if (form.validate()) {
 				form.submitting = true;
-				const [success, error] = !!props.data
+				const [success, error] = (props.data)
 					? await updateSkill(props.rootSkillID, props.subSkillID, {
 							...form.body(),
 							column: props.col,
@@ -178,7 +178,7 @@ export default defineComponent({
 		function onclickDeleteSkill() {
 			openDialog(
 				'warning',
-				`Delete Skill`,
+				"Delete Skill",
 				`Are you sure you want to delete ${
 					props.data?.name ?? 'this skill'
 				}. This action cannot be undone.`,

components/form/XP.vue

@@ -40,7 +40,7 @@ export default defineComponent({
 				valid: false,
 				value: props.subSkillXP,
 				rules: [
-					(v: number) => !!v || 'XP cannot be empty',
+					(v: number) => Boolean(v) || 'XP cannot be empty',
 					(v: number) => v >= 0 || 'XP cannot be less than 0',
 				],
 			},

components/input/Btn.vue

@@ -76,7 +76,7 @@ export default defineComponent({
           ? `bg-transparent text-heading font-medium hover:bg-transparent border ${props.borderColor} hover:ring-8 hover:ring-tertiary`
           : "",
         props.tertiary
-          ? `bg-transparent text-heading font-medium hover:bg-transparent hover:scale-105 border border-transparent hover:ring-8 hover:ring-transparent`
+          ? "bg-transparent text-heading font-medium hover:bg-transparent hover:scale-105 border border-transparent hover:ring-8 hover:ring-transparent"
           : "",
       ];
     });

components/input/Checkbox.vue

@@ -75,7 +75,7 @@ export default defineComponent({
 			set(value) {
 				emit('update:modelValue', value);
 				error.value = value ? '' : 'This is required';
-				emit('valid', !!!error.value);
+				emit('valid', Boolean(!error.value));
 			},
 		});
 

components/input/CheckboxGroup.vue

@@ -58,7 +58,7 @@ export default defineComponent({
 				let currentOption = props.modelValue.find(
 					(value) => option.value == value
 				);
-				return { ...option, selected: falseOnly ? false : !!currentOption };
+				return { ...option, selected: falseOnly ? false : Boolean(currentOption) };
 			});
 			Object.assign(mappedOptions, [...arr]);
 		}

components/input/List.vue

@@ -50,7 +50,7 @@ export default defineComponent({
 			value: '',
 			rules: [
 				(v: string) => {
-					if (!v && !!addToList.value) {
+					if (!v && Boolean(addToList.value)) {
 						return 'Cannot add empty string to list';
 					} else return true;
 				},
@@ -63,14 +63,14 @@ export default defineComponent({
 
 		function onclickAddToList() {
 			addToList.value = true;
-			if (!!!input.value) return;
+			if (!input.value) return;
 
 			let isSame = props.modelValue.find(
 				(item: string) =>
 					item.toLocaleLowerCase() == input.value.toLocaleLowerCase()
 			);
 
-			if (!!!isSame) {
+			if (!isSame) {
 				emit('update:modelValue', [...props.modelValue, input.value]);
 			}