From 8ac91bfcdc9d7052854c28a3f8026b2e6461c194 Mon Sep 17 00:00:00 2001
From: Amber Dev <amber.dev@viithiisys.com>
Date: Wed, 15 Jul 2020 17:33:48 +0530
Subject: [PATCH] added changes to reply functionality placed in reverse order

---
 src/pages/Annoucement/annoucementForum.vue    | 157 +++++++++++++-----------
 src/pages/Course/discussion.vue               | 149 +++++++++++-----------
 src/pages/Dashboard/Announcement.vue          | 170 +++++++++++++-------------
 src/pages/Dashboard/CourseDiscussionForum.vue |   6 +-
 4 files changed, 255 insertions(+), 227 deletions(-)

diff --git a/src/pages/Annoucement/annoucementForum.vue b/src/pages/Annoucement/annoucementForum.vue
index 5ed0ac9..ed31601 100644
--- a/src/pages/Annoucement/annoucementForum.vue
+++ b/src/pages/Annoucement/annoucementForum.vue
@@ -3,6 +3,7 @@
     <!-- ******ANNOUCEMNET DISCUSSION COMMENT ****** -->
     <v-layout>
       <v-flex xs12 v-for="(annoucementData,i) in annoucementData" :key="i">
+        <!-- TOPIC HEADING -->
         <v-card class="elevation-0 grey lighten-3 pa-2" flat>
           <v-list two-line subheader>
             <v-list-tile>
@@ -16,8 +17,14 @@
                 <v-list-tile-title>{{ annoucementData.discussionType }}</v-list-tile-title>
                 <v-list-tile-sub-title>
                   By
-                  <span class="info--text" v-if="annoucementData.studentId">{{ annoucementData.studentId.name }}</span>
-                  <span class="info--text" v-if="annoucementData.teacherId">{{ annoucementData.teacherId.name }}</span>
+                  <span
+                    class="info--text"
+                    v-if="annoucementData.studentId"
+                  >{{ annoucementData.studentId.name }}</span>
+                  <span
+                    class="info--text"
+                    v-if="annoucementData.teacherId"
+                  >{{ annoucementData.teacherId.name }}</span>
                   - {{dates(annoucementData.created ) }}
                 </v-list-tile-sub-title>
               </v-list-tile-content>
@@ -29,6 +36,7 @@
             </v-list-tile>
           </v-list>
         </v-card>
+        <!-- REPLY BOX -->
         <v-flex xs12 class="mt-4" v-show="showReplyBox">
           <v-textarea
             name="input-7-1"
@@ -46,81 +54,84 @@
             @click="replyThreadDiscussion()"
           >Submit</v-btn>
         </v-flex>
-        <v-flex
-          xs12
-          class="mt-4 pl-5 mx-auto"
-          v-for="(replyThread,i) in annoucementData.discussionThread"
+
+        <!-- REPLY THREAD -->
+        <v-layout
+          :class="['mt-4','pl-5','mx-auto',replyThread.teacherId?'justify-start':'justify-end']"
+          v-for="(replyThread,i) in annoucementData.discussionThread.slice().reverse()"
           :key="i"
         >
-          <v-card class="elevation-0 grey lighten-3" flat>
-            <v-list two-line subheader class="grey lighten-3 pa-1">
-              <v-list-tile>
-                <v-list-tile-avatar>
-                  <v-avatar size="46">
-                    <img
-                      :src="annoucementData.attachementUrl"
-                      v-if="annoucementData.attachementUrl"
-                    />
-                    <img src="/static/icon/user.png" v-else-if="!annoucementData.attachementUrl" />
-                  </v-avatar>
-                </v-list-tile-avatar>
+          <v-flex xs12 md7>
+            <v-card class="elevation-0 grey lighten-1" flat>
+              <v-list two-line subheader class="grey lighten-1 pa-1">
+                <v-list-tile>
+                  <v-list-tile-avatar>
+                    <v-avatar size="46">
+                      <img
+                        :src="annoucementData.attachementUrl"
+                        v-if="annoucementData.attachementUrl"
+                      />
+                      <img src="/static/icon/user.png" v-else-if="!annoucementData.attachementUrl" />
+                    </v-avatar>
+                  </v-list-tile-avatar>
+                  <v-list-tile-content>
+                    <v-list-tile-title>Re: {{ annoucementData.discussionType }}</v-list-tile-title>
+                    <v-list-tile-sub-title>
+                      By
+                      <span
+                        class="info--text"
+                        v-if="replyThread.teacherId"
+                      >{{ replyThread.teacherId.name }}</span>
+                      <span
+                        class="info--text"
+                        v-if="replyThread.studentId"
+                      >{{ replyThread.studentId.name }}</span>
+                      - {{dates(replyThread.created ) }}
+                    </v-list-tile-sub-title>
+                  </v-list-tile-content>
+                </v-list-tile>
+              </v-list>
+              <v-list class="pa-2 reply-desc">
                 <v-list-tile-content>
