@raclettejs/workbench 0.1.18 → 0.1.20

package/plugins/pacifico__compositions/frontend/widgets/CompositionListWidget.vue

@@ -1,70 +1,151 @@
 <template>
-  <BaseDataTable
-    :items="parsedCompositions"
-    :loading="compositionsLoading || tagsLoading"
-    :headers="headers"
-    create-interaction-link-id="compositionCreateInteractionLink"
-    edit-interaction-link-id="compositionEditInteractionLink"
-    :data-name="$t('workbench.compositionList.dataName')"
-    :data-article="$t('workbench.compositionList.dataArticle')"
-    @delete="deleteComposition"
-    :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>
-    <!-- Custom status column -->
-    <template #item.status="{ item }">
-      <v-icon
-        :icon="item.statusIcon"
-        :color="item.statusColor"
-        size="x-large"
-      />
-    </template>
-    <template #prepend-row-actions="{ item }">
-      <v-icon
-        v-if="showDeleted"
-        color="green"
-        class="mr-2"
-        @click.stop.prevent="restore(item._id)"
-        :title="
-          $t('workbench.baseDataTable.restoreDataTitle', {
-            dataName: item.title,
-          })
-        "
-        icon="mdi-delete-restore"
-      />
-    </template>
-  </BaseDataTable>
+  <div>
+    <BaseDataTable
+      :items="parsedCompositions"
+      :loading="compositionsLoading || tagsLoading"
+      :headers="headers"
+      create-interaction-link-id="compositionCreateInteractionLink"
+      edit-interaction-link-id="compositionEditInteractionLink"
+      :data-name="$t('workbench.compositionList.dataName')"
+      :data-article="$t('workbench.compositionList.dataArticle')"
+      @delete="deleteComposition"
+      :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>
+      <!-- Custom status column -->
+      <template #item.status="{ item }">
+        <v-icon
+          :icon="item.statusIcon"
+          :color="item.statusColor"
+          size="x-large"
+        />
+      </template>
+      <template #prepend-row-actions="{ item }">
+        <v-icon
+          v-if="showDeleted"
+          color="green"
+          class="mr-2"
+          @click.stop.prevent="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, watch, ref } from "vue"
+import { computed, watch, ref, useTemplateRef } from "vue"
 import type { Composition } from "@raclettejs/core"
 import { formatDistance } from "date-fns"
 import BaseDataTable from "@app/components/BaseDataTable.vue"
 import { useI18n } from "vue-i18n"
-const showDeleted = ref(false)
+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 { t } = useI18n()
+const showDeleted = ref(false)
+// 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 Composition | "actions" }[]
@@ -99,7 +180,7 @@ const props = defineProps<{
   uuid: string
 }>()
 
