@raclettejs/workbench 0.1.32 → 0.1.33-canary.0

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

@@ -1,303 +0,0 @@
-<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"
-      :class="{ itemsDeleted }"
-    >
-      <template
-        #item.color="{ item }"
-        v-if="!customSlots.includes('item.color')"
-      >
-        <div class="tw:flex tw:gap-2" v-if="item.color?.length">
-          <v-chip :color="item.color" label variant="outlined" size="small">
-            {{ item.color }}
-          </v-chip>
-        </div>
-      </template>
-      <!-- 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="prepend-row-actions" :item="item"> </slot>
-        <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>
-        <slot name="append-row-actions" :item="item"> </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>
-
-    <!-- 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" />
-  </div>
-</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
-  itemsDeleted?: 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: () => [],
-  itemsDeleted: false,
-  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>
-<style lang="css">
-.itemsDeleted .v-data-table__tr {
-  background-color: rgb(233, 190, 190);
-  color: #000;
-}
-</style>

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

@@ -1,98 +0,0 @@
-<template>
-  <v-file-input
-    v-model="files"
-    :accept="accept"
-    ref="fileInput"
-    hide-input
-    flat
-    prepend-icon="mdi-database-import"
-    @update:model-value="handleFileChange"
-  >
-  </v-file-input>
-</template>
-
-<script setup lang="ts">
-import { ref, useTemplateRef } from "vue"
-const fileInput = useTemplateRef("fileInput")
-const props = defineProps({
-  /**
-   * Function to call when file content is loaded.
-   * Receives: (content: string | ArrayBuffer, file: File)
-   */
-  onFileLoaded: {
-    type: Function,
-    required: true,
-  },
-
-  /**
-   * Optional: accept only certain file types
-   */
-  accept: {
-    type: String,
-    default: "*/*",
-  },
-
-  /**
-   * How to read the file: "text" or "arrayBuffer"
-   */
-  readAs: {
-    type: String,
-    default: "text",
-    validator: (v: string) => ["text", "arrayBuffer"].includes(v),
-  },
-})
-
-const files = ref<File[]>([])
-const trigger = () => {
-  fileInput.value?.click()
-}
-const handleFileChange = (newFile: File | null) => {
-  console.log("File change triggered:", newFile)
-  console.log(files.value)
-
-  if (!newFile) {
-    console.log("No file selected")
-    return
-  }
-
-  const selectedFile = newFile
-  if (!selectedFile) {
-    console.log("Selected file is null")
-    return
-  }
-
-  console.log(
-    "Reading file:",
-    selectedFile.name,
-    selectedFile.type,
-    selectedFile.size,
-  )
-
-  const reader = new FileReader()
-
-  reader.onload = () => {
-    console.log(
-      "File loaded successfully, length:",
-      (reader.result as string)?.length,
-    )
-    // Pass content first, then file
-    props.onFileLoaded(reader.result, selectedFile)
-  }
-
-  reader.onerror = () => {
-    console.error("Error reading file:", reader.error)
-  }
-
-  reader.onprogress = (e) => {
-    console.log("Reading progress:", e.loaded, "/", e.total)
-  }
-
-  // Read the file from the parameter, not from refs
-  if (props.readAs === "arrayBuffer") {
-    reader.readAsArrayBuffer(selectedFile)
-  } else {
-    reader.readAsText(selectedFile)
-  }
-}
-defineExpose({ trigger })
-</script>

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

