@raclettejs/workbench 0.1.33-canary.3 → 0.1.33

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@raclettejs/workbench",
-  "version": "0.1.33-canary.3",
+  "version": "0.1.33",
   "license": "MIT",
   "description": "racletteJS Workbench - used to configure your application, for dev and prod",
   "repository": "https://gitlab.com/raclettejs/workbench",
   "author": "Pacifico Digital Explorations GmbH",
   "type": "module",
   "scripts": {
+    ":install": "yarn install",
     "dev": "raclette dev",
     "down": "raclette down",
     "build": "raclette build",
@@ -33,7 +34,7 @@
     ".": "./index.ts"
   },
   "dependencies": {
-    "@raclettejs/core": "^0.1.33-canary.3",
+    "@raclettejs/core": "^0.1.33",
     "@vueuse/integrations": "14.2.1",
     "fuse.js": "7.1.0",
     "three": "0.183.2",
@@ -43,7 +44,7 @@
     "@emnapi/core": "1.9.2",
     "@emnapi/runtime": "1.9.2",
     "@eslint/js": "9.35.0",
-    "@raclettejs/types": "^0.1.33-canary.3",
+    "@raclettejs/types": "^0.1.33",
     "@sinclair/typebox": "0.34.48",
     "@types/ramda": "0.31.1",
     "@vueuse/core": "14.2.1",
@@ -66,7 +67,7 @@
     "uuid": "13.0.0",
     "vite": "8.0.1",
     "vue": "3.5.30",
-    "vue-eslint-parser": "9.4.3",
+    "vue-eslint-parser": "10.3.0",
     "vue-i18n": "11.3.0",
     "vuetify": "4.0.5"
   }

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

@@ -1,37 +1,40 @@
 <template>
-  <div>
+  <div class="tw:p-4">
     <BaseDataTable
       :items="parsedCompositions"
       :exportable-items="exportableCompositions"
       :loading="compositionsLoading || tagsLoading"
       :headers="headers"
-      create-interaction-link-id="compositionCreateInteractionLink"
-      edit-interaction-link-id="compositionEditInteractionLink"
+      :row-click-handler="handleRowClick"
       :data-name="$t('workbench.compositionList.dataName')"
-      :data-article="$t('workbench.compositionList.dataArticle')"
-      @delete="deleteComposition"
+      :show-filters="true"
       :items-deleted="showDeleted"
       :on-file-loaded="handleFileUpload"
     >
-      <template #toolbar-leading>
-        <v-tooltip
-          :text="showDeleted ? $t('core.hideDeleted') : $t('core.showDeleted')"
+      <template #toolbar-end>
+        <v-btn
+          prepend-icon="mdi-plus"
+          variant="flat"
+          color="success"
+          :text="$t('core.baseDataTable.createDataButton', { dataName: $t('workbench.compositionList.dataName') })"
+          @click="goToCreate('compositionCreateInteractionLink')"
+        />
+      </template>
+      <template #toolbar-actions-menu>
+        <v-list-item
+          :title="showDeleted ? $t('core.hideDeleted') : $t('core.showDeleted')"
+          prepend-icon="mdi-delete-outline"
         >
-          <template #activator="{ props: activatorProps }">
-            <v-btn-toggle
-              density="compact"
-              v-bind="activatorProps"
+          <template #append>
+            <v-switch
               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>
+              color="error"
+              density="compact"
+              hide-details
+              inset
+            />
           </template>
-        </v-tooltip>
+        </v-list-item>
       </template>
       <!-- Custom status column -->
       <template #[`item.status`]="{ item }">
@@ -55,6 +58,15 @@
           icon="mdi-delete-restore"
         />
       </template>
+      <template #row-actions="{ item }">
+        <v-btn
+          icon="mdi-delete"
+          size="small"
+          variant="text"
+          color="error"
+          @click.stop.prevent="deleteComposition(item)"
+        />
+      </template>
     </BaseDataTable>
     <!-- Import Selection Dialog -->
     <ImportSelectionDialog
@@ -93,10 +105,12 @@ import {
   parseAndNormalizeWorkbenchImportJson,
   resolveWorkbenchImportSelection,
 } from "@app/lib/jsonTools"
+import { useWorkbenchTableActions } from "@app/composables/useWorkbenchTableActions"
 import ImportSelectionDialog from "@raclettejs/core/orchestrator/components/dataImport/ImportSelectionDialog.vue"
 import ImportSummaryDialog from "@raclettejs/core/orchestrator/components/dataImport/ImportSummaryDialog.vue"
 
 const { t } = useI18n()
+const { goToCreate, goToEditById } = useWorkbenchTableActions()
 const showDeleted = ref(false)
 const showImportDialog = ref(false)
 const showImportSummary = ref(false)