-                  <v-list-tile-title>Re: {{ annoucementData.discussionType }}</v-list-tile-title>
-                  <v-list-tile-sub-title>
-                    By
-                    <span
-                      class="info--text"
-                      v-if="replyThread.teacherId"
-                    >{{ replyThread.teacherId.name }}</span>
-                    <span
-                      class="info--text"
-                      v-if="replyThread.studentId"
-                    >{{ replyThread.studentId.name }}</span>
-                    - {{dates(replyThread.created ) }}
-                  </v-list-tile-sub-title>
+                  <v-list-tile-title
+                    v-show="replyThread.showDescriptionReplyThread"
+                  >{{ replyThread.description }}</v-list-tile-title>
+                  <v-flex xs12 sm12 md4 v-show="replyThread.showUpdateReplyThread == true">
+                    <v-text-field v-model="replyThread.description"></v-text-field>
+                    <v-btn
+                      flat
+                      round
+                      dark
+                      class="reply-btn right"
+                      @click="updateRelpyThreadDiscussion(replyThread)"
+                    >Save</v-btn>
+                  </v-flex>
                 </v-list-tile-content>
-              </v-list-tile>
-            </v-list>
-            <v-list class="pa-2 reply-desc">
-              <v-list-tile-content>
-                <v-list-tile-title
-                  v-show="replyThread.showDescriptionReplyThread"
-                >{{ replyThread.description }}</v-list-tile-title>
-                <v-flex xs12 sm12 md4 v-show="replyThread.showUpdateReplyThread == true">
-                  <v-text-field v-model="replyThread.description"></v-text-field>
-                  <v-btn
-                    flat
-                    round
-                    dark
-                    class="reply-btn right"
-                    @click="updateRelpyThreadDiscussion(replyThread)"
-                  >Save</v-btn>
-                </v-flex>
-              </v-list-tile-content>
-            </v-list>
-            <v-list class="grey lighten-4 pa-0">
-              <v-list-tile-action>
-                <v-spacer></v-spacer>
-                <div>
-                  <v-btn
-                    flat
-                    round
-                    dark
-                    class="reply-btn"
-                    @click="deleteRelpyThreadDiscussion(replyThread._id)"
-                  >Delete</v-btn>
-                  <v-btn
-                    flat
-                    round
-                    dark
-                    class="reply-btn mr-4"
-                    @click="showUpdateReplyThreadDiscussion(replyThread)"
-                  >Edit</v-btn>
-                </div>
-              </v-list-tile-action>
-            </v-list>
-          </v-card>
-        </v-flex>
+              </v-list>
+              <v-list class="grey lighten-4 pa-0">
+                <v-list-tile-action>
+                  <v-spacer></v-spacer>
+                  <div v-if="replyThread.teacherId && replyThread.teacherId._id == $store.state.id">
+                    <v-btn
+                      flat
+                      round
+                      dark
+                      class="reply-btn"
+                      @click="deleteRelpyThreadDiscussion(replyThread._id)"
+                    >Delete</v-btn>
+                    <v-btn
+                      flat
+                      round
+                      dark
+                      class="reply-btn mr-4"
+                      @click="showUpdateReplyThreadDiscussion(replyThread)"
+                    >Edit</v-btn>
+                  </div>
+                </v-list-tile-action>
+              </v-list>
+            </v-card>
+          </v-flex>
+        </v-layout>
       </v-flex>
     </v-layout>
     <v-snackbar
