Skip to content

Commit

Permalink
#2490: implemented card with resizable vertical sections and applied …
Browse files Browse the repository at this point in the history 
…it to project link cards on the progress page
  • Loading branch information
@sudo-may
sudo-may committed Jul 8, 2024
1 parent f88f252 commit f30c005
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 59 deletions.
3 changes: 2 additions & 1 deletion dashboard-prime/src/components/myProgress/MyCurrentProjects.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ const projectOrderUpdate = (projectId, newIndex) => {
:display-order="index"
@sort-changed-requested="updateSortAndReloadProjects"
:proj="proj"
class="" />
class="h-full" />
</div>
</div>
</BlockUI>
Expand All @@ -123,6 +123,7 @@ const projectOrderUpdate = (projectId, newIndex) => {
@media (min-width: 50rem) {
.project-link-container {
min-width: 32rem;
max-width: 50rem;
}
}
</style>
117 changes: 63 additions & 54 deletions dashboard-prime/src/components/myProgress/ProjectLinkCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,15 @@ limitations under the License.
<script setup>
import { computed, ref } from 'vue'
import { useNumberFormat } from '@/common-components/filter/UseNumberFormat.js'
import CardWithVericalSections from '@/components/utils/cards/CardWithVericalSections.vue'
import { useMyProgressState } from '@/stores/UseMyProgressState.js'
const props = defineProps(['proj', 'displayOrder'])
const emit = defineEmits(['sort-changed-requested'])
const numberFormat = useNumberFormat()
const myProgressState = useMyProgressState()
const showSortControl = computed(() => myProgressState.myProjects.length > 1)
const overSortControl = ref(false)
const series = [0]
Expand Down Expand Up @@ -90,38 +95,40 @@ const currentProgressPercent = computed(() => Math.trunc(props.proj.points / pro
</script>

<template>
<Card :pt="{ content: { class: 'p-0' }, body: { class: 'p-0 pb-2' } }"
<CardWithVericalSections
:data-cy="`project-link-card-${proj.projectId}`"
:class="{ 'proj-link-card' : !overSortControl }">
<template #header v-if="showSortControl">
<div class="flex">
<div class="flex-1">
<SkillsButton
:id="`sortControlHandle-${proj.projectId}`"
text
icon="fas fa-arrows-alt"
severity="secondary"
class="pl-2 pr-3 sort-control border-top-none border-left-none border-right-1 border-bottom-1 surface-border text-color-secondary"
:aria-label="`Sort Control. Current position for ${proj.projectName} is ${displayOrder}. Press up or down to change the order.`"
size="large"
data-cy="sortControlHandle"
@keyup.down="moveDown"
@keyup.up="moveUp"
></SkillsButton>
</div>
<div class="text-right">
<!-- todo: support of project removal -->
<!-- <SkillsButton-->
<!-- text-->
<!-- icon="far fa-times-circle"-->
<!-- severity="secondary"-->
<!-- class="pr-3 pt-2"-->
<!-- :aria-label="`Remove ${proj.projectName} from My Projects`"-->
<!-- size="large"></SkillsButton>-->
</div>
</div>
</template>
<template #content>
<div>
<div class="flex">
<div class="flex-1">
<SkillsButton
:id="`sortControlHandle-${proj.projectId}`"
text
icon="fas fa-arrows-alt"
severity="secondary"
class="pl-2 pr-3 sort-control border-top-none border-left-none border-right-1 border-bottom-1 surface-border text-color-secondary"
:aria-label="`Sort Control. Current position for ${proj.projectName} is ${displayOrder}. Press up or down to change the order.`"
size="large"
data-cy="sortControlHandle"
@keyup.down="moveDown"
@keyup.up="moveUp"
></SkillsButton>
</div>
<div class="text-right">
<!-- todo: support of project removal -->
<!-- <SkillsButton-->
<!-- text-->
<!-- icon="far fa-times-circle"-->
<!-- severity="secondary"-->
<!-- class="pr-3 pt-2"-->
<!-- :aria-label="`Remove ${proj.projectName} from My Projects`"-->
<!-- size="large"></SkillsButton>-->
</div>
<div :class="{'pt-4': !showSortControl }">

</div>
<div class="flex">
<div class="pt-3" style="min-width: 200px;">
<apexchart type="radialBar" height="200" width="200" :options="chartOptions"
Expand All @@ -142,37 +149,39 @@ const currentProgressPercent = computed(() => Math.trunc(props.proj.points / pro
</div>
</div>

<div class="text-right mx-3">
<div :id="`projectProgressLabel_${proj.projectId}`"
class="small mb-1"
:aria-label="`${proj.points} out of ${proj.totalPoints} available points`"
data-cy="project-card-project-points">
<span class="text-xl text-orange-700">{{ numberFormat.pretty(proj.points) }}</span>
<span>/</span>
<span>{{ numberFormat.pretty(proj.totalPoints) }}</span>
</div>
<ProgressBar
:value="currentProgressPercent"
:aria-label="`${currentProgressPercent} percent complete`"
style="height: 6px" />
</div>

<div class="px-3 w-full text-center mt-4">
<router-link tabindex="-1"
:to="{ path: `/progress-and-rankings/projects/${proj.projectId}` }"
:data-cy="`project-link-${proj.projectId}`">
<Button
label="View"
icon="far fa-eye"
:aria-label="`Click to navigate to ${proj.projectName} project page.`"
outlined class="w-full" size="small"/>
</router-link>
</div>

</div>
</template>
<template #footer>
<div class="text-right mx-3">
<div :id="`projectProgressLabel_${proj.projectId}`"
class="small mb-1"
:aria-label="`${proj.points} out of ${proj.totalPoints} available points`"
data-cy="project-card-project-points">
<span class="text-xl text-orange-700">{{ numberFormat.pretty(proj.points) }}</span>
<span>/</span>
<span>{{ numberFormat.pretty(proj.totalPoints) }}</span>
</div>
<ProgressBar
:value="currentProgressPercent"
:aria-label="`${currentProgressPercent} percent complete`"
style="height: 6px" />
</div>

<div class="px-3 w-full text-center pt-4 pb-3">
<router-link tabindex="-1"
:to="{ path: `/progress-and-rankings/projects/${proj.projectId}` }"
:data-cy="`project-link-${proj.projectId}`">
<Button
label="View"
icon="far fa-eye"
:aria-label="`Click to navigate to ${proj.projectName} project page.`"
outlined class="w-full" size="small"/>
</router-link>
</div>
</template>
</Card>
</CardWithVericalSections>
</template>

<style scoped>
Expand Down
16 changes: 12 additions & 4 deletions dashboard-prime/src/components/utils/cards/CardWithVericalSections.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,19 @@
</script>

<template>
<Card :pt="{ content: { class: 'p-0' }, body: { class: 'p-0' } }">
<Card :pt="{ content: { class: 'p-0 h-full' }, body: { class: 'p-0 h-full' } }">
<template #content>
<slot name="header"></slot>
<slot name="content"></slot>
<slot name="footer"></slot>
<div class="flex flex-column h-full">
<div>
<slot name="header"></slot>
</div>
<div class="flex-1">
<slot name="content"></slot>
</div>
<div>
<slot name="footer"></slot>
</div>
</div>
</template>
</Card>
</template>
Expand Down

0 comments on commit f30c005

Please sign in to comment.