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>
import { ref, watch } from 'vue'
import { searchPerson } from '@/api/persons'

const props = defineProps({
  people: { type: Array, default: () => [] },
})
const emit = defineEmits(['add-person', 'remove-person'])

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

// Template refs for DOM elements
const searchNameInput = ref(null)
const persondroplist = ref(null)

async function updateSearchResults() {
  const results = await searchPerson(searchName.value)
  const idSet = new Set(props.people.map((p) => p.id))
  searchResults.value = results.filter((p) => !idSet.has(p.id))
}

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

function removePerson(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>