Refactor/better performance

src/App.vue

@@ -3,6 +3,7 @@ import { RouterView } from 'vue-router'
 import LoadingOverlay from './components/LoadingOverlay.vue'
 import ErrorPresenter from './components/ErrorPresenter.vue'
 import SuccessPresenter from './components/SuccessPresenter.vue'
+import DeviceGroupsDialog from './components/DeviceGroupsDialog.vue'
 </script>
 
 <template>
@@ -13,6 +14,7 @@ import SuccessPresenter from './components/SuccessPresenter.vue'
             <RouterView />
             <SuccessPresenter>
             </SuccessPresenter>
+            <DeviceGroupsDialog/>
           </div>
         </LoadingOverlay>
 

src/api/scripts/dtos/GetInstructionDTO.ts

@@ -19,6 +19,7 @@ import {
 } from './GetInstructionTypeDTO'
 import { isTypeDTO, typeDeserializer, type TypeDTO } from '@/api/devices-management/dtos/devices/TypeDTO'
 import { DeviceActionId, DeviceId, DevicePropertyId } from '@/model/devices-management/Device'
+import { TaskId } from '@/model/scripts/Script'
 
 export interface GetInstructionDTO {
   type: GetInstructionTypeDTO
@@ -204,7 +205,7 @@ export const startTaskDeserializer = Deserializer<GetStartTaskInstructionDTO, St
   isGetStartTaskInstructionDTO,
   (dto) => {
     return {
-      taskId: dto.taskId,
+      taskId: TaskId(dto.taskId),
     }
   },
 )

src/components/DeviceGroupsButton.vue

@@ -1,22 +1,20 @@
 <script setup lang="ts">
 import type { Device } from '@/model/devices-management/Device'
 import { useGroupsStore } from '@/stores/groups'
+import { useGroupsDialogStore } from '@/stores/groups-dialog'
 import { computed } from 'vue'
 
 const props = defineProps<{
   id: string
   device: Device
 }>()
 
