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

Updated: actions UI as per the updated changes in design #26

Merged
merged 2 commits into from
Jan 17, 2024
Merged

Updated: actions UI as per the updated changes in design #26

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f8bcdea
Improved: UI for actions section and added UI for creating new invent…
ymaheshwari1 Jan 17, 2024
9a677ae
Improved: UI for the filters section
ymaheshwari1 Jan 17, 2024
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
92 changes: 64 additions & 28 deletions src/views/BrokeringQuery.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,10 @@
</ion-item>
<ion-item>
<ion-label>{{ "Promise date" }}</ion-label>
<ion-chip>{{ "select date" }}</ion-chip>
<ion-chip>
{{ "in 5 days" }}
<ion-icon :icon="closeCircleOutline"/>
</ion-chip>
</ion-item>
<ion-item>
<ion-select label="Queue" value="Brokering Queue">
Expand Down Expand Up @@ -81,6 +84,10 @@
</ion-item>
</ion-reorder-group>
</ion-list>
<ion-button fill="outline" @click="addInventoryRule">
{{ "Add inventory rule" }}
<ion-icon :icon="addCircleOutline"/>
</ion-button>
</div>
<div>
<section class="filters">
Expand Down Expand Up @@ -136,45 +143,45 @@
<div class="actions">
<ion-card>
<ion-item lines="none">
<ion-label>{{ "Fully available" }}</ion-label>
<ion-label>{{ "Allocated Items" }}</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-toggle>{{ "Clear auto cancel days" }}</ion-toggle>
</ion-item>
</ion-card>
<ion-card>
<ion-item lines="none">
<ion-label>{{ "Partially available" }}</ion-label>
<p>{{ "Select if partial allocation should be allowed in this inventory rule" }}</p>
</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-toggle>{{ "Allow partial allocation" }}</ion-toggle>
</ion-item>
</ion-card>
<ion-card>
<ion-item lines="none">
<ion-label>{{ "Not available" }}</ion-label>
<ion-label>{{ "Unavailable items" }}</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-select label="Move items to" interface="popover">
<ion-select-option value="next">
{{ "Next rule" }}
<ion-icon :icon="playForwardOutline"/>
</ion-select-option>
<ion-select-option value="queue">
{{ "Queue" }}
<ion-icon :icon="golfOutline"/>
</ion-select-option>
</ion-select>
</ion-item>
<ion-item lines="none">
<ion-select label="Queue" interface="popover">
<ion-select-option>{{ "Next rule" }}</ion-select-option>
</ion-select>
</ion-item>
<ion-item lines="none">
<ion-label>{{ "Auto cancel days" }}</ion-label>
<ion-chip outline>{{ "10 days" }}</ion-chip>
</ion-item>
</ion-card>
</div>
Expand All @@ -186,19 +193,47 @@
</template>

<script setup lang="ts">
import { IonButton, IonCard, IonChip, IonContent, IonIcon, IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList, IonPage, IonReorder, IonReorderGroup, IonSelect, IonSelectOption } from "@ionic/vue";
import { checkmarkOutline, chevronUpOutline, filterOutline, optionsOutline, swapVerticalOutline } from "ionicons/icons"
import { IonButton, IonCard, IonChip, IonContent, IonIcon, IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList, IonPage, IonReorder, IonReorderGroup, IonSelect, IonSelectOption, IonToggle, alertController } from "@ionic/vue";
import { addCircleOutline, chevronUpOutline, closeCircleOutline, filterOutline, golfOutline, optionsOutline, playForwardOutline, swapVerticalOutline } from "ionicons/icons"
import { useRouter } from "vue-router";

const router = useRouter();

async function addInventoryRule() {
const newRuleAlert = await alertController.create({
header: "New Inventory Rule",
buttons: [{
text: "Cancel",
role: "cancel"
}, {
text: "Save"
}],
inputs: [{
name: "ruleName",
placeholder: "Rule name"
}]
})

newRuleAlert.onDidDismiss().then((result: any) => {
if(result.data?.values?.ruleName) {
console.log('ruleName', result.data?.values?.ruleName)

Check warning on line 219 in src/views/BrokeringQuery.vue

View workflow job for this annotation

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

Unexpected console statement

Check warning on line 219 in src/views/BrokeringQuery.vue

View workflow job for this annotation

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

Unexpected console statement
}
})

return newRuleAlert.present();
}
</script>

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

.actions {
max-width: 50%;
}

ion-content > div {
display: grid;
grid-template-columns: 300px 300px 1fr;
Expand All @@ -207,5 +242,6 @@

ion-content > div > .menu {
border-right: 1px solid #92949C;
justify-content: center;
}
</style>
Loading