feat: edit all users (#66)

* feat: edit all users

* chore: filter

Author: hmbanan666

apps/web-app/app/components/PartnerAgreementCard.vue

@@ -5,25 +5,34 @@
       !agreement.isActive && 'opacity-75 grayscale-100',
     ]"
   >
-    <div class="flex flex-col gap-3">
-      <div class="flex flex-row items-start gap-2.5">
-        <UIcon
-          name="i-lucide-scroll-text"
-          class="shrink-0 size-14 text-primary"
-          @click="modalUpdatePartnerAgreement.open({ agreementId: agreement.id })"
-        />
+    <div class="flex flex-col gap-3 group/list">
+      <div class="flex flex-row justify-between">
+        <div class="flex flex-row items-start gap-2.5">
+          <UIcon name="i-lucide-scroll-text" class="shrink-0 size-14 text-primary" />
 
-        <UProgress
-          v-model="agreementProgress"
-          size="md"
-          color="secondary"
-          orientation="vertical"
-          inverted
-          class="h-14 py-1"
-          :ui="{
-            indicator: agreementProgress <= 15 && '!bg-error',
-          }"
-        />
+          <UProgress
+            v-model="agreementProgress"
+            size="md"
+            color="secondary"
+            orientation="vertical"
+            inverted
+            class="h-14 py-1"
+            :ui="{
+              indicator: agreementProgress <= 15 && '!bg-error',
+            }"
+          />
+        </div>
+
+        <UTooltip :text="`Редактировать «Договор №${agreement.internalId}»`">
+          <UButton
+            variant="outline"
+            color="neutral"
+            size="md"
+            icon="i-lucide-pencil"
+            class="size-10 justify-center opacity-0 group-hover/list:opacity-100"
+            @click="modalUpdatePartnerAgreement.open({ agreementId: agreement.id })"
+          />
+        </UTooltip>
       </div>
 
       <h3 class="text-xl md:text-xl/6 font-semibold">

apps/web-app/app/components/UserMenu.vue

@@ -1,16 +1,16 @@
 <template>
   <UDropdownMenu
-    v-if="user.id"
+    v-if="userStore.id"
     size="lg"
     :items="userMenuItems"
     :search-input="false"
     :content="{ side: 'top', align: 'center' }"
     :ui="{ content: 'w-64' }"
   >
     <UButton
-      :avatar="{ src: user.avatarUrl ?? undefined }"
+      :avatar="{ src: userStore.avatarUrl ?? undefined }"
       :ui="{ trailingIcon: 'text-dimmed' }"
-      :label="user.fullName ?? t('common.colleague')"
+      :label="userStore.fullName ?? t('common.colleague')"
       block
       color="neutral"
       variant="ghost"
@@ -28,7 +28,7 @@ const { t } = useI18n()
 const colorMode = useColorMode()
 const app = useApp()
 
-const user = useUserStore()
+const userStore = useUserStore()
 
 async function signOut() {
   await clear()
@@ -41,10 +41,10 @@ const modalUpdateUser = overlay.create(ModalUpdateUser)
 
 const userMenuItems = computed(() => [
   {
-    label: user.fullName ?? t('common.colleague'),
+    label: userStore.fullName ?? t('common.colleague'),
     type: 'label' as const,
     avatar: {
-      src: user.avatarUrl ?? undefined,
+      src: userStore.avatarUrl ?? undefined,
     },
   },
   {
@@ -55,7 +55,7 @@ const userMenuItems = computed(() => [
     type: 'link' as const,
     icon: 'lucide:edit',
     onClick() {
-      modalUpdateUser.open()
+      modalUpdateUser.open({ userId: userStore.id })
     },
   },
   {

apps/web-app/app/components/form/AttachProduct.vue

@@ -87,8 +87,10 @@ async function onSubmit(event: FormSubmitEvent<AttachProductToMenuCategory>) {
       body: event.data,
     })
 
-    await productStore.update()
-    await menuStore.update()
+    await Promise.all([
+      productStore.update(),
+      menuStore.update(),
+    ])
 
     actionToast.success(toastId, t('toast.category-updated'))
     emit('success')

apps/web-app/app/components/form/CompleteTask.vue

@@ -90,8 +90,10 @@ async function onSubmit(event: FormSubmitEvent<CompleteTask>) {
       body: event.data,
     })
 
-    await taskStore.update()
-    await userStore.update()
+    await Promise.all([
+      taskStore.update(),
+      userStore.update(),
+    ])
 
     actionToast.success(toastId, t('toast.task-completed'))
     emit('success')

apps/web-app/app/components/form/UpdateActivityScheduleItem.vue

@@ -60,15 +60,6 @@
         block
         :label="$t('common.update')"
       />
-
-      <!-- <UButton
-        variant="soft"
-        color="error"
-        size="xl"
-        icon="i-lucide-trash-2"
-        class="aspect-square justify-center"
-        @click="onDelete"
-      /> -->
     </div>
   </UForm>
 </template>
@@ -119,25 +110,4 @@ async function onSubmit(event: FormSubmitEvent<UpdateActivityScheduleItem>) {
     actionToast.error(toastId)
   }
 }
-
-// async function onDelete() {
-//   const toastId = actionToast.start()
-//   emit('submitted')
-
-//   try {
-//     await $fetch(`/api/menu/category/id/${categoryId}`, {
-//       method: 'DELETE',
-//     })
-
-//     await menuStore.update()
-
-//     actionToast.success(toastId, t('toast.category-deleted'))
-//     emit('success')
-
-//     router.push(redirectTo)
-//   } catch (error) {
-//     console.error(error)
-//     actionToast.error(toastId)
-//   }
-// }
 </script>

apps/web-app/app/components/form/UpdateProduct.vue

@@ -109,8 +109,10 @@ async function onSubmit(event: FormSubmitEvent<UpdateProduct>) {
       body: event.data,
     })
 
-    await productStore.update()
-    await menuStore.update()
+    await Promise.all([
+      productStore.update(),
+      menuStore.update(),
+    ])
 
     actionToast.success(toastId, t('toast.product-updated'))
     emit('success')
@@ -129,8 +131,10 @@ async function onDelete() {
       method: 'DELETE',
     })
 
-    await productStore.update()
-    await menuStore.update()
+    await Promise.all([
+      productStore.update(),
+      menuStore.update(),
+    ])
 
     actionToast.success(toastId, t('toast.product-deleted'))
     emit('success')

apps/web-app/app/components/form/UpdateProductVariant.vue

@@ -235,8 +235,10 @@ async function onSubmit(event: FormSubmitEvent<UpdateProductVariant>) {
       body: event.data,
     })
 
