studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

#88 - fix edit comment system

Browse source
This commit is contained in:
isUnknown 2025-01-07 16:05:10 +01:00
parent dd6eff2904
commit 12562ed8da
3 changed files with 10 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/comments/Comment.vue
View file

@ -21,13 +21,13 @@
</p> </p>
</header> </header>
<p v-if="!isEditCommentMode" class="comment__body"> <p v-if="!comment.isEditMode" class="comment__body">
{{ comment.text }} {{ comment.text }}
</p> </p>
<textarea v-else class="comment__body" v-model="draftText"></textarea> <textarea v-else class="comment__body" v-model="draftText"></textarea>
<footer v-if="!isEditCommentMode" class="comment__replies"> <footer v-if="!comment.isEditMode" class="comment__replies">
<p v-if="comment.replies?.length > 0"> <p v-if="comment.replies?.length > 0">
{{ comment.replies.length }} réponse{{ {{ comment.replies.length }} réponse{{
comment.replies.length > 1 ? "s" : "" comment.replies.length > 1 ? "s" : ""
@ -40,7 +40,7 @@
<button <button
class="btn btn--transparent btn--icon btn--sm" class="btn btn--transparent btn--icon btn--sm"
data-icon="edit" data-icon="edit"
@click="isEditCommentMode = true" @click="comment.isEditMode = true"
> >
<span class="sr-only">Éditer</span> <span class="sr-only">Éditer</span>
</button> </button>
@ -89,7 +89,7 @@ const emits = defineEmits(["update:file", "close:comment"]);
const userStore = useUserStore(); const userStore = useUserStore();
const api = useApiStore(); const api = useApiStore();
const dialog = useDialogStore(); const dialog = useDialogStore();
const { activeTracks, isEditCommentMode } = storeToRefs(useDialogStore()); const { activeTracks } = storeToRefs(useDialogStore());
const draftText = ref(comment.text); const draftText = ref(comment.text);
// Functions // Functions
@ -159,12 +159,12 @@ function saveEditedComment(event) {
comment.text = draftText.value; comment.text = draftText.value;
comment.date = dayjs().format(); comment.date = dayjs().format();
api.updateComment(comment); api.updateComment(comment);
isEditCommentMode.value = false; comment.isEditMode = false;
} }
function cancelEditComment(event) { function cancelEditComment(event) {
event.stopImmediatePropagation(); event.stopImmediatePropagation();
isEditCommentMode.value = false; comment.isEditMode = false;
draftText.value = comment.text; draftText.value = comment.text;
} }
</script> </script>

7
src/components/comments/Comments.vue
View file

@ -121,8 +121,9 @@ dayjs.locale("fr");
const { user } = useUserStore(); const { user } = useUserStore();
const { page } = usePageStore(); const { page } = usePageStore();
const dialog = useDialogStore(); const dialog = useDialogStore();
const { comments, openedFile, draftComment, activeTracks, isEditCommentMode } = const { comments, openedFile, draftComment, activeTracks } = storeToRefs(
storeToRefs(useDialogStore()); useDialogStore()
);
const api = useApiStore(); const api = useApiStore();
const openedComment = ref(null); const openedComment = ref(null);
@ -304,7 +305,7 @@ function prepareDraftCommentInImage(event) {
} }
function openComment(comment) { function openComment(comment) {
if (isEditCommentMode.value) return; if (comment.isEditMode) return;
openedComment.value = comment; openedComment.value = comment;

2
src/stores/dialog.js
View file

@ -6,7 +6,6 @@ export const useDialogStore = defineStore("dialog", () => {
const content = ref(null); const content = ref(null);
const openedFile = ref(null); const openedFile = ref(null);
const activeTracks = ref(null); const activeTracks = ref(null);
const isEditCommentMode = ref(false);
const comments = computed(() => { const comments = computed(() => {
if (activeTracks.value?.length > 0) { if (activeTracks.value?.length > 0) {
@ -144,6 +143,5 @@ export const useDialogStore = defineStore("dialog", () => {
isCommentsOpen, isCommentsOpen,
isCommentPanelEnabled, isCommentPanelEnabled,
updateFile, updateFile,
isEditCommentMode,
}; };
}); });