bomb commit

bush1D3v · Nov 7, 2024 · 36e2e1c · 36e2e1c
1 parent 7aabf28
commit 36e2e1c
Show file tree

Hide file tree

Showing 16 changed files with 185 additions and 153 deletions.
diff --git a/app/components/CurrencyQuotes/Dialog.vue b/app/components/CurrencyQuotes/Dialog.vue
@@ -1,48 +1,53 @@
 <script setup lang="ts">
-import {Button} from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
 import {
-	Dialog,
-	DialogContent,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-	DialogClose,
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+    DialogClose,
 } from "@/components/ui/dialog";
-import {useCurrencyQuotesStore} from "@/stores/useCurrencyQuotesStore";
-import {ref, watch} from "vue";
-import {Cross2Icon} from "@radix-icons/vue";
+import { useCurrencyQuotesStore } from "@/stores/useCurrencyQuotesStore";
+import { ref, watch } from "vue";
+import { Cross2Icon } from "@radix-icons/vue";
+import { CurrencyQuotesDto } from "@/components/Dto/CurrencyQuotesDto";
+import { t } from "i18next";
+import numberFormatter from "@/utils/numberFormatter";
 
 const currencyQuotesStore = useCurrencyQuotesStore();
 
-const props = defineProps<{result: number | undefined; open: boolean}>();
-const emit = defineEmits(["update:open"]);
+const props = defineProps<{ result: number | undefined; open: boolean }>();
+const emit = defineEmits([ "update:open" ]);
 
 const isOpen = ref(props.open);
 
 watch(
-	() => props.open,
-	(newVal) => {
-		isOpen.value = newVal;
-	},
+    () => props.open,
+    (newVal) => {
+        isOpen.value = newVal;
+    },
 );
 
 watch(isOpen, (newVal) => {
-	emit("update:open", newVal);
+    emit("update:open", newVal);
 });
 
 watch(
-	() => currencyQuotesStore.leftCode,
-	(value) => {
-		currencyQuotesStore.leftCode = value;
-	},
+    () => currencyQuotesStore.leftCode,
+    (value) => {
+        console.log(CurrencyQuotesDto[ currencyQuotesStore.leftCode ]);
+        currencyQuotesStore.leftCode = value;
+    },
 );
 
 watch(
-	() => currencyQuotesStore.rightCode,
-	(value) => {
-		currencyQuotesStore.rightCode = value;
-	},
+    () => currencyQuotesStore.rightCode,
+    (value) => {
+        console.log(CurrencyQuotesDto[ currencyQuotesStore.rightCode ]);
+        currencyQuotesStore.rightCode = value;
+    },
 );
 </script>
 
