feat: vc-1504 blade error content copy

VirtoCommerce · Dec 4, 2024 · bba7a11 · bba7a11
1 parent cb3ac18
commit bba7a11
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 6 deletions.
diff --git a/framework/locales/en.json b/framework/locales/en.json
@@ -148,7 +148,8 @@
         "SEE_DETAILS": "See details",
         "UNSAVED_CHANGES": "Has unsaved changes",
         "ERROR_POPUP": {
-          "TITLE": "Error details"
+          "TITLE": "Error details",
+          "COPY_ERROR": "copy content"
         }
       },
       "VC_BLADE_HEADER": {

diff --git a/framework/shared/components/common/popup/vc-popup-error.vue b/framework/shared/components/common/popup/vc-popup-error.vue
@@ -5,6 +5,12 @@
     :title="title"
     @close="$emit('close')"
   >
+    <template
+      v-if="$slots.header"
+      #header
+    >
+      <slot name="header" />
+    </template>
     <template #content>
       <slot />
     </template>
@@ -35,6 +41,11 @@ export interface Emits {
 defineProps<Props>();
 
 defineEmits<Emits>();
+
+defineSlots<{
+  header: void;
+  default: void;
+}>();
 </script>
 
 <style lang="scss">

diff --git a/framework/shared/components/common/popup/vc-popup-info.vue b/framework/shared/components/common/popup/vc-popup-info.vue
@@ -5,6 +5,12 @@
     :title="title"
     @close="$emit('close')"
   >
+    <template
+      v-if="$slots.header"
+      #header
+    >
+      <slot name="header" />
+    </template>
     <template #content>
       <slot />
     </template>
@@ -35,6 +41,11 @@ export interface Emits {
 defineProps<Props>();
 
 defineEmits<Emits>();
+
+defineSlots<{
+  header: void;
+  default: void;
+}>();
 </script>
 
 <style lang="scss">

diff --git a/framework/shared/components/common/popup/vc-popup-warning.vue b/framework/shared/components/common/popup/vc-popup-warning.vue
@@ -5,6 +5,12 @@
     :title="title"
     @close="$emit('close')"
   >
+    <template
+      v-if="$slots.header"
+      #header
+    >
+      <slot name="header" />
+    </template>
     <template #content>
       <slot />
     </template>
@@ -38,6 +44,11 @@ export interface Emits {
 defineProps<Props>();
 
 defineEmits<Emits>();
+
+defineSlots<{
+  header: void;
+  default: void;
+}>();
 </script>
 
 <style lang="scss">

diff --git a/framework/ui/components/organisms/vc-blade/vc-blade.vue b/framework/ui/components/organisms/vc-blade/vc-blade.vue
@@ -136,13 +136,13 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, Ref, reactive, useAttrs, toRefs, toValue, ref, onMounted, onUpdated } from "vue";
+import { computed, Ref, reactive, useAttrs, toRefs, toValue, ref, onMounted, onUpdated, defineComponent, h } from "vue";
 import { IBladeToolbar } from "../../../../core/types";
 import { usePopup } from "./../../../../shared";
 import { useI18n } from "vue-i18n";
 import VcBladeHeader from "./_internal/vc-blade-header/vc-blade-header.vue";
 import VcBladeToolbar from "./_internal/vc-blade-toolbar/vc-blade-toolbar.vue";
-import { VcButton, VcIcon } from "./../../";
+import { VcButton, VcIcon, VcLink } from "./../../";
 import vcPopupError from "../../../../shared/components/common/popup/vc-popup-error.vue";
 import { useLocalStorage } from "@vueuse/core";
 
@@ -216,11 +216,20 @@ onUpdated(() => {
 
 const { open } = usePopup({
   component: vcPopupError,
-  props: {
-    title: t("COMPONENTS.ORGANISMS.VC_BLADE.ERROR_POPUP.TITLE"),
-  },
   slots: {
     default: computed(() => toValue(error)),
+    header: defineComponent({
+      render: () =>
+        h("div", [
+          t("COMPONENTS.ORGANISMS.VC_BLADE.ERROR_POPUP.TITLE"),
+          " ",
+          h(
+            VcLink,
+            { onClick: () => navigator.clipboard.writeText(toValue(error) ?? "") },
+            `(${t("COMPONENTS.ORGANISMS.VC_BLADE.ERROR_POPUP.COPY_ERROR")})`,
+          ),
+        ]),
+    }),
   },
 });
 </script>