From db9a77577ae5fb9e9ca9af2addb4b1fc0f4bbd39 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Sat, 16 Jul 2022 10:30:09 +0200
Subject: [PATCH] Create and load an update indicator component
---
.../static/js/vue/alsijil/LoadComponents.js | 2 +
.../vue/components/alsijil/UpdateIndicator.js | 73 +++++++++++++++++++
2 files changed, 75 insertions(+)
create mode 100644 aleksis/apps/alsijil/static/js/vue/components/alsijil/UpdateIndicator.js
diff --git a/aleksis/apps/alsijil/static/js/vue/alsijil/LoadComponents.js b/aleksis/apps/alsijil/static/js/vue/alsijil/LoadComponents.js
index 6c71a3d7b..a42b20b0a 100644
--- a/aleksis/apps/alsijil/static/js/vue/alsijil/LoadComponents.js
+++ b/aleksis/apps/alsijil/static/js/vue/alsijil/LoadComponents.js
@@ -1,7 +1,9 @@
+import UpdateIndicator from "../components/alsijil/UpdateIndicator.js";
import PersonalNotes from "../components/alsijil/PersonalNotes.js";
import LessonDocumentation from "../components/alsijil/LessonDocumentation.js";
import CourseBook from '../components/alsijil/CourseBook.js'
+Vue.component(UpdateIndicator.name, UpdateIndicator);
Vue.component(PersonalNotes.name, PersonalNotes);
Vue.component(LessonDocumentation.name, LessonDocumentation);
Vue.component(CourseBook.name, CourseBook);
\ No newline at end of file
diff --git a/aleksis/apps/alsijil/static/js/vue/components/alsijil/UpdateIndicator.js b/aleksis/apps/alsijil/static/js/vue/components/alsijil/UpdateIndicator.js
new file mode 100644
index 000000000..acd78aab5
--- /dev/null
+++ b/aleksis/apps/alsijil/static/js/vue/components/alsijil/UpdateIndicator.js
@@ -0,0 +1,73 @@
+import {ERROR, SAVED, UPDATING, CHANGES} from "../../alsijil/UpdateStatuses.js";
+
+export default {
+ created() {
+ this.ERROR = ERROR;
+ this.SAVED = SAVED;
+ this.UPDATING = UPDATING;
+ this.CHANGES = CHANGES;
+ },
+ name: "update-indicator",
+ emits: ["manual-update"],
+ props: ["status"],
+ computed: {
+ text() {
+ switch (this.status) {
+ case SAVED:
+ return this.$root.django.gettext("All changes are processed.");
+ case UPDATING:
+ return this.$root.django.gettext("Changes are being synced.");
+ case CHANGES:
+ return this.$root.django.gettext("You have unsaved changes. Click to save immediately.");
+ default:
+ return this.$root.django.gettext("There has been an error processing the latest changes.");
+ }
+ },
+ color() {
+ switch (this.status) {
+ case SAVED:
+ return "success";
+ case CHANGES:
+ return "secondary";
+ case UPDATING:
+ return "secondary";
+ default:
+ return "error";
+ }
+ },
+ icon() {
+ switch (this.status) {
+ case SAVED:
+ return "mdi-check-circle-outline";
+ case CHANGES:
+ return "mdi-dots-horizontal";
+ default:
+ return "mdi-alert-outline";
+ }
+ }
+ },
+ template: `
+ <v-tooltip bottom>
+ <template v-slot:activator="{ on, attrs }">
+ <div
+ v-bind="attrs"
+ v-on="on"
+ >
+ <v-icon
+ v-if="status !== UPDATING"
+ @click="() => {status === SAVED ? null : $emit('manual-update')}"
+ :color="color"
+ >
+ {{ icon }}
+ </v-icon>
+ <v-progress-circular
+ v-else
+ indeterminate
+ :color="color"
+ ></v-progress-circular>
+ </div>
+ </template>
+ <span>{{ text }}</span>
+ </v-tooltip>
+ `,
+}
\ No newline at end of file
--
GitLab