@@ -51,24 +56,42 @@ watch(
         <DialogTrigger as-child>
             <slot name="trigger" />
         </DialogTrigger>
-        <DialogContent class="sm:max-w-[425px]">
+        <DialogContent aria-describedby="Dialog for currency converter" class="sm:max-w-[425px]">
             <template #close-button>
                 <Cross2Icon class="w-4 h-4" @click="isOpen = false" />
             </template>
             <DialogHeader>
-                <DialogTitle>Resultado da Conversão</DialogTitle>
+                <DialogTitle>{{ t("Resultado da Conversão") }}</DialogTitle>
             </DialogHeader>
             <p>
-                A conversão de {{ currencyQuotesStore.leftCode }} {{ currencyQuotesStore.currency }} para {{
-                    currencyQuotesStore.rightCode }} resulta em {{ props.result }}.
+                {{ t("A conversão de") }}
+                <strong>
+                    {{ currencyQuotesStore.currency }}
+                    {{ currencyQuotesStore.leftCode }}
+                </strong>
+                {{ t("para") }}
+                <strong>
+                    {{ t(CurrencyQuotesDto[ currencyQuotesStore.rightCode ]) }}
+                </strong>
+                {{ t("resulta em") }}
+                <strong>
+                    {{ numberFormatter(props.result as number) }}
+                    {{ currencyQuotesStore.rightCode }}
+                </strong>.
             </p>
             <DialogFooter>
                 <DialogClose as-child>
                     <Button type="submit" @click="isOpen = false">
-                        Concluir
+                        {{ t("Concluir") }}
                     </Button>
                 </DialogClose>
             </DialogFooter>
         </DialogContent>
     </Dialog>
 </template>
+
+<style lang="css" scoped>
+strong {
+    @apply text-text;
+}
+</style>
diff --git a/app/components/NewsCard.vue b/app/components/NewsCard.vue
@@ -3,28 +3,28 @@ import Image from "@/tags/Image.vue";
 import Link from "@/tags/Link.vue";
 
 export interface NewsCardProps {
-    id: number;
-    datetime: number;
-    headline: string;
-    image: string;
-    summary: string;
-    url: string;
-    source: string;
+	id: number;
+	datetime: number;
+	headline: string;
+	image: string;
+	summary: string;
+	url: string;
+	source: string;
 }
 
 const props = defineProps<NewsCardProps>();
 </script>
 
 <template>
     <article
-        class="flex bg-secondaryDarker gap-4 items-center justify-between p-4 md:p-5 rounded-lg md:min-w-96 min-h-52">
+        class="flex flex-col xs:flex-row bg-secondaryDarker gap-4 items-center justify-between p-4 md:p-5 rounded-lg min-h-52 lgx:w-full xl:max-w-[585px] 2xl:max-w-[648px]">
         <div class="flex flex-col">
             <span class="-mb-1">{{ props.source }}</span>
             <div class="flex flex-col">
                 <Link class="text-link hover:underline" target="_blank" :href="props.url">
                 <h2 class="line-clamp-2 text-base md:text-xl lg:text-lg">{{ props.headline }}</h2>
                 </Link>
-                <p class="line-clamp-2">{{ props.summary }}</p>
+                <p class="line-clamp-2 max-w-96 lg:max-w-full">{{ props.summary }}</p>
             </div>
             <span class="mt-2">{{ new Date(props.datetime * 1000).toLocaleDateString('en-US', {
                 year: 'numeric',
@@ -33,6 +33,6 @@ const props = defineProps<NewsCardProps>();
             }) }}</span>
         </div>
         <Image :src="props.image" :alt="props.headline + ' logo'" width="200" height="100"
-            class="max-w-[200px] max-h-[100px]" />
+            class="max-w-[200px] max-h-[100px] xs:max-w-[150px] xs:max-h-[75px] sm:max-w-[200px] sm:max-h-[100px]" />
     </article>
 </template>
diff --git a/app/components/Skeletons/components/NewsCard.vue b/app/components/Skeletons/components/NewsCard.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts"></script>
 
 <template>
-    <article
-        class="flex bg-secondaryDarker gap-4 items-center justify-between p-4 md:p-5 rounded-lg md:min-w-[648px] min-h-52 animate-pulse">
-        <div class="flex flex-col">
+    <div
+        class="flex flex-col xs:flex-row bg-secondaryDarker gap-4 items-center justify-between p-4 md:p-5 rounded-lg w-full xl:max-w-[585px] 2xl:max-w-[648px] min-h-52 animate-pulse">
+        <div class="flex flex-col w-full">
             <span class="bg-gray-300 h-4 w-24 mb-1 rounded"></span>
             <div class="flex flex-col">
                 <span class="bg-gray-300 h-6 w-48 mb-2 rounded"></span>
                 <span class="bg-gray-300 h-4 w-64 mb-2 rounded"></span>
             </div>
             <span class="bg-gray-300 h-4 w-32 mt-2 rounded"></span>
         </div>
-        <div class="bg-gray-300 w-[200px] h-[100px] rounded"></div>
-    </article>
+        <div class="bg-gray-300 w-[200px] h-[100px] xs:w-[150px] xs:h-[75px] sm:w-[200px] sm:h-[100px] rounded">
+        </div>
+    </div>
 </template>
diff --git a/app/components/ui/dialog/DialogContent.vue b/app/components/ui/dialog/DialogContent.vue
@@ -11,23 +11,29 @@ import {
 } from "radix-vue";
 import {cn} from "@/lib/utils";
 
-const props = defineProps<DialogContentProps & {class?: HTMLAttributes["class"]}>();
+interface ExtendedDialogContentProps extends DialogContentProps {
+	"aria-describedby"?: string;
+}
+
+const props = defineProps<ExtendedDialogContentProps & {class?: HTMLAttributes["class"]}>();
 const emits = defineEmits<DialogContentEmits>();
 
 const delegatedProps = computed(() => {
-	const {class: _, ...delegated} = props;
+	const {class: _, "aria-describedby": __, ...delegated} = props;
 
 	return delegated;
 });
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const ariaDescribedBy = computed(() => props["aria-describedby"]);
 </script>
 
 <template>
     <DialogPortal>
         <DialogOverlay
             class="fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
-        <DialogContent v-bind="forwarded" :class="cn(
+        <DialogContent :aria-describedby="ariaDescribedBy" v-bind="forwarded" :class="cn(
             'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-90 data-[state=open]:zoom-in-90 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
             props.class,
         )">

