CviLux_fe/src/components/navbar/NavbarBuilding.vue
2024-11-06 09:59:21 +08:00

51 lines
1.2 KiB
Vue

<script setup>
import { getBuildings } from "@/apis/building";
import { onMounted, ref } from "vue";
import useBuildingStore from "@/stores/useBuildingStore";
const store = useBuildingStore();
const getBui = async () => {
console.log(store.buildings);
const res = await getBuildings();
store.buildings = res.data;
store.selectedBuilding = res?.data[0];
};
const selectBuilding = (bui) => {
store.selectedBuilding = bui;
};
onMounted(() => {
getBui();
});
</script>
<template>
<div class="dropdown dropdown-bottom ">
<div
tabindex="0"
role="button"
class="text-white ml-8 text-lg font-semiLight"
>
{{ store.selectedBuilding?.full_name }}
<font-awesome-icon :icon="['fas', 'angle-down']" class="ml-1" />
</div>
<ul
tabindex="0"
class="dropdown-content left-8 translate-y-2 z-[1] menu py-3 shadow rounded bg-[#4c625e] border text-center"
>
<li
class="text-white my-1 text-base"
v-for="bui in store.buildings"
:key="bui.building_tag"
@click="selectBuilding(bui)"
>
{{ bui.full_name }}
</li>
</ul>
</div>
</template>
<style lang="scss" scoped></style>