✨ Sticker packs full update & delete
This commit is contained in:
parent
e5a5463b63
commit
7151d71463
@ -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 }>()
|
||||
|
||||
|
||||
118
pages/creator/stickers/edit/[id].vue
Normal file
118
pages/creator/stickers/edit/[id].vue
Normal file
@ -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>
|
||||
@ -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>
|
||||
|
||||
99
pages/creator/stickers/new.vue
Normal file
99
pages/creator/stickers/new.vue
Normal file
@ -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>
|
||||
@ -1,5 +1,8 @@
|
||||
User-agent: *
|
||||
Disallow: /embed
|
||||
Disallow: /dev
|
||||
Disallow: /creator
|
||||
Disallow: /users/me
|
||||
Allow: /
|
||||
|
||||
Sitemap: https://solsynth.dev/sitemap.xml
|
||||
|
||||
Loading…
Reference in New Issue
Block a user