@raclettejs/workbench 0.0.1

package/plugins/pacifico__tags/frontend/widgets/TagEditWidget.vue

@@ -0,0 +1,64 @@
+<template>
+  <TagConfiguration
+    v-if="editableTag"
+    v-model="editableTag"
+    :disabled="isLoading || editableTag.locked"
+    is-editing
+    @save="onSubmit"
+  />
+</template>
+
+<script setup lang="ts">
+import { type Tag } from "@raclettejs/core"
+import {
+  usePluginApi,
+  useRouteState,
+} from "@raclettejs/core/orchestrator/composables"
+import { computed, ref, toRaw } from "vue"
+import TagConfiguration from "../components/TagConfiguration.vue"
+import { clone } from "ramda"
+import { DEFAULT_SLOT_NAME } from "@raclettejs/core/orchestrator/router/routeParserHelper"
+
+const props = defineProps<{
+  uuid: string
+}>()
+
+const { compositionSlots, triggerInteractionLinkById } = useRouteState()
+const { $data } = usePluginApi("raclette__core")
+
+const id = computed(
+  () =>
+    compositionSlots.value.find((slot) => slot.slotName === DEFAULT_SLOT_NAME)
+      ?.slotParams?.id,
+)
+
+const { data } = $data.tag.get({
+  params: { _id: id.value },
+  options: {
+    immediate: true,
+    cb: () => {
+      if (!tag.value) {
+        return navigateBack()
+      }
+
+      editableTag.value = clone(tag.value)
+    },
+  },
+})
+
+const { execute: executeUpdate, isLoading } = $data.tag.update()
+
+const editableTag = ref<Tag>()
+
+const tag = computed<Tag | undefined>(() => {
+  if (!id.value) {
+    return undefined
+  }
+
+  return data.value?.[id.value]
+})
+
+const navigateBack = () => triggerInteractionLinkById("tagListInteractionLink")
+
+const onSubmit = async () => await executeUpdate(toRaw(editableTag.value))
+</script>

package/plugins/pacifico__tags/frontend/widgets/TagListWidget.vue

@@ -0,0 +1,71 @@
+<template>
+  <BaseDataTable
+    :items="parsedTags"
+    :loading="tagsLoading"
+    :headers="headers"
+    create-interaction-link-id="tagCreateInteractionLink"
+    edit-interaction-link-id="tagEditInteractionLink"
+    :data-name="$t('workbench.tagList.dataName')"
+    :data-article="$t('workbench.tagList.dataArticle')"
+    @delete="deleteTag"
+  />
+</template>
+
+<script setup lang="ts">
+import { usePluginApi } from "@raclettejs/core/orchestrator/composables"
+import { computed } from "vue"
+import type { Tag } from "@raclettejs/core"
+import { useI18n } from "vue-i18n"
+import BaseDataTable from "@app/components/BaseDataTable.vue"
+import { formatDistance } from "date-fns"
+
+const { t } = useI18n()
+
+const headers = computed<{ title: string; key: keyof Tag }[]>(() => [
+  {
+    title: t("workbench.tagList.tableHeaders.title"),
+    key: "title",
+  },
+  {
+    title: t("workbench.tagList.tableHeaders.type"),
+    key: "type",
+  },
+  {
+    title: t("workbench.tagList.tableHeaders.updatedAt"),
+    key: "updatedAt",
+  },
+])
+
+const props = defineProps<{
+  uuid: string
+}>()
+
+const { $data, $socket } = usePluginApi("raclette__core")
+
+const {
+  data: tags,
+  execute,
+  isLoading: tagsLoading,
+} = $data.tag.getAll({
+  options: { immediate: true },
+})
+
+const { execute: executeDelete } = $data.tag.delete({
+  options: { cb: () => execute() },
+})
+
+const parsedTags = computed(() => {
+  if (tags.value) {
+    return Object.values(tags.value as { [key: string]: Tag }).map((tag) => ({
+      ...tag,
+      tags: tag?.tags?.map((t) => tags.value?.[t]) ?? [],
+      updatedAt: formatDistance(new Date(tag.updatedAt), new Date()),
+    }))
+  }
+  return []
+})
+
+const deleteTag = async (tag: Tag) => await executeDelete({ _id: tag._id })
+
+$socket.on("tagCreated", () => execute())
+</script>

package/plugins/pacifico__tags/raclette.plugin.ts

@@ -0,0 +1,8 @@
+export default {
+  name: "tags",
+  author: "pacifico",
+  version: "0.0.1",
+  description: "A plugin for tags",
+  // Specify where the main frontend and backend entry points are
+  frontendDir: "./frontend",
+}

package/plugins/pacifico__users/frontend/components/UserConfiguration.vue

