Skip to content

Commit

Permalink
feat: APPS-2583-2582 Fix block StaffSubjectLibrarian & Convert Sectio…
Browse files Browse the repository at this point in the history
…nStaffSubjectLibrarian to vue3 (#494)

* fix BlockSubjectLibrarian add SectionSubjectLibrarian

* fix BlockSubjectLibrarian add SectionSubjectLibrarian

* update typescript

* update typescript

* update typescript

* delete comment

* fix staffName

* linting

* linting
  • Loading branch information
jendiamond authored Apr 10, 2024
1 parent 2c421f0 commit 0d6cb4d
Show file tree
Hide file tree
Showing 7 changed files with 515 additions and 68 deletions.
190 changes: 142 additions & 48 deletions src/lib-components/BlockStaffSubjectLibrarian.vue
Original file line number Diff line number Diff line change
@@ -1,10 +1,21 @@
<script lang="ts" setup>
import { defineAsyncComponent } from 'vue'
<script
lang="ts"
setup
>
import { computed } from 'vue'
import type { PropType } from 'vue'
// Components
// LODASH FUNCTIONS
// TYPESCRIPT
import type { AcademicDepartmentsItemType, AlternativeNameItemType, DepartmentItemType, StaffLocationItemType } from '@/types/types'
// COMPONENTS
import SmartLink from '@/lib-components/SmartLink.vue'
import IconWithLink from '@/lib-components/IconWithLink.vue'
defineProps({
// PROPS & DATA
const props = defineProps({
subjectArea: {
type: String,
default: '',
Expand All @@ -13,29 +24,33 @@ defineProps({
type: String,
default: '',
},
staffName: {
nameLast: {
type: String,
default: '',
},
nameLast: {
nameFirst: {
type: String,
default: '',
},
nameFirst: {
jobTitle: {
type: String,
default: '',
},
departments: {
type: Array as PropType<DepartmentItemType[]>,
default: () => [],
},
academicDepartments: {
type: Array,
type: Array as PropType<AcademicDepartmentsItemType[]>,
default: () => [],
},
alternativeFullName: {
type: String,
default: '',
locations: {
type: Array as PropType<StaffLocationItemType[]>,
default: () => [],
},
language: {
type: String,
default: '',
alternativeName: {
type: Array as PropType<AlternativeNameItemType[]>,
default: () => [],
},
uri: {
type: String,
Expand All @@ -53,47 +68,126 @@ defineProps({
type: String,
default: '',
},
language: {
type: String,
default: '',
}
})
const IconWithLink = defineAsyncComponent(
() => import('@/lib-components/IconWithLink.vue')
)
const lastDepartment = computed(() => {
const dept = props.departments
return dept[dept.length - 1].title
})
const parsedAlternativeFullName = computed(() => {
return props.alternativeName[0].fullName
})
const parsedLanguage = computed(() => {
return props.alternativeName[0].languageAltName
})
const parsedStaffName = computed(() => {
return `${props.nameFirst} ${props.nameLast}`
})
</script>

<template>
<tr class="block-staff-subject-librarian">
<!-- SUBJECT AREA -->
<td class="academic-department">
{{ subjectArea }}
</td>

<!-- NAME -->
<td class="librarian-block">
<SmartLink :to="to" class="staff-name">
{{ staffName }}
<span v-if="alternativeFullName" :lang="language">
{{ alternativeFullName }}</span>
</SmartLink>
</td>

<!-- CONTACT INFO -->
<td class="contact-info">
<div class="email">
<IconWithLink :text="email" icon-name="svg-icon-email" :to="`mailto:${email}`" />
</div>

<div v-if="phone" class="phone">
<IconWithLink :text="phone" icon-name="svg-icon-phone" :to="`tel:${phone}`" />
</div>

<div v-if="consultation" class="consultation">
<IconWithLink text="Book a consultation" icon-name="svg-icon-consultation" :to="consultation" />
</div>
</td>
</tr>
<div>
<tr class="block-staff-subject-librarian">
<!-- SUBJECT AREA -->
<td class="academic-department">
{{ subjectArea }}
</td>

<!-- NAME -->
<td class="librarian-block">

<SmartLink
:to="to"
class="staff-name"
v-if="props.alternativeName.length === 0 || props.alternativeName === null"
>
{{ parsedStaffName }}
</SmartLink>

<SmartLink
:to="to"
class="staff-name"
v-else
>
{{ parsedStaffName }}
<span
:lang="parsedLanguage"
v-if="props.alternativeName && props.alternativeName != null"
>
{{ parsedAlternativeFullName }}</span>
</SmartLink>
<div
class="job-title"
v-html="jobTitle"
/>

<ul
v-if="departments.length"
class="departments"
>
<li class="department">
{{ lastDepartment }}
</li>
</ul>

<div v-if="locations.length">
<IconWithLink
v-for=" location in locations "
:key="`location-${location.id}`"
:text="location.title"
icon-name="svg-icon-location"
:to="`/${location.to}`"
/>
</div>
</td>

<!-- CONTACT INFO -->
<td class="contact-info">
<div class="email">
<IconWithLink
:text="email"
icon-name="svg-icon-email"
:to="`mailto:${email}`"
/>
</div>

<div
v-if="phone"
class="phone"
>
<IconWithLink
:text="phone"
icon-name="svg-icon-phone"
:to="`tel:${phone}`"
/>
</div>

<div
v-if="consultation"
class="consultation"
>
<IconWithLink
text="Book a consultation"
icon-name="svg-icon-consultation"
:to="consultation"
/>
</div>
</td>
</tr>
</div>
</template>

<style lang="scss" scoped>
<style
lang="scss"
scoped
>
.block-staff-subject-librarian {
display: flex;
flex-direction: row;
Expand Down
118 changes: 118 additions & 0 deletions src/lib-components/SectionStaffSubjectLibrarian.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
<script
setup
lang="ts"
>
import type { PropType } from 'vue'
// TYPESCRIPT
import type { BlockStaffListItemType } from '@/types/types'
import BlockStaffSubjectLibrarian from '@/lib-components/BlockStaffSubjectLibrarian.vue'
const { items, tableHeaders } = defineProps({
items: {
type: Array as PropType<BlockStaffListItemType[]>,
default: () => [],
},
tableHeaders: {
type: Array,
default: () => [],
},
})
</script>

<template>
<table class="section-staff-subject-librarian">
<caption>
Subject Librarians
</caption>
<thead>
<tr>
<th
v-for="(header, index) in tableHeaders"
:key="index"
>
{{ header }}
</th>
</tr>
</thead>

<tbody>
<BlockStaffSubjectLibrarian
v-for="(item, index) in items"
:key="`${index}-${item.subjectArea}`"
:subject-area="item.subjectArea"
:name-first="item.nameFirst"
:name-last="item.nameLast"
:to="item.to"
:alternative-name="item.alternativeName"
:language="item.language"
:job-title="item.jobTitle"
:departments="item.departments"
:locations="item.locations"
:email="item.email"
:phone="item.phone"
:consultation="item.consultation"
class="subject-librarian-item"
/>
</tbody>
</table>
</template>

<style
lang="scss"
scoped
>
.section-staff-subject-librarian {
display: flex;
flex-direction: column;
gap: var(--space-m);
max-width: $container-l-main + px;
margin: 0 auto var(--space-2xl);
caption {
@include visually-hidden;
}
thead tr {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: var(--space-xl);
width: 100%;
color: var(--color-primary-blue-05);
@include step-0;
font-weight: normal;
border-bottom: 2px dotted var(--color-secondary-grey-02);
padding-bottom: 10px;
th {
display: flex;
flex: 1 1 0px;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
font-weight: 500;
}
}
.subject-librarian-item {
border-bottom: 2px dotted var(--color-secondary-grey-02);
}
@media #{$small} {
thead {
height: 1px;
width: 1px;
position: absolute;
overflow: hidden;
top: -10px;
}
}
}
</style>
6 changes: 4 additions & 2 deletions src/lib-components/SectionWrapper.vue
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@ const setMargins = computed(() => {
return !(props.noMargins || ancestorSetMargins)
})
// Provide must be called synchronously in setup()
provide('sectionLevel', levelComputed.value)
provide('ancestorSetMargins', ancestorSetMargins || setMargins.value)
Expand Down Expand Up @@ -86,7 +85,10 @@ const getId = computed(() => {
</section>
</template>

<style lang="scss" scoped>
<style
lang="scss"
scoped
>
.section-wrapper {
>.section-header {
margin-bottom: var(--space-xl);
Expand Down
Loading

2 comments on commit 0d6cb4d

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.