@raclettejs/core 0.1.11 → 0.1.13

package/services/frontend/src/core/store/reducers/data/reducers.ts

@@ -134,7 +134,7 @@ const updateDataCache = (oldCache, newItems) => {
         oldItem,
       )
     }
-    // we will always delete the offline flag as this function will only be called by the dataPush which retrieves synced backend items
+    // we will always delete the offline flag as this function will only be called by the dataRead which retrieves synced backend items
     if (newCache[item._id]) {
       delete newCache[item._id]._offline
     }
@@ -189,7 +189,7 @@ const dataAddFromServer = (state, action) => {
  *   @param {Array} action.payload - An array of items to be added to the state. Each item is an object that must contain an `_id` property.
  * @returns {Object} - Returns the new state after pushing the data from the action payload.
  */
-const dataPush = (state, action) => {
+const dataRead = (state, action) => {
   const { payload } = action
 
   // early return if no data
@@ -540,7 +540,7 @@ const addRequestedFor = (state, action) => {
 export {
   init,
   projectInit,
-  dataPush,
+  dataRead,
   dataUpdate,
   dataMove,
   dataCreate,

package/services/frontend/src/core/store/reducers/queries/effects.ts

@@ -34,7 +34,26 @@ const queriesEffects = (store) => {
     }),
     ignoreElements(),
   )
-  return [queriesAddExecute, queriesExecute]
+  const queryiesSetCacheKey = actions$.pipe(
+    ofType("queries/setCacheKey"),
+    distinctUntilChanged((prev, curr) => !store.hasChanges(prev, curr)),
+
+    tap((action) => {
+      const updatedQuery = action?.actionResult?.updated || null
+      if (updatedQuery) {
+        const { item, itemBefore } = updatedQuery
+        const { actionId } = action
+        if (itemBefore.cacheKey && itemBefore.cacheKey !== item.cacheKey) {
+          store.dispatch({
+            type: "queriesCache/remove",
+            payload: { cacheKey: itemBefore.cacheKey, actionId },
+          })
+        }
+      }
+    }),
+    ignoreElements(),
+  )
+  return [queriesAddExecute, queriesExecute, queryiesSetCacheKey]
 }
 
 export default queriesEffects

package/services/frontend/src/core/store/reducers/queries/index.ts

@@ -15,6 +15,7 @@ const reducerMap = {
   "queries/updateItems": reducers.updateQueryItems,
   "queries/update": reducers.updateQuery,
   "queries/update/loading": reducers.queriesUpdateLoading,
+  "queries/setCacheKey": reducers.queryiesSetCacheKey,
 }
 
 const queriesReducers = reducerFromMap(reducerMap)

package/services/frontend/src/core/store/reducers/queries/reducers.ts

@@ -10,6 +10,8 @@ export type Query = {
   target: string
   actionId: string
   params: Record<string, any>
+  options: Record<string, any>
+  config: Record<string, any>
   loading?: boolean
   backend?: Record<string, any>
   uuids?: Array<string>
@@ -56,6 +58,12 @@ const updateQuery = (state, action) => {
   if (payload.target) {
     query.target = payload.target
   }
+  if (payload.options) {
+    query.options = payload.options
+  }
+  if (payload.config) {
+    query.config = payload.config
+  }
   if (payload.pageItems) {
     const uuids = []
     const results = payload.pageItems || null
@@ -83,7 +91,9 @@ const updateQuery = (state, action) => {
       query.params = mergeDeepRight(query.params || {}, payload.params)
     }
   }
-
+  if (payload.cacheKey) {
+    query.cacheKey = payload.cacheKey
+  }
   if (payload.backend) {
     if (payload.reset) {
       query.backend = payload.backend
@@ -98,7 +108,19 @@ const updateQuery = (state, action) => {
 
   return queries
 }
+const queryiesSetCacheKey = (state, action) => {
+  let queries = structuredClone(state)
+  const payload = action.payload
+  const { actionId, cacheKey } = payload
+  if (!actionId || !state[actionId]) {
+    return state
+  }
 
+  queries[actionId] = { ...queries[actionId], cacheKey }
+  action.actionResult.updated.itemBefore = state[actionId]
+  action.actionResult.updated.item = queries[actionId]
+  return queries
+}
 const queriesUpdateLoading = (state, action) => {
   const payload = action.payload
   const actionId = payload.actionId
@@ -175,11 +197,15 @@ const queriesAdd = (state, action) => {
   const params: CustomStoreActionParams = payload.params || {}
   const actionId = payload.actionId
   const target = payload.target
+  const config = payload.config || {}
+  const options = payload.options || {}
 
   const query: Query = {
     target,
     params,
     actionId,
+    options,
+    config,
   }
 
   action.actionResult.added.push(query)
@@ -216,6 +242,7 @@ const queriesRemove = (state, action) => {
 }
 
 export {
+  queryiesSetCacheKey,
   queriesExecute,
   queriesAdd,
   queriesRemove,

package/services/frontend/src/core/store/reducers/queriesCache/queryCacheHelper.ts

@@ -2,7 +2,7 @@ import createStableHash from "@racletteCore/lib/createStableHash"
 import { $store } from "@racletteCore"
 import log from "@racletteCore/lib/logger"
 
-const isParentResultFresh = (cacheKey: string): boolean => {
+const isParentResultFresh = (cacheKey: string, ttl: number = 1000): boolean => {
   const queriesState = $store.getState("queriesCache")
   const currentTimeStamp = new Date().getTime()
   const parentQuery = queriesState[cacheKey]
@@ -15,16 +15,17 @@ const isParentResultFresh = (cacheKey: string): boolean => {
   ) {
     log.store(
       "queryCacheHelper",
-      `the cache with hash ${cacheKey} has not been executed yet or is still fetching`,
+      `cache #${cacheKey} has not been executed yet or is still fetching`,
+      parentQuery,
     )
     return false
   }
 
-  const isParentResultFresh = parentQuery.lastFetched + 1000 >= currentTimeStamp
+  const isParentResultFresh = parentQuery.lastFetched + ttl >= currentTimeStamp
 
   log.store(
     "queryCacheHelper",
-    `the cache with hash ${cacheKey} is ${isParentResultFresh ? "fresh" : "outdated"}`,
+    `cache #${cacheKey} is ${isParentResultFresh ? "fresh" : "stale"} for ttl of ${ttl}ms`,
   )
 
   return isParentResultFresh

package/services/frontend/src/core/store/reducers/queriesCache/reducers.ts

@@ -22,7 +22,7 @@ const getAffectedCacheQuery = (state, actionId) => {
   })
   return state[removedQueryCacheKey]
 }
-const getChildQueries = (cacheKey: string): Array => {
+const getChildQueries = (cacheKey: string): Array<Record<string, object>> => {
   const queries = $store.getState("queries")
   const childQueries = []
   Object.values(queries).forEach((query) => {
@@ -107,6 +107,7 @@ const cacheRemove = (state, action) => {
 
   return newState
 }
+
 const cacheChildRemove = (state, action) => {
   const newState = structuredClone(state)
   const { actionId } = action.payload
@@ -118,7 +119,7 @@ const cacheChildRemove = (state, action) => {
   }
   const childQueries = getChildQueries(affectedCacheQuery.cacheKey)
   if (childQueries.length === 1) {
-    // if the action which is currently deleted is the last one needing this cache, we will give it a 3sek grace period before we remove the cache
+    // if the action which is currently deleted is the last one needing this cache, we will give it a 2sek grace period before we remove the cache
     newState[affectedCacheQuery.cacheKey].deleted = true
     if (deleteTimeouts[affectedCacheQuery.cacheKey]) {
       clearTimeout(deleteTimeouts[affectedCacheQuery.cacheKey])
@@ -129,7 +130,7 @@ const cacheChildRemove = (state, action) => {
         type: "queriesCache/remove",
         payload: { cacheKey: affectedCacheQuery.cacheKey, actionId },
       })
-    }, 1000)
+    }, 2000)
   }
   delete cacheMap[actionId]
   return newState

package/services/frontend/src/core/store/state.ts

@@ -155,7 +155,7 @@ const storePatterns = {
     // a deeper abstractation level for widgets which are used as tools.
     // ie. type:''add' create a folder called 'add' and create a default.vue
     // or FACE.vue containing your add logic for a given widget
-    type: false,
+    workingState: {},
     version: "0.0.0",
   },
   tools: {

package/services/frontend/src/core/types/ApiClient.ts

@@ -11,7 +11,7 @@ export const cudOperationTypesList = [
 ] as const
 
 export const readOperationTypesList = [
-  "dataPush",
+  "dataRead",
   "dataAdd",
   "dataSync",
 ] as const

package/services/frontend/src/core/types/DataApi.ts

@@ -7,12 +7,14 @@ export type CustomStoreActionOptions = {
   notify?: boolean // default true, disables notification/snackbar
   responseType?: string // i.e stream
   mode?: string //i.e cors for streaming
+  useCache?: boolean
 }
 
 export type CustomStoreActionsPayload = {
   id?: String // if set this will used as the final namespace giver for the actionId, if not it will be a nanoId
   params?: CustomStoreActionParams
   options?: CustomStoreActionOptions
+  config?: any
 }
 export type QueryApiQuery = QueryState & {
   execute: (params?: Record<string, any>) => Promise<any>
@@ -23,6 +25,8 @@ export type DataApiMethods = {
   response: Object
   isLoading: Boolean
   execute: Function
+  clear: Function
+  remove: Function
 }
 export type QueryMethods = DataApiMethods & {
   uuids: Array<string>

package/services/frontend/src/core/types/Queries.ts

@@ -1 +1,2 @@
 export type actionId = string
+export type pluginKey = string

package/services/frontend/src/orchestrator/ProductOrchestrator.vue

@@ -77,6 +77,8 @@
           class="tw:overflow-y-auto! tw:pb-0"
           :class="{ '!tw:invisible': loading }"
           :widgets-layout="widgetsLayout"
+          slot-type="page"
+          :slot-layout="slotLayout"
           @scroll.passive="onScroll($event)"
         />
 
@@ -133,11 +135,10 @@ import { useRoute } from "vue-router"
 import useUiState from "./composables/useUiState"
 import useRouteState from "./composables/useRouteState"
 import CompositionOverlay from "./components/composition/CompositionOverlay.vue"
-import { useTitle } from "@vueuse/core"
+import { useTitle, useLocalStorage } from "@vueuse/core"
 import loginUserNotifications from "./helpers/loginUserNotifications"
 import configService from "@racletteCore/lib/configService"
 import { isDevelopmentMode } from "@racletteCore/helpers/devMode"
-import { useLocalStorage } from "@vueuse/core"
 import useDragAndDrop from "./composables/useDragAndDrop"
 import { useCurrentComposition } from "./composables"
 import WidgetsLayoutLoader from "./components/composition/WidgetsLayoutLoader.vue"
@@ -151,7 +152,7 @@ const { loading, theme, locale, landingPage, availableInterfaces } =
   useUiState()
 useRouteState()
 const { isDraggingOrResizingAnything } = useDragAndDrop()
-const { widgetsLayout } = useCurrentComposition()
+const { widgetsLayout, slotLayout } = useCurrentComposition()
 
 const showWelcomeScreen = computed(() => {
   const isDynamicPage = route.name === "app.space.page"
@@ -208,20 +209,31 @@ const checkImageExists = async (url: string): Promise<boolean> => {
 const showScrollToTopBtn = ref(false)
 const isDevelopment = ref(false)
 
+const setTheme = (theme: "dark" | "light") => {
+  vuetifyTheme.change(theme)
+
+  // tailwind support
+  if (theme === "dark") {
+    document.body.classList.add("dark")
+  } else {
+    document.body.classList.remove("dark")
+  }
+}
+
 const onScroll = (e) =>
   (showScrollToTopBtn.value = e.currentTarget.scrollTop > 0)
 
 onMounted(async () => {
-  vuetifyTheme.change(theme.value)
+  setTheme(theme.value)
   vuetifyLocale.current.value = locale.value
-  isDevelopment.value = isDevelopmentMode()
+  isDevelopment.value = true || isDevelopmentMode()
   logoExists.value = await checkImageExists(logoSrc.value)
   // check if we have a message from checkToken to display as a snackbar
   loginUserNotifications()
 })
 
 watch(theme, () => {
-  vuetifyTheme.change(theme.value)
+  setTheme(theme.value)
 })
 
 // set vuetify locale here, the rest is done in setup/i18n
@@ -233,7 +245,7 @@ window
   .addEventListener("change", (event) => {
     const newColorScheme = event.matches ? "dark" : "light"
     if (userTheme.value === null) {
-      vuetifyTheme.change(newColorScheme)
+      setTheme(theme.value)
     }
   })
 </script>

package/services/frontend/src/orchestrator/WelcomeScreen.vue

@@ -1,40 +1,29 @@
 <template>
-  <div class="welcome-screen">
-    <v-container>
-      <component :is="currentComponent" />
-      <v-row>
-        <v-col cols="12">
-          <h2 class="tw:text-2xl tw:font-semibold tw:mb-4">
-            {{ $t("core.welcomeScreen.builtInFeaturesTitle") }}
-          </h2>
-          <v-expansion-panels flat variant="accordion">
-            <v-expansion-panel v-for="feature in features" :key="feature.key">
-              <v-expansion-panel-title>
-                <v-icon :icon="feature.icon" class="tw:mr-3"></v-icon>
-                {{ $t(`core.welcomeScreen.${feature.key}Title`) }}
-              </v-expansion-panel-title>
-              <v-expansion-panel-text>
-                <div class="tw:py-2">
-                  {{ $t(`core.welcomeScreen.${feature.key}Description`) }}
-                </div>
-                <template v-if="feature.status">
-                  <a
-                    v-if="feature.status.link"
-                    target="_blank"
-                    :href="feature.status.link"
-                  >
-                    <v-chip
-                      v-if="feature.status"
-                      :color="feature.status.color"
-                      size="small"
-                      class="tw:mt-2"
-                    >
-                      <v-icon start :icon="feature.status.icon"></v-icon>
-                      {{ $t(`core.welcomeScreen.${feature.status.key}`) }}
-                    </v-chip>
-                  </a>
+  <div class="welcome-screen tw:p-5">
+    <component :is="currentComponent" />
+    <v-row>
+      <v-col cols="12">
+        <h2 class="tw:text-2xl tw:font-semibold tw:mb-4">
+          {{ $t("core.welcomeScreen.builtInFeaturesTitle") }}
+        </h2>
+        <v-expansion-panels flat variant="accordion">
+          <v-expansion-panel v-for="feature in features" :key="feature.key">
+            <v-expansion-panel-title>
+              <v-icon :icon="feature.icon" class="tw:mr-3"></v-icon>
+              {{ $t(`core.welcomeScreen.${feature.key}Title`) }}
+            </v-expansion-panel-title>
+            <v-expansion-panel-text>
+              <div class="tw:py-2">
+                {{ $t(`core.welcomeScreen.${feature.key}Description`) }}
+              </div>
+              <template v-if="feature.status">
+                <a
+                  v-if="feature.status.link"
+                  target="_blank"
+                  :href="feature.status.link"
+                >
                   <v-chip
-                    v-else
+                    v-if="feature.status"
                     :color="feature.status.color"
                     size="small"
                     class="tw:mt-2"
@@ -42,13 +31,22 @@
                     <v-icon start :icon="feature.status.icon"></v-icon>
                     {{ $t(`core.welcomeScreen.${feature.status.key}`) }}
                   </v-chip>
-                </template>
-              </v-expansion-panel-text>
-            </v-expansion-panel>
-          </v-expansion-panels>
-        </v-col>
-      </v-row>
-    </v-container>
+                </a>
+                <v-chip
+                  v-else
+                  :color="feature.status.color"
+                  size="small"
+                  class="tw:mt-2"
+                >
+                  <v-icon start :icon="feature.status.icon"></v-icon>
+                  {{ $t(`core.welcomeScreen.${feature.status.key}`) }}
+                </v-chip>
+              </template>
+            </v-expansion-panel-text>
+          </v-expansion-panel>
+        </v-expansion-panels>
+      </v-col>
+    </v-row>
   </div>
 </template>
 

package/services/frontend/src/orchestrator/assets/styles/tailwindStyles.css

@@ -11,6 +11,9 @@
 /* @import "tailwindcss/preflight.css" layer(base) prefix(tw); */
 /* @import "tailwindcss/utilities.css" layer(utilities) prefix(tw);  */
 
+/* enable dark mode via class */
+@custom-variant dark (&:where(.dark, .dark *));
+
 /* safelist for the resizing in the composition editor */
 @source inline('tw:col-span-{1..12}');
 @source inline('tw:grid-cols-{1..12}');

package/services/frontend/src/orchestrator/assets/styles/themes/dark.ts

@@ -4,7 +4,7 @@
 export default {
   background: "#212121",
   surface: "#212121",
-  primary: "#148dbc",
+  primary: "#0b6487",
   "primary-darken-1": "#1279a2",
   "primary-darken-2": "#106689",
   "primary-darken-3": "#0e5470",
@@ -19,7 +19,7 @@ export default {
   "primary-lighten-5": "#9dd8f2",
   "primary-lighten-6": "#c4e7f7",
   "primary-lighten-7": "#ebf5fc",
-  secondary: "#03DAC6",
+  secondary: "#017f73",
   "secondary-darken-1": "#02b7a6",
   "secondary-darken-2": "#029487",
   error: "#FF5252",

package/services/frontend/src/orchestrator/components/composition/CompositionOverlay.vue

@@ -1,6 +1,13 @@
 <template>
   <DefaultModal v-model="showModal">
-    <WidgetsLayoutLoader v-if="widgetsLayout" :widgets-layout="widgetsLayout" />
+    <div class="tw:p-5 tw:h-full">
+      <WidgetsLayoutLoader
+        v-if="widgetsLayout"
+        :widgets-layout="widgetsLayout"
+        :slot-layout="slotLayout"
+        slot-type="modal"
+      />
+    </div>
   </DefaultModal>
 </template>
 
@@ -11,7 +18,9 @@ import { computed } from "vue"
 import useRouteState from "@racletteOrchestrator/composables/useRouteState"
 import { DEFAULT_MODAL_SLOT_NAME } from "@racletteOrchestrator/router/routeParserHelper"
 
-const { widgetsLayout } = useCurrentComposition(DEFAULT_MODAL_SLOT_NAME)
+const { widgetsLayout, slotLayout } = useCurrentComposition(
+  DEFAULT_MODAL_SLOT_NAME,
+)
 const { removeSlot } = useRouteState()
 
 const showModal = computed({