Fixed BaseBreadcrumb, RepositoryTree & the log and tree views

3 files changed, 39 insertions, 19 deletions

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;
 				}