@raclettejs/workbench 0.0.1

package/services/frontend/src/app/components/dynamicForm/typedInputs/LocalizedInput.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="tw:grid tw:gap-2">
+    <v-text-field
+      :id="inputId"
+      v-bind="$attrs"
+      v-model="modelValue.default"
+      variant="outlined"
+      append-inner-icon="mdi-web"
+      @click:append-inner="showLocalizedInputs = !showLocalizedInputs"
+      :label="title"
+    />
+
+    <template v-if="showLocalizedInputs" v-for="(_, key) in modelValue">
+      <v-text-field
+        v-if="key !== 'default'"
+        v-bind="$attrs"
+        :key="key"
+        :id="`${inputId}-${key}`"
+        v-model="modelValue[key]"
+        variant="outlined"
+        hide-details
+      >
+        <template #prepend-inner>
+          <v-chip text-color="black" size="small" class="ma-0 mr-2" label>
+            {{ key.toUpperCase() }}
+          </v-chip>
+        </template>
+      </v-text-field>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps<{
+  inputId: string
+  title?: string
+}>()
+
+const modelValue = defineModel<Record<string, string>>({
+  required: true,
+  default: { default: "", de: "", en: "" },
+})
+
+const showLocalizedInputs = ref(false)
+</script>

package/services/frontend/src/app/components/dynamicForm/typedInputs/PasswordInput.vue

@@ -0,0 +1,23 @@
+<template>
+  <v-text-field
+    :id="inputId"
+    v-model="modelValue"
+    :type="showPasswordText ? 'text' : 'password'"
+    variant="outlined"
+    hide-details
+    :append-inner-icon="showPasswordText ? 'mdi-eye' : 'mdi-eye-off'"
+    @click:append-inner="showPasswordText = !showPasswordText"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+
+defineProps<{
+  inputId?: string
+}>()
+
+const modelValue = defineModel<string>({ required: true })
+
+const showPasswordText = ref(false)
+</script>

package/services/frontend/src/app/components/dynamicForm/typedInputs/RecordInput.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="tw:grid tw:gap-2">
+    <div
+      v-for="(entry, index) in entries"
+      :key="index"
+      class="tw:grid tw:grid-cols-12 tw:gap-2"
+    >
+      <v-text-field
+        :model-value="entry.key"
+        @update:model-value="entry.key = $event"
+        @blur="emitEntries"
+        label="Key"
+        class="tw:col-span-5"
+        hide-details
+        variant="outlined"
+      />
+
+      <v-text-field
+        :model-value="entry.value"
+        @update:model-value="entry.value = $event"
+        @blur="emitEntries"
+        label="Value"
+        class="tw:col-span-6"
+        hide-details
+        variant="outlined"
+      />
+      <v-btn
+        icon="mdi-minus"
+        color="red"
+        class="tw:col-span-1"
+        @click="remove(index)"
+      />
+    </div>
+
+    <v-btn
+      icon="mdi-plus"
+      color="green"
+      @click="add"
+      :disabled="hasEmptyKeyEntry"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue"
+import { equals } from "ramda"
+
+const modelValue = defineModel<Record<string, string>>({ required: true })
+
+// internal list of the record
+const entries = ref<{ key: string; value: string }[]>([])
+
+const hasEmptyKeyEntry = computed(() =>
+  entries.value.some((entry) => entry.key.trim() === ""),
+)
+
+const emitEntries = () => {
+  const obj: Record<string, string> = {}
+  for (const entry of entries.value) {
+    if (entry.key) {
+      obj[entry.key] = entry.value
+    }
+  }
+  modelValue.value = obj
+}
+
+const add = () => {
+  entries.value.push({ key: "", value: "" })
+}
+
+const remove = (index: number) => {
+  entries.value.splice(index, 1)
+}
+
+// synchronize local clone of the modelValue
+watch(
+  () => modelValue.value,
+  (newVal, oldVal) => {
+    if (!equals(newVal, oldVal)) {
+      entries.value = Object.entries(newVal ?? {}).map(([key, value]) => ({
+        key,
+        value,
+      }))
+    }
+    if (entries.value.length === 0) {
+      entries.value = [{ key: "", value: "" }]
+    }
+  },
+  { immediate: true },
+)
+</script>

package/services/frontend/src/app/components/dynamicForm/typedInputs/SwitchInput.vue

