Feat: room filter

synctv-org · Nov 16, 2023 · da3d1f1 · da3d1f1
1 parent 0f1cd93
commit da3d1f1
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 16 deletions.
diff --git a/src/components/RoomList.vue b/src/components/RoomList.vue
@@ -3,7 +3,7 @@ import { onMounted, ref } from "vue";
 import { ElNotification } from "element-plus";
 import { roomListApi } from "@/services/apis/room";
 import { myRoomList } from "@/services/apis/user";
-import type { RoomList } from "@/types/Room";
+import { roomStatus, type RoomList } from "@/types/Room";
 import JoinRoom from "@/views/JoinRoom.vue";
 import { userStore } from "@/stores/user";
 
@@ -40,6 +40,7 @@ const currentPage = ref(1);
 const pageSize = ref(10);
 const order = ref("name");
 const sort = ref("desc");
+const status = ref("");
 
 const getRoomList = async (showMsg = false) => {
   try {
@@ -51,7 +52,8 @@ const getRoomList = async (showMsg = false) => {
           sort: sort.value,
           order: order.value,
           search: "all",
-          keyword: ""
+          keyword: "",
+          status: status.value
         },
         headers: {
           Authorization: token.value
@@ -106,17 +108,7 @@ onMounted(() => {
   <div class="card mx-auto">
     <div class="card-title flex flex-wrap justify-between items-center">
       <div class="max-sm:mb-3">
-        <!-- :class="
-            isMyRoom
-              ? ' text-gray-700 cursor-pointer dark:text-slate-400 mr-4'
-              : 'border-b-2 border-slate-600 border-solid text-slate-700 dark:border-slate-200 dark:text-slate-200 mr-4'
-          " -->
         <span v-if="!isMyRoom"> 房间列表（{{ __roomList.length }}）</span>
-        <!-- :class="
-            isMyRoom
-              ? 'border-b-2 border-slate-600 border-solid text-slate-700 dark:border-slate-200 dark:text-slate-200'
-              : 'text-gray-500 cursor-pointer dark:text-slate-400'
-          " -->
         <span v-else>我创建的（{{ __roomList.length }}）</span>
       </div>
       <div class="text-base -my-2">
@@ -129,6 +121,17 @@ onMounted(() => {
           <el-option label="房间名称" value="name" />
           <el-option label="创建时间" value="createdAt" />
         </el-select>
+        <el-select
+          v-if="isMyRoom"
+          v-model="status"
+          class="m-2"
+          placeholder="状态"
+          style="width: 130px"
+          @change="getRoomList(false)"
+        >
+          <el-option label="ALL" value="" />
+          <el-option v-for="r in Object.values(roomStatus)" :label="r" :value="r.toLowerCase()" />
+        </el-select>
         <button
           class="btn btn-dense"
           @click="

diff --git a/src/components/admin/dialogs/userRooms.vue b/src/components/admin/dialogs/userRooms.vue
@@ -6,6 +6,7 @@ import type { RoomList } from "@/types/Room";
 import JoinRoom from "@/views/JoinRoom.vue";
 import { userStore } from "@/stores/user";
 import { Search } from "@element-plus/icons-vue";
+import { roomStatus, RoomStatus } from "@/types/Room";
 
 const { token, isLogin } = userStore();
 const __roomList = ref<RoomList[]>([]);
@@ -47,6 +48,7 @@ const order = ref("name");
 const sort = ref("desc");
 const keyword = ref("");
 const search = ref("all");
+const status = ref("");
 
 const getRoomList = async (showMsg = false) => {
   try {
@@ -59,6 +61,7 @@ const getRoomList = async (showMsg = false) => {
         max: pageSize.value,
         sort: sort.value,
         order: order.value,
+        status: status.value,
         search: search.value,
         keyword: keyword.value,
         id: userId.value
@@ -119,7 +122,16 @@ const getRoomList = async (showMsg = false) => {
       </div>
     </template>
     <template #default>
-      <div class="m-auto w-80 -my-5 mb-3">
+      <div class="m-auto w-96 -my-5 mb-3 flex">
+        <el-select
+          v-model="status"
+          placeholder="状态"
+          style="width: 130px"
+          @change="getRoomList(false)"
+        >
+          <el-option label="ALL" value="" />
+          <el-option v-for="r in Object.values(roomStatus)" :label="r" :value="r.toLowerCase()" />
+        </el-select>
         <el-input v-model="keyword" placeholder="搜索" @keyup.enter="getRoomList(false)" required>
           <template #prepend>
             <el-select v-model="search" placeholder="Select" style="width: 90px">
@@ -139,7 +151,7 @@ const getRoomList = async (showMsg = false) => {
           v-else
           v-for="item in __roomList"
           :key="item.roomId"
-          class="flex flex-wrap m-2 rounded-lg bg-zinc-50 hover:bg-zinc-100 transition-all dark:bg-zinc-800 hover:dark:bg-neutral-800 max-w-[225px]"
+          class="flex flex-wrap m-2 rounded-lg bg-zinc-50 hover:bg-zinc-100 transition-all dark:bg-neutral-700 hover:dark:bg-zinc-900 max-w-[225px]"
         >
           <div class="overflow-hidden text-ellipsis m-auto p-2 w-full">
             <b class="block text-base font-semibold truncate"> {{ item["roomName"] }}</b>

diff --git a/src/services/apis/admin.ts b/src/services/apis/admin.ts
@@ -140,6 +140,7 @@ export const userRoomListApi = useDefineApi<
       max: number;
       sort: string;
       order: string;
+      status: string;
       search: string;
       keyword: string;
       id: string;

diff --git a/src/services/apis/user.ts b/src/services/apis/user.ts
@@ -21,6 +21,9 @@ export const myRoomList = useDefineApi<
       max: number;
       sort: string;
       order: string;
+      search: string;
+      keyword: string;
+      status: string;
     };
     headers: { Authorization: string };
   },

diff --git a/src/types/Room.ts b/src/types/Room.ts
@@ -10,14 +10,12 @@ export interface RoomList {
 }
 
 export enum RoomStatus {
-  Unknown = 0,
   Banned = 1,
   Pending = 2,
   Active = 3
 }
 
 export const roomStatus = {
-  [RoomStatus.Unknown]: "Unknown",
   [RoomStatus.Banned]: "Banned",
   [RoomStatus.Pending]: "Pending",
   [RoomStatus.Active]: "Active"