@@ -273,6 +287,10 @@ const deleteComposition = async (composition: Composition) => {
 const restore = (_id: string) => {
   executeRestore({ _id })
 }
+
+const handleRowClick = (item: Composition) =>
+  goToEditById("compositionEditInteractionLink", item._id)
+
 $socket.on("compositionCreated", () =>
   execute({ isDeleted: showDeleted.value }),
 )

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

@@ -1,37 +1,40 @@
 <template>
-  <div>
+  <div class="tw:p-4">
     <BaseDataTable
       :items="parsedInteractionLinks"
       :exportable-items="exportableInteractionLinks"
       :loading="interactionLinksLoading || tagsLoading"
       :headers="headers"
-      create-interaction-link-id="interactionLinkCreateInteractionLink"
-      edit-interaction-link-id="interactionLinkEditInteractionLink"
+      :row-click-handler="handleRowClick"
       :data-name="$t('workbench.interactionLinkList.dataName')"
-      :data-article="$t('workbench.interactionLinkList.dataArticle')"
-      @delete="deleteInteractionLink"
+      :show-filters="true"
       :items-deleted="showDeleted"
       :on-file-loaded="handleFileUpload"
     >
-      <template #toolbar-leading>
-        <v-tooltip
-          :text="showDeleted ? $t('core.hideDeleted') : $t('core.showDeleted')"
+      <template #toolbar-end>
+        <v-btn
+          prepend-icon="mdi-plus"
+          variant="flat"
+          color="success"
+          :text="$t('core.baseDataTable.createDataButton', { dataName: $t('workbench.interactionLinkList.dataName') })"
+          @click="goToCreate('interactionLinkCreateInteractionLink')"
+        />
+      </template>
+      <template #toolbar-actions-menu>
+        <v-list-item
+          :title="showDeleted ? $t('core.hideDeleted') : $t('core.showDeleted')"
+          prepend-icon="mdi-delete-outline"
         >
-          <template #activator="{ props: activatorProps }">
-            <v-btn-toggle
-              density="compact"
-              v-bind="activatorProps"
+          <template #append>
+            <v-switch
               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>
+              color="error"
+              density="compact"
+              hide-details
+              inset
+            />
           </template>
-        </v-tooltip>
+        </v-list-item>
       </template>
       <!-- Custom triggers column -->
       <template #[`item.triggers`]="{ item }">
@@ -54,6 +57,15 @@
           icon="mdi-delete-restore"
         />
       </template>
+      <template #row-actions="{ item }">
+        <v-btn
+          icon="mdi-delete"
+          size="small"
+          variant="text"
+          color="error"
+          @click.stop.prevent="deleteInteractionLink(item)"
+        />
+      </template>
     </BaseDataTable>
     <!-- Import Selection Dialog -->
     <ImportSelectionDialog
@@ -94,6 +106,7 @@ import {
 } from "@app/lib/jsonTools"
 import ImportSelectionDialog from "@raclettejs/core/orchestrator/components/dataImport/ImportSelectionDialog.vue"
 import ImportSummaryDialog from "@raclettejs/core/orchestrator/components/dataImport/ImportSummaryDialog.vue"
+import { useWorkbenchTableActions } from "@app/composables/useWorkbenchTableActions"
 const showDeleted = ref(false)
 const showImportDialog = ref(false)
 const showImportSummary = ref(false)
@@ -103,6 +116,7 @@ const importedItems = ref<any[]>([])
 const pendingImportById = ref<Record<string, any>>({})
 
 const { t } = useI18n()
+const { goToCreate, goToEditById } = useWorkbenchTableActions()
 
 const headers = computed<{ title: string; key: keyof InteractionLink }[]>(
   () => [
@@ -211,6 +225,10 @@ const exportableInteractionLinks = computed(() =>
 const restore = async (_id: string) => {
   executeRestore({ _id })
 }
+
+const handleRowClick = (item: InteractionLink) =>
+  goToEditById("interactionLinkEditInteractionLink", item._id)
+
 const deleteInteractionLink = async (interactionLink: InteractionLink) => {
   if (showDeleted.value) {
     await executeHardDelete({ _id: interactionLink._id })

package/plugins/pacifico__plugins/frontend/index.ts

@@ -4,7 +4,7 @@ export default defineRaclettePluginFrontend({
   i18n: {
     de: {
       pluginList: {
-        dataName: "Plugin",
+        dataName: "Plugins",
         dataArticle: "das",
         tableHeaders: {
           name: "Name",
@@ -16,7 +16,7 @@ export default defineRaclettePluginFrontend({
     },
     en: {
       pluginList: {
-        dataName: "Plugin",
+        dataName: "Plugins",
         dataArticle: "the",
         tableHeaders: {
           name: "Name",
@@ -28,7 +28,7 @@ export default defineRaclettePluginFrontend({
     },
     sk: {
       pluginList: {
-        dataName: "Plugin",
+        dataName: "Plugins",
         dataArticle: "",
         tableHeaders: {
           name: "Názov",

package/plugins/pacifico__plugins/frontend/widgets/PluginListWidget.vue

@@ -1,16 +1,15 @@
 <template>
-  <BaseDataTable
-    :items="pluginMetadataFiles"
-    :headers
-    :data-name="$i18n.t('pluginList.dataName')"
-    :data-article="$i18n.t('pluginList.dataArticle')"
-    :show-create-button="false"
-    :show-delete-action="false"
-    :show-actions-column="false"
-    :row-click-handler="onRowClick"
-    :show-export="false"
-  >
-  </BaseDataTable>
+  <div class="tw:p-4">
+    <BaseDataTable
+      :items="pluginMetadataFiles"
+      :headers
+      :data-name="$i18n.t('pluginList.dataName')"
+      :show-filters="true"
+      :show-actions-column="false"
+      :row-click-handler="onRowClick"
+      :show-export="false"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">

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

@@ -1,37 +1,40 @@
 <template>
-  <div>
+  <div class="tw:p-4">
     <BaseDataTable
       :items="parsedTags"
       :exportable-items="exportableTags"
       :loading="tagsLoading"
       :headers="headers"
-      create-interaction-link-id="tagCreateInteractionLink"
-      edit-interaction-link-id="tagEditInteractionLink"
+      :row-click-handler="handleRowClick"
       :data-name="$t('workbench.tagList.dataName')"
-      :data-article="$t('workbench.tagList.dataArticle')"
-      @delete="deleteTag"
+      :show-filters="true"
       :items-deleted="showDeleted"
       :on-file-loaded="handleFileUpload"
     >
-      <template #toolbar-leading>
-        <v-tooltip
-          :text="showDeleted ? $t('core.hideDeleted') : $t('core.showDeleted')"
+      <template #toolbar-end>
+        <v-btn
+          prepend-icon="mdi-plus"
+          variant="flat"
+          color="success"
+          :text="$t('core.baseDataTable.createDataButton', { dataName: $t('workbench.tagList.dataName') })"
+          @click="goToCreate('tagCreateInteractionLink')"
+        />
+      </template>
+      <template #toolbar-actions-menu>
+        <v-list-item
+          :title="showDeleted ? $t('core.hideDeleted') : $t('core.showDeleted')"
+          prepend-icon="mdi-delete-outline"
         >
-          <template #activator="{ props: activatorProps }">
-            <v-btn-toggle
-              density="compact"
-              v-bind="activatorProps"
+          <template #append>
+            <v-switch
               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>
+              color="error"
+              density="compact"
+              hide-details
+              inset
+            />
           </template>
-        </v-tooltip>
+        </v-list-item>
       </template>
       <template #prepend-row-actions="{ item }">
         <v-icon
@@ -47,6 +50,15 @@
           icon="mdi-delete-restore"
         />
       </template>
+      <template #row-actions="{ item }">
+        <v-btn
+          icon="mdi-delete"
+          size="small"
+          variant="text"
+          color="error"
+          @click.stop.prevent="deleteTag(item)"
+        />
+      </template>
     </BaseDataTable>
     <!-- Import Selection Dialog -->
     <ImportSelectionDialog
@@ -87,8 +99,10 @@ import {
 } from "@app/lib/jsonTools"
 import ImportSelectionDialog from "@raclettejs/core/orchestrator/components/dataImport/ImportSelectionDialog.vue"
 import ImportSummaryDialog from "@raclettejs/core/orchestrator/components/dataImport/ImportSummaryDialog.vue"
+import { useWorkbenchTableActions } from "@app/composables/useWorkbenchTableActions"
 const showDeleted = ref(false)
 const { t } = useI18n()
+const { goToCreate, goToEditById } = useWorkbenchTableActions()
 const showImportDialog = ref(false)
 const showImportSummary = ref(false)
 
@@ -214,6 +228,10 @@ const finalizeImport = async () => {
 const restore = async (_id: string) => {
   executeRestore({ _id })
 }
+
+const handleRowClick = (item: Tag) =>
+  goToEditById("tagEditInteractionLink", item._id)
+
 $socket.on("tagCreated", () => execute({ isDeleted: showDeleted.value }))
 watch(
   showDeleted,

package/plugins/pacifico__users/frontend/widgets/UserListWidget.vue

@@ -1,52 +1,70 @@
 <template>
-  <BaseDataTable
-    :items="parsedUsers"
-    :exportable-items="exportableUsers"
-    :loading="usersLoading || tagsLoading"
-    :headers="headers"
-    create-interaction-link-id="userCreateInteractionLink"
-    edit-interaction-link-id="userEditInteractionLink"
-    :data-name="$t('workbench.userList.dataName')"
-    :data-article="$t('workbench.userList.dataArticle')"
-    :delete-validator="(user) => user._id !== $user?._id"
-    @delete="deleteUser"
-    :items-deleted="showDeleted"
-  >
-    <template #toolbar-leading>
-      <v-tooltip
-        :text="showDeleted ? $t('core.hideDeleted') : $t('core.showDeleted')"
-      >
-        <template #activator="{ props: activatorProps }">
-          <v-btn-toggle
-            density="compact"
-            v-bind="activatorProps"
-            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.stop.prevent="restore(item._id)"
-        :title="
-          $t('workbench.baseDataTable.restoreDataTitle', {
-            dataName: item.title,
-          })
-        "
-        icon="mdi-delete-restore"
-      />
-    </template>
-  </BaseDataTable>
+  <div class="tw:p-4">
+    <BaseDataTable
+      :items="parsedUsers"
+      :exportable-items="exportableUsers"
+      :loading="usersLoading || tagsLoading"
+      :headers="headers"
+      :row-click-handler="handleRowClick"
+      :data-name="$t('workbench.userList.dataName')"
+      :show-filters="true"
+      :items-deleted="showDeleted"
+    >
+      <template #toolbar-end>
+        <v-btn
+          prepend-icon="mdi-plus"
+          variant="flat"
+          color="success"
+          :text="
+            $t('core.baseDataTable.createDataButton', {
+              dataName: $t('workbench.userList.dataName'),
+            })
+          "
+          @click="goToCreate('userCreateInteractionLink')"
+        />
+      </template>
+      <template #toolbar-actions-menu>
+        <v-list-item
+          :title="showDeleted ? $t('core.hideDeleted') : $t('core.showDeleted')"
+          prepend-icon="mdi-delete-outline"
+        >
+          <template #append>
+            <v-switch
+              v-model="showDeleted"
+              color="error"
+              density="compact"
+              hide-details
+              inset
+            />
+          </template>
+        </v-list-item>
+      </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>
+      <template #row-actions="{ item }">
+        <v-btn
+          v-if="item._id !== $user?._id"
+          icon="mdi-delete"
+          size="small"
+          variant="text"
+          color="error"
+          @click.stop.prevent="deleteUser(item)"
+        />
+      </template>
+    </BaseDataTable>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -56,6 +74,7 @@ import type { User } from "@raclettejs/core"
 import { formatDistance } from "date-fns"
 import { useI18n } from "vue-i18n"
 import BaseDataTable from "@raclettejs/core/orchestrator/components/dataTable/BaseDataTable.vue"
+import { useWorkbenchTableActions } from "@app/composables/useWorkbenchTableActions"
 const showDeleted = ref(false)
 
 const props = defineProps<{
@@ -63,6 +82,7 @@ const props = defineProps<{
 }>()
 
 const { t } = useI18n()
+const { goToCreate, goToEditById } = useWorkbenchTableActions()
 
 const headers = computed<{ title: string; key: keyof User }[]>(() => [
   {
@@ -108,15 +128,13 @@ const userTableRows = (relativeUpdatedAt: boolean) => {
     return []
   }
 
-  return Object.values(users.value as { [key: string]: User }).map(
-    (user) => ({
-      ...user,
-      tags: user.tags.map((tag) => tags.value?.[tag]),
-      ...(relativeUpdatedAt
-        ? { updatedAt: formatDistance(new Date(user.updatedAt), new Date()) }
-        : {}),
-    }),
-  )
+  return Object.values(users.value as { [key: string]: User }).map((user) => ({
+    ...user,
+    tags: user.tags.map((tag) => tags.value?.[tag]),
+    ...(relativeUpdatedAt
+      ? { updatedAt: formatDistance(new Date(user.updatedAt), new Date()) }
+      : {}),
+  }))
 }
 
 const parsedUsers = computed(() => userTableRows(true))
@@ -132,6 +150,10 @@ const deleteUser = async (user: User) => {
 const restore = async (_id: string) => {
   executeRestore({ _id })
 }
+
+const handleRowClick = (item: User) =>
+  goToEditById("userEditInteractionLink", item._id)
+
 $socket.on("userCreated", () => execute({ isDeleted: showDeleted.value }))
 watch(
   showDeleted,