@@ -217,157 +71,14 @@
-
-
-
-
-
-
-
-
{{ charcount.sinhalaChar }} characters
-
+
+
-
+
@@ -383,164 +94,19 @@
-
-
-
-
-
-
-
{{ charcount.tamilChar }} characters
-
-
-
Tamil Alerts must have at most 2500 characters
-
+
+
-
diff --git a/portal/src/components/views/news/NewsEditor.vue b/portal/src/components/views/news/NewsEditor.vue
new file mode 100644
index 0000000..6f2a4fc
--- /dev/null
+++ b/portal/src/components/views/news/NewsEditor.vue
@@ -0,0 +1,134 @@
+
+
+
+
+
+
+
+
+
+
+
+
{{ requiredErrorMessage }}
+
{{ maxLengthErrorMessage }}
+
{{ message.length }} html characters
+
+
+
+
+
\ No newline at end of file
diff --git a/portal/src/components/views/news/news.js b/portal/src/components/views/news/news.js
index 0dd38ec..6520911 100644
--- a/portal/src/components/views/news/news.js
+++ b/portal/src/components/views/news/news.js
@@ -1,130 +1,22 @@
import Vue from 'vue'
+import NewsEditor from './NewsEditor'
import { required, maxLength } from 'vuelidate/lib/validators';
-import { Editor, EditorContent ,EditorMenuBar } from 'tiptap';
-import {
- Blockquote,
- HardBreak,
- Heading,
- HorizontalRule,
- OrderedList,
- BulletList,
- ListItem,
- Bold,
- Italic,
- Link,
- Strike,
- Underline,
- History,
-} from 'tiptap-extensions'
import api from '../../../api'
export default {
name: 'News',
components: {
- EditorContent,
- EditorMenuBar,
+ NewsEditor
},
data() {
return {
- submitStatus: false,
- english: new Editor({
- extensions: [
- new Blockquote(),
- new BulletList(),
- new HardBreak(),
- new Heading({levels: [1, 2, 3]}),
- new HorizontalRule(),
- new ListItem(),
- new OrderedList(),
- new Link(),
- new Bold(),
- new Italic(),
- new Strike(),
- new Underline(),
- new History(),
- ],
- onUpdate: ({getHTML}) => {
- this.message.english = getHTML();
- this.englishChar();
- },
- }),
-
- sinhala: new Editor({
- extensions: [
- new Blockquote(),
- new BulletList(),
- new HardBreak(),
- new Heading({levels: [1, 2, 3]}),
- new HorizontalRule(),
- new ListItem(),
- new OrderedList(),
- new Link(),
- new Bold(),
- new Italic(),
- new Strike(),
- new Underline(),
- new History(),
- ],
- onUpdate: ({getHTML}) => {
- this.message.sinhala = getHTML();
- this.sinhalaChar();
- },
- }),
-
- tamil: new Editor({
- extensions: [
- new Blockquote(),
- new BulletList(),
- new HardBreak(),
- new Heading({levels: [1, 2, 3]}),
- new HorizontalRule(),
- new ListItem(),
- new OrderedList(),
- new Link(),
- new Bold(),
- new Italic(),
- new Strike(),
- new Underline(),
- new History(),
- ],
- onUpdate: ({getHTML}) => {
- this.message.tamil = getHTML();
- this.tamilChar();
- },
- }),
-
- buttons:{
- "bold":"Bold",
- "italic":"Italic",
- "strike":"Strike",
- "underline":"Underline",
- "paragraph":"Paragraph",
- "H1":"H1",
- "H2":"H2",
- "H3":"H3",
- "order_list":"Order List",
- "bullet_list":"Bullet List",
- "redo":"Redo",
- "undo":"UnDo",
- },
- "source":'',
-
- title:{
- "english":"",
- "sinhala":"",
- "tamil":"",
- },
-
- message:{
- "english":"",
- "sinhala":"",
- "tamil":"",
- },
- charcount:{
- "englishChar":0,
- "sinhalaChar":0,
- "tamilChar":0,
+ submitBtnDisable: false,
+ source: "",
+ title: {
+ english: "",
+ sinhala: "",
+ tamil: "",
},
}
},
@@ -145,38 +37,35 @@ export default {
maxLength: maxLength(100)
},
},
- message:{
- english:{
- required,
- maxLength: maxLength(2500)
- },
- sinhala:{
- maxLength: maxLength(2500)
- },
- tamil:{
- maxLength: maxLength(2500)
- },
- },
},
methods:{
saveAlerts(){
this.$v.$touch();
- if (this.$v.$invalid){
+ if (this.$v.$invalid
+ || this.$refs.englishEditor.isInvalid()
+ || this.$refs.sinhalaEditor.isInvalid()
+ || this.$refs.tamilEditor.isInvalid()) {
return
- }else{
- this.submitStatus = true;
+ } else {
+ this.submitBtnDisable = true;
+
+ let sinhalaMessageLength = this.$refs.sinhalaEditor.message.length;
+ let sinhalaMessage = sinhalaMessageLength>7? this.$refs.sinhalaEditor.message : ""; //avoid empty paragraph
+ let tamilMessageLength = this.$refs.tamilEditor.message.length;
+ let tamilMessage = tamilMessageLength>7? this.$refs.tamilEditor.message : ""; //avoid empty paragraph
+
api.postJsonWithToken('/notification/alert/add',{
- "source":this.source,
- title:{
- "english":this.title.english,
- "sinhala":this.title.sinhala,
- "tamil":this.title.tamil,
+ source: this.source,
+ title: {
+ english: this.title.english,
+ sinhala: this.title.sinhala,
+ tamil: this.title.tamil,
},
message:{
- "english":this.message.english,
- "sinhala":this.message.sinhala,
- "tamil":this.message.tamil,
+ english: this.$refs.englishEditor.message,
+ sinhala: sinhalaMessage,
+ tamil: tamilMessage,
}
}
).then(response=>{
@@ -185,86 +74,16 @@ export default {
title: 'New Alert Was Created',
icon: 'success'
});
- this.source ='';
- this.title.english='';
- this.title.sinhala='';
- this.title.tamil='';
- this.message.english='';
- this.message.sinhala='';
- this.message.tamil='';
- this.charcount.sinhalaChar =0;
- this.charcount.englishChar =0;
- this.charcount.tamilChar =0;
- this.submitStatus = false;
- this.$v.$reset();
- this.english.destroy();
- this.sinhala.destroy();
- this.tamil.destroy();
- this.english =new Editor({
- extensions: [
- new Blockquote(),
- new BulletList(),
- new HardBreak(),
- new Heading({levels: [1, 2, 3]}),
- new HorizontalRule(),
- new ListItem(),
- new OrderedList(),
- new Link(),
- new Bold(),
- new Italic(),
- new Strike(),
- new Underline(),
- new History(),
- ],
- onUpdate: ({getHTML}) => {
- this.message.english = getHTML();
- this.englishChar();
- },
- });
- this.sinhala =new Editor({
- extensions: [
- new Blockquote(),
- new BulletList(),
- new HardBreak(),
- new Heading({levels: [1, 2, 3]}),
- new HorizontalRule(),
- new ListItem(),
- new OrderedList(),
- new Link(),
- new Bold(),
- new Italic(),
- new Strike(),
- new Underline(),
- new History(),
- ],
- onUpdate: ({getHTML}) => {
- this.message.english = getHTML();
- this.englishChar();
- },
- });
- this.tamil =new Editor({
- extensions: [
- new Blockquote(),
- new BulletList(),
- new HardBreak(),
- new Heading({levels: [1, 2, 3]}),
- new HorizontalRule(),
- new ListItem(),
- new OrderedList(),
- new Link(),
- new Bold(),
- new Italic(),
- new Strike(),
- new Underline(),
- new History(),
- ],
- onUpdate: ({getHTML}) => {
- this.message.english = getHTML();
- this.englishChar();
- },
- });
-
+ this.source ='';
+ this.title.english='';
+ this.title.sinhala='';
+ this.title.tamil='';
+ this.$v.$reset();
+ this.$refs.englishEditor.clearContent();
+ this.$refs.sinhalaEditor.clearContent();
+ this.$refs.tamilEditor.clearContent();
}
+ this.submitBtnDisable = false;
}).catch(error =>{
Vue.swal({
title: 'Something Went Wrong!',
@@ -273,22 +92,9 @@ export default {
if (error.response) {
console.log(error.response.status);
}
- this.submitStatus =false;
- })
+ this.submitBtnDisable =false;
+ });
}
-
- },
- sinhalaChar()
- {
- this.charcount.sinhalaChar = (this.message.sinhala.length)-7;
},
- englishChar()
- {
- this.charcount.englishChar = (this.message.english.length)-7;
- },
- tamilChar()
- {
- this.charcount.tamilChar = (this.message.tamil.length)-7;
- }
}
}
diff --git a/portal/src/components/views/news/newsEditor.js b/portal/src/components/views/news/newsEditor.js
new file mode 100644
index 0000000..378c263
--- /dev/null
+++ b/portal/src/components/views/news/newsEditor.js
@@ -0,0 +1,151 @@
+import Vue from 'vue';
+import { maxLength } from 'vuelidate/lib/validators';
+import { Editor, EditorContent, EditorMenuBar } from 'tiptap';
+import {
+ Blockquote,
+ HardBreak,
+ Heading,
+ HorizontalRule,
+ OrderedList,
+ BulletList,
+ ListItem,
+ Bold,
+ Italic,
+ Link,
+ Strike,
+ Underline,
+ History,
+ Image,
+} from 'tiptap-extensions'
+import api from '../../../api';
+
+export default {
+ name: 'NewsEditor',
+ components: {
+ EditorContent,
+ EditorMenuBar,
+ },
+ props: ['isEnglish','requiredErrorMessage', 'maxLengthErrorMessage'],
+ computed: {
+ isRequired: function () {
+ return this.isEnglish=="";
+ }
+ },
+ data() {
+ return {
+ imageBtnDisable: false,
+ message: "",
+ newsEditor: new Editor({
+ extensions: [
+ new Blockquote(),
+ new BulletList(),
+ new HardBreak(),
+ new Heading({ levels: [1, 2, 3] }),
+ new HorizontalRule(),
+ new ListItem(),
+ new OrderedList(),
+ new Link(),
+ new Bold(),
+ new Italic(),
+ new Strike(),
+ new Underline(),
+ new History(),
+ new Image(),
+ ],
+ onUpdate: ({ getHTML }) => {
+ this.message = getHTML();
+ this.$v.message.$touch();
+ },
+ }),
+ buttons: {
+ bold: "Bold",
+ italic: "Italic",
+ strike: "Strike",
+ underline: "Underline",
+ paragraph: "Paragraph",
+ H1: "H1",
+ H2: "H2",
+ H3: "H3",
+ order_list: "Numbered List",
+ bullet_list: "Bullet List",
+ redo: "Redo",
+ undo: "UnDo",
+ image: "Image",
+ },
+ }
+ },
+ validations: {
+ message: {
+ required: (function () {
+ if(this.isRequired) {
+ return this.message.length > 7; // atleast one letter -->
a
+ } else {
+ return true; // no validations here
+ }
+ }),
+ maxLength: maxLength(2500)
+ },
+ },
+ methods: {
+ clearContent() {
+ this.newsEditor.clearContent(true);
+ this.$v.$reset();
+ },
+ isInvalid() {
+ if (this.isRequired) {
+ this.$v.$touch(); //sets $dirty in vualidate even if the field is not touched by the user
+ }
+ return this.$v.$invalid;
+ },
+ showImagePrompt(commands) {
+ this.imageBtnDisable = true;
+ let inputElement = document.createElement("input");
+ inputElement.setAttribute("type", "file");
+ inputElement.addEventListener("change", (e) => {
+ if (e.target.files && e.target.files[0]) {
+ let anImage = e.target.files[0]; // file from input
+
+ let formData = new FormData();
+ formData.append("image", anImage, anImage.name);
+ api.postMultipartFDWithToken(
+ '/images',
+ formData
+ ).then(response => {
+ if (response.status == 202 && response.data.url.length > 0) {
+ const src = response.data.url;
+ commands.image({ src });
+ this.imageBtnDisable = false;
+ }
+ }).catch(error => {
+ if (error.response.status == 400) {
+ Vue.swal.mixin({
+ position: 'top-end',
+ showConfirmButton: false,
+ showCancelButton:true,
+ }).fire({
+ title: "Invalid image type, size or name",
+ text: "Image must be of type jpg. Image size must be smaller than 200KB. Image name can only contain letters, numbers, dashes, underscores and spaces",
+ icon: "error",
+ });
+ } else {
+ Vue.swal.mixin({
+ toast: true,
+ position: 'top-end',
+ showConfirmButton: false,
+ timer: 2000,
+ }).fire({
+ title: "Error uploading image",
+ icon: "error",
+ });
+ }
+ this.submitBtnDisable = false;
+ });
+ }
+ })
+ inputElement.click();
+ },
+ beforeDestroy() {
+ this.newsEditor.destroy();
+ },
+ }
+};
\ No newline at end of file
diff --git a/postman/COVID-19.postman_collection.json b/postman/COVID-19.postman_collection.json
index d4c88b4..3cdbf13 100644
--- a/postman/COVID-19.postman_collection.json
+++ b/postman/COVID-19.postman_collection.json
@@ -331,15 +331,15 @@
"value": "attachment.jpg"
},
"url": {
- "raw": "http://localhost:8000/images/add",
+ "raw": "http://localhost:8000/api/images",
"protocol": "http",
"host": [
"localhost"
],
"port": "8000",
"path": [
- "images",
- "add"
+ "api",
+ "images"
]
}
},
@@ -351,22 +351,22 @@
"method": "GET",
"header": [],
"url": {
- "raw": "http://localhost:8000/images/image/4",
+ "raw": "http://localhost:8000/api/images/image/4",
"protocol": "http",
"host": [
"localhost"
],
"port": "8000",
"path": [
+ "api",
"images",
"image",
- 4
+ "4"
]
},
- "description": "GET http://localhost:8000/images/image/
"
+ "description": "GET http://localhost:8000/api/images/image/"
},
"response": []
}
- ],
- "protocolProfileBehavior": {}
+ ]
}
\ No newline at end of file