@raclettejs/core 0.0.1

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

@@ -0,0 +1,181 @@
+/**
+ * Default state of the store
+ *
+ * exports
+ *
+ * - loadingHold
+ * - applicationState (initial state of the store)
+ * - configPatterns
+ * - storePatterns
+ */
+
+import type { ApplicationState } from "./types"
+
+/**
+ * Used as a timer value
+ */
+const loadingHold = 300
+
+/**
+ * applicationState
+ * Our actual application data
+ */
+const applicationState: ApplicationState = {
+  socket: {
+    status: null,
+    message: null,
+  },
+  backend: {
+    socket: {
+      status: null,
+      socketId: null,
+      health: null,
+    },
+  },
+  user: {
+    _id: false,
+    nickname: false,
+    email: false,
+    firstname: false,
+    lastname: false,
+  },
+  project: {
+    _id: null,
+  },
+  ui: {
+    availableInterfaces: ["pageNavigation", "modalTools", "topBar"],
+    // indicates the left navigation bar state
+    navigationOpen: false,
+    // indicates if the widget toolbar and other ui edit stuff is displayed
+    mobile: false,
+    // indicates if the page is in loading state
+    loading: true,
+    theme: "light",
+    locale: "en-EU",
+    shortcuts: {},
+    landingPage: "",
+  },
+  notifications: {
+    unreadCount: 0,
+    toggled: false,
+    history: [],
+    items: {},
+  },
+  data: {},
+  queriesCache: {},
+  queries: {},
+  projects: {},
+  // the actual config object of the page you see right now. This will be
+  // moved into the pages lookup once you change pages
+  // a lookup map for all the widgets which are currently known to the application context
+  widgets: {},
+  // a lookup map for all the pages which are currently known to the
+  pages: {},
+  compositions: {},
+  compositionSlots: {},
+  interactionLinks: {},
+}
+// TODO move patterns to workbench state
+/**
+ * configPatterns
+ */
+const configPatterns = {
+  grid: {
+    // defines the wrapping html template for the whole grid
+    type: "default",
+    // defines the wrapping html template for the single item within the grid
+    items: "card",
+    // defines the amount of columns per row
+    columns: 1,
+  },
+  slot: {
+    // defines a css class which will be used for the v-col the slot widget is housed in
+    class: false,
+    // defines the width of the widget by using flexbox grid col numbers 1-12
+    column: 12,
+    // defines the widget configuration, see widget storePattern
+    widget: false,
+  },
+}
+
+/**
+ * Some data object templates
+ */
+const storePatterns = {
+  compositions: {
+    // the icon to be displayed in the page navigation
+    icon: false,
+    // this will determine if we always scroll to the last page position or
+    // to the top whenever we enter this page
+    scrollTop: false,
+    // The title of the page if i18n from db
+    title: "",
+    // The title of the page if i18n key is handled in frontend
+    titleI18n: "",
+    // grid config for a page
+    grid: configPatterns.grid,
+    // the array containing the configs for the 1-n slots
+    slots: [[]],
+    // the name of the route configured in the vue router
+    routeName: false,
+    // The uuid of other unique identifier for the page within the application context
+    uuid: false,
+    version: "0.0.0",
+  },
+  page: {
+    // the icon to be displayed in the page navigation
+    icon: false,
+    // this will determine if we always scroll to the last page position or
+    // to the top whenever we enter this page
+    scrollTop: false,
+    // The title of the page if i18n from db
+    title: "",
+    // The title of the page if i18n key is handled in frontend
+    titleI18n: "",
+    // grid config for a page
+    grid: configPatterns.grid,
+    // the array containing the configs for the 1-n slots
+    slots: [[]],
+    // the name of the route configured in the vue router
+    routeName: false,
+    // The uuid of other unique identifier for the page within the application context
+    uuid: false,
+    version: "0.0.0",
+  },
+  widget: {
+    // The title of the page if i18n from db
+    title: "",
+    // The title of the page if i18n key is handled in frontend
+    titleI18n: "",
+    // will usually be set automatically, if set manually, be aware that
+    // duplicated uuid lead to shared widget store
+    uuid: false,
+    // the type of widget which represents a folder name under widgets and a config
+    name: false,
+    // 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,
+    version: "0.0.0",
+  },
+  tools: {
+    // The title of the page if i18n from db
+    title: "",
+    // The title of the page if i18n key is handled in frontend
+    titleI18n: "",
+    // an array of route names this tool should be visible on. If array is empty, it will be visible everywhere
+    pages: [],
+    // an icon to be displayed in the tool wrapper
+    icon: false,
+    // a uniqe identifier for the tool
+    uuid: false,
+    // the widget which should serve as the functionallity of the tool
+    widget: false,
+    version: "0.0.0",
+  },
+}
+
+// add the widget store pattern to the tool
+storePatterns.tools.widget = storePatterns.widget
+
+export { loadingHold, applicationState, configPatterns, storePatterns }