-    await productStore.update()
-    await menuStore.update()
+    await Promise.all([
+      productStore.update(),
+      menuStore.update(),
+    ])
 
     actionToast.success(toastId, t('toast.variant-updated'))
     emit('success')
@@ -255,8 +257,10 @@ async function onDelete() {
       method: 'DELETE',
     })
 
-    await productStore.update()
-    await menuStore.update()
+    await Promise.all([
+      productStore.update(),
+      menuStore.update(),
+    ])
 
     actionToast.success(toastId, t('toast.variant-deleted'))
     emit('success')

apps/web-app/app/components/form/UpdateUser.vue

@@ -31,6 +31,14 @@
       />
     </UFormField>
 
+    <UFormField :label="$t('common.phone')" name="phone">
+      <UInput
+        v-model="state.phone"
+        size="xl"
+        class="w-full items-center justify-center"
+      />
+    </UFormField>
+
     <UFormField :label="$t('common.caption')" name="caption">
       <UInput
         v-model="state.caption"
@@ -39,6 +47,16 @@
       />
     </UFormField>
 
+    <UFormField :label="$t('common.gender.title')" name="gender">
+      <USelect
+        v-model="state.gender"
+        :items="getLocalizedGenderForSelect()"
+        :placeholder="$t('common.select')"
+        size="xl"
+        class="w-full"
+      />
+    </UFormField>
+
     <UButton
       type="submit"
       variant="solid"
@@ -56,31 +74,40 @@ import type { FormSubmitEvent } from '@nuxt/ui'
 import type { UpdateUser } from '~~/shared/services/user'
 import { updateUserSchema } from '~~/shared/services/user'
 
+const { userId } = defineProps<{ userId: string }>()
+
 const emit = defineEmits(['success', 'submitted'])
 
 const { t } = useI18n()
 const actionToast = useActionToast()
 
+const partnerStore = usePartnerStore()
 const userStore = useUserStore()
+const user = userStore.find(userId)
 
 const state = ref<Partial<UpdateUser>>({
-  name: userStore.name,
-  surname: userStore.surname,
-  email: userStore.email ?? undefined,
-  caption: userStore.caption,
+  name: user?.name,
+  surname: user?.surname,
+  email: user?.email ?? undefined,
+  phone: user?.phone ?? undefined,
+  caption: user?.caption,
+  gender: user?.gender,
 })
 
 async function onSubmit(event: FormSubmitEvent<UpdateUser>) {
   const toastId = actionToast.start()
   emit('submitted')
 
   try {
-    await $fetch(`/api/user/id/${userStore.id}`, {
+    await $fetch(`/api/user/id/${user?.id}`, {
       method: 'PATCH',
       body: event.data,
     })
 
-    await userStore.update()
+    await Promise.all([
+      userStore.update(),
+      partnerStore.update(),
+    ])
 
     actionToast.success(toastId, t('toast.user-updated'))
     emit('success')

apps/web-app/app/components/modal/UpdateUser.vue

@@ -2,6 +2,7 @@
   <UModal :title="$t('app.update.user.title')">
     <template #body>
       <FormUpdateUser
+        :user-id="userId ?? ''"
         @submitted="overlay.closeAll"
         @success="overlay.closeAll"
       />
@@ -10,5 +11,9 @@
 </template>
 
 <script setup lang="ts">
+defineProps<{
+  userId?: string
+}>()
+
 const overlay = useOverlay()
 </script>

apps/web-app/app/pages/partner/[id]/index.vue

@@ -35,7 +35,11 @@
         </div>
       </UCard>
 
-      <UserCard v-if="partnerUser" :user="partnerUser" />
+      <UserCard
+        v-if="partnerUser"
+        :user="partnerUser"
+        @click="modalUpdateUser.open({ userId: partnerUser.id })"
+      />
 
       <div class="lg:col-span-2">
         <PartnerLegalEntityCard :partner-id="partner?.id ?? ''" :entity="partner?.legalEntity" />
@@ -53,16 +57,21 @@
 </template>
 
 <script setup lang="ts">
+import { ModalUpdateUser } from '#components'
+
 const { t } = useI18n()
 const { params } = useRoute('partner-id')
 
 const partnerStore = usePartnerStore()
 const partner = computed(() => partnerStore.partners.find((partner) => partner.id === params.id))
 
-const partnerUser = computed(() => partner.value?.users.filter((user) => user.type === 'partner')[0])
+const partnerUser = computed(() => partner.value?.users.find((user) => user.type === 'partner'))
 
 const activeAgreements = computed(() => partner.value?.legalEntity?.agreements.filter((agreement) => agreement.isActive))
 
+const overlay = useOverlay()
+const modalUpdateUser = overlay.create(ModalUpdateUser)
+
 useHead({
   title: t('common.partner'),
 })