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: Updated UI of Settings page(#32j3r6t) #141

Merged
merged 11 commits into from
Jan 17, 2023
Merged

Implemented: Updated UI of Settings page(#32j3r6t) #141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
83bd465
Implemented: Updated UI of Settings page(#32j3r6t)
shashwatbangar Dec 7, 2022
0802e03
Improved: Code to open external links in new tab(#32j3r6t)
shashwatbangar Dec 7, 2022
86041ad
Fixed: Added Static variable to en json file(#32j3r6t)
shashwatbangar Dec 8, 2022
c5eb7a0
Fixed: Added spacer global styling, earlier it was not defined so not…
shashwatbangar Dec 16, 2022
2a3d7fb
Fixed: Added check for baseURL while display instanceURL(#32j3r6t)
shashwatbangar Jan 9, 2023
c7c07a0
Fixed: Indentation of style block on Settings page(#32j3r6t)
shashwatbangar Jan 10, 2023
0910a70
Fixed: Removed unnecessary shopfiyConfig option from Settings page(#3…
shashwatbangar Jan 11, 2023
c3d2af9
Reverted: Deleted code that shows facilities on Settings page(#32j3r6t)
shashwatbangar Jan 16, 2023
6991684
Fixed: Earlier we were showing facilities with eCommerce tag which wa…
shashwatbangar Jan 17, 2023
1709126
Merge branch '#32j3r6t' of https://github.com/shashwatbangar/inventor…
adityasharma7 Jan 17, 2023
5fcf962
Fixed: removed unused translations (#32j3r6t)
adityasharma7 Jan 17, 2023
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
7 changes: 7 additions & 0 deletions src/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
"Enter product sku to search": "Enter product sku to search",
"Enter the count of stock on the shelf.": "Enter the count of stock on the shelf.",
"Enter the stock count for the product": "Enter the stock count for the product",
"Facility": "Facility",
"Go to OMS": "Go to OMS",
"Instance Url": "Instance Url",
"Item added to upload list": "Item added to upload list",
"Loading": "Loading",
Expand All @@ -15,19 +17,24 @@
"Logout": "Logout",
"Ok": "Ok",
"OMS": "OMS",
"OMS instance": "OMS instance",
"Password": "Password",
"Product not found": "Product not found",
"Remove": "Remove",
"Save":"Save",
"Scan": "Scan",
"Search": "Search",
"Select facility": "Select facility",
"Settings": "Settings",
"Shopify Config": "Shopify Config",
"Something went wrong": "Something went wrong",
"Specify which facility you want to operate from. Order, inventory and other configuration data will be specific to the facility you select.": "Specify which facility you want to operate from. Order, inventory and other configuration data will be specific to the facility you select.",
"Stock": "Stock",
"eCom Store": "eCom Store",
"store name":"store name",
"Results": "Results",
"The products in the upload list will be removed.": "The products in the upload list will be removed.",
"This is the name of the OMS you are connected to right now. Make sure that you are connected to the right instance before proceeding.": "This is the name of the OMS you are connected to right now. Make sure that you are connected to the right instance before proceeding.",
"Upload": "Upload",
"Username": "Username",
"View": "View"
Expand Down
3 changes: 3 additions & 0 deletions src/theme/variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,9 @@ http://ionicframework.com/docs/theming/ */
--ion-color-light-contrast-rgb: 0, 0, 0;
--ion-color-light-shade: #d7d8da;
--ion-color-light-tint: #f5f6f9;

/** Spacer **/
--spacer-xs: 0.5rem;
}

@media (prefers-color-scheme: dark) {
Expand Down
109 changes: 83 additions & 26 deletions src/views/Settings.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,45 +7,81 @@
</ion-header>

<ion-content>
<ion-list>
<!-- Select store -->
<ion-item>
<ion-icon :icon="storefrontOutline" slot="start" />
<ion-label>{{$t("eCom Store")}}</ion-label>
<ion-select interface="popover" :value="currentFacility.facilityId" @ionChange="setFacility($event)">
<ion-select-option v-for="facility in (userProfile ? userProfile.facilities : [])" :key="facility.facilityId" :value="facility.facilityId" >{{ facility.name }}</ion-select-option>
</ion-select>
</ion-item>
<div class="user-profile">
<ion-card>
<ion-item lines="full">
<ion-avatar slot="start" v-if="userProfile?.partyImageUrl">
<Image :src="userProfile.partyImageUrl"/>
</ion-avatar>
<ion-label>
{{ userProfile?.partyName }}
<p>{{ userProfile?.userLoginId }}</p>
</ion-label>
</ion-item>
<ion-button fill="outline" color="danger" @click="logout()">{{ $t("Logout") }}</ion-button>
<!-- Commenting this code as we currently do not have reset password functionality -->
<!-- <ion-button fill="outline" color="medium">{{ $t("Reset password") }}</ion-button> -->
</ion-card>
</div>
<h1>{{ $t('OMS') }}</h1>
<section>
<ion-card>
<ion-card-header>
<ion-card-subtitle>
{{ $t("OMS instance") }}
</ion-card-subtitle>
<ion-card-title>
{{ baseURL ? baseURL : instanceUrl }}
</ion-card-title>
</ion-card-header>
<ion-card-content>
{{ $t('This is the name of the OMS you are connected to right now. Make sure that you are connected to the right instance before proceeding.') }}
</ion-card-content>
<ion-button @click="goToOms" fill="clear">
{{ $t('Go to OMS') }}
<ion-icon slot="end" :icon="openOutline" />
</ion-button>
</ion-card>

<!-- OMS information -->
<ion-item>
<ion-icon :icon="codeWorkingOutline" slot="start"/>
<ion-label>{{ $t("OMS") }}</ion-label>
<ion-label slot="end">{{ baseURL ? baseURL : instanceUrl }}</ion-label>
</ion-item>

<!-- Profile of user logged in -->
<ion-item>
<ion-icon :icon="personCircleOutline" slot="start" />
<ion-label>{{ userProfile !== null ? userProfile.partyName : '' }}</ion-label>
<ion-button slot="end" fill="outline" color="dark" @click="logout()">{{ $t("Logout") }}</ion-button>
</ion-item>
</ion-list>
<ion-card>
<ion-card-header>
<ion-card-title>
{{ $t("Facility") }}
</ion-card-title>
</ion-card-header>
<ion-card-content>
{{ $t('Specify which facility you want to operate from. Order, inventory and other configuration data will be specific to the facility you select.') }}
</ion-card-content>
<ion-item lines="none">
<ion-label>{{ $t("Select facility") }}</ion-label>
<ion-select interface="popover" :value="currentFacility.facilityId" @ionChange="setFacility($event)">
<ion-select-option v-for="facility in (userProfile ? userProfile.facilities : [])" :key="facility.facilityId" :value="facility.facilityId" >{{ facility.name }}</ion-select-option>
</ion-select>
</ion-item>
</ion-card>
</section>
</ion-content>
</ion-page>
</template>

<script lang="ts">
import { alertController, IonButton, IonContent, IonHeader,IonIcon, IonItem, IonLabel, IonPage, IonSelect, IonSelectOption, IonTitle, IonToolbar, IonList } from '@ionic/vue';
import { alertController, IonAvatar, IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonHeader,IonIcon, IonItem, IonLabel, IonPage, IonSelect, IonSelectOption, IonTitle, IonToolbar } from '@ionic/vue';
import { defineComponent } from 'vue';
import { codeWorkingOutline, ellipsisVertical, personCircleOutline, storefrontOutline} from 'ionicons/icons'
import { codeWorkingOutline, ellipsisVertical, personCircleOutline, storefrontOutline, openOutline} from 'ionicons/icons'
import { mapGetters, useStore } from 'vuex';
import { useRouter } from 'vue-router';
import Image from '@/components/Image.vue'

export default defineComponent({
name: 'Settings',
components: {
IonAvatar,
IonButton,
IonCard,
IonCardContent,
IonCardHeader,
IonCardSubtitle,
IonCardTitle,
IonContent,
IonHeader,
IonIcon,
Expand All @@ -56,7 +92,7 @@ export default defineComponent({
IonSelectOption,
IonTitle,
IonToolbar,
IonList
Image
},
data() {
return {
Expand Down Expand Up @@ -105,6 +141,9 @@ export default defineComponent({
this.router.push('/login');
})
}
},
goToOms(){
window.open(this.instanceUrl.startsWith('http') ? this.instanceUrl.replace('api/', "") : `https://${this.instanceUrl}.hotwax.io/`, '_blank', 'noopener, noreferrer');
}
},
setup(){
Expand All @@ -116,14 +155,32 @@ export default defineComponent({
ellipsisVertical,
personCircleOutline,
storefrontOutline,
openOutline,
store,
router
}
}
});
</script>

<style scoped>
ion-label[slot="end"] {
text-align: end;
}

ion-card > ion-button {
margin: var(--spacer-xs);
}
h1 {
padding: var(--spacer-xs) 10px 0;
}
section {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
align-items: start;
}
.user-profile {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}
</style>