@raclettejs/workbench 0.0.1

package/services/frontend/src/app/components/BaseDataTable.vue

@@ -0,0 +1,284 @@
+<template>
+  <div>
+    <!-- Search and Actions Bar -->
+    <div class="tw:flex tw:gap-2 tw:items-center tw:mb-6">
+      <v-text-field
+        v-model="search"
+        variant="outlined"
+        hide-details
+        prepend-inner-icon="mdi-magnify"
+        clearable
+        :placeholder="
+          $t('workbench.baseDataTable.searchPlaceholder', {
+            dataName,
+          })
+        "
+        density="compact"
+      />
+
+      <AppButton
+        v-if="showCreateButton"
+        @click="handleCreate"
+        variant="secondary"
+        class="!tw:h-10"
+      >
+        <template #prepend-icon>
+          <v-icon icon="mdi-plus-circle-outline" />
+        </template>
+        {{
+          $t("workbench.baseDataTable.createDataButton", {
+            dataName,
+          })
+        }}
+      </AppButton>
+
+      <!-- Additional action buttons slot -->
+      <slot name="actions" />
+    </div>
+
+    <!-- Data Table -->
+    <v-data-table
+      v-model:search="search"
+      density="comfortable"
+      :items-per-page="itemsPerPage"
+      sticky
+      fixed-header
+      :headers="computedHeaders"
+      :items="items"
+      :loading="loading"
+      @click:row="handleRowClick"
+    >
+      <!-- Built-in tags column -->
+      <template #item.tags="{ item }" v-if="!customSlots.includes('item.tags')">
+        <div class="tw:flex tw:gap-2" v-if="item.tags?.length">
+          <v-chip
+            v-for="tag in item.tags"
+            :key="tag._id || tag.id || tag"
+            :color="tag.color"
+            label
+            variant="outlined"
+            size="small"
+          >
+            {{ tag.title || tag.name || tag }}
+          </v-chip>
+        </div>
+      </template>
+
+      <!-- Dynamic slots for custom column rendering -->
+      <template v-for="slot in customSlots" :key="slot" #[slot]="slotProps">
+        <slot :name="slot" v-bind="slotProps" />
+      </template>
+
+      <!-- Actions column template -->
+      <template #item.actions="{ item }" v-if="showActionsColumn">
+        <slot name="row-actions" :item="item">
+          <!-- Default delete action -->
+          <v-icon
+            v-if="showDeleteAction && !isDeleteDisabled(item)"
+            color="red"
+            @click.stop.prevent="handleDelete(item)"
+            class="mr-2"
+            :title="
+              $t('workbench.baseDataTable.deleteDataTitle', {
+                dataName,
+              })
+            "
+            icon="mdi-delete"
+          />
+        </slot>
+      </template>
+
+      <!-- Loading template -->
+      <template #loader>
+        <v-skeleton-loader
+          class="mx-auto border"
+          :height="500"
+          width="100%"
+          type="list-item"
+          :loading="true"
+        />
+      </template>
+
+      <!-- Additional table slots (this caused the table to be empty) -->
+      <!-- <slot name="table-slots" /> -->
+    </v-data-table>
+  </div>
+
+  <!-- Delete Confirmation Dialog -->
+  <v-dialog
+    v-model="deleteDialog"
+    max-width="400"
+    v-if="showDeleteAction && itemToDelete"
+  >
+    <v-card>
+      <v-card-title class="text-h6">
+        {{
+          $t("workbench.baseDataTable.deleteDataTitle", {
+            dataName,
+          })
+        }}
+      </v-card-title>
+
+      <v-card-text
+        v-html="
+          $t('workbench.baseDataTable.deleteDataConfirmMessage', {
+            article: dataArticle,
+            dataName,
+            value:
+              itemToDelete.email ||
+              itemToDelete.title ||
+              itemToDelete.name ||
+              itemToDelete._id,
+          })
+        "
+      />
+      <v-card-actions>
+        <v-spacer />
+        <v-btn variant="text" @click="deleteDialog = false">
+          {{ $t("workbench.baseDataTable.deleteDataConfirmCancel") }}
+        </v-btn>
+        <v-btn color="red" variant="flat" @click="confirmDelete">
+          {{ $t("workbench.baseDataTable.deleteDataConfirmButton") }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
+  <!-- Additional dialogs slot -->
+  <slot name="dialogs" />
+</template>
+
+<script setup lang="ts" generic="T extends Record<string, any>">
+import { computed, ref, useSlots } from "vue"
+import { useRouteState } from "@raclettejs/core/orchestrator/composables"
+import AppButton from "../../orchestrator/components/layout/AppButton.vue"
+
+export interface BaseDataTableProps<T> {
+  uuid?: string
+  // Data props
+  items?: T[]
+  loading?: boolean
+
+  // Table configuration
+  headers: Array<{
+    title: string
+    key: keyof T | string
+    align?: "start" | "center" | "end"
+    sortable?: boolean
+    width?: string | number
+  }>
+  itemsPerPage?: number
+
+  // Create button
+  showCreateButton?: boolean
+  createInteractionLinkId?: string
+
+  // Row actions
+  showActionsColumn?: boolean
+  showDeleteAction?: boolean
+
+  // Navigation
+  editInteractionLinkId?: string
+
+  // Item processing
+  deleteValidator?: (item: T) => boolean
+  rowClickHandler?: (item: T) => void
+
+  dataName: string
+  dataArticle: string
+}
+
+const props = withDefaults(defineProps<BaseDataTableProps<T>>(), {
+  uuid: undefined,
+  items: () => [],
+  itemsPerPage: 50,
+  showCreateButton: true,
+  showActionsColumn: true,
+  showDeleteAction: true,
+})
+
+const emit = defineEmits<{
+  create: []
+  edit: [item: T]
+  delete: [item: T]
+  rowClick: [item: T]
+}>()
+
+const slots = useSlots()
+const { triggerInteractionLinkById } = useRouteState()
+
+// Reactive data
+const search = ref("")
+const deleteDialog = ref(false)
+const itemToDelete = ref<T | null>(null)
+
+const computedHeaders = computed(() => {
+  if (!props.headers || !props.headers?.length) {
+    return null
+  }
+
+  const headers = [...props.headers]
+
+  // Add actions column if needed
+  if (props.showActionsColumn) {
+    headers.push({
+      title: "Actions",
+      key: "actions",
+      align: "end" as const,
+      sortable: false,
+    })
+  }
+
+  return headers
+})
+
+const customSlots = computed(() => {
+  return Object.keys(slots).filter(
+    (slot) => slot.startsWith("item.") && slot !== "item.actions",
+  )
+})
+
+// Methods
+const handleCreate = () => {
+  if (props.createInteractionLinkId) {
+    triggerInteractionLinkById(props.createInteractionLinkId)
+  }
+  emit("create")
+}
+
+const handleRowClick = (_: PointerEvent, row: { item: T }) => {
+  if (props.rowClickHandler) {
+    props.rowClickHandler(row.item)
+    return
+  }
+
+  if (props.editInteractionLinkId) {
+    const item = row.item as any
+
+    triggerInteractionLinkById(props.editInteractionLinkId, {
+      id: item._id,
+    })
+  }
+
+  emit("edit", row.item)
+  emit("rowClick", row.item)
+}
+
+const handleDelete = (item: T) => {
+  itemToDelete.value = item
+  deleteDialog.value = true
+}
+
+const confirmDelete = () => {
+  if (itemToDelete.value) {
+    emit("delete", itemToDelete.value)
+  }
+
+  itemToDelete.value = null
+  deleteDialog.value = false
+}
+
+const isDeleteDisabled = (item: T): boolean => {
+  return props.deleteValidator ? !props.deleteValidator(item) : false
+}
+</script>

package/services/frontend/src/app/components/dynamicForm/DynamicForm.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="tw:p-6" :class="{ 'tw:max-w-6xl': !fluid }">
+    <div v-if="title" class="tw:mb-6 tw:flex tw:gap-1 tw:items-center">
+      <v-btn
+        v-if="routeBackInteractionLinkId"
+        @click="navigateBack"
+        density="comfortable"
+        icon="mdi-chevron-left"
+        flat
+      />
+      <h1 v-if="title" class="tw:text-2xl tw:font-bold">
+        {{ title }}
+      </h1>
+    </div>
+
+    <!-- body -->
+    <div class="tw:grid tw:gap-6">
+      <template v-for="(value, key) in props.data" :key="key">
+        <TextDivider v-if="'divider' in value" :label="value.divider" />
+
+        <DynamicInput
+          v-else
+          v-model="modelProxy[value.field]"
+          :input-type="value.inputType"
+          :value="value"
+          :disabled="!!disabled"
+          :error-message="getValidationError(value)"
+          @validate="validateField(value)"
+        />
+      </template>
+    </div>
+
+    <!-- button area -->
+    <slot name="button-area-override">
+      <div
+        class="tw:mt-8 tw:flex tw:gap-4 tw:justify-end"
+        v-if="$slots?.['button-area']"
+      >
+        <slot name="button-area" v-bind="{ isValid, validateAllFields }" />
+        <!-- <v-btn color="primary" variant="outlined"> Validate Form </v-btn>
+        <v-btn color="secondary" variant="outlined"> Reset Form </v-btn>
+        <v-btn color="info" variant="outlined"> Show Form Data </v-btn> -->
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts" generic="T">
+import { computed, ref, watch, watchEffect } from "vue"
+import DynamicInput from "./DynamicInput.vue"
+import TextDivider from "./TextDivider.vue"
+import { DynamicFormItem, DynamicFormField } from "./DynamicFormTypes"
+import { useI18n } from "vue-i18n"
+import { useRouteState } from "@raclettejs/core/orchestrator/composables"
+
+const props = defineProps<{
+  title?: string
+  data: DynamicFormItem<T>[]
+  modelValue: T
+  disabled?: Boolean
+  validateOnChange?: boolean
+  fluid?: boolean
+  routeBackInteractionLinkId?: string
+}>()
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: T): void
+  (e: "validation-change", isValid: boolean): void
+}>()
+
+const { t } = useI18n()
+const { triggerInteractionLinkById } = useRouteState()
+
+const validationErrors = ref<Record<string, string>>({})
+
+const isValid = computed(() => Object.keys(validationErrors.value).length === 0)
+
+const modelProxy = computed({
+  get: () => props.modelValue,
+  set: (value: T) => emit("update:modelValue", value),
+})
+
+const validateValue = (
+  field: DynamicFormField<T>,
+  value: any,
+): string | null => {
+  const validation = field.validation
+
+  if (!validation) {
+    return null
+  }
+
+  const { required, minLength, maxLength, pattern, customValidator } =
+    validation
+
+  // Required validation
+  if (required) {
+    if (
+      value === null ||
+      value === undefined ||
+      value === "" ||
+      (Array.isArray(value) && value.length === 0) ||
+      (typeof value === "object" && Object.keys(value).length === 0)
+    ) {
+      return t("workbench.dynamicInputs.validation.required", {
+        field: field.title,
+      })
+    }
+  }
+
+  // Skip other validations if value is empty and not required
+  if (!required && (!value || value === "")) {
+    return null
+  }
+
+  // Min length validation
+  if (minLength && typeof value === "string" && value.length < minLength) {
+    return t("workbench.dynamicInputs.validation.minLength", {
+      field: field.title,
+      minLength,
+    })
+  }
+
+  // Max length validation
+  if (maxLength && typeof value === "string" && value.length > maxLength) {
+    return t("workbench.dynamicInputs.validation.maxLength", {
+      field: field.title,
+      maxLength,
+    })
+  }
+
+  // Pattern validation
+  if (pattern && typeof value === "string" && !pattern.test(value)) {
+    return t("workbench.dynamicInputs.validation.invalidFormat", {
+      field: field.title,
+    })
+  }
+
+  if (required && field.inputType === "localized") {
+    if (!value.default) {
+      return t("workbench.dynamicInputs.validation.defaultValueRequired")
+    }
+  }
+
+  // Custom validator
+  if (customValidator) {
+    return t(customValidator(value) || "")
+  }
+
+  return null
+}
+
+// Validate a single field
+const validateField = (field: DynamicFormField<T>) => {
+  const value = props.modelValue[field.field]
+  const error = validateValue(field, value)
+
+  if (error) {
+    validationErrors.value[field.field as string] = error
+  } else {
+    delete validationErrors.value[field.field as string]
+  }
+
+  // Emit validation status
+  emit("validation-change", Object.keys(validationErrors.value).length === 0)
+}
+
+// Get validation error for a field
+const getValidationError = (field: DynamicFormField<T>): string | undefined => {
+  return validationErrors.value[field.field as string]
+}
+
+// Validate all fields
+const validateAllFields = () => {
+  props.data.forEach((item) => {
+    if ("field" in item) {
+      validateField(item)
+    }
+  })
+
+  return isValid.value
+}
+
+const navigateBack = () => {
+  if (props.routeBackInteractionLinkId) {
+    triggerInteractionLinkById(props.routeBackInteractionLinkId)
+  }
+}
+
+watch(
+  () => props.modelValue,
+  () => {
+    if (props.validateOnChange) {
+      validateAllFields()
+    }
+  },
+  { deep: true },
+)
+
+watchEffect(() => emit("validation-change", isValid.value))
+
+defineExpose({
+  validateAllFields,
+  isValid,
+  errors: computed(() => validationErrors.value),
+})
+</script>