@@ -0,0 +1,110 @@
+<template>
+  <StepNavigator
+    :steps
+    :is-saving="disabled"
+    :show-save-button="isEditing"
+    @save="$emit('save')"
+    @save-and-finish="$emit('save-and-finish')"
+  >
+    <!-- @vue-generic {UserCreate | UserUpdate} -->
+    <DynamicForm
+      ref="dynamicFormRef"
+      v-model="user"
+      :data="inputFields"
+      :disabled
+      :title="
+        isEditing
+          ? $t('workbench.userEdit.title')
+          : $t('workbench.userCreate.title')
+      "
+      route-back-interaction-link-id="userListInteractionLink"
+    />
+  </StepNavigator>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "vue-i18n"
+import type { UserCreate, UserUpdate } from "@raclettejs/core"
+import DynamicForm from "@app/components/dynamicForm/DynamicForm.vue"
+import { DynamicFormItem } from "@app/components/dynamicForm/DynamicFormTypes"
+import { computed, useTemplateRef } from "vue"
+import { emailValidator } from "@app/components/dynamicForm/validators"
+import StepNavigator from "@app/components/stepNavigator/StepNavigator.vue"
+import { Step } from "@app/components/stepNavigator/StepNavigatorTypes"
+
+const props = defineProps<{ disabled?: boolean; isEditing?: boolean }>()
+
+defineEmits<{
+  (e: "save"): void
+  (e: "save-and-finish"): void
+}>()
+
+const user = defineModel<UserCreate | UserUpdate>({ required: true })
+
+const dynamicFormRef = useTemplateRef("dynamicFormRef")
+
+const { t } = useI18n()
+
+const inputFields = computed<DynamicFormItem<UserCreate | UserUpdate>[]>(() => [
+  {
+    divider: t("workbench.userConfiguration.dividers.general"),
+  },
+  {
+    title: t("workbench.userConfiguration.email.title"),
+    description: t("workbench.userConfiguration.email.description"),
+    inputType: "text",
+    field: "email",
+    prependIcon: "at",
+    validation: {
+      required: true,
+      customValidator: emailValidator,
+    },
+  },
+  {
+    title: t("workbench.userConfiguration.password.title"),
+    inputType: "password",
+    field: "password",
+    prependIcon: "key-variant",
+    validation: {
+      required: !props.isEditing,
+    },
+  },
+  {
+    title: t("workbench.userConfiguration.firstname.title"),
+    inputType: "text",
+    field: "firstname",
+    prependIcon: "text-short",
+  },
+  {
+    title: t("workbench.userConfiguration.lastname.title"),
+    inputType: "text",
+    field: "lastname",
+    prependIcon: "text-short",
+  },
+  {
+    title: t("workbench.userConfiguration.tags.title"),
+    description: t("workbench.userConfiguration.tags.description"),
+    inputType: "tags",
+    field: "tags",
+    prependIcon: "tag-multiple",
+  },
+])
+
+const validateForm = (): boolean => {
+  const validateAllFields = dynamicFormRef.value?.validateAllFields
+
+  if (validateAllFields) {
+    const isValid = !!validateAllFields()
+
+    return isValid
+  }
+  return true
+}
+
+const steps = computed<Step[]>(() => [
+  {
+    id: "config",
+    validator: validateForm,
+  },
+])
+</script>

package/plugins/pacifico__users/frontend/widgets/UserCreateWidget.vue

@@ -0,0 +1,48 @@
+<template>
+  <!-- <DynamicFormInputTesting /> -->
+  <UserConfiguration
+    v-model="newUser"
+    :disabled="isLoading"
+    @save-and-finish="onSubmit"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import UserConfiguration from "../components/UserConfiguration.vue"
+import { UserCreate } from "@raclettejs/core"
+import {
+  useRouteState,
+  usePluginApi,
+} from "@raclettejs/core/orchestrator/composables"
+import { DEFAULT_SLOT_NAME } from "@raclettejs/core/orchestrator/router/routeParserHelper"
+
+const props = defineProps<{
+  uuid: string
+}>()
+
+const { $data } = usePluginApi("raclette__core")
+const { triggerInteractionLinkById } = useRouteState()
+
+const { execute, isLoading, error } = $data.user.create()
+
+const newUser = ref<UserCreate>({
+  email: "",
+  firstname: "",
+  lastname: "",
+  email_verified: true,
+  tags: [],
+  password: "",
+  account: "",
+})
+
+const navigateBack = () => triggerInteractionLinkById("userListInteractionLink")
+
+const onSubmit = async () => {
+  await execute(newUser.value)
+
+  if (!error.value) {
+    navigateBack()
+  }
+}
+</script>

