🚀 Realm alpha
This commit is contained in:
parent
d954cb87e6
commit
ea460c3623
@ -66,7 +66,7 @@
|
||||
<div>
|
||||
<p class="text-xs">Your content will visible for public at</p>
|
||||
<p class="text-lg font-medium">
|
||||
{{ data.publishedAt ? new Date(data.publishedAt).toLocaleString() : new Date().toLocaleString() }}
|
||||
{{ data.published_at ? new Date(data.published_at).toLocaleString() : new Date().toLocaleString() }}
|
||||
</p>
|
||||
</div>
|
||||
<v-btn size="small" icon="mdi-pencil" variant="text" @click="dialogs.plan = true" />
|
||||
@ -85,14 +85,27 @@
|
||||
</div>
|
||||
</template>
|
||||
</v-expansion-panel>
|
||||
|
||||
<v-expansion-panel title="Publish area">
|
||||
<template #text>
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<p class="text-xs">This article will publish in</p>
|
||||
<p class="text-lg font-medium">{{ currentRealm?.name ?? "No realm" }}</p>
|
||||
</div>
|
||||
<v-btn size="small" icon="mdi-account-group" variant="text" @click="dialogs.area = true" />
|
||||
</div>
|
||||
</template>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
</v-form>
|
||||
</v-card>
|
||||
|
||||
<planned-publish v-model:show="dialogs.plan" v-model:value="data.publishedAt" />
|
||||
<planned-publish v-model:show="dialogs.plan" v-model:value="data.published_at" />
|
||||
<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 article has been published.</v-snackbar>
|
||||
<v-snackbar v-model="uploading" :timeout="-1">
|
||||
@ -108,27 +121,38 @@
|
||||
import { request } from "@/scripts/request"
|
||||
import { useEditor } from "@/stores/editor"
|
||||
import { getAtk } from "@/stores/userinfo"
|
||||
import { reactive, ref, watch } from "vue"
|
||||
import { computed, 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 dialogs = reactive({
|
||||
plan: false,
|
||||
categories: false,
|
||||
media: false
|
||||
media: false,
|
||||
area: false,
|
||||
})
|
||||
|
||||
const data = ref<any>({
|
||||
title: "",
|
||||
content: "",
|
||||
description: "",
|
||||
realm_id: null,
|
||||
published_at: null,
|
||||
attachments: []
|
||||
})
|
||||
|
||||
const currentRealm = computed(() => {
|
||||
if(data.value.realm_id) {
|
||||
return editor.availableRealms.find((e) => e.id === data.value.realm_id)
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const error = ref<string | null>(null)
|
||||
@ -146,7 +170,8 @@ async function postArticle(evt: SubmitEvent) {
|
||||
console.log(payload)
|
||||
if (!payload.content) return
|
||||
if (!payload.title || !payload.description) return
|
||||
if (!payload.publishedAt) payload.publishedAt = new Date().toISOString()
|
||||
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/articles/${editor.related.edit_to?.id}` : "/api/p/articles"
|
||||
const method = editor.related.edit_to ? "PUT" : "POST"
|
||||
|
||||
@ -40,6 +40,18 @@
|
||||
/>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
<v-tooltip text="Publish area" location="start">
|
||||
<template #activator="{ props }">
|
||||
<v-btn
|
||||
v-bind="props"
|
||||
type="button"
|
||||
variant="text"
|
||||
icon="mdi-account-group"
|
||||
size="small"
|
||||
@click="dialogs.area = true"
|
||||
/>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
</v-card-text>
|
||||
|
||||
@ -54,6 +66,7 @@
|
||||
|
||||
<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" />
|
||||
<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>
|
||||
<v-snackbar v-model="uploading" :timeout="-1">
|
||||
@ -66,66 +79,70 @@
|
||||
</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 { 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
|
||||
})
|
||||
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()
|
||||
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
|
||||
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>
|
||||
|
||||
37
pkg/views/src/components/publish/parts/PublishArea.vue
Normal file
37
pkg/views/src/components/publish/parts/PublishArea.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<v-dialog
|
||||
eager
|
||||
class="max-w-[540px]"
|
||||
:model-value="props.show"
|
||||
@update:model-value="(val) => emits('update:show', val)"
|
||||
>
|
||||
<v-card title="Change your audiences">
|
||||
<template #text>
|
||||
<v-select
|
||||
clearable
|
||||
class="mt-2"
|
||||
label="Realm"
|
||||
hint="This field will only show realms you joined. Leave blank to publish this post in public area."
|
||||
variant="solo-filled"
|
||||
item-title="name"
|
||||
item-value="id"
|
||||
:items="editor.availableRealms"
|
||||
:model-value="props.value"
|
||||
@update:model-value="(val) => emits('update:value', val)"
|
||||
/>
|
||||
</template>
|
||||
<template #actions>
|
||||
<v-btn class="ms-auto" text="Ok" @click="emits('update:show', false)"></v-btn>
|
||||
</template>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useEditor } from "@/stores/editor";
|
||||
|
||||
const editor = useEditor();
|
||||
|
||||
const props = defineProps<{ show: boolean; value: string | null }>();
|
||||
const emits = defineEmits(["update:show", "update:value"]);
|
||||
</script>
|
||||
@ -1,11 +1,19 @@
|
||||
<template>
|
||||
<v-list density="comfortable">
|
||||
<v-list-subheader>Realms</v-list-subheader>
|
||||
<v-list-subheader>
|
||||
Realms
|
||||
<v-badge
|
||||
color="warning"
|
||||
content="Alpha"
|
||||
inline
|
||||
/>
|
||||
</v-list-subheader>
|
||||
|
||||
<v-list-item
|
||||
v-for="item in realms"
|
||||
exact
|
||||
prepend-icon="mdi-account-multiple"
|
||||
:to="{ name: 'realms.details', params: { id: item.id } }"
|
||||
:to="{ name: 'realms.details', params: { realmId: item.id } }"
|
||||
:title="item.name"
|
||||
/>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user