added Services of Services, updated store logic for services, updated layout and logic in components with services, added logic for enable/disable service in ServiceCard componemt, added tests for services store and Services of Services, with mock axios

users-manage/src/store/modules/services/index.js

@@ -1,17 +1,17 @@
 import routeOptions from './routeOptions.json'
-import Services from '@helpers/Services/Services.js';
-import {config} from './StaticData.js'
+// import Services from '@helpers/Services/Services.js';
+// import {config} from './StaticData.js'
 import {isEmpty} from "ramda";
 
 const initState = {
   isSaveData: false,
-  sites: [],
-  sitesState: "loading",
+  services: [],
+  servicesState: "loading",
 
-  selectedSiteState: "await",
-  selectedSite: null,
+  selectedServiceState: "await",
+  selectedService: null,
 
-  newSite: null,
+  newService: null,
 };
 
 const state = {
@@ -20,76 +20,87 @@ const state = {
 
 const getters = {
   isSaveData:         (state) => state.isSaveData,
-  sites:              (state) => state.newSite ? [state.newSite, ...state.sites] : state.sites,
+  services:              (state) => state.newService ? [state.newService, ...state.services] : state.services,
   routes:             (state) => state.routes,
   routesLib:          (state) => state.routesLib,
-  selectedSiteState:  (state) => state.selectedSiteState,
-  sitesState:         (state) => state.sitesState,
+  selectedServiceState:  (state) => state.selectedServiceState,
+  servicesState:         (state) => state.servicesState,
   newRoute:           (state) => state.newRoute,
   routeOptions:       () => routeOptions,
-  selectedSite:       (state) => state.selectedSite,
+  selectedService:       (state) => state.selectedService,
 };
 
 const mutations = {
   setIsSaveData: (state, payload) => state.isSaveData = payload,
-  setSites: (state, payload) => state.sites = payload,
-  setSitesState: (state, payload) => state.sitesState = payload,
-  setSelectedSite: (state, payload) => state.selectedSite = payload,
+  setServices: (state, payload) => state.services = payload,
+  setServicesState: (state, payload) => state.servicesState = payload,
+  setSelectedService: (state, payload) => state.selectedService = payload,
+  setNewService: (state, payload) => state.newService = payload,
 };
 
 
 const actions = {
-  addNewSiteLayout: ({state}) => {
-    const newSite = {"port": "", "name": "", id: -1}
-    state.newSite = newSite
-    state.selectedSite = newSite
+  addedNewServiceLayout: ({commit, getters}, newService) => {
+    console.log('newSevice', newService)
+    commit('setServices', [newService,...getters.services])
+    commit('setSelectedService', newService)
+    // commit('setRoutes', [])
+    // commit('setRoutesState', "active")
   },
-  createNewSite: ({state}) => {
-    state.isSaveData = false
-    state.selectedSite = null
-    state.sites = [{
-      ...state.newSite,
-      id: state.sites.reduce((acc, {id}) => Math.max(id, acc) + 1, 0)
-    }, ...state.sites]
-    state.newSite = null
+  createNewService: async ({commit}, updatedServices) => {
+    if (!isEmpty(updatedServices)) {
+      // const newService = updatedSites[0]
+      // const updatedRoutes = addedNewRoute(newService, state.routes)
+      // commit('setRoutes', updatedRoutes)
+      // dispatch('updateRoutesWithApi', newService)
+      return commit('setServices', updatedServices)
+    }
   },
-  breakAddingSite: ({state}) => {
-    state.newSite = null
-    state.selectedSite = null
+  breakeAddingSite: ({commit}) => {
+    commit('setSelectedService', null)
   },
-  addNewRouteLayout: ({state}) => {
-    const newRoute = {"path": null, "role": null, id: -1}
-    state.newRoute = newRoute
+  changeSelectedService: async ({commit}, siteProps) => {
+    commit('setSelectedService', siteProps)
   },
-  createNewRoute: ({state}, payload) => {
-    console.log(payload)
-    state.newRoute = null
+  editSelectedService: async ({commit}, selectedService) => {
+    // const selectedSite = getters.selectedSite
+    // selectedSite[payload.key] = payload.value
+    console.log('selectedService', selectedService)
+    commit('setSelectedService', selectedService)
   },
-  stopAddingRoute: ({state}) => {
-    state.newRoute = null
+  changeIsSaveData: ({commit}, payload) => {
+    commit('setIsSaveData', payload)
   },
-  uploadSites: async ({commit}) => {
-    const path = import.meta.env.VITE_API_ADDR
-    const services = new Services(path, config)
-    const sites = await services.getServices()
-    commit('setSites', sites)
-    commit('setSitesState', 'active')
+  saveServices: async ({commit}, services) => {
+    // const sites = await services.getServices()
+    commit('setServices', services)
+    commit('setServicesState', 'active')
+    console.log('services', services)
   },
+  saveService: async ({commit}, updatedServices) => {
+    // commit('setIsSaveData', false)
+    // commit('setSelectedService', null)
+    
+    commit('setServices', updatedServices)
+  },
+  cancelSelectedService: ({commit}, updatedServices) => {
+    commit('setSelectedService', null)
+    if (updatedServices) {
+      commit('setServices', updatedServices)
+      commit('setNewService', null)
+    } 
+    // commit('setRoutesState', "await")
+  },
+  removeService: async ({commit}, updatedSites) => {
+    // const deletedSiteId = await services.deleteService(id)
+    // const updatedSites = deletedSite(deletedSiteId, getters.sites)
+    if (!isEmpty(updatedSites)) return commit('setServices', updatedSites)
+  },
+
   uploadAndSelectService: ({state}, id) => {
-    state.selectedSite = state.sites.find(site => site.id === id)
+    state.selectedSite = state.services.find(site => site.id === id)
     state.selectedSiteState = 'active'
   },
-  saveSite: async ({state}, payload) => {
-    state.isSaveData = false
-    state.selectedSite = null
-    const path = import.meta.env.VITE_API_ADDR
-    const services = new Services(path, config)
-    const updatedSites = await services.setServicesData(payload, state.sites, payload.id)
-    state.sites = isEmpty(updatedSites) ? state.sites : updatedSites
-  },
-  breakSavingSite: ({state}) => {
-    state.selectedSite = null
-  },
   resetStore: ({state}) => {
     Object.entries(initState).forEach(([k,v]) => {
       state[k] = v