Skip to content

Commit

Permalink
Merge pull request #1645 from bcgov/feature/cleanup
Browse files Browse the repository at this point in the history 
UI Tighten on contacts
  • Loading branch information
@SoLetsDev
SoLetsDev authored Oct 30, 2023
2 parents ec8b8b9 + 4111af2 commit 1ca15f0
Show file tree
Hide file tree
Showing 6 changed files with 422 additions and 479 deletions.
4 changes: 2 additions & 2 deletions frontend/src/components/institute/AuthorityDetails.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -377,8 +377,8 @@ export default {
}
.containerSetup {
padding-right: 20em !important;
padding-left: 20em !important;
padding-right: 12em !important;
padding-left: 12em !important;
}
.editField {
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/institute/DistrictDetails.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -395,8 +395,8 @@ export default {
}
.containerSetup {
padding-right: 20em !important;
padding-left: 20em !important;
padding-right: 12em !important;
padding-left: 12em !important;
}
.editField {
Expand Down
292 changes: 140 additions & 152 deletions frontend/src/components/institute/authority/AuthorityContact.vue
View file
Original file line number Diff line number Diff line change
@@ -1,152 +1,140 @@
<template>
<span>
<v-card height="100%">
<v-card-title class="pb-0 text-wrap">
<v-row no-gutters>
<v-col>
<v-row no-gutters>
<v-col cols="10">
<v-icon
class="pb-1"
size="x-small"
:color="getStatusColor(contact)"
left
dark
>
mdi-circle
</v-icon>
<strong
id="authorityContactName"
>{{
formatContactName(contact)
}}</strong>
</v-col>
<v-col
cols="2"
class="d-flex justify-end"
>
<v-btn
v-if="canEditAuthorityContact"
id="editContactButton"
title="Edit"
color="white"
width="0.5em"
variant="flat"
min-width="0.5em"
small
class="mr-2"
@click="callDoShowEditAuthorityContactForm()"
>
<v-icon
size="x-large"
color="#003366"
dark
>mdi-pencil</v-icon>
</v-btn>
<v-btn
v-if="canEditAuthorityContact"
id="removeContactButton"
title="Remove"
color="white"
width="0.5em"
variant="flat"
min-width="0.5em"
small
class="mr-2"
@click="callShowRemoveContactConfirmation"
>
<v-icon
size="x-large"
color="#003366"
dark
>mdi-delete</v-icon>
</v-btn>
</v-col>
</v-row>
<v-row no-gutters>
<v-col
v-if="!contact.email && !contact.phoneNumber"
cols="12"
class="pt-1"
>
<p class="missing-highlight"><v-icon
size="small"
color="#ff5252"
dark
>mdi-alert</v-icon> Missing contact details</p>
<a
v-if="canEditAuthorityContact"
class="editField"
@click="callDoShowEditAuthorityContactForm()"
>+ email or phone</a>
</v-col>
<v-col
v-if="contact.email"
cols="12"
class="pt-1"
>
<span id="contactEmail"> {{
contact.email
}}</span>
</v-col>
<v-col
v-if="contact.phoneNumber"
cols="12"
class="pt-1"
>
<span id="contactPhoneNumber">{{
formatPhoneNumber(contact.phoneNumber)
}}</span><span v-if="contact.phoneExtension"> ext. {{
contact.phoneExtension
}}</span>
</v-col>
<v-col
v-if="contact.alternatePhoneNumber"
cols="12"
class="pt-1"
>
<span id="contactAlternatePhoneNumber">{{
formatPhoneNumber(contact.alternatePhoneNumber)
}} (alt.)</span> <span v-if="contact.alternatePhoneExtension"> ext. {{
contact.alternatePhoneExtension
}}</span>
</v-col>
</v-row>
</v-col>
</v-row>
</v-card-title>
<v-card-text class="pt-2">
<v-row no-gutters>
<v-col
v-if="contact.expiryDate"
cols="12"
class="pt-1"
<v-card
:id="`auhtorityContactCard-${contact.schoolContactId}`"
class="d-flex flex-column"
height="100%"
>
<v-card-title class="text-wrap pb-0">
<v-row no-gutters>
<v-col>
<v-icon
icon="mdi-circle"
class="pb-1"
size="x-small"
:color="getStatusColor(contact)"
start
/>
<strong class="contactName">{{ formatContactName(contact) }}</strong>
</v-col>
</v-row>
</v-card-title>
<v-card-subtitle>
<span
v-if="contact.expiryDate"
id="contactEffectiveAndExpiryDate"
class="dateSubText"
>
{{ formatDate(contact.effectiveDate) }} - {{ formatDate(contact.expiryDate) }}
</span>
<span
v-else
id="contactEffectiveDate"
class="dateSubText"
>
{{ formatDate(contact.effectiveDate) }}
</span>
</v-card-subtitle>
<v-card-text class="pb-0">
<v-list class="pt-0">
<v-list-item
v-if="!contact.email && !contact.phoneNumber && canEditSchoolContact"
min-height="inherit"
class="pl-0"
>
<a
class="missing-highlight"
@click="callDoShowEditAuthorityContactForm()"
>
<v-icon aria-hidden="false">
mdi-calendar-today
</v-icon>
<span id="contactEffectiveAndExpiryDate"> {{
formatDate(contact.effectiveDate)
}} - {{
formatDate(contact.expiryDate)
}}</span>
</v-col>
<v-col
v-else
cols="12"
class="pt-1"
>
<v-icon aria-hidden="false">
mdi-calendar-today
</v-icon>
<span id="contactEffectiveDate"> {{
formatDate(contact.effectiveDate)
}}</span>
</v-col>
</v-row>
</v-card-text>
</v-card>
</span>
<v-icon
icon="mdi-alert"
size="x-large"
color="#ff5252"
start
/>
<span>Add missing email or phone</span>
</a>
</v-list-item>
<v-list-item
v-if="contact.jobTitle"
min-height="inherit"
class="pl-0"
>
<v-row>
<v-col cols="1">
<v-icon
icon="mdi-account"
/>
</v-col>
<v-col class="d-flex ml-1">
<span id="contactJobTitle"> {{ contact.jobTitle }}</span>
</v-col>
</v-row>
</v-list-item>
<v-list-item
v-if="contact.email"
min-height="inherit"
class="pl-0"
>
<v-row>
<v-col cols="1">
<v-icon
icon="mdi-email"
start
/>
</v-col>
<v-col class="d-flex ml-1">
<span id="contactEmail"> {{ contact.email }}</span>
</v-col>
</v-row>
</v-list-item>
<v-list-item
v-if="contact.phoneNumber"
min-height="inherit"
class="pl-0"
>
<v-row>
<v-col cols="1">
<v-icon
icon="mdi-phone"
start
/>
</v-col>
<v-col class="d-flex ml-1">
<span id="contactPhoneNumber">{{ formatPhoneNumber(contact.phoneNumber) }}</span>
<span v-if="contact.phoneExtension">&nbsp;ext. {{ contact.phoneExtension }}</span>
</v-col>
</v-row>
</v-list-item>
<v-list-item
v-if="contact.alternatePhoneNumber"
min-height="inherit"
class="pl-0"
>
<v-row>
<v-col cols="1">
<v-icon
icon="mdi-phone"
start
/>
</v-col>
<v-col class="d-flex ml-1">
<span id="contactAlternatePhoneNumber">
{{ formatPhoneNumber(contact.alternatePhoneNumber) }} (alt.)
</span>
<span v-if="contact.alternatePhoneExtension">
&nbsp;ext. {{ contact.alternatePhoneExtension }}
</span>
</v-col>
</v-row>
</v-list-item>
</v-list>
</v-card-text>
<v-spacer></v-spacer>
<v-card-actions class="justify-start">
<v-btn color="#003366" variant="text" @click="callDoShowEditAuthorityContactForm()">Edit</v-btn>
<v-btn color="red" variant="text" @click="callShowRemoveContactConfirmation">Remove</v-btn>
</v-card-actions>
</v-card>
</template>

<script>
Expand Down Expand Up @@ -185,13 +173,13 @@ export default {
};
</script>
<style scoped>
.editField {
font-size: 16px;
color: rgb(0, 51, 102);
.dateSubText{
font-style: italic;
font-size: 0.95em;
}
.editField:hover {
text-decoration: underline;
.contactName{
font-size: 0.85em;
}
.missing-highlight {
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/institute/authority/Details.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1169,8 +1169,8 @@ export default {
}
.containerSetup {
padding-right: 24em !important;
padding-left: 24em !important;
padding-right: 12em !important;
padding-left: 12em !important;
}
.editField {
Expand Down
Loading

0 comments on commit 1ca15f0

Please sign in to comment.