From d0823171f64f57b219eeb7433e843ee79411bddd Mon Sep 17 00:00:00 2001 From: Bashu Tiwari Date: Mon, 13 Dec 2021 22:41:08 +0530 Subject: [PATCH 01/13] Implemented trial for ion-skeleton-text (#1wf7518) --- src/router/index.ts | 7 +++ src/views/Search.vue | 100 +++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 103 insertions(+), 4 deletions(-) diff --git a/src/router/index.ts b/src/router/index.ts index 62e34bb1..8db0dc85 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from '@ionic/vue-router'; import { RouteRecordRaw } from 'vue-router'; import Home from '@/views/Home.vue' import Login from '@/views/Login.vue' +import Search from '@/views/Search.vue' import Settings from "@/views/Settings.vue" import store from '@/store' @@ -38,6 +39,12 @@ const routes: Array = [ component: Login, beforeEnter: loginGuard }, + { + path: '/search', + name: 'Search', + component: Search, + beforeEnter: authGuard + }, { path: "/settings", name: "Settings", diff --git a/src/views/Search.vue b/src/views/Search.vue index ca180723..2a434b25 100644 --- a/src/views/Search.vue +++ b/src/views/Search.vue @@ -17,6 +17,94 @@ + + + + + + + +

+ +

+

+ +

+

+ +

+
+
+ + + + + + +

+ +

+

+ +

+

+ +

+
+
+ + + + + + +

+ +

+

+ +

+

+ +

+
+
+ + + + + + +

+ +

+

+ +

+

+ +

+
+
+ + + + + + +

+ +

+

+ +

+

+ +

+
+
+ +
@@ -32,7 +120,8 @@ import { IonInfiniteScroll, IonInfiniteScrollContent, IonList, - IonListHeader + IonListHeader, + IonSkeletonText } from '@ionic/vue' import { defineComponent } from 'vue' import { mapGetters, useStore } from 'vuex' @@ -53,11 +142,13 @@ export default defineComponent({ IonInfiniteScrollContent, IonList, IonListHeader, - ProductListItem + ProductListItem, + IonSkeletonText }, data (){ return { - queryString: '' + queryString: '', + skeletal: false } }, computed: { @@ -73,9 +164,10 @@ export default defineComponent({ }) }, async loadMoreProducts (event: any) { + const viewSize: any = process.env.VUE_APP_VIEW_SIZE || 20 this.getProducts( undefined, - Math.ceil(this.products.length / process.env.VUE_APP_VIEW_SIZE).toString() + Math.ceil(this.products.length / viewSize).toString() ).then(() => { event.target.complete(); }) From 2c3732b3c942d92667b11c8c3cedf6be66c5ae72 Mon Sep 17 00:00:00 2001 From: Bashu Tiwari Date: Tue, 14 Dec 2021 16:48:12 +0530 Subject: [PATCH 02/13] Implemented code for skeletal text --- src/components/Image.vue | 23 ++++++++++++++++++----- src/components/ProductListItem.vue | 7 +++++-- src/locales/en.json | 3 +++ src/main.ts | 4 +++- src/store/modules/product/actions.ts | 4 ++-- src/views/Search.vue | 22 ++++++++++++++++++++-- 6 files changed, 51 insertions(+), 12 deletions(-) diff --git a/src/components/Image.vue b/src/components/Image.vue index 7dece471..54f3f194 100644 --- a/src/components/Image.vue +++ b/src/components/Image.vue @@ -1,14 +1,18 @@