From 33c97be7a771b5c671b61ee85c9dbaf1fcc1819f Mon Sep 17 00:00:00 2001
From: thalals <thalsal@naver.com>
Date: Tue, 20 Aug 2024 19:53:02 +0900
Subject: [PATCH] =?UTF-8?q?feat=20:=20=EC=8B=A0=EA=B3=A0,=20=EC=B0=A8?=
 =?UTF-8?q?=EB=8B=A8,=20=ED=83=88=ED=87=B4=20=EC=9C=A0=EC=A0=80=20?=
 =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=A1=B0=ED=9A=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user/BlockUsers.js           |  20 ++++++
 src/api/user/ReportUser.js           |  20 ++++++
 src/api/user/WithDrawUsers.js        |  20 ++++++
 src/components/Pagenation.vue        |  38 ++++++++++
 src/components/SideBar.vue           |   4 +-
 src/components/UserBlockList.vue     |  95 ++++++++++++++++++++++++
 src/components/UserReportList.vue    | 103 +++++++++++++++++++++++++++
 src/components/UserWithDrawList.vue  | 100 ++++++++++++++++++++++++++
 src/router/index.js                  |   7 +-
 src/views/UsersListView.vue          |   3 +-
 src/views/UsersManageAccountView.vue |  31 ++++++++
 11 files changed, 436 insertions(+), 5 deletions(-)
 create mode 100644 src/api/user/BlockUsers.js
 create mode 100644 src/api/user/ReportUser.js
 create mode 100644 src/api/user/WithDrawUsers.js
 create mode 100644 src/components/Pagenation.vue
 create mode 100644 src/components/UserBlockList.vue
 create mode 100644 src/components/UserReportList.vue
 create mode 100644 src/components/UserWithDrawList.vue
 create mode 100644 src/views/UsersManageAccountView.vue

diff --git a/src/api/user/BlockUsers.js b/src/api/user/BlockUsers.js
new file mode 100644
index 0000000..0570bf0
--- /dev/null
+++ b/src/api/user/BlockUsers.js
@@ -0,0 +1,20 @@
+import { getAxiosAuthInstance } from '@/api/Index.js'
+
+export async function getBlockListPage(nowPage, search) {
+  const url = `/users/block?size=10&page=${nowPage}&search=${encodeURIComponent(search)}`
+
+  let result = []
+
+  await getAxiosAuthInstance
+    .get(url)
+    .then((response) => {
+        result = response.data
+      }
+    )
+    .catch((error) => {
+      console.log(error)
+    })
+
+  return result
+}
+
diff --git a/src/api/user/ReportUser.js b/src/api/user/ReportUser.js
new file mode 100644
index 0000000..cb42d46
--- /dev/null
+++ b/src/api/user/ReportUser.js
@@ -0,0 +1,20 @@
+import { getAxiosAuthInstance } from '@/api/Index.js'
+
+export async function getReportListPage(nowPage, search) {
+  const url = `/users/report?size=10&page=${nowPage}&search=${encodeURIComponent(search)}`
+
+  let result = []
+
+  await getAxiosAuthInstance
+    .get(url)
+    .then((response) => {
+        result = response.data
+      }
+    )
+    .catch((error) => {
+      console.log(error)
+    })
+
+  return result
+}
+
diff --git a/src/api/user/WithDrawUsers.js b/src/api/user/WithDrawUsers.js
new file mode 100644
index 0000000..c4e734a
--- /dev/null
+++ b/src/api/user/WithDrawUsers.js
@@ -0,0 +1,20 @@
+import { getAxiosAuthInstance } from '@/api/Index.js'
+
+export async function getWithDrawUserListPage(nowPage, search) {
+  const url = `/users/withdraw?size=10&page=${nowPage}&search=${encodeURIComponent(search)}`
+
+  let result = []
+
+  await getAxiosAuthInstance
+    .get(url)
+    .then((response) => {
+        result = response.data
+      }
+    )
+    .catch((error) => {
+      console.log(error)
+    })
+
+  return result
+}
+
diff --git a/src/components/Pagenation.vue b/src/components/Pagenation.vue
new file mode 100644
index 0000000..0ebebc9
--- /dev/null
+++ b/src/components/Pagenation.vue
@@ -0,0 +1,38 @@
+<script setup>
+
+</script>
+
+<template>
+    <div class="w-25 mx-auto">
+        <b-input-group size="sm">
+            <b-form-input
+                id="filter-input"
+                v-model="filter"
+                type="search"
+                placeholder="회원 이름 검색"
+            ></b-form-input>
+
+            <b-input-group-append>
+                <b-button @click="blockFilterData(blockFilter)">검색</b-button>
+            </b-input-group-append>
+        </b-input-group>
+    </div>
+
+    <div class="overflow-auto">
+        <div class="mt-3">
+            <b-pagination v-model="blockCurrentPage"
+                          :total-rows="blockRows"
+                          :per-page="blockPageSize"
+                          first-number
+                          last-number
+                          align="center"
+                          @page-click="blockPageChange"
+            >
+            </b-pagination>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index de67519..f82c4ff 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -18,12 +18,12 @@
                 <span class="text">Home</span>
             </router-link>
 
