feat: replace -1 quota in homeworks and problems with unlimited l… (

#139) * feat: replace `-1` quota in homeworks and problems with `unlimited` literal not transforming `-1` quota into `-` string, only control the appearence in UI * refactor: extract unlimited quota `-1` constant and provide checker function
Normal-OJ · Jul 27, 2023 · 72dabf5 · 72dabf5
1 parent 8fcf4d2
commit 72dabf5
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 34 deletions.
diff --git a/src/components/Homework/HomeworkCard.vue b/src/components/Homework/HomeworkCard.vue
@@ -3,12 +3,14 @@ import { computed } from "vue";
 import { useSession } from "@/stores/session";
 import { formatTime } from "@/utils/formatTime";
 import { useI18n } from "vue-i18n";
+import type { ProblemId2Meta } from "@/composables/useProblemSelection";
+import { isQuotaUnlimited } from "@/constants";
 
 const { t } = useI18n();
 
 interface Props {
   homework: HomeworkListItem | HomeworkPreviewForm;
-  problems: Record<string, { name: string | "-"; quota: number | "-" }>;
+  problems: ProblemId2Meta;
   preview?: boolean;
 }
 
@@ -101,6 +103,9 @@ const state = computed(() => {
                 </td>
                 <td>
                   <ui-spinner v-if="!problems[pid.toString()]" />
+                  <span v-else-if="isQuotaUnlimited(problems[pid.toString()].quota)" class="text-sm">{{
+                    $t("components.problem.card.unlimited")
+                  }}</span>
                   <span v-else>{{ problems[pid.toString()].quota }}</span>
                 </td>
                 <td>

diff --git a/src/components/Problem/ProblemCard.vue b/src/components/Problem/ProblemCard.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useSession } from "@/stores/session";
 import api from "@/models/api";
+import { isQuotaUnlimited } from "@/constants";
 
 interface Props {
   problem: Problem;
@@ -36,8 +37,13 @@ function downloadTestCase(problemId: number) {
             <div class="stat place-items-center py-0">
               <div class="stat-title">{{ $t("components.problem.card.quota") }}</div>
               <div class="stat-value">
-                <span>{{ problem.quota - problem.submitCount }}</span>
-                <span class="text-sm font-normal">{{ ` / ${problem.quota}` }}</span>
+                <template v-if="isQuotaUnlimited(problem.quota)">
+                  <span class="text-sm">{{ $t("components.problem.card.unlimited") }}</span>
+                </template>
+                <template v-else>
+                  <span>{{ problem.quota - problem.submitCount }}</span>
+                  <span class="text-sm font-normal">{{ ` / ${problem.quota}` }}</span>
+                </template>
               </div>
             </div>
             <div class="stat place-items-center py-0">

diff --git a/src/composables/useProblemSelection.ts b/src/composables/useProblemSelection.ts
@@ -3,7 +3,7 @@ import { useAxios } from "@vueuse/integrations/useAxios";
 import { fetcher } from "@/models/api";
 
 type ProblemSelections = { value: string; text: string }[];
-type ProblemId2Meta = Record<string, { name: string | "-"; quota: number | "-" }>;
+export type ProblemId2Meta = Record<string, { name: string; quota: number }>;
 
 export function useProblemSelection(courseName: string) {
   const {
@@ -14,17 +14,19 @@ export function useProblemSelection(courseName: string) {
 
   const problemSelections = computed<ProblemSelections>(() => {
     if (!problems.value) return [];
-    return problems.value.map(({ problemId, problemName, quota }) => ({
+    return problems.value.map(({ problemId, problemName }) => ({
       value: problemId.toString(),
       text: `${problemId} - ${problemName}`,
-      quota: quota >= 0 ? quota : "-",
     }));
   });
 
   const problemId2Meta = computed<ProblemId2Meta>(() => {
     if (!problems.value) return {};
     return Object.fromEntries(
-      problems.value.map((p) => [p.problemId.toString(), { name: p.problemName, quota: p.quota }]),
+      problems.value.map(({ problemId, problemName, quota }) => [
+        problemId.toString(),
+        { name: problemName, quota },
+      ]),
     );
   });
 

diff --git a/src/constants.ts b/src/constants.ts
@@ -53,3 +53,8 @@ export const LOCAL_STORAGE_KEY = {
   LOCALE: "locale",
   LAST_USED_LANG: "last-used-lang",
 };
+
+export const UNLIMITED_QUOTA = -1;
+export function isQuotaUnlimited(quota: number): boolean {
+  return quota === UNLIMITED_QUOTA;
+}
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -325,7 +325,8 @@
           "ml": "Memory Limit",
           "score": "Score"
         },
-        "noContent": "no content"
+        "noContent": "no content",
+        "unlimited": "unlimited"
       }
     },
     "courseSideBar": {

diff --git a/src/i18n/zh-tw.json b/src/i18n/zh-tw.json
@@ -324,7 +324,8 @@
           "ml": "記憶體限制",
           "score": "配分"
         },
-        "noContent": "無"
+        "noContent": "無",
+        "unlimited": "無限制"
       }
     },
     "courseSideBar": {

diff --git a/src/pages/course/[name]/homeworks/index.vue b/src/pages/course/[name]/homeworks/index.vue
@@ -5,38 +5,22 @@ import { fetcher } from "@/models/api";
 import { useSession } from "@/stores/session";
 import { useTitle } from "@vueuse/core";
 import { computed } from "vue";
+import { useProblemSelection } from "@/composables/useProblemSelection";
 
 const session = useSession();
 const route = useRoute();
 
 useTitle(`Homeworks - ${route.params.name} | Normal OJ`);
 const { data, error, isLoading } = useAxios<HomeworkList>(`/course/${route.params.name}/homework`, fetcher);
-const { data: problems, error: fetchProblemError } = useAxios<ProblemList>(
-  `/problem?offset=0&count=-1&course=${route.params.name}`,
-  fetcher,
-);
+const {
+  problemId2Meta,
+  error: fetchProblemError,
+  isLoading: isFetchingProblem,
+} = useProblemSelection(route.params.name as string);
 const homeworks = computed(() => {
   if (!data.value) return [];
   return data.value.sort((a, b) => b.start - a.start);
 });
-
-type ProblemMeta = Record<
-  string,
-  {
-    name: string;
-    quota: number | "-";
-  }
->;
-function getProblemMeta(ids: number[]): ProblemMeta {
-  if (!problems.value) return {};
-  const _problems = problems.value;
-  return Object.fromEntries(
-    ids.map((pid) => {
-      const p = _problems.find((p) => p.problemId === pid);
-      return [pid, p ? { name: p.problemName, quota: p.quota } : { name: "-", quota: "-" }];
-    }),
-  );
-}
 </script>
 
 <template>
@@ -53,7 +37,7 @@ function getProblemMeta(ids: number[]): ProblemMeta {
             <i-uil-plus-circle class="mr-1 lg:h-5 lg:w-5" /> {{ $t("course.hw.index.new") }}
           </router-link>
         </div>
-        <data-status-wrapper :error="error || fetchProblemError" :is-loading="isLoading">
+        <data-status-wrapper :error="error || fetchProblemError" :is-loading="isLoading || isFetchingProblem">
           <template #loading>
             <skeleton-card />
           </template>
@@ -62,7 +46,7 @@ function getProblemMeta(ids: number[]): ProblemMeta {
               v-for="homework in homeworks"
               :key="homework.id"
               :homework="homework"
-              :problems="getProblemMeta(homework.problemIds)"
+              :problems="problemId2Meta"
               class="mb-2"
             />
           </template>

diff --git a/src/pages/course/[name]/problems.vue b/src/pages/course/[name]/problems.vue
@@ -5,6 +5,7 @@ import { computed, ref, watch, watchEffect } from "vue";
 import { fetcher } from "@/models/api";
 import { UserRole, useSession } from "@/stores/session";
 import { useTitle } from "@vueuse/core";
+import { isQuotaUnlimited } from "@/constants";
 
 const session = useSession();
 const rolesCanReadProblemStatus = [UserRole.Admin, UserRole.Teacher];
@@ -89,7 +90,12 @@ const maxPage = computed(() => {
                   <td>
                     <span class="badge badge-info mr-1" v-for="tag in tags" :key="tag">{{ tag }}</span>
                   </td>
-                  <td>{{ quota - submitCount }} / {{ quota }}</td>
+                  <td>
+                    <template v-if="isQuotaUnlimited(quota)">
+                      <span class="text-sm">{{ $t("components.problem.card.unlimited") }}</span>
+                    </template>
+                    <template v-else> {{ quota - submitCount }} / {{ quota }} </template>
+                  </td>
                   <td>
                     <div class="tooltip" data-tip="Stats">
                       <router-link