Merge branch 'main' of http://18.167.251.121:10003/aidlab/Aida_Purchaser_Front

src/views/wardrobe/Assets.vue

@@ -49,28 +49,52 @@
       </div>
     </aside>
 
-    <section class="wardrobe-assets__content flex flex-1 flex-col">
+    <section
+      class="wardrobe-assets__content flex flex-1 flex-col"
+      :class="{ 'has-data': dataList.length }"
+    >
       <div class="assets-toolbar">
         <div class="assets-toolbar__selection">
-          <span class="assets-toolbar__count">{{ selectedCount }} Selected</span>
-          <div class="assets-toolbar__link">Select All</div>
-          <div class="assets-toolbar__link">Deselect All</div>
+          <div class="select-count flex align-center">
+            <img src="@/assets/images/wardrobe/select.png" />
+            <span class="assets-toolbar__count">{{ selectedCount }} Selected</span>
+          </div>
+          <div class="assets-toolbar__link" @click="handleSelectAll(true)">Select All</div>
+          <div class="assets-toolbar__link" @click="handleSelectAll(false)">Deselect All</div>
         </div>
 
         <div class="assets-toolbar__actions">
           <div
             class="assets-toolbar__download flex flex-center"
             :class="{ disabled: selectedCount < 1 }"
+            @click="handleDownloadSelected"
           >
-            <SvgIcon name="download" color="#fff" />
+            <SvgIcon name="downloadBtn" color="#fff" />
             <span>Download Selected</span>
           </div>
         </div>
       </div>
       <div v-if="dataList.length" class="data-list-container">
-        <div class="data-list datalist">
-          <div class="item" v-for="item in dataList" :key="item.url">
-            <CommodityItem :url="item.url" :name="item.title" :price="item.price"></CommodityItem>
+        <div ref="dataListRef" class="data-list">
+          <div
+            v-for="(item, index) in dataList"
+            :key="item.url"
+            class="item"
+            :class="{ 'is-last-column': isLastColumn(index) }"
+          >
+            <img
+              v-show="item.checked"
+              src="@/assets/images/wardrobe/checked.png"
+              @click="handleSelectItem(item)"
+              class="checkbox"
+            />
+            <div v-show="!item.checked" class="checkbox" @click="handleSelectItem(item)" />
+            <CommodityItem
+              download
+              :url="item.url"
+              :name="item.title"
+              :price="item.price"
+            ></CommodityItem>
           </div>
         </div>
       </div>
