HyperNet/Interactive
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ Moment editor C-V upload attachment

Browse Source
This commit is contained in:
LittleSheep 2024-03-20 22:32:50 +08:00
parent 298e1fe617
commit 30e55a5c6e
3 changed files with 63 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
pkg/server/attachments_api.go
View File

@ -1,14 +1,15 @@
package server
import (
"path/filepath"
"git.solsynth.dev/hydrogen/interactive/pkg/models"
"git.solsynth.dev/hydrogen/interactive/pkg/services"
"github.com/gofiber/fiber/v2"
"github.com/spf13/viper"
"path/filepath"
)
func openAttachment(c *fiber.Ctx) error {
func readAttachment(c *fiber.Ctx) error {
id := c.Params("fileId")
basepath := viper.GetString("content")

2
pkg/server/startup.go
View File

@ -66,7 +66,7 @@ func NewServer() {
api.Get("/attachments/o/:fileId", cache.New(cache.Config{
Expiration: 365 * 24 * time.Hour,
CacheControl: true,
}), openAttachment)
}), readAttachment)
api.Post("/attachments", authMiddleware, uploadAttachment)
api.Get("/feed", listFeed)

94
pkg/views/src/components/publish/MomentEditor.vue
View File

@ -13,6 +13,7 @@
label="What's happened?!"
counter="1024"
v-model="data.content"
@paste="pasteMedia"
/>
<div class="flex mt-[-18px]">
@ -31,6 +32,7 @@
<v-tooltip text="Media" location="start">
<template #activator="{ props }">
<v-btn
v-if="data.attachments.length <= 0"
v-bind="props"
type="button"
variant="text"
@ -38,6 +40,16 @@
size="small"
@click="dialogs.media = true"
/>
<v-badge v-else size="small" color="red" :content="data.attachments.length">
<v-btn
v-bind="props"
type="button"
variant="text"
icon="mdi-camera"
size="small"
@click="dialogs.media = true"
/>
</v-badge>
</template>
</v-tooltip>
<v-tooltip text="Publish area" location="start">
@ -65,7 +77,7 @@
</v-card>
<planned-publish v-model:show="dialogs.plan" v-model:value="data.published_at" />
<media v-model:show="dialogs.media" v-model:uploading="uploading" v-model:value="data.attachments" />
<media ref="media" v-model:show="dialogs.media" v-model:uploading="uploading" v-model:value="data.attachments" />
<publish-area v-model:show="dialogs.area" v-model:value="data.realm_id" />
<v-snackbar v-model="success" :timeout="3000">Your post has been published.</v-snackbar>
@ -79,70 +91,82 @@
</template>
<script setup lang="ts">
import { request } from "@/scripts/request";
import { useEditor } from "@/stores/editor";
import { getAtk } from "@/stores/userinfo";
import { reactive, ref, watch } from "vue";
import { useRouter } from "vue-router";
import PlannedPublish from "@/components/publish/parts/PlannedPublish.vue";
import Media from "@/components/publish/parts/Media.vue";
import PublishArea from "@/components/publish/parts/PublishArea.vue";
import { request } from "@/scripts/request"
import { useEditor } from "@/stores/editor"
import { getAtk } from "@/stores/userinfo"
import { reactive, ref, watch } from "vue"
import { useRouter } from "vue-router"
import PlannedPublish from "@/components/publish/parts/PlannedPublish.vue"
import Media from "@/components/publish/parts/Media.vue"
import PublishArea from "@/components/publish/parts/PublishArea.vue"
const editor = useEditor();
const editor = useEditor()
const dialogs = reactive({
plan: false,
media: false,
area: false
});
})
const data = ref<any>({
content: "",
realm_id: null,
published_at: null,
attachments: []
});
})
const error = ref<string | null>(null);
const success = ref(false);
const loading = ref(false);
const uploading = ref(false);
const error = ref<string | null>(null)
const success = ref(false)
const loading = ref(false)
const uploading = ref(false)
const router = useRouter();
const router = useRouter()
async function postMoment(evt: SubmitEvent) {
const form = evt.target as HTMLFormElement;
const payload = data.value;
if (!payload.content) return;
if (!payload.published_at) payload.published_at = new Date().toISOString();
if (!payload.realm_id) payload.realm_id = undefined;
const form = evt.target as HTMLFormElement
const payload = data.value
if (!payload.content) return
if (!payload.published_at) payload.published_at = new Date().toISOString()
if (!payload.realm_id) payload.realm_id = undefined
const url = editor.related.edit_to ? `/api/p/moments/${editor.related.edit_to?.id}` : "/api/p/moments";
const method = editor.related.edit_to ? "PUT" : "POST";
const url = editor.related.edit_to ? `/api/p/moments/${editor.related.edit_to?.id}` : "/api/p/moments"
const method = editor.related.edit_to ? "PUT" : "POST"
loading.value = true;
loading.value = true
const res = await request(url, {
method: method,
headers: { "Content-Type": "application/json", Authorization: `Bearer ${getAtk()}` },
body: JSON.stringify(payload)
});
})
if (res.status === 200) {
form.reset();
const data = await res.json();
success.value = true;
editor.show.moment = false;
router.push({ name: "posts.details.moments", params: { alias: data.alias } });
form.reset()
const data = await res.json()
success.value = true
editor.show.moment = false
router.push({ name: "posts.details.moments", params: { alias: data.alias } })
} else {
error.value = await res.text();
error.value = await res.text()
}
loading.value = false
}
const media = ref<any>(null)
function pasteMedia(evt: ClipboardEvent) {
const files = evt.clipboardData?.files
if (files) {
Array.from(files).forEach((item) => {
media.value.upload(item)
})
evt.preventDefault()
}
loading.value = false;
}
watch(editor.related, (val) => {
if (val.edit_to && val.edit_to.model_type === "moment") {
data.value = val.edit_to;
data.value = val.edit_to
}
});
})
</script>
<style>