@@ -1,182 +0,0 @@
-<template>
-  <!-- Dialog overlay -->
-  <div
-    v-if="dialog"
-    class="tw:fixed tw:inset-0 tw:flex tw:items-center tw:justify-center tw:bg-black/50 tw:z-50"
-  >
-    <!-- Dialog panel -->
-    <div
-      class="tw:bg-white tw:rounded-lg tw:shadow-xl tw:max-w-xl tw:w-full tw:overflow-auto"
-    >
-      <!-- Title bar -->
-      <div
-        class="tw:flex tw:justify-between tw:items-center tw:px-4 tw:py-3 tw:border-b tw:border-gray-200"
-      >
-        <span class="tw:text-lg tw:font-semibold">{{ title }}</span>
-
-        <button
-          @click="close"
-          class="tw:text-gray-500 hover:tw:text-gray-700 tw:p-1 tw:rounded tw:hover:bg-gray-100"
-        >
-          <i class="mdi mdi-close tw:text-xl"></i>
-        </button>
-      </div>
-
-      <!-- Content -->
-      <div class="tw:px-4 tw:py-4">
-        <!-- Header row -->
-        <div class="tw:flex tw:justify-between tw:items-center tw:mb-4">
-          <!-- Select all -->
-          <label class="tw:flex tw:items-center tw:space-x-2 tw:cursor-pointer">
-            <input
-              type="checkbox"
-              v-model="selectAll"
-              @change="toggleSelectAll"
-              class="tw:w-4 tw:h-4 tw:rounded tw:border-gray-300 tw:text-primary tw:focus:ring-primary"
-            />
-            <span class="tw:text-sm tw:text-gray-700">
-              {{ $t("core.selectAll") }}
-            </span>
-          </label>
-
-          <!-- Chip -->
-          <div
-            class="tw:px-3 tw:py-1 tw:bg-primary tw:text-white tw:rounded-full tw:text-sm tw:font-medium"
-          >
-            {{ selectedCount }} / {{ items.length }} {{ $t("core.selected") }}
-          </div>
-        </div>
-
-        <!-- List -->
-        <ul class="tw:max-h-96 tw:overflow-y-auto tw:space-y-1">
-          <li
-            v-for="item in items"
-            :key="item._id"
-            @click="toggleSelection(item._id)"
-            class="tw:flex tw:items-center tw:space-x-3 tw:p-2 tw:rounded tw:cursor-pointer hover:tw:bg-gray-50"
-          >
-            <!-- Checkbox -->
-            <input
-              type="checkbox"
-              :checked="selected.includes(item._id)"
-              @click.stop="toggleSelection(item._id)"
-              class="tw:w-4 tw:h-4 tw:rounded tw:border-gray-300 tw:text-primary tw:focus:ring-primary"
-            />
-
-            <!-- Label -->
-            <span class="tw:text-sm tw:text-gray-800">
-              {{ getDisplayValue(item) }}
-            </span>
-          </li>
-        </ul>
-
-        <!-- Warning for no selection -->
-        <div
-          v-if="selectedCount === 0"
-          class="tw:mt-4 tw:bg-yellow-50 tw:text-yellow-700 tw:p-3 tw:rounded tw:text-sm"
-        >
-          {{ $t("core.noItemsSelected") }}
-        </div>
-      </div>
-
-      <!-- Actions -->
-      <div
-        class="tw:flex tw:justify-end tw:space-x-2 tw:px-4 tw:py-3 tw:border-t tw:border-gray-200"
-      >
-        <button
-          @click="close"
-          class="tw:px-4 tw:py-2 tw:text-sm tw:text-gray-700 tw:rounded"
-        >
-          {{ $t("core.cancel") }}
-        </button>
-
-        <button
-          v-if="selectedCount"
-          @click="confirm"
-          :disabled="selectedCount === 0"
-          class="tw:px-4 tw:py-2 tw:text-sm tw:rounded tw:text-gray-700 tw:bg-primary"
-        >
-          {{ confirmText }}
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch } from "vue"
-
-interface Props {
-  modelValue: boolean
-  items: any[]
-  displayAttribute: string
-  title: string
-  confirmText: string
-}
-
-const props = defineProps<Props>()
-
-const emit = defineEmits<{
-  "update:modelValue": [value: boolean]
-  confirm: [selectedIds: string[]]
-}>()
-
-const dialog = computed({
-  get: () => props.modelValue,
-  set: (value) => emit("update:modelValue", value),
-})
-
-const selected = ref<string[]>([])
-const selectAll = ref(false)
-
-const selectedCount = computed(() => selected.value.length)
-
-const getDisplayValue = (item: any) => {
-  return item[props.displayAttribute] || item._id
-}
-
-const toggleSelection = (id: string) => {
-  const index = selected.value.indexOf(id)
-  if (index > -1) {
-    selected.value.splice(index, 1)
-  } else {
-    selected.value.push(id)
-  }
-  updateSelectAllState()
-}
-
-const toggleSelectAll = (value: boolean) => {
-  if (value) {
-    selected.value = props.items.map((item) => item._id)
-  } else {
-    selected.value = []
-  }
-}
-
-const updateSelectAllState = () => {
-  selectAll.value =
-    selected.value.length === props.items.length && props.items.length > 0
-}
-
-const close = () => {
-  dialog.value = false
-  selected.value = []
-  selectAll.value = false
-}
-
-const confirm = () => {
-  if (selectedCount.value > 0) {
-    emit("confirm", selected.value)
-    close()
-  }
-}
-
-// Initialize selectAll state when items change
-watch(
-  () => props.items,
-  () => {
-    updateSelectAllState()
-  },
-  { immediate: true },
-)
-</script>