Implemented static UI for Catalog page(#1uvvbc4)

changelogs/unreleased/-1uvvbc4.yml

@@ -0,0 +1,6 @@
+---
+title: Implemented static UI for Catalog page(#1uvvbc4)
+ticket_id: "#1uvvbc4"
+merge_request: 32
+author: Utkarshkaraiya
+type: added

src/router/index.ts

@@ -39,6 +39,10 @@ const routes: Array<RouteRecordRaw> = [
       {
         path: 'orders',
         component: () => import('@/views/Orders.vue')
+      },
+      {
+        path: 'catalog',
+        component: () => import('@/views/Catalog.vue')
       },
        {
         path: 'settings',

src/views/Catalog.vue

@@ -4,26 +4,62 @@
       <ion-toolbar>
         <ion-title>{{ $t("Catalog") }}</ion-title>
       </ion-toolbar>
-    </ion-header>
-
+    </ion-header>   
     <ion-content :fullscreen="true">
-
+      <ion-searchbar/>
+      <main>        
+        <ion-card v-for="items in 10" :key="items">
+          <Image/>
+            <ion-item lines="none">
+              <ion-label>
+                <p>Brand</p>
+                  Parent name
+                <p>$Sale price</p>
+              </ion-label>
+            </ion-item>          
+        </ion-card>
+      </main>
     </ion-content>
   </ion-page>
 </template>
 
 <script lang="ts">
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { 
+  IonCard,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonLabel,
+  IonPage,
+  IonSearchbar,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/vue';
 import { defineComponent } from 'vue';
+import Image from "../components/Image.vue"
 
 export default defineComponent({
   name: 'Catalog',
   components: {
+    Image,
+    IonCard,
     IonContent,
     IonHeader,
+    IonItem,
+    IonLabel,
     IonPage,
+    IonSearchbar,
     IonTitle,
-    IonToolbar
+    IonToolbar,
   }
 });
 </script>
+<style scoped>
+main{
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+    align-items: start;
+
+}
+
+</style>

src/views/Tabs.vue

@@ -2,6 +2,10 @@
   <ion-page>
     <ion-tabs>
       <ion-tab-bar slot="bottom">
+        <ion-tab-button tab="catalog" href="/tabs/catalog">
+          <ion-icon :icon="shirtOutline" />
+          <ion-label>{{ $t("Catalog") }}</ion-label>
+        </ion-tab-button>
         <ion-tab-button tab="orders" href="/tabs/orders">
           <ion-icon :icon="infiniteOutline" />
           <ion-label>{{ $t("Orders") }}</ion-label>
@@ -21,7 +25,8 @@ import { useRoute } from "vue-router";
 import { IonIcon, IonLabel, IonPage, IonTabBar, IonTabButton, IonTabs } from "@ionic/vue";
 import {
   infiniteOutline,
-  settings
+  settings,
+  shirtOutline,
 } from "ionicons/icons";
 
 export default {
@@ -31,7 +36,8 @@ export default {
     const route = useRoute();
     return {
       infiniteOutline,
-      settings
+      settings,
+      shirtOutline
     };
   }
 };