viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 8ac91bfcdc9d7052854c28a3f8026b2e6461c194

Authored by Amber Dev
1 parent 6cafeef214
Exists in master and in 2 other branches amber-development, ui-design

added changes to reply functionality placed in reverse order

Showing 4 changed files with 255 additions and 227 deletions   Show diff stats
src/pages/Annoucement/annoucementForum.vue
Diff comments   View file @8ac91bf
... ... @@ -3,6 +3,7 @@
3 3 <!-- ******ANNOUCEMNET DISCUSSION COMMENT ****** -->
4 4 <v-layout>
5 5 <v-flex xs12 v-for="(annoucementData,i) in annoucementData" :key="i">
  6 + <!-- TOPIC HEADING -->
6 7 <v-card class="elevation-0 grey lighten-3 pa-2" flat>
7 8 <v-list two-line subheader>
8 9 <v-list-tile>
... ... @@ -16,8 +17,14 @@
16 17 <v-list-tile-title>{{ annoucementData.discussionType }}</v-list-tile-title>
17 18 <v-list-tile-sub-title>
18 19 By
19   - <span class="info--text" v-if="annoucementData.studentId">{{ annoucementData.studentId.name }}</span>
20   - <span class="info--text" v-if="annoucementData.teacherId">{{ annoucementData.teacherId.name }}</span>
  20 + <span
  21 + class="info--text"
  22 + v-if="annoucementData.studentId"
  23 + >{{ annoucementData.studentId.name }}</span>
  24 + <span
  25 + class="info--text"
  26 + v-if="annoucementData.teacherId"
  27 + >{{ annoucementData.teacherId.name }}</span>
21 28 - {{dates(annoucementData.created ) }}
22 29 </v-list-tile-sub-title>
23 30 </v-list-tile-content>
... ... @@ -29,6 +36,7 @@
29 36 </v-list-tile>
30 37 </v-list>
31 38 </v-card>
  39 + <!-- REPLY BOX -->
32 40 <v-flex xs12 class="mt-4" v-show="showReplyBox">
33 41 <v-textarea
34 42 name="input-7-1"
... ... @@ -46,81 +54,84 @@
46 54 @click="replyThreadDiscussion()"
47 55 >Submit</v-btn>
48 56 </v-flex>
49   - <v-flex
50   - xs12
51   - class="mt-4 pl-5 mx-auto"
52   - v-for="(replyThread,i) in annoucementData.discussionThread"
  57 +
  58 + <!-- REPLY THREAD -->
  59 + <v-layout
  60 + :class="['mt-4','pl-5','mx-auto',replyThread.teacherId?'justify-start':'justify-end']"
  61 + v-for="(replyThread,i) in annoucementData.discussionThread.slice().reverse()"
53 62 :key="i"
54 63 >
55   - <v-card class="elevation-0 grey lighten-3" flat>
56   - <v-list two-line subheader class="grey lighten-3 pa-1">
57   - <v-list-tile>
58   - <v-list-tile-avatar>
59   - <v-avatar size="46">
60   - <img
61   - :src="annoucementData.attachementUrl"
62   - v-if="annoucementData.attachementUrl"
63   - />
64   - <img src="/static/icon/user.png" v-else-if="!annoucementData.attachementUrl" />
65   - </v-avatar>
66   - </v-list-tile-avatar>
  64 + <v-flex xs12 md7>
  65 + <v-card class="elevation-0 grey lighten-1" flat>
  66 + <v-list two-line subheader class="grey lighten-1 pa-1">
  67 + <v-list-tile>
  68 + <v-list-tile-avatar>
  69 + <v-avatar size="46">
  70 + <img
  71 + :src="annoucementData.attachementUrl"
  72 + v-if="annoucementData.attachementUrl"
  73 + />
  74 + <img src="/static/icon/user.png" v-else-if="!annoucementData.attachementUrl" />
  75 + </v-avatar>
  76 + </v-list-tile-avatar>
  77 + <v-list-tile-content>
  78 + <v-list-tile-title>Re: {{ annoucementData.discussionType }}</v-list-tile-title>
  79 + <v-list-tile-sub-title>
  80 + By
  81 + <span
  82 + class="info--text"
  83 + v-if="replyThread.teacherId"
  84 + >{{ replyThread.teacherId.name }}</span>
  85 + <span
  86 + class="info--text"
  87 + v-if="replyThread.studentId"
  88 + >{{ replyThread.studentId.name }}</span>
  89 + - {{dates(replyThread.created ) }}
  90 + </v-list-tile-sub-title>
  91 + </v-list-tile-content>
  92 + </v-list-tile>
  93 + </v-list>
  94 + <v-list class="pa-2 reply-desc">
