Fixed BaseBreadcrumb, RepositoryTree & the log and tree views

5 files changed, 49 insertions, 29 deletions

diff --git a/packages/client/src/components/BaseBreadcrumb.vue b/packages/client/src/components/BaseBreadcrumb.vue
index 65dffd4..94d9956 100644
--- a/packages/client/src/components/BaseBreadcrumb.vue
+++ b/packages/client/src/components/BaseBreadcrumb.vue
@@ -49,12 +49,12 @@ export default {
 	}
 	.breadcrumb-item {
 		padding-left: 0.5rem;
-	}
-	.breadcrumb-item + .active::before {
-		float: left;
-		padding-right: 0.5rem;
-		color: #6c757d;
-		content: "/";
+		+ .breadcrumb-item::before {
+			float: left;
+			padding-right: 0.5rem;
+			color: #6c757d;
+			content: "/";
+		}
 	}
 }
 </style>
diff --git a/packages/client/src/components/RepositoryTreeTree.vue b/packages/client/src/components/RepositoryTreeTree.vue
index 21f9570..e74027f 100644
--- a/packages/client/src/components/RepositoryTreeTree.vue
+++ b/packages/client/src/components/RepositoryTreeTree.vue
@@ -18,8 +18,8 @@
 				<td />
 			</tr>
 			<tr
-				v-for="(entry, entry_name, index) in tree" :key="index"
-				@click="$router.push(`/${repository}/tree${path ? '/' + path : ''}/${entry_name}`)">
+				v-for="(entry, index) in tree" :key="index"
+				@click="$router.push(`/${repository}/tree${path ? '/' + path : ''}/${entry.name}`)">
 				<td class="flex-center">
 					<svg
 						xmlns="http://www.w3.org/2000/svg" height="18px"
@@ -30,7 +30,7 @@
 						<path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" />
 					</svg>
 					<span v-else class="tree-entry-padding" />
-					<a @click="stopClick" :href="`/${repository}/tree${path ? '/' + path : ''}/${entry_name}`">{{ entry_name }}</a>
+					<a @click="stopClick" :href="`/${repository}/tree${path ? '/' + path : ''}/${entry.name}`">{{ entry.name }}</a>
 				</td>
 				<td>
 					<a @click="routeToCommit(entry.last_commit.id, $event)" :href="`/${repository}/log/${entry.last_commit.id}`">
@@ -74,7 +74,7 @@ export default {
 			this.$router.push(`/${this.repository}/log/${commit_id}`);
 		},
 		getPrettyLastUpdated(date) {
-			return formatDistance(new Date(), new Date(date));
+			return formatDistance(new Date(date), new Date(), { addSuffix: true });
 		}
 	}
 };
diff --git a/packages/client/src/views/Home.vue b/packages/client/src/views/Home.vue
index 104865a..87adf4a 100644
--- a/packages/client/src/views/Home.vue
+++ b/packages/client/src/views/Home.vue
@@ -5,15 +5,15 @@
 		<div class="row">
 			<div id="projects" class="col vld-parent">
 				<ul v-if="projects">
-					<li v-for="(project, project_name, index) in projects" :key="index">
-						<div v-if="(search !== null && project_name.includes(search)) || search == null">
+					<li v-for="(project, index) in projects" :key="index">
+						<div v-if="(search !== null && project.name.includes(search)) || search == null">
 							<span class="fs-3">
-								<router-link :to="project_name">
-									{{ project_name }}
+								<router-link :to="project.name">
+									{{ project.name }}
 								</router-link>
 							</span>
-							<span class="repo-last-updated fs-5">Last updated about {{ project["last_updated"] }} ago</span>
-							<span class="fs-5">{{ project["description"] }}</span>
+							<span class="repo-last-updated fs-5">Last updated about {{ project.last_updated }}</span>
+							<span class="fs-5">{{ project.description }}</span>
 						</div>
 					</li>
 				</ul>
@@ -34,6 +34,7 @@ import Loading from "vue-loading-overlay";
 import BaseErrorMessage from "@/components/BaseErrorMessage";
 import fetchData from "@/util/fetch";
 import { ref } from "vue";
