munch-ease-frontend/src/components/meals/PersonList.vue

<template>
  <span class="person-list">
    <span
      v-for="person in people"
      :key="person.id"
    >
      <button
        class="person-circle remove-person"
        @click="removePerson(person)"
      >
        {{ person.name }}
      </button>
    </span>
    <span>
      <button
        v-if="!isAddingPerson"
        class="person-circle add-person"
        @click="isAddingPerson = true"
      >
        +
      </button>
      <input
        v-else
        ref="searchNameInput"
        v-model="searchName"
        @keyup.enter="addPerson"
        @keyup.esc="isAddingPerson = false"
        @blur="isAddingPerson = false"
      >
      <ul
        v-if="isAddingPerson && searchResults.length"
        ref="persondroplist"
        class="person-droplist"
      >
        <li
          v-for="person in searchResults"
          :key="person.id"
        >
          <button
            class="person-circle add-person"
            @mousedown="addPerson(person)"
          >
            {{ person.name }}
          </button>
        </li>
      </ul>
    </span>
  </span>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { searchPersons } from '@/api/sdk'
import type { Person } from '@/domain/types'
const props = withDefaults(defineProps<{ people?: Person[] }>(), { people: () => [] })
const emit = defineEmits<{
  (e: 'add-person', person: Person): void
  (e: 'remove-person', person: Person): void
}>()

const isAddingPerson = ref(false)
const searchName = ref('')
const searchResults = ref<Person[]>([])

// Template refs for DOM elements
const searchNameInput = ref<HTMLInputElement | null>(null)
const persondroplist = ref<HTMLUListElement | null>(null)

async function updateSearchResults() {
  const q = searchName.value.trim()
  if (!q) {
    searchResults.value = []
    return
  }
  const page = await searchPersons(q)
  const results: Person[] = page.items.map((p) => ({ id: p.id, name: p.name }))
  const idSet = new Set(props.people.map((p) => p.id))
  searchResults.value = results.filter((p: Person) => !idSet.has(p.id))
}

function addPerson(person?: Person) {
  if (!person && searchResults.value.length > 0) {
    person = searchResults.value[0]
  }
  if (!person) {
    searchName.value = ''
    searchResults.value = []
    isAddingPerson.value = false
    return
  }
  if (!props.people.find((p) => p.id === person.id)) {
    emit('add-person', person)
  }
  searchName.value = ''
  searchResults.value = []
  isAddingPerson.value = false
}

function removePerson(person: Person) {
  emit('remove-person', person)
}

// Watchers
watch(searchName, async () => {
  await updateSearchResults()
})

watch(searchNameInput, async (el) => {
  if (el) {
    el.focus()
    await updateSearchResults()
  }
})

watch([persondroplist, searchNameInput], ([drop, input]) => {
  if (drop && input) {
    const inputRect = input.getBoundingClientRect()
    drop.style.left = `${inputRect.left}px`
    drop.style.top = `${inputRect.bottom}px`
    drop.style.width = `${inputRect.width}px`
  }
})
</script>

<style scoped>
.person-list {
  display: inline-block;
  text-align: center;
  min-height: 50px;
  padding: 0;
  margin: 0;
}

/* Remove all the button styling */
.person-circle {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

/* Show the initials of the person in a circle */
.person-circle {
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  background: #eee;
}

/* On hover, prompt the user to click to remove the person */
/* change opacity of circle, and use css to add a large cross over the circle */
.remove-person:hover {
  cursor: pointer;
  position: relative;
  background-color: lightcoral;
}

/* Add a cross to the circle */
.remove-person:hover::before,
.remove-person:hover::after {
  pointer-events: none;
  content: 'X';
  color: white;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.add-person {
  background-color: lightgreen;
}

.add-person:hover {
  cursor: pointer;
  font-weight: bolder;
  color: white;
  background-color: green;
}

.person-droplist {
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  list-style-type: none;
  padding: 0;
  margin: 0;
  max-height: 40vh;
  overflow-y: scroll;
  z-index: 1000;
}

.person-droplist li {
  padding: 8px;
  cursor: pointer;
  display: inline;
  padding: 1ex 1em;
}
</style>