package/services/frontend/src/app/components/dynamicForm/DynamicFormTypes.ts

@@ -0,0 +1,63 @@
+import type { MdiIcon } from "./typedInputs/mdi-icons"
+
+export type DynamicInputType =
+  | "permissions"
+  | "tags"
+  | "localized"
+  | "composition"
+  | "triggers"
+  | "record"
+  | "list"
+  | "text"
+  | "textarea"
+  | "number"
+  | "checkbox"
+  | "switch"
+  | "select"
+  | "multiselect"
+  | "password"
+  | "color"
+  | "user"
+
+interface DynamicFormItemBase<T> {
+  title: string
+  description?: string
+  inputType: DynamicInputType
+  field: keyof T
+}
+
+export interface InputAttributes {
+  prependIcon?: MdiIcon
+  prependInnerIcon?: MdiIcon
+  appendIcon?: MdiIcon
+  appendInnerIcon?: MdiIcon
+  prefix?: string
+  suffix?: string
+  // click handlers
+  onClickPrepend?: (event: PointerEvent) => void
+  onClickPrependInner?: (event: PointerEvent) => void
+  onClickAppend?: (event: PointerEvent) => void
+  onClickAppendInner?: (event: PointerEvent) => void
+}
+
+interface SelectionProps {
+  selectItems?: string[]
+}
+
+export interface ValidationProps {
+  required?: boolean
+  minLength?: number
+  maxLength?: number
+  pattern?: RegExp
+  customValidator?: (value: any) => string | null // return error message or null if valid
+}
+
+export interface DynamicFormDivider {
+  divider: string
+}
+
+export type DynamicFormField<T> = DynamicFormItemBase<T> &
+  InputAttributes &
+  SelectionProps & { validation?: ValidationProps }
+
+export type DynamicFormItem<T> = DynamicFormField<T> | DynamicFormDivider