+import { formatDistance } from "date-fns";
 
 export default {
 	name: "Home",
@@ -45,12 +46,19 @@ export default {
 	},
 	setup() {
 		const projects = ref({});
-		const search = ref("");
+		const search = ref(null);
 		const is_loading = ref(true);
 		const fetch_failed = ref(null);
 
 		const fetchProjects = async() => {
 			const projects_data = await fetchData("repos", fetch_failed, is_loading, "projects");
+
+			projects_data.reduce((result, project) => {
+				project.last_updated = formatDistance(Date.parse(project.last_updated), new Date(), { addSuffix: true });
+				result.push(projects);
+				return result;
+			}, []);
+
 			projects.value = projects_data;
 		};
 
diff --git a/packages/client/src/views/RepositoryLog.vue b/packages/client/src/views/RepositoryLog.vue
index 91d1cfc..efedd87 100644
--- a/packages/client/src/views/RepositoryLog.vue
+++ b/packages/client/src/views/RepositoryLog.vue
@@ -26,14 +26,16 @@
 				<tbody>
 					<tr v-for="(commit, index) in commits" :key="index">
 						<td>
-							<router-link :to="'log/' + commit['commit']">
-								{{ commit["message"] }}
+							<router-link :to="'log/' + commit.id">
+								{{ commit.message }}
 							</router-link>
 						</td>
-						<td>{{ commit["author_name"] }}</td>
-						<td>{{ format(new Date(commit["date"]), "yyyy-MM-dd hh:mm") }}</td>
-						<td>{{ commit["files_changed"] }}</td>
-						<td><span class="text-danger">-{{ commit["deletions"] }}</span> / <span class="text-success">+{{ commit["insertions"] }}</span></td>
+						<td>{{ commit.author.name }}</td>
+						<td>{{ format(new Date(commit.date), "yyyy-MM-dd hh:mm") }}</td>
+						<td>{{ commit.files_changed }}</td>
+						<td class="add-del">
+							<span>-{{ commit.deletions }}</span> / <span>+{{ commit.insertions }}</span>
+						</td>
 					</tr>
 				</tbody>
 			</table>
@@ -124,6 +126,17 @@ table {
 	padding-left: 0;
 }
 
+.add-del {
+	span {
+		&:nth-child(1) {
+			color: colors.$success;
+		}
+		&:nth-child(2) {
+			color: colors.$danger;
+		}
+	}
+}
+
 @media (max-width: 576px) {
 	table > :not(caption) > * > * {
 		padding: 0.1rem;
diff --git a/packages/client/src/views/RepositoryTree.vue b/packages/client/src/views/RepositoryTree.vue
index b14c4e4..351591a 100644
--- a/packages/client/src/views/RepositoryTree.vue
+++ b/packages/client/src/views/RepositoryTree.vue
@@ -71,14 +71,13 @@ export default {
 
 			if(tree_data) {
 				if(tree_data.type === "tree") {
-					let tree_trees = Object.entries(tree_data.tree).filter((entry) => entry[1].type === "tree");
-					tree_trees = tree_trees.sort((a, b) => a[0].localeCompare(b[0]));
+					let tree_trees = tree_data.tree.filter((entry) => entry.type === "tree");
+					tree_trees = tree_trees.sort((a, b) => a.name.localeCompare(b.name));
 
-					let tree_blobs = Object.entries(tree_data.tree).filter((entry) => entry[1].type === "blob");
-					tree_blobs = tree_blobs.sort((a, b) => a[0].localeCompare(b[0]));
+					let tree_blobs = tree_data.tree.filter((entry) => entry.type === "blob");
+					tree_blobs = tree_blobs.sort((a, b) => a.name.localeCompare(b.name));
 
-					tree.value = Object.fromEntries(tree_trees.concat(tree_blobs));
-					console.log(tree.value);
+					tree.value = tree_trees.concat(tree_blobs);
 				} else {
 					blob_content.value = tree_data.content;
 				}