NMS-18265: Edit an event under a specific source by event and source ID

ui/src/components/EventConfigurationDetail/Drawer/EventConfigDetailsDrawer.vue

@@ -0,0 +1,160 @@
+<template>
+  <FeatherDrawer
+    id="column-selection-drawer"
+    data-test="column-selection-drawer"
+    @shown="() => eventConfigStore.drawerState.visible = true"
+    @hidden="() => eventConfigStore.drawerState.visible = false"
+    v-model="eventConfigStore.drawerState.visible"
+    :labels="{ close: 'close', title: 'Customize Columns' }"
+    width="55em"
+  > 
+    <div class="feather-drawer-custom-padding">
+      <section>
+        <h3>Customize the Event Details</h3>
+        <!-- <p>Select which columns you wish to showcase</p> -->
+      </section>
+      <div class="spacer-large"></div>
+      <div class="drawer-content">
+        <FeatherInput
+          label="Event Label"
+          type="search"
+          data-test="event-label"
+          v-model="eventLabel"
+        >
+        </FeatherInput>
+        <div class="spacer-medium"></div>
+        <h4>Description</h4>
+        <div class="spacer-medium"></div>
+        <textarea
+          v-model="eventDescription"
+          placeholder="Type your event description here..."
+          rows="5"
+          cols="40"
+          class="textarea"
+        ></textarea>
+        <div class="spacer-medium"></div>
+        <h4>Status</h4>
+        <div class="spacer-medium"></div>
+        <FeatherSelect
+          label="Select Alert Trigger"
+          :options="mapTriggerTypeOptions()"
+          v-model="selectedEventStatus"
+          clear="Clear Selection"
+        >
+          <FeatherIcon :icon="MoreVert" />
+        </FeatherSelect>
+      </div>
+      <div class="spacer-large"></div>
+      <div>
+        <FeatherButton
+          primary
+          @click="handleSave()"
+        >
+          Save Changes
+        </FeatherButton>
+        <FeatherButton secondary>Close</FeatherButton>
+      </div>
+    </div>
+  </FeatherDrawer>
+</template>
+
+<script lang="ts" setup>
+import { useEventConfigDetailStore } from '@/stores/eventConfigDetailStore'
+import { FeatherButton } from '@featherds/button'
+import { FeatherDrawer } from '@featherds/drawer'
+import { FeatherIcon } from '@featherds/icon'
+import { FeatherInput } from '@featherds/input'
+import { FeatherSelect, ISelectItemType } from '@featherds/select'
+import MoreVert from '@featherds/icon/navigation/MoreVert'
+import { EventConfigEvent } from '@/types/eventConfig'
+
+const eventConfigStore = useEventConfigDetailStore()
+const eventDescription = ref('')
+const eventLabel = ref('')
+const selectedEventStatus = ref<ISelectItemType | undefined>()
+const props = defineProps<{
+  event: EventConfigEvent | null
+}>()
+
+const categoryOptions = [
+  { label: 'Enable', value: 'enable' },
+  { label: 'Disable ', value: 'disable' }
+]
+
+const mapTriggerTypeOptions = (): ISelectItemType[] => {
+  return (categoryOptions ?? []).map((trigger) => ({
+    _text: trigger.label,
+    _value: trigger.value
+  }))
+}
+
+const handleSave = () => {
+  eventConfigStore.closeEventDrawerModal()
+}
+
+const setIntialEventInfo = (val: EventConfigEvent) => {
+  eventDescription.value = val.description
+  eventLabel.value = val.eventLabel
+  selectedEventStatus.value = {
+    _text: val.enabled ? 'Enable' : 'Disable',
+    _value: val.enabled ? 'enable' : 'disable'
+  }
+}
+
+watch(
+  () => props.event,
+  (val) => {
+    if (val) {
+      setIntialEventInfo(val)
+    }
+  },
+  { immediate: true, deep: true }
+)
+</script>
+
+<style lang="scss" scoped>
+@import "@featherds/table/scss/table";
+@import "@featherds/styles/mixins/elevation";
+@import "@featherds/styles/mixins/typography";
+@import "@featherds/styles/themes/variables";
+
+.feather-drawer-custom-padding {
+    padding: 20px;
+    height: 100%;
+    overflow: auto;
+}
+
+.spacer-large {
+    margin-bottom: 2rem;
+}
+
+.spacer-medium {
+    margin-bottom: 0.25rem;
+}
+
+.footer {
+    display: flex;
+    padding-top: 20px;
+}
+
+button.primary {
+    margin-top: 2rem;
+    background-color: #1d2f75;
+    color: white;
+    padding: 0.5em 1.5em;
+    border: none;
+}
+
+:deep(.feather-input-sub-text) {
+    display: none;
+}
+
+.drawer-content    {
+    width: 70%;
+    flex-direction: column;
+    display: flex;
+}
+.textarea{
+    padding: 5px;
+}
+</style>

