From 43658bdd33341de7586564fa94add73958234cab Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Tue, 17 Oct 2023 10:12:35 +0800
Subject: [PATCH 1/6] =?UTF-8?q?=F0=9F=90=9B=20Fix=20display=20empty=20keyw?=
 =?UTF-8?q?ord?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/IscnUploadedInfo.vue | 4 ++--
 locales/en.json                 | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/IscnUploadedInfo.vue b/components/IscnUploadedInfo.vue
index f092888c..b9ba875c 100644
--- a/components/IscnUploadedInfo.vue
+++ b/components/IscnUploadedInfo.vue
@@ -156,7 +156,7 @@
       </FormField>
       <Divider class="mb-[24px]" />
       <FormField
-        v-if="keywords"
+        v-if="keywords.length"
         :label="$t('iscn.meta.tags.title')"
         class="mb-[12px]"
       >
@@ -216,7 +216,7 @@ export default class IscnUploadedInfo extends Vue {
   }
 
   get keywords(): Array<string> {
-    return this.metadata?.keywords.split(',') || []
+    return this.metadata?.keywords && this.metadata?.keywords.split(',') || []
   }
 
   get contentFingerprints() {
diff --git a/locales/en.json b/locales/en.json
index 0ea72708..1b27562d 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -143,7 +143,7 @@
   "iscn.meta.description.placeholder": "Description",
   "iscn.meta.description": "Description",
   "iscn.meta.id": "ISCN ID",
-  "iscn.meta.keywords.placeholder": "Keywords (seperate by ,)",
+  "iscn.meta.keywords.placeholder": "Keywords (separate by ,)",
   "iscn.meta.keywords": "Keywords",
   "iscn.meta.ipfsHash": "IPFS Hash",
   "iscn.meta.license.placeholder": "License URL",
@@ -163,7 +163,7 @@
   "iscn.meta.stakeholders.name": "Stakeholder Name",
   "iscn.meta.stakeholders.url": "URL",
   "iscn.meta.stakeholders.wallet.copied": "Copied",
-  "iscn.meta.stakeholders.wallet.placeholder": "Wallet addresss",
+  "iscn.meta.stakeholders.wallet.placeholder": "Wallet addresses",
   "iscn.meta.stakeholders.wallet": "Wallet Address (click to copy)",
   "iscn.meta.stakeholders": "Stakeholders",
   "iscn.meta.tags.title": "Tags",

From 8d99dc968c871a4b4a07b0ad112d4ceeb440fc9c Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Tue, 17 Oct 2023 10:28:10 +0800
Subject: [PATCH 2/6] =?UTF-8?q?=E2=9C=A8=20Provide=20option=20to=20downloa?=
 =?UTF-8?q?d=20JSON?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/IscnUploadedInfo.vue | 42 +++++++++++++++++++++++++++++----
 utils/misc.ts                   | 17 +++++++++++++
 2 files changed, 55 insertions(+), 4 deletions(-)

diff --git a/components/IscnUploadedInfo.vue b/components/IscnUploadedInfo.vue
index b9ba875c..ae87d5c2 100644
--- a/components/IscnUploadedInfo.vue
+++ b/components/IscnUploadedInfo.vue
@@ -10,10 +10,19 @@
       <!-- header -->
       <IscnFormHeader :step="step" :total-step="4"/>
       <!-- guide title -->
-      <Label
-        :text="$t('IscnUploaded.guide.title')"
-        class="text-medium-gray mt-[12px] mb-[28px]"
-      />
+      <div class="flex items-center justify-between mt-[12px] mb-[28px]">
+        <Label
+          align="middle"
+          :text="$t('IscnUploaded.guide.title')"
+          class="text-medium-gray"
+        />
+        <Button preset="plain" text="Download iscn.json" @click="handleClickDownload">
+          <template #prepend>
+            <IconDownload />
+          </template>
+        </Button>
+      </div>
+
       <!-- ISCN card -->
       <IscnCard
         v-if="record"
@@ -178,6 +187,7 @@
 import { Vue, Component, Prop } from 'vue-property-decorator'
 
 import { ISCNRecordWithID } from '~/utils/cosmos/iscn/iscn.type'
+import { downloadJSON } from '~/utils/misc'
 import { BIG_DIPPER_TX_BASE_URL } from '~/constant'
 
 @Component({
@@ -226,5 +236,29 @@ export default class IscnUploadedInfo extends Vue {
   get recordTimestamp() {
     return this.recordData?.recordTimestamp || ''
   }
+
+  handleClickDownload() {
+    const { url, name, keywords, usageInfo, author, description, sameAs } =
+      this.metadata
+    const generateData = {
+      contentMetadata: {
+        url,
+        name,
+        '@type': this.type,
+        version: 1,
+        '@context': "http://schema.org/",
+        keywords,
+        usageInfo,
+        author,
+        description,
+        sameAs,
+      },
+      stakeholders: this.recordData?.stakeholders,
+      contentFingerprints: this.contentFingerprints,
+      recordNotes: '',
+    }
+
+    downloadJSON(generateData, 'iscn.json')
+  }
 }
 </script>
diff --git a/utils/misc.ts b/utils/misc.ts
index f1d5d35a..774dcb1e 100644
--- a/utils/misc.ts
+++ b/utils/misc.ts
@@ -36,3 +36,20 @@ export function catchAxiosError(promise: AxiosPromise<any>) {
     }
   });
 }