67 95 <v-list-tile-content>
68   - <v-list-tile-title>Re: {{ annoucementData.discussionType }}</v-list-tile-title>
69   - <v-list-tile-sub-title>
70   - By
71   - <span
72   - class="info--text"
73   - v-if="replyThread.teacherId"
74   - >{{ replyThread.teacherId.name }}</span>
75   - <span
76   - class="info--text"
77   - v-if="replyThread.studentId"
78   - >{{ replyThread.studentId.name }}</span>
79   - - {{dates(replyThread.created ) }}
80   - </v-list-tile-sub-title>
  96 + <v-list-tile-title
  97 + v-show="replyThread.showDescriptionReplyThread"
  98 + >{{ replyThread.description }}</v-list-tile-title>
  99 + <v-flex xs12 sm12 md4 v-show="replyThread.showUpdateReplyThread == true">
  100 + <v-text-field v-model="replyThread.description"></v-text-field>
  101 + <v-btn
  102 + flat
  103 + round
  104 + dark
  105 + class="reply-btn right"
  106 + @click="updateRelpyThreadDiscussion(replyThread)"
  107 + >Save</v-btn>
  108 + </v-flex>
81 109 </v-list-tile-content>
82   - </v-list-tile>
83   - </v-list>
84   - <v-list class="pa-2 reply-desc">
85   - <v-list-tile-content>
86   - <v-list-tile-title
87   - v-show="replyThread.showDescriptionReplyThread"
88   - >{{ replyThread.description }}</v-list-tile-title>
89   - <v-flex xs12 sm12 md4 v-show="replyThread.showUpdateReplyThread == true">
90   - <v-text-field v-model="replyThread.description"></v-text-field>
91   - <v-btn
92   - flat
93   - round
94   - dark
95   - class="reply-btn right"
96   - @click="updateRelpyThreadDiscussion(replyThread)"
97   - >Save</v-btn>
98   - </v-flex>
99   - </v-list-tile-content>
100   - </v-list>
101   - <v-list class="grey lighten-4 pa-0">
102   - <v-list-tile-action>
103   - <v-spacer></v-spacer>
104   - <div>
105   - <v-btn
106   - flat
107   - round
108   - dark
109   - class="reply-btn"
110   - @click="deleteRelpyThreadDiscussion(replyThread._id)"
111   - >Delete</v-btn>
112   - <v-btn
113   - flat
114   - round
115   - dark
116   - class="reply-btn mr-4"
117   - @click="showUpdateReplyThreadDiscussion(replyThread)"
118   - >Edit</v-btn>
119   - </div>
120   - </v-list-tile-action>
121   - </v-list>
122   - </v-card>
123   - </v-flex>
  110 + </v-list>
  111 + <v-list class="grey lighten-4 pa-0">
  112 + <v-list-tile-action>
  113 + <v-spacer></v-spacer>
  114 + <div v-if="replyThread.teacherId && replyThread.teacherId._id == $store.state.id">
  115 + <v-btn
  116 + flat
  117 + round
  118 + dark
  119 + class="reply-btn"
  120 + @click="deleteRelpyThreadDiscussion(replyThread._id)"
  121 + >Delete</v-btn>
  122 + <v-btn
  123 + flat
  124 + round
  125 + dark
  126 + class="reply-btn mr-4"
  127 + @click="showUpdateReplyThreadDiscussion(replyThread)"
  128 + >Edit</v-btn>
  129 + </div>
  130 + </v-list-tile-action>
  131 + </v-list>
  132 + </v-card>
  133 + </v-flex>
  134 + </v-layout>
