Merge pull request #616 from nearbeach/develop

Develop

src/js/components/card_information/CardUsers.vue

@@ -5,36 +5,38 @@
 	>
 		Sorry, there are no users currently assigned to this card.
 	</div>
-	<div v-else>
-		<table class="table">
-			<thead>
-			<tr>
-				<td scope="col">Username</td>
-				<td scope="col">Name</td>
-				<td
-					scope="col"
-					v-if="userLevel === 4"
-				>
-					Delete
-				</td>
-			</tr>
-			</thead>
-			<tbody>
-			<tr
-				v-for="user in objectUserList"
-				v-bind:key="user.id"
+	<div v-else
+	     class="user-card-list"
+	>
+		<div
+			v-for="user in objectUserList"
+			v-bind:key="user.username"
+			class="user-card"
+		>
+			<img
+				v-bind:src="profilePicture(user.profile_picture)"
+				alt="default profile"
+				class="user-card--profile"
+			/>
+			<div class="user-card--details">
+				<div class="user-card--name">
+					{{ user.first_name }} {{ user.last_name }}
+				</div>
+				<div class="user-card--email">
+					{{ user.email }}
+				</div>
+			</div>
+			<div
+				class="user-card--remove"
+				v-if="userLevel >= 3"
 			>
-				<td>{{ user.id }} - {{ user.username }}</td>
-				<td>{{ user.first_name }} {{ user.last_name }}</td>
-				<td v-if="userLevel >= 2">
-					<Icon
-						v-bind:icon="icons.trashCan"
-						v-on:click="removeUser(user.username)"
-					/>
-				</td>
-			</tr>
-			</tbody>
-		</table>
+				<Icon
+					v-bind:icon="icons.trashCan"
+					v-on:click="removeUser(user.username)"
+				/>
+			</div>
+		</div>
+
 	</div>
 	<div
 		class="row"
@@ -88,6 +90,13 @@ export default {
 			const addUserWizard = new Modal("#addUserModal");
 			addUserWizard.show();
 		},
