client/src/views/News.vue

   1 <template lang="pug">
   2 main
   3   input#modalNews.modal(type="checkbox")
   4   div#newnewsDiv(role="dialog" data-checkbox="modalNews")
   5     .card
   6       label.modal-close(for="modalNews")
   7       textarea#newsContent(
   8         v-model="curnews.content"
   9         :placeholder="st.tr['News go here']"
  10         @input="adjustHeight"
  11       )
  12       button(@click="sendNews()") {{ st.tr["Send"] }}
  13       #dialog.text-center {{ st.tr[infoMsg] }}
  14   .row
  15     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
  16       button(
  17         v-if="devs.includes(st.user.id)"
  18         @click="showModalNews"
  19       )
  20         | {{ st.tr["Write news"] }}
  21       .news(v-for="n in sortedNewsList")
  22         h4 {{ formatDatetime(n.added) }}
  23         p(v-html="parseHtml(n.content)")
  24         div(v-if="devs.includes(st.user.id)")
  25           button(@click="editNews(n)") {{ st.tr["Edit"] }}
  26           button(@click="deleteNews(n)") {{ st.tr["Delete"] }}
  27       button(v-if="hasMore" @click="loadMore()")
  28         | {{ st.tr["Load more"] }}
  29 </template>
  30
  31 <script>
  32 import { store } from "@/store";
  33 import { ajax } from "@/utils/ajax";
  34 import { getDate, getTime } from "@/utils/datetime";
  35 import { processModalClick } from "@/utils/modalClick";
  36 export default {
  37   name: "my-news",
  38   data: function() {
  39     return {
  40       devs: [1], //for now the only dev is me
  41       st: store.state,
  42       cursor: 0, //ID of last showed news
  43       hasMore: true, //a priori there could be more news to load
  44       curnews: {id:0, content:""},
  45       newsList: [],
  46       infoMsg: "",
  47     };
  48   },
  49   created: function() {
  50     ajax("/news", "GET", {cursor:this.cursor}, (res) => {
  51       this.newsList = res.newsList;
  52       const L = res.newsList.length;
  53       if (L > 0)
  54         this.cursor = res.newsList[L-1].id;
  55     });
  56   },
  57   mounted: function() {
  58     document.getElementById("newnewsDiv").addEventListener("click", processModalClick);
  59   },
  60   computed: {
  61     sortedNewsList: function() {
  62       return this.newsList.sort( (n1,n2) => n1.added - n2.added );
  63     },
  64   },
  65   methods: {
  66     formatDatetime: function(dt) {
  67       const dtObj = new Date(dt);
  68       return getDate(dtObj) + " " + getTime(dtObj);
  69     },
  70     parseHtml: function(txt) {
  71       return !txt.match(/<[/a-zA-Z]+>/)
  72         ? txt.replace(/\n/g, "<br/>") //no HTML tag
  73         : txt;
  74     },
  75     adjustHeight: function() {
  76       const newsContent = document.getElementById("newsContent");
  77       // https://stackoverflow.com/questions/995168/textarea-to-resize-based-on-content-length
  78       newsContent.style.height = "1px";
  79       newsContent.style.height = (10+newsContent.scrollHeight)+"px";
  80     },
  81     resetCurnews: function() {
  82       this.curnews.id = 0;
  83       this.curnews.content = "";
  84       // No need for added and uid fields: never updated
  85     },
  86     showModalNews: function() {
  87       this.resetCurnews();
  88       doClick('modalNews');
  89     },
  90     sendNews: function() {
  91       const edit = this.curnews.id > 0;
  92       this.infoMsg = "Processing... Please wait";
  93       ajax(
  94         "/news",
  95         edit ? "PUT" : "POST",
  96         {news: this.curnews},
  97         (res) => {
  98           if (edit)
  99           {
 100             let n = this.newsList.find(n => n.id == this.curnews.id);
 101             if (!!n)
 102               n.content = this.curnews.content;
 103           }
 104           else
 105           {
 106             const newNews = {
 107               content:this.curnews.content,
 108               added:Date.now(),
 109               uid: this.st.user.id,
 110               id: res.id
 111             };
 112             this.newsList = this.newsList.concat([newNews]);
 113           }
 114           document.getElementById("modalNews").checked = false;
 115           this.infoMsg = "";
 116           this.resetCurnews();
 117         }
 118       );
 119     },
 120     editNews: function(n) {
 121       this.curnews.content = n.content;
 122       this.curnews.id = n.id;
 123       // No need for added and uid fields: never updated
 124       doClick('modalNews');
 125     },
 126     deleteNews: function(n) {
 127       if (confirm(this.st.tr["Are you sure?"]))
 128       {
 129         this.infoMsg = "Processing... Please wait";
 130         ajax("/news", "DELETE", {id:n.id}, () => {
 131           const nIdx = this.newsList.findIndex(nw => nw.id == n.id);
 132           this.newsList.splice(nIdx, 1);
 133           this.infoMsg = "";
 134           document.getElementById("modalNews").checked = false;
 135         });
 136       }
 137     },
 138     loadMore: function() {
 139       ajax("/news", "GET", {cursor:this.cursor}, (res) => {
 140         if (res.newsList.length > 0)
 141         {
 142           this.newsList = this.newsList.concat(res.newsList);
 143           const L = res.newsList.length;
 144           if (L > 0)
 145             this.cursor = res.newsList[L-1].id;
 146         }
 147         else
 148           this.hasMore = false;
 149       });
 150     },
 151   },
 152 };
 153 </script>
 154
 155 <style lang="sass" scoped>
 156 [type="checkbox"].modal+div .card
 157   max-width: 767px
 158   max-height: 100%
 159 textarea#newsContent
 160   width: 100%
 161   min-height: 200px
 162   max-height: 100%
 163 #dialog
 164   padding: 5px
 165   color: blue
 166 </style>