Skip to content

Commit

Permalink
Merge pull request #4029 from manuelmeister/feature/day-responsible-d…
Browse files Browse the repository at this point in the history 
…ashboard

Implement day responsibles on dashboard
  • Loading branch information
@manuelmeister
manuelmeister committed Nov 10, 2023
2 parents 4634a31 + 6079f09 commit fca653d
Show file tree
Hide file tree
Showing 3 changed files with 193 additions and 61 deletions.
117 changes: 91 additions & 26 deletions frontend/src/components/dashboard/ActivityRow.vue
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,97 @@
<template>
<tr class="row">
<th style="text-align: left" class="tabular-nums" scope="row">
<tr class="row" :class="{ 'row--skeleton': scheduleEntry._meta.loading }">
<th class="tabular-nums text-left" scope="row">
<TextAlignBaseline
><span class="smaller">{{ scheduleEntry.number }}</span></TextAlignBaseline
>
><span v-if="!scheduleEntry._meta.loading" class="smaller">{{
scheduleEntry.number
}}</span>
<v-skeleton-loader v-else type="text" width="2ch" class="mb-0 my-6px" />
</TextAlignBaseline>
<br />
<CategoryChip small dense :category="category" class="d-sm-none" />
<CategoryChip
v-if="!scheduleEntry._meta.loading"
small
dense
:category="category"
class="d-sm-none"
/>
<v-skeleton-loader
v-else
type="text"
width="3ch"
height="20"
class="d-sm-none v-skeleton-loader--inherit-size rounded-pill"
/>
</th>
<td class="d-none d-sm-table-cell">
<CategoryChip small dense :category="category" />
<CategoryChip
v-if="!scheduleEntry._meta.loading"
small
dense
:category="category"
/>
<v-skeleton-loader
v-else
type="text"
width="3ch"
height="20"
class="v-skeleton-loader--no-margin v-skeleton-loader--inherit-size rounded-pill mt-2px"
/>
</td>
<td class="nowrap">
<td v-if="!scheduleEntry._meta.loading" class="nowrap">
{{ start }}<br />
<span class="e-subtitle">{{ duration }}</span>
</td>
<td style="width: 100%" class="contentrow">
<span style="display: inline-block">
<router-link
:to="routerLink"
class="text-decoration-none text-decoration-hover-underline black--text font-weight-medium d-block"
>
{{ title }}
</router-link>
</span>

<span
v-if="$vuetify.breakpoint.mdAndUp"
class="e-subtitle"
style="font-size: 0.7em"
<td v-else class="nowrap">
<v-skeleton-loader type="text" width="6ch" class="my-6px" />
<v-skeleton-loader type="text" width="4ch" />
</td>
<td v-if="!scheduleEntry._meta.loading" class="w-100 contentrow">
<router-link
:to="routerLink"
class="text-decoration-none text-decoration-hover-underline black--text font-weight-medium"
>
{{ title }}
</router-link>

<span v-if="$vuetify.breakpoint.mdAndUp" class="e-subtitle e-subtitle--smaller">
{{ progressLabel }}
</span>

<br />
<span class="e-subtitle">{{ location }}</span>
<template v-if="location">
<br />
<span class="e-subtitle">{{ location }}</span>
</template>

