-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
45 changed files
with
1,345 additions
and
760 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,20 @@ | ||
| <script setup lang="ts"> | ||
| import {RouterView} from "vue-router"; | ||
| import { RouterView } from "vue-router"; | ||
| import Footer from "@/components/Layout/Footer.vue"; | ||
| import Header from "@/components/Layout/Header.vue"; | ||
| import Sonner from "./components/ui/sonner/Sonner.vue"; | ||
| import Toaster from "./components/ui/toast/Toaster.vue"; | ||
| import Sonner from "@/components/ui/sonner/Sonner.vue"; | ||
| import Toaster from "@/components/ui/toast/Toaster.vue"; | ||
| import Tab from "@/components/CurrencyQuotes/Tab.vue"; | ||
| </script> | ||
|
|
||
| <template> | ||
| <Header /> | ||
| <RouterView /> | ||
| <main class="min-h-[95dvh] relative "> | ||
| <RouterView /> | ||
| <Toaster /> | ||
| <Sonner /> | ||
| <Tab /> | ||
| </main> | ||
| <Footer /> | ||
| <Toaster /> | ||
| <Sonner /> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| <script setup lang="ts"> | ||
| import { Button } from "@/components/ui/button"; | ||
| import { | ||
| Command, | ||
| CommandEmpty, | ||
| CommandGroup, | ||
| CommandInput, | ||
| CommandItem, | ||
| CommandList, | ||
| } from "@/components/ui/command"; | ||
| import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; | ||
| import { CaretSortIcon, CheckIcon } from "@radix-icons/vue"; | ||
| import { CurrencyQuotesDto } from "@/components/Dto/CurrencyQuotesDto"; | ||
| import { ref } from "vue"; | ||
| import { t } from "i18next"; | ||
| import { listCurrencyQuotes } from "@/services/CurrencyQuotes"; | ||
| import { useCurrencyQuotesStore } from "@/stores/useCurrencyQuotesStore"; | ||
| import { onMounted } from "vue"; | ||
| import { CurrencyQuotesDtoValues } from "../Dto/CurrencyQuotesDtoValues"; | ||
| import { watch } from "vue"; | ||
| const currencyQuotesStore = useCurrencyQuotesStore(); | ||
| interface Props { | ||
| direction: "left" | "right"; | ||
| } | ||
| const props = defineProps<Props>(); | ||
| async function loadCurrencyQuotes() { | ||
| return await listCurrencyQuotes(); | ||
| } | ||
| function selectItem(currency: KeyValue) { | ||
| open.value = false; | ||
| selectedValue.value = currency.value; | ||
| if (props.direction === "left") currencyQuotesStore.leftCurrency = currency.value; | ||
| else currencyQuotesStore.rightCurrency = currency.value; | ||
| } | ||
| onMounted(async () => { | ||
| const stateCurrencyQuotes = currencyQuotesStore.currencyQuotes; | ||
| if (!stateCurrencyQuotes) { | ||
| const data = await loadCurrencyQuotes(); | ||
| if (!data) { | ||
| const currencies = { | ||
| table: "default", | ||
| rates: CurrencyQuotesDtoValues, | ||
| lastupdate: "2024-11-03T18:21:47.000000-03:00", // ISO 8601 date string | ||
| }; | ||
| currencyQuotesStore.setCurrencyQuotes(currencies); | ||
| } | ||
| else currencyQuotesStore.setCurrencyQuotes(data); | ||
| } | ||
| }); | ||
| interface KeyValue { | ||
| key: string; | ||
| value: string; | ||
| } | ||
| const open = ref(false) | ||
| const selectedValue = props.direction === "left" ? ref(currencyQuotesStore.leftCurrency) : ref(currencyQuotesStore.rightCurrency) | ||
| const currencies: KeyValue[] = Object.entries(CurrencyQuotesDto) | ||
| .map(([ key, value ]) => ({ key, value })) | ||
| .sort((a, b) => a.value.localeCompare(b.value)) | ||
| watch(() => currencyQuotesStore.leftCurrency, (value) => { | ||
| if (props.direction === 'left') { | ||
| selectedValue.value = value; | ||
| } | ||
| }); | ||
| watch(() => currencyQuotesStore.rightCurrency, (value) => { | ||
| if (props.direction === 'right') { | ||
| selectedValue.value = value; | ||
| } | ||
| }); | ||
| </script> | ||
|
|
||
| <template> | ||
| <Popover v-model:open="open"> | ||
| <PopoverTrigger as-child> | ||
| <Button variant="outline" role="combobox" :aria-expanded="open" class="w-[200px] justify-between"> | ||
| {{ t(selectedValue) || t("Search currency...") }} | ||
| <CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" /> | ||
| </Button> | ||
| </PopoverTrigger> | ||
| <PopoverContent class="w-[290px] p-0"> | ||
| <Command> | ||
| <CommandInput class="h-9" placeholder="Search currency..." /> | ||
| <CommandEmpty>{{ t("Nenhuma moeda encontrada.") }}</CommandEmpty> | ||
| <CommandList> | ||
| <CommandGroup> | ||
| <CommandItem v-for="currency in currencies" :key="currency.key" :value="currency.value" | ||
| @select="() => selectItem(currency)"> | ||
| {{ t(currency.value) }} | ||
| <CheckIcon | ||
| :class="`ml-auto h-4 w-4 ${selectedValue === currency.value ? 'opacity-100' : 'opacity-0'}`" /> | ||
| </CommandItem> | ||
| </CommandGroup> | ||
| </CommandList> | ||
| </Command> | ||
| </PopoverContent> | ||
| </Popover> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| <script setup lang="ts"> | ||
| import Select from '@/components/CurrencyQuotes/Select.vue' | ||
| import { Button } from '@/components/ui/button' | ||
| import { | ||
| Collapsible, | ||
| CollapsibleContent, | ||
| CollapsibleTrigger, | ||
| } from '@/components/ui/collapsible' | ||
| import { ChevronDownIcon, ChevronUpIcon, DoubleArrowDownIcon } from '@radix-icons/vue' | ||
| import { ref } from 'vue' | ||
| import { t } from 'i18next' | ||
| import { useCurrencyQuotesStore } from '@/stores/useCurrencyQuotesStore' | ||
| const { invertCurrencies } = useCurrencyQuotesStore() | ||
| const isOpen = ref(false) | ||
| </script> | ||
|
|
||
| <template> | ||
| <Collapsible v-model:open="isOpen" | ||
| class="fixed z-50 right-10 bottom-0 space-y-2 bg-material rounded-t-2xl shadow-2xl shadow-accent py-2 px-4 translate-ignore"> | ||
| <div class="flex items-center justify-between space-x-4"> | ||
| <h4 class="font-semibold pr-20"> | ||
| {{ t("Conversor de moedas") }} | ||
| </h4> | ||
| <CollapsibleTrigger as-child> | ||
| <Button variant="ghost" size="sm" class="w-9 p-0 rounded-full"> | ||
| <ChevronDownIcon class="w-6 h-6" v-if=isOpen /> | ||
| <ChevronUpIcon class="w-6 h-6" v-if=!isOpen /> | ||
| <span class="sr-only">{{ isOpen ? 'Fechar' : 'Abrir' }}</span> | ||
| </Button> | ||
| </CollapsibleTrigger> | ||
| </div> | ||
| <CollapsibleContent class="space-y-2 flex flex-col"> | ||
| <Select direction="left" /> | ||
| <Button variant="default" class="w-9 p-0 rounded-full"> | ||
| <DoubleArrowDownIcon @click="invertCurrencies"> | ||
| revert | ||
| </DoubleArrowDownIcon> | ||
| </Button> | ||
| <Select direction="right" /> | ||
| </CollapsibleContent> | ||
| </Collapsible> | ||
| </template> |
Oops, something went wrong.