💄 Add fileName & fileType info for sameAs

likecoin · Oct 17, 2023 · fda417d · fda417d
1 parent ba0aafa
commit fda417d
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 8 deletions.
diff --git 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,14 +664,15 @@ const walletModule = namespace('wallet')
 
 export enum CharactersLimit {
   name = 100,
-  description = 200,
+  description = 800,
   tagContent = 35,
   tagNumber = 10,
   authorName = 40,
   authorDescription = 200,
   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
@@ -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",