From d459d42a60283adbac3fa517836a467b965c20bf Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Wed, 14 Aug 2024 15:43:40 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=EC=8B=9C=EB=A6=AC=EC=A6=88=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20-=20scroll=20infinite=20loading=EC=9C=BC=EB=A1=9C?=
 =?UTF-8?q?=20paging=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                             |  8 +++++++
 src/views/Content/ContentSeriesList.vue | 31 +++++++++++++++++++------
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3ec463e..168da05 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -38,4 +38,12 @@
     }
   }
 }
+
+html::-webkit-scrollbar, body::-webkit-scrollbar {
+  overflow-y: hidden;
+}
+
+html, body {
+  overflow-y: hidden;
+}
 </style>
diff --git a/src/views/Content/ContentSeriesList.vue b/src/views/Content/ContentSeriesList.vue
index 142cac8..11752eb 100644
--- a/src/views/Content/ContentSeriesList.vue
+++ b/src/views/Content/ContentSeriesList.vue
@@ -22,7 +22,11 @@
           </v-btn>
         </v-col>
       </v-row>
-      <v-row>
+      <v-row
+        ref="scroll_container"
+        class="scroll_container"
+        @scroll="onScroll"
+      >
         <v-col
           v-for="(item, i) in series_list"
           :key="i"