package/services/frontend/src/core/store/types/index.ts

@@ -0,0 +1,113 @@
+import type { InteractionLink } from "@shared/types/core/InteractionLink.types"
+import type { UserState } from "./user"
+import type { Composition } from "@shared/types/core/Composition.types"
+
+export type WidgetBase = {
+  uuid: string
+  name: string
+  title?: string
+  titleI18n?: string
+  type?: string
+  config?: Object
+  public?: Object
+  author?: string
+  pluginKey?: string
+}
+
+export type WidgetSlot = {
+  class?: string
+  column: number
+  widget: WidgetBase
+}
+
+export type OrganizationState = {
+  id: string
+}
+
+export type ProjectState = {
+  _id: string
+}
+
+export type NavigationBarType = "navItem" | "footerItem"
+
+export type PageState = {
+  icon?: string
+  scrollTop: boolean
+  title?: string
+  titleI18n?: string
+  grid?: {
+    type: string
+    items: string
+    columns: number
+    columnSizes?: string
+  }
+  slots: WidgetSlot[][]
+  routeName: string
+  uuid: string
+  sortOrder: number
+  navigationBarType?: NavigationBarType
+  hasInspector?: boolean
+  scrollY?: number
+}
+
+export type UIState = {
+  navigationOpen: boolean
+  availableInterfaces: ("pageNavigation" | "modalTools" | "topBar")[]
+  loading: boolean
+  mobile: boolean
+  theme: "light" | "dark"
+  locale: "de-DE" | "en-EU"
+  shortcuts: object
+  landingPage: string
+}
+
+export type InteractionLinksState = { [key: string]: InteractionLink }
+
+export type CompositionsState = { [key: string]: Composition }
+
+export type ServerState = {
+  socket: {
+    status: number | null
+    socketId: string | null
+    health: number | null
+  }
+}
+
+export type Notification = {
+  event: string
+  message: {
+    color: string
+    content: { name: string }
+    i18n: string
+  }
+  state: "read" | "unread" | "seen"
+  time: Date
+}
+
+export type NotificationsState = {
+  unreadCount: number
+  toggled: boolean
+  history: []
+  items: { [key: string]: Notification }
+}
+
+export type ApplicationState = {
+  widgets: {
+    [key: string]: WidgetBase
+  }
+  ui: UIState
+  notifications: any // TODO: implement me
+  user: UserState
+  project: ProjectState
+  // TODO: check if we need multiple types here
+  interactionLinks: InteractionLinksState
+  compositions: CompositionsState
+  backend: ServerState
+}
+
+// TODO: finalize this type
+export type ProjectConfiguration = {
+  browser: {
+    ui: UIState
+  }
+}

package/services/frontend/src/core/store/types/user.ts

@@ -0,0 +1,46 @@
+type BaseData = {
+  _id: string
+  tags: string[]
+  isDeleted: boolean
+}
+
+type ExtendedBaseData = BaseData & {
+  name: string
+  shortname: string
+  code: string
+}
+
+type Account = ExtendedBaseData & {
+  active: boolean
+  blocked: boolean
+  expires: null | string
+  owner: string
+  organization: string
+}
+
+type Organization = ExtendedBaseData
+
+export type UserState = BaseData & {
+  _id: string
+  nickname: string
+  email: string
+  organization: Organization
+  account: Account
+  title?: string
+  firstname: string
+  lastname: string
+  email_verified: boolean
+  active: boolean
+  blocked: boolean
+  passwordUpdated?: string
+  signedTerms: boolean
+  resetDate?: string
+  createdAt: string
+  updatedAt: string
+  settings: {
+    emailSignature?: string
+  }
+  ux: {
+    lastProjectId: string
+  }
+}

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

