Merge pull request #204 from buggregator/issue/#139-multiple-projects…

…-support

Issue/#139 multiple projects support

app.vue

@@ -5,7 +5,8 @@
 <script lang="ts" setup>
 import "./src/assets/index.css";
 import "./src/assets/vendor";
-import { useSettingsStore } from "~/src/shared/stores";
+import { useEventsStore, useSettingsStore } from "~/src/shared/stores";
 
 useSettingsStore().initialize();
+useEventsStore().initialize();
 </script>

layouts/default.vue

@@ -1,18 +1,23 @@
 <script lang="ts" setup>
-import { onMounted } from "vue";
+import { storeToRefs } from "pinia";
+import { watch } from "vue";
 import { LayoutSidebar } from "~/src/widgets/ui";
 import { useEvents } from "~/src/shared/lib/use-events";
 import SfdumpWrap from "~/src/shared/lib/vendor/dumper";
+import { useEventsStore } from "~/src/shared/stores";
 
 SfdumpWrap(window.document);
 
-onMounted(() => {
-  const { events } = useEvents();
+const { activeProjectKey } = storeToRefs(useEventsStore());
+const { events } = useEvents();
 
-  if (!events?.items?.value?.length) {
+watch(
+  () => activeProjectKey.value,
+  () => {
     events.getAll();
-  }
-});
+  },
+  { immediate: true },
+);
 </script>
 
 <template>

middleware/auth.global.ts

@@ -1,7 +1,6 @@
 import { navigateTo, defineNuxtRouteMiddleware } from "#app";
 import { useSettings } from "~/src/shared/lib/use-settings";
