Merge pull request #26 from thuongtruong1009/seller/prod-all

style: query tab display

src/components.d.ts

@@ -10,6 +10,7 @@ declare module 'vue' {
     CarbonLanguage: typeof import('~icons/carbon/language')['default']
     CarbonMoon: typeof import('~icons/carbon/moon')['default']
     CarbonSun: typeof import('~icons/carbon/sun')['default']
+    CarbonWarning: typeof import('~icons/carbon/warning')['default']
     CBanner: typeof import('./components/CBanner.vue')['default']
     CBrand: typeof import('./components/CBrand.vue')['default']
     CCategory: typeof import('./components/CCategory.vue')['default']
@@ -34,6 +35,7 @@ declare module 'vue' {
     IInstagram: typeof import('./components/IInstagram.vue')['default']
     IOrder: typeof import('./components/IOrder.vue')['default']
     IProd: typeof import('./components/IProd.vue')['default']
+    IQuestion: typeof import('./components/IQuestion.vue')['default']
     IShopee: typeof import('./components/IShopee.vue')['default']
     LMenu: typeof import('./components/LMenu.vue')['default']
     README: typeof import('./components/README.md')['default']

src/components/IQuestion.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8,1 C11.8659932,1 15,4.13400675 15,8 C15,11.8659932 11.8659932,15 8,15 C4.13400675,15 1,11.8659932 1,8 C1,4.13400675 4.13400675,1 8,1 Z M8,2 C4.6862915,2 2,4.6862915 2,8 C2,11.3137085 4.6862915,14 8,14 C11.3137085,14 14,11.3137085 14,8 C14,4.6862915 11.3137085,2 8,2 Z M7.98750749,10.2375075 C8.40172105,10.2375075 8.73750749,10.5732939 8.73750749,10.9875075 C8.73750749,11.401721 8.40172105,11.7375075 7.98750749,11.7375075 C7.57329392,11.7375075 7.23750749,11.401721 7.23750749,10.9875075 C7.23750749,10.5732939 7.57329392,10.2375075 7.98750749,10.2375075 Z M8.11700238,4.60513307 C9.97011776,4.60513307 10.7745841,6.50497267 9.94298079,7.72186504 C9.76926425,7.97606597 9.56587088,8.14546785 9.27050506,8.31454843 L9.11486938,8.39945305 L8.95824852,8.47993747 C8.56296349,8.68261431 8.49390831,8.75808648 8.49390831,9.0209925 C8.49390831,9.29713488 8.27005069,9.5209925 7.99390831,9.5209925 C7.71776594,9.5209925 7.49390831,9.29713488 7.49390831,9.0209925 C7.49390831,8.34166619 7.7650409,7.99681515 8.35913594,7.6662627 L8.76655168,7.45066498 C8.9424056,7.3502536 9.04307851,7.26633638 9.11735517,7.1576467 C9.52116165,6.56675314 9.11397414,5.60513307 8.11700238,5.60513307 C7.41791504,5.60513307 6.82814953,6.01272878 6.75715965,6.55275918 L6.75,6.66244953 L6.74194433,6.75232516 C6.69960837,6.98557437 6.49545989,7.16244953 6.25,7.16244953 C5.97385763,7.16244953 5.75,6.9385919 5.75,6.66244953 C5.75,5.44256682 6.87194406,4.60513307 8.11700238,4.60513307 Z" /></svg>
+</template>
+
+<style scoped>
+svg{
+    width: 0.9rem;
+    height: 0.9rem;
+    margin: 0 0.25rem;
+}
+</style>

src/components/SLMenu.vue

@@ -43,7 +43,7 @@ const onClick = (index) => {
         </div>
       </div>
       <div v-if="isOrder === true" class="grid pl-10">
-        <router-link to="/seller/orders/all" href="seller/order/all" :style="isClick.zero ? {'color': 'red'} : {'color': 'black'}" @click="onClick('zero')">
+        <router-link to="/seller/orders/all" href="seller/orders/all" :style="isClick.zero ? {'color': 'red'} : {'color': 'black'}" @click="onClick('zero')">
           <span class="text-xl">•</span> All order
         </router-link>
         <router-link to="/seller/orders/all" href="#" :style="isClick.one ? {'color': 'red'} : {'color': 'black'}" @click="onClick('one')">
@@ -59,10 +59,10 @@ const onClick = (index) => {
       </div>
 
       <div v-if="isProd === true" class="grid pl-10">
-        <router-link to="/seller/orders/all" href="#" :style="isClick.two ? {'color': 'red'} : {'color': 'black'}" @click="onClick('two')">
+        <router-link to="/seller/prods/all" href="#" :style="isClick.two ? {'color': 'red'} : {'color': 'black'}" @click="onClick('two')">
           <span class="text-xl">•</span> All products
         </router-link>
-        <router-link to="/seller/orders/all" href="#" :style="isClick.three ? {'color': 'red'} : {'color': 'black'}" @click="onClick('three')">
+        <router-link to="/seller/prods/all" href="#" :style="isClick.three ? {'color': 'red'} : {'color': 'black'}" @click="onClick('three')">
           <span class="text-xl">•</span> Add products
         </router-link>
       </div>

src/pages/seller/login.vue

@@ -24,7 +24,7 @@ meta:
             <input type="text" class="outline-none rounded-md border-1 border-solid border-gray-300 py-2 px-4 w-full focus:bg-[#E8F0FE] duration-200" placeholder="username or email...">
           </div>
           <div>
-            <input type="text" class="outline-none rounded-md border-1 border-solid border-gray-300 py-2 px-4 w-full focus:bg-[#E8F0FE] duration-200" placeholder="password...">
+            <input type="password" class="outline-none rounded-md border-1 border-solid border-gray-300 py-2 px-4 w-full focus:bg-[#E8F0FE] duration-200" placeholder="password...">
           </div>
           <div class="flex justify-between text-xs">
             <div>
@@ -46,15 +46,15 @@ meta:
               <p class="opacity-60">
                 Don't have a Shopee account yet?
               </p>
-              <p class="text-blue-600 hover:text-blue-800 font-medium">
+              <p class="text-blue-600 hover:text-blue-800 font-medium cursor-pointer">
                 Create account
               </p>
             </div>
             <div class="flex justify-center opacity-40 text-xs">
               <span>_____________________  OR  _____________________</span>
             </div>
             <!-- <span>OR</span> -->
-            <div class="text-center outline-none rounded-md border-1 border-solid border-gray-300 py-2 px-4">
+            <div class="text-center outline-none rounded-md border-1 border-solid border-gray-300 py-2 px-4 cursor-pointer">
               <p>Login with Primary/Secondary account</p>
             </div>
           </div>

src/pages/seller/orders/all.vue → src/pages/seller/prods/all.vue

@@ -4,32 +4,28 @@ meta:
 </route>
 
 <script setup>
+import IQuestion from '~/components/IQuestion.vue'
+
+const queryType = ref('all')
 
 function clearForm() {
   document.getElementById('myForm').reset()
 }
 
-// function listView() {
-//   const elements = document.getElementsByClassName('column')
-//   for (let i = 0; i < elements.length; i++)
-//     elements[i].style.width = '100%'
-// }
+function onQueryType(type) {
+  queryType.value = type
+}
+// https://stackoverflow.com/questions/33571382/check-all-checkboxes-vuejs
+
+// document.getElementById('btn2').onclick = function() {
+//   const checkboxes = document.getElementsByName('name[]')
 
-// function gridView() {
-//   const elements = document.getElementsByClassName('column')
-//   for (let i = 0; i < elements.length; i++)
-//     elements[i].style.width = '50%'
+//   for (let i = 0; i < checkboxes.length; i++)
+//     checkboxes[i].checked = false
 // }
-// function toggleView() {
-//   const container = document.getElementById('btnContainer')
-//   const btns = container.getElementsByClassName('btn')
-//   for (let i = 0; i < btns.length; i++) {
-//     btns[i].addEventListener('click', function() {
-//       const current = document.getElementsByClassName('active')
-//       current[0].className = current[0].className.replace(' active', '')
-//       this.className += ' active'
-//     })
-//   }
+
+// function unCheckAll() {
+//   document.querySelectorAll('#product-check').checked = false
 // }
 
 </script>
@@ -74,7 +70,7 @@ function clearForm() {
       </div>
 
       <div>
-        <button type="submit" class="text-white font-md py-1 px-5 rounded-md bg-[#E14641] duration-200 capitalize tracking-normal cursor-pointer mr-3">
+        <button type="submit" class="text-white font-md py-1 px-5 rounded-md bg-[#E54A2B] duration-200 capitalize tracking-normal cursor-pointer mr-3">
           Find
         </button>
         <button class="font-md py-1 px-3 text-md rounded-md bg-white duration-200 capitalize tracking-normal cursor-pointer border-1 border-solid border-gray-200" @click="clearForm">
@@ -84,42 +80,53 @@ function clearForm() {
     </form>
 
     <div class="bottom-container p-5 my-5 bg-white shadow-sm shadow-gray-500/50 rounded-md divide-light-800 divide-y devide-solid">
-      <div class="tabs7 mb-5">
-        <div class="tab-item active focus:bg-white">
+      <div class="tabs7 mb-5 flex bg-[#eee] p-1.25 rounded-lg">
+        <div class="tab-item focus:bg-white" :class="{active : queryType === 'all'}" @click="onQueryType('all')">
           All
         </div>
-        <div class="tab-item focus:bg-white">
+        <div class="tab-item focus:bg-white" :class="{active : queryType === 'online'}" @click="onQueryType('online')">
           Online
         </div>
-        <div class="tab-item">
+        <div class="tab-item" :class="{active : queryType === 'outStock'}" @click="onQueryType('outStock')">
           Out of stock
         </div>
-        <div class="tab-item">
+        <div class="tab-item" :class="{active : queryType === 'violet'}" @click="onQueryType('violet')">
           Violate
         </div>
-        <div class="tab-item">
+        <div class="tab-item" :class="{active : queryType === 'hidden'}" @click="onQueryType('hidden')">
           Hidden
         </div>
       </div>
       <div class="grid grid-cols-5 py-3 my-1">
         <div class="col-span-2">
-          <h3 class="font-semibold text-xl">
+          <h3 class="font-semibold text-lg">
             0 Product
           </h3>
-          <p class="opacity-70 text-sm">
-            can post 1000 more products  !
+          <p class="opacity-70 text-xs flex items-center">
+            can post 1000 more products <IQuestion />
           </p>
         </div>
-        <div class="col-span-3 flex justify-between items-end">
-          <p class="text-blue-500 cursor-pointer">
+        <div class="col-span-3 flex justify-end items-end gap-2">
+          <p v-if="queryType !== 'outStock' && queryType !== 'violet' && queryType !== 'hidden'" class="text-blue-500 cursor-pointer text-sm">
             product optimization
           </p>
-          <button class="text-white font-md py-1 px-5 rounded-md bg-[#E14641] duration-200 capitalize tracking-normal cursor-pointer">
+          <button v-if="queryType === 'all'" class="text-white font-md py-0.75 px-3 rounded-md bg-[#E54A2B] duration-200 capitalize tracking-normal cursor-pointer">
             + Add new a product
           </button>
-          <button class="font-md py-1 px-3 text-md rounded-md bg-white duration-200 capitalize tracking-normal cursor-pointer border-1 border-solid border-gray-200">
-            batch processing tool
-          </button>
+          <select class="font-md px-1 text-md rounded-md bg-white duration-200 capitalize tracking-normal cursor-pointer border-1 border-solid border-gray-200">
+            <option>
+              batch processing tool
+            </option>
+            <option value="mass-posting">
+              Mass posting
+            </option>
+            <option value="mass-updating">
+              Mass updating
+            </option>
+            <option value="attribute-update">
+              Attribute update
+            </option>
+          </select>
           <div id="btnContainer flex">
             <button class="toggle active" onclick="listView()">
               <i class="fa fa-bars" />
@@ -133,7 +140,7 @@ function clearForm() {
       <div class="all-table border-1 border-gray-300 border-solid rounded-md my-1">
         <div class="all-head-table grid grid-cols-16 bg-light-400 p-3">
           <div class="opacity-70 flex justify-center items-center">
-            <input type="checkbox">
+            <input id="product-checkall" type="checkbox">
           </div>
           <div class="col-span-3 opacity-70">
             <h2>Product name</h2>
@@ -170,7 +177,7 @@ function clearForm() {
         <div class="all-body-table overflow-y-scroll h-100">
           <div v-for="i in 10" :key="i" class="all-body-item grid grid-cols-16 p-3">
             <div class="opacity-70 flex justify-center items-center">
-              <input type="checkbox">
+              <input id="product-check" type="checkbox">
             </div>
             <div class="col-span-3 opacity-70">
               <h2>Name {{ i }}</h2>
@@ -214,14 +221,8 @@ select{
   border-bottom-right-radius: 0;
 }
 
-.tabs7 {
-  display: flex;
-  background-color: #eee;
-  border-radius: 8px;
-  padding: 5px;
-}
 .tabs7 .tab-item.active {
-  color: #6a5af9;
+  color: red;
   background-color: white;
 }
 .tabs7 .tab-item {
@@ -234,18 +235,7 @@ select{
   align-items: center;
   justify-content: center;
   border-radius: inherit;
-  transition: 0.5s linear;
-}
-.column {
-  float: left;
-  width: 50%;
-  padding: 10px;
-}
-
-.row:after {
-  content: "";
-  display: table;
-  clear: both;
+  transition: 0.2s linear;
 }
 .toggle {
   border: none;