diff --git a/src/pages/Course/discussion.vue b/src/pages/Course/discussion.vue
index 9f60e0e..c491df8 100644
--- a/src/pages/Course/discussion.vue
+++ b/src/pages/Course/discussion.vue
@@ -3,6 +3,7 @@
     <!-- ******COURSE DISCUSIION COMMENT ****** -->
     <v-layout>
       <v-flex xs12 v-for="(courseDiscussionData,i) in courseDiscussionData" :key="i">
+        <!-- TOPIC HEADING -->
         <v-card class="elevation-0 grey lighten-3 pa-2" flat>
           <v-list two-line subheader>
             <v-list-tile>
@@ -31,6 +32,8 @@
             </v-list-tile>
           </v-list>
         </v-card>
+
+        <!-- REPLY BOX -->
         <v-flex xs12 class="mt-4" v-show="showReplyBox">
           <v-textarea
             name="input-7-1"
@@ -48,78 +51,88 @@
             @click="replyThreadDiscussion()"
           >Submit</v-btn>
         </v-flex>
-        <v-flex
-          xs12
-          class="mt-4 pl-5 mx-auto"
-          v-for="(replyThread,i) in courseDiscussionData.forumThread"
+
+        <!-- REPLY THREAD -->
+        <v-layout
+          :class="['mt-4','pl-5','mx-auto',replyThread.teacherId?'justify-start':'justify-end']"
+          v-for="(replyThread,i) in courseDiscussionData.forumThread.slice().reverse()"
           :key="i"
         >
-          <v-card class="elevation-0 grey lighten-3" flat>
-            <v-list two-line subheader class="grey lighten-3 pa-1">
-              <v-list-tile>
-                <v-list-tile-avatar>
-                  <v-avatar size="46">
-                    <img
-                      :src="courseDiscussionData.attachementUrl"
-                      v-if="courseDiscussionData.attachementUrl"
-                    />
-                    <img
-                      src="/static/icon/user.png"
-                      v-else-if="!courseDiscussionData.attachementUrl"
-                    />
-                  </v-avatar>
-                </v-list-tile-avatar>
+          <v-flex xs12 md7>
+            <v-card class="elevation-0 grey lighten-1" flat>
+              <v-list two-line subheader class="grey lighten-1 pa-1">
+                <v-list-tile>
+                  <v-list-tile-avatar>
+                    <v-avatar size="46">
+                      <img
+                        :src="courseDiscussionData.attachementUrl"
+                        v-if="courseDiscussionData.attachementUrl"
+                      />
+                      <img
+                        src="/static/icon/user.png"
+                        v-else-if="!courseDiscussionData.attachementUrl"
+                      />
+                    </v-avatar>
+                  </v-list-tile-avatar>
+                  <v-list-tile-content>
+                    <v-list-tile-title>Re: {{ courseDiscussionData.subject }}</v-list-tile-title>
+                    <v-list-tile-sub-title>
+                      By
+                      <span
+                        class="info--text"
+                        v-if="replyThread.teacherId"
+                      >{{ replyThread.teacherId.name }}</span>
+                      <!-- message -->
+                      <span
+                        class="info--text"
+                        v-if="replyThread.studentId"
+                      >{{ replyThread.studentId.name }}</span>
+                      - {{dates(replyThread.created ) }}
+                    </v-list-tile-sub-title>
+                  </v-list-tile-content>
+                </v-list-tile>
+              </v-list>
+              <v-list class="pa-2 reply-desc">
                 <v-list-tile-content>
