@raclettejs/workbench 0.1.18 → 0.1.19

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

@@ -1,62 +1,142 @@
 <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"
-    :itemsDeleted="showDeleted"
-  >
-    <template #actions>
-      <v-tooltip
-        :text="showDeleted ? $t('core.hideDeleted') : $t('core.showDeleted')"
-      >
-        <template v-slot:activator="{ props }">
-          <v-btn-toggle
-            density="compact"
-            v-bind="props"
-            v-model="showDeleted"
-            mandatory
-            :color="showDeleted ? 'error' : 'success'"
-          >
-            <v-btn :value="true">
-              <v-icon>mdi-table-eye-off</v-icon>
-            </v-btn>
-            <v-btn :value="false"><v-icon>mdi-table-eye</v-icon></v-btn>
-          </v-btn-toggle>
-        </template>
-      </v-tooltip>
-    </template>
-    <template #prepend-row-actions="{ item }">
-      <v-icon
-        v-if="showDeleted"
-        color="green"
-        class="mr-2"
-        @click="restore(item._id)"
-        :title="
-          $t('workbench.baseDataTable.restoreDataTitle', {
-            dataName: item.title,
-          })
-        "
-        icon="mdi-delete-restore"
-      />
-    </template>
-  </BaseDataTable>
+  <div>
+    <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"
+      :itemsDeleted="showDeleted"
+    >
+      <template #actions>
+        <v-tooltip
+          :text="showDeleted ? $t('core.hideDeleted') : $t('core.showDeleted')"
+        >
+          <template v-slot:activator="{ props }">
+            <v-btn-toggle
+              density="compact"
+              v-bind="props"
+              v-model="showDeleted"
+              mandatory
+              :color="showDeleted ? 'error' : 'success'"
+            >
+              <v-btn :value="true">
+                <v-icon>mdi-table-eye-off</v-icon>
+              </v-btn>
+              <v-btn :value="false"><v-icon>mdi-table-eye</v-icon></v-btn>
+            </v-btn-toggle>
+          </template>
+        </v-tooltip>
+        <v-btn-group density="compact">
+          <v-tooltip :text="$t('core.export')">
+            <template v-slot:activator="{ props }">
+              <v-btn color="info" v-bind="props" flat @click="openExportDialog">
+                <v-icon>mdi-database-export</v-icon>
+              </v-btn>
+            </template>
+          </v-tooltip>
+          <v-tooltip :text="$t('core.import')">
+            <template v-slot:activator="{ props }">
+              <v-btn v-bind="props" color="warning">
+                <FileUpload
+                  ref="uploadRef"
+                  :onFileLoaded="handleFileUpload"
+                  accept=".json"
+                  readAs="text"
+              /></v-btn>
+            </template>
+          </v-tooltip>
+        </v-btn-group>
+      </template>
+      <template #prepend-row-actions="{ item }">
+        <v-icon
+          v-if="showDeleted"
+          color="green"
+          class="mr-2"
+          @click="restore(item._id)"
+          :title="
+            $t('workbench.baseDataTable.restoreDataTitle', {
+              dataName: item.title,
+            })
+          "
+          icon="mdi-delete-restore"
+        />
+      </template>
+    </BaseDataTable>
+    <!-- Export Selection Dialog -->
+    <SelectionDialog
+      v-model="showExportDialog"
+      :items="exportableItems"
+      display-attribute="title"
+      :title="$t('core.selectItemsToExport')"
+      :confirm-text="$t('core.export')"
+      @confirm="handleExportConfirm"
+    />
+
+    <!-- Import Selection Dialog -->
+    <SelectionDialog
+      v-model="showImportDialog"
+      :items="importableItems"
+      display-attribute="title"
+      :title="$t('core.selectItemsToImport')"
+      :confirm-text="$t('core.import')"
+      @confirm="handleImportConfirm"
+    />
+
+    <!-- Export Summary Dialog -->
+    <SummaryDialog
+      v-model="showExportSummary"
+      display-attribute="title"
+      :items="exportedItems"
+      :title="$t('core.exportSummary')"
+      :message="$t('core.exportSuccessMessage')"
+      type="success"
+    />
+
+    <!-- Import Summary Dialog -->
+    <SummaryDialog
+      v-model="showImportSummary"
+      display-attribute="title"
+      :items="importedItems"
+      :title="$t('core.importSummary')"
+      :message="$t('core.importSuccessMessage')"
+      type="success"
+      :show-confirm="true"
+      :confirm-text="$t('core.saveImported')"
+      @confirm="finalizeImport"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
 import { usePluginApi } from "@raclettejs/core/orchestrator/composables"