@@ -0,0 +1,20 @@
+export const cudOperationTypesList = [
+  "dataCreate",
+  "dataUpdate",
+  "dataMove",
+  "projectUpdate",
+  "projectConfigUpdate",
+  "userConfigUpdate",
+  "dataDeleted",
+  "dataDelete",
+  "dataHardDeleted",
+] as const
+
+export const readOperationTypesList = [
+  "dataPush",
+  "dataAdd",
+  "dataSync",
+] as const
+
+export type CoreCudOperationType = (typeof cudOperationTypesList)[number]
+export type CoreReadOperationType = (typeof readOperationTypesList)[number]

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

@@ -0,0 +1,18 @@
+import type { QueryState } from "./Store"
+export type CustomStoreActionParams = Record<string, any>
+export type CustomStoreActionOptions = {
+  immediate?: boolean
+  cb?: Function // function to call when call finised -> execute für getAll
+  useStore?: boolean // default true, ignores store and returns directly
+  notify?: boolean // default true, disables notification/snackbar
+  responseType?: string // i.e stream
+  mode?: string //i.e cors for streaming
+}
+
+export type CustomStoreActionsPayload = {
+  params?: CustomStoreActionParams
+  options?: CustomStoreActionOptions
+}
+export type QueryApiQuery = QueryState & {
+  execute: (params?: Record<string, any>) => void
+}

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

@@ -0,0 +1,112 @@
+import type { actionId } from "./Queries"
+import type { Method } from "axios"
+import type { RacletteStore } from "@racletteCore"
+import type EventEmitter from "@racletteCore/lib/eventEmitter"
+import type $log from "@racletteCore/lib/logger"
+import type { AxiosInstance } from "axios"
+import type { Socket } from "socket.io-client"
+import type { FetchClientInterface } from "@racletteCore/lib/httpClient"
+import type {
+  WidgetConf,
+  WidgetDeclaration,
+  PluginApi,
+} from "@racletteOrchestrator"
+import type { DefineComponent } from "vue"
+export type BroadcastChannelDefinition = {
+  channel: string
+  channelKey: string
+  prefix: string
+}[]
+// TODO fix types for store
+export type CorePluginApi = {
+  $store: RacletteStore
+  $api: {
+    fetch: FetchClientInterface
+    axios: AxiosInstance
+  }
+  $eventbus: EventEmitter
+  $socket: Socket
+  $log: typeof $log
+}
+
+export type PluginEndpointDefinition = {
+  actionId?: actionId
+  // override the auto generated actionId
+  target: string | ((payload: any) => string)
+  broadcast?: boolean
+  method?: Method
+  channels?: BroadcastChannelDefinition
+}
+export type PluginFrontendDataDefinition = {
+  type: string
+  operations?: Record<string, PluginEndpointDefinition>
+}
+export type InstallApi = {
+  addDataType: Function
+  addNodeDependency: Function
+  addStoreEffect: Function
+  dispatchStore: Function
+}
+
+export type PluginWidget = {
+  details: WidgetDeclaration
+  config: WidgetConf
+  component: Function
+}
+
+export type PluginFrontendDefinition = {
+  install: (
+    $installApi: InstallApi,
+    $pluginApi: PluginApi,
+  ) => Promise<unknown> | unknown
+  widgets: {
+    [key: string]: PluginWidget
+  }
+  i18n: {
+    [key: string]: {
+      [key: string]: string
+    }
+  }
+  data: { [key: string]: PluginFrontendDataDefinition }
+
+  exportComponents: {
+    [key: string]: DefineComponent
+  }
+}
+
+type StorePayloadObject = Record<string, any>
+
+export type PluginStoreApi = {
+  getUiState<T = any>(): T
+  setUiState: (payload: StorePayloadObject) => void
+  getWidgetState<T = any>(widgetId: string): T
+  updateWidgetState: (payload: StorePayloadObject, widgetId: string) => void
+  setWidgetState: (payload: StorePayloadObject, widgetId: string) => void
+  getQueryState<T = any>(actionId: actionId): T
+  getQueryData<T = any>(actionId: actionId): T
+  get<T = any>(pathArray: string[], filter: Record<string, any>): T
+}
+export type PluginTypes = "core" | "npm" | "app"
+export type RegisteredPlugin = {
+  author: string
+  pluginKey: string
+  name: string
+  pluginType: PluginTypes
+  path: string
+  widgets: { [key: string]: PluginWidget }
+  options: {}
+  // later on added stuff
+  $api: PluginApi
+  initEventbus: () => void
+  initCud: (
+    orchestratorResultWrapper: { write: Function; read: Function },
+    instanceUid: number,
+    actionIdOverride: actionId | undefined,
+  ) => (
+    actionIdOverride: string,
+    orchestratorResultWrapper: { write: Function; read: Function },
+    instanceId: number,
+    pluginData: PluginFrontendDefinition["data"],
+  ) => any // TODO: care about orchestratorResultWrapper and any
+  initSocket: () => Function
+}

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

