From 9e7881745aa4908cbd5eb979d8560be60147e546 Mon Sep 17 00:00:00 2001
From: LittleSheep <littlesheep.code@hotmail.com>
Date: Thu, 26 Sep 2024 21:22:34 +0800
Subject: [PATCH] :sparkles: Sticker CRUD

---
 components/creator/stickers/DataTable.vue     | 112 +++++++++--
 .../creator/stickers/[id]/[sticker]/edit.vue  | 178 ++++++++++++++++++
 .../stickers/{edit/[id].vue => [id]/edit.vue} |   0
 pages/creator/stickers/[id]/new.vue           | 158 ++++++++++++++++
 pages/creator/stickers/index.vue              |   9 +-
 pages/dev/bots/index.vue                      |   1 +
 pages/gallery/new.vue                         |  13 +-
 7 files changed, 449 insertions(+), 22 deletions(-)
 create mode 100644 pages/creator/stickers/[id]/[sticker]/edit.vue
 rename pages/creator/stickers/{edit/[id].vue => [id]/edit.vue} (100%)
 create mode 100644 pages/creator/stickers/[id]/new.vue

diff --git a/components/creator/stickers/DataTable.vue b/components/creator/stickers/DataTable.vue
index ea8706d..44822a6 100644
--- a/components/creator/stickers/DataTable.vue
+++ b/components/creator/stickers/DataTable.vue
@@ -19,26 +19,32 @@
       <tr>
         <td>{{ item.id }}</td>
         <td>
-          <v-img
-            cover
-            aspect-ratio="1"
-            width="28"
-            height="28"
-            color="grey-lighten-2"
-            rounded="sm"
-            :src="`${config.public.solarNetworkApi}/cgi/uc/attachments/${item.attachment.rid}`"
-          >
-            <template #placeholder>
-              <div class="d-flex align-center justify-center fill-height">
-                <v-progress-circular
-                  size="x-small"
-                  width="3"
-                  color="grey-lighten-4"
-                  indeterminate
-                ></v-progress-circular>
-              </div>
-            </template>
-          </v-img>
+          <div class="item-texture-cell">
+            <v-img
+              cover
+              aspect-ratio="1"
+              width="28"
+              height="28"
+              color="grey-lighten-2"
+              rounded="sm"
+              :src="`${config.public.solarNetworkApi}/cgi/uc/attachments/${item.attachment.rid}`"
+            >
+              <template #placeholder>
+                <div class="d-flex align-center justify-center fill-height">
+                  <v-progress-circular
+                    size="x-small"
+                    width="3"
+                    color="grey-lighten-4"
+                    indeterminate
+                  ></v-progress-circular>
+                </div>
+              </template>
+            </v-img>
+
+            <v-code class="px-2 w-fit font-mono">
+              {{ item.attachment.rid }}
+            </v-code>
+          </div>
         </td>
         <td>{{ item.name }}</td>
         <td>{{ props.packPrefix + item.alias }}</td>
@@ -49,7 +55,47 @@
             size="x-small"
             color="warning"
             icon="mdi-pencil"
+            class="ms-[-8px]"
+            :to="`/creator/stickers/${item.pack_id}/${item.id}/edit`"
           />
+
+          <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 #${item.id}?`">
+                <v-card-text>
+                  This action will delete this sticker, all content used it will no longer show your sticker.
+                  But the attachment will still exists.
+                </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="() => { deleteSticker(item); isActive.value = false }"
+                  />
+                </v-card-actions>
+              </v-card>
+            </template>
+          </v-dialog>
         </td>
       </tr>
     </template>
@@ -107,4 +153,30 @@ async function readStickers({ page, itemsPerPage }: { page?: number; itemsPerPag
 }
 
 onMounted(() => readStickers({}))
+
+const submitting = ref(false)
+
+async function deleteSticker(item: any) {
+  submitting.value = true
+
+  const res = await solarFetch(`/cgi/uc/stickers/${item.id}`, {
+    method: "DELETE",
+  })
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    await readStickers({})
+  }
+
+  submitting.value = false
+}
 </script>