-                  <v-list-tile-title>Re: {{ courseDiscussionData.subject }}</v-list-tile-title>
-                  <v-list-tile-sub-title>
-                    By
-                    <span class="info--text" v-if="replyThread.teacherId">{{ replyThread.teacherId.name }}</span>
-                    <span class="info--text" v-if="replyThread.studentId">{{ replyThread.studentId.name }}</span>
-                    - {{dates(replyThread.created ) }}
-                  </v-list-tile-sub-title>
+                  <v-list-tile-title
+                    v-show="replyThread.showDescriptionReplyThread"
+                  >{{ replyThread.description }}</v-list-tile-title>
+                  <v-flex xs12 sm12 md4 v-show="replyThread.showUpdateReplyThread == true">
+                    <v-text-field v-model="replyThread.description"></v-text-field>
+                    <v-btn
+                      flat
+                      round
+                      dark
+                      class="reply-btn right"
+                      @click="updateRelpyThreadDiscussion(replyThread)"
+                    >Save</v-btn>
+                  </v-flex>
                 </v-list-tile-content>
-              </v-list-tile>
-            </v-list>
-            <v-list class="pa-2 reply-desc">
-              <v-list-tile-content>
-                <v-list-tile-title
-                  v-show="replyThread.showDescriptionReplyThread"
-                >{{ replyThread.description }}</v-list-tile-title>
-                <v-flex xs12 sm12 md4 v-show="replyThread.showUpdateReplyThread == true">
-                  <v-text-field v-model="replyThread.description"></v-text-field>
-                  <v-btn
-                    flat
-                    round
-                    dark
-                    class="reply-btn right"
-                    @click="updateRelpyThreadDiscussion(replyThread)"
-                  >Save</v-btn>
-                </v-flex>
-              </v-list-tile-content>
-            </v-list>
-            <v-list class="grey lighten-4 pa-0">
-              <v-list-tile-action>
-                <v-spacer></v-spacer>
-                <div v-if="replyThread.studentId && replyThread.studentId._id == localStorage.getItem('parentStudentId')">
-                  <v-btn
-                    flat
-                    round
-                    dark
-                    class="reply-btn"
-                    @click="deleteRelpyThreadDiscussion(replyThread._id)"
-                  >Delete</v-btn>
-                  <v-btn
-                    flat
-                    round
-                    dark
-                    class="reply-btn mr-4"
-                    @click="showUpdateReplyThreadDiscussion(replyThread)"
-                  >Edit</v-btn>
-                </div>
-              </v-list-tile-action>
-            </v-list>
-          </v-card>
-        </v-flex>
+              </v-list>
+              <v-list class="grey lighten-4 pa-0">
+                <v-list-tile-action>
+                  <v-spacer></v-spacer>
+                  <div v-if="replyThread.teacherId && replyThread.teacherId._id == $store.state.id">
+                    <v-btn
+                      flat
+                      round
+                      dark
+                      class="reply-btn"
+                      @click="deleteRelpyThreadDiscussion(replyThread._id)"
+                    >Delete</v-btn>
+                    <v-btn
+                      flat
+                      round
+                      dark
+                      class="reply-btn mr-4"
+                      @click="showUpdateReplyThreadDiscussion(replyThread)"
+                    >Edit</v-btn>
+                  </div>
+                </v-list-tile-action>
+              </v-list>
+            </v-card>
+          </v-flex>
+        </v-layout>
       </v-flex>
     </v-layout>
     <v-snackbar
diff --git a/src/pages/Dashboard/Announcement.vue b/src/pages/Dashboard/Announcement.vue
index e752fef..dea99b3 100644
--- a/src/pages/Dashboard/Announcement.vue
+++ b/src/pages/Dashboard/Announcement.vue
@@ -21,7 +21,7 @@
 
     <v-container grid-list-xl class="pt-0">
       <v-layout row class="mt-1">
-        <v-flex xs8>
+        <v-flex xs12 md9>
           <v-layout column>
             <!-- HEADING -->
             <v-flex>
@@ -71,6 +71,7 @@
                 <template slot="expand" slot-scope="props">
                   <v-layout>
                     <v-flex xs12 v-for="(annoucementData,i) in annoucementData" :key="i">
+                      <!-- TOPIC HEADING -->
                       <v-card class="elevation-0 grey lighten-3 pa-2" flat>
                         <v-list two-line subheader>
                           <v-list-tile>
@@ -108,6 +109,7 @@
                           </v-list-tile>
                         </v-list>
                       </v-card>
