48 lines
1.7 KiB
JavaScript
48 lines
1.7 KiB
JavaScript
const { inject, computed } = Vue;
|
|
|
|
export default {
|
|
name: 'AgentCell',
|
|
props: {
|
|
agent: { type: Object, required: true }
|
|
},
|
|
setup(props) {
|
|
const appState = inject('appState');
|
|
|
|
const compactClass = computed(() => appState.isCompact.value ? 'agent-cell-compact' : '');
|
|
const nameClass = computed(() => appState.isCompact.value ? 'agent-cell-name-compact' : 'agent-cell-name');
|
|
const highlightBtnClass = computed(() => [
|
|
'agent-cell-highlight-btn',
|
|
appState.highlightedRowId.value === props.agent.id ? 'agent-cell-highlight-btn-active' : ''
|
|
]);
|
|
|
|
return { ...appState, compactClass, nameClass, highlightBtnClass };
|
|
},
|
|
template: `
|
|
<div
|
|
class="planner-grid-left-col agent-cell-root agent-row-left-col cursor-pointer agent-cell-hover-trigger relative-position"
|
|
:class="compactClass"
|
|
@click="openProfile(agent)"
|
|
>
|
|
<q-avatar :size="isCompact ? '24px' : '32px'" class="shadow-1">
|
|
<img :src="agent.avatar">
|
|
</q-avatar>
|
|
<div class="q-ml-sm overflow-hidden col">
|
|
<div class="text-weight-bold truncate" :class="nameClass">{{ agent.name }}</div>
|
|
<div v-if="!isCompact" class="agent-cell-role text-grey-5 uppercase text-weight-bold truncate">{{ agent.role }}</div>
|
|
</div>
|
|
<q-btn
|
|
round
|
|
flat
|
|
dense
|
|
:icon="highlightedRowId === agent.id ? 'visibility_off' : 'visibility'"
|
|
:color="highlightedRowId === agent.id ? 'amber-9' : 'grey-4'"
|
|
size="sm"
|
|
:class="highlightBtnClass"
|
|
@click.stop="toggleRowHighlight(agent.id)"
|
|
>
|
|
<q-tooltip>{{ highlightedRowId === agent.id ? 'Turn off reading mode' : 'Highlight Row' }}</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
`
|
|
};
|