Add incremental loading to manager and client lists

app/pages/bonus-system/referrals/new.vue

@@ -27,14 +27,32 @@ const createReferralMutation = useMutation(CreateReferralDocument);
 const clientOptions = computed<ManagerUserItem[]>(() => (
   (usersQuery.result.value?.managerUsers ?? [])
     .filter((user) => user.role === 'CLIENT')
-    .slice()
-    .sort((left, right) => left.fullName.localeCompare(right.fullName, 'ru'))
+));
+
+const referrerOptions = computed<ManagerUserItem[]>(() => (
+  clientOptions.value.filter((user) => user.id !== refereeUserId.value)
+));
+
+const refereeOptions = computed<ManagerUserItem[]>(() => (
+  clientOptions.value.filter((user) => user.id !== referrerUserId.value)
 ));
 
 const referralLinks = computed<ManagerReferralLinkItem[]>(() => (
   linksQuery.result.value?.managerReferralLinks ?? []
 ));
 
+watch(referrerUserId, (value) => {
+  if (value && value === refereeUserId.value) {
+    refereeUserId.value = '';
+  }
+});
+
+watch(refereeUserId, (value) => {
+  if (value && value === referrerUserId.value) {
+    referrerUserId.value = '';
+  }
+});
+
 function userOptionLabel(user: ManagerUserItem) {
   return [user.fullName, user.companyName || user.email]
     .filter(Boolean)
@@ -96,7 +114,7 @@ async function createReferral() {
         <span class="label-text">Клиент, который получает бонус</span>
         <select v-model="referrerUserId" class="select manager-field w-full">
           <option value="">Выберите клиента</option>
-          <option v-for="user in clientOptions" :key="user.id" :value="user.id">
+          <option v-for="user in referrerOptions" :key="user.id" :value="user.id">
             {{ userOptionLabel(user) }}
           </option>
         </select>
@@ -106,7 +124,7 @@ async function createReferral() {
         <span class="label-text">Клиент, с чьих заказов начисляется бонус</span>
         <select v-model="refereeUserId" class="select manager-field w-full">
           <option value="">Выберите клиента</option>
-          <option v-for="user in clientOptions" :key="user.id" :value="user.id">
+          <option v-for="user in refereeOptions" :key="user.id" :value="user.id">
             {{ userOptionLabel(user) }}
           </option>
         </select>