feat: Use switches in crop category form, ensure categories are loaded before display

src/components/CropCategory.vue

@@ -26,10 +26,12 @@
       <div class="alert alert-info" role="alert">
         {{ $t("crop.category.empty.alert") }}
       </div>
-      <ul class="list-group" style="text-align: left">
+      <ul class="list-group">
         <li class="list-group-item" v-for="item in listCropCategoris">
-          <input type="checkbox" v-bind:value="item.cropCategoryId" v-model="listSelectedIds"/>
-          {{ getCropCategoryLocalName(item) }}
+          <div class="form-check form-switch">
+            <input class="form-check-input" type="checkbox" v-bind:value="item.cropCategoryId" v-model="listSelectedIds">
+            <label class="form-check-label" for="cropCategoryId">{{ getCropCategoryLocalName(item) }}</label>
+          </div>
         </li>
       </ul>
     </div>
@@ -57,9 +59,34 @@ export default {
     },
   },
   methods: {
+    // Must wait for crop categories and selected ids to be loaded into local storage
+    waitForCropCategories() {
+      let elapsed = 0;
+      const timeout = 4000;
+      const checkInterval = 200;
+      const checkData = setInterval(() => {
+        const categories = localStorage.getItem(CommonUtil.CONST_STORAGE_CROP_CATEGORY);
+        const selected = localStorage.getItem(CommonUtil.CONST_STORAGE_CROP_ID_LIST);
+
+        if (categories) {
+          this.listCropCategoris = JSON.parse(categories);
+          this.listSelectedIds = selected != null ? selected.split(",") : [];
+          if ((this.listSelectedIds).length > 0) {
+            this.isCropIdsNotAvailable = false;
+          }
+          clearInterval(checkData);
+        } else {
+          elapsed += checkInterval;
+          if (elapsed >= timeout) {
+            clearInterval(checkData)
+            console.error("Unable to get crop category information!")
+          }
+        }
+      }, checkInterval);
+    },
     getCropCategoryLocalName: function (cropCategory) {
       if (cropCategory.cropCategoryLocalSet != undefined) {
-        for (var i = 0; i < cropCategory.cropCategoryLocalSet.length; i++) {
+        for (let i = 0; i < cropCategory.cropCategoryLocalSet.length; i++) {
           if (cropCategory.cropCategoryLocalSet[i].cropCategoryLocalPK.locale == this.$i18n.locale) {
             return cropCategory.cropCategoryLocalSet[i].localName;
           }
@@ -70,22 +97,7 @@ export default {
   },
   mounted() {
     CommonUtil.setHeaderTitle(this.$i18n.t("cropcategory"));
-    if (localStorage.getItem(CommonUtil.CONST_STORAGE_CROP_CATEGORY)) {
-      this.listCropCategoris = JSON.parse(localStorage.getItem(CommonUtil.CONST_STORAGE_CROP_CATEGORY));
-    }
-
-    if (
-        null != localStorage.getItem(CommonUtil.CONST_STORAGE_CROP_ID_LIST) &&
-        localStorage.getItem(CommonUtil.CONST_STORAGE_CROP_ID_LIST) != "" &&
-        typeof localStorage.getItem(CommonUtil.CONST_STORAGE_CROP_ID_LIST) != "undefined"
-    ) {
-      this.listSelectedIds = localStorage.getItem(CommonUtil.CONST_STORAGE_CROP_ID_LIST).split(",");
-      if ((this.listSelectedIds).length > 0) {
-        this.isCropIdsNotAvailable = false;
-      }
-    }
-
-
+    this.waitForCropCategories();
   },
 };
 </script>