From 2c38a1fd501033bb84b2c40839ab707c019bc5d2 Mon Sep 17 00:00:00 2001
From: LittleSheep <littlesheep.code@hotmail.com>
Date: Sun, 25 Aug 2024 20:58:36 +0800
Subject: [PATCH] :sparkles: Dev portal bots management

---
 components/account/AuthTicketTable.vue |  12 +-
 layouts/dev-portal.vue                 |  67 +++++++++++
 pages/dev/bots/index.vue               | 158 +++++++++++++++++++++++++
 pages/dev/bots/new.vue                 |  94 +++++++++++++++
 pages/dev/index.vue                    |  23 ++++
 pages/users/me.vue                     |   2 +-
 6 files changed, 348 insertions(+), 8 deletions(-)
 create mode 100644 layouts/dev-portal.vue
 create mode 100644 pages/dev/bots/index.vue
 create mode 100644 pages/dev/bots/new.vue
 create mode 100644 pages/dev/index.vue

diff --git a/components/account/AuthTicketTable.vue b/components/account/AuthTicketTable.vue
index 31b854e..4aef4b9 100644
--- a/components/account/AuthTicketTable.vue
+++ b/components/account/AuthTicketTable.vue
@@ -89,8 +89,6 @@
 <script setup lang="ts">
 import { solarFetch } from "~/utils/request"
 
