Manager

Back Back Up Advanced Editor

{{ $t('global_search.no_results_found') }}
        </div>
        <div v-else>
          <div v-if="usersStore.customerList.length > 0">
            <label class="text-sm text-gray-400 mb-0.5 block px-2 uppercase">
              {{ $t('global_search.customers') }}
            </label>
            <div
              v-for="(customer, index) in usersStore.customerList"
              :key="index"
              class="p-2 hover:bg-gray-100 cursor-pointer rounded-md"
            >
              <router-link
                :to="{ path: `/admin/customers/${customer.id}/view` }"
                class="flex items-center"
              >
                <span
                  class="
                    flex
                    items-center
                    justify-center
                    w-9
                    h-9
                    mr-3
                    text-base
                    font-semibold
                    bg-gray-200
                    rounded-full
                    text-primary-500
                  "
                >
                  {{ initGenerator(customer.name) }}
                </span>
                <div class="flex flex-col">
                  <span class="text-sm">{{ customer.name }}</span>
                  <span
                    v-if="customer.contact_name"
                    class="text-xs text-gray-400"
                  >
                    {{ customer.contact_name }}
                  </span>
                  <span v-else class="text-xs text-gray-400">{{
                    customer.email
                  }}</span>
                </div>
              </router-link>
            </div>
          </div>

<div v-if="usersStore.userList.length > 0" class="mt-2">
            <label
              class="text-sm text-gray-400 mb-2 block px-2 mb-0.5 uppercase"
            >
              {{ $t('global_search.users') }}
            </label>
            <div
              v-for="(user, index) in usersStore.userList"
              :key="index"
              class="p-2 hover:bg-gray-100 cursor-pointer rounded-md"
            >
              <router-link
                :to="{ path: `/admin/users/${user.id}/edit` }"
                class="flex items-center"
              >
                <span
                  class="
                    flex
                    items-center
                    justify-center
                    w-9
                    h-9
                    mr-3
                    text-base
                    font-semibold
                    bg-gray-200
                    rounded-full
                    text-primary-500
                  "
                >
                  {{ initGenerator(user.name) }}
                </span>
                <div class="flex flex-col">
                  <span class="text-sm">{{ user.name }}</span>
                  <span class="text-xs text-gray-400">{{ user.email }}</span>
                </div>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

const usersStore = useUsersStore()

const isShow = ref(false)
const name = ref('')
const searchBar = ref(null)
const isSearching = ref(false)
const route = useRoute()

watch(route, () => {
  isShow.value = false
  name.value = ''
})

onSearch = debounce(onSearch, 500)

onClickOutside(searchBar, () => {
  isShow.value = false
  name.value = ''
})

function onSearch() {
  let data = {
    search: name.value,
  }

if (name.value) {
    isSearching.value = true
    usersStore.searchUsers(data).then(() => {
      isShow.value = true
    })
    isSearching.value = false
  }
  if (name.value === '') {
    isShow.value = false
  }
}

function initGenerator(name) {
  if (name) {
    const nameSplit = name.split(' ')
    const initials = nameSplit[0].charAt(0).toUpperCase()
    return initials
  }
}
</script>