package/plugins/pacifico__users/frontend/widgets/UserEditWidget.vue

@@ -0,0 +1,64 @@
+<template>
+  <UserConfiguration
+    v-if="editableUser"
+    v-model="editableUser"
+    :disabled="isLoading"
+    isEditing
+    @save="onSubmit"
+  />
+</template>
+
+<script setup lang="ts">
+import type { User } from "@raclettejs/core"
+import {
+  usePluginApi,
+  useRouteState,
+} from "@raclettejs/core/orchestrator/composables"
+import { computed, ref, toRaw } from "vue"
+import UserConfiguration from "../components/UserConfiguration.vue"
+import { clone } from "ramda"
+import { DEFAULT_SLOT_NAME } from "@raclettejs/core/orchestrator/router/routeParserHelper"
+
+const props = defineProps<{
+  uuid: string
+}>()
+
+const { compositionSlots, triggerInteractionLinkById } = useRouteState()
+const { $data } = usePluginApi("raclette__core")
+
+const id = computed(
+  () =>
+    compositionSlots.value.find((slot) => slot.slotName === DEFAULT_SLOT_NAME)
+      ?.slotParams?.id,
+)
+
+const { data } = $data.user.get({
+  params: { _id: id.value },
+  options: {
+    immediate: true,
+    cb: () => {
+      if (!user.value) {
+        return navigateBack()
+      }
+
+      editableUser.value = clone(user.value)
+    },
+  },
+})
+
+const { execute: executeUpdate, isLoading } = $data.user.update()
+
+const editableUser = ref<User>()
+
+const user = computed<User | undefined>(() => {
+  if (!id.value) {
+    return undefined
+  }
+
+  return data.value?.[id.value]
+})
+
+const navigateBack = () => triggerInteractionLinkById("userListInteractionLink")
+
+const onSubmit = async () => await executeUpdate(toRaw(editableUser.value))
+</script>

package/plugins/pacifico__users/frontend/widgets/UserListWidget.vue

@@ -0,0 +1,86 @@
+<template>
+  <BaseDataTable
+    :items="parsedUsers"
+    :loading="usersLoading || tagsLoading"
+    :headers="headers"
+    create-interaction-link-id="userCreateInteractionLink"
+    edit-interaction-link-id="userEditInteractionLink"
+    :data-name="$t('workbench.userList.dataName')"
+    :data-article="$t('workbench.userList.dataArticle')"
+    :delete-validator="(user) => user._id !== $user?._id"
+    @delete="deleteUser"
+  />
+</template>
+
+<script setup lang="ts">
+import { usePluginApi } from "@raclettejs/core/orchestrator/composables"
+import { computed } from "vue"
+import type { User } from "@raclettejs/core"
+import { formatDistance } from "date-fns"
+import { useI18n } from "vue-i18n"
+import BaseDataTable from "@app/components/BaseDataTable.vue"
+
+const props = defineProps<{
+  uuid: string
+}>()
+
+const { t } = useI18n()
+
+const headers = computed<{ title: string; key: keyof User }[]>(() => [
+  {
+    title: t("workbench.userList.tableHeaders.email"),
+    key: "email",
+  },
+  {
+    title: t("workbench.userList.tableHeaders.lastname"),
+    key: "lastname",
+  },
+  {
+    title: t("workbench.userList.tableHeaders.firstname"),
+    key: "firstname",
+  },
+  {
+    title: t("workbench.userList.tableHeaders.tags"),
+    key: "tags",
+  },
+  {
+    title: t("workbench.userList.tableHeaders.updatedAt"),
+    key: "updatedAt",
+  },
+])
+
+const { $data, $socket, $user } = usePluginApi("raclette__core")
+
+const {
+  data: users,
+  execute,
+  isLoading: usersLoading,
+} = $data.user.getAll({
+  options: { immediate: true },
+})
+
+const { data: tags, isLoading: tagsLoading } = $data.tag.getAll({
+  options: { immediate: true },
+})
+
+const { execute: executeDelete } = $data.user.delete({
+  options: { cb: () => execute() },
+})
+
+const parsedUsers = computed(() => {
+  if (users.value && tags.value) {
+    return Object.values(users.value as { [key: string]: User }).map(
+      (user) => ({
+        ...user,
+        tags: user.tags.map((tag) => tags.value?.[tag]),
+        updatedAt: formatDistance(new Date(user.updatedAt), new Date()),
+      }),
+    )
+  }
+  return []
+})
+
+const deleteUser = async (user: User) => await executeDelete({ _id: user._id })
+
+$socket.on("userCreated", () => execute())
+</script>

package/plugins/pacifico__users/raclette.plugin.ts

