Team.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. <template>
  2. <div class="border border-divider rounded flex flex-col flex-1">
  3. <div
  4. class="flex flex-1 items-start"
  5. :class="
  6. compact
  7. ? team.myRole === 'OWNER'
  8. ? 'cursor-pointer hover:bg-primaryDark transition hover:border-dividerDark focus-visible:border-dividerDark'
  9. : 'cursor-not-allowed bg-primaryLight'
  10. : ''
  11. "
  12. @click="
  13. compact
  14. ? team.myRole === 'OWNER'
  15. ? $emit('invite-team')
  16. : noPermission()
  17. : ''
  18. "
  19. >
  20. <div class="p-4">
  21. <label
  22. class="font-semibold text-secondaryDark"
  23. :class="{ 'cursor-pointer': compact && team.myRole === 'OWNER' }"
  24. >
  25. {{ team.name || $t("state.nothing_found") }}
  26. </label>
  27. <div class="flex -space-x-1 mt-2 overflow-hidden">
  28. <img
  29. v-for="(member, index) in team.teamMembers"
  30. :key="`member-${index}`"
  31. v-tippy="{ theme: 'tooltip' }"
  32. :title="member.user.displayName"
  33. :src="member.user.photoURL || undefined"
  34. :alt="member.user.displayName"
  35. class="rounded-full h-5 ring-primary ring-2 w-5 inline-block"
  36. loading="lazy"
  37. />
  38. </div>
  39. </div>
  40. </div>
  41. <div v-if="!compact" class="flex flex-shrink-0 items-end justify-between">
  42. <span>
  43. <ButtonSecondary
  44. v-if="team.myRole === 'OWNER'"
  45. svg="edit"
  46. class="rounded-none"
  47. :label="$t('action.edit').toString()"
  48. @click.native="
  49. () => {
  50. $emit('edit-team')
  51. }
  52. "
  53. />
  54. <ButtonSecondary
  55. v-if="team.myRole === 'OWNER'"
  56. svg="user-plus"
  57. class="rounded-none"
  58. :label="$t('team.invite')"
  59. @click.native="
  60. () => {
  61. emit('invite-team')
  62. }
  63. "
  64. />
  65. </span>
  66. <span>
  67. <tippy ref="options" interactive trigger="click" theme="popover" arrow>
  68. <template #trigger>
  69. <ButtonSecondary
  70. v-tippy="{ theme: 'tooltip' }"
  71. :title="$t('action.more')"
  72. svg="more-vertical"
  73. />
  74. </template>
  75. <SmartItem
  76. v-if="team.myRole === 'OWNER'"
  77. svg="edit"
  78. :label="$t('action.edit').toString()"
  79. @click.native="
  80. () => {
  81. $emit('edit-team')
  82. $refs.options.tippy().hide()
  83. }
  84. "
  85. />
  86. <SmartItem
  87. v-if="team.myRole === 'OWNER'"
  88. svg="trash-2"
  89. color="red"
  90. :label="$t('action.delete').toString()"
  91. @click.native="
  92. () => {
  93. deleteTeam()
  94. $refs.options.tippy().hide()
  95. }
  96. "
  97. />
  98. <SmartItem
  99. v-if="!(team.myRole === 'OWNER' && team.ownersCount == 1)"
  100. svg="trash"
  101. :label="$t('team.exit').toString()"
  102. @click.native="
  103. () => {
  104. exitTeam()
  105. $refs.options.tippy().hide()
  106. }
  107. "
  108. />
  109. </tippy>
  110. </span>
  111. </div>
  112. </div>
  113. </template>
  114. <script setup lang="ts">
  115. import { useContext } from "@nuxtjs/composition-api"
  116. import { pipe } from "fp-ts/function"
  117. import * as TE from "fp-ts/TaskEither"
  118. import { TeamMemberRole } from "~/helpers/backend/graphql"
  119. import {
  120. deleteTeam as backendDeleteTeam,
  121. leaveTeam,
  122. } from "~/helpers/backend/mutations/Team"
  123. const props = defineProps<{
  124. team: {
  125. name: string
  126. myRole: TeamMemberRole
  127. ownersCount: number
  128. teamMembers: Array<{
  129. user: {
  130. displayName: string
  131. photoURL: string | null
  132. }
  133. }>
  134. }
  135. teamID: string
  136. compact: boolean
  137. }>()
  138. const emit = defineEmits<{
  139. (e: "edit-team"): void
  140. }>()
  141. const {
  142. app: { i18n },
  143. $toast,
  144. } = useContext()
  145. const t = i18n.t.bind(i18n)
  146. const deleteTeam = () => {
  147. if (!confirm(t("confirm.remove_team").toString())) return
  148. pipe(
  149. backendDeleteTeam(props.teamID),
  150. TE.match(
  151. (err) => {
  152. // TODO: Better errors ? We know the possible errors now
  153. $toast.error(t("error.something_went_wrong").toString(), {
  154. icon: "error_outline",
  155. })
  156. console.error(err)
  157. },
  158. () => {
  159. $toast.success(t("team.deleted").toString(), {
  160. icon: "done",
  161. })
  162. }
  163. )
  164. )() // Tasks (and TEs) are lazy, so call the function returned
  165. }
  166. const exitTeam = () => {
  167. if (!confirm("Are you sure you want to exit this team?")) return
  168. pipe(
  169. leaveTeam(props.teamID),
  170. TE.match(
  171. (err) => {
  172. // TODO: Better errors ?
  173. $toast.error(t("error.something_went_wrong").toString(), {
  174. icon: "error_outline",
  175. })
  176. console.error(err)
  177. },
  178. () => {
  179. $toast.success(t("team.left").toString(), {
  180. icon: "done",
  181. })
  182. }
  183. )
  184. )() // Tasks (and TEs) are lazy, so call the function returned
  185. }
  186. const noPermission = () => {
  187. $toast.error(t("profile.no_permission").toString(), {
  188. icon: "error_outline",
  189. })
  190. }
  191. </script>