ctms/frontend/src/components/StudySelector.vue

<template>
  <el-dropdown trigger="click" class="study-selector-dropdown" @command="onCommand">
    <div class="selector-trigger">
      <el-icon class="trigger-icon"><OfficeBuilding /></el-icon>
      <span class="current-study-name">{{ study.currentStudy?.name || TEXT.common.empty.selectProject }}</span>
      <el-icon class="arrow-icon"><ArrowDown /></el-icon>
    </div>
    <template #dropdown>
      <el-dropdown-menu class="study-dropdown">
        <el-dropdown-item v-if="loading" disabled>
          <el-icon><Loading /></el-icon>{{ TEXT.common.loading }}
        </el-dropdown-item>
        <el-dropdown-item v-else-if="!studies.length" disabled>{{ TEXT.common.empty.noData }}</el-dropdown-item>
        <el-dropdown-item
          v-for="item in studies"
          :key="item.id"
          :command="{ type: 'switch', study: item }"
          :class="{ active: study.currentStudy?.id === item.id }"
        >
          <div class="study-item">
            <div class="name">{{ item.name }}</div>
            <div class="code">{{ item.code }}</div>
          </div>
        </el-dropdown-item>
        <el-dropdown-item divided command="clear" class="danger-item">
          <el-icon><Close /></el-icon>{{ TEXT.common.actions.exitProject }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { useStudyStore } from "../store/study";
import { fetchStudies } from "../api/studies";
import type { Study } from "../types/api";
import { OfficeBuilding, ArrowDown, Close, Loading } from "@element-plus/icons-vue";
import { TEXT } from "../locales";

const router = useRouter();
const study = useStudyStore();
const studies = ref<Study[]>([]);
const loading = ref(false);

const loadStudies = async () => {
  loading.value = true;
  try {
    const { data } = await fetchStudies();
    studies.value = data.items || [];
  } catch (e: any) {
    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.loadFailed);
  } finally {
    loading.value = false;
  }
};

const onCommand = async (cmd: any) => {
  if (cmd === "clear") {
    study.clearCurrentStudy();
    router.push("/workbench");
    return;
  }
  if (cmd?.type === "switch" && cmd.study) {
    study.setCurrentStudy(cmd.study as Study);
    await study.loadCurrentStudyPermissions().catch(() => {});
    router.push("/project/overview");
  }
};

onMounted(() => {
  loadStudies();
});
</script>

<style scoped>
.selector-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background-color: #fafafa;
  border: 1px solid var(--ctms-border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.selector-trigger:hover {
  background-color: var(--ctms-primary-light);
  border-color: var(--ctms-primary-hover);
}

.trigger-icon {
  color: var(--ctms-primary);
  font-size: 16px;
}

.current-study-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ctms-text-main);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arrow-icon {
  font-size: 12px;
  color: var(--ctms-text-secondary);
}

.study-dropdown {
  max-height: 320px;
  overflow-y: auto;
  min-width: 220px;
}

.study-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.study-item .name {
  font-weight: 600;
  color: var(--ctms-text-main);
}

.study-item .code {
  font-size: 12px;
  color: var(--ctms-text-secondary);
}

.active {
  background-color: var(--ctms-primary-light);
}

.danger-item {
  color: var(--ctms-danger);
}
</style>