@@ -0,0 +1 @@
+export type actionId = string

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

@@ -0,0 +1,17 @@
+import type { Store as ReduxStore } from "mini-rx-store"
+export type QueryState = {
+  loading?: boolean
+  uuids?: string[]
+  params: Record<string, any>
+  target: string
+}
+export type StoreHelperGetState = {
+  stateKey?: string
+  attributeArr?: Array<string>
+  valueArr?: Array<string>
+}
+export type RacletteStore = ReduxStore & {
+  hasChanges: (oldVal: string, newVal: string) => boolean
+  getState: (params: string | any[] | StoreHelperGetState) => any
+  appSessionId?: String
+}

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

@@ -0,0 +1,6 @@
+export type * from "./ApiClient"
+export type * from "./PluginRegistrar"
+export type * from "./DataApi"
+export type * from "./Queries"
+export type * from "./Store"
+export type { LoginResponse } from "../main"

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

@@ -0,0 +1,5 @@
+<template>
+  <Suspense>
+    <router-view />
+  </Suspense>
+</template>

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

@@ -0,0 +1,66 @@
+<template>
+  <div class="tw:h-screen tw:flex tw:flex-col tw:bg-white tw:overflow-auto">
+    <div class="tw:ml-4 tw:mt-4 tw:w-[462px] tw:self-start">
+      <img width="233" src="/login-logo.png" />
+    </div>
+
+    <div
+      class="tw:flex tw:flex-1 tw:w-full tw:items-center tw:justify-center tw:text-black"
+    >
+      <div class="tw:flex tw:w-[462px] tw:flex-col tw:gap-12">
+        <div class="tw:p-6">
+          <div class="tw:text-3xl">
+            {{ $t("core.authentication.headline") }}
+          </div>
+          <div class="tw:text-sm tw:text-[#898989]">
+            {{ $t("core.authentication.subheadline") }}
+          </div>
+        </div>
+
+        <LoginForm @submit="onSubmitLogin" />
+      </div>
+    </div>
+  </div>
+  <SnackStack />
+</template>
+
+<script setup lang="ts">
+import { onMounted } from "vue"
+import LoginForm from "./components/authentication/LoginForm.vue"
+import type { LoginResponse } from "@racletteCore/types"
+import SnackStack from "./components/snackbar/SnackStack.vue"
+import loginUserNotifications from "./helpers/loginUserNotifications"
+import { userNotifier } from "@racletteCore/exports"
+
+const props = withDefaults(
+  defineProps<{
+    loginMethod?: ({
+      email,
+      password,
+    }: {
+      email: string
+      password: string
+    }) => Promise<LoginResponse>
+    noUsers: boolean
+  }>(),
+  { loginMethod: undefined },
+)
+
+const onSubmitLogin = async (loginPayload: {
+  email: string
+  password: string
+}) => {
+  if (props.loginMethod) {
+    const { success, message, redirect } = await props.loginMethod(loginPayload)
+
+    if (success) {
+      redirect?.()
+    } else if (message) {
+      userNotifier.add(message, "error")
+    }
+  }
+}
+
+// check if we have a message from checkToken to display as a snackbar
+onMounted(() => loginUserNotifications())
+</script>