@@ -0,0 +1,17 @@
+<template>
+  <v-switch
+    v-model="modelValue"
+    :id="inputId"
+    variant="outlined"
+    hide-details
+    color="primary"
+  />
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  inputId: string
+}>()
+
+const modelValue = defineModel<boolean>({ default: false })
+</script>

package/services/frontend/src/app/components/dynamicForm/typedInputs/TagsInput.vue

@@ -0,0 +1,58 @@
+<template>
+  <v-autocomplete
+    v-model="modelValue"
+    v-bind="$attrs"
+    :id="inputId"
+    :items="tags"
+    :loading="query.loading"
+    :disabled="query.loading"
+    item-value="_id"
+    item-title="title"
+    multiple
+    variant="outlined"
+    chips
+  >
+    <template #chip="{ item }">
+      <v-chip
+        :color="item.raw.color"
+        label
+        variant="outlined"
+        closable
+        @click:close="removeItem(item.value)"
+      >
+        {{ item.title }}
+      </v-chip>
+    </template>
+
+    <template #item="{ props, item }">
+      <v-list-item v-bind="props" title="">
+        <v-chip :color="item.raw.color" label variant="outlined" size="small">
+          {{ item.title }}
+        </v-chip>
+      </v-list-item>
+    </template>
+  </v-autocomplete>
+</template>
+
+<script setup lang="ts">
+import { usePluginApi } from "@raclettejs/core/orchestrator/composables"
+import { computed } from "vue"
+
+defineProps<{
+  inputId: string
+}>()
+
+const modelValue = defineModel<string[]>({ required: true })
+
+const { $data } = usePluginApi("raclette__core")
+
+const { data, query } = $data.tag.getAll({
+  options: { immediate: true },
+})
+
+const tags = computed(() => Object.values(data.value || {}))
+
+const removeItem = (id: string) => {
+  modelValue.value = modelValue.value.filter((val) => val !== id)
+}
+</script>