ui/src/components/EventConfigurationDetail/EventConfigEventTable.vue

@@ -74,6 +74,7 @@
                   icon="Edit"
                   :title="`Edit ${event.eventLabel}`"
                   data-test="edit-button"
+                  @click="openEventDrawer(event)"
                 >
                   <FeatherIcon :icon="Edit" />
                 </FeatherButton>
@@ -129,6 +130,7 @@
     <DeleteEventConfigEventDialog />
     <ChangeEventConfEventStatusDialog />
   </TableCard>
+  <EventConfigDetailsDrawer  :event="selectedEvent" />
 </template>
 
 <script setup lang="ts">
@@ -147,12 +149,14 @@ import TableCard from '../Common/TableCard.vue'
 import ChangeEventConfEventStatusDialog from './Dialog/ChangeEventConfEventStatusDialog.vue'
 import DeleteEventConfigEventDialog from './Dialog/DeleteEventConfigEventDialog.vue'
 import { FeatherDropdown, FeatherDropdownItem } from '@featherds/dropdown'
+import EventConfigDetailsDrawer from './Drawer/EventConfigDetailsDrawer.vue'
+import { EventConfigEvent } from '@/types/eventConfig'
 
 const store = useEventConfigDetailStore()
 const emptyListContent = {
   msg: 'No results found.'
 }
-
+const selectedEvent = ref<EventConfigEvent | null>(null)
 const columns = computed(() => [
   { id: 'uei', label: 'UEI' },
   { id: 'eventLabel', label: 'Event Label' },
@@ -168,6 +172,11 @@ const sort = reactive({
   eventCount: SORT.NONE
 }) as any
 
+const openEventDrawer = (event: EventConfigEvent) => {
+  selectedEvent.value = event
+  store.openEventDrawerModal()
+}
+
 const sortChanged = (sortObj: { property: string; value: SORT }) => {
   for (const prop in sort) {
     sort[prop] = SORT.NONE

ui/src/stores/eventConfigDetailStore.ts

@@ -1,6 +1,6 @@
 import { eventConfigEvents } from '@/components/EventConfiguration/data'
 import { changeEventConfigEventStatus, changeEventConfigSourceStatus } from '@/services/eventConfigService'
-import { EventConfigDetailStoreState, EventConfigEvent, EventConfSourceMetadata } from '@/types/eventConfig'
+import { EventConfigDetailStoreState, EventConfigEvent, EventConfSourceMetadata,DrawerState } from '@/types/eventConfig'
 import { cloneDeep } from 'lodash'
 import { defineStore } from 'pinia'
 
@@ -10,6 +10,13 @@ const defaultPagination = {
   total: 0
 }
 
+const getDefaultDrawerState = (): DrawerState => {
+  return {
+    visible: false,
+    isEventEditorModal: false
+  }
+}
+
 export const useEventConfigDetailStore = defineStore('useEventConfigDetailStore', {
   state: (): EventConfigDetailStoreState => ({
     events: [],
@@ -31,7 +38,8 @@ export const useEventConfigDetailStore = defineStore('useEventConfigDetailStore'
     changeEventConfigSourceStatusDialogState: {
       visible: false,
       eventConfigSource: null
-    }
+    },
+    drawerState: getDefaultDrawerState()
   }),
   actions: {
     async fetchEventsBySourceId() {
@@ -132,6 +140,12 @@ export const useEventConfigDetailStore = defineStore('useEventConfigDetailStore'
       } else {
         console.error('No source selected')
       }
+    },
+    openEventDrawerModal() {
+      this.drawerState.visible  = true      
+    },
+    closeEventDrawerModal() {
+      this.drawerState.visible  = false
     }
   }
 })

ui/src/types/eventConfig.d.ts

@@ -66,6 +66,7 @@ export type EventConfigDetailStoreState = {
     visible: boolean
     eventConfigSource: EventConfSourceMetadata | null
   }
+  drawerState: DrawerState
 }
 
 export type EventConfigFilesUploadReponse = {
@@ -86,3 +87,7 @@ export type EventConfigFilesUploadReponse = {
   }[]
 }
 
+export interface DrawerState {
+  visible: boolean
+  isEventEditorModal: boolean
+}