73 lines
2.0 KiB
Vue
73 lines
2.0 KiB
Vue
<template>
|
|
<q-btn-dropdown
|
|
class="customized-disabled-btn"
|
|
push
|
|
flat
|
|
no-caps
|
|
icon="share"
|
|
size="md"
|
|
:label="userStore.currentDomain.domainName"
|
|
:disable-dropdown="true"
|
|
dropdown-icon='none'
|
|
:disable="true"
|
|
>
|
|
<q-list>
|
|
<q-item :active="isCurrentDomain(domain)" active-class="active-domain-item" v-for="domain in domains" :key="domain.domainName"
|
|
clickable v-close-popup @click="onItemClick(domain)">
|
|
<q-item-section side>
|
|
<q-icon name="share" size="sm" :color="isCurrentDomain(domain) ? 'orange': ''" text-color="white"></q-icon>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label>{{domain.domainName}}</q-item-label>
|
|
<q-item-label caption>{{domain.kintoneUrl}}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-btn-dropdown>
|
|
|
|
</template>
|
|
<script setup lang="ts" >
|
|
import { IDomainInfo } from 'src/types/DomainTypes';
|
|
import { useAuthStore } from 'stores/useAuthStore';
|
|
import { useDomainStore } from 'src/stores/useDomainStore';
|
|
import { computed } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
|
|
const userStore = useAuthStore();
|
|
const domainStore = useDomainStore();
|
|
const route = useRoute()
|
|
const domains = computed(() => domainStore.userDomains);
|
|
|
|
(async ()=>{
|
|
await domainStore.loadUserDomains();
|
|
})();
|
|
|
|
const isUnclickable = computed(()=>{
|
|
return route.path.startsWith('/FlowChart/') || domains.value === undefined || domains.value.length === 0;
|
|
});
|
|
|
|
const isCurrentDomain=(domain:IDomainInfo)=>{
|
|
return domain.id === userStore.currentDomain.id;
|
|
}
|
|
|
|
const onItemClick=(domain:IDomainInfo)=>{
|
|
console.log(domain);
|
|
userStore.setCurrentDomain(domain);
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.q-btn.disabled.customized-disabled-btn {
|
|
opacity: 1 !important;
|
|
cursor: default !important;
|
|
}
|
|
|
|
.q-item.active-domain-item {
|
|
color: inherit;
|
|
background: #eee;
|
|
}
|
|
|
|
.q-btn.disabled.customized-disabled-btn * {
|
|
cursor: default !important;
|
|
}
|
|
</style>
|