124 135 </v-flex>
125 136 </v-layout>
126 137 <v-snackbar
... ...
src/pages/Course/discussion.vue
Diff comments   View file @8ac91bf
... ... @@ -3,6 +3,7 @@
3 3 <!-- ******COURSE DISCUSIION COMMENT ****** -->
4 4 <v-layout>
5 5 <v-flex xs12 v-for="(courseDiscussionData,i) in courseDiscussionData" :key="i">
  6 + <!-- TOPIC HEADING -->
6 7 <v-card class="elevation-0 grey lighten-3 pa-2" flat>
7 8 <v-list two-line subheader>
8 9 <v-list-tile>
... ... @@ -31,6 +32,8 @@
31 32 </v-list-tile>
32 33 </v-list>
33 34 </v-card>
  35 +
  36 + <!-- REPLY BOX -->
34 37 <v-flex xs12 class="mt-4" v-show="showReplyBox">
35 38 <v-textarea
36 39 name="input-7-1"
... ... @@ -48,78 +51,88 @@
48 51 @click="replyThreadDiscussion()"
49 52 >Submit</v-btn>
50 53 </v-flex>
51   - <v-flex
52   - xs12
53   - class="mt-4 pl-5 mx-auto"
54   - v-for="(replyThread,i) in courseDiscussionData.forumThread"
  54 +
  55 + <!-- REPLY THREAD -->
  56 + <v-layout
  57 + :class="['mt-4','pl-5','mx-auto',replyThread.teacherId?'justify-start':'justify-end']"
  58 + v-for="(replyThread,i) in courseDiscussionData.forumThread.slice().reverse()"
55 59 :key="i"
56 60 >
57   - <v-card class="elevation-0 grey lighten-3" flat>
58   - <v-list two-line subheader class="grey lighten-3 pa-1">
59   - <v-list-tile>
60   - <v-list-tile-avatar>
61   - <v-avatar size="46">
62   - <img
63   - :src="courseDiscussionData.attachementUrl"
64   - v-if="courseDiscussionData.attachementUrl"
65   - />
66   - <img
67   - src="/static/icon/user.png"
68   - v-else-if="!courseDiscussionData.attachementUrl"
69   - />
70   - </v-avatar>
71   - </v-list-tile-avatar>
  61 + <v-flex xs12 md7>
  62 + <v-card class="elevation-0 grey lighten-1" flat>
  63 + <v-list two-line subheader class="grey lighten-1 pa-1">
  64 + <v-list-tile>
  65 + <v-list-tile-avatar>
  66 + <v-avatar size="46">
  67 + <img
  68 + :src="courseDiscussionData.attachementUrl"
  69 + v-if="courseDiscussionData.attachementUrl"
  70 + />
  71 + <img
  72 + src="/static/icon/user.png"
  73 + v-else-if="!courseDiscussionData.attachementUrl"
  74 + />
  75 + </v-avatar>
  76 + </v-list-tile-avatar>
  77 + <v-list-tile-content>
  78 + <v-list-tile-title>Re: {{ courseDiscussionData.subject }}</v-list-tile-title>
  79 + <v-list-tile-sub-title>
  80 + By
  81 + <span
  82 + class="info--text"
  83 + v-if="replyThread.teacherId"
  84 + >{{ replyThread.teacherId.name }}</span>
  85 + <!-- message -->
  86 + <span
  87 + class="info--text"
  88 + v-if="replyThread.studentId"
  89 + >{{ replyThread.studentId.name }}</span>
  90 + - {{dates(replyThread.created ) }}
  91 + </v-list-tile-sub-title>
  92 + </v-list-tile-content>
  93 + </v-list-tile>
  94 + </v-list>
  95 + <v-list class="pa-2 reply-desc">