-const { $data, $socket } = usePluginApi("raclette__core")
+const { $data, $socket, $user } = usePluginApi("raclette__core")
 const {
   data: compositions,
   execute,
@@ -114,6 +195,9 @@ const { data: users } = $data.user.getAll({
 const { execute: executeDelete } = await $data.composition.delete({
   options: { cb: () => execute({ isDeleted: showDeleted.value }) },
 })
+const { execute: executeBulkCreate } = await $data.composition.createBulk({
+  options: { notify: false, cb: () => execute() },
+})
 const { execute: executeRestore } = await $data.composition.updateRestore({
   options: { cb: () => execute({ isDeleted: showDeleted.value }) },
 })
@@ -162,7 +246,67 @@ const getStatusColor = (status: string) => {
     return "#B66218"
   }
 }
+// Export functions
+const openExportDialog = () => {
+  exportableItems.value = Object.values(compositions.value || {})
+  showExportDialog.value = true
+}
+
+const handleExportConfirm = (selectedIds: string[]) => {
+  const dataToExport = selectedIds.reduce((acc, id) => {
+    if (compositions.value?.[id]) {
+      acc[id] = compositions.value[id]
+    }
+    return acc
+  }, {} as any)
+
+  exportedItems.value = Object.values(dataToExport)
+  downloadJson(dataToExport, "compositions")
+  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 deleteComposition = async (composition: Composition) => {
   if (showDeleted.value) {
     await executeHardDelete({ _id: composition._id })

package/plugins/pacifico__interactionLinks/frontend/widgets/InteractionLinkListWidget.vue

@@ -1,67 +1,149 @@
 <template>
-  <BaseDataTable
-    :items="parsedInteractionLinks"
-    :loading="interactionLinksLoading || tagsLoading"
-    :headers="headers"
-    create-interaction-link-id="interactionLinkCreateInteractionLink"
-    edit-interaction-link-id="interactionLinkEditInteractionLink"
-    :data-name="$t('workbench.interactionLinkList.dataName')"
-    :data-article="$t('workbench.interactionLinkList.dataArticle')"
-    @delete="deleteInteractionLink"
-    :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>
-    <!-- Custom triggers column -->
-    <template #item.triggers="{ item }">
-      <span class="tw:flex tw:gap-2">
-        <span>{{ item.triggers }}</span>
-        <v-icon icon="mdi-link" />
-      </span>
-    </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="parsedInteractionLinks"
+      :loading="interactionLinksLoading || tagsLoading"
+      :headers="headers"
+      create-interaction-link-id="interactionLinkCreateInteractionLink"
+      edit-interaction-link-id="interactionLinkEditInteractionLink"
+      :data-name="$t('workbench.interactionLinkList.dataName')"
+      :data-article="$t('workbench.interactionLinkList.dataArticle')"
+      @delete="deleteInteractionLink"
+      :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>
+      <!-- Custom triggers column -->
+      <template #item.triggers="{ item }">
+        <span class="tw:flex tw:gap-2">
+          <span>{{ item.triggers }}</span>
+          <v-icon icon="mdi-link" />
+        </span>
+      </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="description"
+      :title="$t('core.selectItemsToExport')"
+      :confirm-text="$t('core.export')"
+      @confirm="handleExportConfirm"
+    />
+
+    <!-- Import Selection Dialog -->
+    <SelectionDialog
+      v-model="showImportDialog"
+      :items="importableItems"
+      display-attribute="description"
+      :title="$t('core.selectItemsToImport')"
+      :confirm-text="$t('core.import')"
+      @confirm="handleImportConfirm"
+    />
+
+    <!-- Export Summary Dialog -->
+    <SummaryDialog
+      v-model="showExportSummary"
+      display-attribute="description"
+      :items="exportedItems"
+      :title="$t('core.exportSummary')"
+      :message="$t('core.exportSuccessMessage')"
+      type="success"
+    />
+
+    <!-- Import Summary Dialog -->
+    <SummaryDialog
+      v-model="showImportSummary"
+      :items="importedItems"
+      display-attribute="description"
+      :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 { clone } from "ramda"
 import BaseDataTable from "@app/components/BaseDataTable.vue"
 import { InteractionLink } from "@raclettejs/core"
 import { usePluginApi } from "@raclettejs/core/orchestrator/composables"
 import { formatDistance } from "date-fns"
-import { computed, ref, watch } from "vue"
+import { computed, ref, watch, useTemplateRef } from "vue"
 import { useI18n } from "vue-i18n"
+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)
+// 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 { t } = useI18n()
 
@@ -102,7 +184,7 @@ const props = defineProps<{
   uuid: string
 }>()
 
-const { $data, $socket } = usePluginApi("raclette__core")
+const { $data, $socket, $user } = usePluginApi("raclette__core")
 
 const {
   data: interactionLinks,
@@ -123,6 +205,9 @@ const { data: compositions } = $data.composition.getAll({
   options: { immediate: true },
 })
 
+const { execute: executeBulkCreate } = await $data.interactionLink.createBulk({
+  options: { notify: false, cb: () => execute() },
+})
 const { execute: executeDelete } = $data.interactionLink.delete({
   options: { cb: () => execute({ isDeleted: showDeleted.value }) },
 })
@@ -172,6 +257,85 @@ const deleteInteractionLink = async (interactionLink: InteractionLink) => {
 $socket.on("interactionLinkCreated", () =>
   execute({ isDeleted: showDeleted.value }),
 )
+const createTitleString = (link) => {
+  let linkTitleString = `${link.slotType}`
+  if (link.triggers) {
+    link.triggers.forEach((trigger) => {
+      linkTitleString += `${trigger.type} - ${trigger.settings?.title?.default} `
+    })
+  }
+  link.description = linkTitleString + link.description
+  return link
+}
+const createLinkDescriptions = (linkArr) => {
+  linkArr.forEach((link) => {
+    link = createTitleString(link)
+  })
+  return linkArr
+}
+// Export functions
+const openExportDialog = () => {
+  exportableItems.value = createLinkDescriptions(
+    Object.values(clone(interactionLinks.value) || {}),
+  )
+  showExportDialog.value = true
+}
+
+const handleExportConfirm = (selectedIds: string[]) => {
+  const _interactionLinks = clone(interactionLinks.value)
+  const dataToExport = clone(selectedIds).reduce((acc, id) => {
+    if (_interactionLinks?.[id]) {
+      acc[id] = createTitleString(_interactionLinks[id])
+    }
+    return acc
+  }, {} as any)
+  exportedItems.value = Object.values(dataToExport)
+  downloadJson(dataToExport, "interactionLinks")
+  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] = createTitleString(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 = []
+}
 watch(
   showDeleted,
   () => {