Implemented: UI of the shopify connections list page (hotwax#4)

amansinghbais · Jun 3, 2024 · 5e6558f · 5e6558f
1 parent b7f2f1c
commit 5e6558f
Show file tree

Hide file tree

Showing 5 changed files with 164 additions and 2 deletions.
diff --git a/src/components/ShopifyShopActionsPopover.vue b/src/components/ShopifyShopActionsPopover.vue
@@ -0,0 +1,28 @@
+<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 '@hotwax/dxp-components'
+import { copyOutline, star, unlinkOutline } from 'ionicons/icons'
+
+</script>
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -46,6 +46,11 @@ const routes: Array<RouteRecordRaw> = [
         name: "ProductStore",
         component: () => import("@/views/ProductStore.vue")
       },
+      {
+        path: "shopify",
+        name: "Shopify",
+        component: () => import("@/views/Shopify.vue")
+      },
       {
         path: "settings",
         name: "Settings",

diff --git a/src/theme/variables.css b/src/theme/variables.css
@@ -317,6 +317,10 @@ ion-input.name {
   .find > .filters{
     display: unset;
   }
+
+  .mobile-only {
+    display: none;
+  }
 }
 
 @media (prefers-color-scheme: dark) {

diff --git a/src/views/Shopify.vue b/src/views/Shopify.vue
@@ -0,0 +1,121 @@
+<template>
+  <ion-page>
+    <FacilityFilters content-id="filter-content" />
+
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-title>{{ translate("Shopify connections") }}</ion-title>
+        <ion-buttons slot="end" >
+          <ion-menu-button menu="end" class="mobile-only">
+            <ion-icon :icon="filterOutline" />
+          </ion-menu-button>
+          <ion-button slot="icon-only">
+            <ion-icon :icon="informationCircleOutline" />
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content id="filter-content">
+      <div class="find">
+        <section class="search">
+          <ion-searchbar :placeholder="translate('Search keys')" />
+        </section>
+
+        <aside class="filters">
+          <ion-list>
+            <ion-item lines="none">
+              <ion-icon :icon="flashOutline" slot="start" />
+              <ion-toggle>{{ translate("Show active shops") }}</ion-toggle>
+            </ion-item>
+          </ion-list>
+        </aside>
+
+        <main>
+          <div class="list-item">
+            <ion-item lines="none">
+              <ion-icon slot="start" :icon="storefrontOutline" />
+              <ion-label class="ion-text-wrap">
+                {{ "Shop ID" }}
+                <p>{{ "Shop connection name" }}</p>
+              </ion-label>
+            </ion-item>
+
+            <div class="tablet">
+              <ion-chip outline>
+                <ion-label>{{ translate("Shopify link") }}</ion-label>
+                <ion-icon :icon="openOutline" color="primary"/>
+              </ion-chip>
+            </div>
+
+            <div class="tablet">
+              <ion-label class="ion-text-center">
+                {{ "<product store name>" }}
+                <p>{{ "product store" }}</p>
+              </ion-label>
+            </div>
+
+            <ion-button fill="clear" color="medium" @click="openShopifyShopActionsPopover($event)">
+              <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
+            </ion-button>
+          </div>
+          <div class="list-item">
+            <ion-item lines="none">
+              <ion-icon slot="start" :icon="storefrontOutline" />
+              <ion-label class="ion-text-wrap">
+                {{ "Shop ID" }}
+                <p>{{ "Shop connection name" }}</p>
+              </ion-label>
+            </ion-item>
+
+            <div class="tablet">
+              <ion-chip outline>
+                <ion-label>{{ translate("Shopify link") }}</ion-label>
+                <ion-icon :icon="openOutline" color="primary"/>
+              </ion-chip>
+            </div>
+
+            <div class="tablet">
+              <ion-label class="ion-text-center">
+                {{ "<product store name>" }}
+                <p>{{ "product store" }}</p>
+              </ion-label>
+            </div>
+
+            <ion-button fill="clear" color="medium" @click="openShopifyShopActionsPopover($event)">
+              <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
+            </ion-button>
+          </div>
+        </main>
+      </div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import { IonButton, IonButtons, IonChip, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonMenuButton, IonPage, IonSearchbar, IonTitle, IonToggle, IonToolbar, popoverController } from "@ionic/vue";
+import { ellipsisVerticalOutline, filterOutline, flashOutline, informationCircleOutline, openOutline, storefrontOutline } from "ionicons/icons";
+import { translate } from "@/i18n";
+import ShopifyShopActionsPopover from "@/components/ShopifyShopActionsPopover.vue";
+
+async function openShopifyShopActionsPopover(event: Event) {
+  const popover = await popoverController.create({
+    component: ShopifyShopActionsPopover,
+    event,
+    showBackdrop: false
+  });
+
+  popover.present()
+}
+</script>
+
+<style scoped>
+.list-item {
+  --columns-desktop: 5;
+  border-bottom: var(--border-medium);
+}
+
+.list-item > ion-item {
+  width: 100%;
+}
+</style>
diff --git a/src/views/Tabs.vue b/src/views/Tabs.vue
@@ -7,6 +7,10 @@
           <ion-icon :icon="storefrontOutline" />
           <ion-label>{{ translate("Product store") }}</ion-label>
         </ion-tab-button>
+        <ion-tab-button tab="shopify" href="/tabs/shopify">
+          <ion-icon :icon="gitBranchOutline" />
+          <ion-label>{{ translate("Shopify") }}</ion-label>
+        </ion-tab-button>
         <ion-tab-button tab="more" href="/tabs/settings">
           <ion-icon :icon="settingsOutline" />
           <ion-label>{{ translate("Settings") }}</ion-label>
@@ -19,13 +23,13 @@
 <script setup lang="ts">
 import { translate } from "@/i18n";
 import { IonIcon, IonLabel, IonPage, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from "@ionic/vue";
-import { settingsOutline, storefrontOutline } from "ionicons/icons";
+import { gitBranchOutline, settingsOutline, storefrontOutline } from "ionicons/icons";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
 
 function showFooter() {
-  if (['/tabs/product-store', '/tabs/settings'].includes(router.currentRoute.value.path)) return true
+  if (['/tabs/product-store', '/tabs/settings', "/tabs/shopify"].includes(router.currentRoute.value.path)) return true
   return false
 }
 </script>