Merge pull request #213 from buggregator/issue/#212-add-default-proje…

…ct-support

Issue/#212 add default project support

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]);
         }
       }

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<void> {
       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<unknown>[]): 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();
     }

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", {

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,
   }[]
 }

src/widgets/ui/layout-sidebar/layout-sidebar.vue

@@ -12,15 +12,15 @@ 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";
 
 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<HTMLElement | null>(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(", ")})`;
 </script>
 
 <template>
@@ -146,7 +141,7 @@ const generateRadialGradient = (input: string) =>
         <IconSvg class="layout-sidebar__link-icon" name="logo-short" />
       </NuxtLink>
 
-      <template v-if="availableProjects.length > 0">
+      <template v-if="!isProjectLoading && isMultipleProjects">
         <hr class="layout-sidebar__sep" />
 
         <div class="layout-sidebar__projects">
@@ -171,7 +166,7 @@ const generateRadialGradient = (input: string) =>
         <hr class="layout-sidebar__sep" />
       </template>
 
-      <template v-if="!availableProjects.length">
+      <template v-if="!isMultipleProjects || isProjectLoading">
         <NuxtLink to="/" title="Events" class="layout-sidebar__link">
           <IconSvg class="layout-sidebar__link-icon" name="events" />
         </NuxtLink>
@@ -230,7 +225,12 @@ const generateRadialGradient = (input: string) =>
           {{ makeShortTitle(project.name) }}
         </span>
 
-        {{ project.name }}
+        <div class="layout-sidebar__dropdown-item-text">
+          <span class="layout-sidebar__dropdown-item-text-key">
+            {{ project.key }}
+          </span>
+          {{ project.name }}
+        </div>
       </button>
     </div>
 
@@ -354,7 +354,16 @@ const generateRadialGradient = (input: string) =>
   @apply text-2xs font-semibold uppercase;
   @apply h-6 md:h-8 w-7 md:w-8 rounded-lg;
   @apply flex items-center justify-center relative flex-shrink-0;
-  @apply text-white dark:text-black;
+  @apply text-white dark:text-black self-start;
+}
+
+.layout-sidebar__dropdown-item-text {
+  @apply flex flex-col;
+}
+
+.layout-sidebar__dropdown-item-text-key {
+  @apply text-2xs uppercase font-normal -mt-0.5;
+  @apply text-gray-600 dark:text-gray-400;
 }
 
 .layout-sidebar__dropdown {