From ec051ff74ce2e501c7a232b0e1a1490eeabc4985 Mon Sep 17 00:00:00 2001
From: Lapor Chen <31620109+laporchen@users.noreply.github.com>
Date: Sun, 7 Jan 2024 01:01:45 +0800
Subject: [PATCH 1/2] feat: add `ProblemInfo` component

---
 src/auto/components.d.ts               |  4 ++
 src/components/Problem/ProblemInfo.vue | 95 ++++++++++++++++++++++++++
 2 files changed, 99 insertions(+)
 create mode 100644 src/components/Problem/ProblemInfo.vue

diff --git a/src/auto/components.d.ts b/src/auto/components.d.ts
index 28cdb74..f3eec56 100644
--- a/src/auto/components.d.ts
+++ b/src/auto/components.d.ts
@@ -22,12 +22,14 @@ declare module '@vue/runtime-core' {
     IUilAngleDown: typeof import('~icons/uil/angle-down')['default']
     IUilAngleUp: typeof import('~icons/uil/angle-up')['default']
     IUilBars: typeof import('~icons/uil/bars')['default']
+    IUilBolt: typeof import('~icons/uil/bolt')['default']
     IUilBookAlt: typeof import('~icons/uil/book-alt')['default']
     IUilChartLine: typeof import('~icons/uil/chart-line')['default']
     IUilCheck: typeof import('~icons/uil/check')['default']
     IUilCheckCircle: typeof import('~icons/uil/check-circle')['default']
     IUilConstructor: typeof import('~icons/uil/constructor')['default']
     IUilEdit: typeof import('~icons/uil/edit')['default']
+    IUilEye: typeof import('~icons/uil/eye')['default']
     IUilFacebook: typeof import('~icons/uil/facebook')['default']
     IUilFileExclamationAlt: typeof import('~icons/uil/file-exclamation-alt')['default']
     IUilFileUploadAlt: typeof import('~icons/uil/file-upload-alt')['default']
@@ -40,6 +42,7 @@ declare module '@vue/runtime-core' {
     IUilLink: typeof import('~icons/uil/link')['default']
     IUilMapMarkerInfo: typeof import('~icons/uil/map-marker-info')['default']
     IUilMinus: typeof import('~icons/uil/minus')['default']
+    IUilMonitor: typeof import('~icons/uil/monitor')['default']
     IUilMoon: typeof import('~icons/uil/moon')['default']
     IUilPen: typeof import('~icons/uil/pen')['default']
     IUilPlus: typeof import('~icons/uil/plus')['default']
@@ -58,6 +61,7 @@ declare module '@vue/runtime-core' {
     ProblemCard: typeof import('./../components/Problem/ProblemCard.vue')['default']
     ProblemDescriptionForm: typeof import('./../components/Problem/Forms/ProblemDescriptionForm.vue')['default']
     ProblemForm: typeof import('./../components/Problem/ProblemForm.vue')['default']
+    ProblemInfo: typeof import('./../components/Problem/ProblemInfo.vue')['default']
     ProblemMultiSelect: typeof import('./../components/Homework/Fields/ProblemMultiSelect.vue')['default']
     ProblemTestdataDescriptionModal: typeof import('./../components/Problem/Forms/ProblemTestdataDescriptionModal.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/src/components/Problem/ProblemInfo.vue b/src/components/Problem/ProblemInfo.vue
new file mode 100644
index 0000000..e76607f
--- /dev/null
+++ b/src/components/Problem/ProblemInfo.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { defineProps } from "vue";
+interface Props {
+  id: number;
+  problemName: string;
+  unlimitedQuota: boolean;
+  quotaRemaining: number;
+  quotaLimit: number;
+  tags: string[];
+  visible: ProblemStatus;
+  isAdmin: boolean;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <div class="collapse-arrow rounded-box collapse bg-base-200">
+    <input type="checkbox" class="peer" />
+    <div class="collapse-title bg-base-200 text-base">
+      <div class="flex flex-col">
+        <span class="text-lg font-bold">{{ problemName }}</span>
+        <span class="text-sm font-light"> ID: {{ id }}</span>
+      </div>
+    </div>
+    <div class="collapse-content flex flex-col gap-2 bg-base-300">
+      <div class="mt-3 flex flex-col">
+        <div class="flex gap-1">
+          <div v-for="tag in tags" :key="tag" class="badge-info badge">
+            {{ tag }}
+          </div>
+        </div>
+      </div>
+      <div class="stats stats-vertical text-lg shadow">
+        <div class="stat">
+          <div class="stat-figure text-base-content">
+            <i-uil-bolt class="h-6 w-6" />
+          </div>
+          <div class="stat-title text-sm">Quotas</div>
+          <div class="stat-value text-lg">
+            <template v-if="unlimitedQuota">
+              {{ $t("components.problem.card.unlimited") }}
+            </template>
+            <template v-else> {{ quotaRemaining }} / {{ quotaLimit }} </template>
+          </div>
+        </div>
+        <div v-if="isAdmin" class="stat">
+          <div class="stat-figure text-base-content">
+            <i-uil-eye class="h-6 w-6" />
+          </div>
+          <div class="stat-title text-sm">Visibility</div>
+          <div class="stat-value text-lg">
+            {{ visible === 0 ? "Public" : "Hidden" }}
+          </div>
+        </div>
+        <div v-if="isAdmin" class="stat">
+          <div class="stat-figure text-base-content">
+            <i-uil-monitor class="h-6 w-6" />
+          </div>
+          <div class="stat-title text-sm">Admin Control</div>
+          <div class="stat-value text-lg">
+            <div class="tooltip" data-tip="Stats">
+              <router-link
+                class="btn btn-ghost btn-sm btn-circle mr-1"
+                :to="`/course/${$route.params.name}/problem/${id}/stats`"
+              >
+                <i-uil-chart-line class="lg:h-5 lg:w-5" />
+              </router-link>
+            </div>
+            <div class="tooltip" data-tip="Copycat">
+              <router-link
+                class="btn btn-ghost btn-sm btn-circle mr-1"
+                :to="`/course/${$route.params.name}/problem/${id}/copycat`"
+              >
+                <i-uil-file-exclamation-alt class="lg:h-5 lg:w-5" />
+              </router-link>
+            </div>
+            <div class="tooltip" data-tip="Edit">
+              <router-link
+                class="btn btn-ghost btn-sm btn-circle"
+                :to="`/course/${$route.params.name}/problem/${id}/edit`"
+              >
+                <i-uil-edit class="lg:h-5 lg:w-5" />
+              </router-link>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="grow">
+        <button class="btn btn-primary btn-sm">
+          <router-link :to="`/course/${$route.params.name}/problem/${id}`"> View Problem </router-link>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

From 7a37158e7461cf4e60caca53e331f40db6402187 Mon Sep 17 00:00:00 2001
From: Lapor Chen <31620109+laporchen@users.noreply.github.com>
Date: Sun, 7 Jan 2024 01:02:05 +0800
Subject: [PATCH 2/2] feat: use `ProblemInfo` component on mobile size screen

---
 src/pages/course/[name]/problems.vue | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/pages/course/[name]/problems.vue b/src/pages/course/[name]/problems.vue
index 087e004..898fd59 100644
--- a/src/pages/course/[name]/problems.vue
+++ b/src/pages/course/[name]/problems.vue
@@ -6,12 +6,15 @@ import { fetcher } from "@/models/api";
 import { UserRole, useSession } from "@/stores/session";
 import { useTitle } from "@vueuse/core";
 import { isQuotaUnlimited } from "@/constants";
+import useInteractions from "@/composables/useInteractions";
 
 const session = useSession();
 const rolesCanReadProblemStatus = [UserRole.Admin, UserRole.Teacher];
 const route = useRoute();
 const router = useRouter();
 
+const { isDesktop } = useInteractions();
+
 useTitle(`Problems - ${route.params.name} | Normal OJ`);
 const {
   data: problems,
@@ -52,10 +55,13 @@ const maxPage = computed(() => {
         <div class="my-2" />
         <data-status-wrapper :error="error" :is-loading="isLoading">
           <template #loading>
-            <skeleton-table :col="5" :row="5" />
+            <skeleton-table v-if="isDesktop" :col="5" :row="5" />
+            <div v-else class="flex items-center justify-center">
+              <ui-spinner />
+            </div>
           </template>
           <template #data>
-            <table class="table w-full">
+            <table v-if="isDesktop" class="table w-full">
               <thead>
                 <tr>
                   <th>{{ $t("course.problems.id") }}</th>
@@ -127,6 +133,24 @@ const maxPage = computed(() => {
                 </tr>
               </tbody>
             </table>
+            <template
+              v-else
+              v-for="{ problemId, problemName, tags, quota, submitCount, status } in (problems || []).slice(
+                (page - 1) * 10,
+                page * 10,
+              )"
+            >
+              <problem-info
+                :id="problemId"
+                :problem-name="problemName"
+                :unlimited-quota="isQuotaUnlimited(quota)"
+                :quota-limit="quota"
+                :quota-remaining="quota - submitCount"
+                :tags="tags"
+                :visible="status"
+                :is-admin="session.isAdmin"
+              />
+            </template>
           </template>
         </data-status-wrapper>