+		profilePicture(picture_uuid) {
+			if (picture_uuid !== null && picture_uuid !== "") {
+				return `${this.rootUrl}private/${picture_uuid}/`;
+			}
+
+			return `${this.staticUrl}NearBeach/images/placeholder/people_tax.svg`;
+		},
 		removeUser(username) {
 			//Data to send
 			const data_to_send = new FormData();

src/js/components/gantt_chart/GanttInformation.vue

@@ -164,8 +164,12 @@ export default {
 				`${this.rootUrl}gantt_data/${this.destination}/${this.locationId}/get_data/`,
 			).then((response) => {
 				//Get the dates
-				const end_date = DateTime.fromISO(this.ganttEndDate);
-				const start_date = DateTime.fromISO(this.ganttStartDate);
+				let end_date = DateTime.fromISO(this.ganttEndDate);
+				let start_date = DateTime.fromISO(this.ganttStartDate);
+
+				//Set the end/start date's times to 12:00:00AM
+				end_date = end_date.set({hour: 0, minute: 0, second: 0, millisecond: 0});
+				start_date = start_date.set({hour: 0, minute: 0, second: 0, millisecond: 0});
 
 				//Update the status lists
 				this.$store.commit({

src/js/components/gantt_chart/RenderGanttDaysHeader.vue

@@ -8,15 +8,15 @@
 		</div>
 		<div class="gantt-header--dates">
 			<div
-				v-for="index in deltaDays"
+				v-for="index in deltaDays + 1"
 				:key="index"
 				class="gantt-header--date"
 			>
 				<div class="dayDate">
-					{{getDayDate(index)}}
+					{{getDayDate(index - 1)}}
 				</div>
 				<div class="dayText">
-					{{getDayText(index)}}
+					{{getDayText(index - 1)}}
 				</div>
 			</div>
 		</div>
@@ -32,13 +32,13 @@ export default {
 	data() {
 		return {
 			dateDictionary: {
-				0: "S",
-				1: "M",
-				2: "T",
-				3: "W",
-				4: "T",
-				5: "F",
-				6: "S",
+				0: "Sun",
+				1: "Mon",
+				2: "Tue",
+				3: "Wed",
+				4: "Thu",
+				5: "Fri",
+				6: "Sat",
 			},
 		};
 	},

src/js/components/gantt_chart/RenderGanttMonthlyHeader.vue

@@ -8,7 +8,7 @@
 				class="gantt-header--month"
 				v-bind:style="`width: ${month.width}px`"
 			>
-				{{month.month}} {{month.year}}
+				<span>{{month.month}} {{month.year}}</span>
 			</div>
 		</div>
 	</div>
@@ -73,7 +73,7 @@ export default {
 					keep_looping = false;
 
 					//Get delta then the width of the object :)
-					delta = Math.round((end_date.getTime() - point_date.getTime()) / (1000 * 60 * 60 * 24));
+					delta = Math.round((end_date.getTime() - point_date.getTime()) / (1000 * 60 * 60 * 24)) + 1;
 				} else {
 					//Months are different. Get the point date for the first of next month
 					if (point_date.getMonth() === 11) {
@@ -90,7 +90,7 @@ export default {
 				this.monthArray.push({
 					index: index,
 					delta: delta,
-					width: delta * 35,
+					width: delta * 48,
 					month: this.monthDictionary[point_date.getMonth()],
 					year: point_date.getFullYear(),
 				});

src/js/components/gantt_chart/RenderGanttRow.vue

@@ -10,6 +10,7 @@
 					type="datetime"
 					@update:value="modifiedStartDate"
                     :disabled="userLevel <= 1"
+					:format="datePickerFormat"
 				/>
 			</div>
 			<div class="gantt-row--end-date">
@@ -18,6 +19,7 @@
 					type="datetime"
 					@update:value="modifiedEndDate"
                     :disabled="userLevel <= 1"
+					:format="datePickerFormat"
 				></n-date-picker>
 			</div>
 			<div class="gantt-row--status">
@@ -112,6 +114,7 @@ export default {
 	},
 	data() {
 		return {
+			datePickerFormat: "yyyy-MM-dd HH:mm",
 			localEndDate: this.endDate,
 			localStartDate: this.startDate,
 			localStatusId: this.statusId,

src/js/components/render/RenderUserCard.vue

@@ -0,0 +1,3 @@
+<template>
+
+</template>

src/js/components/sprints/SprintInformation.vue

@@ -22,7 +22,7 @@
 				</div>
 			</div>
 
-			<hr v-if="userLevel >= 2" />
+			<hr v-if="userLevel >= 2 && sprintResults[0].sprint_status !== 'Finished'" />
 			<div
 				v-if="userLevel >= 2"
 				class="sprint-header--buttons"

src/js/vuex/ganttChartVueX.js

@@ -53,7 +53,7 @@ export const moduleGantChart = {
                 row.start_date = start_date.toMillis();
 
                 return row;
-            })
+            });
 
             //Commit the data
             commit({

src/sass/components/_gantt_chart.scss

@@ -1,7 +1,7 @@
 .gantt-chart {
     position: relative;
     margin: 5px;
-    padding-bottom: 50px;
+    //padding-bottom: 50px;
     //overflow: scroll;
     overflow: auto;
     scrollbar-color: orange lightyellow;
@@ -21,6 +21,7 @@
             align-items: flex-end;
             font-weight: bold;
             padding: 0 0 0 5px;
+            border-right: 1px solid lightgray;
 
             .gantt-header--title {
                 width: 360px;
@@ -45,6 +46,7 @@
                 flex-direction: column;
                 align-items: center;
                 justify-content: center;
+                border-right: solid lightgray 1px;
 
                 .dayText {
                     font-weight: lighter;
@@ -62,6 +64,10 @@
                 //border: solid 1px lightskyblue;
                 //color: black;
                 font-weight: bold;
+                border-right: 1px solid lightgray;
+                padding-left: 5px;
+                overflow: hidden;
+                white-space: nowrap;
             }
         }
     }
@@ -70,7 +76,6 @@
         display: flex;
         flex-direction: row;
         margin: 0;
-        height: 40px;
         -webkit-user-select: none;
         user-select: none;
 
@@ -81,10 +86,14 @@
             justify-content: flex-start;
             align-items: center;
             padding: 0 0 0 5px;
+            border-right: 1px solid lightgray;
 
             .gantt-row--title {
                 width: 360px;
                 font-weight: lighter;
+                white-space: nowrap;
+                overflow: clip;
+                text-overflow: ellipsis;
             }
 
             .gantt-row--start-date, .gantt-row--end-date, .gantt-row--status {
@@ -123,6 +132,12 @@
                 }
             }
         }
+
+        &:last-child {
+            .gantt-row--information {
+                padding-bottom: 50px;
+            }
+        }
     }
 
     //.gantt-row--cells {