@@ -0,0 +1,8 @@
+export default {
+  name: "users",
+  author: "pacifico",
+  version: "0.0.1",
+  description: "A plugin for users",
+  // Specify where the main frontend and backend entry points are
+  frontendDir: "./frontend",
+}

package/raclette.config.js

@@ -0,0 +1,150 @@
+import { defineRacletteConfig } from "@raclettejs/core"
+import compositions from "./config/compositions.js"
+import interactionLinks from "./config/interactionLinks.js"
+
+export default defineRacletteConfig({
+  name: "raclette-workbench",
+
+  // Configure services
+  services: {
+    frontend: {
+      enabled: true,
+      port: 8083,
+      volumes: [
+        {
+          source:
+            process.env.RACLETTE_APP_PATH + "/plugins" || "../../../plugins",
+          target: "/app/external-app-plugins",
+          mustExist: true,
+        },
+        {
+          source:
+            process.env.RACLETTE_APP_PATH + "/workbench/plugins" ||
+            "../../../workbench/plugins",
+          target: "/app/src/workbenchPlugins",
+          mustExist: true,
+        },
+      ],
+    },
+    backend: {
+      enabled: true,
+      port: 8084,
+      volumes: [
+        {
+          source:
+            process.env.RACLETTE_APP_PATH + "/workbench/plugins" ||
+            "../../../workbench/plugins",
+          target: "/app/src/workbenchPlugins",
+          mustExist: true,
+        },
+      ],
+    },
+    mongodb: {
+      name: "raclette-mongodb",
+      enabled: true,
+      port: 27017,
+      volume: "raclette-mongodb",
+      databaseName: "raclette",
+    },
+    cache: {
+      name: "raclette-cache",
+      volume: "raclette-cache",
+      enabled: true,
+      port: 6379,
+      db: 1,
+    },
+  },
+
+  // Environment-specific configuration
+  env: {
+    development: {
+      RACLETTE_DEBUG_MODE: true,
+    },
+    production: {},
+  },
+  global: {
+    authTokenExpiryDays: 1,
+  },
+  frontend: {
+    meta: {
+      title: "Workbench",
+    },
+    preventNotifications: {
+      checkToken: {
+        status: 500,
+      },
+    },
+    i18n: {
+      locales: ["en-EU"],
+      priorities: {
+        "app-workbench": 5, // this is explicit i18n coming from the app ONLY for the workbench
+        "app-app": 7, // this is the app i18n which we additionally mount to the workbench
+        app: 10, // this is the i18n of the workbench
+        ".": 30, // this is raclette core (always)
+      },
+    },
+    framework: "vue", // this should be set by the orchestrator later
+  },
+  backend: {
+    additionalPluginPaths: ["/app/src/workbenchPlugins"],
+    onlyAllowLoginWithAdminTag: true,
+    sockets: {
+      autoSend: {
+        compositions: false,
+        interactionLinks: false,
+        customData: {
+          compositions,
+          interactionLinks,
+        },
+      },
+      security: {
+        requireAuth: true,
+        tokenValidation: "jwt",
+      },
+    },
+  },
+  sourceDirectories: [
+    // we allow to mount the app's shared dir also in the workbench, but with lower priority
+    {
+      name: "external-app-shared",
+      path: process.env.RACLETTE_APP_PATH + "/shared" || "../../../shared",
+      priority: 15, // Between workbench (10) and core (30)
+      folderMappings: {
+        ".": "backend/src/shared/app", // Mount external shared to /app subfolder
+      },
+    },
+    {
+      name: "external-app-workbench-i18n",
+      path: process.env.RACLETTE_APP_PATH || "../../..",
+      priority: 9, // run after the default "app" copying
+      folderMappings: {
+        "./i18n": "frontend/src/orchestrator/i18n/app-app", // Mount  app i18n to /app-app subfolder
+        "./workbench/i18n": "frontend/src/orchestrator/i18n/app-workbench", // Mount app external workbench-i18n to /app-workbench subfolder
+      },
+    },
+  ],
+  packageMerging: {
+    frontend: [
+      { file: "./packages.json", key: "frontend" },
+      {
+        file: process.env.RACLETTE_APP_PATH + "/packages.json",
+        key: "workbench.frontend",
+      },
+    ],
+    backend: [
+      { file: "./packages.json", key: "backend" },
+      {
+        file: process.env.RACLETTE_APP_PATH + "/packages.json",
+        key: "workbench.backend",
+      },
+    ],
+  },
+  lockFiles: {
+    frontend: process.env.RACLETTE_APP_PATH + "/workbench.frontend.yarn.lock",
+    backend: process.env.RACLETTE_APP_PATH + "/workbench.backend.yarn.lock",
+  },
+
+  eslint: {
+    useRecommended: true,
+  },
+})