@raclettejs/workbench 0.1.18 → 0.1.20

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>

package/services/frontend/src/app/lib/jsonTools.ts

@@ -0,0 +1,81 @@
+/**
+ * Downloads a JSON object as a .json file
+ * @param {Object|Array} data - The data to be downloaded as JSON
+ * @param {string} filename - The name of the file (without .json extension)
+ * @throws {Error} If data cannot be serialized to JSON
+ */
+export function downloadJson(data, filename = "download") {
+  try {
+    // Convert data to JSON string with pretty formatting
+    const jsonString = JSON.stringify(data, null, 2)
+
+    // Create blob from JSON string
+    const blob = new Blob([jsonString], { type: "application/json" })
+
+    // Create download link
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement("a")
+
+    // Ensure filename has .json extension
+    const normalizedFilename = filename.endsWith(".json")
+      ? filename
+      : `${filename}.json`
+
+    link.href = url
+    link.download = normalizedFilename
+
+    // Trigger download
+    document.body.appendChild(link)
+    link.click()
+
+    // Cleanup
+    document.body.removeChild(link)
+    URL.revokeObjectURL(url)
+  } catch (error) {
+    console.error("Failed to download JSON:", error)
+    throw new Error(`Unable to download JSON file: ${error.message}`)
+  }
+}
+/**
+ * Recursively maps values in a JSON object based on a mapping configuration
+ * @param {Object|Array} data - The source JSON data to transform
+ * @param {Object} mapping - Mapping object where keys are attribute names and values are replacement values
+ * @returns {Object|Array} New object with mapped values
+ * @throws {Error} If data cannot be processed
+ *
+ * @example
+ * const data = { owner: 'user123', name: 'Project A', lastEditor: 'user123' };
+ * const mapping = { owner: 'user456', lastEditor: 'user789' };
+ * const result = mapJsonValues(data, mapping);
+ * // Result: { owner: 'user456', name: 'Project A', lastEditor: 'user789' }
+ */
+export function mapJsonValues(data, mapping = {}) {
+  if (!data || typeof data !== "object") {
+    return data
+  }
+
+  // Handle arrays
+  if (Array.isArray(data)) {
+    return data.map((item) => mapJsonValues(item, mapping))
+  }
+
+  // Handle objects
+  const result = {}
+
+  for (const [key, value] of Object.entries(data)) {
+    // If this key exists in mapping, use the mapped value
+    if (key in mapping) {
+      result[key] = mapping[key]
+    }
+    // If value is an object or array, recursively process it
+    else if (value && typeof value === "object") {
+      result[key] = mapJsonValues(value, mapping)
+    }
+    // Otherwise keep the original value
+    else {
+      result[key] = value
+    }
+  }
+
+  return result
+}