72 96 <v-list-tile-content>
73   - <v-list-tile-title>Re: {{ courseDiscussionData.subject }}</v-list-tile-title>
74   - <v-list-tile-sub-title>
75   - By
76   - <span class="info--text" v-if="replyThread.teacherId">{{ replyThread.teacherId.name }}</span>
77   - <span class="info--text" v-if="replyThread.studentId">{{ replyThread.studentId.name }}</span>
78   - - {{dates(replyThread.created ) }}
79   - </v-list-tile-sub-title>
  97 + <v-list-tile-title
  98 + v-show="replyThread.showDescriptionReplyThread"
  99 + >{{ replyThread.description }}</v-list-tile-title>
  100 + <v-flex xs12 sm12 md4 v-show="replyThread.showUpdateReplyThread == true">
  101 + <v-text-field v-model="replyThread.description"></v-text-field>
  102 + <v-btn
  103 + flat
  104 + round
  105 + dark
  106 + class="reply-btn right"
  107 + @click="updateRelpyThreadDiscussion(replyThread)"
  108 + >Save</v-btn>
  109 + </v-flex>
80 110 </v-list-tile-content>
81   - </v-list-tile>
82   - </v-list>
83   - <v-list class="pa-2 reply-desc">
84   - <v-list-tile-content>
85   - <v-list-tile-title
86   - v-show="replyThread.showDescriptionReplyThread"
87   - >{{ replyThread.description }}</v-list-tile-title>
88   - <v-flex xs12 sm12 md4 v-show="replyThread.showUpdateReplyThread == true">
89   - <v-text-field v-model="replyThread.description"></v-text-field>
90   - <v-btn
91   - flat
92   - round
93   - dark
94   - class="reply-btn right"
95   - @click="updateRelpyThreadDiscussion(replyThread)"
96   - >Save</v-btn>
97   - </v-flex>
98   - </v-list-tile-content>
99   - </v-list>
100   - <v-list class="grey lighten-4 pa-0">
101   - <v-list-tile-action>
102   - <v-spacer></v-spacer>
103   - <div v-if="replyThread.studentId && replyThread.studentId._id == localStorage.getItem('parentStudentId')">
104   - <v-btn
105   - flat
106   - round
107   - dark
108   - class="reply-btn"
109   - @click="deleteRelpyThreadDiscussion(replyThread._id)"
110   - >Delete</v-btn>
111   - <v-btn
112   - flat
113   - round
114   - dark
115   - class="reply-btn mr-4"
116   - @click="showUpdateReplyThreadDiscussion(replyThread)"
117   - >Edit</v-btn>
118   - </div>
119   - </v-list-tile-action>
120   - </v-list>
121   - </v-card>
122   - </v-flex>
  111 + </v-list>
  112 + <v-list class="grey lighten-4 pa-0">
  113 + <v-list-tile-action>
  114 + <v-spacer></v-spacer>
  115 + <div v-if="replyThread.teacherId && replyThread.teacherId._id == $store.state.id">
  116 + <v-btn
  117 + flat
  118 + round
  119 + dark
  120 + class="reply-btn"
  121 + @click="deleteRelpyThreadDiscussion(replyThread._id)"
  122 + >Delete</v-btn>
  123 + <v-btn
  124 + flat
  125 + round
  126 + dark
  127 + class="reply-btn mr-4"
  128 + @click="showUpdateReplyThreadDiscussion(replyThread)"
  129 + >Edit</v-btn>
  130 + </div>
  131 + </v-list-tile-action>
  132 + </v-list>
  133 + </v-card>
  134 + </v-flex>
  135 + </v-layout>
123 136 </v-flex>
124 137 </v-layout>
125 138 <v-snackbar
... ...
src/pages/Dashboard/Announcement.vue
Diff comments   View file @8ac91bf
... ... @@ -21,7 +21,7 @@
21 21  
22 22 <v-container grid-list-xl class="pt-0">
23 23 <v-layout row class="mt-1">
24   - <v-flex xs8>
  24 + <v-flex xs12 md9>
25 25 <v-layout column>
26 26 <!-- HEADING -->
27 27 <v-flex>
... ... @@ -71,6 +71,7 @@
71 71 <template slot="expand" slot-scope="props">
72 72 <v-layout>
73 73 <v-flex xs12 v-for="(annoucementData,i) in annoucementData" :key="i">
  74 + <!-- TOPIC HEADING -->
74 75 <v-card class="elevation-0 grey lighten-3 pa-2" flat>
75 76 <v-list two-line subheader>
76 77 <v-list-tile>
... ... @@ -108,6 +109,7 @@
108 109 </v-list-tile>
109 110 </v-list>
110 111 </v-card>
  112 + <!-- REPLY BOX -->
