feat: Edit Collection & NFT UI

components/collection/CollectionCard.vue

@@ -8,7 +8,7 @@
       :to="`/${urlPrefix}/collection/${collection.id}`"
     >
       <BasicImage
-        :src="image"
+        :src="banner"
         :alt="collection.name"
         :lazy="lazyLoading"
         sizes="300px md:350px"
@@ -40,7 +40,7 @@
 
 <script setup lang="ts">
 import { NeoSkeleton } from '@kodadot1/brick'
-import type { TokenMetadata } from '@kodadot1/hyperdata'
+import type { CollectionMetadata } from '@kodadot1/hyperdata'
 import CollectionDetail from './CollectionDetail.vue'
 import type { CollectionWithMeta } from '@/types'
 import BasicImage from '@/components/shared/view/BasicImage.vue'
@@ -55,17 +55,21 @@ const props = defineProps<{
 
 const isLoadingMeta = ref(false)
 const image = ref('')
+const banner = ref('')
 
 const { urlPrefix } = usePrefix()
 
 const getImageFromMetadata = async (collectionMetadata: string) => {
   isLoadingMeta.value = true
 
-  const metadata = (await processSingleMetadata(
-    collectionMetadata,
-  )) as TokenMetadata
+  const metadata = await processSingleMetadata<CollectionMetadata>(collectionMetadata)
+
+  const metadataImage = getCollectionImage(metadata) || ''
+  const metadataBanner = metadata.banner || metadataImage
+
+  image.value = sanitizeIpfsUrl(metadataImage)
+  banner.value = sanitizeIpfsUrl(metadataBanner)
 
-  image.value = sanitizeIpfsUrl(getCollectionImage(metadata) || '')
   isLoadingMeta.value = false
 }
 
@@ -76,9 +80,11 @@ onMounted(async () => {
 
   const meta = props.collection.meta
   const metaImage = meta ? getCollectionImage(meta) : undefined
+  const metaBanner = meta?.banner || metaImage
 
-  if (metaImage) {
+  if (metaImage && metaBanner) {
     image.value = sanitizeIpfsUrl(metaImage)
+    banner.value = sanitizeIpfsUrl(metaBanner)
   }
   else {
     getImageFromMetadata(props.collection.metadata)

components/collection/CollectionHeader.vue

@@ -7,6 +7,7 @@
     <section class="pt-5">
       <div class="container is-fluid">
         <CollectionInfo
+          ref="collectionInfo"
           :collection-id="collectionId"
           :collection="collection"
         />
@@ -21,12 +22,31 @@ import { useCollectionMinimal } from '@/components/collection/utils/useCollectio
 import CollectionInfo from '@/components/collection/CollectionInfo.vue'
 import CollectionBanner from '@/components/collection/CollectionHeader/CollectionBanner.vue'
 
+const collectionInfo = ref()
+
+const { toast } = useToast()
+const { $i18n } = useNuxtApp()
 const route = useRoute()
 const collectionId = computed(() => route.params.id.toString())
 
 const { collection, refetch } = useCollectionMinimal({
   collectionId,
 })
 
+useSubscriptionGraphql({
+  query: `
+    collectionEntity: collectionEntityById(id: "${collectionId.value}") {
+      max
+      metadata
+    }
+  `,
+  onChange: () => {
+    toast($i18n.t('edit.collection.updated'))
+    refetch()
+    collectionInfo.value?.refetch()
+  },
+  immediate: false,
+})
+
 watch(collectionId, () => refetch())
 </script>

components/collection/CollectionInfo.vue

@@ -169,7 +169,9 @@ const visibleDescription = computed(() => {
   )
 })
 
-const { stats } = useCollectionDetails({
+const { stats, refetch } = useCollectionDetails({
   collectionId: computed(() => props.collectionId),
 })
+
+defineExpose({ refetch })
 </script>

components/collection/EditModal.vue

@@ -0,0 +1,182 @@
+<template>
+  <NeoModal
+    :value="isModalActive"
+    @close="isModalActive = false"
+  >
+    <ModalBody
+      :title="$t('edit.collection.title')"
+      :scrollable="false"
+      @close="isModalActive = false"
+    >
+      <form
+        class="flex flex-col gap-6"
+        @submit.prevent
+      >
+        <CollectionEditSection :title="$t('edit.collection.image.label')">
+          <FormLogoField
+            v-model:file="image"
+            v-model:url="imageUrl"
+            :title="$t('edit.collection.image.message')"
+          />
+        </CollectionEditSection>
+
+        <CollectionEditSection :title="$t('edit.collection.banner.label')">
+          <p class="text-xs !mb-4 capitalize">
+            {{ $t('edit.collection.banner.message') }}
+          </p>
+
+          <div
+            v-if="bannerUrl"
+            class="flex flex-col gap-2"
+          >
+            <img
+              alt="collection banner"
+              :src="bannerUrl"
+              class="h-[167px] border border-border-color object-cover"
+            >
+
+            <p class="text-xs text-k-grey !mt-2 capitalize">
+              {{ $t('edit.collection.banner.hint') }}
+            </p>
+
+            <FormOverrideFile
+              @clear="() => {
+                banner = undefined
+                bannerUrl = undefined
+              }"
+              @select="value => banner = value"
+            />
+          </div>
+
+          <div
+            v-else
+          >
+            <DropUpload
+              v-model="banner"
+              required
+              expanded
+              preview
+              :label="$t('edit.collection.drop')"
+            />
+
+            <p class="text-xs text-k-grey !mt-4 capitalize">
+              {{ $t('edit.collection.banner.hint') }}
+            </p>
+          </div>
+        </CollectionEditSection>
+
+        <!-- collection max nfts -->
+        <NeoField
+          :label="$t('edit.collection.max.label')"
+          required
+        >
+          <div class="w-full">
+            <div class="flex justify-between">
+              <p>{{ $t('mint.unlimited') }}</p>
+              <NeoSwitch
+                v-model="unlimited"
+                position="left"
+              />
+            </div>
+            <NeoInput
+              v-if="!unlimited"
+              v-model="max"
+              class="mt-3"
+              type="number"
+              :placeholder="`${min} is the minimum`"
+              :min="min"
+            />
+
+            <div class="text-k-grey text-xs !mt-2">
+              {{ $t('edit.collection.max.hint') }}
+            </div>
+          </div>
+        </NeoField>
+      </form>
+
+      <div class="flex flex-col !mt-6">
+        <NeoButton
+          variant="primary"
+          size="large"
+          :disabled="disabled"
+          no-shadow
+          :label="$t('edit.collection.saveChanges')"
+          @click="editCollection"
+        />
+      </div>
+    </ModalBody>
+  </NeoModal>
+</template>
+
+<script setup lang="ts">
+import { NeoButton, NeoField, NeoInput, NeoModal, NeoSwitch } from '@kodadot1/brick'
+import ModalBody from '@/components/shared/modals/ModalBody.vue'
+import type { UpdateCollection } from '@/composables/transaction/types'
+
+export type CollectionEditMetadata = {
+  name: string
+  description: string
+  image: string
+  imageType: string
+  banner?: string
+  max: number | null
+}
+
+const emit = defineEmits(['submit'])
+const props = defineProps<{
+  modelValue: boolean
+  collection: CollectionEditMetadata
+  min?: number
+}>()
+
+const isModalActive = useVModel(props, 'modelValue')
+
+const image = ref<File>()
+const banner = ref<File>()
+const imageUrl = ref<string>()
+const bannerUrl = ref<string>()
+const unlimited = ref(true)
+
+const min = computed(() => props.min || 1)
+const max = ref<number | null>(null)
+
+const disabled = computed(() => {
+  const hasImage = imageUrl.value
+
+  const hasImagechanged = (!imageUrl.value && Boolean(props.collection?.image)) || Boolean(image.value)
+  const hasBannerChanged = (!bannerUrl.value && Boolean(props.collection?.banner)) || Boolean(banner.value)
+  const hasMaxChanged = max.value !== props.collection?.max
+
+  return !hasImage || (!hasImagechanged && !hasBannerChanged && !hasMaxChanged)
+})
+
+const editCollection = async () => {
+  emit('submit', {
+    name: props.collection.name,
+    description: props.collection.description,
+    image: image.value || props.collection.image,
+    imageType: props.collection.imageType,
+    banner: bannerUrl.value ? banner.value || props.collection.banner : undefined,
+    max: max.value,
+  } as UpdateCollection)
+}
+
+watch(isModalActive, (value) => {
+  if (value && props.collection) {
+    imageUrl.value = sanitizeIpfsUrl(props.collection.image)
+    bannerUrl.value = props.collection.banner && sanitizeIpfsUrl(props.collection.banner)
+    image.value = undefined
+    banner.value = undefined
+    unlimited.value = !props.collection.max
+    max.value = props.collection.max
+  }
+})
+
+watch([banner, unlimited], ([banner, unlimited]) => {
+  if (banner) {
+    bannerUrl.value = URL.createObjectURL(banner)
+  }
+
+  max.value = unlimited ? null : max.value || props.collection.max
+})
+</script>