@cybertale/form 0.1.2 → 0.1.4

package/package.json

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

package/src/formComponents/DataListComponent.vue

@@ -2,7 +2,7 @@
   <input class="form-control" :list="object.Stats[statTypeEnum.BelongsTo].Data"
          :class="returnIfExists(statTypeEnum.Design) + ' ' + validate()"
          :required="attributeCheck(statTypeEnum.Required)"
-         :disabled="attributeCheck(statTypeEnum.Disabled)"
+         :disabled="disabledCheck(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 : ''}`"
          :placeholder="returnIfExists(statTypeEnum.Placeholder)"
@@ -43,23 +43,29 @@ export default class DataListComponent extends Vue {
   object!: ObjectTemplate
   displayOptions = false
   options: Option[] = []
+  loading = true
 
   returnIfExists (tag: number): string {
-    return this.object.Stats[tag]?.Data ?? ''
+    if (this.object.Stats[tag]) {
+      return this.object.Stats[tag].Data
+    }
+    return ''
   }
 
   async created() {
     await this.fetchOptions();
+    this.loading = false
   }
 
   // Extract the logic for fetching options data into a separate method
   async fetchOptions() {
+    console.log(this.object.Stats)
     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;
+        const response = await http.get(parsedObject.link + '/' + this.object.Stats[this.statTypeEnum.Name].Data)
+        this.options = response.data
+        this.object.Stats[this.statTypeEnum.ItemList].Data =  JSON.stringify(response.data)
       } else {
         this.options = JSON.parse(this.object.Stats[this.statTypeEnum.ItemList].Data);
       }
@@ -70,7 +76,7 @@ export default class DataListComponent extends Vue {
 
   getValue (statEnum: number, indexStatTypeEnum = StatTypeEnum.Option) : string {
     if (this.object.Stats[statEnum]) {
-      if (this.object.Stats[indexStatTypeEnum] && this.object.Stats[statEnum] && isValidJSON(this.object.Stats[statEnum].Data)) {
+      if (this.object.Stats[indexStatTypeEnum] && this.object.Stats[statEnum] && this.isJSON(this.object.Stats[statEnum].Data)) {
         const data = JSON.parse(this.object.Stats[statEnum].Data)
         return data[Number(this.object.Stats[indexStatTypeEnum].Data)]
       } else {
@@ -82,11 +88,20 @@ export default class DataListComponent extends Vue {
 
   get valueName (): string {
     const temp = this.options.find((option: any) => option.id === this.getValue(StatTypeEnum.Value, StatTypeEnum.ValueIndices))
-    return temp?.name ?? this.getValue(StatTypeEnum.Value, StatTypeEnum.ValueIndices)
+    if (!temp) { return this.getValue(StatTypeEnum.Value, StatTypeEnum.ValueIndices) }
+    return temp?.name
   }
 
   attributeCheck (statType : number) : boolean | string {
-    return this.object.Stats[statType]?.Data ?? false
+    if (this.object.Stats[statType] === undefined) { return false }
+    if (this.object.Stats[statType].Data === '') { return false }
+    return this.object.Stats[statType].Data
+  }
+
+  disabledCheck (statType : number) : boolean | string {
+    if (this.object.Stats[statType] === undefined) { return (false || this.loading) }
+    if (this.object.Stats[statType].Data === '') { return (false || this.loading) }
+    return this.object.Stats[statType].Data
   }
 
   validate () : string {
@@ -103,21 +118,23 @@ export default class DataListComponent extends Vue {
     this.regionType.RegionTypes[object.Region].ObjectTypes[object.ObjectEnum].ChooseSubType(object, value)
   }
 
-  isSelected (id : string) : boolean { //previously check
-    return this.object.Stats[this.statTypeEnum.Value]?.Data === id.toString()
+  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()
   }
 
-}
-
-// 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;
+  isJSON (str: string): boolean {
+    let temp = null
+    try {
+      temp = JSON.parse(str)
+    } catch (e) {
+      return false
+    }
+    return Array.isArray(temp)
   }
+
 }
+
 </script>
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>