diff --git a/app/locales/en/translate.json b/app/locales/en/translate.json
@@ -383,7 +383,12 @@
 	"Convertendo...": "Converting...",
 	"De": "From",
 	"Para": "To",
+	"para": "to",
 	"Inverter": "Reverse",
 	"Abrir": "Open",
-	"Fechar": "Close"
+	"Fechar": "Close",
+	"Resultado da Conversão": "Conversion result",
+	"A conversão de": "The conversion from",
+	"resulta em": "results in",
+	"Concluir": "Conclude"
 }
diff --git a/app/locales/es/translate.json b/app/locales/es/translate.json
@@ -385,5 +385,9 @@
 	"Para": "Para",
 	"Inverter": "Inverter",
 	"Abrir": "Abrir",
-	"Fechar": "Fechar"
+	"Fechar": "Fechar",
+	"Resultado da Conversão": "Resultado de la Conversión",
+	"A conversão de": "La conversión de",
+	"resulta em": "resulta en",
+	"Concluir": "Concluir"
 }
diff --git a/app/locales/pt/translate.json b/app/locales/pt/translate.json
@@ -385,5 +385,9 @@
 	"Para": "Para",
 	"Inverter": "Inverter",
 	"Abrir": "Abrir",
-	"Fechar": "Fechar"
+	"Fechar": "Fechar",
+	"Resultado da Conversão": "Resultado da Conversão",
+	"A conversão de": "A conversão de",
+	"resulta em": "resulta em",
+	"Concluir": "Concluir"
 }
diff --git a/app/stores/useCurrencyQuotesStore.ts b/app/stores/useCurrencyQuotesStore.ts
@@ -1,13 +1,13 @@
 import {ref} from "vue";
 import {defineStore} from "pinia";
-
 import type {CurrencyQuotes} from "@/types/CurrencyQuotes/CurrencyQuotes";
