Merge pull request #11200 from Jarsen136/issue-11156

feat: Item Edit: Limit Name and Image Update

components/common/EditNftModal.vue

@@ -16,10 +16,15 @@
           :label="$t('mint.nft.art.label')"
           required
         >
-          <FormLogoField
-            v-model:file="image"
-            v-model:url="imageUrl"
-          />
+          <NonRecommendFieldNotification
+            :show="imageChanged"
+            @undo="initImage"
+          >
+            <FormLogoField
+              v-model:file="image"
+              v-model:url="imageUrl"
+            />
+          </NonRecommendFieldNotification>
         </NeoField>
 
         <!-- nft name -->
@@ -28,11 +33,16 @@
           required
           :error="!name"
         >
-          <NeoInput
-            v-model="name"
-            required
-            :placeholder="$t('mint.nft.name.placeholder')"
-          />
+          <NonRecommendFieldNotification
+            :show="name && nameChanged"
+            @undo="name = props.metadata?.name"
+          >
+            <NeoInput
+              v-model="name"
+              required
+              :placeholder="$t('mint.nft.name.placeholder')"
+            />
+          </NonRecommendFieldNotification>
         </NeoField>
 
         <!-- nft description -->
@@ -91,17 +101,24 @@ const image = ref<File>()
 const imageUrl = ref<string>()
 const attributes = ref<Attribute[]>([])
 
+const originalImageUrl = computed(() => sanitizeIpfsUrl(props.metadata?.image))
+
+const nameChanged = computed(() => props.metadata?.name !== name.value)
+const imageChanged = computed(() => originalImageUrl.value !== imageUrl.value)
+
+const initImage = () => {
+  imageUrl.value = originalImageUrl.value
+  image.value = undefined
+}
+
 const disabled = computed(() => {
   const hasImage = Boolean(imageUrl.value)
   const isNameFilled = Boolean(name.value)
-
-  const nameChanged = props.metadata?.name !== name.value
   const descriptionChanged = props.metadata?.description !== description.value
-  const imageChanged = Boolean(image.value)
   const attributesChanged = JSON.stringify(attributes.value) !== JSON.stringify(props.metadata?.attributes || [])
 
   return !hasImage || !isNameFilled
-    || (!nameChanged && !descriptionChanged && !imageChanged && !attributesChanged)
+    || (!nameChanged.value && !descriptionChanged && !imageChanged.value && !attributesChanged)
 })
 
 const editCollection = async () => {
@@ -118,8 +135,7 @@ const editCollection = async () => {
 
 watch(isModalActive, (value) => {
   if (value) {
-    imageUrl.value = sanitizeIpfsUrl(props.metadata?.image)
-    image.value = undefined
+    initImage()
     name.value = props.metadata?.name
     description.value = props.metadata?.description
     attributes.value = structuredClone(toRaw(props.metadata?.attributes || []))

components/common/NonRecommendFieldNotification.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="flex flex-col w-full">
+    <slot />
+    <div
+      v-if="show"
+      class="flex items-center gap-2 bg-yellow-50 border border-yellow-200 rounded-md p-3 !mt-2"
+    >
+      <NeoIcon
+        icon="warning"
+        class="text-yellow-500"
+        size="small"
+      />
+
+      <div>
+        <p class="text-sm text-yellow-700">
+          {{ $t('mint.notRecommendedModify') }}
+        </p>
+        <div
+          v-if="!disabledUndo"
+          class="w-full flex justify-end"
+        >
+          <NeoButton
+            variant="text"
+            class="flex items-center gap-1 text-sm !text-yellow-600 hover:!text-yellow-700 capitalize"
+            @click="emit('undo')"
+          >
+            <NeoIcon
+              icon="undo"
+              size="small"
+            />
+            {{ $t('general.undo') }}
+          </NeoButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { NeoButton, NeoIcon } from '@kodadot1/brick'
+
+defineProps<{
+  show: boolean
+  disabledUndo?: boolean
+}>()
+
+const emit = defineEmits(['undo'])
+</script>

locales/en.json

@@ -941,6 +941,7 @@
       "cancelled": "Transaction was cancelled",
       "feesPaidIn": "You are paying fees in {0}"
     },
+    "undo": "Undo",
     "updateOnWebsiteSoon": "Update on website visible soon",
     "usd": "USD",
     "using": "using"
@@ -1358,6 +1359,7 @@
         "message": "People will be able to buy your NFT."
       }
     },
+    "notRecommendedModify": "Please note that this field is not recommended to be modified as it may lead to misuse and confusion",
     "progress": "In Progress",
     "requiredDeposit": "A deposit of <strong>{0}</strong> is required to create a {1}. Please note, this initial deposit is refundable.",
     "royalty": {