diff --git a/src/shared/lib/use-api-transport/use-api-transport.ts b/src/shared/lib/use-api-transport/use-api-transport.ts index 69241746..7f1ed8ba 100644 --- a/src/shared/lib/use-api-transport/use-api-transport.ts +++ b/src/shared/lib/use-api-transport/use-api-transport.ts @@ -65,7 +65,7 @@ export const useApiTransport = () => { if (ctx.data?.event === 'event.received') { const event = ctx?.data?.data || null - if (event && event.project === project) { + if (event && event.project === project.value) { eventsStore.addList([event]); } } diff --git a/src/shared/stores/events/events-store.ts b/src/shared/stores/events/events-store.ts index 5186e835..f751ed4b 100644 --- a/src/shared/stores/events/events-store.ts +++ b/src/shared/stores/events/events-store.ts @@ -33,7 +33,7 @@ export const useEventsStore = defineStore("eventsStore", { lockedIds: getStoredLockedIds() || [], projects: { available: [] as TProjects['data'], - activeKey: null as string | null, + activeKey: undefined as string | undefined, } }), getters: { @@ -56,12 +56,22 @@ export const useEventsStore = defineStore("eventsStore", { return Object.entries(cachedIds).filter(([_, value]) => value.length > 0).map(([key]) => key as TEventsGroup) }, activeProjectKey: ({ projects }) => projects.activeKey, + activeProject: ({ projects }) => { + const storedProject = projects.available.find((proj) => proj.key === projects.activeKey) + const defaultProject = projects.available.find((proj) => proj.is_default) + + return storedProject || defaultProject || projects.available[0] + }, availableProjects: ({ projects }) => projects.available, + isMultipleProjects: ({ projects }) => ( + projects.available.length > 1 || + !projects.available.some((proj) => proj.is_default) + ), }, actions: { async initialize (): Promise { const {api: { getProjects }} = useSettings(); - this.initActiveProject(); + this.initActiveProjectKey(); try { const { data } = await getProjects(); @@ -77,7 +87,7 @@ export const useEventsStore = defineStore("eventsStore", { this.events = events.slice(0, MAX_EVENTS_COUNT); this.syncCachedWithActive(events.map(({ uuid }) => uuid)); - this.initActiveProject(); + this.initActiveProjectKey(); }, addList(events: ServerEvent[]): void { events.forEach((event) => { @@ -194,27 +204,28 @@ export const useEventsStore = defineStore("eventsStore", { setStoredLockedIds(this.lockedIds); }, // projects - initActiveProject() { - this.projects.activeKey = getStoredProject(); + initActiveProjectKey() { + this.projects.activeKey = getStoredProject() || this.activeProjectKey; }, setAvailableProjects(projects: TProjects['data']) { if (projects.length > 0) { this.projects.available = projects; - if (this.projects.activeKey === null) { - this.setActiveProject(projects[0].key); + if (!this.projects.activeKey) { + const defaultProject = projects.find((proj) => proj.is_default) || projects[0]; + this.setActiveProjectKey(defaultProject.key); } } else { - this.resetActiveProject(); + this.resetActiveProjectKey(); } }, - setActiveProject(project: string | null) { + setActiveProjectKey(project: string) { this.projects.activeKey = project; setStoredProject(project); }, - resetActiveProject() { - this.projects.activeKey = null; + resetActiveProjectKey() { + this.projects.activeKey = undefined; removeStoredProject(); } diff --git a/src/shared/stores/settings/settings-store.ts b/src/shared/stores/settings/settings-store.ts index dcbc66da..f52a3b14 100644 --- a/src/shared/stores/settings/settings-store.ts +++ b/src/shared/stores/settings/settings-store.ts @@ -8,7 +8,9 @@ import { getStoredActiveTheme, setStoredEventsCountVisibility, setStoredFixedHeader, - setStoredActiveTheme, getStoredPrimaryCodeEditor, setStoredPrimaryCodeEditor, + setStoredActiveTheme, + getStoredPrimaryCodeEditor, + setStoredPrimaryCodeEditor, } from "./local-storage-actions"; export const useSettingsStore = defineStore("settingsStore", { diff --git a/src/shared/types/settings.ts b/src/shared/types/settings.ts index f5d1bca8..8f4f4c00 100644 --- a/src/shared/types/settings.ts +++ b/src/shared/types/settings.ts @@ -16,6 +16,7 @@ export type TSettings = { export type TProjects = { data: { name: string, - key: string + key: string, + is_default: boolean, }[] } diff --git a/src/widgets/ui/layout-sidebar/layout-sidebar.vue b/src/widgets/ui/layout-sidebar/layout-sidebar.vue index 05e95490..1e71056c 100644 --- a/src/widgets/ui/layout-sidebar/layout-sidebar.vue +++ b/src/widgets/ui/layout-sidebar/layout-sidebar.vue @@ -12,7 +12,6 @@ import { useEventsStore, } from "~/src/shared/stores"; import { useConnectionStore } from "~/src/shared/stores/connections"; -import type { TProjects } from "~/src/shared/types"; import { BadgeNumber, IconSvg } from "~/src/shared/ui"; import { version } from "../../../../package.json"; import { EVENTS_LINKS_MAP, EVENTS_NAV_ORDER } from "./constants"; @@ -20,7 +19,8 @@ import { EVENTS_LINKS_MAP, EVENTS_NAV_ORDER } from "./constants"; const { isConnectedWS } = storeToRefs(useConnectionStore()); const { isVisibleEventCounts, auth } = storeToRefs(useSettingsStore()); const eventsStore = useEventsStore(); -const { availableProjects, activeProjectKey } = storeToRefs(eventsStore); +const { availableProjects, isMultipleProjects, activeProject } = + storeToRefs(eventsStore); const profileStore = useProfileStore(); const { profile } = storeToRefs(profileStore); @@ -35,6 +35,9 @@ const userMenu = ref(null); const isVisibleProfile = ref(false); const isVisibleProjects = ref(false); +// TODO: need to check why project is empty on first load +const isProjectLoading = computed(() => !activeProject.value); + onClickOutside(projectMenu, () => { isVisibleProjects.value = false; }); @@ -93,14 +96,6 @@ const toggleProjects = () => { isVisibleProjects.value = !isVisibleProjects.value; }; -const activeProject = computed(() => { - const project = availableProjects.value.find( - (p) => p.key === activeProjectKey.value, - ); - - return project as unknown as TProjects["data"][number]; -}); - const logout = () => { profileStore.removeToken(); const router = useRouter(); @@ -123,15 +118,15 @@ const serverVersion = computed(() => : `@${apiVersion.value}`, ); -const setProject = (project: string) => { - eventsStore.setActiveProject(project); +const setProject = (projectKey: string) => { + eventsStore.setActiveProjectKey(projectKey); isVisibleProjects.value = false; }; -const makeShortTitle = (title: string) => title.substring(0, 2); +const makeShortTitle = (title: string) => (title || "").substring(0, 2); const generateRadialGradient = (input: string) => - `linear-gradient(to right, ${textToColors(input).join(", ")})`; + `linear-gradient(to right, ${textToColors(input || "").join(", ")})`;