-import {useSettingsStore} from "~/src/shared/stores";
-import { useProfileStore } from "~/src/shared/stores/profile"
+import {useSettingsStore, useProfileStore} from "~/src/shared/stores";
 
 export default defineNuxtRouteMiddleware(async (to) => {
   const { auth}  = storeToRefs(useSettingsStore())

package.json

@@ -67,6 +67,7 @@
     "vue-eslint-parser": "^9.1.0"
   },
   "dependencies": {
+    "@floating-ui/vue": "^1.1.2",
     "@highlightjs/vue-plugin": "^2.1.2",
     "@hpcc-js/wasm": "^2.8.0",
     "@pinia/nuxt": "^0.5.1",

pages/settings.vue

@@ -2,7 +2,7 @@
 import { useTitle } from "@vueuse/core";
 import { storeToRefs } from "pinia";
 import { computed } from "vue";
-import { useSettingsStore, THEME_MODES } from "~/src/shared/stores/settings";
+import { useSettingsStore, THEME_MODES } from "~/src/shared/stores";
 import { AppHeader, BadgeNumber, IconSvg } from "~/src/shared/ui";
 
 const settingsStore = useSettingsStore();

src/assets/index.css

@@ -1,7 +1,7 @@
 @import "vendor.css";
 
 body {
-  @apply bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-50 p-0;
+  @apply bg-gray-50 dark:bg-gray-800 text-gray-800 dark:text-gray-50 p-0;
 }
 
 body a:hover {

src/shared/lib/helpers/index.ts

@@ -1 +1,2 @@
 export * from './htmlEncode';
+export * from './textToColors';

src/shared/lib/helpers/textToColors.ts

@@ -0,0 +1,17 @@
+export const textToColors = (input: string): string[] => {
+  // Utility function to convert a character to a base hue value
+  const charToHue = (char: string): number => {
+    const code = char.toLowerCase().charCodeAt(0);
+    return (code - 97) * 20 % 360; // Map 'a' to 'z' to a hue value between 0 and 360
+  };
+
+  // Function to generate an HSL color based on a base hue
+  const getHslColor = (hue: number) => `hsl(${hue}, 70%, 50%)`;
+
+  // Extract up to three characters from the input string
+  const chars = input.length >= 3 ? input.slice(0, 3).split('') : input.padEnd(3, input[0]).slice(0, 3).split('');
+
+  // Calculate the hue for each character
+  // Generate the HSL colors list
+  return chars.map(charToHue).map(getHslColor);
+}

src/shared/lib/io/use-events-requests.ts

@@ -1,4 +1,5 @@
-import {useProfileStore} from "../../stores/profile";
+import {storeToRefs} from "pinia";
+import {useEventsStore, useProfileStore} from "../../stores";
 import type { EventId, EventType, ServerEvent } from '../../types';
 import { REST_API_URL } from "./constants";
 
@@ -16,10 +17,13 @@ type TUseEventsRequests = () => {
 export const useEventsRequests: TUseEventsRequests = () => {
   const { token } = storeToRefs(useProfileStore())
 
+  const { activeProjectKey: project } = storeToRefs(useEventsStore())
+
   const headers = {"X-Auth-Token": token.value }
-  const getEventRestUrl = (param?: string): string => `${REST_API_URL}/api/event${param ? `/${param}` : 's'}`
+  const getEventRestUrl = (param: string): string => `${REST_API_URL}/api/event/${param}${project.value ? `?project=${project.value}` : ''}`
+  const getEventsRestUrl = (): string => `${REST_API_URL}/api/events${project.value ? `?project=${project.value}` : ''}`
 
-  const getAll = () => fetch(getEventRestUrl(), { headers })
+  const getAll = () => fetch(getEventsRestUrl(), { headers })
     .then((response) => response.json())
     .then((response) => {
       if (response?.data) {
@@ -46,17 +50,25 @@ export const useEventsRequests: TUseEventsRequests = () => {
       return null;
     })
 
-  const deleteSingle = (id: EventId) => fetch(getEventRestUrl(id), {method: 'DELETE', headers})
+  const deleteSingle = (id: EventId) => fetch(getEventRestUrl(id), {
+    method: 'DELETE',
+    headers,
+    ...(project.value ? { body: JSON.stringify({project: project.value }) } : null)
+  })
     .catch((err) => {
       console.error('Fetch Error', err)
     })
 
-  const deleteAll = () => fetch(getEventRestUrl(), {method: 'DELETE', headers})
+  const deleteAll = () => fetch(getEventsRestUrl(), {
+    method: 'DELETE',
+    headers,
+    ...(project.value ? { body: JSON.stringify({project: project.value}) } : null)
+  })
     .catch((err) => {
       console.error('Fetch Error', err)
     })
 
-  const deleteList = (uuids: EventId[]) => fetch(getEventRestUrl(), {
+  const deleteList = (uuids: EventId[]) => fetch(getEventsRestUrl(), {
     method: 'DELETE',
     headers,
     body: JSON.stringify({uuids})
@@ -65,10 +77,13 @@ export const useEventsRequests: TUseEventsRequests = () => {
       console.error('Fetch Error', err)
     })
 
-  const deleteByType = (type: EventType) => fetch(getEventRestUrl(), {
+  const deleteByType = (type: EventType) => fetch(getEventsRestUrl(), {
     method: 'DELETE',
     headers,
-    body: JSON.stringify({type})
+    body: JSON.stringify({
+      type,
+      ...(project.value ? { project: project.value } : null),
+    })
   })
     .catch((err) => {
       console.error('Fetch Error', err)

src/shared/lib/io/use-smtp-requests.ts

@@ -1,4 +1,4 @@
-import {useProfileStore} from "../../stores/profile";
+import {useProfileStore} from "../../stores";
 import type { EventId, Attachment } from "../../types";
 import { REST_API_URL } from "./constants";
 

src/shared/lib/use-api-transport/use-api-transport.ts

@@ -7,6 +7,18 @@ let isEventsEmitted = false
 
 export const useApiTransport = () => {
   const { token } = storeToRefs(useProfileStore())
+  const { activeProjectKey: project } = storeToRefs(useEventsStore())
+
+  const createPayload = (additional?: Record<string, unknown>) => {
+    const payload = {
+      token: token.value,
+      project: project.value
+    }
+    if (additional) {
+      Object.assign(payload, additional)
+    }
+    return payload
+  }
 
   const {centrifuge} = useCentrifuge()
   const eventsStore = useEventsStore()
@@ -50,9 +62,12 @@ export const useApiTransport = () => {
 
     centrifuge.on('publication', (ctx) => {
       // We need to handle only events from the channel 'events' with event name 'event.received'
-      if (ctx.channel === 'events' && ctx.data?.event === 'event.received') {
+      if (ctx.data?.event === 'event.received') {
         const event = ctx?.data?.data || null
-        eventsStore.addList([event]);
+
+        if (event && event.project === project) {
+          eventsStore.addList([event]);
+        }
       }
     });
   }
@@ -71,15 +86,15 @@ export const useApiTransport = () => {
 
   const deleteEvent = (eventId: EventId) => {
     if (getWSConnection()) {
-      return centrifuge.rpc(`delete:api/event/${eventId}`, {token: token.value})
+      return centrifuge.rpc(`delete:api/event/${eventId}`, createPayload())
     }
 
     return deleteSingle(eventId);
   }
 
   const deleteEventsAll = () => {
     if (getWSConnection()) {
-      return centrifuge.rpc(`delete:api/events`, {token: token.value})
+      return centrifuge.rpc(`delete:api/events`, createPayload())
     }
 
     return deleteAll();
@@ -95,31 +110,28 @@ export const useApiTransport = () => {
     }
 
     if (getWSConnection()) {
-      return centrifuge.rpc(`delete:api/events`, {uuids, token: token.value})
+      return centrifuge.rpc(`delete:api/events`, createPayload({ uuids }))
     }
 
     return deleteList(uuids);
   }
 
   const deleteEventsByType = (type: EventType) => {
     if (getWSConnection()) {
-      return centrifuge.rpc(`delete:api/events`, {type, token: token.value})
+      return centrifuge.rpc(`delete:api/events`, createPayload())
     }
 
     return deleteByType(type);
   }
 
   // NOTE: works only with ws
   const rayStopExecution = (hash: RayContentLock["name"]) => {
-    centrifuge.rpc(`post:api/ray/locks/${hash}`, {
-      stop_execution: true,
-      token: token.value
-    })
+    centrifuge.rpc(`post:api/ray/locks/${hash}`, createPayload({ stop_execution: true }))
   }
 
   // NOTE: works only with ws
   const rayContinueExecution = (hash: RayContentLock["name"]) => {
-    centrifuge.rpc(`post:api/ray/locks/${hash}`, {token: token.value})
+    centrifuge.rpc(`post:api/ray/locks/${hash}`, createPayload())
   }
 
   return {

src/shared/lib/use-events/use-events-api.ts

@@ -81,7 +81,7 @@ export const useEventsApi = (): TUseEventsApi => {
   const getAll = () => {
     getEventsAll().then((eventsList: ServerEvent<unknown>[]) => {
       if (eventsList.length) {
-        eventsStore.initialize(eventsList);
+        eventsStore.initializeEvents(eventsList);
       } else {
         // NOTE: clear cached events hardly
         eventsStore.removeAll();

src/shared/lib/use-settings/use-settings.ts

@@ -1,12 +1,13 @@
-import {useProfileStore} from "../../stores/profile";
-import type { TProfile, TSettings } from "../../types";
-import { REST_API_URL } from "../io";
+import {useProfileStore} from "../../stores/profile/profile-store";
+import type {TProfile, TSettings, TProjects} from "../../types";
+import { REST_API_URL } from "../io/constants";
 
 
 type TUseSettings = {
   api: {
     getProfile: () => Promise<TProfile>
     getSettings: () => Promise<TSettings>
+    getProjects: () => Promise<TProjects>
   }
 }
 
@@ -28,12 +29,22 @@ export const useSettings = (): TUseSettings => {
     .catch((e) => {
       console.error(e);
 
+      return null
+    });
+  const getProjects = () => fetch(`${REST_API_URL}/api/projects`, {
+    headers: {"X-Auth-Token": token.value || ""}
+  })
+    .then((response) => response.json())
+    .catch((e) => {
+      console.error(e);
+
       return null
     });
 
   return {
     api: {
       getProfile,
+      getProjects,
       getSettings: getAppSettings
     }
   }

src/shared/stores/connections/connections-store.ts

@@ -0,0 +1,26 @@
+import { defineStore } from "pinia";
+import {ConnectionStatus} from "./types";
+
+
+export const useConnectionStore = defineStore("connectionStore", {
+  state: () => ({
+    wsConnectionStatus: ConnectionStatus.DISCONNECTED,
+  }),
+  getters: {
+    isConnectedWS({ wsConnectionStatus }) {
+      return wsConnectionStatus === ConnectionStatus.CONNECTED;
+    }
+  },
+  actions: {
+    setStatus(newStatus: ConnectionStatus) {
+      this.wsConnectionStatus = newStatus;
+    },
+    removeWSConnection() {
+      this.setStatus(ConnectionStatus.DISCONNECTED)
+    },
+    addWSConnection() {
+      this.setStatus(ConnectionStatus.CONNECTED)
+    }
+
+  },
+});

src/shared/stores/connections/index.ts

@@ -0,0 +1 @@
+export { useConnectionStore } from './connections-store'

src/shared/stores/connections/types.ts

@@ -0,0 +1,4 @@
+export enum ConnectionStatus {
+  CONNECTED = "connected",
+  DISCONNECTED = "disconnected",
+}