@@ -378,6 +382,14 @@ export default {
   },
 
   methods: {
+    async onScroll() {
+      const scrollContainer = this.$refs.scroll_container;
+      const threshold = scrollContainer.scrollHeight - scrollContainer.clientHeight;
+      if (scrollContainer.scrollTop >= threshold - 10 && this.total_page >= this.page) {
+        await this.getSeriesList();
+      }
+    },
+
     imageAdd(payload) {
       const file = payload;
       if (file) {
@@ -486,7 +498,6 @@ export default {
     },
 
     async getSeriesGenreList() {
-      this.is_loading = true
       try {
         const res = await api.getGenreList()
         if (res.status === 200 && res.data.success === true) {
@@ -496,23 +507,24 @@ export default {
         } else {
           this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
         }
-
-        this.is_loading = false
       } catch (e) {
         this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
-        this.is_loading = false
       }
     },
 
     async getSeriesList() {
+      if (this.is_loading) return;
+
       this.is_loading = true
       try {
         const res = await api.getSeriesList(this.page)
         if (res.status === 200 && res.data.success === true) {
           const data = res.data.data
+          const total_page = Math.ceil(data.totalCount / 10)
 
-          const total_page = Math.ceil(data.totalCount / 20)
-          this.series_list = data.items
+          if (this.page === 1) this.series_list.length = 0;
+          this.page += 1;
+          this.series_list.push(...data.items);
 
           if (total_page <= 0)
             this.total_page = 1
@@ -665,6 +677,11 @@ export default {
 </script>
 
 <style scoped>
+.scroll_container {
+  height: 100vh;
+  overflow-y: auto;
+}
+
 .image-select label {
   display: inline-block;
   padding: 10px 20px;
-- 
2.40.1


From 3a0ee08ab00c84a37a23cf2e1f8fbf3540f216a6 Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Wed, 14 Aug 2024 16:40:00 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=EC=8B=9C=EB=A6=AC=EC=A6=88=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20-=20=EB=93=9C=EB=9E=98=EA=B7=B8=20=EC=95=A4=20?=
 =?UTF-8?q?=EB=93=9C=EB=A1=AD=EC=9C=BC=EB=A1=9C=20=EC=88=9C=EC=84=9C?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/audio_content_series.js         |  8 +++
 src/views/Content/ContentSeriesList.vue | 94 +++++++++++++++----------
 2 files changed, 64 insertions(+), 38 deletions(-)

diff --git a/src/api/audio_content_series.js b/src/api/audio_content_series.js
index b7bfbe6..f77959e 100644
--- a/src/api/audio_content_series.js
+++ b/src/api/audio_content_series.js
@@ -55,6 +55,13 @@ async function removeContentInTheSeries(seriesId, contentId) {
     )
 }
 
+async function updateSeriesOrders(ids) {
+    return Vue.axios.put(
+        "/creator-admin/audio-content/series/orders",
+        {ids: ids}
+    )
+}
+
 export {
     getGenreList,
     getSeriesList,
@@ -62,6 +69,7 @@ export {
     modifySeries,
     getSeriesDetail,
     getSeriesContent,
+    updateSeriesOrders,
     addingContentToTheSeries,
     removeContentInTheSeries,
     searchContentNotInSeries
diff --git a/src/views/Content/ContentSeriesList.vue b/src/views/Content/ContentSeriesList.vue
index 11752eb..e994149 100644
--- a/src/views/Content/ContentSeriesList.vue
+++ b/src/views/Content/ContentSeriesList.vue
@@ -22,48 +22,54 @@
           </v-btn>
         </v-col>
       </v-row>
-      <v-row
+      <div
         ref="scroll_container"
         class="scroll_container"
         @scroll="onScroll"
       >
-        <v-col
-          v-for="(item, i) in series_list"
-          :key="i"
-          cols="3"
+        <draggable
+          v-model="series_list"
+          class="row"
+          @end="onDropCallback(series_list)"
         >
-          <v-card>
-            <v-card-title>
-              <v-spacer />
-              <v-img
-                :src="item.coverImageUrl"
-                class="cover-image"
-                @click="selectSeries(item)"
-              />
-              <v-spacer />
-            </v-card-title>
-            <v-card-text class="series-title-container">
-              {{ item.title }}
-            </v-card-text>
-            <v-card-actions>
-              <v-spacer />
-              <v-btn
-                text
-                @click="showModifyDialog(item)"
-              >
-                수정
-              </v-btn>
-              <v-btn
-                text
-                @click="deleteConfirm(item)"
-              >
-                삭제
-              </v-btn>
-              <v-spacer />
-            </v-card-actions>
-          </v-card>
-        </v-col>
-      </v-row>
+          <v-col
+            v-for="(item, i) in series_list"
+            :key="i"
+            cols="3"
+          >
+            <v-card>
+              <v-card-title>
+                <v-spacer />
+                <v-img
+                  :src="item.coverImageUrl"
+                  class="cover-image"
+                  @click="selectSeries(item)"
+                />
+                <v-spacer />
+              </v-card-title>
+              <v-card-text class="series-title-container">
+                {{ item.title }}
+              </v-card-text>
+              <v-card-actions>
+                <v-spacer />
+                <v-btn
+                  text
+                  @click="showModifyDialog(item)"
+                >
+                  수정
+                </v-btn>
+                <v-btn
+                  text
+                  @click="deleteConfirm(item)"
+                >
+                  삭제
+                </v-btn>
+                <v-spacer />
+              </v-card-actions>
+            </v-card>
+          </v-col>
+        </draggable>
+      </div>
     </v-container>
 
     <v-dialog
@@ -349,10 +355,11 @@
 
 <script>
 import * as api from '@/api/audio_content_series';
+import Draggable from "vuedraggable";
 
 export default {
   name: "ContentSeriesList",
-
+  components: {Draggable},
   data() {
     return {
       is_loading: false,
@@ -497,6 +504,17 @@ export default {
       this.$router.push({name: 'ContentSeriesDetail', params: {seriesId: series.seriesId}})
     },
 
+    async onDropCallback(items) {
+      const ids = items.map((item) => {
+        return item.seriesId
+      })
+
+      const res = await api.updateSeriesOrders(ids)
+      if (res.status === 200 && res.data.success === true) {
+        this.notifySuccess(res.data.message)
+      }
+    },
+
     async getSeriesGenreList() {
       try {
         const res = await api.getGenreList()
-- 
2.40.1