✨ Sticker packs full update & delete

pages/creator/stickers/index.vue

@@ -11,11 +11,17 @@
           text="New"
           append-icon="mdi-plus"
           variant="tonal"
-          to="/dev/bots/new"
+          to="/creator/stickers/new"
         />
       </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>
+
     <div class="mt-5">
       <v-expansion-panels>
         <v-expansion-panel
@@ -42,6 +48,55 @@
                   <span v-else>{{ item.prefix }}</span>
                 </v-code>
               </v-col>
+              <v-col cols="12" md="6" lg="4">
+                <p><b>Actions</b></p>
+                <div class="flex mx-[-10px]">
+                  <v-btn
+                    variant="text"
+                    size="x-small"
+                    color="warning"
+                    icon="mdi-pencil"
+                    :to="`/creator/stickers/edit/${item.id}`"
+                  />
+
+                  <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 sticker pack #${item.id}?`">
+                        <v-card-text>
+                          This action will delete the stickers belongs to it 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="() => { deletePack(item); isActive.value = false }"
+                          />
+                        </v-card-actions>
+                      </v-card>
+                    </template>
+                  </v-dialog>
+                </div>
+              </v-col>
               <v-col cols="12">
                 <p><b>Stickers</b></p>
                 <v-card variant="outlined" class="mx-[-0.5ch] mt-1">
@@ -57,6 +112,8 @@
 </template>
 
 <script setup lang="ts">
+import { solarFetch } from "~/utils/request"
+
 definePageMeta({
   layout: "creator-hub",
   middleware: ["auth"],
@@ -66,6 +123,8 @@ useHead({
   title: "Stickers",
 })
 
+const { t } = useI18n()
+
 const loading = ref(false)
 const error = ref<null | string>(null)
 
@@ -74,11 +133,11 @@ const data = ref<any[]>([])
 async function readPacks() {
   loading.value = true
 
-  const resp = await solarFetch(`/cgi/uc/stickers/packs?take=10&offset=${data.value.length}`)
-  if (resp.status != 200) {
-    error.value = await resp.text()
+  const res = await solarFetch(`/cgi/uc/stickers/packs?take=10&offset=${data.value.length}`)
+  if (res.status != 200) {
+    error.value = await res.text()
   } else {
-    const out = await resp.json()
+    const out = await res.json()
     data.value.push(...out["data"])
   }
 
@@ -86,4 +145,22 @@ async function readPacks() {
 }
 
 onMounted(() => readPacks())
+
+const submitting = ref(false)
+
+async function deletePack(item: any) {
+  submitting.value = true
+
+  const res = await solarFetch(`/cgi/uc/stickers/packs/${item.id}`, {
+    method: "DELETE",
+  })
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    data.value = []
+    await readPacks()
+  }
+
+  submitting.value = false
+}
 </script>