Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Created the Static UI for the Ionic-Bopis App under the Orders Sections for open an packed segments. (#1tz5k7e) #6

Merged
merged 16 commits into from
Nov 18, 2021
Merged

Created the Static UI for the Ionic-Bopis App under the Orders Sections for open an packed segments. (#1tz5k7e) #6

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
fdc86cb
Created the new branch and creating the static ui for order fullfillm…
bashu22tiwari Nov 8, 2021
38f8876
Created a new branch and started with the static ui of order fulfillm…
bashu22tiwari Nov 8, 2021
ad5a5a6
Almost done with the static UI
bashu22tiwari Nov 8, 2021
2b24c88
Completed with the UI and required changes
bashu22tiwari Nov 9, 2021
a2e4d6f
Checked and made all the indentation correct
bashu22tiwari Nov 9, 2021
afcde8c
Implemented all the static text under Internationalization and import…
bashu22tiwari Nov 9, 2021
5f86997
Created the static UI for the packed segment
bashu22tiwari Nov 10, 2021
39daccc
Fixed all the reviews and full screen scrolling issue under the segme…
bashu22tiwari Nov 10, 2021
d309a1b
removed unwanted text from en.json file
bashu22tiwari Nov 10, 2021
3a84ac9
Optimized the code according to the comments
bashu22tiwari Nov 15, 2021
7df55eb
Changed component structuring according to code reviews
bashu22tiwari Nov 16, 2021
92b4e13
Changes as per code review
bashu22tiwari Nov 16, 2021
8fcba97
Code review changes
bashu22tiwari Nov 16, 2021
a838caa
Changed the normal image element to Custom Image Component
bashu22tiwari Nov 16, 2021
dfeaa7b
Reverted unwanted changes
adityasharma7 Nov 18, 2021
f6f4ca4
Reverted unwanted space
adityasharma7 Nov 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 12 additions & 6 deletions src/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
{
"Blank": "Blank",
"Catalog":"Catalog",
"Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
"Orders":"Orders",
"More":"More",
"Ready to create an app?": "Ready to create an app?",
"Start with Ionic": "Start with Ionic",
"UI Components": "UI Components"
"OPEN":"OPEN",
"PACKED":"PACKED",
"Color":"Color",
"Size":"Size",
"In Stock":"In Stock",
"Phone Number":"Phone Number",
"Email":"Email",
"Copy":"Copy",
"Search Orders":"Search Orders",
"Handover":"Handover",
"Ready For Pickup":"Ready For Pickup",
"More":"More"
}
279 changes: 271 additions & 8 deletions src/views/Orders.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,249 @@
<template>
<ion-page>

<ion-header :translucent="true">
<ion-toolbar>
<ion-title>{{ $t("Orders") }}</ion-title>
<ion-buttons slot="end">
<ion-button>
<ion-icon :icon="swapVerticalOutline" />
</ion-button>
</ion-buttons>
</ion-toolbar>


<ion-toolbar>
<ion-searchbar :placeholder="$t('Search Orders')"></ion-searchbar>
</ion-toolbar>

<ion-toolbar>
<ion-segment @ionChange="segmentChanged($event)" v-model="segmentName" >
<ion-segment-button value="open">
<ion-label>{{ $t("OPEN") }}</ion-label>
</ion-segment-button>
<ion-segment-button value="packed">
<ion-label>{{ $t("PACKED") }}</ion-label>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>

<ion-content :fullscreen="true">



<ion-content>
<div v-if="segmentName == 'open'">
<ion-card>
<ion-card-header>
<ion-item lines="none">
<ion-label>
<h2>Customer Name</h2>
<p>Customer Id</p>
</ion-label>
<ion-note slot="end">order time delta</ion-note>
</ion-item>
</ion-card-header>

<ion-card-content>
<ion-list>
<ion-item lines="none">
<ion-thumbnail slot="start">
<img src="https://images.all-free-download.com/images/graphicthumb/fashion_model_portrait_205201.jpg"/>
</ion-thumbnail>
<ion-label>
<h5>BRAND</h5>
<h2>Virtual Name</h2>
<p>{{ $t("Color") }} : color</p>
<p>{{ $t("Size") }} : size</p>
</ion-label>
<ion-note color="secondary">15 {{ $t("In Stock") }}</ion-note>
</ion-item>
<ion-item lines="full">
<ion-thumbnail slot="start">
<img src="https://images.all-free-download.com/images/graphicthumb/fashion_model_portrait_205201.jpg" />
</ion-thumbnail>
<ion-label>
<h5>BRAND</h5>
<h2>Virtual Name</h2>
<p>{{ $t("Color") }} : color</p>
<p>{{ $t("Size") }} : size</p>
</ion-label>
<ion-note color="secondary">15 {{ $t("In Stock") }}</ion-note>
</ion-item>
</ion-list>
</ion-card-content>

<ion-item>
<ion-icon :icon="callOutline" slot="start" />
<ion-label>{{ $t("Phone Number") }}</ion-label>
<ion-button fill="outline" slot="end" color="medium">
{{ $t("Copy") }}
</ion-button>
</ion-item>

<ion-item lines="full">
<ion-icon :icon="mailOutline" slot="start" />
<ion-label>{{ $t("Email") }}</ion-label>
<ion-button fill="outline" slot="end" color="medium">
{{ $t("Copy") }}
</ion-button>
</ion-item>

<div>
<ion-button fill="clear" slot="start">
{{ $t("Ready For Pickup") }}
</ion-button>
</div>
</ion-card>


<ion-card>
<ion-card-header>
<ion-item lines="none">
<ion-label>
<h2>Customer Name</h2>
<p>Customer Id</p>
</ion-label>
<ion-note slot="end">order time delta</ion-note>
</ion-item>
</ion-card-header>

<ion-card-content>
<ion-list>
<ion-item lines="none">
<ion-thumbnail slot="start">
<img src="https://images.all-free-download.com/images/graphicthumb/fashion_model_portrait_205201.jpg"/>
</ion-thumbnail>
<ion-label>
<h5>BRAND</h5>
<h2>Virtual Name</h2>
<p>{{ $t("Color") }} : color</p>
<p>{{ $t("Size") }} : size</p>
</ion-label>
<ion-note color="secondary">15 {{ $t("In Stock") }}</ion-note>
</ion-item>
<ion-item lines="full">
<ion-thumbnail slot="start">
<img src="https://images.all-free-download.com/images/graphicthumb/fashion_model_portrait_205201.jpg" />
</ion-thumbnail>
<ion-label>
<h5>BRAND</h5>
<h2>Virtual Name</h2>
<p>{{ $t("Color") }} : color</p>
<p>{{ $t("Size") }} : size</p>
</ion-label>
<ion-note color="secondary">15 {{ $t("In Stock") }}</ion-note>
</ion-item>
</ion-list>
</ion-card-content>

<ion-item>
<ion-icon :icon="callOutline" slot="start" />
<ion-label>{{ $t("Phone Number") }}</ion-label>
<ion-button fill="outline" slot="end" color="medium">
{{ $t("Copy") }}
</ion-button>
</ion-item>

<ion-item lines="full">
<ion-icon :icon="mailOutline" slot="start" />
<ion-label>{{ $t("Email") }}</ion-label>
<ion-button fill="outline" slot="end" color="medium">
{{ $t("Copy") }}
</ion-button>
</ion-item>

<div>
<ion-button fill="clear" slot="start">
{{ $t("Ready For Pickup") }}
</ion-button>
</div>
</ion-card>
</div>


<div v-if="segmentName == 'packed'">
<ion-card>

<ion-card-header>
<ion-item lines="none">
<ion-label>
<h2>Customer Name</h2>
<p>Customer Id</p>
</ion-label>
<ion-note slot="end">
<p>order time delta</p>
<p>packed time delta</p>
</ion-note>
</ion-item>
</ion-card-header>

<ion-card-content>
<ion-list>
<ion-item lines="full">
<ion-thumbnail slot="start">
<img src="https://images.all-free-download.com/images/graphicthumb/fashion_model_portrait_205201.jpg"/>
</ion-thumbnail>
<ion-label>
<h5>BRAND</h5>
<h2>Virtual Name</h2>
<p>{{ $t("Color") }} : color</p>
<p>{{ $t("Size") }} : size</p>
</ion-label>
<ion-note color="secondary">15 {{ $t("In Stock") }}</ion-note>
</ion-item>
</ion-list>
</ion-card-content>

<ion-item>
<ion-icon :icon="callOutline" slot="start" />
<ion-label>{{ $t("Phone Number") }}</ion-label>
<ion-button fill="outline" slot="end" color="medium">
{{ $t("Copy") }}
</ion-button>
</ion-item>

<ion-item lines="full">
<ion-icon :icon="mailOutline" slot="start" />
<ion-label>{{ $t("Email") }}</ion-label>
<ion-button fill="outline" slot="end" color="medium">
{{ $t("Copy") }}
</ion-button>
</ion-item>

<div>
<ion-button fill="clear" slot="start">
{{ $t("Handover") }}
</ion-button>
</div>
</ion-card>
</div>
</ion-content>
</ion-page>
</template>

<script lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
import { defineComponent } from 'vue';
import {
IonContent,
IonHeader,
IonPage,
IonCard,
IonNote,
IonCardContent,
IonLabel,
IonButton,
IonTitle,
IonToolbar,
IonSegment,
IonSegmentButton,
IonSearchbar,
IonItem,
IonIcon,
IonButtons,
IonCardHeader,
IonThumbnail,
IonList,
} from "@ionic/vue";
import { defineComponent, ref } from "vue";
import { swapVerticalOutline, callOutline, mailOutline } from "ionicons/icons";

export default defineComponent({
name: 'Orders',
Expand All @@ -23,7 +252,41 @@ export default defineComponent({
IonHeader,
IonPage,
IonTitle,
IonToolbar
}
IonToolbar,
IonSegmentButton,
IonSegment,
IonSearchbar,
IonCard,
IonItem,
IonLabel,
IonButton,
IonCardContent,
IonNote,
IonIcon,
IonButtons,
IonCardHeader,
IonThumbnail,
IonList,
},
methods: {
segmentChanged(ev: CustomEvent) {
console.log("Segment changed", ev);
},
},
setup() {
const segmentName = ref("open");
return {
swapVerticalOutline,
segmentName,
callOutline,
mailOutline,
};
},
});
</script>
</script>

<style scoped>



</style>