Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

Turn component into a small vue app and add public private comment logic

Browse Source
This commit is contained in:
Julie Lenaerts 2025-02-06 12:46:19 +01:00
parent f0f2531fa3
commit cd40eb3932
11 changed files with 183 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/Bundle/ChillActivityBundle/Form/ActivityType.php
View File

@ -216,12 +216,12 @@ class ActivityType extends AbstractType
]);
}*/
if ($activityType->isVisible('privateComment')) {
/* if ($activityType->isVisible('privateComment')) {
$builder->add('privateComment', PrivateCommentType::class, [
'label' => '' === $activityType->getLabel('privateComment') ? 'private comment' : $activityType->getPrivateCommentLabel(),
'required' => false,
]);
}
}*/
if ($activityType->isVisible('persons')) {
$builder->add('persons', HiddenType::class);

2
src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue
View File

@ -9,7 +9,7 @@
import ConcernedGroups from "./components/ConcernedGroups.vue";
import SocialIssuesAcc from "./components/SocialIssuesAcc.vue";
import Location from "./components/Location.vue";
import CommentEditor from "ChillMainAssets/vuejs/_components/CommentEditor.vue"
import CommentEditor from "ChillMainAssets/vuejs/CommentEditor/component/CommentEditor.vue"
export default {
name: "App",

9
src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig
View File

@ -84,11 +84,11 @@
{# {{ form_row(form.comment) }}#}
{#{% endif %}#}
<div id="add-comment"></div>
<div id="comment-widget" data-comment-mode="{{ 'both' }}"></div>
{%- if form.privateComment is defined -%}
{{ form_row(form.privateComment) }}
{% endif %}
{#{%- if form.privateComment is defined -%}#}
{# {{ form_row(form.privateComment) }}#}
{#{% endif %}#}
{%- if form.attendee is defined -%}
{{ form_row(form.attendee) }}
@ -124,6 +124,7 @@
{% block js %}
{{ encore_entry_script_tags('mod_pickentity_type') }}
{{ encore_entry_script_tags('vue_comment_editor') }}
{% endblock %}
{% block css %}

2
src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss
View File

@ -33,6 +33,8 @@
@import './scss/hover.scss';
@import './scss/comment-editor.scss';
/*
* BASE LAYOUT POSITION
*/

14
src/Bundle/ChillMainBundle/Resources/public/chill/scss/comment-editor.scss Normal file
View File

@ -0,0 +1,14 @@
.comment-container {
margin-top: 1.5rem;
}
.editor-container {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
}
.editor-wrapper {
position: relative;
}

36
src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/App.vue Normal file
View File

@ -0,0 +1,36 @@
<template>
<div>
<div class="comment-container" v-if="shouldRenderPublic">
<label class="col-form-label" for="content">{{
$t("comment.label_public")
}}</label>
<comment-editor type="public"></comment-editor>
</div>
<div class="comment-container" v-if="shouldRenderPrivate">
<label class="col-form-label" for="content">{{
$t("comment.label_private")
}}</label>
<comment-editor type="private"></comment-editor>
</div>
</div>
</template>
<script>
import CommentEditor from "../CommentEditor/component/CommentEditor.vue";
export default {
name: "App",
components: { CommentEditor },
props: {
commentMode: String,
},
computed: {
shouldRenderPublic() {
return this.commentMode === "public" || this.commentMode === "both";
},
shouldRenderPrivate() {
return this.commentMode === "private" || this.commentMode === "both";
},
},
};
</script>

89
src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/component/CommentEditor.vue Normal file
View File

@ -0,0 +1,89 @@
<template>
<div class="editor-container">
<div v-if="!isSimple" class="editor-wrapper">
<ckeditor
name="content"
:editor="classicEditor"
:config="editorConfig"
v-model="content"
tag-name="textarea"
/>
</div>
<div v-else class="editor-wrapper">
<textarea
v-model="content"
name="content"
class="form-control"
></textarea>
</div>
<a @click="toggleSimpleEditor" class="toggle-button">{{ buttonText }}</a>
</div>
</template>
<script lang="ts">
import {Ckeditor} from "@ckeditor/ckeditor5-vue";
import classicEditorConfig from "ChillMainAssets/module/ckeditor5/editor_config"
import {ClassicEditor} from "ckeditor5";
import {onMounted, ref} from "vue"
export default {
name: "CommentEditor",
components: {
ckeditor: Ckeditor,
},
setup() {
const isSimple = ref(false);
const content = ref("");
const classicEditor = ClassicEditor;
const editorConfig = classicEditorConfig;
const buttonText = "Simple editor"
const initializeEditorPreference = () => {
const storedValue = localStorage.getItem("isSimpleEditor");
if (storedValue !== null) {
isSimple.value = storedValue === "true";
} else {
localStorage.setItem("isSimpleEditor", "false");
}
};
const toggleSimpleEditor = () => {
isSimple.value = !isSimple.value;
localStorage.setItem("isSimpleEditor", String(isSimple.value));
};
onMounted(() => initializeEditorPreference())
return {
isSimple,
toggleSimpleEditor,
content: "",
classicEditor,
editorConfig,
buttonText
};
},
};
</script>
<style scoped lang="scss">
.toggle-button {
position: absolute;
bottom: -10px;
left: 10px;
background: white;
padding: 2px 6px;
font-size: 14px;
text-decoration: none;
border-radius: 4px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
cursor: pointer;
z-index: 10;
}
.editor-wrapper textarea {
resize: vertical;
min-height: 100px;
}
</style>

14
src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/i18n.js Normal file
View File

@ -0,0 +1,14 @@
import {personMessages} from "ChillPersonAssets/vuejs/_js/i18n";
import {calendarUserSelectorMessages} from "ChillCalendarAssets/vuejs/_components/CalendarUserSelector/js/i18n";
import {activityMessages} from "ChillActivityAssets/vuejs/Activity/i18n";
const appMessages = {
fr: {
comment:{
label_public: "Note",
label_private: "Note privée",
}
},
};
export { appMessages };

16
src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/index.js Normal file
View File

@ -0,0 +1,16 @@
import { createApp } from "vue";
import App from "./App.vue";
import {_createI18n} from "ChillMainAssets/vuejs/_js/i18n";
import {appMessages} from "ChillMainAssets/vuejs/CommentEditor/i18n";
const i18n = _createI18n(appMessages);
const commentContainer = document.getElementById('comment-widget');
const commentMode = commentContainer.dataset.commentMode;
const app = createApp({
template: `<app></app>`,
}, { commentMode })
.use(i18n)
.component("app", App)
.mount("#comment-widget");

91
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor.vue
View File

@ -1,91 +0,0 @@
<template>
<teleport to="#add-comment">
<div>
<label class="col-form-label" for="content">{{
$t("comment.label")
}}</label>
<div class="text-md-end">
<span class="d-block d-sm-inline-block mb-md-2">
<a @click="toggleSimpleEditor" class="flag-toggle">
<span :class="{ on: isSimple }">{{ $t("comment.editor_simple") }}</span>
<i
class="fa"
:class="{
'fa-toggle-on': !isSimple,
'fa-toggle-on fa-flip-horizontal': isSimple,
}"
/>
<span :class="{ on: !isSimple }">{{ $t("comment.editor_rich") }}</span>
</a>
</span>
</div>
<div v-if="!isSimple">
<ckeditor
name="content"
:editor="classicEditor"
:config="editorConfig"
v-model="content"
tag-name="textarea"
/>
</div>
<div v-else>
<textarea
v-model="content"
name="content"
class="form-control"
></textarea>
</div>
</div>
</teleport>
</template>
<script lang="ts">
import {Ckeditor} from "@ckeditor/ckeditor5-vue";
import classicEditorConfig from "ChillMainAssets/module/ckeditor5/editor_config"
import {ClassicEditor} from "ckeditor5";
import {onMounted, ref} from "vue"
export default {
name: "CommentEditor",
components: {
ckeditor: Ckeditor,
},
setup() {
const isSimple = ref(false);
const content = ref("");
const classicEditor = ClassicEditor;
const editorConfig = classicEditorConfig;
const initializeEditorPreference = () => {
const storedValue = localStorage.getItem("isSimpleEditor");
if (storedValue !== null) {
isSimple.value = storedValue === "true"; // Convert string to boolean
} else {
localStorage.setItem("isSimpleEditor", "false"); // Set default value
}
};
const toggleSimpleEditor = () => {
isSimple.value = !isSimple.value;
localStorage.setItem("isSimpleEditor", String(isSimple.value)); // Update localStorage
};
onMounted(() => initializeEditorPreference())
return {
isSimple,
toggleSimpleEditor,
content: "",
classicEditor,
editorConfig,
};
},
};
</script>
<style scoped lang="scss">
</style>

4
src/Bundle/ChillMainBundle/chill.webpack.config.js
View File

@ -120,4 +120,8 @@ module.exports = function (encore, entries) {
"vue_onthefly",
__dirname + "/Resources/public/vuejs/OnTheFly/index.js",
);
encore.addEntry(
"vue_comment_editor",
__dirname + "/Resources/public/vuejs/CommentEditor/index.js",
);
};