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: NetSuite Integration Management UI(#37) #38

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
+2,494 −90
Open

Implemented: NetSuite Integration Management UI(#37) #38

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
af995a9
Implemented: NetSuite Integration Management UI(#37)
R-Sourabh Sep 28, 2024
e9b8e71
Improved: added some changes in template & alter some css(#37)
R-Sourabh Sep 30, 2024
443c2a5
Improved: removed the ion-card from netsuite page & improved the css(…
R-Sourabh Oct 7, 2024
671ed51
Implemented: Created the NetSuite store for managing NetSuite states …
R-Sourabh Nov 20, 2024
e17d912
Implemented: Made shipment method, payment method page dynamic, added…
R-Sourabh Nov 26, 2024
195f076
Implemented: integrated APIs for adding, updating & removing the nets…
R-Sourabh Dec 3, 2024
792ee89
Implemented: added import of translate from 'i18n'(#37)
R-Sourabh Dec 3, 2024
bef2a58
Improved: corrected indentation, spacing & changed the enumGroupMembe…
R-Sourabh Dec 3, 2024
d332828
Improved: Added a check to disable all section items until the produc…
R-Sourabh Dec 4, 2024
eecff71
Improved: Added save button disable functionality when there are no c…
R-Sourabh Dec 9, 2024
4b38bdb
Improved: Handled various cases in Discount, ProductStore, and PriceL…
R-Sourabh Dec 10, 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
5 changes: 0 additions & 5 deletions src/theme/variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,11 +275,6 @@ ion-input.name {
width: 100%;
}

ion-text {
font-size: 22px;
padding: var(--spacer-xs) 0px 0px 10px;
}

.header {
display: grid;
grid-template-columns: repeat(2, 1fr);
Expand Down
235 changes: 106 additions & 129 deletions src/views/NetSuite.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,137 +9,111 @@
</ion-button>
</ion-toolbar>
</ion-header>
<ion-content>
<main>
<section class="analytics-header">
<ion-card>
<ion-item lines="none">
<ion-label class="count-size">4</ion-label>
</ion-item>
<ion-item>
<ion-label>Orders pending sync</ion-label>
</ion-item>
</ion-card>
<ion-card>
<ion-item lines="none">
<ion-label class="count-size">15</ion-label>
</ion-item>
<ion-item>
<ion-label>Customers pending sync</ion-label>
</ion-item>
</ion-card>
<ion-card>
<ion-item lines="none">
<ion-label class="count-size">2</ion-label>
</ion-item>
<ion-item>
<ion-label>Products pending sync</ion-label>
</ion-item>
</ion-card>
<ion-content class="ion-padding">
<section class="analytics-header">
<ion-card>
<ion-item lines="none">
<ion-label class="count-size">4</ion-label>
</ion-item>
<ion-item lines="none">
<ion-label>Orders pending sync</ion-label>
</ion-item>
</ion-card>
<ion-card>
<ion-item lines="none">
<ion-label class="count-size">15</ion-label>
</ion-item>
<ion-item lines="none">
<ion-label>Customers pending sync</ion-label>
</ion-item>
</ion-card>
<ion-card>
<ion-item lines="none">
<ion-label class="count-size">2</ion-label>
</ion-item>
<ion-item lines="none">
<ion-label>Products pending sync</ion-label>
</ion-item>
</ion-card>
</section>

<div class="ion-margin-top">
<h1>Configuration</h1>
<section>
<ion-item fill="outline" class="item-box" lines="none" button @click="openSftpModal()">
<ion-label>SFTP</ion-label>
<ion-icon slot="end" :icon="chevronForwardOutline"/>
</ion-item>
<ion-item fill="outline" class="item-box" lines="none" button @click="openProductStoreModal()">
<ion-label>Product Store</ion-label>
<ion-icon slot="end" :icon="chevronForwardOutline"/>
</ion-item>
<ion-item fill="outline" class="item-box" lines="none" button @click="openShipmentMethod()">
<ion-label>Shipping methods</ion-label>
<ion-icon slot="end" :icon="chevronForwardOutline"/>
</ion-item>
<ion-item fill="outline" class="item-box" lines="none" button @click="openFacilities()">
<ion-label>Facilities</ion-label>
<ion-icon slot="end" :icon="chevronForwardOutline"/>
</ion-item>
</section>

<div class="ion-margin-top">
<ion-text>Configuration</ion-text>
<section>
<ion-card>
<ion-item button @click="openSftpModal()">
<ion-label>SFTP</ion-label>
<ion-icon slot="end" :icon="chevronForwardOutline"/>
</ion-item>
</ion-card>
<ion-card>
<ion-item button @click="openProductStoreModal()">
<ion-label>Product Store</ion-label>
<ion-icon slot="end" :icon="chevronForwardOutline"/>
</ion-item>
</ion-card>
<ion-card>
<ion-item button @click="openShipmentMethod()">
<ion-label>Shipping methods</ion-label>
<ion-icon slot="end" :icon="chevronForwardOutline"/>
</ion-item>
</ion-card>
<ion-card>
<ion-item button @click="openFacilities()">
<ion-label>Facilities</ion-label>
<ion-icon slot="end" :icon="chevronForwardOutline"/>
</ion-item>
</ion-card>
</section>
</div>

<div class="ion-margin-top">
<ion-text>Products and Inventory</ion-text>
<section class="netsuite-action-items">
<ion-card>
<ion-item button @click="openInventoryVariances()">
<ion-label>Inventory variances</ion-label>
<ion-icon slot="end" :icon="chevronForwardOutline"/>
</ion-item>
</ion-card>
</section>
</div>

<div class="ion-margin-top">
<ion-text>Orders and fulfillment</ion-text>
<section>
<ion-card>
<ion-item button @click="openPaymentMethods()">
<ion-label>Payment method</ion-label>
<ion-icon slot="end" :icon="chevronForwardOutline"/>
</ion-item>
</ion-card>
<ion-card>
<ion-item button @click="openPriceLevelModal()">
<ion-label>Price level</ion-label>
<ion-icon slot="end" :icon="chevronForwardOutline"/>
</ion-item>
</ion-card>
<ion-card>
<ion-item button @click="openDiscountsModal()">
<ion-label>Discounts</ion-label>
<ion-icon slot="end" :icon="chevronForwardOutline"/>
</ion-item>
</ion-card>
<ion-card>
<ion-item button @click="openDepartments()">
<ion-label>Departments</ion-label>
<ion-icon slot="end" :icon="chevronForwardOutline"/>
</ion-item>
</ion-card>
<ion-card>
<ion-item button @click="openSalesChannel()">
<ion-label>Sales Channel</ion-label>
<ion-icon slot="end" :icon="chevronForwardOutline"/>
</ion-item>
</ion-card>
</section>
</div>

<div class="ion-margin-top">
<ion-text>Transfer orders</ion-text>
<section>
<ion-card>
<ion-item button>
<ion-label>Transfer order fulfillment</ion-label>
<ion-icon slot="end" :icon="chevronForwardOutline"/>
</ion-item>
</ion-card>
<ion-card>
<ion-item button>
<ion-label>Transfer order receipt</ion-label>
<ion-icon slot="end" :icon="chevronForwardOutline"/>
</ion-item>
</ion-card>
</section>
</div>
</main>
</div>

<div class="ion-margin-top">
<h1>Products and Inventory</h1>
<section>
<ion-item fill="outline" class="item-box" lines="none" button @click="openInventoryVariances()">
<ion-label>Inventory variances</ion-label>
<ion-icon slot="end" :icon="chevronForwardOutline"/>
</ion-item>
</section>
</div>

<div class="ion-margin-top">
<h1>Orders and fulfillment</h1>
<section>
<ion-item fill="outline" class="item-box" lines="none" button @click="openPaymentMethods()">
<ion-label>Payment method</ion-label>
<ion-icon slot="end" :icon="chevronForwardOutline"/>
</ion-item>
<ion-item fill="outline" class="item-box" lines="none" button @click="openPriceLevelModal()">
<ion-label>Price level</ion-label>
<ion-icon slot="end" :icon="chevronForwardOutline"/>
</ion-item>
<ion-item fill="outline" class="item-box" lines="none" button @click="openDiscountsModal()">
<ion-label>Discounts</ion-label>
<ion-icon slot="end" :icon="chevronForwardOutline"/>
</ion-item>
<ion-item fill="outline" class="item-box" lines="none" button @click="openDepartments()">
<ion-label>Departments</ion-label>
<ion-icon slot="end" :icon="chevronForwardOutline"/>
</ion-item>
<ion-item fill="outline" class="item-box" lines="none" button @click="openSalesChannel()">
<ion-label>Sales Channel</ion-label>
<ion-icon slot="end" :icon="chevronForwardOutline"/>
</ion-item>
</section>
</div>

<div class="ion-margin-top">
<h1>Transfer orders</h1>
<section>
<ion-item fill="outline" class="item-box" lines="none" button>
<ion-label>Transfer order fulfillment</ion-label>
<ion-icon slot="end" :icon="chevronForwardOutline"/>
</ion-item>
<ion-item fill="outline" class="item-box" lines="none" button>
<ion-label>Transfer order receipt</ion-label>
<ion-icon slot="end" :icon="chevronForwardOutline"/>
</ion-item>
</section>
</div>
</ion-content>
</ion-page>
</template>

<script setup lang="ts">
import { IonButton, IonCard, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonPage, IonMenuButton, IonText, IonTitle, IonToolbar, modalController } from "@ionic/vue";

Check warning on line 116 in src/views/NetSuite.vue

View workflow job for this annotation

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

'IonText' is defined but never used

Check warning on line 116 in src/views/NetSuite.vue

View workflow job for this annotation

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

'IonText' is defined but never used
import { search, chevronForwardOutline } from "ionicons/icons";
import { translate } from "@/i18n";
import { useRouter } from "vue-router";
Expand All @@ -147,7 +121,7 @@
import ProductStoreModal from "@/components/ProductStoreModal.vue";
import PriceLevelModal from "@/components/PriceLevelModal.vue";
import DiscountsModal from "@/components/DiscountsModal.vue";
import SalesChannel from "@/components/SalesChannel.vue";

Check warning on line 124 in src/views/NetSuite.vue

View workflow job for this annotation

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

'SalesChannel' is defined but never used

Check warning on line 124 in src/views/NetSuite.vue

View workflow job for this annotation

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

'SalesChannel' is defined but never used

const router = useRouter();

Expand Down Expand Up @@ -206,22 +180,25 @@
</script>

<style scoped>
main {
margin: 10px 0 10px 10px;
ion-card {
margin-inline: 0px;
}

.item-box::part(native) {
border-radius: 8px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why not just use the ion item custom property for border radius?
https://ionicframework.com/docs/api/item#css-custom-properties-1

--border-radius

}

section {
display: grid;
align-items: center;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 10px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use spacer variables here instead of hard coded value. I know you are recreating the default margin of ion card, but if you're replacing, it is recommended to use premade spacer.

}

.analytics-header {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.count-size {
height: 100%;
font-size: 128px;
}
</style>
Loading