+
+<style scoped>
+.item-texture-cell {
+  display: grid;
+  grid-template-columns: 28px auto;
+  gap: 6px;
+  width: fit-content;
+}
+</style>
diff --git a/pages/creator/stickers/[id]/[sticker]/edit.vue b/pages/creator/stickers/[id]/[sticker]/edit.vue
new file mode 100644
index 0000000..1c52811
--- /dev/null
+++ b/pages/creator/stickers/[id]/[sticker]/edit.vue
@@ -0,0 +1,178 @@
+<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: {{ 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">
+          <v-card title="Pack info" prepend-icon="mdi-sticker-emoji" density="compact">
+            <v-card-text class="mt-2">
+              <p class="text-lg"><b>{{ pack?.name ?? "Loading..." }}</b></p>
+              <p>{{ pack?.description ?? "Please stand by..." }}</p>
+            </v-card-text>
+          </v-card>
+        </v-col>
+        <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"
+            v-model="stickerName"
+          />
+        </v-col>
+        <v-col cols="12" md="6">
+          <v-text-field
+            label="Alias"
+            name="alias"
+            variant="outlined"
+            persistent-hint
+            hint="A placeholder of this sticker, will prepend pack's prefix"
+            v-model="stickerAlias"
+          >
+            <template #prepend-inner>
+              <p class="ms-1 me-[-5px] text-grey">{{ pack?.prefix }}</p>
+            </template>
+          </v-text-field>
+        </v-col>
+        <v-col cols="12">
+          <v-text-field
+            label="Attachment"
+            name="attachment_id"
+            variant="outlined"
+            persistent-hint
+            v-model="attachmentRid"
+          >
+            <template #details>
+              <p class="order-first v-messages">
+                The texture / image of this sticker, you can upload one from
+                <nuxt-link to="/gallery/new?pool=c3RpY2tlcg" target="_blank" class="underline">here</nuxt-link>
+              </p>
+            </template>
+
+            <template #prepend-inner>
+              <v-img
+                cover
+                aspect-ratio="1"
+                width="28"
+                height="28"
+                color="grey-lighten-2"
+                rounded="sm"
+                :src="attachmentRid.length > 0 ? `${config.public.solarNetworkApi}/cgi/uc/attachments/${attachmentRid}` : `example.com/not-found`"
+              >
+                <template #placeholder>
+                  <div class="d-flex align-center justify-center fill-height" v-if="attachmentRid.length > 0">
+                    <v-progress-circular
+                      size="x-small"
+                      width="3"
+                      color="grey-lighten-4"
+                      indeterminate
+                    ></v-progress-circular>
+                  </div>
+                  <div class="d-flex align-center justify-center fill-height" v-else>
+                    <v-icon icon="mdi-image-broken-variant" class="block" size="18" />
+                  </div>
+                </template>
+              </v-img>
+            </template>
+          </v-text-field>
+        </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",
+})
+
+
+const { t } = useI18n()
+const route = useRoute()
+const config = useRuntimeConfig()
+
+const data = ref<any>(null)
+const pack = ref<any>(null)
+
+const attachmentRid = ref<string>("")
+const stickerName = ref<string>("")
+const stickerAlias = ref<string>("")
+
+async function readPack() {
+  const res = await solarFetch(`/cgi/uc/stickers/packs/${route.params.id}`)
+  if (res.status != 200) {
+    error.value = await res.text()
+  } else {
+    pack.value = await res.json()
+  }
+}
+
+async function readSticker() {
+  const res = await solarFetch(`/cgi/uc/stickers/${route.params.sticker}`)
+  if (res.status != 200) {
+    error.value = await res.text()
+  } else {
+    data.value = await res.json()
+    stickerName.value = data.value?.name
+    stickerAlias.value = data.value?.alias
+    attachmentRid.value = data.value?.attachment.rid
+  }
+}
+
+onMounted(() => Promise.all([readPack(), readSticker()]))
+
+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>
diff --git a/pages/creator/stickers/edit/[id].vue b/pages/creator/stickers/[id]/edit.vue
similarity index 100%
rename from pages/creator/stickers/edit/[id].vue
rename to pages/creator/stickers/[id]/edit.vue
diff --git a/pages/creator/stickers/[id]/new.vue b/pages/creator/stickers/[id]/new.vue
new file mode 100644
index 0000000..6971fc8
--- /dev/null
+++ b/pages/creator/stickers/[id]/new.vue
@@ -0,0 +1,158 @@
+<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</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">
+          <v-card title="Pack info" prepend-icon="mdi-sticker-emoji" density="compact">
+            <v-card-text class="mt-2">
+              <p class="text-lg"><b>{{ data?.name ?? "Loading..." }}</b></p>
+              <p>{{ data?.description ?? "Please stand by..." }}</p>
+            </v-card-text>
+          </v-card>
+        </v-col>
+        <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"
+          />
+        </v-col>
+        <v-col cols="12" md="6">
+          <v-text-field
+            label="Alias"
+            name="alias"
+            variant="outlined"
+            persistent-hint
+            hint="A placeholder of this sticker, will prepend pack's prefix"
+          />
+        </v-col>
+        <v-col cols="12">
+          <v-text-field
+            label="Attachment"
+            name="attachment_id"
+            variant="outlined"
+            persistent-hint
+            v-model="attachmentRid"
+          >
+            <template #details>
+              <p class="order-first v-messages">
+                The texture / image of this sticker, you can upload one from
+                <nuxt-link to="/gallery/new?pool=c3RpY2tlcg" target="_blank" class="underline">here</nuxt-link>
+              </p>
+            </template>
+
+            <template #prepend-inner>
+              <v-img
+                cover
+                aspect-ratio="1"
+                width="28"
+                height="28"
+                color="grey-lighten-2"
+                rounded="sm"
+                :src="attachmentRid.length > 0 ? `${config.public.solarNetworkApi}/cgi/uc/attachments/${attachmentRid}` : `example.com/not-found`"
+              >
+                <template #placeholder>
+                  <div class="d-flex align-center justify-center fill-height" v-if="attachmentRid.length > 0">
+                    <v-progress-circular
+                      size="x-small"
+                      width="3"
+                      color="grey-lighten-4"
+                      indeterminate
+                    ></v-progress-circular>
+                  </div>
+                  <div class="d-flex align-center justify-center fill-height" v-else>
+                    <v-icon icon="mdi-image-broken-variant" class="block" size="18"/>
+                  </div>
+                </template>
+              </v-img>
+            </template>
+          </v-text-field>
+        </v-col>
+      </v-row>
+
+      <div class="flex justify-end">
+        <v-btn type="submit" text="Create" append-icon="mdi-plus" :disabled="data == null" :loading="submitting" />
+      </div>
+    </v-form>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: "creator-hub",
+  middleware: ["auth"],
+})
+
+useHead({
+  title: "New Sticker",
+})
+
+const { t } = useI18n()
+const route = useRoute()
+const config = useRuntimeConfig()
+
+const attachmentRid = ref<string>("")
+
+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", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      pack_id: route.params.id,
+      ...data,
+    }),
+  })
+  if (res.status != 200) {
+    error.value = await res.text()
+  } else {
+    navigateTo("/creator/stickers")
+  }
+
+  submitting.value = false
+}
+</script>
diff --git a/pages/creator/stickers/index.vue b/pages/creator/stickers/index.vue
index 147ef5e..1df9dc9 100644
--- a/pages/creator/stickers/index.vue
+++ b/pages/creator/stickers/index.vue
@@ -51,12 +51,19 @@
               <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="info"