@@ -90,7 +114,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { computed, ref, reactive, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, reactive, ref, shallowRef, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import img from '@/assets/images/collectionStory/Rectangle.png'
 
@@ -130,44 +154,55 @@ const dataList = ref([
   {
     url: img,
     title: 'Windswept Burden',
-    price: '$100.00'
+    price: '$100.00',
+    checked: false
   },
   {
     url: img,
     title: 'Windswept Burden',
-    price: '$100.00'
+    price: '$100.00',
+    checked: false
   },
   {
     url: img,
     title: 'Windswept Burden',
-    price: '$100.00'
+    price: '$100.00',
+    checked: false
   },
   {
     url: img,
     title: 'Windswept Burden',
-    price: '$100.00'
+    price: '$100.00',
+    checked: false
   },
   {
     url: img,
     title: 'Windswept Burden',
-    price: '$100.00'
+    price: '$100.00',
+    checked: false
   },
   {
     url: img,
     title: 'Windswept Burden',
-    price: '$100.00'
+    price: '$100.00',
+    checked: false
   },
   {
     url: img,
     title: 'Windswept Burden',
-    price: '$100.00'
+    price: '$100.00',
+    checked: false
   },
   {
     url: img,
     title: 'Windswept Burden',
-    price: '$100.00'
+    price: '$100.00',
+    checked: false
   }
 ])
+const dataListRef = ref<HTMLDivElement | null>(null)
+const gridColumnCount = shallowRef(1)
+let gridResizeObserver: ResizeObserver | null = null
 
 watch(
   () => filters,
@@ -177,7 +212,9 @@ watch(
   { deep: true }
 )
 
-const selectedCount = computed(() => 0)
+const selectedCount = computed(() => {
+  return dataList.value.filter((el) => el.checked === true).length
+})
 const allCategoriesSelected = computed(() => {
   return (
     filters.categories.length === categoryValues.length &&
@@ -216,9 +253,63 @@ const clearFilters = () => {
   filters.gender = 'all'
 }
 
+const handleSelectItem = (item) => {
+  console.log('111', item)
+  item.checked = !item.checked
+}
+
+const handleSelectAll = (flag) => {
+  dataList.value.forEach((item) => {
+    item.checked = flag
+  })
+}
+
+const handleDownloadSelected = () => {
+  const items = dataList.value.filter((item) => item.checked)
+  console.log(items)
+}
+
+const updateGridColumnCount = () => {
+  if (!dataListRef.value) {
+    gridColumnCount.value = 1
+    return
+  }
+
+  const templateColumns = window.getComputedStyle(dataListRef.value).gridTemplateColumns
+  const columnCount =
+    templateColumns && templateColumns !== 'none'
+      ? templateColumns.split(' ').filter(Boolean).length
+      : 1
+
+  gridColumnCount.value = Math.max(columnCount, 1)
+}
+
+const isLastColumn = (index: number) => {
+  return (index + 1) % gridColumnCount.value === 0
+}
+
 const goToDigitalItems = () => {
   router.push('/digitalItem')
 }
+
+onMounted(() => {
+  nextTick(() => {
+    updateGridColumnCount()
+
+    if (!dataListRef.value || typeof ResizeObserver === 'undefined') {
+      return
+    }
+
+    gridResizeObserver = new ResizeObserver(() => {
+      updateGridColumnCount()
+    })
+    gridResizeObserver.observe(dataListRef.value)
+  })
+})
+
+onUnmounted(() => {
+  gridResizeObserver?.disconnect()
+})
 </script>
 <style lang="less" scoped>
 .c-svg {
@@ -350,8 +441,10 @@ const goToDigitalItems = () => {
   }
 
   .wardrobe-assets__content {
-    min-width: 0;
     border-right: 0.05rem solid #585858;
+    // &.has-data {
+    //   border: none;
+    // }
 
     .assets-toolbar {
       display: flex;
@@ -368,34 +461,26 @@ const goToDigitalItems = () => {
       }
 
       .assets-toolbar__selection {
-        .assets-toolbar__count {
-          position: relative;
-          padding-left: 1.8rem;
-          font-family: 'KaiseiOpti-Regular';
-          font-size: 1.4rem;
-          line-height: 1.2;
-          color: #57524b;
-
-          &::before {
-            content: '';
-            position: absolute;
-            left: 0;
-            top: 50%;
-            width: 1rem;
-            height: 1rem;
-            background: #232323;
-            transform: translateY(-50%);
+        font-family: 'KaiseiOpti-Regular';
+        .select-count {
+          column-gap: 1.2rem;
+          img{
+            width: 2.4rem;
+            height: 2.4rem    ;
+          }
+          .assets-toolbar__count {
+            position: relative;
+            font-size: 1.4rem;
+            line-height: 1.2;
+            color: #57524b;
           }
         }
 
         .assets-toolbar__link {
           border: 0;
           padding: 0;
-          background: transparent;
           cursor: pointer;
-          font-family: 'KaiseiOpti-Regular';
           font-size: 1.4rem;
-          line-height: 1.2;
           color: #a0978b;
           text-decoration: underline;
         }
@@ -425,21 +510,41 @@ const goToDigitalItems = () => {
 
     .data-list-container {
       overflow-y: auto;
-      .datalist {
+      padding-bottom: 8rem;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+      .data-list {
         width: 100%;
         flex: 1;
         display: grid;
         align-content: start;
         grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
-        padding: 0.05rem 0 0 0.05rem;
+        border-top: 0.05rem solid #585858;
+        border-left: 0.05rem solid #585858;
 
         .item {
           width: 100%;
           min-width: 0;
           padding: 1.2rem;
-          border: 0.05rem solid #585858;
-          margin-left: -0.05rem;
-          margin-top: -0.05rem;
+          background: #ffffff;
+          position: relative;
+          box-sizing: border-box;
+          border-bottom: 0.05rem solid #585858;
+
+          &:not(.is-last-column) {
+            border-right: 0.05rem solid #585858;
+          }
+
+          .checkbox {
+            position: absolute;
+            top: 1.2rem;
+            left: 1.2rem;
+            width: 2.4rem;
+            height: 2.4rem;
+            border: 0.15rem solid #585858;
+            cursor: pointer;
+          }
 
           :deep(.commodity-item) {
             width: 100%;