Skip to content

Commit

Permalink
Merge pull request #11 from ymaheshwari1/#4-standard
Browse files Browse the repository at this point in the history 
Improved: UI for the app to use basic routing(#4)
  • Loading branch information
@ymaheshwari1
ymaheshwari1 authored Jan 10, 2024
2 parents d14d846 + b91321e commit 6e8217c
Show file tree
Hide file tree
Showing 6 changed files with 275 additions and 225 deletions.
14 changes: 3 additions & 11 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,15 @@
<template>
<ion-app>
<ion-split-pane content-id="main-content">
<RouteMenu v-if="!isOnBrokeringRunPage"/>
<ion-router-outlet id="main-content" />
</ion-split-pane>
<ion-router-outlet />
</ion-app>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { IonApp, IonRouterOutlet, IonSplitPane, loadingController, onIonViewWillEnter } from '@ionic/vue';
import { onMounted, onUnmounted, ref } from 'vue';
import { IonApp, IonRouterOutlet, loadingController } from '@ionic/vue';
import emitter from "@/event-bus"
import RouteMenu from "@/components/RouteMenu.vue"
import { useRouter } from 'vue-router';
const loader = ref(null) as any
const router = useRouter();
async function presentLoader(message = "Click the backdrop to dismiss.") {
if (!loader.value) {
Expand All @@ -36,8 +30,6 @@ function dismissLoader() {
}
}
const isOnBrokeringRunPage = computed(() => router.currentRoute.value.fullPath === '/tabs/brokering')
onMounted(async () => {
loader.value = await loadingController
.create({
Expand Down
121 changes: 30 additions & 91 deletions src/components/RouteMenu.vue
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,35 @@
<template>
<div class="route-menu">
<div>
<ion-list>
<ion-menu>
<ion-content>
<ion-list v-show="isOnBrokeringRulePage">
<ion-list-header ref="listHeader">
<ion-label>{{ "Order batches" }}</ion-label>
<ion-button color="primary" fill="clear">
{{ "New" }}
<ion-icon :icon="addCircleOutline" />
</ion-button>
</ion-list-header>
<ion-card v-for="card in [1, 2, 3, 4]" ref="cards" :key="card" @click.prevent="animate">
<ion-card v-for="card in [1, 2, 3, 4]" ref="cards" :key="card" @click.prevent="router.push('query')">
<ion-item lines="full">
<ion-label>
<h1>{{ 'Order lookup name' }}</h1>
</ion-label>
<ion-chip>{{ `${card}/4` }}</ion-chip>
</ion-item>
<ion-item v-show="isOnBrokeringRulePage" ref="item">
<ion-item ref="item">
<ion-badge>{{ 'BADGE' }}</ion-badge>
<ion-button fill="clear" color="medium" slot="end">
{{ 'Archive' }}
</ion-button>
</ion-item>
</ion-card>
</ion-list>
<ion-footer v-show="isOnBrokeringRulePage">
<ion-toolbar>
<ion-item lines="none">
<ion-buttons>
<ion-button>
<ion-icon :icon="archiveOutline"/>
{{ "Archive" }}
</ion-button>
</ion-buttons>
<ion-badge slot="end">
{{ "4 rules" }}
</ion-badge>
</ion-item>
</ion-toolbar>
</ion-footer>
<ion-item lines="none">
<ion-label><h1>{{ "<order lookup name>" }}</h1></ion-label>
<ion-chip slot="end">{{ "2/4" }}
<ion-icon :icon="chevronUpOutline"/>
</ion-chip>
</ion-item>
<ion-list v-show="!isOnBrokeringRulePage">
<ion-item-group>
<ion-item-divider color="medium">
Expand Down Expand Up @@ -95,87 +86,35 @@
</ion-reorder-group>
</ion-item-group>
</ion-list>
</div>
</div>
</ion-content>
<ion-footer v-show="isOnBrokeringRulePage">
<ion-toolbar>
<ion-item lines="none">
<ion-buttons>
<ion-button>
<ion-icon :icon="archiveOutline"/>
{{ "Archive" }}
</ion-button>
</ion-buttons>
<ion-badge slot="end">
{{ "4 rules" }}
</ion-badge>
</ion-item>
</ion-toolbar>
</ion-footer>
</ion-menu>
</template>

<script setup lang="ts">
import { IonBadge, IonButtons, IonButton, IonCard, IonChip, IonFooter, IonIcon, IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList, IonListHeader, IonReorder, IonReorderGroup, IonSelect, IonSelectOption, IonToolbar, createAnimation } from '@ionic/vue';
import { addCircleOutline, archiveOutline } from "ionicons/icons";
import { IonBadge, IonButtons, IonButton, IonCard, IonChip, IonContent, IonFooter, IonIcon, IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList, IonListHeader, IonMenu, IonReorder, IonReorderGroup, IonSelect, IonSelectOption, IonToolbar, createAnimation } from '@ionic/vue';
import { addCircleOutline, archiveOutline, chevronUpOutline } from "ionicons/icons";
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const cards = ref([])
const listHeader = ref(null) as any
const item = ref(null) as any
const moveTop = ref(0)
const isOnBrokeringRulePage = computed(() => router.currentRoute.value.fullPath.includes('/route'))
function animate(e: Event) {
if(isOnBrokeringRulePage.value) {
routeForward(e)
} else {
routeBackward(e)
}
}
function routeForward(e: Event) {
const element = e.currentTarget as HTMLElement
const hideCards = cards.value.map((card: any) => {
if(element != card.$el) {
return card.$el
}
}).filter(card => card)
createAnimation()
.addElement(listHeader.value.$el)
.addElement(item.value.$el)
.addElement(hideCards)
.duration(1000)
.fromTo('opacity', '1', '0')
.to('display', 'none').play()
moveTop.value = element.getBoundingClientRect().top
createAnimation()
.addElement(element)
.duration(1000)
.fromTo('transform', 'translateY(0px)', `translateY(-${moveTop.value}px)`).play()
router.push('query')
}
function routeBackward(e: Event) {
const showCards = cards.value.map((card: any) => {
if(e.currentTarget != card.$el) {
return card.$el
}
}).filter(card => card)
const element = e.currentTarget as HTMLElement
createAnimation()
.addElement(listHeader.value.$el)
.addElement(item.value.$el)
.addElement(showCards)
.duration(1000)
.fromTo('opacity', '0', '1')
.to('display', 'block').play()
createAnimation()
.addElement(element)
.duration(1000)
.fromTo('transform', `translateY(-${moveTop.value}px)`, 'translateY(0px)').play();
router.go(-1)
}
</script>

<style scoped>
.route-menu > div {
width: 100%;
}
</style>
Loading

0 comments on commit 6e8217c

Please sign in to comment.