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

Issue/#139 multiple projects support

Author: Kreezag

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";