-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
- Loading branch information
Showing
17 changed files
with
2,992 additions
and
168 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
<template> | ||
<template v-if="isLoading"> | ||
<VContainer class="loader"> | ||
<VSkeletonLoader | ||
ref="skeleton-loader" | ||
type="date-picker-days" | ||
class="mt-6" | ||
/> | ||
</VContainer> | ||
</template> | ||
<template v-else-if="isEmpty"> | ||
<VCustomEmptyState | ||
ref="rooms-empty-state" | ||
image="rooms-empty-state" | ||
:title="t('pages.rooms.active.emptyState')" | ||
class="mt-16" | ||
/> | ||
</template> | ||
<template v-else> | ||
<div class="room-tile-grid"> | ||
<RoomTile | ||
v-for="room in rooms" | ||
:key="room.id" | ||
:room="room" | ||
class="room-tile" | ||
/> | ||
</div> | ||
</template> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import { useRoomsState } from "./data/Rooms.state"; | ||
import { onMounted } from "vue"; | ||
import RoomTile from "./RoomTile.vue"; | ||
import VCustomEmptyState from "@/components/molecules/vCustomEmptyState.vue"; | ||
import { useI18n } from "vue-i18n"; | ||
const { t } = useI18n(); | ||
const { rooms, isLoading, isEmpty, fetchRooms } = useRoomsState(); | ||
onMounted(() => { | ||
fetchRooms(); | ||
}); | ||
</script> | ||
|
||
<style lang="scss"> | ||
@import "@/styles/settings.scss"; | ||
.room-tile-grid { | ||
@media #{map-get($display-breakpoints, "sm-and-up")} { | ||
display: flex; | ||
flex-wrap: wrap; | ||
} | ||
margin-left: -20px; | ||
margin-right: -20px; | ||
} | ||
.room-tile { | ||
padding-left: 20px; | ||
padding-right: 20px; | ||
margin-bottom: 20px; | ||
@media #{map-get($display-breakpoints, "sm-and-up")} { | ||
flex: 0 0 50%; | ||
} | ||
@media #{map-get($display-breakpoints, "md-and-up")} { | ||
flex: 0 0 33.3333%; | ||
} | ||
@media #{map-get($display-breakpoints, "lg-and-up")} { | ||
flex: 0 0 25%; | ||
} | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,76 @@ | ||
<template> | ||
<div> | ||
<RouterLink :to="roomPath" class="room-link"> | ||
<div | ||
class="room-icon" | ||
:aria-label="iconAriaLabel" | ||
:style="{ 'background-color': iconColor }" | ||
> | ||
<span class="text-h3 text-white" data-testid="room-short-title"> | ||
{{ room.shortTitle }} | ||
</span> | ||
</div> | ||
<div class="room-title mb-2 mt-2">{{ room.title }}</div> | ||
</RouterLink> | ||
</div> | ||
</template> | ||
<script setup lang="ts"> | ||
import { Room } from "@/types/room/Room"; | ||
import { computed, PropType } from "vue"; | ||
import { useI18n } from "vue-i18n"; | ||
const props = defineProps({ | ||
room: { | ||
type: Object as PropType<Room>, | ||
required: true, | ||
}, | ||
}); | ||
const { t } = useI18n(); | ||
const roomPath = computed(() => `/rooms/${props.room.id}`); | ||
const iconColor = computed(() => props.room.displayColor); | ||
const iconAriaLabel = computed(() => { | ||
return `${t("common.labels.room")} ${props.room.title}`; | ||
}); | ||
</script> | ||
|
||
<style lang="scss" scoped> | ||
@import "@/utils/multiline-ellipsis.scss"; | ||
a.room-link { | ||
display: block; | ||
text-decoration: none; | ||
text-align: center; | ||
color: rgba(var(--v-theme-primary)); | ||
} | ||
.room-icon { | ||
width: 5em; | ||
height: 5em; | ||
border-radius: 8px; | ||
user-select: none; | ||
// taken from VAvatar.sass | ||
flex: none; | ||
align-items: center; | ||
display: inline-flex; | ||
justify-content: center; | ||
line-height: normal; | ||
overflow: hidden; | ||
position: relative; | ||
text-align: center; | ||
transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); | ||
transition-property: width, height; | ||
vertical-align: middle; | ||
} | ||
.room-title { | ||
@include excerpt( | ||
$font-size: calc(var(--space-base-vuetify) * 4), | ||
$line-height: var(--line-height-lg), | ||
$lines-to-show: 3 | ||
); | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import { Room } from "@/types/room/Room"; | ||
import { delay } from "@/utils/helpers"; | ||
import { computed, ref } from "vue"; | ||
import { roomsData } from "./rooms-mock-data"; | ||
|
||
export const useRoomsState = () => { | ||
const rooms = ref<Room[]>([]); | ||
const isLoading = ref(true); | ||
|
||
const fetchRooms = async () => { | ||
await delay(1000); | ||
// TODO call API + do sorting there | ||
rooms.value = roomsData.sort((r1, r2) => (r1.title > r2.title ? 1 : -1)); | ||
isLoading.value = false; | ||
}; | ||
|
||
const isEmpty = computed(() => { | ||
return rooms.value.length === 0; | ||
}); | ||
|
||
return { rooms, isLoading, isEmpty, fetchRooms }; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
import { Room } from "@/types/room/Room"; | ||
|
||
// TODO replace with API call | ||
export const roomsData: Room[] = [ | ||
{ | ||
id: "0000dcfbfb5c7a3f00bf21cd", | ||
title: "Maschinelles Lernen in der Cloud", | ||
shortTitle: "Ma", | ||
displayColor: "#54616e", | ||
}, | ||
{ | ||
id: "0000dcfbfb5c7a3f00bf21ce", | ||
title: "Hybrid Cloud und Multi-Cloud-Strategien", | ||
shortTitle: "Hy", | ||
displayColor: "rgb(239, 108, 0)", | ||
}, | ||
{ | ||
id: "0000dcfbfb5c7a3f00bf21cf", | ||
title: "Serverless Computing", | ||
shortTitle: "Se", | ||
displayColor: "rgb(48, 79, 254)", | ||
}, | ||
{ | ||
id: "0000dcfbfb5c7a3f00bf21da", | ||
title: "Prototyping an App with Quasar", | ||
shortTitle: "Pr", | ||
displayColor: "#54616e", | ||
}, | ||
{ | ||
id: "0000dcfbfb5c7a3f00bf21db", | ||
title: "State Management with Pinia", | ||
shortTitle: "St", | ||
displayColor: "#54616e", | ||
}, | ||
{ | ||
id: "0000dcfbfb5c7a3f00bf21db", | ||
title: "Accessibility, Interactivity And Why Testing Still Matters", | ||
shortTitle: "Ac", | ||
displayColor: "#54616e", | ||
}, | ||
]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
import RoomGrid from "./RoomGrid.vue"; | ||
|
||
export { RoomGrid }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,14 +1,15 @@ | ||
<template> | ||
<DefaultWireframe max-width="short"> | ||
<template #header> | ||
<h1 class="text-h3 py-2 mb-4">Rooms [TODO translation]</h1> | ||
</template> | ||
|
||
<template> | ||
<p>Content [TODO component]</p> | ||
<h1 class="text-h3 py-2 mb-4">{{ t("pages.rooms.active.title") }}</h1> | ||
</template> | ||
<RoomGrid /> | ||
</DefaultWireframe> | ||
</template> | ||
<script setup lang="ts"> | ||
import DefaultWireframe from "@/components/templates/DefaultWireframe.vue"; | ||
import { RoomGrid } from "@feature-room"; | ||
import { useI18n } from "vue-i18n"; | ||
const { t } = useI18n(); | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
export type Room = { | ||
id: string; | ||
title: string; | ||
shortTitle: string; | ||
displayColor: string; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters