diff options
Diffstat (limited to 'src/frontend/components')
| -rw-r--r-- | src/frontend/components/RepositoryNavbar.vue | 8 | ||||
| -rw-r--r-- | src/frontend/components/RepositoryTreeBlob.vue | 23 | ||||
| -rw-r--r-- | src/frontend/components/RepositoryTreeTree.vue | 84 |
3 files changed, 112 insertions, 3 deletions
diff --git a/src/frontend/components/RepositoryNavbar.vue b/src/frontend/components/RepositoryNavbar.vue index 87a32d6..53e1bfa 100644 --- a/src/frontend/components/RepositoryNavbar.vue +++ b/src/frontend/components/RepositoryNavbar.vue @@ -8,9 +8,11 @@ <li v-for="(item, index) in nav_items" :key="index" class="nav-item"> - <a + <router-link class="nav-link fs-4" :class="{ active: activePage === item }" - :aria-current="(activePage === item) ? 'page' : ''" :href="item">{{ item }}</a> + :aria-current="(activePage === item) ? 'page' : ''" :to="'/' + repository + '/' + item"> + {{ item }} + </router-link> </li> <li class="nav-item ms-auto me-4"> <RepositoryCloneDropdown :repository="repository" class="d-block" /> @@ -48,5 +50,5 @@ export default { url: `${window.location.protocol}//${window.location.host}/${this.repository}` }; } -} +}; </script>
\ No newline at end of file diff --git a/src/frontend/components/RepositoryTreeBlob.vue b/src/frontend/components/RepositoryTreeBlob.vue new file mode 100644 index 0000000..a0a7514 --- /dev/null +++ b/src/frontend/components/RepositoryTreeBlob.vue @@ -0,0 +1,23 @@ +<template> + {{ content }} +</template> + +<script> +export default { + name: "RepositoryTreeBlob", + props: { + repository: { + type: String, + required: true + }, + path: { + type: String, + required: true + }, + content: { + type: String, + required: true + } + } +}; +</script>
\ No newline at end of file diff --git a/src/frontend/components/RepositoryTreeTree.vue b/src/frontend/components/RepositoryTreeTree.vue new file mode 100644 index 0000000..70c63eb --- /dev/null +++ b/src/frontend/components/RepositoryTreeTree.vue @@ -0,0 +1,84 @@ +<template> + <table id="tree" class="fs-5"> + <thead> + <tr> + <th>Name</th> + <th>Last commit</th> + <th>Last updated</th> + </tr> + </thead> + <tbody> + <tr v-if="path !== ''" @click="$router.go(-1)"> + <td + class="d-flex align-items-center"> + <div class="tree-entry-padding" /> + .. + </td> + <td /> + <td /> + </tr> + <tr + v-for="(entry, entry_name, index) in tree" :key="index" + @click="$router.push(`/${repository}/tree${path ? '/' + path : ''}/${entry_name}`)"> + <td class="d-flex align-items-center"> + <svg + xmlns="http://www.w3.org/2000/svg" height="18px" + viewBox="0 0 24 24" width="18px" + fill="#FFFFFF" v-if="entry['type'] === 'tree'" + preserveAspectRatio="xMidYMin"> + <path d="M0 0h24v24H0z" fill="none" /> + <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> + </td> + <td> + <a @click="routeToCommit(entry.last_commit.id, $event)" :href="`/${repository}/log/${entry.last_commit.id}`"> + {{ entry.last_commit.message }} + </a> + </td> + <td> + {{ getPrettyLastUpdated(entry.last_commit.time) }} + </td> + </tr> + </tbody> + </table> +</template> + +<script> +const { formatDistance } = require('date-fns'); + +export default { + name: "RepositoryTreeTree", + props: { + repository: { + type: String, + required: true + }, + path: { + type: String, + required: true + }, + tree: { + type: Object, + required: true + } + }, + methods: { + stopClick(event) + { + event.preventDefault(); + }, + routeToCommit(commit_id, event) + { + event.stopPropagation(); + event.preventDefault(); + this.$router.push(`/${this.repository}/log/${commit_id}`); + }, + getPrettyLastUpdated(date) + { + return formatDistance(new Date(), new Date(date)); + } + } +}; +</script>
\ No newline at end of file |