Something went wrong. Try again.
A simple to-do app focused on tasks that can be completed within a specific time span. taskline.tobinio.dev
Something went wrong. Try again.
1.6 kB · 68 lines
Vue
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869<script setup lang="ts"> import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, } from "reka-ui"; import { useOrganizationsQuery } from "~/queries/organization"; import OrgItem from "./OrgItem.vue";
const { t } = useI18n();
const { data: organizations } = useQuery(useOrganizationsQuery());
const selectedOrg = useSelectedOrg();
const open = ref(false);
function onSelectOrg(newOrg: string | undefined) { selectedOrg.value = newOrg; open.value = false; }
const selectedOrgDisplay = computed(() => { return ( organizations.value?.find((org) => org.uuid === selectedOrg.value) ?.name ?? t("organization.personal") ); });</script>
<template> <div class="flex gap-1 justify-between"> <div> {{ selectedOrgDisplay }} </div> <PopoverRoot v-model:open="open"> <PopoverTrigger> <div class="cursor-pointer flex"> <Icon name="material-symbols:swap-horiz-rounded" size="20" /> </div> </PopoverTrigger> <PopoverPortal> <PopoverContent data-testid="edit-label-modal" class="bg-popover z-50 mx-2 flex flex-col gap-2 rounded-lg p-2 drop-shadow-lg/30" side="top" :side-offset="5" > <OrgItem @click="onSelectOrg(undefined)" :value="undefined" :display="t('organization.personal')" :selected="selectedOrg" /> <OrgItem v-for="org in organizations" :key="org.uuid" @click="onSelectOrg(org.uuid)" :value="org.uuid" :display="org.name" :selected="selectedOrg" /> </PopoverContent> </PopoverPortal> </PopoverRoot> </div></template>