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
        type
        visitorCompany
        avatar
        phone
      }
    }
  `

  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: "",
                  isBlock: "",
                  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 searchContacts(searchQuery: string) {
    const searchedContacts: ContactData[] = []
    for(const item of allContacts.value) {
      if (item.name.match(searchQuery)) {
        searchedContacts.push(item)
      }
    }
    return searchedContacts
  }

  function getEmptyContactData(): ContactData {
    return {
      id: undefined,
      name: "",
      isVIP: false,
      flexVisit: false,
      isBlock: false,
      nickName: "",
      avatar: "",
      phone: "",
      company: "",
      nextVisitDate: undefined,
      firstCharPinyin: ""
    }
  }
  return { allContacts , isContactsLoaded, loadContactsFromServer, searchContacts, getEmptyContactData}
})

// 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}
// })