build: switch from yarn to npm to manage js dependencies and move js contents to root
yarn v1 is being deprecated and starts to have some issues Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
50
src/components/Discussion/DiscussionComment.story.vue
Normal file
50
src/components/Discussion/DiscussionComment.story.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<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,
|
||||
actor: null,
|
||||
deletedAt: new Date().toString(),
|
||||
});
|
||||
</script>
|
||||
347
src/components/Discussion/DiscussionComment.vue
Normal file
347
src/components/Discussion/DiscussionComment.vue
Normal file
@@ -0,0 +1,347 @@
|
||||
<template>
|
||||
<article
|
||||
class="flex gap-2 bg-white dark:bg-transparent border rounded-md p-2 mt-2"
|
||||
>
|
||||
<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>
|
||||
<AccountCircle :size="48" v-else />
|
||||
</div>
|
||||
<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 v-if="comment.actor.name">{{ comment.actor.name }}</strong>
|
||||
<small>@{{ usernameWithDomain(comment.actor) }}</small>
|
||||
</div>
|
||||
<span v-else class="name comment-link has-text-grey">
|
||||
{{ t("[deleted]") }}
|
||||
</span>
|
||||
<span
|
||||
class="icons"
|
||||
v-if="
|
||||
comment.actor &&
|
||||
!comment.deletedAt &&
|
||||
(comment.actor.id === currentActor.id || canReport)
|
||||
"
|
||||
>
|
||||
<o-dropdown aria-role="list" position="bottom-left">
|
||||
<template #trigger>
|
||||
<DotsHorizontal class="cursor-pointer" />
|
||||
</template>
|
||||
|
||||
<o-dropdown-item
|
||||
v-if="comment.actor?.id === currentActor?.id"
|
||||
@click="toggleEditMode"
|
||||
aria-role="menuitem"
|
||||
>
|
||||
<o-icon icon="pencil"></o-icon>
|
||||
{{ t("Edit") }}
|
||||
</o-dropdown-item>
|
||||
<o-dropdown-item
|
||||
v-if="comment.actor?.id === currentActor?.id"
|
||||
@click="emit('deleteComment', comment)"
|
||||
aria-role="menuitem"
|
||||
>
|
||||
<o-icon icon="delete"></o-icon>
|
||||
{{ t("Delete") }}
|
||||
</o-dropdown-item>
|
||||
<o-dropdown-item
|
||||
v-if="canReport"
|
||||
aria-role="listitem"
|
||||
@click="isReportModalActive = true"
|
||||
>
|
||||
<o-icon icon="flag" />
|
||||
{{ t("Report") }}
|
||||
</o-dropdown-item>
|
||||
</o-dropdown>
|
||||
</span>
|
||||
<div class="self-center">
|
||||
<span
|
||||
:title="formatDateTimeString(comment.updatedAt?.toString())"
|
||||
v-if="comment.updatedAt"
|
||||
>
|
||||
{{
|
||||
formatDistanceToNow(new Date(comment.updatedAt?.toString()), {
|
||||
locale: dateFnsLocale,
|
||||
}) || t("Right now")
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="!editMode && !comment.deletedAt"
|
||||
class="text-wrapper"
|
||||
dir="auto"
|
||||
>
|
||||
<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="formatDateTimeString(comment.updatedAt.toString())"
|
||||
>
|
||||
{{
|
||||
t("Edited {ago}", {
|
||||
ago: formatDistanceToNow(new Date(comment.updatedAt), {
|
||||
locale: dateFnsLocale,
|
||||
}),
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="comment-deleted" v-else-if="!editMode">
|
||||
{{ 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')"
|
||||
:current-actor="currentActor"
|
||||
:placeholder="t('Write a new message')"
|
||||
/>
|
||||
<div class="flex gap-2 mt-2">
|
||||
<o-button
|
||||
native-type="submit"
|
||||
:disabled="['<p></p>', '', comment.text].includes(updatedComment)"
|
||||
variant="primary"
|
||||
>{{ t("Update") }}</o-button
|
||||
>
|
||||
<o-button native-type="button" @click="toggleEditMode">{{
|
||||
t("Cancel")
|
||||
}}</o-button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</article>
|
||||
<o-modal
|
||||
v-model:active="isReportModalActive"
|
||||
has-modal-card
|
||||
ref="reportModal"
|
||||
:close-button-aria-label="t('Close')"
|
||||
:autoFocus="false"
|
||||
:trapFocus="false"
|
||||
>
|
||||
<ReportModal
|
||||
:on-confirm="reportComment"
|
||||
:title="t('Report this comment')"
|
||||
:outside-domain="comment.actor?.domain"
|
||||
/>
|
||||
</o-modal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { formatDistanceToNow } from "date-fns";
|
||||
import { IComment } from "../../types/comment.model";
|
||||
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 DotsHorizontal from "vue-material-design-icons/DotsHorizontal.vue";
|
||||
import type { Locale } from "date-fns";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useCreateReport } from "@/composition/apollo/report";
|
||||
import { Snackbar } from "@/plugins/snackbar";
|
||||
import { useProgrammatic } from "@oruga-ui/oruga-next";
|
||||
import ReportModal from "@/components/Report/ReportModal.vue";
|
||||
|
||||
const Editor = defineAsyncComponent(
|
||||
() => import("@/components/TextEditor.vue")
|
||||
);
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modelValue: IComment;
|
||||
currentActor: IPerson;
|
||||
canReport: boolean;
|
||||
}>(),
|
||||
{ canReport: false }
|
||||
);
|
||||
|
||||
const emit = defineEmits(["update:modelValue", "deleteComment"]);
|
||||
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
const comment = computed(() => props.modelValue);
|
||||
|
||||
const editMode = ref(false);
|
||||
|
||||
const updatedComment = ref("");
|
||||
|
||||
const dateFnsLocale = inject<Locale>("dateFnsLocale");
|
||||
|
||||
const isReportModalActive = ref(false);
|
||||
|
||||
const toggleEditMode = (): void => {
|
||||
updatedComment.value = comment.value.text;
|
||||
editMode.value = !editMode.value;
|
||||
};
|
||||
|
||||
const updateComment = (): void => {
|
||||
emit("update:modelValue", {
|
||||
...comment.value,
|
||||
text: updatedComment.value,
|
||||
});
|
||||
toggleEditMode();
|
||||
};
|
||||
|
||||
const {
|
||||
mutate: createReportMutation,
|
||||
onError: onCreateReportError,
|
||||
onDone: oneCreateReportDone,
|
||||
} = useCreateReport();
|
||||
|
||||
const reportComment = async (
|
||||
content: string,
|
||||
forward: boolean
|
||||
): Promise<void> => {
|
||||
if (!props.modelValue.actor) return;
|
||||
createReportMutation({
|
||||
reportedId: props.modelValue.actor?.id ?? "",
|
||||
commentsIds: [props.modelValue.id ?? ""],
|
||||
content,
|
||||
forward,
|
||||
});
|
||||
};
|
||||
|
||||
const snackbar = inject<Snackbar>("snackbar");
|
||||
const { oruga } = useProgrammatic();
|
||||
|
||||
onCreateReportError((e) => {
|
||||
isReportModalActive.value = false;
|
||||
if (e.message) {
|
||||
snackbar?.open({
|
||||
message: e.message,
|
||||
variant: "danger",
|
||||
position: "bottom",
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
oneCreateReportDone(() => {
|
||||
isReportModalActive.value = false;
|
||||
oruga.notification.open({
|
||||
message: t("Comment from {'@'}{username} reported", {
|
||||
username: props.modelValue.actor?.preferredUsername,
|
||||
}),
|
||||
variant: "success",
|
||||
position: "bottom-right",
|
||||
duration: 5000,
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@use "@/styles/_mixins" as *;
|
||||
article.comment {
|
||||
display: flex;
|
||||
border-top: 1px solid #e9e9e9;
|
||||
|
||||
div.body {
|
||||
flex: 2;
|
||||
margin-bottom: 2rem;
|
||||
padding-top: 1rem;
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 1rem 0.3em;
|
||||
|
||||
.name {
|
||||
// @include margin-right(auto);
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
line-height: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.icons {
|
||||
display: inline;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.text-wrapper,
|
||||
.comment-deleted {
|
||||
padding: 0 1rem;
|
||||
|
||||
& > p {
|
||||
font-size: 0.85rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
div.description-content {
|
||||
padding-bottom: 0.3rem;
|
||||
|
||||
:deep(h1) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
:deep(h2) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
:deep(h3) {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
:deep(ul) {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
:deep(li) {
|
||||
margin: 10px auto 10px 2rem;
|
||||
}
|
||||
|
||||
:deep(blockquote) {
|
||||
border-left: 0.2em solid #333;
|
||||
display: block;
|
||||
// @include padding-left(1em);
|
||||
}
|
||||
|
||||
:deep(p) {
|
||||
margin: 10px auto;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: 0.3rem;
|
||||
color: #111;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.avatar {
|
||||
padding-top: 1rem;
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
.edition {
|
||||
.button {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
33
src/components/Discussion/DiscussionListItem.story.vue
Normal file
33
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>
|
||||
93
src/components/Discussion/DiscussionListItem.vue
Normal file
93
src/components/Discussion/DiscussionListItem.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<router-link
|
||||
class="flex gap-1 w-full items-center p-2 border-b-stone-200 border-b bg-white dark:bg-transparent"
|
||||
dir="auto"
|
||||
:to="{
|
||||
name: RouteName.DISCUSSION,
|
||||
params: { slug: discussion.slug },
|
||||
}"
|
||||
>
|
||||
<div class="">
|
||||
<figure
|
||||
class=""
|
||||
v-if="
|
||||
discussion.lastComment?.actor && discussion.lastComment.actor.avatar
|
||||
"
|
||||
>
|
||||
<img
|
||||
class="rounded-xl"
|
||||
:src="discussion.lastComment.actor.avatar.url"
|
||||
alt=""
|
||||
width="32"
|
||||
height="32"
|
||||
/>
|
||||
</figure>
|
||||
<account-circle :size="32" v-else />
|
||||
</div>
|
||||
<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="line-clamp-2"
|
||||
dir="auto"
|
||||
v-if="!discussion.lastComment?.deletedAt"
|
||||
>
|
||||
{{ htmlTextEllipsis }}
|
||||
</div>
|
||||
<div v-else class="">
|
||||
{{ t("[This comment has been deleted]") }}
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { formatDistanceToNowStrict } from "date-fns";
|
||||
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";
|
||||
|
||||
const props = defineProps<{
|
||||
discussion: IDiscussion;
|
||||
}>();
|
||||
|
||||
const dateFnsLocale = inject<Locale>("dateFnsLocale");
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
const distanceToNow = computed(() => {
|
||||
return (
|
||||
formatDistanceToNowStrict(new Date(actualDate.value), {
|
||||
locale: dateFnsLocale,
|
||||
}) ?? t("Right now")
|
||||
);
|
||||
});
|
||||
|
||||
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;
|
||||
});
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user