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

Implemented: UI for the Shopify connection management feature #20

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Implemented: UI for the Shopify connection management feature #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5e6558f
Implemented: UI of the shopify connections list page (#4)
amansinghbais Jun 3, 2024
c6828a9
Implemented: ui for the segments in shopify details page (#4)
amansinghbais Jun 4, 2024
22a72cc
Implemented: UI for the shippingmethod, location selection modal and …
amansinghbais Jun 5, 2024
aa1c1d1
Implemented: link action popover in the data mappings segment (#4)
amansinghbais Jun 5, 2024
399f9dc
Improved: added entry in locale for static text, syntax, and shopify …
amansinghbais Jun 5, 2024
f3584bf
Improved: added missing entry in locale (#4)
amansinghbais Jun 5, 2024
64652c9
Improved: modals and variables name for maintaining the consistency (#4)
amansinghbais Jun 5, 2024
66670db
Improved: title for the add shipping method modal (#4)
amansinghbais Jun 5, 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
63 changes: 63 additions & 0 deletions src/components/AddShippingMethodsModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<template>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button @click="closeModal">
<ion-icon slot="icon-only" :icon="close" />
</ion-button>
</ion-buttons>
<ion-title>{{ translate("Add shipping method") }}</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<ion-list>
<ion-item lines="none">
<ion-label>{{ translate("Shopify Shipping method") }}</ion-label>
<ion-label slot="end">{{ "<shippingMethodName>" }}</ion-label>
</ion-item>

<ion-item-divider color="light">
<ion-label>{{ translate("OMS Carrier and Shipping methods") }}</ion-label>
</ion-item-divider>

<ion-item>
<ion-select :placeholder="translate('Select')" :label="translate('Carrier')" value="">
<ion-select-option value="">{{ "<carrierName>" }}</ion-select-option>
</ion-select>
</ion-item>

<ion-item>
<ion-select :placeholder="translate('Select')" :label="translate('Shipping method')" value="">
<ion-select-option value="">{{ "<carrierShippingMethod>" }}</ion-select-option>
</ion-select>
</ion-item>

<ion-item lines="none">
<ion-toggle>{{ translate("Ship without tracking ID") }}</ion-toggle>
</ion-item>
</ion-list>
</ion-content>

<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button>
<ion-icon :icon="saveOutline" />
</ion-fab-button>
</ion-fab>
</template>

<script setup lang="ts">
import { IonButton, IonButtons, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonItemDivider, IonLabel, IonList, IonSelect, IonSelectOption, IonTitle, IonToggle, IonToolbar, modalController } from "@ionic/vue";
import { close, saveOutline } from "ionicons/icons";
import { translate } from "@/i18n";

function closeModal() {
modalController.dismiss();
}
</script>

<style scoped>
ion-content {
--padding-bottom: 80px;
}
</style>
30 changes: 30 additions & 0 deletions src/components/DataMappingLinkActionsPopover.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<template>
<ion-content>
<ion-list>
<ion-list-header>
{{ "<Payment methods>" }}
</ion-list-header>

<ion-radio-group>
<ion-item>
<ion-radio>{{ "<hotwaxPaymentMethod>" }}</ion-radio>
</ion-item>

<ion-item>
<ion-radio>{{ "<hotwaxPaymentMethod>" }}</ion-radio>
</ion-item>
</ion-radio-group>

<ion-item lines="none">
<ion-label color="primary">{{ translate("Create new") }}</ion-label>
<ion-icon :icon="addCircleOutline" slot="end" color="primary" />
</ion-item>
</ion-list>
</ion-content>
</template>

<script setup lang="ts">
import { IonContent, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonRadio, IonRadioGroup } from "@ionic/vue";
import { addCircleOutline } from "ionicons/icons";
import { translate } from "@/i18n";
</script>
52 changes: 52 additions & 0 deletions src/components/ImportShippingMethodsModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<template>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button @click="closeModal">
<ion-icon slot="icon-only" :icon="close" />
</ion-button>
</ion-buttons>
<ion-title>{{ translate("Import shipping methods") }}</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<ion-searchbar :placeholder="translate('Search shipping method')"/>

<ion-item-divider color="light">
<ion-label>{{ translate("Select all") }}</ion-label>
<ion-checkbox />
</ion-item-divider>

<ion-list>
<ion-item>
<ion-checkbox>{{ "<shopifyShippingMethodName>" }}</ion-checkbox>
</ion-item>
<ion-item>
<ion-checkbox>{{ "<shopifyShippingMethodName>" }}</ion-checkbox>
</ion-item>
</ion-list>
</ion-content>

<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button>
<ion-icon :icon="downloadOutline" />
</ion-fab-button>
</ion-fab>
</template>

<script setup lang="ts">
import { IonButton, IonButtons, IonCheckbox, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonItemDivider, IonLabel, IonList, IonSearchbar, IonTitle, IonToolbar, modalController } from "@ionic/vue";
import { close, downloadOutline } from "ionicons/icons";
import { translate } from "@/i18n";

function closeModal() {
modalController.dismiss();
}
</script>

<style scoped>
ion-content {
--padding-bottom: 80px;
}
</style>
64 changes: 64 additions & 0 deletions src/components/ImportShopifyLocationsModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<template>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button @click="closeModal">
<ion-icon slot="icon-only" :icon="close" />
</ion-button>
</ion-buttons>
<ion-title>{{ translate("Import facility") }}</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<ion-searchbar :placeholder="translate('Search facility')" />

<ion-item-divider color="light">
<ion-label>{{ translate("Select all") }}</ion-label>
<ion-checkbox />
</ion-item-divider>

<ion-list>
<ion-item>
<ion-checkbox>
<ion-label>
<p class="overline">{{ "<SHOPIFY LOCATION ID>" }}</p>
{{ "<locationName>" }}
</ion-label>
</ion-checkbox>
</ion-item>

<ion-item>
<ion-checkbox>
<ion-label>
<p class="overline">{{ "<SHOPIFY LOCATION ID>" }}</p>
{{ "<locationName>" }}
</ion-label>
</ion-checkbox>
</ion-item>
</ion-list>

</ion-content>

<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button>
<ion-icon :icon="downloadOutline" />
</ion-fab-button>
</ion-fab>
</template>

<script setup lang="ts">
import { IonButton, IonButtons, IonCheckbox, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonItemDivider, IonLabel, IonList, IonSearchbar, IonTitle, IonToolbar, modalController } from "@ionic/vue";
import { close, downloadOutline } from "ionicons/icons";
import { translate } from "@/i18n";

function closeModal() {
modalController.dismiss();
}
</script>

<style scoped>
ion-content {
--padding-bottom: 80px;
}
</style>
25 changes: 25 additions & 0 deletions src/components/ShippingMethodActionsPopover.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<template>
<ion-content>
<ion-list>
<ion-list-header>
{{ translate("Shipping methods") }}
</ion-list-header>

<ion-item button>
<ion-label>{{ translate("Change mapping") }}</ion-label>
<ion-icon :icon="repeatOutline" slot="end" />
</ion-item>

<ion-item button lines="none">
<ion-label color="danger">{{ translate("Remove") }}</ion-label>
<ion-icon :icon="removeCircleOutline" color="danger" slot="end" />
</ion-item>
</ion-list>
</ion-content>
</template>

<script setup lang="ts">
import { IonContent, IonIcon, IonItem, IonLabel, IonList, IonListHeader } from "@ionic/vue";
import { translate } from '@/i18n';
import { removeCircleOutline, repeatOutline } from 'ionicons/icons';
</script>
27 changes: 27 additions & 0 deletions src/components/ShopifyConnectionActionsPopover.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<template>
<ion-content>
<ion-list>
<ion-list-header>
{{ "<shopifyShopName>" }}
</ion-list-header>
<ion-item button>
<ion-label>{{ translate("Copy credentials") }}</ion-label>
<ion-icon :icon="copyOutline" slot="end" />
</ion-item>
<ion-item button>
<ion-label>{{ translate("Favorite") }}</ion-label>
<ion-icon :icon="star" slot="end" />
</ion-item>
<ion-item button lines="none">
<ion-label color="danger">{{ translate("Deactivate shop") }}</ion-label>
<ion-icon :icon="unlinkOutline" color="danger" slot="end" />
</ion-item>
</ion-list>
</ion-content>
</template>

<script setup lang="ts">
import { IonContent, IonIcon, IonItem, IonLabel, IonList, IonListHeader } from "@ionic/vue";
import { translate } from '@/i18n';
import { copyOutline, star, unlinkOutline } from 'ionicons/icons';
</script>
24 changes: 24 additions & 0 deletions src/components/ShopifyConnectionFilters.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<template>
<ion-menu type="overlay" side="end">
<ion-header>
<ion-toolbar>
<ion-title>{{ translate("Filters") }}</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<ion-list>
<ion-item lines="none">
<ion-icon :icon="flashOutline" slot="start" />
<ion-toggle>{{ translate("Show active shops") }}</ion-toggle>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
</template>

<script setup lang="ts">
import { IonContent, IonHeader, IonIcon, IonItem, IonList, IonMenu, IonTitle, IonToggle, IonToolbar } from '@ionic/vue'
import { flashOutline } from 'ionicons/icons'
import { translate } from "@/i18n"
</script>
Loading
Loading