diff options
Diffstat (limited to 'packages/client/src')
| -rw-r--r-- | packages/client/src/components/BaseBreadcrumb.vue | 12 | ||||
| -rw-r--r-- | packages/client/src/components/RepositoryTreeTree.vue | 8 | ||||
| -rw-r--r-- | packages/client/src/views/Home.vue | 22 | ||||
| -rw-r--r-- | packages/client/src/views/RepositoryLog.vue | 25 | ||||
| -rw-r--r-- | packages/client/src/views/RepositoryTree.vue | 11 |
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; } |