Migrate to Vue 3 and Vite
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
49
js/src/components/Discussion/DiscussionComment.story.vue
Normal file
49
js/src/components/Discussion/DiscussionComment.story.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<Story>
|
||||
<Variant title="Basic">
|
||||
<DiscussionComment v-model="comment" :currentActor="baseActor" />
|
||||
</Variant>
|
||||
<Variant title="Deleted comment">
|
||||
<DiscussionComment v-model="deletedComment" :currentActor="baseActor" />
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { IPerson } from "@/types/actor";
|
||||
import { IComment } from "@/types/comment.model";
|
||||
import { ActorType } from "@/types/enums";
|
||||
import { reactive } from "vue";
|
||||
import DiscussionComment from "./DiscussionComment.vue";
|
||||
|
||||
const baseActorAvatar = {
|
||||
id: "",
|
||||
name: "",
|
||||
alt: "",
|
||||
metadata: {},
|
||||
url: "https://social.tcit.fr/system/accounts/avatars/000/000/001/original/a28c50ce5f2b13fd.jpg",
|
||||
};
|
||||
|
||||
const baseActor: IPerson = {
|
||||
name: "Thomas Citharel",
|
||||
preferredUsername: "tcit",
|
||||
avatar: baseActorAvatar,
|
||||
domain: null,
|
||||
url: "",
|
||||
summary: "",
|
||||
suspended: false,
|
||||
type: ActorType.PERSON,
|
||||
id: "598",
|
||||
};
|
||||
|
||||
const comment = reactive<IComment>({
|
||||
text: "Hello there",
|
||||
publishedAt: new Date().toString(),
|
||||
actor: baseActor,
|
||||
});
|
||||
|
||||
const deletedComment = reactive<IComment>({
|
||||
...comment,
|
||||
deletedAt: new Date().toString(),
|
||||
});
|
||||
</script>
|
||||
@@ -1,23 +1,26 @@
|
||||
<template>
|
||||
<article class="comment">
|
||||
<div class="avatar">
|
||||
<figure
|
||||
class="image is-48x48"
|
||||
v-if="comment.actor && comment.actor.avatar"
|
||||
>
|
||||
<img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
|
||||
<article class="flex gap-1">
|
||||
<div class="">
|
||||
<figure class="" v-if="comment.actor && comment.actor.avatar">
|
||||
<img
|
||||
class="rounded-xl"
|
||||
:src="comment.actor.avatar.url"
|
||||
alt=""
|
||||
:width="48"
|
||||
:height="48"
|
||||
/>
|
||||
</figure>
|
||||
<b-icon v-else size="is-large" icon="account-circle" />
|
||||
<AccountCircle :size="48" v-else />
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="meta" dir="auto">
|
||||
<span
|
||||
class="first-line name"
|
||||
<div class="mb-2 pt-1 flex-1">
|
||||
<div class="flex items-center gap-1" dir="auto">
|
||||
<div
|
||||
class="flex flex-1 flex-col"
|
||||
v-if="comment.actor && !comment.deletedAt"
|
||||
>
|
||||
<strong>{{ comment.actor.name }}</strong>
|
||||
<strong v-if="comment.actor.name">{{ comment.actor.name }}</strong>
|
||||
<small>@{{ usernameWithDomain(comment.actor) }}</small>
|
||||
</span>
|
||||
</div>
|
||||
<span v-else class="name comment-link has-text-grey">
|
||||
{{ $t("[deleted]") }}
|
||||
</span>
|
||||
@@ -26,39 +29,44 @@
|
||||
v-if="
|
||||
comment.actor &&
|
||||
!comment.deletedAt &&
|
||||
comment.actor.id === currentActor.id
|
||||
comment.actor.id === currentActor?.id
|
||||
"
|
||||
>
|
||||
<b-dropdown aria-role="list">
|
||||
<b-icon slot="trigger" role="button" icon="dots-horizontal" />
|
||||
<o-dropdown aria-role="list">
|
||||
<template #trigger>
|
||||
<o-icon role="button" icon="dots-horizontal" />
|
||||
</template>
|
||||
|
||||
<b-dropdown-item
|
||||
v-if="comment.actor.id === currentActor.id"
|
||||
<o-dropdown-item
|
||||
v-if="comment.actor?.id === currentActor?.id"
|
||||
@click="toggleEditMode"
|
||||
aria-role="menuitem"
|
||||
>
|
||||
<b-icon icon="pencil"></b-icon>
|
||||
<o-icon icon="pencil"></o-icon>
|
||||
{{ $t("Edit") }}
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item
|
||||
v-if="comment.actor.id === currentActor.id"
|
||||
@click="$emit('delete-comment', comment)"
|
||||
</o-dropdown-item>
|
||||
<o-dropdown-item
|
||||
v-if="comment.actor?.id === currentActor?.id"
|
||||
@click="emit('deleteComment', comment)"
|
||||
aria-role="menuitem"
|
||||
>
|
||||
<b-icon icon="delete"></b-icon>
|
||||
<o-icon icon="delete"></o-icon>
|
||||
{{ $t("Delete") }}
|
||||
</b-dropdown-item>
|
||||
<!-- <b-dropdown-item aria-role="listitem" @click="isReportModalActive = true">
|
||||
<b-icon icon="flag" />
|
||||
</o-dropdown-item>
|
||||
<!-- <o-dropdown-item aria-role="listitem" @click="isReportModalActive = true">
|
||||
<o-icon icon="flag" />
|
||||
{{ $t("Report") }}
|
||||
</b-dropdown-item> -->
|
||||
</b-dropdown>
|
||||
</o-dropdown-item> -->
|
||||
</o-dropdown>
|
||||
</span>
|
||||
<div class="post-infos">
|
||||
<span :title="comment.insertedAt | formatDateTimeString">
|
||||
<div class="self-center">
|
||||
<span
|
||||
:title="formatDateTimeString(comment.updatedAt?.toString())"
|
||||
v-if="comment.updatedAt"
|
||||
>
|
||||
{{
|
||||
formatDistanceToNow(new Date(comment.updatedAt), {
|
||||
locale: $dateFnsLocale,
|
||||
formatDistanceToNow(new Date(comment.updatedAt?.toString()), {
|
||||
locale: dateFnsLocale,
|
||||
}) || $t("Right now")
|
||||
}}</span
|
||||
>
|
||||
@@ -69,20 +77,24 @@
|
||||
class="text-wrapper"
|
||||
dir="auto"
|
||||
>
|
||||
<div class="description-content" v-html="comment.text"></div>
|
||||
<div
|
||||
class="prose md:prose-lg lg:prose-xl dark:prose-invert"
|
||||
v-html="comment.text"
|
||||
></div>
|
||||
<p
|
||||
class="text-sm"
|
||||
v-if="
|
||||
comment.insertedAt &&
|
||||
comment.updatedAt &&
|
||||
new Date(comment.insertedAt).getTime() !==
|
||||
new Date(comment.updatedAt).getTime()
|
||||
"
|
||||
:title="comment.updatedAt | formatDateTimeString"
|
||||
:title="formatDateTimeString(comment.updatedAt.toString())"
|
||||
>
|
||||
{{
|
||||
$t("Edited {ago}", {
|
||||
ago: formatDistanceToNow(new Date(comment.updatedAt), {
|
||||
locale: $dateFnsLocale,
|
||||
locale: dateFnsLocale,
|
||||
}),
|
||||
})
|
||||
}}
|
||||
@@ -92,66 +104,66 @@
|
||||
{{ $t("[This comment has been deleted by it's author]") }}
|
||||
</div>
|
||||
<form v-else class="edition" @submit.prevent="updateComment">
|
||||
<editor v-model="updatedComment" :aria-label="$t('Comment body')" />
|
||||
<div class="buttons">
|
||||
<b-button
|
||||
<Editor
|
||||
v-model="updatedComment"
|
||||
:aria-label="$t('Comment body')"
|
||||
:current-actor="currentActor"
|
||||
/>
|
||||
<div class="flex gap-2 mt-2">
|
||||
<o-button
|
||||
native-type="submit"
|
||||
:disabled="['<p></p>', '', comment.text].includes(updatedComment)"
|
||||
type="is-primary"
|
||||
>{{ $t("Update") }}</b-button
|
||||
variant="primary"
|
||||
>{{ $t("Update") }}</o-button
|
||||
>
|
||||
<b-button native-type="button" @click="toggleEditMode">{{
|
||||
<o-button native-type="button" @click="toggleEditMode">{{
|
||||
$t("Cancel")
|
||||
}}</b-button>
|
||||
}}</o-button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
<script lang="ts" setup>
|
||||
import { formatDistanceToNow } from "date-fns";
|
||||
import { IComment } from "../../types/comment.model";
|
||||
import { usernameWithDomain, IPerson } from "../../types/actor";
|
||||
import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
|
||||
import { IPerson, usernameWithDomain } from "../../types/actor";
|
||||
import { computed, defineAsyncComponent, inject, ref } from "vue";
|
||||
import { formatDateTimeString } from "@/filters/datetime";
|
||||
import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
|
||||
import type { Locale } from "date-fns";
|
||||
|
||||
@Component({
|
||||
apollo: {
|
||||
currentActor: CURRENT_ACTOR_CLIENT,
|
||||
},
|
||||
components: {
|
||||
editor: () =>
|
||||
import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
|
||||
},
|
||||
})
|
||||
export default class DiscussionComment extends Vue {
|
||||
@Prop({ required: true, type: Object }) comment!: IComment;
|
||||
const Editor = defineAsyncComponent(() => import("@/components/Editor.vue"));
|
||||
|
||||
editMode = false;
|
||||
const props = defineProps<{
|
||||
modelValue: IComment;
|
||||
currentActor: IPerson;
|
||||
}>();
|
||||
|
||||
updatedComment = "";
|
||||
const emit = defineEmits(["update:modelValue", "deleteComment"]);
|
||||
|
||||
currentActor!: IPerson;
|
||||
const comment = computed(() => props.modelValue);
|
||||
|
||||
usernameWithDomain = usernameWithDomain;
|
||||
const editMode = ref(false);
|
||||
|
||||
formatDistanceToNow = formatDistanceToNow;
|
||||
const updatedComment = ref("");
|
||||
|
||||
// isReportModalActive: boolean = false;
|
||||
const dateFnsLocale = inject<Locale>("dateFnsLocale");
|
||||
|
||||
toggleEditMode(): void {
|
||||
this.updatedComment = this.comment.text;
|
||||
this.editMode = !this.editMode;
|
||||
}
|
||||
// isReportModalActive: boolean = false;
|
||||
|
||||
updateComment(): void {
|
||||
this.$emit("update-comment", {
|
||||
...this.comment,
|
||||
text: this.updatedComment,
|
||||
});
|
||||
this.toggleEditMode();
|
||||
}
|
||||
}
|
||||
const toggleEditMode = (): void => {
|
||||
updatedComment.value = comment.value.text;
|
||||
editMode.value = !editMode.value;
|
||||
};
|
||||
|
||||
const updateComment = (): void => {
|
||||
emit("update:modelValue", {
|
||||
...comment.value,
|
||||
text: updatedComment.value,
|
||||
});
|
||||
toggleEditMode();
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@use "@/styles/_mixins" as *;
|
||||
@@ -170,7 +182,7 @@ article.comment {
|
||||
padding: 0 1rem 0.3em;
|
||||
|
||||
.name {
|
||||
@include margin-right(auto);
|
||||
// @include margin-right(auto);
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -200,33 +212,33 @@ article.comment {
|
||||
div.description-content {
|
||||
padding-bottom: 0.3rem;
|
||||
|
||||
::v-deep h1 {
|
||||
:deep(h1) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
::v-deep h2 {
|
||||
:deep(h2) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
::v-deep h3 {
|
||||
:deep(h3) {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
::v-deep ul {
|
||||
:deep(ul) {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
::v-deep li {
|
||||
:deep(li) {
|
||||
margin: 10px auto 10px 2rem;
|
||||
}
|
||||
|
||||
::v-deep blockquote {
|
||||
:deep(blockquote) {
|
||||
border-left: 0.2em solid #333;
|
||||
display: block;
|
||||
@include padding-left(1em);
|
||||
// @include padding-left(1em);
|
||||
}
|
||||
|
||||
::v-deep p {
|
||||
:deep(p) {
|
||||
margin: 10px auto;
|
||||
|
||||
a {
|
||||
|
||||
33
js/src/components/Discussion/DiscussionListItem.story.vue
Normal file
33
js/src/components/Discussion/DiscussionListItem.story.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<Story>
|
||||
<Variant title="Basic">
|
||||
<DiscussionListItem :discussion="discussion" />
|
||||
</Variant>
|
||||
<Variant title="Deleted comment">
|
||||
<DiscussionListItem :discussion="discussionWithDeletedComment" />
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { IDiscussion } from "@/types/discussions";
|
||||
import { reactive } from "vue";
|
||||
import DiscussionListItem from "./DiscussionListItem.vue";
|
||||
|
||||
const discussion = reactive<IDiscussion>({
|
||||
title: "A discussion",
|
||||
comments: { total: 5, elements: [] },
|
||||
insertedAt: new Date().toString(),
|
||||
updatedAt: new Date().toString(),
|
||||
deletedAt: null,
|
||||
lastComment: { text: "Hello there", publishedAt: new Date().toString() },
|
||||
});
|
||||
|
||||
const discussionWithDeletedComment = reactive<IDiscussion>({
|
||||
...discussion,
|
||||
lastComment: {
|
||||
...discussion.lastComment,
|
||||
deletedAt: new Date().toString(),
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -1,126 +1,93 @@
|
||||
<template>
|
||||
<router-link
|
||||
class="discussion-minimalist-card-wrapper"
|
||||
class="flex gap-1 w-full items-center p-2 border-b-stone-200 border-b"
|
||||
dir="auto"
|
||||
:to="{
|
||||
name: RouteName.DISCUSSION,
|
||||
params: { slug: discussion.slug, id: discussion.id },
|
||||
}"
|
||||
>
|
||||
<div class="media-left">
|
||||
<div class="">
|
||||
<figure
|
||||
class="image is-32x32"
|
||||
class=""
|
||||
v-if="
|
||||
discussion.lastComment.actor && discussion.lastComment.actor.avatar
|
||||
discussion.lastComment?.actor && discussion.lastComment.actor.avatar
|
||||
"
|
||||
>
|
||||
<img
|
||||
class="is-rounded"
|
||||
class="rounded-xl"
|
||||
:src="discussion.lastComment.actor.avatar.url"
|
||||
alt
|
||||
alt=""
|
||||
width="32"
|
||||
height="32"
|
||||
/>
|
||||
</figure>
|
||||
<b-icon v-else size="is-medium" icon="account-circle" />
|
||||
<account-circle :size="32" v-else />
|
||||
</div>
|
||||
<div class="title-info-wrapper">
|
||||
<div class="title-and-date">
|
||||
<p class="discussion-minimalist-title">{{ discussion.title }}</p>
|
||||
<span
|
||||
class="has-text-grey-dark"
|
||||
:title="actualDate | formatDateTimeString"
|
||||
>
|
||||
{{
|
||||
formatDistanceToNowStrict(new Date(actualDate), {
|
||||
locale: $dateFnsLocale,
|
||||
}) || $t("Right now")
|
||||
}}</span
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center">
|
||||
<p class="text-violet-3 dark:text-white text-lg font-semibold flex-1">
|
||||
{{ discussion.title }}
|
||||
</p>
|
||||
<span class="" :title="formatDateTimeString(actualDate)">
|
||||
{{ distanceToNow }}</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="ellipsis has-text-grey-dark"
|
||||
class="line-clamp-2"
|
||||
dir="auto"
|
||||
v-if="!discussion.lastComment.deletedAt"
|
||||
v-if="!discussion.lastComment?.deletedAt"
|
||||
>
|
||||
{{ htmlTextEllipsis }}
|
||||
</div>
|
||||
<div v-else class="has-text-grey-dark">
|
||||
{{ $t("[This comment has been deleted]") }}
|
||||
<div v-else class="">
|
||||
{{ t("[This comment has been deleted]") }}
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
<script lang="ts" setup>
|
||||
import { formatDistanceToNowStrict } from "date-fns";
|
||||
import { IDiscussion } from "../../types/discussions";
|
||||
import RouteName from "../../router/name";
|
||||
import { IDiscussion } from "@/types/discussions";
|
||||
import RouteName from "@/router/name";
|
||||
import { computed, inject } from "vue";
|
||||
import { formatDateTimeString } from "@/filters/datetime";
|
||||
import type { Locale } from "date-fns";
|
||||
import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
@Component
|
||||
export default class DiscussionListItem extends Vue {
|
||||
@Prop({ required: true, type: Object }) discussion!: IDiscussion;
|
||||
const props = defineProps<{
|
||||
discussion: IDiscussion;
|
||||
}>();
|
||||
|
||||
RouteName = RouteName;
|
||||
const dateFnsLocale = inject<Locale>("dateFnsLocale");
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
formatDistanceToNowStrict = formatDistanceToNowStrict;
|
||||
const distanceToNow = computed(() => {
|
||||
return (
|
||||
formatDistanceToNowStrict(new Date(actualDate.value), {
|
||||
locale: dateFnsLocale,
|
||||
}) ?? t("Right now")
|
||||
);
|
||||
});
|
||||
|
||||
get htmlTextEllipsis(): string {
|
||||
const element = document.createElement("div");
|
||||
if (this.discussion.lastComment && this.discussion.lastComment.text) {
|
||||
element.innerHTML = this.discussion.lastComment.text
|
||||
.replace(/<br\s*\/?>/gi, " ")
|
||||
.replace(/<p>/gi, " ");
|
||||
}
|
||||
return element.innerText;
|
||||
const htmlTextEllipsis = computed((): string => {
|
||||
const element = document.createElement("div");
|
||||
if (props.discussion.lastComment && props.discussion.lastComment.text) {
|
||||
element.innerHTML = props.discussion.lastComment.text
|
||||
.replace(/<br\s*\/?>/gi, " ")
|
||||
.replace(/<p>/gi, " ");
|
||||
}
|
||||
return element.innerText;
|
||||
});
|
||||
|
||||
get actualDate(): string | Date | undefined {
|
||||
if (
|
||||
this.discussion.updatedAt === this.discussion.insertedAt &&
|
||||
this.discussion.lastComment
|
||||
) {
|
||||
return this.discussion.lastComment.publishedAt;
|
||||
}
|
||||
return this.discussion.updatedAt;
|
||||
const actualDate = computed((): string => {
|
||||
if (
|
||||
props.discussion.updatedAt === props.discussion.insertedAt &&
|
||||
props.discussion.lastComment?.publishedAt
|
||||
) {
|
||||
return props.discussion.lastComment.publishedAt;
|
||||
}
|
||||
}
|
||||
return props.discussion.updatedAt;
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@use "@/styles/_mixins" as *;
|
||||
.discussion-minimalist-card-wrapper {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
color: initial;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
align-items: center;
|
||||
|
||||
.calendar-icon {
|
||||
@include margin-right(1rem);
|
||||
}
|
||||
|
||||
.title-info-wrapper {
|
||||
flex: 2;
|
||||
|
||||
.title-and-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.discussion-minimalist-title {
|
||||
color: #3c376e;
|
||||
font-family: Roboto, Helvetica, Arial, serif;
|
||||
font-size: 19px;
|
||||
font-weight: 600;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
div.ellipsis {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user