add test celery ui

.env

@@ -14,7 +14,7 @@ DOCKER_IMAGE_CELERYWORKER=celeryworker
 DOCKER_IMAGE_FRONTEND=frontend
 
 # Backend
-BACKEND_CORS_ORIGINS=["http://localhost", "http://localhost:4200", "http://localhost:3000", "http://localhost:8080", "https://localhost", "https://localhost:4200", "https://localhost:3000", "https://localhost:8080", "http://dev.ai-anchor.com", "http://dev.ai-anchor.com:5173", "http://dev.ai-anchor.com:8080", "https://stag.ai-anchor.com", "https://ai-anchor.com", "http://local.dockertoolbox.tiangolo.com", "http://localhost.tiangolo.com"]
+BACKEND_CORS_ORIGINS=["http://localhost", "http://localhost:4200", "http://localhost:3000", "http://localhost:5173", "http://localhost:8080", "https://localhost", "https://localhost:4200", "https://localhost:3000", "https://localhost:8080", "http://dev.ai-anchor.com", "http://dev.ai-anchor.com:5173", "http://dev.ai-anchor.com:8080", "https://stag.ai-anchor.com", "https://ai-anchor.com", "http://local.dockertoolbox.tiangolo.com", "http://localhost.tiangolo.com"]
 PROJECT_NAME=AI anchor
 SECRET_KEY=1df1f2180c7b2550e76a8ccf5e67a76e5321d8c2d3fee4a725f8b80baf9a0c91
 FIRST_SUPERUSER=admin@ai-anchor.com

backend/app/app/main.py

@@ -17,5 +17,5 @@ if settings.BACKEND_CORS_ORIGINS:
         allow_methods=["*"],
         allow_headers=["*"],
     )
-    
+
 app.include_router(api_router, prefix=settings.API_V1_STR)

frontend/src/api.ts

@@ -48,5 +48,8 @@ export const api = {
   },
   async registerUser(data: IUserProfileRegister) {
     return axios.post(`${apiUrl}/api/v1/users/register`, data);
-  }
+  },
+  async testCelery(token: string, data:{msg:string}){
+    return axios.post<{msg:string}>(`${apiUrl}/api/v1/utils/test-celery`, data, authHeaders(token));
+  },
 };

frontend/src/router/index.ts

@@ -92,6 +92,12 @@ const router = createRouter({
                   component: () => import(
                     /* webpackChunkName: "main-admin-users-create" */ '@/views/main/admin/CreateUser.vue'),
                 },
+                {
+                  path: 'test-celery',
+                  name: 'test-celery',
+                  component: () => import(
+                    /* webpackChunkName: "main-admin-users-create" */ '@/views/main/admin/TestCelery.vue'),
+                },
               ],
             },
           ],

frontend/src/stores/admin.ts

@@ -85,5 +85,25 @@ export const useAdminStore = defineStore("AdminStoreId", {
               await mainStore.checkApiError(error);
             }
         },
+        async actionTestCelery(payload: {msg:string}) {
+          const mainStore = useMainStore();
+          try {
+            const loadingNotification = { content: "sending", showProgress: true };
+            mainStore.addNotification(loadingNotification);
+            const response = (
+              await Promise.all([
+                api.testCelery(mainStore.token, payload),
+                await new Promise<void>((resolve, _) => setTimeout(() => resolve(), 500)),
+              ])
+            );
+            mainStore.removeNotification(loadingNotification);
+            mainStore.addNotification({
+              content: "Word received",
+                color: "success",
+            })
+          } catch (error) {
+            await mainStore.checkApiError(error);
+          }
+        }
     },
 });

frontend/src/utils.ts

@@ -11,6 +11,10 @@ export const emailRules =  [
   (v:any) => /^[a-z.0-9]+@[a-z.-]+\.[a-z]+$/i.test(v) || 'Must be a valid e-mail.',
 ];
 
+export const required = [
+  (v:any) => !!v || 'This field is required.',
+];
+
 export const nameRules = [
   (v:any) => !!v || 'Name is required.',
 ];

frontend/src/views/main/Main.vue

@@ -35,6 +35,9 @@
             <v-list-item to="/main/admin/users/create" prepend-icon="person_add">
               <v-list-item-title>Create User</v-list-item-title>
             </v-list-item>
+            <v-list-item to="/main/admin/test-celery" prepend-icon="engineering">
+              <v-list-item-title>Test Celery</v-list-item-title>
+            </v-list-item>
           </v-list>
         </v-sheet>
         <!-- <v-spacer></v-spacer> -->

frontend/src/views/main/admin/TestCelery.vue

@@ -0,0 +1,39 @@
+<template>
+  <v-container fluid>
+    <v-card class="ma-3 pa-3">
+      <v-card-title primary-title>
+        <div class="headline primary--text">Test Celery</div>
+      </v-card-title>
+      <v-card-text>
+          <v-form v-model="valid" ref="form">
+            <v-text-field label="Message" v-model="msg" :rules="required" ></v-text-field>
+          </v-form>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn @click="submit" :disabled="!valid">
+              Send
+            </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-container>
+</template>
+<script setup lang="ts">
+import { ref} from 'vue';
+import { required } from '@/utils';
+import { useAdminStore } from '@/stores/admin';
+
+const valid = ref(true);
+const msg = ref('');
+const form = ref(null);
+
+const adminStore = useAdminStore();
+
+async function submit() {
+  await (form as any).value.validate();
+  if (valid.value) {
+    await adminStore.actionTestCelery({msg:msg.value});
+    (form as any).value.reset();
+  }
+}
+</script>