wxapp-visitor-invite/src/stores/contacts.ts

// https://pinia.esm.dev/introduction.html
import { defineStore } from 'pinia'
import {GQLRequest, PinyinHelper, Session} from "../utils";
import Taro from "@tarojs/taro";
import {gql} from "graphql-tag";
import {Ref, ref, UnwrapRef} from "vue";
import {rejects} from "assert";

export interface ContactData {
  id?: number
  name: string
  isVIP: boolean
  flexVisit: boolean
  isBlock: boolean
  nickName: string
  avatar: string
  phone: string
  company: string
  nextVisitDate?: string
  firstCharPinyin: string
}

export const useContactsStore = defineStore('contacts', () => {

  const isContactsLoaded: Ref<UnwrapRef<boolean>> =  ref(false)
  const allContacts: Ref<UnwrapRef<ContactData[]>> = ref([])

  const GQL_QUERY_ALL_CONTACT = gql`
    query {
      visitors {
        id
        name
        nickname
        phone
        type
        visitorCompany
        avatar
        isVip
        flexVisit
        isBlock
      }
    }
  `

  function loadContactsFromServer () {
    return new Promise((resolve, reject) => {
      isContactsLoaded.value = false
      const items: ContactData[] = []
      return GQLRequest.query(GQL_QUERY_ALL_CONTACT, {})
          .then(result => {
            if (result.code == 500) {
              reject("Network Error")
            } else {
              console.log(result)
              for (let item of result.data.visitors) {
                items.push({
                  id: item.id,
                  name: item.name,
                  nickName: item.nickname,
                  avatar: item.avatar,
                  company: item.visitorCompany,
                  phone: item.phone,
                  flexVisit: item.flexVisit,
                  isBlock: item.isBlock,
                  isVIP: item.isVip,
                  firstCharPinyin: PinyinHelper.getPinyinGroupName(item.name)
                } as ContactData)
              }
              allContacts.value = items.sort((a, b) => a.firstCharPinyin.localeCompare(b.firstCharPinyin));

              console.log(allContacts.value)
              isContactsLoaded.value = true
              resolve(allContacts.value)
            }
          })
    })
  }

  function getContactById(id: number) {
    for(const contact of allContacts.value) {
      console.log(contact)
      if (contact.id === id) {
        return contact
      }
    }
    return undefined
  }
  function searchContacts(searchQuery: string) {
    const searchedContacts: ContactData[] = []
    for(const item of allContacts.value) {
      if (item.name.match(searchQuery)) {
        searchedContacts.push(item)
      }
    }
    return searchedContacts
  }

  return { allContacts , isContactsLoaded, loadContactsFromServer, searchContacts, getContactById}
})

// You can even use a function (similar to a component setup()) to define a Store for more advanced use cases:
// export const useCounterStore = defineStore('counter', () => {
//   const count = ref(0)
//
//   function increment() {
//     count.value++
//   }
//
//   return {count, increment}
// })