-import { computed, ref, watch } from "vue"
+import { computed, ref, watch, useTemplateRef } 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"
+import { downloadJson, mapJsonValues } from "@app/lib/jsonTools"
+import FileUpload from "@app/components/FileUpload.vue"
+import SelectionDialog from "@app/components/SelectionDialog.vue"
+import SummaryDialog from "@app/components/SummaryDialog.vue"
 const showDeleted = ref(false)
 const { t } = useI18n()
+// Dialog states
+const showExportDialog = ref(false)
+const showImportDialog = ref(false)
+const showExportSummary = ref(false)
+const showImportSummary = ref(false)
 
+// Data for dialogs
+const exportableItems = ref<any[]>([])
+const importableItems = ref<any[]>([])
+const exportedItems = ref<any[]>([])
+const importedItems = ref<any[]>([])
+const pendingImportData = ref<any>(null)
+const uploadRef = useTemplateRef("uploadRef")
 const headers = computed<{ title: string; key: keyof Tag }[]>(() => [
   {
     title: t("workbench.tagList.tableHeaders.title"),
@@ -80,7 +160,7 @@ const props = defineProps<{
   uuid: string
 }>()
 
-const { $data, $socket } = usePluginApi("raclette__core")
+const { $data, $socket, $user } = usePluginApi("raclette__core")
 
 const {
   data: tags,
@@ -94,6 +174,9 @@ const {
 const { execute: executeDelete } = $data.tag.delete({
   options: { cb: () => execute({ isDeleted: showDeleted.value }) },
 })
+const { execute: executeBulkCreate } = await $data.tag.createBulk({
+  options: { notify: false, cb: () => execute() },
+})
 const { execute: executeHardDelete } = await $data.tag.deleteHard({
   options: { cb: () => execute({ isDeleted: showDeleted.value }) },
 })
@@ -118,6 +201,73 @@ const deleteTag = async (tag: Tag) => {
     await executeDelete({ _id: tag._id })
   }
 }
+const openExportDialog = () => {
+  const allTags = Object.values(tags.value || {})
+  const exportableTags = []
+  allTags.forEach((tag) => {
+    if (!tag.locked) {
+      exportableTags.push(tag)
+    }
+  })
+  exportableItems.value = exportableTags
+  showExportDialog.value = true
+}
+
+const handleExportConfirm = (selectedIds: string[]) => {
+  const dataToExport = selectedIds.reduce((acc, id) => {
+    if (tags.value?.[id]) {
+      acc[id] = tags.value[id]
+    }
+    return acc
+  }, {} as any)
+
+  exportedItems.value = Object.values(dataToExport)
+  downloadJson(dataToExport, "tags")
+  showExportSummary.value = true
+}
+
+// Import functions
+const handleFileUpload = (content: string, file: File) => {
+  try {
+    const parsedData = JSON.parse(content)
+    const itemsArray = Object.values(parsedData)
+
+    importableItems.value = itemsArray
+    pendingImportData.value = parsedData
+    showImportDialog.value = true
+  } catch (error) {
+    console.error("Failed to parse JSON:", error)
+  }
+}
+
+const handleImportConfirm = (selectedIds: string[]) => {
+  const selectedItems = selectedIds.map((id) => pendingImportData.value[id])
+  importedItems.value = selectedItems
+  showImportSummary.value = true
+}
+
+const finalizeImport = async () => {
+  const mapping = {
+    owner: $user.value._id,
+    lastEditor: $user.value._id,
+    createdBy: $user.value._id,
+  }
+
+  const dataToImport = importedItems.value.reduce((acc, item) => {
+    const mappedItem = mapJsonValues(item, mapping)
+    acc[item._id] = mappedItem
+    return acc
+  }, {} as any)
+
+  await executeBulkCreate(Object.values(dataToImport))
+  // TODO: Add your actual import logic here
+  // e.g., call an API endpoint to save the imported compositions
+
+  // Reset states
+  pendingImportData.value = null
+  importableItems.value = []
+  importedItems.value = []
+}
 const restore = async (_id: string) => {
   executeRestore({ _id })
 }

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

@@ -0,0 +1,98 @@
+<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

@@ -0,0 +1,182 @@
+<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>

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

@@ -0,0 +1,140 @@
+<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-md tw:w-full tw:overflow-auto tw:h-[80%]"
+    >
+      <!-- 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">
+        <!-- Alert -->
+        <div
+          :class="[
+            'tw:rounded tw:p-4 tw:mb-4',
+            type === 'error' && 'tw:bg-red-50 tw:text-red-700',
+            type === 'warning' && 'tw:bg-yellow-50 tw:text-yellow-700',
+            type === 'info' && 'tw:bg-blue-50 tw:text-blue-700',
+            type === 'success' && 'tw:bg-green-50 tw:text-green-700',
+          ]"
+        >
+          <div class="tw:text-lg tw:font-medium tw:mb-2">
+            {{ message }}
+          </div>
+
+          <div class="tw:text-sm">
+            {{ $t("core.itemsCount") }}:
+            <strong>{{ itemCount }}</strong>
+          </div>
+        </div>
+
+        <!-- List -->
+        <div v-if="showItems && items.length > 0" class="tw:mt-4">
+          <div
+            class="tw:text-xs tw:uppercase tw:font-semibold tw:text-gray-500 tw:mb-2"
+          >
+            {{ $t("core.selectedItems") }}
+          </div>
+
+          <ul class="tw:space-y-1">
+            <li
+              v-for="item in items"
+              :key="item._id"
+              class="tw:px-3 tw:py-2 tw:bg-gray-50 tw:rounded tw:text-sm tw:text-gray-700"
+            >
+              {{ getDisplayValue(item) }}
+            </li>
+          </ul>
+        </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 hover:tw:bg-gray-100 tw:rounded"
+        >
+          {{ cancelText || $t("core.close") }}
+        </button>
+
+        <button
+          v-if="showConfirm"
+          @click="confirm"
+          :class="[
+            'tw:px-4 tw:py-2 tw:text-sm tw:rounded tw:text-white',
+            type === 'error' && 'tw:bg-red-600 hover:tw:bg-red-700',
+            type === 'warning' && 'tw:bg-yellow-600 hover:tw:bg-yellow-700',
+            type === 'info' && 'tw:bg-blue-600 hover:tw:bg-blue-700',
+            type === 'success' && 'tw:bg-green-600 hover:tw:bg-green-700',
+          ]"
+        >
+          {{ confirmText }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue"
+
+interface Props {
+  modelValue: boolean
+  items: any[]
+  title: string
+  message: string
+  type?: "info" | "success" | "warning" | "error"
+  showItems?: boolean
+  showConfirm?: boolean
+  displayAttribute: string
+  confirmText?: string
+  cancelText?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: "info",
+  showItems: true,
+  showConfirm: false,
+})
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean]
+  confirm: []
+}>()
+
+const dialog = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+})
+
+const itemCount = computed(() => props.items.length)
+
+const close = () => {
+  dialog.value = false
+}
+const getDisplayValue = (item: any) => {
+  return item[props.displayAttribute] || item._id
+}
+const confirm = () => {
+  emit("confirm")
+  close()
+}
+</script>