+                      <!-- REPLY BOX -->
                       <v-flex xs12 class="mt-4" v-show="showReplyBox">
                         <v-textarea
                           name="input-7-1"
@@ -131,91 +133,93 @@
                           @click="replyThreadDiscussion()"
                         >Submit</v-btn>
                       </v-flex>
-                      <v-flex
-                        xs12
-                        class="mt-4 pl-5 mx-auto"
-                        v-for="(replyThread,i) in annoucementData.discussionThread"
+                      <!-- REPLY THREAD -->
+                      <v-layout
+                        :class="['mt-4','pl-5','mx-auto',replyThread.teacherId?'justify-start':'justify-end']"
+                        v-for="(replyThread,i) in annoucementData.discussionThread.slice().reverse()"
                         :key="i"
                       >
-                        <v-card class="elevation-0 grey lighten-3" flat>
-                          <v-list two-line subheader class="grey lighten-3 pa-1">
-                            <v-list-tile>
-                              <v-list-tile-avatar>
-                                <v-avatar size="46">
-                                  <img
-                                    :src="annoucementData.attachementUrl"
-                                    v-if="annoucementData.attachementUrl"
-                                  />
-                                  <img
-                                    src="/static/icon/user.png"
-                                    v-else-if="!annoucementData.attachementUrl"
-                                  />
-                                </v-avatar>
-                              </v-list-tile-avatar>
+                        <v-flex xs12 md7>
+                          <v-card class="elevation-0 grey lighten-1" flat>
+                            <v-list two-line subheader class="grey lighten-1 pa-1">
+                              <v-list-tile>
+                                <v-list-tile-avatar>
+                                  <v-avatar size="46">
+                                    <img
+                                      :src="annoucementData.attachementUrl"
+                                      v-if="annoucementData.attachementUrl"
+                                    />
+                                    <img
+                                      src="/static/icon/user.png"
+                                      v-else-if="!annoucementData.attachementUrl"
+                                    />
+                                  </v-avatar>
+                                </v-list-tile-avatar>
+                                <v-list-tile-content>
+                                  <v-list-tile-title>Re: {{ annoucementData.discussionType }}</v-list-tile-title>
+                                  <v-list-tile-sub-title>
+                                    By
+                                    <span
+                                      class="info--text"
+                                      v-if="replyThread.teacherId"
+                                    >{{ replyThread.teacherId.name }}</span>
+                                    <span
+                                      class="info--text"
+                                      v-if="replyThread.studentId"
+                                    >{{ replyThread.studentId.name }}</span>
+                                    - {{dates(replyThread.created ) }}
+                                  </v-list-tile-sub-title>
+                                </v-list-tile-content>
+                              </v-list-tile>
+                            </v-list>
+                            <v-list class="pa-2 reply-desc">
                               <v-list-tile-content>
-                                <v-list-tile-title>Re: {{ annoucementData.discussionType }}</v-list-tile-title>
-                                <v-list-tile-sub-title>
-                                  By
-                                  <span
-                                    class="info--text"
-                                    v-if="replyThread.teacherId"
-                                  >{{ replyThread.teacherId.name }}</span>
-                                  <span
-                                    class="info--text"
-                                    v-if="replyThread.studentId"
-                                  >{{ replyThread.studentId.name }}</span>
-                                  - {{dates(replyThread.created ) }}
-                                </v-list-tile-sub-title>
+                                <v-list-tile-title
+                                  v-show="replyThread.showDescriptionReplyThread"
+                                >{{ replyThread.description }}</v-list-tile-title>
+                                <v-flex
+                                  xs12
+                                  sm12
+                                  md4
+                                  v-show="replyThread.showUpdateReplyThread == true"
+                                >
+                                  <v-text-field v-model="replyThread.description"></v-text-field>
+                                  <v-btn
+                                    flat
+                                    round
+                                    dark
+                                    class="reply-btn right"
+                                    @click="updateRelpyThreadDiscussion(replyThread)"
+                                  >Save</v-btn>
+                                </v-flex>
                               </v-list-tile-content>