-            <router-link to="/users-list" class="button">
+            <router-link to="/users" class="button">
                 <span class="material-icons">group</span>
                 <span class="text">회원 목록</span>
             </router-link>
 
-            <router-link to="/team" class="button">
+            <router-link to="/users/manage-accounts" class="button">
                 <span class="material-icons">manage_accounts</span>
                 <span class="text">신고 / 차단/ 탈퇴</span>
             </router-link>
diff --git a/src/components/UserBlockList.vue b/src/components/UserBlockList.vue
new file mode 100644
index 0000000..24a3642
--- /dev/null
+++ b/src/components/UserBlockList.vue
@@ -0,0 +1,95 @@
+<script setup>
+import { convertGender } from '@/api/user/UserDataConverter.js'
+import { onMounted, ref } from 'vue'
+import { getBlockListPage } from '@/api/user/BlockUsers.js'
+
+const blockFields = [
+    { key: 'index', label: '#' },
+    { key: 'username', label: '이름' },
+    { key: 'gender', label: '성별' },
+    { key: 'userStatus', label: '상태' },
+    { key: 'blockedUserName', label: '차단한 유저' },
+    { key: 'currentBlockDate', label: '차단된 날짜' }
+]
+
+const blockContents = ref([])
+const blockPage = ref(0)
+const blockCurrentPage = ref(1)
+const blockRows = ref(0)
+const blockPageSize = ref(10)
+const blockTotalPage = ref(0)
+const blockFilter = ref('')
+
+async function getBlockList(page, filter) {
+    let blockListPage = await getBlockListPage(page, filter)
+
+    blockContents.value = blockListPage.content
+    blockPage.value = blockListPage.pageable.pageNumber
+    blockCurrentPage.value = blockListPage.pageable.pageNumber + 1
+    blockRows.value = blockListPage.totalElements
+    blockPageSize.value = blockListPage.pageable.pageSize
+    blockTotalPage.value = blockListPage.totalPages
+}
+
+function blockPageChange(button, page) {
+    getBlockList(page - 1, blockFilter.value)
+}
+
+function blockFilterData(data) {
+    blockFilterData.value = data
+    getBlockList(0, blockFilterData.value)
+}
+
+onMounted(async () => {
+    await getBlockList(0, '')
+})
+
+function getTableIndex(index, pageSize, page) {
+    return pageSize * page + index + 1
+}
+</script>
+
+<template>
+    <b-table hover :items="blockContents" :fields="blockFields">
+        <template #cell(index)="content">
+            {{ getTableIndex(content.index, blockPageSize, blockPage) }}
+        </template>
+
+        <template #cell(gender)="content">
+            {{ convertGender(content.item.gender) }}
+        </template>
+    </b-table>
+
+    <div class="w-25 mx-auto">
+        <b-input-group size="sm">
+            <b-form-input
+                id="filter-block-input"
+                v-model="blockFilter"
+                type="search"
+                placeholder="회원 이름 검색"
+            ></b-form-input>
+
+            <b-input-group-append>
+                <b-button @click="blockFilterData(blockFilter)">검색</b-button>
+            </b-input-group-append>
+        </b-input-group>
+    </div>
+
+    <div class="overflow-auto">
+        <div class="mt-3">
+            <b-pagination v-model="blockCurrentPage"
+                          :total-rows="blockRows"
+                          :per-page="blockPageSize"
+                          first-number
+                          last-number
+                          align="center"
+                          @page-click="blockPageChange"
+            >
+            </b-pagination>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/UserReportList.vue b/src/components/UserReportList.vue
new file mode 100644
index 0000000..9c49a09
--- /dev/null
+++ b/src/components/UserReportList.vue
@@ -0,0 +1,103 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { getReportListPage } from '@/api/user/ReportUser.js'
+import { convertGender } from '@/api/user/UserDataConverter.js'
+
+const fields = [
+    { key: 'index', label: '#' },
+    { key: 'username', label: '이름' },
+    { key: 'gender', label: '성별' },
+    { key: 'preferGender', label: '선호 성별' },
+    { key: 'userStatus', label: '상태' },
+    { key: 'reportedUserName', label: '신고한 유저' },
+    { key: 'reason', label: '신고 이유' },
+    { key: 'reportDate', label: '신고된 날짜' },
+]
+
+const contents = ref([])
+const nowPage = ref(0)
+const currentPage = ref(1)
+const rows = ref(0)
+const pageSize = ref(10)
+const totalPage = ref(0)
+const filter = ref('')
+
+async function getReportList(page, filter) {
+    let reportListPage = await getReportListPage(page, filter)
+
+    contents.value = reportListPage.content
+    nowPage.value = reportListPage.pageable.pageNumber
+    currentPage.value = reportListPage.pageable.pageNumber + 1
+    rows.value = reportListPage.totalElements
+    pageSize.value = reportListPage.pageable.pageSize
+    totalPage.value = reportListPage.totalPages
+}
+
+function pageChange(button, page) {
+    getReportList(page - 1, filter.value)
+}
+
+function filterData(data) {
+    filterData.value = data
+    getReportList(0, filterData.value)
+}
+
+function getTableIndex(index, pageSize, page) {
+    return pageSize * page + index + 1
+}
+
+onMounted(async () => {
+    await getReportList(0, '')
+})
+
+</script>
+
+<template>
+    <b-table hover :items="contents" :fields="fields">
+        <template #cell(index)="content">
+            {{ getTableIndex(content.index, pageSize, nowPage) }}
+        </template>
+
+        <template #cell(gender)="content">
+            {{ convertGender(content.item.gender) }}
+        </template>
+
+        <template #cell(preferGender)="content">
+            {{ convertGender(content.item.preferGender) }}
+        </template>
+
+    </b-table>
+
+    <div class="w-25 mx-auto">
+        <b-input-group size="sm">
+            <b-form-input
+                id="filter-report-input"
+                v-model="filter"
+                type="search"
+                placeholder="회원 이름 검색"
+            ></b-form-input>
+
+            <b-input-group-append>
+                <b-button @click="filterData(filter)">검색</b-button>
+            </b-input-group-append>
+        </b-input-group>
+    </div>
+
+    <div class="overflow-auto">
+        <div class="mt-3">
+            <b-pagination v-model="currentPage"
+                          :total-rows="rows"
+                          :per-page="pageSize"
+                          first-number
+                          last-number
+                          align="center"
+                          @page-click="pageChange"
+            >
+            </b-pagination>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/UserWithDrawList.vue b/src/components/UserWithDrawList.vue
new file mode 100644
index 0000000..c65db71
--- /dev/null
+++ b/src/components/UserWithDrawList.vue
@@ -0,0 +1,100 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { getWithDrawUserListPage } from '@/api/user/WithDrawUsers.js'
+
+const fields = [
+    { key: 'index', label: '#' },
+    { key: 'username', label: '이름' },
+    { key: 'userStatus', label: '상태' },
+    { key: 'reason', label: '탈퇴 이유' },
+    { key: 'feedBack', label: '피드백' },
+    { key: 'requestDate', label: '탈퇴 날짜' },
+    { key: 'actions', label: '데이터 삭제' }
+]
+
+const contents = ref([])
+const nowPage = ref(0)
+const currentPage = ref(1)
+const rows = ref(0)
+const pageSize = ref(10)
+const totalPage = ref(0)
+const filter = ref('')
+
+async function getWithDrawUserList(page, filter) {
+    let result = await getWithDrawUserListPage(page, filter)
+
+    contents.value = result.content
+    nowPage.value = result.pageable.pageNumber
+    currentPage.value = result.pageable.pageNumber + 1
+    rows.value = result.totalElements
+    pageSize.value = result.pageable.pageSize
+    totalPage.value = result.totalPages
+}
+
+function pageChange(button, page) {
+    getWithDrawUserList(page - 1, filter.value)
+}
+
+function filterData(data) {
+    filterData.value = data
+    getWithDrawUserList(0, filterData.value)
+}
+
+function getTableIndex(index, pageSize, page) {
+    return pageSize * page + index + 1
+}
+
+onMounted(async () => {
+    await getWithDrawUserList(0, '')
+})
+
+function deleteUserData() {
+    alert('아직 개발중~')
+}
+
+</script>
+
+<template>
+    <b-table hover :items="contents" :fields="fields">
+        <template #cell(index)="content">
+            {{ getTableIndex(content.index, pageSize, nowPage) }}
+        </template>
+        <template #cell(actions)="content">
+            <b-button variant="danger" @click="deleteUserData">삭제</b-button>
+        </template>
+
+    </b-table>
+
+    <div class="w-25 mx-auto">
+        <b-input-group size="sm">
+            <b-form-input
+                id="filter-report-input"
+                v-model="filter"
+                type="search"
+                placeholder="회원 이름 검색"
+            ></b-form-input>
+
+            <b-input-group-append>
+                <b-button @click="filterData(filter)">검색</b-button>
+            </b-input-group-append>
+        </b-input-group>
+    </div>
+
+    <div class="overflow-auto">
+        <div class="mt-3">
+            <b-pagination v-model="currentPage"
+                          :total-rows="rows"
+                          :per-page="pageSize"
+                          first-number
+                          last-number
+                          align="center"
+                          @page-click="pageChange"
+            >
+            </b-pagination>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index d634e3a..825f0b1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -20,9 +20,14 @@ const router = createRouter({
           component: () =>import('../views/DashBoardView.vue')
         },
         {
-          path: '/users-list',
+          path: '/users',
           name: 'UsersList',
           component: () => import('../views/UsersListView.vue')
+        },
+        {
+          path: '/users/manage-accounts',
+          name: 'UsersManageAccounts',
+          component: () => import('../views/UsersManageAccountView.vue')
         }
       ]
     }
