add component for counter

components/PetitionPage.vue

@@ -12,9 +12,9 @@ const { data: petition } = await $client.petition.getPublic.useQuery({
   id: props.id
 })
 const { data: theme } = petition.value?.petitionCampaign?.styleThemeId ? await $client.styleTheme.get.useQuery(petition.value?.petitionCampaign?.styleThemeId) : { data: undefined }
-// const { data: signatures } = $client.petition.signatureCount.useQuery({
-//   id: props.id
-// })
+const { data: signatures } = $client.petition.signatureCount.useQuery({
+  id: props.id
+})
 const shareUrl = ref(useShareUrl(petition.value?.slug || ''))
 
 const success = ref(false)
@@ -46,6 +46,7 @@ useSeoMeta({
           <n-space vertical>
             <n-image :src="petition?.image?.url" class="hidden sm:block" />
             <Nh1>{{ petition?.title }}</Nh1>
+            <PetitionSignatureCounter :signatures="signatures" />
             <PetitionForm
               class="block sm:hidden mb-8"
               :endpoint="(petition?.actionNetworkPetitionId || '') + '/signatures'"
@@ -65,6 +66,7 @@ useSeoMeta({
         </n-space>
         <div class="hidden sm:flex">
           <n-space class="max-w-xs border-0 sm:border shadow-none sm:shadow-md rounded p-4">
+            <PetitionSignatureCounter :signatures="signatures" />
             <PetitionForm
               :endpoint="(petition?.actionNetworkPetitionId || '') + '/signatures'"
               :pc-endpoint="(petition?.petitionCampaign?.petitionEndpointURL || '') + '/signatures'"

components/PetitionSignatureCounter.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// some comment
+import type { inferRouterOutputs } from '@trpc/server'
+import type { AppRouter } from '~/server/trpc/routers'
+
+type RouterOutput = inferRouterOutputs<AppRouter>;
+type Signatures = RouterOutput['petition']['signatureCount'];
+
+const props = defineProps({
+  signatures: {
+    type: Object as PropType<Signatures>,
+    required: true
+  }
+})
+const count = ref(12323)
+const target = computed(() => useGetNextTarget(count.value))
+</script>
+
+<template>
+  <div>
+    <div>{{ count }} : {{ target }}</div>
+    <div><n-input-number v-model:value="count" /></div>
+  </div>
+</template>

composables/useGetNextTarget.ts

@@ -0,0 +1,31 @@
+// const targets = [
+//   10,
+//   50,
+//   100,
+//   200,
+//   300,
+//   500,
+//   800,
+//   1000,
+//   1500,
+//   2000,
+//   3500,
+//   4000,
+//   5000,
+//   7000,
+//   10000,
+//   13000,
+//   15000,
+//   20000,
+//   35000,
+//   40000
+// ]
+
+export const useGetNextTarget = (count: number) => {
+  // let startCount = count
+  let mag = Math.floor(Math.log10(count))
+  if (count === 10 ** mag) {
+    mag += 1
+  }
+  return Math.ceil(count / 10 ** mag) * 10 ** mag
+}