package/services/frontend/src/app/components/dynamicForm/typedInputs/TriggerInput.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="tw:grid tw:gap-2">
+    <!-- existing triggers -->
+    <div
+      class="tw:py-2 tw:border-solid tw:rounded"
+      v-for="(trigger, index) in modelValue"
+      :key="index"
+    >
+      <v-select
+        v-model="trigger.type"
+        v-bind="$attrs"
+        :items="triggerTypes"
+        variant="outlined"
+        hide-details
+        class="tw:flex-1"
+        append-icon="mdi-minus"
+        @update:model-value="updateTriggerType($event, index)"
+        @click:append="modelValue.splice(index, 1)"
+        :label="$t('workbench.dynamicInputs.triggers.triggerTypeLabel')"
+        :disabled="true"
+      />
+
+      <div class="tw:grid tw:gap-2 tw:p-2">
+        <template
+          v-if="
+            ['top-navigation', 'page-navigation', 'user-menu'].includes(
+              trigger.type,
+            )
+          "
+        >
+          <IconInput v-model="trigger.settings.icon" v-bind="$attrs" />
+
+          <LocalizedInput
+            v-model="trigger.settings.title"
+            v-bind="$attrs"
+            :input-id="`title-${index}`"
+            :title="$t('workbench.dynamicInputs.triggers.titleLabel')"
+          />
+
+          <v-number-input
+            v-model="trigger.settings.sortOrder"
+            v-bind="$attrs"
+            variant="outlined"
+            control-variant="default"
+            :label="$t('workbench.dynamicInputs.triggers.sortOrderLabel')"
+            hide-details
+            :min="0"
+          />
+          <v-select
+            v-if="trigger.type === 'page-navigation'"
+            v-bind="$attrs"
+            v-model="trigger.settings.navigationBarType"
+            :items="pageNavigationTypes"
+            variant="outlined"
+            hide-details
+            class="tw:flex-1"
+            :label="
+              $t('workbench.dynamicInputs.triggers.navigationBarTypeLabel')
+            "
+          />
+        </template>
+
+        <template v-else-if="trigger.type === 'shortcut'">
+          <ListInput v-model="trigger.settings.shortcuts" v-bind="$attrs" />
+        </template>
+      </div>
+    </div>
+
+    <!-- new trigger -->
+    <v-select
+      v-model="virtualTrigger.type"
+      v-bind="$attrs"
+      :items="triggerTypes"
+      variant="outlined"
+      hide-details
+      class="tw:flex-1"
+      append-icon="mdi-plus"
+      :label="$t('workbench.dynamicInputs.triggers.newTriggerLabel')"
+      @update:model-value="addVirtualTrigger"
+      @click:append="addVirtualTrigger"
+      @blur="addVirtualTrigger"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import type { Trigger } from "@raclettejs/core"
+import LocalizedInput from "./LocalizedInput.vue"
+import IconInput from "./IconInput.vue"
+import ListInput from "./ListInput.vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const modelValue = defineModel<Trigger[]>({ required: true })
+
+// TODO readd "top-navigation", "shortcut" once they are implemented
+const triggerTypes = ["page-navigation", "user-menu"] as const
+const pageNavigationTypes = ["footerItem", "navItem"] as const
+const virtualTrigger = ref<Trigger>({
+  type: "",
+  settings: undefined,
+})
+
+const addVirtualTrigger = () => {
+  if (!virtualTrigger.value.type) {
+    return
+  }
+
+  modelValue.value.push({
+    type: virtualTrigger.value.type,
+    // TODO: finalize type for Trigger["type"]
+    settings: createSettingsObject(virtualTrigger.value.type),
+  })
+  virtualTrigger.value.type = ""
+}
+
+const createSettingsObject = (
+  triggerType: (typeof triggerTypes)[number] | string,
+  // TODO: finalize type Trigger["settings"]
+): Trigger["settings"] => {
+  if (
+    triggerType === "page-navigation" ||
+    triggerType === "top-navigation" ||
+    triggerType === "user-menu"
+  ) {
+    const clickLink = {
+      icon: null,
+      // TODO: create dynamic LocalizedObject
+      title: {
+        default: "",
+        de: "",
+        en: "",
+      },
+      sortOrder: 0,
+    }
+    if (triggerType === "page-navigation") {
+      clickLink.navigationBarType = "navItem"
+    }
+    return clickLink
+  }
+  if (triggerType === "shortcut") {
+    // TODO: define shortcuts and create input for it
+    return {
+      shortcuts: [],
+    }
+  }
+
+  return {}
+}
+
+// update the settings object of the updated trigger
+const updateTriggerType = (
+  triggerType: (typeof triggerTypes)[number] | string,
+  index: number,
+) => (modelValue.value[index].settings = createSettingsObject(triggerType))
+</script>

package/services/frontend/src/app/components/dynamicForm/typedInputs/UserInput.vue

@@ -0,0 +1,63 @@
+<template>
+  <v-select
+    v-if="data"
+    :id="inputId"
+    v-model="modelValue"
+    variant="outlined"
+    :items="filteredUsers"
+    :item-title="getEmail"
+    item-value="_id"
+    :label="$t('workbench.dynamicInputs.user.label')"
+  />
+</template>
+
+<script setup lang="ts">
+import { useUserHelper } from "@app/composables/useUserHelper"
+import { User } from "@raclettejs/core"
+import { usePluginApi } from "@raclettejs/core/orchestrator/composables"
+import { computed } from "vue"
+import { useI18n } from "vue-i18n"
+
+const props = defineProps<{
+  inputId?: string
+  excludedIds?: string[]
+}>()
+
+const modelValue = defineModel<string>({ required: true })
+
+const { t } = useI18n()
+const { $data } = usePluginApi("raclette__core")
+
+const { data } = $data.user.getAll({
+  options: { immediate: true },
+})
+
+const users = computed<User[]>(() => Object.values(data.value || {}))
+
+const filteredUsers = computed(() =>
+  users.value.filter((user) => {
+    const isCurrentUser = user._id === modelValue.value
+    const userIsExcluded = props.excludedIds?.includes(user._id)
+
+    return isCurrentUser || !userIsExcluded
+  }),
+)
+
+const getEmail = (user?: User) => {
+  if (user) {
+    return user.email
+  }
+
+  return t("workbench.dynamicInputs.user.placeholder")
+}
+const getUserFullName = (user?: User) => {
+  debugger
+  if (user) {
+    const { email } = useUserHelper(user)
+
+    return email.value
+  }
+
+  return t("workbench.dynamicInputs.user.placeholder")
+}
+</script>