+import type {Rates} from "@/types/CurrencyQuotes/Rates";
 
 export const useCurrencyQuotesStore = defineStore("currencyQuotes", () => {
 	const currencyQuotes = ref<CurrencyQuotes>();
 	const currency = ref<number>(1);
-	const leftCode = ref<string>("USD");
-	const rightCode = ref<string>("BRL");
+	const leftCode = ref<keyof Rates>("USD");
+	const rightCode = ref<keyof Rates>("BRL");
 
 	function setCurrencyQuotes(quotes: CurrencyQuotes): void {
 		currencyQuotes.value = quotes;

diff --git a/app/stores/useNewsStore.ts b/app/stores/useNewsStore.ts
@@ -1,26 +1,26 @@
-import { ref } from "vue";
-import { defineStore } from "pinia";
-import type { New } from "@/types/Finnhub/New";
-import type { Category } from "@/types/Finnhub/Category";
+import {ref} from "vue";
+import {defineStore} from "pinia";
+import type {New} from "@/types/Finnhub/New";
+import type {Category} from "@/types/Finnhub/Category";
 
 type CategoriesNews = {
-    [ key in Category ]: New[];
+	[key in Category]: New[];
 };
 
 export const useNewsStore = defineStore("news", () => {
-    const news = ref<CategoriesNews>({
-        crypto: [],
-        forex: [],
-        general: [],
-        merger: [],
-    });
+	const news = ref<CategoriesNews>({
+		crypto: [],
+		forex: [],
+		general: [],
+		merger: [],
+	});
 
-    function addNews(data: New[], category: Category): void {
-        news.value[ category ].push(...data);
-    }
+	function addNews(data: New[], category: Category): void {
+		news.value[category].push(...data);
+	}
 
-    return {
-        news,
-        addNews,
-    };
+	return {
+		news,
+		addNews,
+	};
 });
diff --git a/app/tags/Image.vue b/app/tags/Image.vue
@@ -27,7 +27,7 @@ const roundedClass = computed(() => {
 </script>
 
 <template>
-    <div class="relative" :class="`w-[${props.width}px] h-[${props.height}px]`">
+    <div class="relative" :class="`w-[${props.width}px] h-[${props.height}px] flex items-center`">
         <Skeleton v-if="loading" :class="`w-full h-full absolute ${roundedClass}`">
             <ImageSkeletonSvg />
         </Skeleton>

diff --git a/app/views/BrapiDev/Stocks.vue b/app/views/BrapiDev/Stocks.vue
@@ -3,42 +3,42 @@ import Button from "@/components/ui/button/Button.vue";
 import EntityCardSkeleton from "@/components/Skeletons/components/EntityCard.vue";
 import EntityCard from "@/components/EntityCard.vue";
 import InternalServerError from "@/views/Exceptions/InternalServerError.vue";
-import { ref, onMounted } from "vue";
-import { listStocks } from "@/services/BrapiDev";
-import { useTranslation } from "@/config/composable/translate";
-import { useStocksCurrencyStore } from "@/stores/useStocksCurrencyStore";
-import { t } from "i18next";
+import {ref, onMounted} from "vue";
+import {listStocks} from "@/services/BrapiDev";
+import {useTranslation} from "@/config/composable/translate";
+import {useStocksCurrencyStore} from "@/stores/useStocksCurrencyStore";
+import {t} from "i18next";
 
 useTranslation();
 
-const { stocksCurrencies } = useStocksCurrencyStore();
+const {stocksCurrencies} = useStocksCurrencyStore();
 const isLoading = ref<boolean>(true);
 const isLoadingMore = ref<boolean>(false);
 const start = ref<number>(1);
 const error = ref<boolean>(false);
 
 async function loadStocks() {
-    return await listStocks(12, start.value);
+	return await listStocks(12, start.value);
 }
 
 async function loadMore() {
-    isLoadingMore.value = true;
-    start.value += 12;
-    const newStocks = await loadStocks();
+	isLoadingMore.value = true;
+	start.value += 12;
+	const newStocks = await loadStocks();
 
-    if (!newStocks) {
-        error.value = true;
-    }
+	if (!newStocks) {
+		error.value = true;
+	}
 
-    isLoadingMore.value = false;
+	isLoadingMore.value = false;
 }
 
 onMounted(async () => {
-    if (!stocksCurrencies.length) {
-        const data = await loadStocks();
-        if (!data) error.value = true;
-    }
-    isLoading.value = false;
+	if (!stocksCurrencies.length) {
+		const data = await loadStocks();
+		if (!data) error.value = true;
+	}
+	isLoading.value = false;
 });
 </script>