fixed message wrap, added see all btn

frontend/src/assets/styles/default-theme.scss

@@ -18,6 +18,8 @@ $dark-text-primary: map.get(darkTheme.$dark-theme, 'text-primary');
 
 //lightTheme
 $light-layer-selected-01: map.get(lightTheme.$light-theme, 'layer-selected-01');
+$light-link-primary: map.get(lightTheme.$light-theme, 'link-primary');
+$light-link-primary-hover: map.get(lightTheme.$light-theme, 'link-primary-hover');
 
 //border
 $light-border-interactive: map.get(

frontend/src/components/common/NotificationMessage.vue

@@ -2,7 +2,8 @@
 import Message from 'primevue/message';
 import { IconSize } from '@/enum/IconEnum';
 
-import { clearNotification } from '@/store/NotificationState';
+import { clearNotification, seeAll } from '@/store/NotificationState';
+import type { Severity } from '@/enum/SeverityEnum';
 
 const props = defineProps({
     msgText: {
@@ -40,7 +41,15 @@ const closeNotification = () => {
                 :size="IconSize.medium"
             />
             <span class="custom-message-text">
-                <strong>{{ props.severity }}</strong> {{ props.msgText }}
+                <strong>{{ props.severity }}</strong>
+                {{ props.msgText }}
+                <button
+                    class="btn-see-all"
+                    v-if="seeAll.seeAllMsg[severity as Severity].isVisible"
+                    @click=" seeAll.showAll(props.severity as Severity)"
+                >
+                    See all
+                </button>
             </span>
         </Message>
     </div>
@@ -56,4 +65,14 @@ const closeNotification = () => {
 .custom-message-text {
     color: $light-text-primary;
 }
+
+.btn-see-all {
+    background-color: transparent;
+    border: none;
+    color: $light-link-primary;
+}
+
+.btn-see-all:hover {
+    color: $light-link-primary-hover;
+}
 </style>

frontend/src/store/NotificationState.ts

@@ -3,15 +3,27 @@
     It is structured this way so it doesn't stack multiple messages with the same severity (by design).
     It is intended to be used in conjunction with the NotificationStack component.
 */
+import { reactive, ref } from "vue"
 import type { Severity } from "@/enum/SeverityEnum";
-import { ref } from "vue"
 
 const defaultNotification = {
     success: "",
     warn: "",
     error: "",
 };
 
+export const seeAll = reactive({
+    seeAllMsg: {
+        success: {msg: "", isVisible: false},
+        warn: {msg: "", isVisible: false},
+        error: {msg: "", isVisible: false},
+    },
+    showAll(severity: Severity) {
+        this.seeAllMsg[severity].isVisible = false;
+        pushNotification(severity, this.seeAllMsg[severity].msg);
+    }
+});
+
 export const notifications = ref(
     JSON.parse(JSON.stringify(defaultNotification))
 );
@@ -26,4 +38,28 @@ export const clearNotification = (severity: string) => {
 
 export const resetNotification = () => {
     notifications.value = JSON.parse(JSON.stringify(defaultNotification));
-}
+};
+
+export const setNotificationMsg = (forestClientNumberList: string[], userId: any, severity: Severity) => {
+    seeAll.seeAllMsg[severity].isVisible = true;
+    const isPlural = forestClientNumberList.length === 1 ? 'ID' : 'IDs'
+    const msgByType = {
+        success: `was successfully added with Client ${isPlural}:`,
+        warn: `already exists with Client ${isPlural}:`,
+        error: `was not added with Client ${isPlural}:`
+    };
+
+    const clientIdList = forestClientNumberList.slice(0 , 3);
+
+    seeAll.seeAllMsg[severity].msg = `${userId} ${msgByType[severity]} ${forestClientNumberList.join(', ')}`;
+
+    seeAll.seeAllMsg[severity].isVisible = forestClientNumberList.length > 3
+
+    const notificationMsg = `
+        ${userId} ${msgByType[severity]} ${clientIdList.join(', ')}
+        ${isPlural === 'IDs' && forestClientNumberList.length > 3 ?
+        'and ' + (forestClientNumberList.length - 3) + ' more...'
+        : ''}
+    `;
+    pushNotification(severity, notificationMsg);
+};

frontend/src/store/SideNavState.ts

@@ -1,10 +1,8 @@
-import { shallowReactive } from 'vue'
+import { shallowReactive, ref } from 'vue';
 import { profileSidebarState } from '@/store/ProfileSidebarState';
 
-let initialScreen = window.innerWidth
-
 export const sideNavState = shallowReactive({
-    isVisible: initialScreen >= 1024,
+    isVisible: window.innerWidth >= 1024,
     toggleSideNavVisible() {
         this.isVisible = !this.isVisible
         profileSidebarState.isVisible = false

frontend/src/store/screenSizeState.ts

@@ -1,13 +1,15 @@
-import { sideNavState } from "@/store/SideNavState";
+import {sideNavState } from "@/store/SideNavState";
+
+export const screenSize = () => {
+     return window.innerWidth
+};
 
-export let screenSize = window.innerWidth
 
 window.addEventListener("resize", (event) => {
-    screenSize = window.innerWidth
-    sideNavState.isVisible = isDesktop()
+    sideNavState.isVisible = isDesktop();
 });
 
 
 export const isDesktop = () => {
-    return screenSize >= 1024
-}
+    return screenSize() >= 1024
+};