✨ Sticker packs full update & delete

components/creator/stickers/DataTable.vue

@@ -1,4 +1,10 @@
 <template>
+  <v-expand-transition>
+    <v-alert v-if="error" variant="tonal" type="error" class="text-xs mb-3">
+      {{ t("errorOccurred", [error]) }}
+    </v-alert>
+  </v-expand-transition>
+
   <v-data-table-server
     density="compact"
     :headers="dataDefinitions.stickers"
@@ -22,7 +28,7 @@
             rounded="sm"
             :src="`${config.public.solarNetworkApi}/cgi/uc/attachments/${item.attachment.rid}`"
           >
-            <template v-slot:placeholder>
+            <template #placeholder>
               <div class="d-flex align-center justify-center fill-height">
                 <v-progress-circular
                   size="x-small"
@@ -37,7 +43,13 @@
         <td>{{ item.name }}</td>
         <td>{{ props.packPrefix + item.alias }}</td>
         <td>
-
+          <v-btn
+            v-bind="props"
+            variant="text"
+            size="x-small"
+            color="warning"
+            icon="mdi-pencil"
+          />
         </td>
       </tr>
     </template>
@@ -48,6 +60,7 @@
 import { solarFetch } from "~/utils/request"
 
 const config = useRuntimeConfig()
+const { t } = useI18n()
 
 const props = defineProps<{ packId: number, packPrefix?: string }>()
 

pages/creator/stickers/edit/[id].vue

@@ -0,0 +1,118 @@
+<template>
+  <v-container class="px-12">
+    <div class="flex justify-between items-center mt-5">
+      <div class="flex items-end gap-2">
+        <h1 class="text-2xl">Edit sticker pack: {{ data?.name ?? "Loading" }}</h1>
+      </div>
+
+      <div class="flex gap-2">
+        <v-btn
+          color="grey"
+          text="Cancel"
+          prepend-icon="mdi-arrow-left"
+          variant="tonal"
+          to="/creator/stickers"
+        />
+      </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">
+          <v-text-field
+            label="Name"
+            name="name"
+            variant="outlined"
+            persistent-hint
+            hint="A human friendly name for user to recognize this sticker pack"
+            :model-value="data?.name"
+          />
+        </v-col>
+        <v-col cols="12" md="6">
+          <v-text-field
+            label="Prefix"
+            name="prefix"
+            variant="outlined"
+            persistent-hint
+            hint="A prefix for every sticker in this pack, will add before sticker's alias"
+            :model-value="data?.prefix"
+          />
+        </v-col>
+        <v-col cols="12">
+          <v-textarea
+            auto-grow
+            rows="3"
+            label="Description"
+            name="description"
+            variant="outlined"
+            persistent-hint
+            hint="A description for user to know about this sticker pack"
+            :model-value="data?.description"
+          />
+        </v-col>
+      </v-row>
+
+      <div class="flex justify-end">
+        <v-btn type="submit" text="Save changes" append-icon="mdi-content-save" :disabled="data == null"
+               :loading="submitting" />
+      </div>
+    </v-form>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: "creator-hub",
+  middleware: ["auth"],
+})
+
+useHead({
+  title: "Edit Sticker Pack",
+})
+
+
+const { t } = useI18n()
+const route = useRoute()
+
+const data = ref<any>(null)
+
+async function readPack() {
+  const res = await solarFetch(`/cgi/uc/stickers/packs/${route.params.id}`)
+  if (res.status != 200) {
+    error.value = await res.text()
+  } else {
+    data.value = await res.json()
+  }
+}
+
+onMounted(() => readPack())
+
+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/uc/stickers/packs/${route.params.id}`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(data),
+  })
+  if (res.status != 200) {
+    error.value = await res.text()
+  } else {
+    navigateTo("/creator/stickers")
+  }
+
+  submitting.value = false
+}
+</script>

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}`)
+  const res = await solarFetch(`/cgi/uc/stickers/packs?take=10&offset=${data.value.length}`)
-  if (resp.status != 200) {
+  if (res.status != 200) {
-    error.value = await resp.text()
+    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>

pages/creator/stickers/new.vue

@@ -0,0 +1,99 @@
+<template>
+  <v-container class="px-12">
+    <div class="flex justify-between items-center mt-5">
+      <div class="flex items-end gap-2">
+        <h1 class="text-2xl">Create a new sticker pack</h1>
+      </div>
+
+      <div class="flex gap-2">
+        <v-btn
+          color="grey"
+          text="Cancel"
+          prepend-icon="mdi-arrow-left"
+          variant="tonal"
+          to="/creator/stickers"
+        />
+      </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">
+          <v-text-field
+            label="Name"
+            name="name"
+            variant="outlined"
+            persistent-hint
+            hint="A human friendly name for user to recognize this sticker pack"
+          />
+        </v-col>
+        <v-col cols="12" md="6">
+          <v-text-field
+            label="Prefix"
+            name="prefix"
+            variant="outlined"
+            persistent-hint
+            hint="A prefix for every sticker in this pack, will add before sticker's alias"
+          />
+        </v-col>
+        <v-col cols="12">
+          <v-textarea
+            auto-grow
+            rows="3"
+            label="Description"
+            name="description"
+            variant="outlined"
+            persistent-hint
+            hint="A description for user to know about this sticker pack"
+          />
+        </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: "creator-hub",
+  middleware: ["auth"],
+})
+
+useHead({
+  title: "New Sticker Pack",
+})
+
+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/uc/stickers/packs", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(data),
+  })
+  if (res.status != 200) {
+    error.value = await res.text()
+  } else {
+    navigateTo('/creator/stickers')
+  }
+
+  submitting.value = false
+}
+</script>

public/robots.txt

@@ -1,5 +1,8 @@
 User-agent: *
 Disallow: /embed
+Disallow: /dev
+Disallow: /creator
+Disallow: /users/me
 Allow: /
 
 Sitemap: https://solsynth.dev/sitemap.xml