111 113 <v-flex xs12 class="mt-4" v-show="showReplyBox">
112 114 <v-textarea
113 115 name="input-7-1"
... ... @@ -131,91 +133,93 @@
131 133 @click="replyThreadDiscussion()"
132 134 >Submit</v-btn>
133 135 </v-flex>
134   - <v-flex
135   - xs12
136   - class="mt-4 pl-5 mx-auto"
137   - v-for="(replyThread,i) in annoucementData.discussionThread"
  136 + <!-- REPLY THREAD -->
  137 + <v-layout
  138 + :class="['mt-4','pl-5','mx-auto',replyThread.teacherId?'justify-start':'justify-end']"
  139 + v-for="(replyThread,i) in annoucementData.discussionThread.slice().reverse()"
138 140 :key="i"
139 141 >
140   - <v-card class="elevation-0 grey lighten-3" flat>
141   - <v-list two-line subheader class="grey lighten-3 pa-1">
142   - <v-list-tile>
143   - <v-list-tile-avatar>
144   - <v-avatar size="46">
145   - <img
146   - :src="annoucementData.attachementUrl"
147   - v-if="annoucementData.attachementUrl"
148   - />
149   - <img
150   - src="/static/icon/user.png"
151   - v-else-if="!annoucementData.attachementUrl"
152   - />
153   - </v-avatar>
154   - </v-list-tile-avatar>
  142 + <v-flex xs12 md7>
  143 + <v-card class="elevation-0 grey lighten-1" flat>
  144 + <v-list two-line subheader class="grey lighten-1 pa-1">
  145 + <v-list-tile>
  146 + <v-list-tile-avatar>
  147 + <v-avatar size="46">
  148 + <img
  149 + :src="annoucementData.attachementUrl"
  150 + v-if="annoucementData.attachementUrl"
  151 + />
  152 + <img
  153 + src="/static/icon/user.png"
  154 + v-else-if="!annoucementData.attachementUrl"
  155 + />
  156 + </v-avatar>
  157 + </v-list-tile-avatar>
  158 + <v-list-tile-content>
  159 + <v-list-tile-title>Re: {{ annoucementData.discussionType }}</v-list-tile-title>
  160 + <v-list-tile-sub-title>
  161 + By
  162 + <span
  163 + class="info--text"
  164 + v-if="replyThread.teacherId"
  165 + >{{ replyThread.teacherId.name }}</span>
  166 + <span
  167 + class="info--text"
  168 + v-if="replyThread.studentId"
  169 + >{{ replyThread.studentId.name }}</span>
  170 + - {{dates(replyThread.created ) }}
  171 + </v-list-tile-sub-title>
  172 + </v-list-tile-content>
  173 + </v-list-tile>
  174 + </v-list>
  175 + <v-list class="pa-2 reply-desc">
155 176 <v-list-tile-content>
156   - <v-list-tile-title>Re: {{ annoucementData.discussionType }}</v-list-tile-title>
157   - <v-list-tile-sub-title>
158   - By
159   - <span
160   - class="info--text"
161   - v-if="replyThread.teacherId"
162   - >{{ replyThread.teacherId.name }}</span>
163   - <span
164   - class="info--text"
165   - v-if="replyThread.studentId"
166   - >{{ replyThread.studentId.name }}</span>
167   - - {{dates(replyThread.created ) }}
168   - </v-list-tile-sub-title>
  177 + <v-list-tile-title
  178 + v-show="replyThread.showDescriptionReplyThread"
  179 + >{{ replyThread.description }}</v-list-tile-title>
  180 + <v-flex
  181 + xs12
  182 + sm12
  183 + md4
  184 + v-show="replyThread.showUpdateReplyThread == true"
  185 + >
  186 + <v-text-field v-model="replyThread.description"></v-text-field>
  187 + <v-btn
  188 + flat
  189 + round
  190 + dark
  191 + class="reply-btn right"
  192 + @click="updateRelpyThreadDiscussion(replyThread)"
  193 + >Save</v-btn>
  194 + </v-flex>
