Skip to content

Commit

Permalink
Improved: UI to include reordering UI, updated basic styling and fixe…
Browse files Browse the repository at this point in the history 
…d naming(#4)
  • Loading branch information
@ymaheshwari1
ymaheshwari1 committed Dec 31, 2023
1 parent 4db8708 commit 287f5fa
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 74 deletions.
9 changes: 3 additions & 6 deletions src/components/RouteMenu.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="route-menu">
<div v-if="isOnBrokeringRuleRoute">
<div v-if="isOnBrokeringRulePage">
<ion-list>
<ion-list-header>
<ion-label>{{ "Order batches" }}</ion-label>
Expand Down Expand Up @@ -140,15 +140,12 @@
<script setup lang="ts">
import { IonBadge, IonButtons, IonButton, IonCard, IonChip, IonFooter, IonIcon, IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption, IonToolbar, onIonViewWillEnter } from '@ionic/vue';

Check warning on line 141 in src/components/RouteMenu.vue

View workflow job for this annotation

GitHub Actions / call-workflow-in-another-repo / reusable_workflow_job (18.x) 

'onIonViewWillEnter' is defined but never used

Check warning on line 141 in src/components/RouteMenu.vue

View workflow job for this annotation

GitHub Actions / call-workflow-in-another-repo / reusable_workflow_job (20.x) 

'onIonViewWillEnter' is defined but never used
import { addCircleOutline, archiveOutline } from "ionicons/icons";
import { ref } from 'vue';
import { computed } from 'vue';
import { useRouter } from 'vue-router';
const isOnBrokeringRuleRoute = ref(true)
const router = useRouter();
onIonViewWillEnter(() => {
isOnBrokeringRuleRoute.value = router.currentRoute.value.fullPath.includes('/brokering/route')
})
const isOnBrokeringRulePage = computed(() => router.currentRoute.value.fullPath.includes('/route'))
</script>

<style scoped>
Expand Down
156 changes: 88 additions & 68 deletions src/views/BrokeringQuery.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,20 @@
<ion-page>
<ion-split-pane content-id="query-content">
<ion-list>
<ion-item>
<ion-label>{{ "Warehouse only" }}</ion-label>
</ion-item>
<ion-item>
<ion-label>{{ "Warehouse and stores" }}</ion-label>
</ion-item>
<ion-item>
<ion-label>{{ "Any Location" }}</ion-label>
</ion-item>
<ion-reorder-group :disabled="false">
<ion-item>
<ion-label>{{ "Warehouse only" }}</ion-label>
<ion-reorder />
</ion-item>
<ion-item>
<ion-label>{{ "Warehouse and stores" }}</ion-label>
<ion-reorder />
</ion-item>
<ion-item>
<ion-label>{{ "Any Location" }}</ion-label>
<ion-reorder />
</ion-item>
</ion-reorder-group>
</ion-list>
<ion-content id="query-content">
<section class="filters">
Expand All @@ -37,76 +42,91 @@
</ion-card>
<ion-card>
<ion-item>
<ion-icon :icon="swapVerticalOutline"/>
<ion-icon slot="start" :icon="swapVerticalOutline"/>
<ion-label>{{ "Sort" }}</ion-label>
<ion-icon :icon="optionsOutline"/>
</ion-item>
<ion-item>
<ion-label>{{ "Proximity" }}</ion-label>
</ion-item>
<ion-item>
<ion-label>{{ "Order limit" }}</ion-label>
</ion-item>
<ion-item>
<ion-label>{{ "Inventory balance" }}</ion-label>
</ion-item>
<ion-item>
<ion-label>{{ "Custom Sequence" }}</ion-label>
</ion-item>
<ion-reorder-group :disabled="false">
<ion-item>
<ion-label>{{ "Proximity" }}</ion-label>
<ion-reorder />
</ion-item>
<ion-item>
<ion-label>{{ "Order limit" }}</ion-label>
<ion-reorder />
</ion-item>
<ion-item>
<ion-label>{{ "Inventory balance" }}</ion-label>
<ion-reorder />
</ion-item>
<ion-item>
<ion-label>{{ "Custom Sequence" }}</ion-label>
<ion-reorder />
</ion-item>
</ion-reorder-group>
</ion-card>
</section>
<section class="actions">
<section>
<h2 class="ion-padding-start">{{ "Actions" }}</h2>
<ion-card>
<ion-item lines="none">
<ion-label>{{ "Fully available" }}</ion-label>
</ion-item>
<ion-item lines="none">
<ion-chip>{{ "Next rule" }}</ion-chip>
<ion-chip>{{ "Move to queue" }}</ion-chip>
<ion-chip>
<ion-icon :icon="checkMarkOutline"/>
{{ "Auto cancel days: 10" }}
</ion-chip>
</ion-item>
</ion-card>
<ion-card>
<ion-item lines="none">
<ion-label>{{ "Partially available" }}</ion-label>
</ion-item>
<ion-item lines="none">
<ion-chip>
<ion-icon :icon="checkMarkOutline"/>
{{ "Allocate partial" }}
</ion-chip>
<ion-chip>{{ "Next rule" }}</ion-chip>
<ion-chip>{{ "Move to queue" }}</ion-chip>
<ion-chip>
<ion-icon :icon="checkMarkOutline"/>
{{ "Auto cancel days: 10" }}
</ion-chip>
</ion-item>
</ion-card>
<ion-card>
<ion-item lines="none">
<ion-label>{{ "Not available" }}</ion-label>
</ion-item>
<ion-item lines="none">
<ion-chip>{{ "Move to queue" }}</ion-chip>
<ion-chip>{{ "Next rule" }}</ion-chip>
<ion-chip>
<ion-icon :icon="checkMarkOutline"/>
{{ "Auto cancel days: 10" }}
</ion-chip>
</ion-item>
</ion-card>
<div class="actions">
<ion-card>
<ion-item lines="none">
<ion-label>{{ "Fully available" }}</ion-label>
</ion-item>
<ion-item lines="none">
<ion-chip>{{ "Next rule" }}</ion-chip>
<ion-chip>{{ "Move to queue" }}</ion-chip>
<ion-chip>
<ion-icon slot="start" :icon="checkmarkOutline" />
{{ "Auto cancel days: 10" }}
</ion-chip>
</ion-item>
</ion-card>
<ion-card>
<ion-item lines="none">
<ion-label>{{ "Partially available" }}</ion-label>
</ion-item>
<ion-item lines="none">
<ion-chip>
<ion-icon :icon="checkmarkOutline" />
<ion-label>{{ "Allocate partial" }}</ion-label>
</ion-chip>
<ion-chip>{{ "Next rule" }}</ion-chip>
<ion-chip>{{ "Move to queue" }}</ion-chip>
<ion-chip>
<ion-icon :icon="checkmarkOutline" />
<ion-label>{{ "Auto cancel days: 10" }}</ion-label>
</ion-chip>
</ion-item>
</ion-card>
<ion-card>
<ion-item lines="none">
<ion-label>{{ "Not available" }}</ion-label>
</ion-item>
<ion-item lines="none">
<ion-chip>{{ "Move to queue" }}</ion-chip>
<ion-chip>{{ "Next rule" }}</ion-chip>
<ion-chip>
<ion-icon :icon="checkmarkOutline"/>
<ion-label>{{ "Auto cancel days: 10" }}</ion-label>
</ion-chip>
</ion-item>
</ion-card>
</div>
</section>
</ion-content>
</ion-split-pane>
</ion-page>
</template>

<script setup lang="ts">
import { IonCard, IonChip, IonContent, IonIcon, IonItem, IonLabel, IonList, IonPage, IonSelect, IonSelectOption, IonSplitPane } from "@ionic/vue";
import { checkMarkOutline, filterOutline, optionsOutline, swapVerticalOutline } from "ionicons/icons"
import { IonCard, IonChip, IonContent, IonIcon, IonItem, IonLabel, IonList, IonPage, IonReorder, IonReorderGroup, IonSelect, IonSelectOption, IonSplitPane } from "@ionic/vue";
import { checkmarkOutline, filterOutline, optionsOutline, swapVerticalOutline } from "ionicons/icons"
</script>

<style scoped>
.actions, .filters {
display: grid;
grid-template-columns: repeat(2, auto);
}
</style>

0 comments on commit 287f5fa

Please sign in to comment.