Capital/pages/creator/stickers/index.vue

<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">Stickers & packs</h1>
      </div>

      <div class="flex gap-2">
        <v-btn
          color="primary"
          text="New"
          append-icon="mdi-plus"
          variant="tonal"
          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
          v-for="item in data"
          :key="'sticker-pack#'+item.id"
        >
          <template #title>
            <div class="flex items-center gap-2">
              <p>{{ item.name }}</p>
              <v-chip size="x-small" class="font-mono" rounded color="primary">#{{ item.id }}</v-chip>
            </div>
          </template>

          <template #text>
            <v-row>
              <v-col cols="12">
                <p><b>Description</b></p>
                <p>{{ item.description }}</p>
              </v-col>
              <v-col cols="12" md="6" lg="4">
                <p><b>Pack Prefix</b></p>
                <v-code class="font-mono mt-0.5 px-3 w-fit">
                  <span v-if="item.prefix.length == 0"><i>no prefix</i></span>
                  <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="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/${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 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">
                  <creator-stickers-data-table :pack-id="item.id" :pack-prefix="item.prefix" />
                </v-card>
              </v-col>
            </v-row>
          </template>
        </v-expansion-panel>
      </v-expansion-panels>
    </div>
  </v-container>
</template>

<script setup lang="ts">
import { solarFetch } from "~/utils/request"

definePageMeta({
  layout: "creator-hub",
  middleware: ["auth"],
})

useHead({
  title: "Stickers",
})

const { t } = useI18n()

const loading = ref(false)
const error = ref<null | string>(null)

const data = ref<any[]>([])

async function readPacks() {
  loading.value = true

  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 res.json()
    data.value.push(...out["data"])
  }

  loading.value = false
}

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>