Skip to content
Snippets Groups Projects
Commit 784b6359 authored by Hangzhi Yu's avatar Hangzhi Yu
Browse files

Reformat

parent 6469ef1a
No related branches found
No related tags found
1 merge request!329Introduce substitution to do list
Pipeline #181519 failed
Stage: prepare
Stage: test
Stage: build
Stage: publish
Stage: docker
Stage: deploy
Hide whitespace changes
Inline Side-by-side
Showing
with 75 additions and 78 deletions
aleksis/apps/chronos/frontend/components/SubstitutionOverview.vue
+ 9
− 9
View file @ 784b6359
......@@ -54,27 +54,27 @@ import dateSortedIteratorMixin from "../mixins/dateSortedIteratorMixin.js";
<substitution-day
v-for="{ date, itemsOfDay, first, last } in groupItemsByDay(items)"
v-intersect="{
handler: intersectHandler(date, first, last),
options: {
rootMargin: '-' + topMargin + 'px 0px 0px 0px',
threshold: [0, 1],
},
}"
handler: intersectHandler(date, first, last),
options: {
rootMargin: '-' + topMargin + 'px 0px 0px 0px',
threshold: [0, 1],
},
}"
:date="date"
:substitutions="itemsOfDay"
:lastQuery="lastQuery"
:focus-on-mount="initDate && (initDate.toMillis() === date.toMillis())"
:focus-on-mount="initDate && initDate.toMillis() === date.toMillis()"
@init="transition"
:key="'day-' + date"
ref="days"
/>
/>
<date-select-footer
:value="currentDate"
@input="gotoDate"
@prev="gotoPrev"
@next="gotoNext"
/>
/>
</template>
</c-r-u-d-iterator>
</template>
......
aleksis/apps/chronos/frontend/components/substitutions/LessonInformation.vue
+ 5
− 12
View file @ 784b6359
......@@ -17,18 +17,11 @@ import { DateTime } from "luxon";
</time>
</div>
</div>
<span
class="text-subtitle-1 font-weight-medium"
>
<span class="text-subtitle-1 font-weight-medium">
{{ course?.name }}
</span>
<div
class="d-flex align-center flex-wrap gap justify-center"
>
<subject-chip
v-if="subject"
:subject="subject"
/>
<div class="d-flex align-center flex-wrap gap justify-center">
<subject-chip v-if="subject" :subject="subject" />
<!--<subject-chip-->
<!-- v-if="-->
<!-- documentation?.lessonEvent?.amends?.subject &&-->
......@@ -50,7 +43,7 @@ export default {
lesson: {
type: Object,
required: true,
}
},
},
methods: {
toDateTime(dateString) {
......@@ -74,7 +67,7 @@ export default {
? this.lesson.amends.course
: undefined;
},
}
},
};
</script>
......
aleksis/apps/chronos/frontend/components/substitutions/SubstitutionCard.vue
+ 11
− 20
View file @ 784b6359
......@@ -15,12 +15,10 @@ import createOrPatchMixin from "aleksis.core/mixins/createOrPatchMixin.js";
<v-card-text
class="full-width main-body pa-2"
:class="{
'vertical': $vuetify.breakpoint.mobile,
vertical: $vuetify.breakpoint.mobile,
}"
>
<lesson-information
:lesson="substitution"
/>
<lesson-information :lesson="substitution" />
<v-spacer />
......@@ -36,25 +34,20 @@ import createOrPatchMixin from "aleksis.core/mixins/createOrPatchMixin.js";
>
<template #prepend-inner>
<v-chip
v-for="teacher in teachersWithStatus(
substitution,
).filter((t) => t.status === 'removed')"
v-for="teacher in teachersWithStatus(substitution).filter(
(t) => t.status === 'removed',
)"
class="text-decoration-line-through text--secondary mb-2"
>{{ teacher.fullName }}</v-chip
>
</template>
</v-autocomplete>
<delete-button
color="red white--text"
outlined
@click="toggleCancel"
>{{
substitution.cancelled
? $t("chronos.substitutions.overview.cancel.decancel")
: $t("chronos.substitutions.overview.cancel.cancel")
}}</delete-button
>
<delete-button color="red white--text" outlined @click="toggleCancel">{{
substitution.cancelled
? $t("chronos.substitutions.overview.cancel.decancel")
: $t("chronos.substitutions.overview.cancel.cancel")
}}</delete-button>
</v-card-text>
<v-divider />
<!--<v-card-actions>-->
......@@ -132,9 +125,7 @@ export default {
amendableTeachers: gqlPersons,
},
mounted() {
this.teachers = this.substitution.teachers.map(
(teacher) => teacher.id,
);
this.teachers = this.substitution.teachers.map((teacher) => teacher.id);
},
};
</script>
......
aleksis/apps/chronos/frontend/components/substitutions/SubstitutionDay.vue
+ 9
− 8
View file @ 784b6359
<script setup>
import SubstitutionCard from "./SubstitutionCard.vue";
import {
patchAmendLessonsWithAmends,
} from "../amendLesson.graphql";
import { patchAmendLessonsWithAmends } from "../amendLesson.graphql";
</script>
<template>
......@@ -13,7 +11,10 @@ import {
$d(date, "dateWithWeekday")
}}</v-subheader>
<v-list max-width="100%" class="pt-0 mt-n1">
<v-list-item v-for="substitution in substitutions" :key="'substitution-' + substitution.id">
<v-list-item
v-for="substitution in substitutions"
:key="'substitution-' + substitution.id"
>
<substitution-card
:substitution="substitution"
:affected-query="lastQuery"
......@@ -53,21 +54,21 @@ export default {
gqlPatchMutation: patchAmendLessonsWithAmends,
};
},
emits: ['init'],
emits: ["init"],
methods: {
focus(how) {
this.$el.scrollIntoView({
behavior: how,
block: "start",
inline: "nearest"
inline: "nearest",
});
console.log('focused @', this.date.toISODate());
console.log("focused @", this.date.toISODate());
},
},
mounted() {
if (this.focusOnMount) {
this.$nextTick(this.focus("instant"));
this.$emit('init');
this.$emit("init");
}
},
};
......
aleksis/apps/chronos/frontend/mixins/dateSortedIteratorMixin.js
+ 41
− 29
View file @ 784b6359
......@@ -35,12 +35,12 @@ export default {
methods: {
resetDate(toDate) {
// Assure current date
console.log('Resetting date range', this.$route.hash);
console.log("Resetting date range", this.$route.hash);
this.currentDate = toDate || this.$route.hash?.substring(1);
if (!this.currentDate) {
console.log('Set default date');
console.log("Set default date");
this.setDate(DateTime.now().toISODate());
}
}
const date = DateTime.fromISO(this.currentDate);
this.initDate = date;
......@@ -48,15 +48,15 @@ export default {
this.dateEnd = date.plus({ days: this.dayIncrement }).toISODate();
},
transition() {
this.initDate = false
this.ready = true
this.initDate = false;
this.ready = true;
},
groupItemsByDay(items) {
// => {dt: {date: dt, itemsOfDay: doc ...} ...}
const itemsByDay = items.reduce((byDay, item) => {
// This works with dummy. Does actual doc have dateStart instead?
const day = DateTime.fromISO(item.datetimeStart).startOf("day");
byDay[day] ??= {date: day, itemsOfDay: []};
byDay[day] ??= { date: day, itemsOfDay: [] };
byDay[day].itemsOfDay.push(item);
return byDay;
}, {});
......@@ -64,7 +64,7 @@ export default {
// sorting is necessary since backend can send items unordered
return Object.keys(itemsByDay)
.sort()
.map((key, idx, {length}) => {
.map((key, idx, { length }) => {
const day = itemsByDay[key];
day.first = idx === 0;
const lastIdx = length - 1;
......@@ -73,7 +73,7 @@ export default {
});
},
fetchMore(from, to, then) {
console.log('fetching', from, to);
console.log("fetching", from, to);
this.lastQuery.fetchMore({
variables: {
dateStart: from,
......@@ -81,10 +81,10 @@ export default {
},
// Transform the previous result with new data
updateQuery: (previousResult, { fetchMoreResult }) => {
console.log('Received more');
console.log("Received more");
then();
return { items: previousResult.items.concat(fetchMoreResult.items) };
}
},
});
},
setDate(date) {
......@@ -92,7 +92,7 @@ export default {
if (!this.hashUpdater) {
this.hashUpdater = window.requestIdleCallback(() => {
if (!(this.$route.hash.substring(1) === this.currentDate)) {
this.$router.replace({ hash: this.currentDate })
this.$router.replace({ hash: this.currentDate });
}
this.hashUpdater = false;
});
......@@ -101,7 +101,8 @@ export default {
fixScrollPos(height, top) {
this.$nextTick(() => {
if (height < document.documentElement.scrollHeight) {
document.documentElement.scrollTop = document.documentElement.scrollHeight - height + top;
document.documentElement.scrollTop =
document.documentElement.scrollHeight - height + top;
this.ready = true;
} else {
// Update top, could have changed in the meantime.
......@@ -114,28 +115,35 @@ export default {
return (entries) => {
const entry = entries[0];
if (entry.isIntersecting) {
if ((entry.boundingClientRect.top <= this.topMargin) || first) {
console.log('@ ', date.toISODate());
if (entry.boundingClientRect.top <= this.topMargin || first) {
console.log("@ ", date.toISODate());
this.setDate(date.toISODate());
}
if (once && this.ready && first) {
console.log('load up', date.toISODate());
console.log("load up", date.toISODate());
this.ready = false;
this.fetchMore(date.minus({ days: this.dayIncrement }).toISODate(),
date.minus({ days: 1 }).toISODate(),
() => {
this.fixScrollPos(document.documentElement.scrollHeight,
document.documentElement.scrollTop);
});
this.fetchMore(
date.minus({ days: this.dayIncrement }).toISODate(),
date.minus({ days: 1 }).toISODate(),
() => {
this.fixScrollPos(
document.documentElement.scrollHeight,
document.documentElement.scrollTop,
);
},
);
once = false;
} else if (once && this.ready && last) {
console.log('load down', date.toISODate());
console.log("load down", date.toISODate());
this.ready = false;
this.fetchMore(date.plus({ days: 1 }).toISODate(),
date.plus({ days: this.dayIncrement }).toISODate(),
() => { this.ready = true });
this.fetchMore(
date.plus({ days: 1 }).toISODate(),
date.plus({ days: this.dayIncrement }).toISODate(),
() => {
this.ready = true;
},
);
once = false;
}
}
......@@ -163,15 +171,19 @@ export default {
.find((date2) => date2 > date);
},
gotoDate(date) {
const present = this.$refs.days
.find((day) => day.date.toISODate() === date);
const present = this.$refs.days.find(
(day) => day.date.toISODate() === date,
);
if (present) {
// React immediatly -> smoother navigation
// Also intersect handler does not always react to scrollIntoView
this.setDate(date);
present.focus("smooth");
} else if (!this.findPrev(DateTime.fromISO(date)) || !this.findNext(DateTime.fromISO(date))) {
} else if (
!this.findPrev(DateTime.fromISO(date)) ||
!this.findNext(DateTime.fromISO(date))
) {
this.resetDate(date);
}
},
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment