diff options
Diffstat (limited to 'packages/client/src/views/RepositoryCommit.vue')
-rw-r--r-- | packages/client/src/views/RepositoryCommit.vue | 202 |
1 files changed, 202 insertions, 0 deletions
diff --git a/packages/client/src/views/RepositoryCommit.vue b/packages/client/src/views/RepositoryCommit.vue new file mode 100644 index 0000000..6bbbcaa --- /dev/null +++ b/packages/client/src/views/RepositoryCommit.vue @@ -0,0 +1,202 @@ +<template> + <div class="row mx-0"> + <div class="col ms-2 ps-4 ps-sm-5 fs-5 vld-parent"> + <BaseBreadcrumb :items="[{ name: 'Log', path: '/' + $router.currentRoute._rawValue.params.repo + '/log' }]" :active-item="$router.currentRoute._rawValue.params.commit" /> + <table id="commit-info" class="table table-dark"> + <tbody> + <tr> + <td class="commit-info-title"> + Author + </td> + <td>{{ commit_data["author"] }}</td> + </tr> + <tr> + <td class="commit-info-title"> + Date + </td> + <td>{{ commit_data["date"] }}</td> + </tr> + <tr> + <td class="commit-info-title"> + Message + </td> + <td>{{ commit_data["message"] }}</td> + </tr> + </tbody> + </table> + <Loading + :active="is_loading" :height="24" + :width="24" color="#ffffff" + :opacity="0" :is-full-page="false" /> + <div + v-for="(patch, index) in commit_data['patches']" :key="index" + class="commit-patch"> + <div class="commit-patch-header"> + <span class="fw-bold">{{ (patch.to === "/dev/null") ? patch.from : patch.to }} </span> + <span v-if="patch.to === '/dev/null'">Deleted</span> + <div class="commit-patch-add-del"> + <span>+{{ patch.additions }}</span> + <span>-{{ patch.deletions }}</span> + </div> + </div> + <CommitPatch :patch="patch" /> + </div> + </div> + </div> +</template> + +<script> +import BaseBreadcrumb from "@/components/BaseBreadcrumb"; +import CommitPatch from "@/components/CommitPatch"; +import Loading from "vue-loading-overlay"; +import { ref } from "vue"; +import { format } from "date-fns"; + +export default { + name: "RepositoryCommit", + components: { + BaseBreadcrumb, + Loading, + CommitPatch + }, + setup() { + const commit_data = ref({}); + const is_loading = ref(true); + + const fetchCommit = async(repository, commit) => { + const data = await (await fetch(`${window.location.protocol}//${window.location.host}/api/v1/repos/${repository}/log/${commit}`)).json(); + data.data.date = format(new Date(data.data.date), "yyyy-MM-dd hh:mm"); + commit_data.value = data.data; + is_loading.value = false; + }; + + return { commit_data, is_loading, fetchCommit }; + }, + created() { + this.fetchCommit(this.$router.currentRoute._rawValue.params.repo, this.$router.currentRoute._rawValue.params.commit); + } +}; +</script> + +<style lang="scss"> +@use "../scss/colors"; +@import "../scss/bootstrap"; + +@import "~bootstrap/scss/tables"; + +@import "~vue-loading-overlay/dist/vue-loading.css"; +@import "~highlight.js/scss/srcery.scss"; + +#commit-info { + margin-bottom: 2rem; + tbody tr { + td { + padding: 0px; + padding-right: 10px; + } + } +} + +.commit-patch { + margin-bottom: 50px; + table { + padding-top: 15px; + tbody tr td { + padding: 0px; + padding-left: 8px; + vertical-align: top; + &:nth-child(2) { + padding-right: 7px; + } + &:nth-child(3) { + padding-right: 15px; + } + } + } +} + +.commit-patch-add-del { + margin-left: auto; + margin-right: 23px; + span { + margin-right: 10px !important; + font-weight: 700; + &:nth-child(1) { + color: colors.$new; + } + } +} + +.commit-patch-header { + display: flex; + background-color: lighten(#000000, 14%); + padding: 10px; + span { + margin-right: 30px; + &:nth-child(2) { + color: colors.$danger; + } + } +} + +.commit-info-title { + color: colors.$secondary; + padding-right: 30px; + width: 20px; +} + +.patch-too-large { + font-weight: 600; +} + +.commit-file-pos-change { + color: colors.$text-gray; +} + +.commit-file-no-newline { + color: colors.$text-gray; +} + +.line-new { + color: colors.$new; +} +.line-deleted { + color: colors.$danger; +} + +.line-unchanged { + color: colors.$text-gray; +} + +[patch-line-col-unsel]::before { + content: attr(patch-line-col-unsel); +} + +.line-highlight-new { + border-right: 1px solid colors.$new; +} +.line-highlight-deleted { + border-right: 1px solid colors.$danger; +} + +code { + white-space: pre-wrap; + word-wrap: anywhere; +} + +.row { + height: 100%; +} + +@include media-breakpoint-down(sm) { + .commit-patch table tbody tr td { + padding-left: 4px; + &:nth-child(2) { + padding-right: 4px; + } + &:nth-child(3) { + padding-right: 5px; + } + } +} +</style> |