+
+export function downloadJSON(data: Object, fileName: string) {
+  const jsonData = JSON.stringify(data, null, 2)
+
+  const jsonBlob = new Blob([jsonData], { type: 'application/json' })
+
+  const jsonUrl = URL.createObjectURL(jsonBlob)
+
+  const jsonLink = document.createElement('a')
+  jsonLink.href = jsonUrl
+  jsonLink.download = fileName
+  jsonLink.style.display = 'none'
+
+  document.body.appendChild(jsonLink)
+  jsonLink.click()
+  document.body.removeChild(jsonLink)
+}

From 351a46d9dbd99d9cdadd3e6031a150c920b3de46 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Tue, 17 Oct 2023 17:55:50 +0800
Subject: [PATCH 3/6] =?UTF-8?q?=F0=9F=92=84=20Add=20"Type"=20selector?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ISCNTypeIcon.vue     |  2 +-
 components/IscnRegisterForm.vue | 28 +++++++++--
 components/Selector.vue         | 84 +++++++++++++++++----------------
 locales/en.json                 |  2 +
 4 files changed, 72 insertions(+), 44 deletions(-)

diff --git a/components/ISCNTypeIcon.vue b/components/ISCNTypeIcon.vue
index 5b79d74d..225edb15 100644
--- a/components/ISCNTypeIcon.vue
+++ b/components/ISCNTypeIcon.vue
@@ -20,7 +20,7 @@ export enum RecordType {
 
 @Component
 export default class ISCNTypeIcon extends Vue {
-  @Prop(String) readonly type!: String | undefined
+  @Prop({ default: 'CreativeWork' }) readonly type!: String | undefined
 
   get recordType() {
     switch (this.type) {
diff --git a/components/IscnRegisterForm.vue b/components/IscnRegisterForm.vue
index e7502ddd..13f7a124 100644
--- a/components/IscnRegisterForm.vue
+++ b/components/IscnRegisterForm.vue
@@ -188,7 +188,7 @@
       <!-- header -->
       <Label
         class="w-min mb-[16px]"
-        :text="type"
+        :text="$t('IscnRegisterForm.label.content')"
         tag="div"
         preset="p5"
         valign="middle"
@@ -196,7 +196,7 @@
         prepend-class="text-like-green"
       >
         <template #prepend>
-          <ISCNTypeIcon :type="type" />
+          <ISCNTypeIcon />
         </template>
       </Label>
       <!-- form fieldset -->
@@ -223,6 +223,17 @@
               :placeholder="$t('IscnRegisterForm.placeholder.description')"
             />
           </FormField>
+          <FormField
+            :label="$t('IscnRegisterForm.label.type')"
+            class="mb-[12px]"
+          >
+            <Selector
+              class="h-[40px] w-[52px] ml-[8px]"
+              :options="typeOptions"
+              :placeholder="defaultType"
+              @input="setType"
+            />
+          </FormField>
           <FormField
             :label="$t('IscnRegisterForm.label.author')"
             content-classes="flex flex-row flex-wrap"
@@ -657,6 +668,7 @@ export default class IscnRegisterForm extends Vue {
   authorDescription: string = ''
   contentFingerprintInput: string = ''
   customContentFingerprints: string[] = []
+  type: string = this.defaultType
 
   arweaveFeeTargetAddress: string = ''
   arweaveFee = new BigNumber(0)
@@ -685,6 +697,12 @@ export default class IscnRegisterForm extends Vue {
   charactersLimit = CharactersLimit
 
   showUploadOnly = this.isUploadOnly
+  typeOptions = [
+    'Book',
+    'Photo',
+    'Image',
+    'Creative',
+  ]
 
   get tagsString(): string {
     return this.tags.join(',')
@@ -716,7 +734,7 @@ export default class IscnRegisterForm extends Vue {
     return this.exifInfo && this.exifInfo.ExifImageWidth
   }
 
-  get type() {
+  get defaultType() {
     if (this.isPhoto) return 'Photo'
     if (this.isImage) return 'Image'
     return 'CreativeWork'
@@ -980,6 +998,10 @@ export default class IscnRegisterForm extends Vue {
     this.authorName = value
   }
 
+  setType(value: string) {
+    this.type = value
+  }
+
   async getLikerIdsAddresses(): Promise<void> {
     try {
       this.likerIdsAddresses = await Promise.all(
diff --git a/components/Selector.vue b/components/Selector.vue
index 22baa95f..0c7975b1 100644
--- a/components/Selector.vue
+++ b/components/Selector.vue
@@ -1,46 +1,44 @@
 <template>
-  <button :class="selectorWapper" @blur="isOpenOptions = false">
-    <div
-      class="h-[100%] w-[100%] flex flex-row items-center justify-center"
-      @click="isOpenOptions = !isOpenOptions"
-    >
-      {{ placeholder }}
-      <IconArrowDown />
-    </div>
-    <div
-      v-if="isOpenOptions && options.length"
-      class="
-        w-[280px]
-        absolute
-        buttom-0
-        bg-white
-        border-shade-gray border-[1px]
-        rounded-[24px]
-        text-dark-gray text-left
-        mt-[8px]
-        p-[24px]
-      "
-    >
+  <div class="flex items-stretch w-[160px] border-[2px] border-medium-gray rounded-[12px] hover:bg-light-gray">
+    <button :class="selectorWrapper" @blur.prevent="isOpenOptions = false">
       <div
-        v-for="(option, i) of options"
-        :key="i"
+        class="flex items-center justify-between whitespace-nowrap px-[12px]"
+        @click.prevent="isOpenOptions = !isOpenOptions"
+      >
+        {{ currentValue }}
+        <IconArrowDown />
+      </div>
+      <div
+        v-if="isOpenOptions && options.length"
         class="
-          pt-[4px]
-          pl-[4px]
-          pr-[4px]
-          transition
-          duration-100
-          cursor-pointer
-          hover:bg-light-gray
-          active:bg-shade-gray
+          absolute
+          bg-white
+          border-shade-gray border-[1px]
+          rounded-[24px]
+          text-dark-gray text-left
+          mt-[8px]
+          p-[12px]
         "
-        @click="handleSelectValue(option)"
       >
-        <div class="py-[8px]">{{ option }}</div>
-        <IconDiver v-if="i !== options.length - 1" />
+        <div
+          v-for="(option, i) of options"
+          :key="i"
+          class="
+            pt-[4px]
+            transition
+            duration-100
+            cursor-pointer
+            hover:bg-light-gray
+            active:bg-shade-gray
+          "
+          @click.prevent="handleSelectValue(option)"
+        >
+          <div class="py-[8px]">{{ option }}</div>
+          <IconDiver v-if="i !== options.length - 1" />
+        </div>
       </div>
-    </div>
-  </button>
+    </button>
+  </div>
 </template>
 
 <script lang="ts">
@@ -59,17 +57,17 @@ export default class Selector extends Vue {
 
   isOpenOptions: boolean = false
   selected: string = ''
+  value: string = ''
 
-  get selectorWapper() {
+  get selectorWrapper() {
     return [
+      'w-[100%]',
       'block',
       'relative',
-      'bg-shade-gray',
       'rounded-[12px]',
       {
         'text-left': this.placeholder,
       },
-      this.isOpenOptions ? 'bg-medium-gray' : 'hover:bg-light-gray',
       'outline-none',
       'transition',
       'duration-150',
@@ -77,8 +75,14 @@ export default class Selector extends Vue {
     ]
   }
 
+  get currentValue(){
+    return this.value || this.placeholder
+  }
+
+
   handleSelectValue(value: string) {
     this.isOpenOptions = false
+    this.value = value
     this.$emit('input', value)
   }
 }
diff --git a/locales/en.json b/locales/en.json
index 1b27562d..d6b98ba9 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -218,6 +218,8 @@
   "IscnRegisterForm.label.numbersProtocol.details.link": "Numbers Protocol",
   "IscnRegisterForm.label.registrant": "Registrant",
   "IscnRegisterForm.label.tags": "Tags",
+  "IscnRegisterForm.label.type": "Type",
+  "IscnRegisterForm.label.content": "Content Info",
   "IscnRegisterForm.label.uploading": "Loading files...",
   "IscnRegisterForm.label.url": "URL",
   "IscnRegisterForm.label.wallet": "Wallet Address",

From c22730ac5f7a7cefc40f0e6cc09f963c8c24aa70 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Tue, 17 Oct 2023 22:00:02 +0800
Subject: [PATCH 4/6] =?UTF-8?q?=F0=9F=92=84=20Add=20author=20info=20to=20s?=
 =?UTF-8?q?takeholders?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/IscnRegisterForm.vue | 108 +++++++++++++++++++++++++-------
 locales/en.json                 |   1 +
 pages/nft/url/index.vue         |   1 +
 utils/cosmos/iscn/iscn.type.ts  |   1 +
 utils/cosmos/iscn/sign.ts       |   2 +
 5 files changed, 92 insertions(+), 21 deletions(-)

diff --git a/components/IscnRegisterForm.vue b/components/IscnRegisterForm.vue
index 13f7a124..f76d0579 100644
--- a/components/IscnRegisterForm.vue
+++ b/components/IscnRegisterForm.vue
@@ -234,8 +234,39 @@
               @input="setType"
             />
           </FormField>
+          <Divider class="my-[12px]" />
           <FormField
             :label="$t('IscnRegisterForm.label.author')"
+            class="mb-[12px]"
+          >
+            <span
+              v-if="author.name"
+              class="mr-[8px] mb-[4px]"
+            >
+              <Button
+                size="mini"
+                preset="secondary"
+                tag="div"
+                text-preset="h6"
+                type="button"
+                :text="author.name"
+                @click="editAuthor({ type: 'author' })"
+              />
+            </span>
+            <Button
+              v-else
+              type="button"
+              class="mb-[4px]"
+              size="mini"
+              preset="secondary"
+              content-class="py-[4px]"
+              @click="handleOpenAuthorDialog({ type: 'author' })"
+            >
+              <IconAddMini />
+            </Button>
+          </FormField>
+          <FormField
+            :label="$t('IscnRegisterForm.label.stakeholder')"
             content-classes="flex flex-row flex-wrap"
           >
             <!-- add author -->
@@ -251,7 +282,7 @@
                 text-preset="h6"
                 type="button"
                 :text="author.name"
-                @click="editAuthor(index)"
+                @click="editAuthor({ type: 'stakeholder', index })"
               />
             </span>
             <Button
@@ -260,13 +291,13 @@
               size="mini"
               preset="secondary"
               content-class="py-[4px]"
-              @click="handleOpenAuthorDialog"
+              @click="handleOpenAuthorDialog({ type: 'stakeholder' })"
             >
               <IconAddMini />
             </Button>
           </FormField>
-          <!-- add tags -->
           <Divider class="my-[12px]" />
+          <!-- add tags -->
           <FormField
             :label="$t('IscnRegisterForm.label.tags')"
             content-classes="flex flex-row flex-wrap"
@@ -277,7 +308,6 @@
               :tags-limit="charactersLimit.tagNumber"
             />
           </FormField>
-          <Divider class="my-[12px]" />
           <FormField
             :label="$t('IscnRegisterForm.label.url')"
             class="mb-[12px]"
@@ -434,11 +464,6 @@
               class="w-[219px]"
               :placeholder="$t('IscnRegisterForm.placeholder.name')"
             />
-            <!-- hide for now -->
-            <!-- <Selector
-              class="h-[40px] w-[52px] ml-[8px]"
-              @input="setAuthorName"
-            /> -->
           </FormField>
           <FormField class="mb-[16px]" :label="$t('IscnRegisterForm.label.likerID')">
             <TextField
@@ -629,6 +654,11 @@ export enum CharactersLimit {
   url = 2048,
 }
 
+export enum AuthorDialogType {
+  author = 'author',
+  stakeholder = 'stakeholder'
+}
+
 @Component
 export default class IscnRegisterForm extends Vue {
   @Prop({ default: false }) readonly isImage!: boolean
@@ -648,6 +678,13 @@ export default class IscnRegisterForm extends Vue {
   @walletModule.Getter('getSigner') signer!: OfflineSigner | null
   @walletModule.Action('initIfNecessary') initIfNecessary!: () => Promise<any>
 
+  author: Author = {
+    name: '',
+    url: [],
+    wallet: [],
+    likerId: '',
+    authorDescription: '',
+  }
 
   authors: Author[] = []
   name: string = ''
@@ -704,6 +741,8 @@ export default class IscnRegisterForm extends Vue {
     'Creative',
   ]
 
+  currentAuthorDialogType: AuthorDialogType = AuthorDialogType.stakeholder
+
   get tagsString(): string {
     return this.tags.join(',')
   }
@@ -825,6 +864,7 @@ export default class IscnRegisterForm extends Vue {
       arweaveId: this.uploadArweaveId || this.arweaveId,
       numbersProtocolAssetId: this.numbersProtocolAssetId,
       fileSHA256: this.fileSHA256,
+      author: this.author.name,
       authorNames: this.authorNames,
       authorUrls: this.authorUrls,
       authorWallets: this.authorWalletAddresses,
@@ -919,24 +959,47 @@ export default class IscnRegisterForm extends Vue {
     this.customContentFingerprints.push(this.contentFingerprintInput)
   }
 
-  handleOpenAuthorDialog() {
-    logTrackerEvent(this, 'ISCNCreate', 'OpenAuthorDialog', '', 1);
+  handleOpenAuthorDialog({ type }: { type: AuthorDialogType }) {
     this.checkedAuthorInfo = false
     this.isOpenAuthorDialog = true
     this.initAuthorInfo()
+    switch (type) {
+      case AuthorDialogType.author:
+        logTrackerEvent(this, 'ISCNCreate', 'OpenAuthorDialog', '', 1)
+        this.currentAuthorDialogType = AuthorDialogType.author
+        break
+
+      case AuthorDialogType.stakeholder:
+      default:
+        logTrackerEvent(this, 'ISCNCreate', 'OpenStakeholderDialog', '', 1)
+        this.currentAuthorDialogType = AuthorDialogType.stakeholder
+        break
+    }
   }
 
-  editAuthor(index: number) {
-    logTrackerEvent(this, 'ISCNCreate', 'EditAuthor', index.toString(), 1);
-    const { name, wallet, url, likerId, authorDescription } =
-      this.authors[index]
-    this.authorName = name
-    this.authorWalletAddress = wallet
-    this.authorUrl = url
-    this.likerId = likerId
-    this.authorDescription = authorDescription
-    this.activeEditingAuthorIndex = index
+  editAuthor({ type = AuthorDialogType.stakeholder, index }: { type: AuthorDialogType; index: any }) {
     this.isOpenAuthorDialog = true
+
+    if (type === AuthorDialogType.author) {
+      logTrackerEvent(this, 'ISCNCreate', 'EditAuthor', '', 1)
+      const { name, wallet, url, likerId, authorDescription } = this.author
+      this.authorName = name
+      this.authorWalletAddress = wallet
+      this.authorUrl = url
+      this.likerId = likerId
+      this.authorDescription = authorDescription
+      this.activeEditingAuthorIndex = this.authors.findIndex(author => author.name === name);
+    } else {
+      logTrackerEvent(this, 'ISCNCreate', 'EditStakeholder', index.toString(), 1)
+      const { name, wallet, url, likerId, authorDescription } =
+        this.authors[index]
+      this.authorName = name
+      this.authorWalletAddress = wallet
+      this.authorUrl = url
+      this.likerId = likerId
+      this.authorDescription = authorDescription
+      this.activeEditingAuthorIndex = index
+    }
   }
 
   dismissAuthorDialog() {
@@ -977,6 +1040,9 @@ export default class IscnRegisterForm extends Vue {
       likerId: this.likerId,
       authorDescription: this.authorDescription,
     }
+    if (this.currentAuthorDialogType === AuthorDialogType.author) {
+      this.author = newAuthor
+    }
     if (this.activeEditingAuthorIndex >= 0) {
       this.authors.splice(this.activeEditingAuthorIndex, 1, newAuthor)
     } else {
diff --git a/locales/en.json b/locales/en.json
index d6b98ba9..7c064312 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -205,6 +205,7 @@
   "IscnRegisterForm.guide.review": "Review and edit metadata",
   "IscnRegisterForm.ipfs.link": "ipfs://{hash}",
   "IscnRegisterForm.label.author": "Author",
+  "IscnRegisterForm.label.stakeholder": "Stakeholders",
   "IscnRegisterForm.label.description": "Description",
   "IscnRegisterForm.label.emptyFile": "No Content",
   "IscnRegisterForm.label.fingerprints": "Content Fingerprints",
diff --git a/pages/nft/url/index.vue b/pages/nft/url/index.vue
index 3362f700..98d25eb7 100644
--- a/pages/nft/url/index.vue
+++ b/pages/nft/url/index.vue
@@ -297,6 +297,7 @@ export default class FetchIndex extends Vue {
       ipfsHash: this.ipfsHash,
       arweaveId: this.arweaveId,
       fileSHA256: '',
+      author,
       authorNames: [author],
       authorUrls: [[]],
       authorWallets: [[{
diff --git a/utils/cosmos/iscn/iscn.type.ts b/utils/cosmos/iscn/iscn.type.ts
index dbe65ca7..50abb4f9 100644
--- a/utils/cosmos/iscn/iscn.type.ts
+++ b/utils/cosmos/iscn/iscn.type.ts
@@ -13,6 +13,7 @@ export interface ISCNRegisterPayload {
   fileSHA256: string;
   type: string;
   publisher?: string,
+  author: string;
   authorNames: string[];
   authorUrls: string[][];
   authorWallets: any[][];
diff --git a/utils/cosmos/iscn/sign.ts b/utils/cosmos/iscn/sign.ts
index dfb68c1d..ba43299e 100644
--- a/utils/cosmos/iscn/sign.ts
+++ b/utils/cosmos/iscn/sign.ts
@@ -35,6 +35,7 @@ export function formatISCNTxPayload(payload: ISCNRegisterPayload): ISCNSignPaylo
     ipfsHash,
     arweaveId,
     fileSHA256,
+    author,
     authorNames,
     authorUrls,
     authorWallets,
@@ -126,6 +127,7 @@ export function formatISCNTxPayload(payload: ISCNRegisterPayload): ISCNSignPaylo
 
   return {
     ...data,
+    author,
     keywords: tagsString.split(','),
     usageInfo: license,
     contentFingerprints: [...new Set(contentFingerprints)],

From ba0aafa93e8cd7054c0025afb7b95e5efb59b9e5 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Tue, 17 Oct 2023 22:29:59 +0800
Subject: [PATCH 5/6] =?UTF-8?q?=F0=9F=92=84=20Update=20license=20field=20t?=
 =?UTF-8?q?o=20selector?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/IscnRegisterForm.vue | 60 +++++++++++++++++++--------------
 components/Selector.vue         |  3 +-
 2 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/components/IscnRegisterForm.vue b/components/IscnRegisterForm.vue
index f76d0579..260b396f 100644
--- a/components/IscnRegisterForm.vue
+++ b/components/IscnRegisterForm.vue
@@ -223,21 +223,9 @@
               :placeholder="$t('IscnRegisterForm.placeholder.description')"
             />
           </FormField>
-          <FormField
-            :label="$t('IscnRegisterForm.label.type')"
-            class="mb-[12px]"
-          >
-            <Selector
-              class="h-[40px] w-[52px] ml-[8px]"
-              :options="typeOptions"
-              :placeholder="defaultType"
-              @input="setType"
-            />
-          </FormField>
           <Divider class="my-[12px]" />
           <FormField
             :label="$t('IscnRegisterForm.label.author')"
-            class="mb-[12px]"
           >
             <span
               v-if="author.name"
@@ -328,14 +316,26 @@
             />
           </FormField>
           <Divider class="my-[12px]" />
+          <FormField
+            :label="$t('IscnRegisterForm.label.type')"
+            class="mb-[12px]"
+          >
+            <Selector
+              class="h-[40px] w-[160px]"
+              :options="typeOptions"
+              :placeholder="defaultType"
+              @input="setType"
+            />
+          </FormField>
           <FormField
             :label="$t('IscnRegisterForm.label.license')"
             class="mb-[12px]"
           >
-            <TextField
-              v-model="license"
-              :error-message="validateField(license, charactersLimit.license)"
-              :placeholder="$t('IscnRegisterForm.placeholder.license')"
+            <Selector
+              class="h-[40px] w-[320px]"
+              :options="licenseOptions"
+              :placeholder="license"
+              @input="setLicense"
             />
           </FormField>
           <Divider class="my-[12px]" />
@@ -650,7 +650,6 @@ export enum CharactersLimit {
   authorDescription = 200,
   likerIdLeast = 7,
   likerId = 20,
-  license = 200,
   url = 2048,
 }
 
@@ -678,6 +677,18 @@ export default class IscnRegisterForm extends Vue {
   @walletModule.Getter('getSigner') signer!: OfflineSigner | null
   @walletModule.Action('initIfNecessary') initIfNecessary!: () => Promise<any>
 
+ typeOptions = [
+    'Book',
+    'Photo',
+    'Image',
+    'Creative',
+  ]
+
+  licenseOptions = [
+    'Copyright. All rights reserved.',
+    'CC BY 4.0',
+  ]
+
   author: Author = {
     name: '',
     url: [],
@@ -692,7 +703,7 @@ export default class IscnRegisterForm extends Vue {
   tags: string[] = []
   sameAs: string[] = []
   url: string = ''
-  license: string = ''
+  license: string = this.licenseOptions[0]
   authorName: string = ''
   authorUrl: string[] = []
   authorWalletAddress: string[] = []
@@ -734,12 +745,6 @@ export default class IscnRegisterForm extends Vue {
   charactersLimit = CharactersLimit
 
   showUploadOnly = this.isUploadOnly
-  typeOptions = [
-    'Book',
-    'Photo',
-    'Image',
-    'Creative',
-  ]
 
   currentAuthorDialogType: AuthorDialogType = AuthorDialogType.stakeholder
 
@@ -932,8 +937,7 @@ export default class IscnRegisterForm extends Vue {
       this.name &&
       this.description &&
       this.name.length <= CharactersLimit.name &&
-      this.description.length <= CharactersLimit.description &&
-      this.license.length <= CharactersLimit.license
+      this.description.length <= CharactersLimit.description
     )
   }
 
@@ -1068,6 +1072,10 @@ export default class IscnRegisterForm extends Vue {
     this.type = value
   }
 
+  setLicense(value: string) {
+    this.license = value
+  }
+
   async getLikerIdsAddresses(): Promise<void> {
     try {
       this.likerIdsAddresses = await Promise.all(
diff --git a/components/Selector.vue b/components/Selector.vue
index 0c7975b1..244b6e42 100644
--- a/components/Selector.vue
+++ b/components/Selector.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-stretch w-[160px] border-[2px] border-medium-gray rounded-[12px] hover:bg-light-gray">
+  <div class="flex items-stretch border-[2px] border-medium-gray rounded-[12px] hover:bg-light-gray">
     <button :class="selectorWrapper" @blur.prevent="isOpenOptions = false">
       <div
         class="flex items-center justify-between whitespace-nowrap px-[12px]"
@@ -18,6 +18,7 @@
           text-dark-gray text-left
           mt-[8px]
           p-[12px]
+          z-50
         "
       >
         <div

From fda417d57c27bebb3956b73f4a069c034e12df6a Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Wed, 18 Oct 2023 02:15:51 +0800
Subject: [PATCH 6/6] =?UTF-8?q?=F0=9F=92=84=20Add=20fileName=20&=20fileTyp?=
 =?UTF-8?q?e=20info=20for=20sameAs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/IscnRegisterForm.vue | 80 +++++++++++++++++++++++++++++----
 locales/en.json                 |  4 ++
 2 files changed, 76 insertions(+), 8 deletions(-)

diff --git a/components/IscnRegisterForm.vue b/components/IscnRegisterForm.vue
index 260b396f..a7082abb 100644
--- a/components/IscnRegisterForm.vue
+++ b/components/IscnRegisterForm.vue
@@ -306,14 +306,35 @@
             />
           </FormField>
           <FormField
+            v-if="arweaveLinks.length"
             :label="$t('IscnRegisterForm.label.sameAs')"
             content-classes="flex flex-row flex-wrap"
           >
-            <EditableTagList
-              v-model="sameAs"
-              :characters-limit="charactersLimit.url"
-              :tags-limit="charactersLimit.tagNumber"
-            />
+            <div v-for="({ url }, index) of sameAsList" :key="url" class="flex flex-col w-full">
+              <div class="flex flex-col p-[8px] rounded-[8px] border-[2px] border-shade-gray gap-[8px] mb-[12px]">
+                <Label :class="['text-[12px]', 'text-medium-gray',{ '!text-like-green' : formattedSameAsList[index] }]" :text="formattedSameAsList[index] || url" />
+                <div class="flex items-center justify-start gap-[12px]">
+                  <div class="flex gap-[4px]">
+                    <Label preset="h5" class="text-dark-gray" :text="$t('IscnRegisterForm.label.fileName')" />
+                    <input
+                      v-model="sameAsList[index].fileName"
+                      class="bg-transparent border-b-2 outline-none border-medium-gray"
+                      :placeholder="$t('IscnRegisterForm.placeholder.fileName')"
+                    />
+                  </div>
+                  <div class="flex gap-[4px]">
+                    <Label preset="h5" class="text-dark-gray" :text="$t('IscnRegisterForm.label.fileType')" />
+                    <Selector
+                      class="h-[30px] w-[80px]"
+                      :options="fileTypeOptions"
+                      :placeholder="sameAsList[index].fileType || fileTypeOptions[0]"
+                      @input="(value) => { sameAsList[index].fileType = value }"
+                    />
+                  </div>
+                </div>
+                <span class="text-red text-[10px]">{{ validateField(sameAsList[index].fileName, charactersLimit.fileName, true) }}</span>
+              </div>
+            </div>
           </FormField>
           <Divider class="my-[12px]" />
           <FormField
@@ -420,7 +441,7 @@
           {{ $t('IscnRegisterForm.error.buy') }}
         </Link>
       </Snackbar>
-      <!-- Dialog -->
+      <!-- Dialogs -->
       <Dialog
         v-model="isOpenAuthorDialog"
         :has-padding="false"
@@ -643,7 +664,7 @@ const walletModule = namespace('wallet')
 
 export enum CharactersLimit {
   name = 100,
-  description = 200,
+  description = 800,
   tagContent = 35,
   tagNumber = 10,
   authorName = 40,
@@ -651,6 +672,7 @@ export enum CharactersLimit {
   likerIdLeast = 7,
   likerId = 20,
   url = 2048,
+  fileName = 15
 }
 
 export enum AuthorDialogType {
@@ -689,6 +711,14 @@ export default class IscnRegisterForm extends Vue {
     'CC BY 4.0',
   ]
 
+  fileTypeOptions=[
+    'epub',
+    'pdf',
+    'mp3',
+    'jpg',
+    'png',
+  ]
+
   author: Author = {
     name: '',
     url: [],
@@ -747,6 +777,7 @@ export default class IscnRegisterForm extends Vue {
   showUploadOnly = this.isUploadOnly
 
   currentAuthorDialogType: AuthorDialogType = AuthorDialogType.stakeholder
+  sameAsList: any = []
 
   get tagsString(): string {
     return this.tags.join(',')
@@ -792,6 +823,29 @@ export default class IscnRegisterForm extends Vue {
     return this.$t('IscnRegisterForm.arweave.link', { arweaveId: this.uploadArweaveId })
   }
 
+  get arweaveLinks() {
+    const arLinks = this.customContentFingerprints.filter((link) =>
+      link.startsWith('ar://'),
+    )
+    const array=[]
+    if (this.uploadArweaveId) {
+      array.push(this.formattedArweave)
+    }
+    if(arLinks.length){
+      array.push(...arLinks)
+    }
+    return array
+  }
+
+  get formattedSameAsList() {
+  return this.sameAsList.map((sameAs: { fileName: any; fileType: any; url: any }) => {
+    if (sameAs.fileName && sameAs.fileType) {
+      return `${sameAs.url}?name=${sameAs.fileName}.${sameAs.fileType}`;
+    }
+    return '';
+  });
+}
+
   get errorMsg() {
     switch (this.error) {
       case 'INSUFFICIENT_BALANCE':
@@ -861,7 +915,7 @@ export default class IscnRegisterForm extends Vue {
       name: this.name,
       description: this.description,
       tagsString: this.tagsString,
-      sameAs: this.sameAs,
+      sameAs: this.formattedSameAsList,
       url: this.url,
       exifInfo: this.exif,
       license: this.license,
@@ -951,6 +1005,15 @@ export default class IscnRegisterForm extends Vue {
     if (errormsg) this.isOpenWarningSnackbar = true
   }
 
+  @Watch('arweaveLinks')
+  setSameAsList() {
+    this.sameAsList = this.arweaveLinks.map((url) => ({
+      url,
+      fileName: '',
+      fileType: this.fileTypeOptions[0],
+    }))
+  }
+
   async mounted() {
     this.uploadStatus = 'loading'
     await this.estimateArweaveFee();
@@ -961,6 +1024,7 @@ export default class IscnRegisterForm extends Vue {
 
   addContentFingerprint() {
     this.customContentFingerprints.push(this.contentFingerprintInput)
+    this.contentFingerprintInput = ''
   }
 
   handleOpenAuthorDialog({ type }: { type: AuthorDialogType }) {
diff --git a/locales/en.json b/locales/en.json
index 7c064312..74c0ecd0 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -214,6 +214,8 @@
   "IscnRegisterForm.label.likerID": "LikerID",
   "IscnRegisterForm.label.sameAs" : "Same As URLs",
   "IscnRegisterForm.label.name": "Name",
+  "IscnRegisterForm.label.fileName": "File name:",
+  "IscnRegisterForm.label.fileType": "File type:",
   "IscnRegisterForm.label.numbersProtocol": "Numbers Protocol",
   "IscnRegisterForm.label.numbersProtocol.details": "Register your asset in {link}",
   "IscnRegisterForm.label.numbersProtocol.details.link": "Numbers Protocol",
@@ -229,6 +231,8 @@
   "IscnRegisterForm.placeholder.license": "License",
   "IscnRegisterForm.placeholder.likerID": "LikerID",
   "IscnRegisterForm.placeholder.name": "Name",
+  "IscnRegisterForm.placeholder.fileName": "File Name (en)",
+  "IscnRegisterForm.placeholder.fileType": "File Type",
   "IscnRegisterForm.placeholder.url": "URL",
   "IscnRegisterForm.placeholder.wallet": "Wallet Address",
   "IscnRegisterForm.quitAlertDialog.confirm": "Cancel Registration",