-const config = useRuntimeConfig()
-
 const error = ref<string | null>(null)
 
 const dataDefinitions: { [id: string]: any[] } = {
@@ -114,7 +112,7 @@ const dataDefinitions: { [id: string]: any[] } = {
 const tickets = ref<any>([])
 const events = ref<any>([])
 
-const reverting = reactive({ tickets: false, sessions: false, events: false })
+const reverting = reactive({ tickets: false, events: false })
 const pagination = reactive({
   tickets: { page: 1, pageSize: 5, total: 0 },
   events: { page: 1, pageSize: 5, total: 0 },
@@ -124,7 +122,7 @@ async function readTickets({ page, itemsPerPage }: { page?: number; itemsPerPage
   if (itemsPerPage) pagination.tickets.pageSize = itemsPerPage
   if (page) pagination.tickets.page = page
 
-  reverting.sessions = true
+  reverting.tickets = true
   const res = await solarFetch(
     "/cgi/id/users/me/tickets?" +
     new URLSearchParams({
@@ -139,7 +137,7 @@ async function readTickets({ page, itemsPerPage }: { page?: number; itemsPerPage
     tickets.value = data["data"]
     pagination.tickets.total = data["count"]
   }
-  reverting.sessions = false
+  reverting.tickets = false
 }
 
 async function readEvents({ page, itemsPerPage }: { page?: number; itemsPerPage?: number }) {
@@ -167,7 +165,7 @@ async function readEvents({ page, itemsPerPage }: { page?: number; itemsPerPage?
 Promise.all([readTickets({}), readEvents({})])
 
 async function killTicket(item: any) {
-  reverting.sessions = true
+  reverting.tickets = true
   const res = await solarFetch(`/cgi/id/users/me/tickets/${item.id}`, {
     method: "DELETE",
   })
@@ -177,6 +175,6 @@ async function killTicket(item: any) {
     await readTickets({})
     error.value = null
   }
-  reverting.sessions = false
+  reverting.tickets = false
 }
 </script>
diff --git a/layouts/dev-portal.vue b/layouts/dev-portal.vue
new file mode 100644
index 0000000..1287679
--- /dev/null
+++ b/layouts/dev-portal.vue
@@ -0,0 +1,67 @@
+<template>
+  <v-app-bar flat color="primary" scroll-behavior="hide" scroll-threshold="800">
+    <v-container fluid class="mx-auto d-flex align-center justify-center px-8">
+      <nuxt-link to="/dev" exact class="flex items-center me-4">
+        <v-img class="me-3 ms-1" width="32" height="32" alt="Logo" :src="Logo" />
+
+        <span>Developer Portal</span>
+      </nuxt-link>
+
+      <div class="nav-links overflow-y-auto flex">
+        <v-btn variant="text" text="Bots" to="/dev/bots" exact />
+      </div>
+
+      <v-spacer></v-spacer>
+
+      <v-menu>
+        <template v-slot:activator="{ props }">
+          <v-btn
+            size="small"
+            icon="mdi-translate"
+            v-bind="props"
+          />
+        </template>
+        <v-list>
+          <v-list-item
+            class="w-48"
+            density="compact"
+            v-for="item in locales"
+            :key="item.code"
+            :value="item.code"
+            :active="locale == item.code"
+            @click.prevent.stop="setLocale(item.code)"
+          >
+            <v-list-item-title>{{ item.name }}</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+
+      <user-menu />
+    </v-container>
+  </v-app-bar>
+
+  <v-main>
+    <slot />
+  </v-main>
+</template>
+
+<script setup lang="ts">
+import Logo from "../assets/logo-w-shadow.png"
+
+const { locale, locales, setLocale, t } = useI18n()
+
+useHead({
+  titleTemplate: "%s | Solsynth Dev Portal"
+})
+</script>
+
+<style scoped>
+.nav-links::-webkit-scrollbar {
+  display: none;
+}
+
+.nav-links {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+</style>
diff --git a/pages/dev/bots/index.vue b/pages/dev/bots/index.vue
new file mode 100644
index 0000000..75bded7
--- /dev/null
+++ b/pages/dev/bots/index.vue
@@ -0,0 +1,158 @@
+<template>
+  <v-container>
+    <div class="flex justify-between items-center mt-5">
+      <div class="flex items-end gap-2">
+        <h1 class="text-2xl">Bots</h1>
+        <v-chip rounded="xl" size="small" class="font-mono mb-0.5">
+          {{ pagination.bots.total }}/{{ currentBotLimit }} quota
+        </v-chip>
+      </div>
+
+      <div class="flex gap-2">
+        <v-btn
+          color="primary"
+          text="New"
+          append-icon="mdi-plus"
+          variant="tonal"
+          to="/dev/bots/new"
+        />
+      </div>
+    </div>
+
+    <div class="mt-5">
+      <v-card>
+        <v-data-table-server
+          density="compact"
+          :headers="dataDefinitions.bots"
+          :items="bots"
+          :items-length="pagination.bots.total"
+          :loading="reverting.bots"
+          v-model:items-per-page="pagination.bots.pageSize"
+          @update:options="readBots"
+          item-value="id"
+        >
+          <template v-slot:item="{ item }: { item: any }">
+            <tr>
+              <td>{{ item.id }}</td>
+              <td>{{ item.name }}</td>
+              <td>{{ new Date(item.created_at).toLocaleString() }}</td>
+              <td>
+                <v-dialog max-width="480">
+                  <template #activator="{ props }">
+                    <v-btn
+                      v-bind="props"
+                      variant="text"
+                      size="x-small"
+                      color="error"
+                      icon="mdi-delete"
+                      :disabled="submitting"
+                    />
+                  </template>
+
+                  <template v-slot:default="{ isActive }">
+                    <v-card :title="`Delete bot ${item.name}?`">
+                      <v-card-text>
+                        This action will delete the bot and all resources related to this bot and cannot be undone.
+                      </v-card-text>
+
+                      <v-card-actions>
+                        <v-spacer></v-spacer>
+
+                        <v-btn
+                          text="Cancel"
+                          color="grey"
+                          @click="isActive.value = false"
+                        ></v-btn>
+
+                        <v-btn
+                          text="Delete"
+                          color="error"
+                          @click="() => { deleteBot(item); isActive.value = false }"
+                        />
+                      </v-card-actions>
+                    </v-card>
+                  </template>
+                </v-dialog>
+              </td>
+            </tr>
+          </template>
+        </v-data-table-server>
+      </v-card>
+    </div>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { solarFetch } from "~/utils/request"
+
+definePageMeta({
+  layout: "dev-portal",
+})
+
+useHead({
+  title: "Bots",
+})
+
+const auth = useUserinfo()
+
+const error = ref<null | string>(null)
+
+const dataDefinitions: { [id: string]: any[] } = {
+  bots: [
+    { align: "start", key: "id", title: "ID" },
+    { align: "start", key: "name", title: "Name" },
+    { align: "start", key: "created_at", title: "Created At" },
+    { align: "start", key: "actions", title: "Actions", sortable: false },
+  ],
+}
+
+const bots = ref<any>([])
+
+const currentBotLimit = computed(() => auth.userinfo?.perm_nodes["CreateBots"] ?? 0)
+
+const reverting = reactive({ bots: false })
+const pagination = reactive({
+  bots: { page: 1, pageSize: 5, total: 0 },
+})
+
+async function readBots({ page, itemsPerPage }: { page?: number; itemsPerPage?: number }) {
+  if (itemsPerPage) pagination.bots.pageSize = itemsPerPage
+  if (page) pagination.bots.page = page
+
+  reverting.bots = true
+  const res = await solarFetch(
+    "/cgi/id/dev/bots?" +
+    new URLSearchParams({
+      take: pagination.bots.pageSize.toString(),
+      offset: ((pagination.bots.page - 1) * pagination.bots.pageSize).toString(),
+    }),
+  )
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    const data = await res.json()
+    bots.value = data["data"]
+    pagination.bots.total = data["count"]
+  }
+  reverting.bots = false
+}
+
+onMounted(() => readBots({}))
+
+const submitting = ref(false)
+
+async function deleteBot(item: any) {
+  submitting.value = true
+
+  const res = await solarFetch(`/cgi/id/dev/bots/${item.id}`, {
+    method: "DELETE",
+  })
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    await readBots({ page: 1 })
+  }
+
+  submitting.value = false
+}
+</script>
diff --git a/pages/dev/bots/new.vue b/pages/dev/bots/new.vue
new file mode 100644
index 0000000..5842f00
--- /dev/null
+++ b/pages/dev/bots/new.vue
@@ -0,0 +1,94 @@
+<template>
+  <v-container>
+    <div class="flex justify-between items-center mt-5">
+      <div class="flex items-end gap-2">
+        <h1 class="text-2xl">Create a new bot</h1>
+      </div>
+
+      <div class="flex gap-2">
+        <v-btn
+          color="grey"
+          text="Cancel"
+          prepend-icon="mdi-arrow-left"
+          variant="tonal"
+          to="/dev/bots"
+        />
+      </div>
+    </div>
+
+    <v-expand-transition>
+      <v-alert v-if="error" variant="tonal" type="error" class="text-xs mt-5 mb-3">
+        {{ t("errorOccurred", [error]) }}
+      </v-alert>
+    </v-expand-transition>
+
+    <v-form class="mt-5" @submit.prevent="submit">
+      <v-row>
+        <v-col cols="12" md="6" lg="4">
+          <v-text-field
+            label="Name"
+            name="name"
+            variant="outlined"
+            hide-details
+          />
+        </v-col>
+        <v-col cols="12" md="6" lg="4">
+          <v-text-field
+            label="Nick"
+            name="nick"
+            variant="outlined"
+            hide-details
+          />
+        </v-col>
+        <v-col cols="12" md="6" lg="4">
+          <v-textarea
+            auto-grow
+            rows="1"
+            label="Description"
+            name="description"
+            variant="outlined"
+          />
+        </v-col>
+      </v-row>
+
+      <div class="flex justify-end">
+        <v-btn type="submit" text="Create" append-icon="mdi-plus" :loading="submitting" />
+      </div>
+    </v-form>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: "dev-portal",
+})
+
+useHead({
+  title: "New Bot",
+})
+
+const { t } = useI18n()
+
+const error = ref<null | string>(null)
+const submitting = ref(false)
+
+async function submit(evt: SubmitEvent) {
+  const data = Object.fromEntries(new FormData(evt.target as HTMLFormElement).entries())
+  if (!data.name) return
+
+  submitting.value = true
+
+  const res = await solarFetch("/cgi/id/dev/bots", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(data),
+  })
+  if (res.status != 200) {
+    error.value = await res.text()
+  } else {
+    navigateTo('/dev/bots')
+  }
+
+  submitting.value = false
+}
+</script>
diff --git a/pages/dev/index.vue b/pages/dev/index.vue
new file mode 100644
index 0000000..e814f6f
--- /dev/null
+++ b/pages/dev/index.vue
@@ -0,0 +1,23 @@
+<template>
+  <v-container fluid class="h-[calc(100vh-80px)] flex flex-col justify-center items-center text-center">
+    <v-icon icon="mdi-code-tags" size="64" />
+    <div class="text-2xl">Hello, developer!</div>
+    <div class="max-w-[320px]">Switch page using navigator above to get start developing with Solar Network.</div>
+
+    <div class="text-xs font-mono text-grey mt-5">
+      @{{ auth.userinfo?.name }} · {{ auth.userinfo?.id.toString().padStart(8, '0') }}
+    </div>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: "dev-portal",
+})
+
+useHead({
+  title: "Landing",
+})
+
+const auth = useUserinfo()
+</script>
diff --git a/pages/users/me.vue b/pages/users/me.vue
index 9fcacce..75fcbea 100644
--- a/pages/users/me.vue
+++ b/pages/users/me.vue
@@ -25,7 +25,7 @@
             </v-card-text>
           </v-card>
 
-          <v-card class="w-28 aspect-square cursor-not-allowed" disabled>
+          <v-card class="w-28 aspect-square" to="/dev">
             <v-card-text class="flex flex-col justify-center items-center text-center h-full">
               <v-icon icon="mdi-code-tags" size="32" />
               <span class="text-sm mt-1.75">Dev Portal</span>