From 32e9277068529097607f7ceec43d8b0522e99948 Mon Sep 17 00:00:00 2001
From: lewa <lene.wasskog@nibio.no>
Date: Mon, 29 Apr 2024 11:23:42 +0200
Subject: [PATCH] feat: Use switches in crop category form, ensure categories
are loaded before display
---
src/components/CropCategory.vue | 52 ++++++++++++++++++++-------------
1 file changed, 32 insertions(+), 20 deletions(-)
diff --git a/src/components/CropCategory.vue b/src/components/CropCategory.vue
index f9c7d61..15c3a75 100644
--- a/src/components/CropCategory.vue
+++ b/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>
--
GitLab