169 195 </v-list-tile-content>
170   - </v-list-tile>
171   - </v-list>
172   - <v-list class="pa-2 reply-desc">
173   - <v-list-tile-content>
174   - <v-list-tile-title
175   - v-show="replyThread.showDescriptionReplyThread"
176   - >{{ replyThread.description }}</v-list-tile-title>
177   - <v-flex
178   - xs12
179   - sm12
180   - md4
181   - v-show="replyThread.showUpdateReplyThread == true"
182   - >
183   - <v-text-field v-model="replyThread.description"></v-text-field>
184   - <v-btn
185   - flat
186   - round
187   - dark
188   - class="reply-btn right"
189   - @click="updateRelpyThreadDiscussion(replyThread)"
190   - >Save</v-btn>
191   - </v-flex>
192   - </v-list-tile-content>
193   - </v-list>
194   - <v-list class="grey lighten-4 pa-0">
195   - <v-list-tile-action>
196   - <v-spacer></v-spacer>
197   - <div
198   - v-if="replyThread.studentId && replyThread.studentId._id == localStorage.getItem('parentStudentId')"
199   - >
200   - <v-btn
201   - flat
202   - round
203   - dark
204   - class="reply-btn"
205   - @click="deleteRelpyThreadDiscussion(replyThread._id)"
206   - >Delete</v-btn>
207   - <v-btn
208   - flat
209   - round
210   - dark
211   - class="reply-btn mr-4"
212   - @click="showUpdateReplyThreadDiscussion(replyThread)"
213   - >Edit</v-btn>
214   - </div>
215   - </v-list-tile-action>
216   - </v-list>
217   - </v-card>
218   - </v-flex>
  196 + </v-list>
  197 + <v-list class="grey lighten-4 pa-0">
  198 + <v-list-tile-action>
  199 + <v-spacer></v-spacer>
  200 + <div
  201 + v-if="replyThread.studentId && replyThread.studentId._id == localStorage.getItem('parentStudentId')"
  202 + >
  203 + <v-btn
  204 + flat
  205 + round
  206 + dark
  207 + class="reply-btn"
  208 + @click="deleteRelpyThreadDiscussion(replyThread._id)"
  209 + >Delete</v-btn>
  210 + <v-btn
  211 + flat
  212 + round
  213 + dark
  214 + class="reply-btn mr-4"
  215 + @click="showUpdateReplyThreadDiscussion(replyThread)"
  216 + >Edit</v-btn>
  217 + </div>
  218 + </v-list-tile-action>
  219 + </v-list>
  220 + </v-card>
  221 + </v-flex>
  222 + </v-layout>
219 223 </v-flex>
220 224 </v-layout>
221 225 </template>
... ... @@ -234,7 +238,7 @@
234 238 <v-spacer></v-spacer>
235 239  
236 240 <!-- COURSES - positioned to the right of the page -->
237   - <v-flex xs3>
  241 + <v-flex xs12 md3>
238 242 <v-card class="elevation-0 card-border" height="100%">
239 243 <v-container class="pt-0">
240 244 <div class="side-bar-color font-weight-bold title">Courses</div>
... ...
src/pages/Dashboard/CourseDiscussionForum.vue
Diff comments   View file @8ac91bf
... ... @@ -258,13 +258,13 @@
258 258  
259 259 <!-- REPLY THREAD -->
260 260 <v-layout
261   - :class="[mt-4,pl-5,mx-auto,replyThread.teacherId?'justify-start':'justify-end']"
  261 + :class="['mt-4','pl-5','mx-auto',replyThread.teacherId?'justify-start':'justify-end']"
262 262 v-for="(replyThread,i) in courseDiscussionData.forumThread.slice().reverse()"
263 263 :key="i"
264 264 >
265 265 <v-flex xs12 md7>
266   - <v-card class="elevation-0 grey lighten-3" flat>
267   - <v-list two-line subheader class="grey lighten-3 pa-1">
  266 + <v-card class="elevation-0 grey lighten-1" flat>
  267 + <v-list two-line subheader class="grey lighten-1 pa-1">
268 268 <v-list-tile>
269 269 <v-list-tile-avatar>
270 270 <v-avatar size="46">
... ...