Search options at Places list. (suggested by : Berit)

document/user_comments/berit/.~lock.VIPS app feedback from Berit.docx#

-,wildfly,bhabesh-HP-NIBIO-Ubuntu.hitronhub.home,02.08.2021 18:26,file:///home/wildfly/.config/libreoffice/4;
\ No newline at end of file
+,wildfly,bhabesh-HP-NIBIO-Ubuntu.hitronhub.home,04.08.2021 21:48,file:///home/wildfly/.config/libreoffice/4;
\ No newline at end of file

src/components/PlacesList.vue

@@ -7,6 +7,10 @@
           </router-link>
     </div>  
     <div class="container">
+          <div class="row">
+              <div> {{ $t('prop.places.search.label') }} &nbsp;</div> <div><input type="text" v-model.trim="textSearch" @input="search"> </div>
+          </div>
+          <br>
             <router-link  class="row fw-bold" ref='linkMapPoi' :to="{name:'MapPOI', params: {pointOfInterestId:poi.pointOfInterestId}}" v-bind:class="{'text-danger':poi.isNew, 'text-primary':poi.toUpload, 'text-secondary':poi.isDeleted}"  v-for="poi in listPOI" v-bind:key="poi.pointOfInterestId">
                 <div v-if="poi.isDeleted">
                     <strike> <div ><h5>{{poi.name}}</h5></div> </strike>
@@ -39,14 +43,17 @@ import '@fortawesome/fontawesome-free/js/all.js'
 
 export default {
   name: 'PlacesList',
+  components  :   {CommonUtil},
   data () {
     return {
       msg               : 'Mine steder',
       CONST_URL_DOMAIN  : '',
       listPOI           : [],
+      textSearch        : null,
     }
   },
-  components  :   {CommonUtil},
+
+  
     methods : {
                 fetchFromServer()
                 {
@@ -63,9 +70,8 @@ export default {
                         })
 
                 },
-                getPlacesList()
+                getPlacesList(lstPOI)
                 {
-                  let lstPOI = JSON.parse(localStorage.getItem(CommonUtil.CONST_STORAGE_POI_LIST));
                                 lstPOI.forEach(function(poi){
                                     if(poi.uploaded===false)
                                     {
@@ -87,6 +93,25 @@ export default {
 
                                 });                  
                   return lstPOI;
+                },
+
+                search()
+                {
+                  let lstPOI = JSON.parse(localStorage.getItem(CommonUtil.CONST_STORAGE_POI_LIST));
+                  if(this.textSearch)
+                    {
+                      let This = this;
+                     
+                      let lstPOISearch            = lstPOI.filter(function (poi){
+                                                        let poiName = poi.name;
+                                                        return poiName.indexOf(This.textSearch) != -1;
+                                                    });
+                      this.listPOI  = this.getPlacesList(lstPOISearch)
+                    }                  
+                  else
+                  {
+                    this.listPOI  = this.getPlacesList(lstPOI);
+                  }
                 }
 
     },
@@ -94,8 +119,8 @@ export default {
             this.CONST_URL_DOMAIN = CommonUtil.CONST_URL_DOMAIN;
             /** TODO fetch server should be used in sync process and not here */
             //this.fetchFromServer();
-
-            this.listPOI  = this.getPlacesList();
+            let lstPOI = JSON.parse(localStorage.getItem(CommonUtil.CONST_STORAGE_POI_LIST));
+            this.listPOI  = this.getPlacesList(lstPOI);
 
     }  
 }

src/locales/en.json

@@ -9,6 +9,8 @@
   "prop.logout.success.text"            :   "You successfully log out ",
 
   "prop.observation.date.label"         :   "Observation Date",
+
+  "prop.places.search.label"            :   "Search",
   
 
   "prop.login.systems.wrong.credential" :   "Wrong username and/or password. Please try again.",

src/locales/nb.json

@@ -10,6 +10,8 @@
 
   "prop.observation.date.label"         :   "Observation Date",
 
+  "prop.places.search.label"            :   "Search",
+
   "prop.login.systems.wrong.credential" :   "Wrong username and/or password. Please try again.",
   "prop.crop.category.empty.alert"      :   "Please select Crop category",