-const groupsStore = useGroupsStore()
-
 const deviceGroups = computed(() =>
-  groupsStore.groups.filter((g) => g.devices.map((d) => d.id).includes(props.device.id)),
+  useGroupsStore().getGroupsOfDevice(props.device.id)
 )
 
 function openGroupsDialog() {
-  const dialog = document.getElementById(props.id.toString() + '_groups') as HTMLDialogElement
-  dialog.showModal()
+  useGroupsDialogStore().showDeviceGroups(props.device.id)
 }
 
 function groupsToString() {

src/components/DeviceGroupsDialog.vue

@@ -1,27 +1,34 @@
 <script setup lang="ts">
 import type { Device } from '@/model/devices-management/Device'
-import { useGroupsStore } from '@/stores/groups'
-import { computed } from 'vue';
+import type { DeviceGroup } from '@/model/devices-management/DeviceGroup'
+import { useDevicesStore } from '@/stores/devices'
+import { useGroupsDialogStore } from '@/stores/groups-dialog'
+import { ref, useTemplateRef } from 'vue'
 
-const props = defineProps<{
-  id: string
-  device?: Device
-}>()
+const deviceGroups = ref<DeviceGroup[]>()
+const device = ref<Device>()
+const groupDialogStore = useGroupsDialogStore()
 
-const deviceGroups = computed(() =>
-  props.device ? useGroupsStore().deviceGroups(props.device?.id) : [],
-)
+const dialog = useTemplateRef('groups_info')
+
+groupDialogStore.$subscribe(() => {
+  if (groupDialogStore.selectedDevice) {
+    device.value = useDevicesStore().getDevice(groupDialogStore.selectedDevice)
+    deviceGroups.value = groupDialogStore.selectedDeviceGroups
+    dialog.value?.showModal()
+  }
+})
 </script>
 
 <template>
-  <dialog :id="id + '_groups'" class="modal modal-sm">
+  <dialog ref="groups_info" class="modal modal-sm">
     <div class="modal-box max-w-sm" v-if="device">
       <h3 class="card-title mb-2">{{ device.name }} groups</h3>
       <p>The {{ device.name }} is in these groups right now:</p>
       <p class="font-bold" v-for="group in deviceGroups" :key="group.id">- {{ group.name }}</p>
     </div>
     <form method="dialog" class="modal-backdrop">
-      <button>Ok</button>
+      <button @click="groupDialogStore.closeDialog()">Ok</button>
     </form>
   </dialog>
 </template>

src/components/tasks-automations/CreateDevicePropertyConstantInstructionItem.vue

@@ -22,8 +22,6 @@
     </div>
   </InstructionLayout>
 
-  <DeviceGroupsDialog :id="id" :device="device" />
-
   <dialog :id="id + '_info'" class="modal modal-sm">
     <div class="modal-box max-w-sm" v-if="property">
       <h3 class="card-title mb-2">{{ property.name }} type constraints info</h3>
@@ -114,13 +112,9 @@ import {
 import InstructionLayout from './InstructionLayout.vue'
 import { onMounted, ref, watch } from 'vue'
 import type { Device, DeviceProperty } from '@/model/devices-management/Device'
-import { findDevice } from '@/api/devices-management/requests/devices'
-import { useUserInfoStore } from '@/stores/user-info'
 import { useInstructionsStore } from '@/stores/instructions'
-import { useLoadingOverlayStore } from '@/stores/loading-overlay'
 import DeviceNameAndGroup from '../DeviceNameAndGroup.vue'
-import DeviceGroupsDialog from '../DeviceGroupsDialog.vue'
-import { useGroupsStore } from '@/stores/groups'
+import { useDevicesStore } from '@/stores/devices'
 
 const props = defineProps<{
   id: string
@@ -130,11 +124,10 @@ const props = defineProps<{
 }>()
 
 const instructionsStore = useInstructionsStore()
-const loadingOverlay = useLoadingOverlayStore()
-const userInfo = useUserInfoStore()
 const instruction = ref(props.instruction.instruction as CreateDevicePropertyConstantInstruction)
 const device = ref<Device>()
 const property = ref<DeviceProperty<unknown>>()
+const devicesStore = useDevicesStore()
 
 const variableForm = ref<CreateDevicePropertyConstantInstruction>({
   name: instruction.value.name,
@@ -147,28 +140,18 @@ watch(
   () => props.instruction,
   async (val) => {
     instruction.value = val.instruction as CreateDevicePropertyConstantInstruction
-    await updateInstruction()
+    updateInstruction()
   },
   { immediate: true },
 )
 
-onMounted(async () => await updateInstruction())
+onMounted(() => updateInstruction())
 
-async function updateInstruction() {
-  try {
-    loadingOverlay.startLoading()
-    const deviceGroups = useGroupsStore().deviceGroups(instruction.value.deviceId)
-    if (deviceGroups.length > 0) {
-      device.value = useGroupsStore().getDeviceFromGroups(instruction.value.deviceId)!
-    } else {
-      device.value = await findDevice(instruction.value.deviceId, userInfo.token)
-    }
-    property.value = device.value.properties.find(
-      (prop) => prop.id === instruction.value.devicePropertyId,
-    )
-  } finally {
-    loadingOverlay.stopLoading()
-  }
+function updateInstruction() {
+  device.value = devicesStore.getDevice(instruction.value.deviceId)
+  property.value = device.value?.properties.find(
+    (prop) => prop.id === instruction.value.devicePropertyId,
+  )
 }
 
 function openDialog() {
@@ -182,27 +165,22 @@ function openDialog() {
   }
 }
 
-async function handleConfirm() {
-  try {
-    loadingOverlay.startLoading()
-    const device = await findDevice(variableForm.value.deviceId, userInfo.token)
-    const property = device.properties.find(
-      (prop) => prop.id === variableForm.value.devicePropertyId,
-    )
-    if (property) {
-      variableForm.value.type = property.typeConstraints.type
-      instructionsStore.changeInstruction(props.instruction, {
-        type: InstructionType.CreateDevicePropertyConstantInstruction,
-        instruction: {
-          name: variableForm.value.name,
-          type: variableForm.value.type,
-          deviceId: variableForm.value.deviceId,
-          devicePropertyId: variableForm.value.devicePropertyId,
-        },
-      })
-    }
-  } finally {
-    loadingOverlay.stopLoading()
+function handleConfirm() {
+  const device = devicesStore.getDevice(variableForm.value.deviceId)
+  const property = device?.properties.find(
+    (prop) => prop.id === variableForm.value.devicePropertyId,
+  )
+  if (property) {
+    variableForm.value.type = property.typeConstraints.type
+    instructionsStore.changeInstruction(props.instruction, {
+      type: InstructionType.CreateDevicePropertyConstantInstruction,
+      instruction: {
+        name: variableForm.value.name,
+        type: variableForm.value.type,
+        deviceId: variableForm.value.deviceId,
+        devicePropertyId: variableForm.value.devicePropertyId,
+      },
+    })
   }
   closeDialog()
 }

src/components/tasks-automations/DeviceActionInstructionItem.vue

@@ -25,8 +25,6 @@
     </template>
   </InstructionLayout>
 
-  <DeviceGroupsDialog :id="id" :device="device" />
-
   <dialog :id="id" class="modal" v-if="device && action">
     <div class="modal-box max-w-sm">
       <h3 class="card-title mx-2 mb-2">Device action</h3>
@@ -151,15 +149,11 @@ import {
 import InstructionLayout from './InstructionLayout.vue'
 import { onMounted, ref, watch } from 'vue'
 import type { Device, DeviceAction } from '@/model/devices-management/Device'
-import { useUserInfoStore } from '@/stores/user-info'
 import { useInstructionsStore } from '@/stores/instructions'
-import { findDevice } from '@/api/devices-management/requests/devices'
 import { Type } from '@/model/Type'
 import { getDefaultInput } from './emptyInstructions'
-import { useLoadingOverlayStore } from '@/stores/loading-overlay'
-import DeviceGroupsDialog from '../DeviceGroupsDialog.vue'
 import DeviceNameAndGroup from '../DeviceNameAndGroup.vue'
-import { useGroupsStore } from '@/stores/groups'
+import { useDevicesStore } from '@/stores/devices'
 
 const props = defineProps<{
   id: string
@@ -169,11 +163,10 @@ const props = defineProps<{
 }>()
 
 const instructionsStore = useInstructionsStore()
-const loadingOverlay = useLoadingOverlayStore()
-const userInfo = useUserInfoStore()
 const instruction = ref(props.instruction.instruction as DeviceActionInstruction)
 const device = ref<Device>()
 const action = ref<DeviceAction<unknown>>()
+const devicesStore = useDevicesStore()
 
 const selectedAction = ref<DeviceAction<unknown>>()
 
@@ -187,7 +180,7 @@ watch(
   () => props.instruction,
   async (val) => {
     instruction.value = val.instruction as DeviceActionInstruction
-    await updateInstruction()
+    updateInstruction()
   },
   { immediate: true },
 )
@@ -291,22 +284,12 @@ function variableType(): TypeDTO {
   }
 }
 
-onMounted(async () => await updateInstruction())
+onMounted(() => updateInstruction())
 
-async function updateInstruction() {
-  try {
-    loadingOverlay.startLoading()
-    const deviceGroups = useGroupsStore().deviceGroups(instruction.value.deviceId)
-    if (deviceGroups.length > 0) {
-      device.value = useGroupsStore().getDeviceFromGroups(instruction.value.deviceId)!
-    } else {
-      device.value = await findDevice(instruction.value.deviceId, userInfo.token)
-    }
-    action.value = device.value.actions.find((act) => act.id === instruction.value.deviceActionId)
-    selectedAction.value = action.value
-  } finally {
-    loadingOverlay.stopLoading()
-  }
+function updateInstruction() {
+  device.value = devicesStore.getDevice(instruction.value.deviceId)
+  action.value = device.value?.actions.find((act) => act.id === instruction.value.deviceActionId)
+  selectedAction.value = action.value
 }
 
 function openDialog() {
@@ -335,5 +318,4 @@ function closeDialog() {
   const dialog = document.getElementById(props.id.toString()) as HTMLDialogElement
   dialog.close()
 }
-
 </script>

src/components/tasks-automations/InstructionItems.vue

@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import { getAllDeviceGroups } from '@/api/devices-management/requests/device-groups'
-import { getAllDevices } from '@/api/devices-management/requests/devices'
 import { type Device } from '@/model/devices-management/Device'
 import type { DeviceGroup } from '@/model/devices-management/DeviceGroup'
 import { InstructionType } from '@/model/scripts/Instruction'
-import { useUserInfoStore } from '@/stores/user-info'
 import { onMounted, ref, useTemplateRef } from 'vue'
 import AddButton from '../AddButton.vue'
 import {
@@ -16,8 +13,9 @@ import {
   EmptyConstantInstruction,
 } from './emptyInstructions'
 import { useInstructionsStore } from '@/stores/instructions'
+import { useGroupsStore } from '@/stores/groups'
+import { useDevicesStore } from '@/stores/devices'
 
-const userInfo = useUserInfoStore()
 const instructionsStore = useInstructionsStore()
 
 const modal = useTemplateRef('add-instruction-modal')
@@ -30,9 +28,9 @@ defineProps<{
   closeDialog: () => void
 }>()
 
-onMounted(async () => {
-  groups.value = await getAllDeviceGroups(userInfo.token)
-  devices.value = await getAllDevices(userInfo.token)
+onMounted(() => {
+  groups.value = useGroupsStore().groups
+  devices.value = useDevicesStore().devices
 })
 
 function addIfInstruction() {

src/components/tasks-automations/SendNotificationInstructionItem.vue

@@ -35,30 +35,22 @@ import type { Instruction, SendNotificationInstruction } from '@/model/scripts/I
 import InstructionLayout from './InstructionLayout.vue'
 import { onMounted, ref, watch } from 'vue'
 import type { User } from '@/model/users-management/User'
-import { getAllUsers } from '@/api/users-management/requests/users'
-import { useUserInfoStore } from '@/stores/user-info'
-import { useLoadingOverlayStore } from '@/stores/loading-overlay'
+import { useUsersStore } from '@/stores/users'
 
 const props = defineProps<{
   instruction: Instruction
   colors: string
   edit: boolean
 }>()
 
-const userInfo = useUserInfoStore()
 const instruction = ref(props.instruction.instruction as SendNotificationInstruction)
 const users = ref<User[]>()
 const selectedUser = ref<User>()
-const loadingOverlay = useLoadingOverlayStore()
+const usersStore = useUsersStore()
 
-onMounted(async () => {
-  try {
-    loadingOverlay.startLoading()
-    users.value = await getAllUsers(userInfo.token)
-    selectedUser.value = users.value?.find((u) => u.email === instruction.value.email)
-  } finally {
-    loadingOverlay.stopLoading()
-  }
+onMounted(() => {
+  users.value = usersStore.users
+  selectedUser.value = usersStore.getUser(instruction.value.email)
 })
 
 watch(