<template v-if="!$vuetify.breakpoint.mdAndUp">
<br />
<span class="e-subtitle" style="font-size: 0.7em">
<span class="e-subtitle e-subtitle--smaller">
{{ progressLabel }}
</span>
</template>
</td>
<td v-else class="w-100 contentrow">
<v-skeleton-loader type="text" width="20ch" class="my-6px" />
<v-skeleton-loader
type="text"
width="15ch"
class="v-skeleton-loader--no-margin my-6px"
/>
</td>
<td class="contentrow avatarrow overflow-visible">
<AvatarRow :camp-collaborations="collaborators" max-size="28" class="ml-auto" />
<AvatarRow
v-if="!scheduleEntry._meta.loading"
:camp-collaborations="collaborators"
max-size="28"
class="ml-auto"
/>
<v-skeleton-loader
v-else
type="avatar"
width="28"
height="28"
class="v-skeleton-loader--inherit-size"
/>
</td>
</tr>
</template>
Expand All @@ -59,7 +107,7 @@ export default {
components: { CategoryChip, AvatarRow, TextAlignBaseline },
mixins: [dateHelperUTCFormatted],
props: {
scheduleEntry: { type: Object, required: true },
scheduleEntry: { type: Object, default: () => ({ _meta: { loading: true } }) },
},
computed: {
collaborators() {
Expand Down Expand Up @@ -105,6 +153,10 @@ export default {
vertical-align: baseline;
}
.row--skeleton {
vertical-align: top;
}
tr + tr :is(td, th) {
border-top: 1px solid #ddd;
}
Expand Down Expand Up @@ -133,6 +185,10 @@ tr + tr :is(td, th) {
color: #666;
}
.e-subtitle--smaller {
font-size: 0.7em;
}
.nowrap {
white-space: nowrap;
}
Expand All @@ -141,6 +197,15 @@ tr + tr :is(td, th) {
font-size: 0.75em;
}
.mt-2px {
margin-top: 2px;
}
.my-6px {
margin-top: 6px;
margin-bottom: 6px;
}
.text-decoration-hover-underline:hover {
text-decoration: underline !important;
}
Expand Down
7 changes: 7 additions & 0 deletions frontend/src/scss/global.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,13 @@ body {
.v-skeleton-loader__table-tfoot {
background: none !important;
}
.v-skeleton-loader--inherit-size .v-skeleton-loader__bone {
height: inherit !important;
width: inherit !important;
}
.v-skeleton-loader--no-margin .v-skeleton-loader__bone {
margin-bottom: 0 !important;
}
.v-btn--outlined:before {
opacity: 0.08 !important;
}
Expand Down
130 changes: 95 additions & 35 deletions frontend/src/views/camp/Dashboard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,13 @@
v-model="showOnlyMyActivities"
:label="$tc('views.camp.dashboard.onlyMyActivities')"
/>
<v-skeleton-loader v-else type="button" />
<v-skeleton-loader
v-else
type="button"
class="v-skeleton-loader--inherit-size"
height="32"
width="160px"
/>
<FilterDivider />
<template v-if="!loading">
<SelectFilter
Expand Down Expand Up @@ -86,8 +92,24 @@
</v-chip>
</template>
<template v-else>
<v-skeleton-loader type="button" />
<v-skeleton-loader type="button" />
<v-skeleton-loader
type="button"
class="v-skeleton-loader--inherit-size"
height="32"
width="150"
/>
<v-skeleton-loader
type="button"
class="v-skeleton-loader--inherit-size"
height="32"
width="130"
/>
<v-skeleton-loader
type="button"
class="v-skeleton-loader--inherit-size"
height="32"
width="100"
/>
</template>
</div>
<template v-if="!loading && !scheduleEntriesLoading">
Expand Down Expand Up @@ -127,9 +149,23 @@
:key="dayUri"
:aria-labelledby="dayUri + 'th'"
>
<tr>
<tr class="day-header__row">
<th :id="dayUri + 'th'" colspan="5" scope="colgroup" class="day-header">
{{ dateLong(days[dayUri].start) }}
<div class="day-header__inner">
{{ dateLong(days[dayUri].start) }}
<AvatarRow
v-if="!days[dayUri].dayResponsibles()._meta.loading"
:camp-collaborations="dayResponsibleCollaborators[dayUri]"
max-size="20"
/>
<v-skeleton-loader
v-else
type="avatar"
width="20"
height="20"
class="v-skeleton-loader--inherit-size"
/>
</div>
</th>
</tr>
<ActivityRow
Expand All @@ -151,39 +187,29 @@
</p>
</template>
<table v-else class="mx-4 mt-6 mb-3 d-sr-none" style="border-collapse: collapse">
<caption>
<v-skeleton-loader type="heading" class="d-block mb-3" width="45ch" />
<caption class="text-left">
<v-skeleton-loader type="heading" max-width="45ch" />
</caption>
<tbody>
<tr>
<tr class="day-header__row">
<th colspan="5" class="day-header">
<v-skeleton-loader type="text" width="15ch" />
</th>
</tr>
<tr
v-for="index in 3"
:key="index"
style="border-top: 1px solid #ddd; vertical-align: top"
>
<th class="pt-1">
<v-skeleton-loader type="text" width="2ch" />
<v-skeleton-loader type="text" width="3ch" class="d-sm-none" />
<div class="day-header__inner">
<v-skeleton-loader
type="text"
width="15ch"
class="v-skeleton-loader--no-margin"
style="margin: 5px 0"
/>
<v-skeleton-loader
type="avatar"
width="20"
height="20"
class="v-skeleton-loader--inherit-size"
/>
</div>
</th>
<td class="d-none d-sm-table-cell pl-2 pt-1">
<v-skeleton-loader type="text" width="3ch" />
</td>
<td class="nowrap pl-2 pt-1">
<v-skeleton-loader type="text" width="6ch" />
<v-skeleton-loader type="text" width="4ch" />
</td>
<td style="width: 100%" class="pl-2 pb-2 pt-1">
<v-skeleton-loader type="text" width="20ch" />
<v-skeleton-loader type="text" width="15ch" />
</td>
<td class="contentrow avatarrow overflow-visible pt-1">
<v-skeleton-loader type="heading" width="55" />
</td>
</tr>
<ActivityRow v-for="index in 3" :key="index" />
</tbody>
</table>
</div>
Expand All @@ -209,6 +235,7 @@ import {
transformValuesToHalId,
processRouteQuery,
} from '@/helpers/querySyncHelper'
import AvatarRow from '@/components/generic/AvatarRow.vue'
function filterEquals(arr1, arr2) {
return JSON.stringify(arr1) === JSON.stringify(arr2)
Expand All @@ -217,6 +244,7 @@ function filterEquals(arr1, arr2) {
export default {
name: 'Dashboard',
components: {
AvatarRow,
TextAlignBaseline,
FilterDivider,
ActivityRow,
Expand Down Expand Up @@ -287,6 +315,11 @@ export default {
'_meta.self'
)
},
dayResponsibleCollaborators() {
return mapValues(this.days, (day) =>
day.dayResponsibles().items.map((item) => item.campCollaboration())
)
},
filteredScheduleEntries() {
return this.scheduleEntries.filter(
(scheduleEntry) =>
Expand Down Expand Up @@ -398,12 +431,39 @@ export default {
}
</script>
<style scoped>
<style scoped lang="scss">
.day-header {
z-index: 1;
position: sticky;
top: calc(48px - 1px - 0.75rem);
@media #{map-get($display-breakpoints, 'sm-and-up')} {
top: calc(0px - 1px - 0.75rem);
}
@media #{map-get($display-breakpoints, 'md-and-up')} {
top: calc(64px - 1px - 0.75rem);
}
padding-bottom: 0.25rem;
padding-top: 0.75rem;
font-weight: 400;
color: #666;
font-size: 0.9rem;
text-align: left;
}
.day-header__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0 0.5rem;
color: #5c6061;
background: #eceff1;
margin: 0 -16px;
padding: 4px 16px;
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
}
.day-header__row + tr > :is(th, td) {
border-top: 0;
}
</style>

0 comments on commit fca653d

Please sign in to comment.