@raclettejs/core 0.0.1

package/services/frontend/src/orchestrator/components/input/SimpleSearchInput.vue

@@ -0,0 +1,42 @@
+<template>
+  <v-text-field
+    ref="search-input"
+    v-model="model"
+    clearable
+    :autofocus="autoFocus"
+    density="compact"
+    :label="$t('core.search_input')"
+    prepend-inner-icon="mdi-magnify"
+    flat
+    hide-details
+    single-line
+  />
+</template>
+
+<script setup lang="ts">
+import { useTemplateRef, onMounted } from "vue"
+import { awaitTime } from "@racletteCore/lib/dataHelper"
+
+const props = withDefaults(
+  defineProps<{
+    autoFocus?: boolean
+  }>(),
+  {
+    autoFocus: false,
+  },
+)
+
+const model = defineModel({
+  type: String,
+  required: true,
+})
+
+const input = useTemplateRef("search-input")
+
+onMounted(async () => {
+  if (props.autoFocus) {
+    await awaitTime(300)
+    input?.value?.focus()
+  }
+})
+</script>

package/services/frontend/src/orchestrator/components/menu/DevIndicator.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <v-bottom-sheet v-model="showMenu" inset>
+      <template #activator="{ props }">
+        <div class="tw:text-center">
+          <v-btn v-bind="props" icon="mdi-dev-to" color="#ffc400" />
+        </div>
+      </template>
+
+      <v-list>
+        <v-list-subheader>Development mode</v-list-subheader>
+
+        <v-list-item
+          :title="toggleDevIndicatorMessage"
+          prepend-icon="mdi-border-outside"
+          @click="toggleShowDevIndicator"
+        />
+      </v-list>
+    </v-bottom-sheet>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useLocalStorage } from "@vueuse/core"
+import { computed, ref, watch } from "vue"
+
+const showMenu = ref(false)
+const showDevIndicator = useLocalStorage<boolean>("show-dev-indicator", true)
+
+const toggleShowDevIndicator = () => {
+  showDevIndicator.value = !showDevIndicator.value
+  showMenu.value = false
+}
+
+const toggleDevIndicatorMessage = computed(() => {
+  const word = showDevIndicator.value ? "Hide" : "Show"
+
+  return `${word} dev indication borders`
+})
+
+watch(
+  showDevIndicator,
+  (value) => {
+    if (value) {
+      document.body.classList.add("dev-indicator")
+    } else {
+      document.body.classList.remove("dev-indicator")
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<style lang="scss">
+body.dev-indicator {
+  &:before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    border: 4px solid #ffc400;
+    z-index: 9999;
+  }
+}
+</style>

package/services/frontend/src/orchestrator/components/menu/ServerStatus.vue

@@ -0,0 +1,89 @@
+<template>
+  <v-tooltip
+    content-class="!tw:p-1"
+    location="bottom"
+    max-width="400px"
+    v-model="show"
+  >
+    <template #activator="{ props }">
+      <v-btn
+        v-bind="props"
+        :icon="currentState.icon"
+        :color="currentState.color"
+      />
+    </template>
+
+    <v-list
+      v-if="backend.socket"
+      density="compact"
+      flat
+      :theme="theme"
+      bg-color="transparent"
+    >
+      <v-list-item>
+        <template #prepend>
+          <v-icon
+            v-if="backend.socket.status == 1"
+            icon="mdi-checkbox-marked-circle"
+            color="success"
+          />
+          <v-icon v-else icon="mdi-alert-circle" color="error" size="small" />
+        </template>
+        <v-list-item-title>
+          {{ $t(`core.socket_status_${backend.socket.status || 0}`) }}
+        </v-list-item-title>
+      </v-list-item>
+      <v-list-item>
+        <template #prepend>
+          <v-icon icon="mdi-update" color="info" size="small" />
+        </template>
+        <v-list-item-title>
+          {{ $t("core.lastSocketUpdateReceivedAt") }}:<br />
+          {{ lastUpdate() }}
+        </v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </v-tooltip>
+</template>
+
+<script setup lang="ts">
+import useStateSubscriber from "@racletteOrchestrator/composables/useStateSubscriber"
+import { ref, computed } from "vue"
+import { useI18n } from "vue-i18n"
+import { $store } from "@racletteCore"
+import { useTheme } from "vuetify"
+import type { ServerState } from "@racletteCore/store/types"
+
+const i18n = useI18n()
+const show = ref(false)
+const vuetifyTheme = useTheme()
+
+const { state: backend } = useStateSubscriber<ServerState>("backend")
+
+const theme = computed(() =>
+  vuetifyTheme.global.name.value === "light" ? "dark" : "light",
+)
+
+const currentState = computed(() => {
+  const status = backend.value?.socket?.status ?? 2 // default to "some fucked"
+
+  const stateMapping = [
+    { icon: "mdi-alert-circle", color: "error" }, // status 0
+    { icon: "mdi-checkbox-marked-circle", color: "success" }, // status 1
+    { icon: "mdi-alert-circle", color: "warning" }, // status 2 or anything else
+  ]
+
+  return stateMapping[status] ?? stateMapping[2]
+})
+
+const lastUpdate = () => {
+  const projectId = $store.getState(["project", "_id"])
+  const lastUpdate = localStorage.getItem(`lastUpdate_${projectId}`)
+
+  if (!lastUpdate) {
+    return
+  }
+
+  return i18n.d(new Date(lastUpdate), "long")
+}
+</script>

package/services/frontend/src/orchestrator/components/menu/UserMenu.vue

@@ -0,0 +1,194 @@
+<template>
+  <v-menu :close-on-content-click="false" v-model="isOpen">
+    <template #activator="{ props }">
+      <v-btn class="!tw:me-0" v-bind="props">
+        <v-avatar density="compact" color="primary" class="tw:mr-2">
+          {{ avatar }}
+        </v-avatar>
+        <v-icon>mdi-chevron-down</v-icon>
+      </v-btn>
+    </template>
+    <v-list class="tw:pb-0" :key="locale">
+      <v-list-item>
+        <template #prepend>
+          <v-icon>mdi-translate</v-icon>
+        </template>
+        <v-list-item-title>
+          <v-btn-toggle v-model="locale" mandatory @click="storeLocale">
+            <v-btn :key="locale" v-for="locale in locales" :value="locale">
+              <span v-html="localeFlags[locale]"></span>
+            </v-btn>
+          </v-btn-toggle>
+        </v-list-item-title>
+      </v-list-item>
+      <v-divider />
+      <v-list-item @click="refreshQueries">
+        <template #prepend>
+          <v-icon>mdi-refresh</v-icon>
+        </template>
+        <v-list-item-title>
+          {{ $t("core.refreshAllQueries") }}</v-list-item-title
+        >
+      </v-list-item>
+      <v-divider />
+      <v-list-item @click="toggleTheme">
+        <template #prepend>
+          <v-icon>mdi-theme-light-dark</v-icon>
+        </template>
+        <v-list-item-title>{{ $t("core.toggle_theme") }}</v-list-item-title>
+      </v-list-item>
+      <v-list-item v-if="isDecember()" @click="eggMe('xmas')">
+        <template #prepend>
+          <v-icon>mdi-snowflake</v-icon>
+        </template>
+        <v-list-item-title>{{ $t("core.toggle_snow") }}</v-list-item-title>
+      </v-list-item>
+      <v-list-item
+        v-for="item in pageNavigation.userMenuItems"
+        :key="item.route"
+        :disabled="activeRouteName === item.route || !item.route"
+        :active="activeRouteName === item.route"
+        :value="item.route || ''"
+        color="primary"
+        class="nav-link"
+        link
+        @click="navigate(item)"
+      >
+        <!-- item prepend icon -->
+        <template v-if="item.icon" #prepend>
+          <v-icon :icon="item.icon" />
+        </template>
+        <v-list-item-title v-if="item.title">{{
+          item.title
+        }}</v-list-item-title>
+      </v-list-item>
+
+      <v-divider />
+
+      <v-list-item
+        v-if="requireAuthentication"
+        class="tw:bg-red-800! tw:text-white!"
+        to="/logout"
+        prepend-icon="mdi-logout"
+        :title="$t('core.logout')"
+      />
+    </v-list>
+  </v-menu>
+</template>
+<script setup lang="ts">
+import localeFlags from "@racletteOrchestrator/assets/iconMappings/flags.json"
+import { computed, onMounted, ref } from "vue"
+import { useRouter } from "vue-router"
+import useStateSubscriber from "@racletteOrchestrator/composables/useStateSubscriber"
+import useUiState from "@racletteOrchestrator/composables/useUiState"
+import { $store } from "@racletteCore"
+import configService from "@racletteCore/lib/configService"
+import { awaitTime, debounceHelper } from "@racletteCore/lib/dataHelper"
+import useRouteState from "@racletteOrchestrator/composables/useRouteState"
+import { DEFAULT_SLOT_NAME } from "@racletteOrchestrator/router/routeParserHelper"
+import { useLocalStorage } from "@vueuse/core"
+
+import {
+  debounceHelper as asteroidsDebounceHelper,
+  eggMe,
+} from "@racletteCore/lib/easteregg"
+import usePageNavigation, {
+  type NavigationItem,
+} from "@racletteOrchestrator/composables/usePageNavigation"
+
+const { locales } = configService.getI18nConfig()
+const router = useRouter()
+const asteroidsDebounce = asteroidsDebounceHelper(3)
+const debounce = debounceHelper(1000)
+const { state: user } = useStateSubscriber("user")
+const { locale, theme } = useUiState()
+const { getCompositionLinkForSlotName } = useRouteState()
+
+const userLanguage = useLocalStorage<string>("user-language", null)
+const userTheme = useLocalStorage<string>("user-theme", null)
+const { state: pageNavigation } = usePageNavigation()
+const showDevIndicator = useLocalStorage<boolean | ("true" | "false")>(
+  "show-dev-indicator",
+  null,
+)
+
+const isOpen = ref(false)
+const canRefresh = ref(true)
+
+const requireAuthentication = configService.getRequireAuthentication()
+const isDecember = () => new Date().getMonth() === 11
+const currentPageRoute = getCompositionLinkForSlotName(DEFAULT_SLOT_NAME)
+
+const activeRouteName = computed(() => {
+  const currentRoute = router.currentRoute.value
+  const pageCompositionLinkValue = currentPageRoute?.value?.slotValue
+
+  // consider dynamic pages
+  if (currentRoute.name === "app.space.page") {
+    return pageCompositionLinkValue || currentRoute.params.pageId
+  }
+
+  return pageCompositionLinkValue || currentRoute.name
+})
+
+const avatar = computed(() => {
+  if (user.value?.avatar) {
+    return user.value.avatar
+  }
+  let nameString = ""
+
+  if (user.value.firstname) {
+    nameString += user.value.firstname.substring(0, 1)
+  }
+  if (user.value.lastname) {
+    nameString += user.value.lastname.substring(0, 1)
+  }
+
+  return nameString
+})
+
+const isInDev = computed(
+  () => showDevIndicator.value === true || showDevIndicator.value === "true",
+)
+
+const toggleTheme = () => {
+  theme.value = theme.value === "light" ? "dark" : "light"
+  if (isInDev.value) {
+    userTheme.value = theme.value
+  }
+}
+
+const storeLocale = () => {
+  if (isInDev.value) {
+    userLanguage.value = locale.value
+  }
+}
+
+const refreshQueries = () => {
+  openEgg()
+  if (canRefresh.value) {
+    $store.dispatch({
+      type: "queries/execute",
+      payload: {},
+    })
+    canRefresh.value = false
+    debounce(() => {
+      canRefresh.value = true
+    })
+  }
+}
+
+const navigate = (item: NavigationItem) => {
+  isOpen.value = false
+  item.navigateTo()
+}
+
+const openEgg = () => asteroidsDebounce(() => eggMe("asteroids"))
+
+onMounted(async () => {
+  if (isDecember()) {
+    await awaitTime(600)
+    eggMe("xmas")
+  }
+})
+</script>

package/services/frontend/src/orchestrator/components/menu/UserNotifications.vue

@@ -0,0 +1,201 @@
+<template>
+  <v-menu
+    v-if="state"
+    v-model="toggled"
+    :close-on-click="false"
+    :close-on-content-click="false"
+    location="bottom"
+    transition="scroll-y-transition"
+    class="tw:w-[450px]"
+  >
+    <template #activator="{ props }">
+      <v-btn v-bind="props" icon>
+        <v-badge
+          v-if="state.unreadCount > 0"
+          dot
+          :content="state.unreadCount"
+          color="error"
+        >
+          <v-icon>mdi-bell-outline</v-icon>
+        </v-badge>
+        <v-icon v-else>mdi-bell-outline</v-icon>
+
+        <v-tooltip activator="parent" location="bottom">
+          {{
+            $t(
+              "receivedNotifications$count",
+              state.unreadCount,
+              state.unreadCount,
+            )
+          }}
+        </v-tooltip>
+      </v-btn>
+    </template>
+
+    <v-card left class="tw:w-[450px]">
+      <v-expansion-panels v-model="panel">
+        <v-expansion-panel>
+          <v-expansion-panel-title>Neu</v-expansion-panel-title>
+          <v-expansion-panel-text>
+            <v-list density="compact">
+              <v-list-item
+                v-for="(entry, index) in notificationQue"
+                :key="index"
+                @click="
+                  () => {
+                    /* this empty listener gives the list item a hover effect */
+                  }
+                "
+              >
+                <template #prepend>
+                  <v-icon
+                    v-if="entry.event === 'dataUpdate'"
+                    icon="mdi-file-edit"
+                  ></v-icon>
+                  <v-icon
+                    v-if="entry.event === 'dataCreate'"
+                    icon="mdi-file-plus"
+                  ></v-icon>
+                  <v-icon
+                    v-if="entry.event === 'dataSync'"
+                    icon="mdi-folder-sync"
+                  ></v-icon>
+                  <v-icon
+                    v-if="entry.event === 'dataDelete'"
+                    icon="mdi-file-document-remove"
+                  ></v-icon>
+                </template>
+                <v-list-item-title
+                  class="tw:w-full tw:select-none"
+                  :class="{
+                    'tw:italic': entry.state === 'seen',
+                    'tw:underline': entry.state === 'unread',
+                  }"
+                >
+                  {{
+                    entry.message.i18n
+                      ? $t(entry.message.i18n, entry.message.content)
+                      : $t(entry.message)
+                  }}
+                </v-list-item-title>
+                <v-list-item-subtitle>
+                  <v-row no-gutters>
+                    <v-col align-self="end">
+                      <UserChip
+                        v-if="entry.updatedBy"
+                        :user-id="entry.updatedBy"
+                        compact
+                      />
+                      <TimeAgo :timestamp="entry.time" />
+                    </v-col>
+                  </v-row>
+                </v-list-item-subtitle>
+                <template #append>
+                  <v-btn
+                    v-if="entry.state === 'read'"
+                    variant="text"
+                    color="grey lighten-1"
+                    icon="mdi-circle-small"
+                    @click="markAsUnread(entry.queKey)"
+                  ></v-btn>
+                  <v-btn
+                    v-if="entry.state === 'unread'"
+                    variant="text"
+                    color="grey lighten-1"
+                    icon="mdi-circle-medium"
+                    @click="markAsRead(entry.queKey)"
+                  ></v-btn>
+                  <v-btn
+                    v-if="entry.state === 'seen'"
+                    variant="text"
+                    color="grey lighten-1"
+                    icon="mdi-circle-medium"
+                    @click="markAsRead(entry.queKey)"
+                  ></v-btn>
+                </template>
+              </v-list-item>
+            </v-list>
+          </v-expansion-panel-text>
+        </v-expansion-panel>
+      </v-expansion-panels>
+      <v-divider></v-divider>
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+
+        <v-btn text @click="toggled = false"> {{ $t("core.cancel") }} </v-btn>
+        <v-btn color="primary" text @click="clearAll()">
+          {{ $t("core.clear") }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-menu>
+</template>
+<script setup lang="ts">
+import { computed, ref } from "vue"
+import useStateSubscriber from "@racletteOrchestrator/composables/useStateSubscriber"
+import { UserChip, TimeAgo } from "@racletteOrchestrator"
+import { $store } from "@racletteCore"
+import { clone } from "ramda"
+import type {
+  Notification,
+  NotificationsState,
+} from "@racletteCore/store/types"
+
+const { state } = useStateSubscriber<NotificationsState>("notifications")
+
+const panel = ref(0)
+
+const toggled = computed({
+  get: () => state.value.toggled,
+  set: (newValue) => {
+    panel.value = 0
+
+    $store.dispatch({
+      type: "notifications/toggle",
+      payload: {
+        toggled: newValue,
+      },
+    })
+  },
+})
+
+const notificationQue = computed<Notification[]>(() => {
+  if (!state.value.items) {
+    return []
+  }
+  const stateItems = clone(state.value.items)
+
+  // remember our objectKey for read/unread state set in reducers
+  Object.entries(stateItems).forEach(([key, value]) => {
+    value.queKey = key
+  })
+
+  return Object.values(stateItems).sort(
+    (a, b) => new Date(b.time) - new Date(a.time),
+  )
+})
+
+const clearAll = () => {
+  $store.dispatch({
+    type: "notifications/clear",
+  })
+  toggled.value = false
+}
+
+const markAsRead = (queKey) =>
+  $store.dispatch({
+    type: "notifications/markAsRead",
+    payload: {
+      queKey,
+    },
+  })
+
+const markAsUnread = (queKey) =>
+  $store.dispatch({
+    type: "notifications/markUnread",
+    payload: {
+      queKey,
+    },
+  })
+</script>

package/services/frontend/src/orchestrator/components/modal/DefaultModal.vue

@@ -0,0 +1,81 @@
+<template>
+  <v-dialog
+    :max-width="isMaximized ? screenWidth : 1024"
+    :max-height="'calc(100vh - 48px)'"
+    class="default-modal tw:transition-all"
+    contained
+  >
+    <template #default="{ isActive }">
+      <v-card>
+        <div class="tw:flex tw:h-[calc(100vh-48px)] tw:flex-col">
+          <!-- header -->
+          <div
+            v-show="!hideHeader"
+            class="tw:flex tw:max-w-full tw:px-4 tw:py-2"
+          >
+            <div class="tw:truncate">
+              <slot name="modal-actions-prepend" />
+            </div>
+            <slot name="modal-header-inner" />
+            <div class="tw:ml-auto tw:shrink-0">
+              <slot name="modal-additional-actions" />
+              <!-- maximize button -->
+              <v-btn
+                variant="text"
+                dense
+                :icon="
+                  !isMaximized ? 'mdi-window-maximize' : 'mdi-window-restore'
+                "
+                size="small"
+                @click="setMaximized(!isMaximized)"
+              />
+              <!-- close button -->
+              <v-btn
+                variant="text"
+                dense
+                icon="mdi-close"
+                size="small"
+                @click="isActive.value = false"
+              />
+            </div>
+          </div>
+
+          <!-- content -->
+          <div id="modalContent" class="tw:max-h-full tw:grow tw:overflow-auto">
+            <slot />
+          </div>
+          <div v-if="$slots['modal-footer']">
+            <slot name="modal-footer" />
+          </div>
+        </div>
+      </v-card>
+    </template>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { useWindowSize } from "@vueuse/core"
+import { ref } from "vue"
+
+defineProps<{ hideHeader?: boolean }>()
+
+const { width: screenWidth } = useWindowSize()
+
+const isMaximized = ref(false)
+
+const setMaximized = (value: boolean) => (isMaximized.value = value)
+
+defineExpose({ setMaximized })
+</script>
+
+<style>
+/* ensure that the modal is always placed at top */
+@reference "@raclettejs/core/orchestrator/assets/styles/tailwindStyles.css";
+
+.default-modal {
+  .v-overlay__content {
+    @apply tw:top-0;
+    @apply tw:transition-all;
+  }
+}
+</style>