@cybertale/form 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cybertale/form",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "ECS interface for Web Development, CyberTale edition.",
   "author": "Joso Marich <jspmari@proton.me>",
   "license": "GPL-3.0-only",

package/src/formComponents/DataListComponent.vue

@@ -4,24 +4,26 @@
          :required="attributeCheck(statTypeEnum.Required)"
          :disabled="attributeCheck(statTypeEnum.Disabled)"
          :type="returnIfExists(statTypeEnum.ElementType)"
-         :value="`${object?.Stats[statTypeEnum.Value].Data !== null?object.Stats[statTypeEnum.Value].Data.name === undefined?valueName:object.Stats[statTypeEnum.Value].Data.name:''}`"
+         :value="`${object?.Stats[statTypeEnum.Value].Data !== null ? object.Stats[statTypeEnum.Value].Data.name === undefined ? valueName : object.Stats[statTypeEnum.Value].Data.name : ''}`"
          :placeholder="returnIfExists(statTypeEnum.Placeholder)"
          @input="inputEvent(object as ObjectTemplate, $event.target.value)">
-  <datalist :id="object.Stats[statTypeEnum.BelongsTo].Data" v-if="dspStyle">
-    <option v-for="(item, key, index) in JSON.parse(object.Stats[statTypeEnum.ItemList].Data)" :selected="check(item.name)" :key="`${ key }-${ index }`" :value="item.name">{{item.name}}</option>
+  <datalist :id="object.Stats[statTypeEnum.BelongsTo].Data" v-if="displayOptions">
+    <option v-for="(option, index) in options" :key="index" :value="option.name">{{ option.name }}</option>
   </datalist>
   <div class="invalid-feedback order-1">{{ returnIfExists(statTypeEnum.ErrorMessage) }}</div>
 </template>
-
 <script lang="ts">
 import { Options, Vue } from 'vue-class-component'
 import { ObjectTemplate, ObjectType, ObjectTypeEnum, RegionEnum, RegionType, StatTypeEnum } from '@cybertale/interface'
+import http from '@/http-common'
 
 interface Option {
   id: number;
   name: string;
 }
 
+const MIN_SEARCH_LENGTH = 3;
+
 @Options({
   computed: {
     ObjectTemplate () {
@@ -39,19 +41,36 @@ export default class DataListComponent extends Vue {
   regionType = RegionType
   regionEnum = RegionEnum
   object!: ObjectTemplate
-  dspStyle = false
-  options: Option[] = JSON.parse(this.object.Stats[this.statTypeEnum.ItemList].Data)
+  displayOptions = false
+  options: Option[] = []
 
   returnIfExists (tag: number): string {
-    if (this.object.Stats[tag]) {
-      return this.object.Stats[tag].Data
+    return this.object.Stats[tag]?.Data ?? ''
+  }
+
+  async created() {
+    await this.fetchOptions();
+  }
+
+  // Extract the logic for fetching options data into a separate method
+  async fetchOptions() {
+    try {
+      const parsedObject: { link?: string } = JSON.parse(this.object.Stats[this.statTypeEnum.ItemList].Data)[0];
+      if (parsedObject.link) {
+        const response = await http.get(parsedObject.link + '/' + this.object.Stats[this.statTypeEnum.Name].Data);
+        this.options = response.data;
+        this.displayOptions = true;
+      } else {
+        this.options = JSON.parse(this.object.Stats[this.statTypeEnum.ItemList].Data);
+      }
+    } catch (error: any) {
+      console.error('Error fetching data:', error.message);
     }
-    return ''
   }
 
   getValue (statEnum: number, indexStatTypeEnum = StatTypeEnum.Option) : string {
     if (this.object.Stats[statEnum]) {
-      if (this.object.Stats[indexStatTypeEnum] && this.object.Stats[statEnum] && this.isJSON(this.object.Stats[statEnum].Data)) {
+      if (this.object.Stats[indexStatTypeEnum] && this.object.Stats[statEnum] && isValidJSON(this.object.Stats[statEnum].Data)) {
         const data = JSON.parse(this.object.Stats[statEnum].Data)
         return data[Number(this.object.Stats[indexStatTypeEnum].Data)]
       } else {
@@ -61,26 +80,13 @@ export default class DataListComponent extends Vue {
     return ''
   }
 
-  isJSON (str: string): boolean {
-    let temp = null
-    try {
-      temp = JSON.parse(str)
-    } catch (e) {
-      return false
-    }
-    return Array.isArray(temp)
-  }
-
   get valueName (): string {
     const temp = this.options.find((option: any) => option.id === this.getValue(StatTypeEnum.Value, StatTypeEnum.ValueIndices))
-    if (!temp) { return this.getValue(StatTypeEnum.Value, StatTypeEnum.ValueIndices) }
-    return temp?.name
+    return temp?.name ?? this.getValue(StatTypeEnum.Value, StatTypeEnum.ValueIndices)
   }
 
   attributeCheck (statType : number) : boolean | string {
-    if (this.object.Stats[statType] === undefined) { return false }
-    if (this.object.Stats[statType].Data === '') { return false }
-    return this.object.Stats[statType].Data
+    return this.object.Stats[statType]?.Data ?? false
   }
 
   validate () : string {
@@ -93,17 +99,26 @@ export default class DataListComponent extends Vue {
   }
 
   inputEvent (object: ObjectTemplate, value: string) : void {
-    this.dspStyle = value.length >= 3
+    this.displayOptions = value.length >= MIN_SEARCH_LENGTH
     this.regionType.RegionTypes[object.Region].ObjectTypes[object.ObjectEnum].ChooseSubType(object, value)
   }
 
-  check (id : string) : boolean {
-    if (this.object.Stats[this.statTypeEnum.Value] === undefined || id === undefined) { return false }
-    return this.object.Stats[this.statTypeEnum.Value].Data === id.toString()
+  isSelected (id : string) : boolean { //previously check
+    return this.object.Stats[this.statTypeEnum.Value]?.Data === id.toString()
   }
+
 }
-</script>
 
+// Utility function to check if a string is valid JSON
+function isValidJSON(str: string): boolean {
+  try {
+    JSON.parse(str);
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+</script>
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 </style>