+                    icon="mdi-sticker-plus"
+                    :to="`/creator/stickers/${item.id}/new`"
+                  />
                   <v-btn
                     variant="text"
                     size="x-small"
                     color="warning"
                     icon="mdi-pencil"
-                    :to="`/creator/stickers/edit/${item.id}`"
+                    :to="`/creator/stickers/${item.id}/edit`"
                   />
 
                   <v-dialog max-width="480">
diff --git a/pages/dev/bots/index.vue b/pages/dev/bots/index.vue
index 9e7fc87..3b72bd8 100644
--- a/pages/dev/bots/index.vue
+++ b/pages/dev/bots/index.vue
@@ -45,6 +45,7 @@
                       size="x-small"
                       color="info"
                       icon="mdi-key"
+                      class="ms-[-8px]"
                     />
                   </template>
                 </dev-bot-token-dialog>
diff --git a/pages/gallery/new.vue b/pages/gallery/new.vue
index 9f816e5..5d74cc4 100644
--- a/pages/gallery/new.vue
+++ b/pages/gallery/new.vue
@@ -10,7 +10,7 @@
 
           <v-select
             label="Storage pool"
-            variant="underlined"
+            variant="solo"
             :items="poolOptions"
             item-title="label"
             item-value="value"
@@ -80,10 +80,21 @@ useHead({
 })
 
 const { t } = useI18n()
+const route = useRoute()
+
+onMounted(() => {
+  if (route.query.pool) {
+    pool.value = atob(decodeURIComponent(route.query.pool.toString()))
+    if (pool.value == "dedicated") {
+      pool.value = poolOptions[0].value
+    }
+  }
+})
 
 const poolOptions = [
   { label: "Interactive", description: "Public indexable, no lifecycle.", value: "interactive" },
   { label: "Messaging", description: "Has lifecycle, will delete after 14 days.", value: "messaging" },
+  { label: "Sticker", description: "Public indexable, privilege required.", value: "sticker", disabled: true },
   { label: "Dedicated Pool", description: "Your own configuration, coming soon.", value: "dedicated", disabled: true },
 ]