diff --git a/src/views/UsersListView.vue b/src/views/UsersListView.vue
index d98a9b8..b464fe6 100644
--- a/src/views/UsersListView.vue
+++ b/src/views/UsersListView.vue
@@ -1,6 +1,5 @@
 <template>
-
-    <h5>[ 회원 목록 ]</h5>
+    <h6>[ 회원 목록 ]</h6>
     <div style="padding: 0.5rem">
         <span> Total User : {{ rows }} <br> Total Page : {{ totalPage }} </span>
     </div>
diff --git a/src/views/UsersManageAccountView.vue b/src/views/UsersManageAccountView.vue
new file mode 100644
index 0000000..40b7d34
--- /dev/null
+++ b/src/views/UsersManageAccountView.vue
@@ -0,0 +1,31 @@
+<template>
+    <h6>[ 신고/ 차단 / 탈퇴 ]</h6>
+
+    <div>
+        <b-card no-body>
+            <b-tabs card>
+                <b-tab title=" 신고 " active>
+                    <UserReportList />
+                </b-tab>
+                <b-tab title=" 차단 ">
+                    <UserBlockList />
+                </b-tab>
+
+                <b-tab title=" 탈퇴 ">
+                    <UserWithDrawList />
+                </b-tab>
+            </b-tabs>
+        </b-card>
+    </div>
+</template>
+
+<script setup>
+import UserReportList from '@/components/UserReportList.vue'
+import UserBlockList from '@/components/UserBlockList.vue'
+import UserWithDrawList from '@/components/UserWithDrawList.vue'
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file