mirror of
https://github.com/FH-Complete/FHC-Core.git
synced 2026-10-12 06:54:04 +00:00
WIP: Work on news create/edit page
This commit is contained in:
Ivymaster
@@ -10,6 +10,7 @@ $includesArray = array(
|
||||
'primevue3' => true,
|
||||
'skipID' => '#fhccontent',
|
||||
'vuedatepicker11' => true,
|
||||
'tinymce5' => true,
|
||||
'customCSSs' => array(
|
||||
'public/css/components/verticalsplit.css',
|
||||
'public/css/components/searchbar/searchbar.css',
|
||||
|
||||
@@ -9,6 +9,7 @@ import MylvStudent from "../../components/Cis/Mylv/Student.js";
|
||||
import Profil from "../../components/Cis/Profil/Profil.js";
|
||||
import Raumsuche from "../../components/Cis/Raumsuche/Raumsuche.js";
|
||||
import CmsNews from "../../components/Cis/Cms/News.js";
|
||||
import NewsItemForm from "../../components/Cis/Cms/NewsItemForm.js";
|
||||
import CmsContent from "../../components/Cis/Cms/Content.js";
|
||||
import Info from "../../components/Cis/Mylv/Semester/Studiengang/Lv/Info.js";
|
||||
import RoomInformation, {DEFAULT_MODE_RAUMINFO_DESKTOP, DEFAULT_MODE_RAUMINFO_MOBILE} from "../../components/Cis/Mylv/RoomInformation.js";
|
||||
@@ -148,6 +149,12 @@ const router = VueRouter.createRouter({
|
||||
component: CmsNews,
|
||||
props: true
|
||||
},
|
||||
{
|
||||
path: `/CisVue/Cms/News/Create`,
|
||||
name: 'NewsItemCreate',
|
||||
component: NewsItemForm,
|
||||
props: true
|
||||
},
|
||||
{
|
||||
path: `/Cis/MyLv/:studiensemester?`,
|
||||
name: 'MyLv',
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
|
||||
import FormInput from "../../Form/Input.js";
|
||||
|
||||
export default {
|
||||
name: "NewsItemContentForm",
|
||||
components: {
|
||||
FormInput,
|
||||
},
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initTinyMCE() {
|
||||
const vm = this;
|
||||
tinymce.init({
|
||||
target: this.$refs.editor.$refs.input, //Important: not selector: to enable multiple import of component
|
||||
//height: 800,
|
||||
//plugins: ['lists'],
|
||||
//toolbar: " blocks | bold italic underline | alignleft aligncenter alignright alignjustify",
|
||||
toolbar: 'styleselect | bold italic underline | alignleft aligncenter alignright alignjustify',
|
||||
style_formats: [
|
||||
{title: 'Blocks', block: 'div'},
|
||||
{title: 'Paragraph', block: 'p'},
|
||||
{title: 'Heading 1', block: 'h1'},
|
||||
{title: 'Heading 2', block: 'h2'},
|
||||
{title: 'Heading 3', block: 'h3'},
|
||||
{title: 'Heading 4', block: 'h4'},
|
||||
{title: 'Heading 5', block: 'h5'},
|
||||
{title: 'Heading 6', block: 'h6'},
|
||||
],
|
||||
autoresize_bottom_margin: 16,
|
||||
|
||||
setup: (editor) => {
|
||||
vm.editor = editor;
|
||||
|
||||
editor.on('input', () => {
|
||||
const newContent = editor.getContent();
|
||||
vm.notizData.text = newContent;
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.initTinyMCE();
|
||||
},
|
||||
template: /*html*/ `
|
||||
<div :class="{'pb-3': isMobile}" class="overflow-x-hidden">
|
||||
<div class="d-flex flex-column flex-md-row align-items-md-end gap-3">
|
||||
<form-input
|
||||
type="text"
|
||||
:label="$p.t('wawi/nummer')"
|
||||
name="nummer"
|
||||
>
|
||||
</form-input>
|
||||
<form-input
|
||||
type="text"
|
||||
:label="$p.t('wawi/nummer')"
|
||||
name="nummer"
|
||||
>
|
||||
</form-input>
|
||||
<form-input
|
||||
type="checkbox"
|
||||
:label="$p.t('wawi/nummer')"
|
||||
name="nummer"
|
||||
>
|
||||
</form-input>
|
||||
</div>
|
||||
<form-input
|
||||
ref="editor"
|
||||
:label="$p.t('global','text') + ' *'"
|
||||
type="textarea"
|
||||
name="text"
|
||||
rows="5"
|
||||
cols="75"
|
||||
>
|
||||
>
|
||||
</form-input>
|
||||
|
||||
</div>
|
||||
`,
|
||||
};
|
||||
@@ -0,0 +1,116 @@
|
||||
import CoreForm from "../../Form/Form.js";
|
||||
import FormInput from "../../Form/Input.js";
|
||||
import FhcTabs from "../../Tabs.js";
|
||||
|
||||
const BASE_COMPONENT_URL =
|
||||
"https://c3p0.dev.technikum-wien.at/ma1433/core/FHC-Core/public/js/components/Cis/Cms/";
|
||||
|
||||
export default {
|
||||
name: "NewsItemForm",
|
||||
components: {
|
||||
CoreForm,
|
||||
FormInput,
|
||||
FhcTabs,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
contentFormItems: {
|
||||
germanContentForm: {
|
||||
title: "German Content Form",
|
||||
component: BASE_COMPONENT_URL + "NewsItemContentForm.js?123",
|
||||
config: {
|
||||
language: "de",
|
||||
type: "news",
|
||||
},
|
||||
key: "germanContentForm",
|
||||
},
|
||||
englishContentForm: {
|
||||
title: "English Content Form",
|
||||
component: BASE_COMPONENT_URL + "NewsItemContentForm.js?1233",
|
||||
config: {
|
||||
language: "en",
|
||||
type: "news",
|
||||
},
|
||||
key: "englishContentForm",
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
"$p.user_language.value": function (sprache) {
|
||||
this.fetchNews();
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
sprache: function () {
|
||||
return this.$p.user_language.value;
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
created() {},
|
||||
template: /*html*/ `
|
||||
<div :class="{'pb-3': isMobile}" class="overflow-x-hidden">
|
||||
<h2 ref="newsPageHeading" class="fhc-primary-color">News Form</h2>
|
||||
<div>
|
||||
<core-form>
|
||||
<div class="d-flex flex-row flex-md-row align-items-md-end gap-3">
|
||||
<div class="d-flex flex-row flex-md-row align-items-md-end gap-3">
|
||||
<form-input
|
||||
:label="$p.t('ui', 'validityPeriod') + ' ' + $p.t('global', 'bis')"
|
||||
:teleport="true"
|
||||
:enable-time-picker="false"
|
||||
type="datePicker"
|
||||
name="validityPeriodTo"
|
||||
format="dd.MM.yyyy"
|
||||
auto-apply
|
||||
/>
|
||||
<form-input
|
||||
:label="$p.t('ui', 'validityPeriod') + ' ' + $p.t('global', 'bis')"
|
||||
:teleport="true"
|
||||
:enable-time-picker="false"
|
||||
type="datePicker"
|
||||
name="validityPeriodTo"
|
||||
format="dd.MM.yyyy"
|
||||
auto-apply
|
||||
/>
|
||||
</div>
|
||||
<div class="d-flex flex-row flex-md-row align-items-md-end gap-3">
|
||||
<form-input
|
||||
:label="$capitalize($p.t('lehre/studiensemester'))"
|
||||
:suggestions="filteredSemesters"
|
||||
:optionValue="(option) => option.value"
|
||||
:optionLabel="(option) => option.label"
|
||||
@complete="filterSemesters($event)"
|
||||
type="autocomplete"
|
||||
name="selectedSemester"
|
||||
dropdown
|
||||
forceSelection
|
||||
>
|
||||
</form-input>
|
||||
<form-input
|
||||
:label="$capitalize($p.t('lehre/studiensemester'))"
|
||||
:suggestions="filteredSemesters"
|
||||
:optionValue="(option) => option.value"
|
||||
:optionLabel="(option) => option.label"
|
||||
@complete="filterSemesters($event)"
|
||||
type="autocomplete"
|
||||
name="selectedSemester"
|
||||
dropdown
|
||||
forceSelection
|
||||
>
|
||||
</form-input>
|
||||
</div>
|
||||
</div>
|
||||
<fhc-tabs
|
||||
ref="tabs"
|
||||
:useprimevue="true"
|
||||
:config="contentFormItems"
|
||||
style="flex: 1 1 0%; height: 0%"
|
||||
class="mt-3"
|
||||
>
|
||||
</fhc-tabs>
|
||||
</core-form>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
};
|
||||
@@ -0,0 +1,36 @@
|
||||
|
||||
import CoreForm from "../../Form/Form.js";
|
||||
import FormInput from "../../Form/Input.js";
|
||||
import Tabs from "../../Tabs.js";
|
||||
|
||||
export default {
|
||||
name: "NewsItemForm",
|
||||
components: {
|
||||
CoreForm,
|
||||
FormInput,
|
||||
Tabs,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
"$p.user_language.value": function (sprache) {
|
||||
this.fetchNews();
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
sprache: function () {
|
||||
return this.$p.user_language.value;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
created() {
|
||||
},
|
||||
template: /*html*/ `
|
||||
<div :class="{'pb-3': isMobile}" class="overflow-x-hidden">
|
||||
test
|
||||
</div>
|
||||
`,
|
||||
};
|
||||
Reference in New Issue
Block a user