diff options
| -rw-r--r-- | package-lock.json | 18 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | src/components/RepositoryHeader.vue | 2 | ||||
| -rw-r--r-- | src/views/RepositoryCommit.vue | 14 | ||||
| -rw-r--r-- | src/views/RepositoryLog.vue | 18 |
5 files changed, 45 insertions, 8 deletions
diff --git a/package-lock.json b/package-lock.json index 266ea36..2787ff0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "js-yaml": "^4.1.0", "nodegit": "^0.27.0", "vue": "^3.0.11", + "vue-loading-overlay": "^4.0.2", "vue-router": "^4.0.8" }, "devDependencies": { @@ -17057,6 +17058,17 @@ "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "dev": true }, + "node_modules/vue-loading-overlay": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/vue-loading-overlay/-/vue-loading-overlay-4.0.2.tgz", + "integrity": "sha512-2QNBeNrrzzYHFqe5hAjMXsWyy5FQ4f5xmqn6CwIbf54WoRtTu6tGlCAvHsgNnZQxTh8PG+Zo6244pglCkdXglg==", + "engines": { + "node": ">=10.13.0" + }, + "peerDependencies": { + "vue": "^3.0.0" + } + }, "node_modules/vue-router": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.8.tgz", @@ -30644,6 +30656,12 @@ } } }, + "vue-loading-overlay": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/vue-loading-overlay/-/vue-loading-overlay-4.0.2.tgz", + "integrity": "sha512-2QNBeNrrzzYHFqe5hAjMXsWyy5FQ4f5xmqn6CwIbf54WoRtTu6tGlCAvHsgNnZQxTh8PG+Zo6244pglCkdXglg==", + "requires": {} + }, "vue-router": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.8.tgz", diff --git a/package.json b/package.json index 253769d..8db9404 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "js-yaml": "^4.1.0", "nodegit": "^0.27.0", "vue": "^3.0.11", + "vue-loading-overlay": "^4.0.2", "vue-router": "^4.0.8" }, "devDependencies": { diff --git a/src/components/RepositoryHeader.vue b/src/components/RepositoryHeader.vue index db1ab1e..b0db4f9 100644 --- a/src/components/RepositoryHeader.vue +++ b/src/components/RepositoryHeader.vue @@ -29,7 +29,7 @@ export default { }, setup(props) { - const state = reactive({ title: String, about: String }); + const state = reactive({ title: "", about: "" }); watch(() => { diff --git a/src/views/RepositoryCommit.vue b/src/views/RepositoryCommit.vue index 1fc1ea0..283ed69 100644 --- a/src/views/RepositoryCommit.vue +++ b/src/views/RepositoryCommit.vue @@ -1,7 +1,7 @@ <template> <RepositoryNavbar active-page="log" /> <div class="row mx-0"> - <div class="col ms-2 ps-4 ps-sm-5 fs-5"> + <div class="col ms-2 ps-4 ps-sm-5 fs-5 vld-parent"> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"> @@ -14,6 +14,10 @@ </li> </ol> </nav> + <Loading + v-model:active="is_loading" :height="24" + :width="24" color="#ffffff" + :opacity="0" /> <table id="commit-info" class="table table-dark"> <tbody> <tr> @@ -48,6 +52,8 @@ <script> import RepositoryNavbar from "../components/RepositoryNavbar"; import CommitPatch from "../components/CommitPatch"; +import Loading from "vue-loading-overlay"; +import 'vue-loading-overlay/dist/vue-loading.css'; import { watch, reactive, toRefs } from "vue"; import { format } from "date-fns"; @@ -55,7 +61,8 @@ export default { name: "RepositoryCommit", components: { RepositoryNavbar, - CommitPatch + CommitPatch, + Loading }, props: { repository: { @@ -69,7 +76,7 @@ export default { }, setup(props) { - const state = reactive({ commit_data: {} }); + const state = reactive({ commit_data: {}, is_loading: true }); watch(() => { @@ -79,6 +86,7 @@ export default { { data["data"]["date"] = format(new Date(data["data"]["date"]), "yyyy-MM-dd hh:mm"); state.commit_data = data["data"] + state.is_loading = false; }); }); diff --git a/src/views/RepositoryLog.vue b/src/views/RepositoryLog.vue index da93624..399fc78 100644 --- a/src/views/RepositoryLog.vue +++ b/src/views/RepositoryLog.vue @@ -1,6 +1,10 @@ <template> <RepositoryNavbar active-page="log" /> - <div class="row mx-0"> + <div class="row mx-0 vld-parent"> + <Loading + v-model:active="is_loading" :height="24" + :width="24" color="#ffffff" + :opacity="0" /> <div class="col ms-4 ps-4 ps-sm-5 mt-3"> <table id="log" class="table table-dark fs-5"> <thead> @@ -42,13 +46,16 @@ <script> import RepositoryNavbar from "../components/RepositoryNavbar"; +import Loading from "vue-loading-overlay"; +import 'vue-loading-overlay/dist/vue-loading.css'; import { format } from "date-fns"; import { watch, reactive, toRefs } from "vue"; export default { name: "RepositoryLog", components: { - RepositoryNavbar + RepositoryNavbar, + Loading }, props: { repository: { @@ -64,13 +71,16 @@ export default { }, setup(props) { - const state = reactive({ commits: {} }); + const state = reactive({ commits: {}, is_loading: true }); watch(() => { fetch(`http://localhost:1337/api/v1/repos/${props.repository}/log`) .then((res) => res.json()) - .then((data) => state.commits = data["data"]); + .then((data) => { + state.commits = data["data"]; + state.is_loading = false; + }); }); return { |