166 lines
4.4 KiB
Vue
166 lines
4.4 KiB
Vue
<template>
|
|
<transition name="delete-slide-left">
|
|
<div v-if="!deleteTimeout"
|
|
:id="id"
|
|
:class="{active: selectedContact === contact.key}"
|
|
tabindex="0"
|
|
class="app-content-list-item"
|
|
@click.prevent.stop="selectContact"
|
|
@keypress.enter.prevent.stop="selectContact">
|
|
<!-- keyboard accessibility will focus the input and not the label -->
|
|
<!--
|
|
<input ref="selected" :id="contact.key" type="checkbox"
|
|
class="app-content-list-item-checkbox checkbox" @keypress.enter.space.prevent.stop="toggleSelect">
|
|
<label :for="contact.key" @click.prevent.stop="toggleSelect" @keypress.enter.space.prevent.stop="toggleSelect" />
|
|
-->
|
|
<div :style="{ 'backgroundColor': colorAvatar }" class="app-content-list-item-icon">
|
|
{{ contact.displayName | firstLetter }}
|
|
<!-- try to fetch the avatar only if the contact exists on the server -->
|
|
<div v-if="hasPhoto" :style="{ 'backgroundImage': avatarUrl }" class="app-content-list-item-icon__avatar" />
|
|
</div>
|
|
|
|
<!-- contact data -->
|
|
<div class="app-content-list-item-line-one">
|
|
{{ contact.displayName }}
|
|
</div>
|
|
<div v-if="contact.email" class="app-content-list-item-line-two">
|
|
{{ contact.email }}
|
|
</div>
|
|
|
|
<!-- undo actions -->
|
|
<div v-if="!contact.addressbook.readOnly && !deleteTimeout"
|
|
class="icon-delete"
|
|
tabindex="0"
|
|
@click.prevent.stop="deleteContact"
|
|
@keypress.enter.prevent.stop="deleteContact" />
|
|
</div>
|
|
|
|
<!-- Deleted contact (pending) -->
|
|
<div v-else
|
|
:id="id"
|
|
key="deleted"
|
|
class="deleted app-content-list-item">
|
|
<div :style="{ backgroundColor: 'grey' }" class="app-content-list-item-icon">
|
|
{{ contact.displayName | firstLetter }}
|
|
<!-- try to fetch the avatar only if the contact exists on the server -->
|
|
<div v-if="hasPhoto" :style="{ 'backgroundImage': avatarUrl }" class="app-content-list-item-icon__avatar" />
|
|
</div>
|
|
<!-- contact data -->
|
|
<div class="app-content-list-item-line-one">
|
|
{{ contact.displayName }}
|
|
</div>
|
|
<div v-tooltip.auto="t('contacts', 'Deleting the contact in {countdown} seconds', { countdown })"
|
|
class="icon-history"
|
|
tabindex="0"
|
|
@click.prevent.stop="cancelDeletion"
|
|
@keypress.enter.prevent.stop="cancelDeletion" />
|
|
</div>
|
|
</transition>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ContactsListItem',
|
|
filters: {
|
|
firstLetter(value) {
|
|
return value.charAt(0)
|
|
},
|
|
},
|
|
props: {
|
|
index: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
contact: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
deleteInterval: null,
|
|
deleteTimeout: null,
|
|
countdown: 7,
|
|
}
|
|
},
|
|
computed: {
|
|
selectedGroup() {
|
|
return this.$route.params.selectedGroup
|
|
},
|
|
selectedContact() {
|
|
return this.$route.params.selectedContact
|
|
},
|
|
|
|
// usable and valid html id for scrollTo
|
|
id() {
|
|
return window.btoa(this.contact.key).slice(0, -2)
|
|
},
|
|
|
|
hasPhoto() {
|
|
return this.contact.dav && (this.contact.dav.hasphoto || this.contact.photo)
|
|
},
|
|
|
|
/**
|
|
* avatar color based on server toRgb method and the displayName
|
|
* @returns {string} the color in css format
|
|
*/
|
|
colorAvatar() {
|
|
try {
|
|
const color = this.contact.uid.toRgb()
|
|
return `rgb(${color.r}, ${color.g}, ${color.b})`
|
|
} catch (e) {
|
|
return 'grey'
|
|
}
|
|
},
|
|
avatarUrl() {
|
|
if (this.contact.photo) {
|
|
return `url(${this.contact.photoUrl})`
|
|
}
|
|
return `url(${this.contact.url}?photo)`
|
|
},
|
|
},
|
|
methods: {
|
|
/**
|
|
* Checkbox management method
|
|
*/
|
|
toggleSelect() {
|
|
// toggle checkbox here because we stop the propagation to not trigger selectContact
|
|
// therefore the selectContact prevent the checkbox label+input propagation
|
|
this.$refs.selected.checked = !this.$refs.selected.checked
|
|
},
|
|
|
|
/**
|
|
* Dispatch contact deletion request
|
|
*/
|
|
deleteContact() {
|
|
this.deleteInterval = setInterval(() => {
|
|
this.countdown--
|
|
}, 1000)
|
|
this.deleteTimeout = setTimeout(() => {
|
|
this.$store.dispatch('deleteContact', { contact: this.contact })
|
|
this.$emit('deleted', this.index)
|
|
// reset
|
|
clearInterval(this.deleteInterval)
|
|
this.countdown = 7
|
|
}, 7000)
|
|
},
|
|
|
|
cancelDeletion() {
|
|
clearTimeout(this.deleteTimeout)
|
|
clearInterval(this.deleteInterval)
|
|
this.deleteTimeout = null
|
|
this.deleteInterval = null
|
|
this.countdown = 7
|
|
},
|
|
|
|
/**
|
|
* Select this contact within the list
|
|
*/
|
|
selectContact() {
|
|
// change url with router
|
|
this.$router.push({ name: 'contact', params: { selectedGroup: this.selectedGroup, selectedContact: this.contact.key } })
|
|
},
|
|
},
|
|
}
|
|
</script>
|