Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 | 125x 129x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 134x 134x 125x 125x 125x 125x 125x 125x 125x 125x 54x 54x 54x 54x 54x 54x 54x 54x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 36x 36x 36x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 79x 79x 79x 79x 79x 79x 79x 79x 79x 79x 79x 79x 79x 79x 79x 21x 6x 6x 12x 12x 21x 1x 79x 21x 12x 12x 12x 21x 21x 6x 6x 6x 6x 6x 6x 6x 6x 6x 125x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 125x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 125x 125x 125x 125x 125x 125x | import { css, html, PropertyValues, TemplateResult } from 'lit';
import { property } from 'lit/decorators.js';
import { RapidElement } from '../RapidElement';
import { Contact, CustomEventType } from '../interfaces';
import { Events } from '../events/eventRenderers';
import { getDestinationURN } from '../live/ContactStoreElement';
import { watchContact } from '../live/ContactWatch';
import { RealtimeSubscription } from '../live/Realtime';
/**
* A contact's name, optionally with the URN that will be used to message
* them. Given a contact uuid it manages itself: it registers interest in name
* events with the central contact watcher, which delivers the initial value
* and any live changes through the same handler - the component never fetches
* anything. Alternatively the name and urn can be set explicitly for static
* rendering (e.g. rows of a list that arrived in one fetch).
*/
export class ContactName extends RapidElement {
@property({ type: String })
name: string;
@property({ type: String })
urn: string;
// when set, name and urn are kept live by the central contact watcher
@property({ type: String })
contact: string;
@property({ type: Number, attribute: 'icon-size' })
size = 20;
private watch: RealtimeSubscription = null;
private watchedContact: string = null;
// the contact the name and urn on screen came from - only what we put there
// is ours to clear, and only when we're pointed somewhere else
private displayedContact: string = null;
// the contact behind a refresh notification we've already queued - a name
// and a urn change arrive as separate deliveries, as does a burst of live
// events, so the notification is coalesced into a microtask
private pendingRefresh: Contact = null;
static get styles() {
return css`
:host {
display: flex;
align-items: center;
}
temba-urn {
margin-right: 0.2em;
}
.name {
font-size: var(--contact-name-font-size, 1.5rem);
overflow: hidden;
max-height: 2rem;
line-height: 2rem;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
text-overflow: ellipsis;
}
`;
}
public connectedCallback(): void {
super.connectedCallback();
this.syncWatch();
}
public disconnectedCallback(): void {
super.disconnectedCallback();
this.syncWatch();
}
public willUpdate(changed: PropertyValues): void {
super.willUpdate(changed);
if (changed.has('contact')) {
this.syncWatch();
}
}
/**
* Keeps our watch in sync with the contact we're pointed at, clearing the
* previous contact's values when we switch contacts on the page. Explicitly
* set name/urn never pass through here since they involve no watch.
*/
private syncWatch() {
const target = (this.isConnected && this.contact) || null;
if (target === this.watchedContact) {
return;
}
if (this.watch) {
this.watch.unsubscribe();
this.watch = null;
}
// only values we put there are ours to clear - a name and urn supplied
// alongside the contact render until the watcher has something better.
// Leaving the DOM isn't a switch, and blanking there would flash empty
// and refetch when we're only being moved - but a swap made while we were
// detached is, so compare against the contact on screen rather than the
// one we were last watching
if (
this.isConnected &&
this.displayedContact &&
this.displayedContact !== target
) {
this.name = null;
this.urn = null;
this.displayedContact = null;
}
this.watchedContact = target;
if (target) {
this.watch = watchContact(
target,
[Events.CONTACT_NAME_CHANGED, Events.CONTACT_URNS_CHANGED],
(event, contact) => this.handleContactEvent(event, contact)
);
}
}
private handleContactEvent(event: any, contact: Contact) {
if (contact) {
// the watcher keeps the contact current, so it's authoritative whether
// this delivery is an event or an initial value. Anon workspaces have
// no names, show the contact's ref instead
this.name = contact.name || contact.ref || null;
// show the URN that will be used when messaging the contact, falling
// back to their highest priority URN if none are sendable
const urn = getDestinationURN(contact) || (contact.urns || [])[0] || null;
this.urn = urn ? `${urn.scheme}:${urn.display || urn.path}` : null;
this.displayedContact = this.watchedContact;
this.fireRefreshed(contact);
} else if (event && event.type === Events.CONTACT_NAME_CHANGED) {
// a live event can outrun the initial fetch - show the name we have
this.name = event.name || null;
this.displayedContact = this.watchedContact;
}
}
private fireRefreshed(contact: Contact) {
if (!this.pendingRefresh) {
Promise.resolve().then(() => {
const refreshed = this.pendingRefresh;
this.pendingRefresh = null;
if (refreshed) {
this.fireCustomEvent(CustomEventType.Refreshed, { data: refreshed });
}
});
}
this.pendingRefresh = contact;
}
public render(): TemplateResult {
const urn = this.urn
? html`<temba-urn size=${this.size} urn=${this.urn}></temba-urn>`
: null;
return html`
${urn}
<div class="name">
${this.name ? this.name : this.urn ? this.urn.split(':')[1] : ''}
</div>
<slot></slot>
`;
}
}
|