@cybertale/form 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cybertale/form",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "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,8 +41,8 @@ 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]) {
@@ -49,6 +51,26 @@ export default class DataListComponent extends Vue {
     return ''
   }
 
+  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);
+    }
+  }
+
   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)) {
@@ -61,16 +83,6 @@ 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) }
@@ -93,7 +105,7 @@ 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)
   }
 
@@ -101,9 +113,20 @@ export default class DataListComponent extends Vue {
     if (this.object.Stats[this.statTypeEnum.Value] === undefined || id === undefined) { return false }
     return this.object.Stats[this.statTypeEnum.Value].Data === id.toString()
   }
+
+  isJSON (str: string): boolean {
+    let temp = null
+    try {
+      temp = JSON.parse(str)
+    } catch (e) {
+      return false
+    }
+    return Array.isArray(temp)
+  }
+
 }
-</script>
 
+</script>
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 </style>