feat(problem): support auto load submissions

.changes/submission.md

@@ -0,0 +1,5 @@
+---
+"algohub": patch:feat
+---
+
+Support auto load submissions in AlgoHub.

src/main.ts

@@ -7,7 +7,8 @@ import App from "@/App.vue";
 import PrimeVue from "primevue/config";
 import Aura from "@primevue/themes/aura";
 import ToastService from "primevue/toastservice";
-import ConfirmationService from 'primevue/confirmationservice';
+import ConfirmationService from "primevue/confirmationservice";
+import Tooltip from "primevue/tooltip";
 
 import router from "./router";
 import { createPinia } from "pinia";
@@ -32,5 +33,6 @@ app.use(PrimeVue, {
 });
 app.use(ToastService);
 app.use(ConfirmationService);
+app.directive("tooltip", Tooltip);
 
 app.mount("#app");

src/scripts/api.ts

@@ -8,8 +8,8 @@ import type {
   Profile,
   UserContent,
   CreateProblem,
-  Language,
-  RecordId,
+  Submission,
+  Contest,
 } from "./types";
 
 export interface Response<D> {
@@ -175,17 +175,6 @@ export const submitCode = async (problem_id: string, form: SubmitCodeForm) => {
   }
 };
 
-interface Submission {
-  id: string;
-  lang: Language;
-  problem: RecordId;
-  code: string;
-  status: "in_queue" | "judging" | "ready";
-  judge_details: { status: any; timeUsed: number; memoryUsed: number }[];
-  judge_result: { status: any; timeUsed: number; memoryUsed: number };
-  // contest
-}
-
 export const fetchSubmission = async (id: string, form?: Credentials) => {
   try {
     const response = await axios.post(`/code/get/${id}`, form);
@@ -194,3 +183,28 @@ export const fetchSubmission = async (id: string, form?: Credentials) => {
     return handleAxiosError(AxiosError.from(error));
   }
 };
+
+export const listSubmissionsByProblemForAccount = async (
+  id: string,
+  account_id: string,
+  auth: Credentials
+) => {
+  try {
+    const response = await axios.post(
+      `/code/list/${id}/account/${account_id}`,
+      auth
+    );
+    return response.data as Response<Submission[]>;
+  } catch (error) {
+    return handleAxiosError(AxiosError.from(error));
+  }
+};
+
+export const listAllContests = async (auth: Credentials) => {
+  try {
+    const response = await axios.post("/contest/list/all", auth);
+    return response.data as Response<Contest[]>;
+  } catch (error) {
+    return handleAxiosError(AxiosError.from(error));
+  }
+};

src/scripts/time.ts

@@ -5,46 +5,46 @@ export function timeAgo(timestamp: string): string {
     const diffInSeconds = Math.floor(diffInMs / 1000);
 
     if (diffInSeconds < 60) {
-        return `Updated just now`;
+        return `just now`;
     }
 
     const diffInMinutes = Math.floor(diffInSeconds / 60);
     if (diffInMinutes < 60) {
-        return `Updated ${diffInMinutes} minute${diffInMinutes > 1 ? 's' : ''} ago`;
+        return `${diffInMinutes} minute${diffInMinutes > 1 ? 's' : ''} ago`;
     }
 
     const diffInHours = Math.floor(diffInMinutes / 60);
     if (diffInHours < 24) {
-        return `Updated ${diffInHours} hour${diffInHours > 1 ? 's' : ''} ago`;
+        return `${diffInHours} hour${diffInHours > 1 ? 's' : ''} ago`;
     }
 
     const diffInDays = Math.floor(diffInHours / 24);
     if (diffInDays === 1) {
-        return `Updated yesterday`;
+        return `yesterday`;
     }
     if (diffInDays < 7) {
-        return `Updated ${diffInDays} day${diffInDays > 1 ? 's' : ''} ago`;
+        return `${diffInDays} day${diffInDays > 1 ? 's' : ''} ago`;
     }
 
     const diffInWeeks = Math.floor(diffInDays / 7);
     if (diffInWeeks === 1) {
-        return `Updated last week`;
+        return `last week`;
     }
     if (diffInWeeks < 4) {
-        return `Updated ${diffInWeeks} week${diffInWeeks > 1 ? 's' : ''} ago`;
+        return `${diffInWeeks} week${diffInWeeks > 1 ? 's' : ''} ago`;
     }
 
     const diffInMonths = Math.floor(diffInDays / 30);
     if (diffInMonths === 1) {
-        return `Updated last month`;
+        return `last month`;
     }
     if (diffInMonths < 12) {
-        return `Updated ${diffInMonths} month${diffInMonths > 1 ? 's' : ''} ago`;
+        return `${diffInMonths} month${diffInMonths > 1 ? 's' : ''} ago`;
     }
 
     const diffInYears = Math.floor(diffInDays / 365);
     if (diffInYears === 1) {
-        return `Updated last year`;
+        return `last year`;
     }
-    return `Updated ${diffInYears} year${diffInYears > 1 ? 's' : ''} ago`;
+    return `${diffInYears} year${diffInYears > 1 ? 's' : ''} ago`;
 }

src/scripts/types.ts

@@ -106,3 +106,37 @@ export enum Language {
   Nodejs = "nodejs",
   Java = "java",
 }
+
+export interface Submission {
+  id: string;
+  lang: Language;
+  problem: RecordId;
+  code: string;
+  status: "in_queue" | "judging" | "ready";
+  judge_details: { status: any; timeUsed: number; memoryUsed: number }[];
+  judge_result: { status: any; timeUsed: number; memoryUsed: number };
+  // contest
+}
+
+export enum Visibility {
+  Public = "public",
+  Private = "private",
+  Internal = "internal",
+}
+
+export interface Contest {
+  id: string;
+  name: string;
+  mode: Mode;
+  visibility: Visibility;
+  description: string;
+  announcement?: string;
+  start_time: string;
+  end_time: string;
+  owner: RecordId;
+  creator: string;
+  updaters: string[];
+  participants: RecordId[];
+  created_at: string;
+  updated_at: string;
+}

src/views/account/[id].vue

@@ -181,7 +181,7 @@ onMounted(async () => {
                                                         'Public' }}
                                                     </Badge>
                                                 </div>
-                                                <span class="text-sm">{{ timeAgo(problem.updated_at) }}</span>
+                                                <span class="text-sm">Updated {{ timeAgo(problem.updated_at) }}</span>
                                             </div>
                                         </div>
                                     </template>

src/views/problem/[id].vue

@@ -4,9 +4,10 @@ import { useRoute, useRouter } from 'vue-router';
 import * as api from '@/scripts/api';
 import { useAccountStore, useThemeStore } from '@/scripts/store';
 import { useToast } from 'primevue';
-import { Language, UserProblem } from '@/scripts/types';
+import { Language, Submission, UserProblem } from '@/scripts/types';
 import { MdPreview } from 'md-editor-v3';
 import 'md-editor-v3/lib/style.css';
+import { timeAgo } from '@/scripts/time';
 
 const route = useRoute();
 const router = useRouter();
@@ -54,12 +55,9 @@ const onSubmit = async (code: string, lang: Language, finish: (text: string, sev
     if (!res.success) {
         return finish(res.message, 'error');
     }
-    await new Promise(resolve => setTimeout(resolve, 2000));
-    const submission = await api.fetchSubmission(res.data!.id, accountStore.auth!);
-    if (!submission.success) {
-        return finish(submission.message, 'error');
-    }
-    finish(submission.data!.judge_result.status, 'success');
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    await togglePanel('records');
+    finish('', 'info')
 }
 
 const path = ref<{ label?: string, link?: string }[]>([]);
@@ -89,12 +87,42 @@ window.onresize = () => {
 onUnmounted(() => {
     window.onresize = null;
 })
+
+const selectedPanel = ref('problem');
+
+const togglePanel = async (panel: string) => {
+    selectedPanel.value = panel;
+    switch (panel) {
+        case 'problem':
+            break;
+        case 'records':
+            await fetchSubmissions();
+            break;
+    }
+}
+
+const records = ref<Submission[]>();
+const loadingRecords = ref(false);
+const fetchSubmissions = async () => {
+    loadingRecords.value = true;
+    const res = await api.listSubmissionsByProblemForAccount(
+        problem.value!.id,
+        accountStore.account!.id!,
+        accountStore.auth!
+    );
+    if (!res.success) {
+        return toast.add({ severity: 'error', summary: 'Error', detail: res.message });
+    }
+    records.value = res.data!;
+    loadingRecords.value = false;
+}
 </script>
 
 <template>
     <div class="flex flex-col h-screen">
         <UniversalToolBar :path></UniversalToolBar>
-        <Splitter :gutterSize="2" class="h-full overflow-hidden" :layout="windowWidth > 768 ? 'horizontal' : 'vertical'">
+        <Splitter :gutterSize="2" class="h-full overflow-hidden"
+            :layout="windowWidth > 768 ? 'horizontal' : 'vertical'">
             <SplitterPanel>
                 <div class="flex flex-col gap-2 h-full">
                     <div class="p-3 flex flex-wrap flex-row items-center justify-between w-full">
@@ -107,15 +135,14 @@ onUnmounted(() => {
                     </div>
                     <div class="flex flex-row h-full overflow-auto">
                         <div class="flex flex-col w-20 gap-4">
-                            <Button pt:label:class="text-xs" label="Problem" icon="pi pi-code" size="small"
-                                iconPos="top" plain text disabled></Button>
-                            <Button pt:label:class="text-xs" label="Records" icon="pi pi-file" size="small"
-                                iconPos="top" plain text disabled></Button>
+                            <Button @click="togglePanel('problem')" pt:label:class="text-xs" label="Problem"
+                                icon="pi pi-code" size="small" iconPos="top" plain text></Button>
+                            <Button @click="togglePanel('records')" pt:label:class="text-xs" label="Records"
+                                icon="pi pi-file" size="small" iconPos="top" plain text></Button>
                         </div>
-                        <div class="flex w-full h-full overflow-auto">
-                            <MdPreview v-if="!loading" class="!bg-transparent"
-                                :modelValue="formatProblem(problem!)" :theme="themeStore.dark ? 'dark' : 'light'"
-                                codeTheme="github" previewTheme="github">
+                        <div v-if="selectedPanel === 'problem'" class="flex w-full h-full overflow-auto">
+                            <MdPreview v-if="!loading" class="!bg-transparent" :modelValue="formatProblem(problem!)"
+                                :theme="themeStore.dark ? 'dark' : 'light'" codeTheme="github" previewTheme="github">
                             </MdPreview>
                             <div v-else class="flex flex-col gap-4 m-3">
                                 <Skeleton height="2em" width="12vw"></Skeleton>
@@ -124,6 +151,60 @@ onUnmounted(() => {
                                 <Skeleton height="10em" width="36vw"></Skeleton>
                             </div>
                         </div>
+                        <div v-if="selectedPanel === 'records'" class="flex w-full h-full overflow-auto">
+                            <DataView :value="records" dataKey="id" class="w-full h-full">
+                                <template #header>
+                                    <div class="inline-flex flex-wrap justify-end items-center gap-4 w-full">
+                                        <Button size="small" icon="pi pi-refresh" @click="fetchSubmissions"
+                                            :loading="loadingRecords"></Button>
+                                    </div>
+                                </template>
+                                <template #empty>
+                                    <div class="w-full h-full py-10 gap-4 flex flex-col items-center justify-center">
+                                        <span class="text-xl text-gray-500">No record found.</span>
+                                    </div>
+                                </template>
+                                <template v-if="loadingRecords" #list>
+                                    <div v-for="i in 3" :key="i">
+                                        <div class="flex flex-col items-start p-6 gap-3"
+                                            :class="{ 'border-t border-zinc-200 dark:border-zinc-700': i !== 0 }">
+                                            <Skeleton height="2em" width="10em"></Skeleton>
+                                            <Skeleton></Skeleton>
+                                            <Skeleton width="3em"></Skeleton>
+                                        </div>
+                                    </div>
+                                </template>
+                                <template v-else #list="slotProps">
+                                    <div v-for="(submission, index) in slotProps.items">
+                                        <div class="flex flex-col items-start p-6 gap-3"
+                                            :class="{ 'border-t border-zinc-200 dark:border-zinc-700': index !== 0 }">
+                                            <div class="flex justify-center items-center gap-4 w-full">
+                                                <div class="flex flex-row justify-between w-full">
+                                                    <div class="flex flex-row gap-2">
+                                                        <Avatar :image="accountStore.avatarUrl" shape="circle"></Avatar>
+                                                        <div class="flex flex-col items-start">
+                                                            <span class="text-sm">{{ accountStore.account.username
+                                                                }}</span>
+                                                            <span class="text-xs text-gray-500">Submitted {{
+                                                                timeAgo(submission.created_at) }}</span>
+                                                        </div>
+                                                    </div>
+                                                    <Badge :value="submission.lang" severity="info" size="small">
+                                                    </Badge>
+                                                </div>
+                                            </div>
+                                            <div class="w-full flex flex-row justify-between items-center gap-4">
+                                                Judge Status: {{ submission.status }}
+                                            </div>
+                                            <Message class="w-full" v-if="submission.status === 'ready'" size="large"
+                                                :severity="submission.judge_result.status.type === 'accepted' ? 'success' : 'error'">
+                                                {{
+                                                    submission.judge_result.status.type }}</Message>
+                                        </div>
+                                    </div>
+                                </template>
+                            </DataView>
+                        </div>
                     </div>
                 </div>
             </SplitterPanel>