-                            </v-list-tile>
-                          </v-list>
-                          <v-list class="pa-2 reply-desc">
-                            <v-list-tile-content>
-                              <v-list-tile-title
-                                v-show="replyThread.showDescriptionReplyThread"
-                              >{{ replyThread.description }}</v-list-tile-title>
-                              <v-flex
-                                xs12
-                                sm12
-                                md4
-                                v-show="replyThread.showUpdateReplyThread == true"
-                              >
-                                <v-text-field v-model="replyThread.description"></v-text-field>
-                                <v-btn
-                                  flat
-                                  round
-                                  dark
-                                  class="reply-btn right"
-                                  @click="updateRelpyThreadDiscussion(replyThread)"
-                                >Save</v-btn>
-                              </v-flex>
-                            </v-list-tile-content>
-                          </v-list>
-                          <v-list class="grey lighten-4 pa-0">
-                            <v-list-tile-action>
-                              <v-spacer></v-spacer>
-                              <div
-                                v-if="replyThread.studentId && replyThread.studentId._id == localStorage.getItem('parentStudentId')"
-                              >
-                                <v-btn
-                                  flat
-                                  round
-                                  dark
-                                  class="reply-btn"
-                                  @click="deleteRelpyThreadDiscussion(replyThread._id)"
-                                >Delete</v-btn>
-                                <v-btn
-                                  flat
-                                  round
-                                  dark
-                                  class="reply-btn mr-4"
-                                  @click="showUpdateReplyThreadDiscussion(replyThread)"
-                                >Edit</v-btn>
-                              </div>
-                            </v-list-tile-action>
-                          </v-list>
-                        </v-card>
-                      </v-flex>
+                            </v-list>
+                            <v-list class="grey lighten-4 pa-0">
+                              <v-list-tile-action>
+                                <v-spacer></v-spacer>
+                                <div
+                                  v-if="replyThread.studentId && replyThread.studentId._id == localStorage.getItem('parentStudentId')"
+                                >
+                                  <v-btn
+                                    flat
+                                    round
+                                    dark
+                                    class="reply-btn"
+                                    @click="deleteRelpyThreadDiscussion(replyThread._id)"
+                                  >Delete</v-btn>
+                                  <v-btn
+                                    flat
+                                    round
+                                    dark
+                                    class="reply-btn mr-4"
+                                    @click="showUpdateReplyThreadDiscussion(replyThread)"
+                                  >Edit</v-btn>
+                                </div>
+                              </v-list-tile-action>
+                            </v-list>
+                          </v-card>
+                        </v-flex>
+                      </v-layout>
                     </v-flex>
                   </v-layout>
                 </template>
@@ -234,7 +238,7 @@
         <v-spacer></v-spacer>
 
         <!-- COURSES - positioned to the right of the page -->
-        <v-flex xs3>
+        <v-flex xs12 md3>
           <v-card class="elevation-0 card-border" height="100%">
             <v-container class="pt-0">
               <div class="side-bar-color font-weight-bold title">Courses</div>
diff --git a/src/pages/Dashboard/CourseDiscussionForum.vue b/src/pages/Dashboard/CourseDiscussionForum.vue
index e35d0ca..50cd459 100644
--- a/src/pages/Dashboard/CourseDiscussionForum.vue
+++ b/src/pages/Dashboard/CourseDiscussionForum.vue
@@ -258,13 +258,13 @@
 
                       <!-- REPLY THREAD -->
                       <v-layout
-                        :class="[mt-4,pl-5,mx-auto,replyThread.teacherId?'justify-start':'justify-end']"
+                        :class="['mt-4','pl-5','mx-auto',replyThread.teacherId?'justify-start':'justify-end']"
                         v-for="(replyThread,i) in courseDiscussionData.forumThread.slice().reverse()"
                         :key="i"
                       >
                         <v-flex xs12 md7>
-                          <v-card class="elevation-0 grey lighten-3" flat>
-                            <v-list two-line subheader class="grey lighten-3 pa-1">
+                          <v-card class="elevation-0 grey lighten-1" flat>
+                            <v-list two-line subheader class="grey lighten-1 pa-1">
                               <v-list-tile>
                                 <v-list-tile-avatar>
                                   <v-avatar size="46">
-- 
2.0.0