feat: improve python actions (#1083)

ui/src/components/reaction/ReactionDisplay.vue

@@ -4,13 +4,17 @@ import DeleteDialog from '@/components/common/DeleteDialog.vue'
 import ReactionForm from '@/components/reaction/ReactionForm.vue'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Separator } from '@/components/ui/separator'
+import { toast } from '@/components/ui/toast'
 
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import { onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
 
 import { pb } from '@/lib/pocketbase'
 import type { Reaction } from '@/lib/types'
 import { handleError } from '@/lib/utils'
 
+const router = useRouter()
 const queryClient = useQueryClient()
 
 const props = defineProps<{
@@ -32,6 +36,35 @@ const updateReactionMutation = useMutation({
   onSuccess: () => queryClient.invalidateQueries({ queryKey: ['reactions'] }),
   onError: handleError
 })
+
+onMounted(() => {
+  pb.collection('reactions').subscribe(props.id, (data) => {
+    if (data.action === 'delete') {
+      toast({
+        title: 'Reaction deleted',
+        description: 'The reaction has been deleted.',
+        variant: 'destructive'
+      })
+
+      router.push({ name: 'reactions' })
+
+      return
+    }
+
+    if (data.action === 'update') {
+      toast({
+        title: 'Reaction updated',
+        description: 'The reaction has been updated.'
+      })
+
+      queryClient.invalidateQueries({ queryKey: ['reactions', props.id] })
+    }
+  })
+})
+
+onUnmounted(() => {
+  pb.collection('reactions').unsubscribe(props.id)
+})
 </script>
 
 <template>
@@ -54,7 +87,7 @@ const updateReactionMutation = useMutation({
 
       <ScrollArea v-if="reaction" class="flex-1">
         <div class="flex max-w-[640px] flex-col gap-4 p-4">
-          <ReactionForm :reaction="reaction" @submit="updateReactionMutation.mutate" hide-cancel />
+          <ReactionForm :reaction="reaction" @submit="updateReactionMutation.mutate" />
         </div>
       </ScrollArea>
     </div>

ui/src/components/reaction/ReactionForm.vue

@@ -166,6 +166,8 @@ watch(
   () => {
     if (equalReaction(values, props.reaction)) {
       submitDisabledReason.value = 'Make changes to save'
+    } else {
+      submitDisabledReason.value = ''
     }
   },
   { immediate: true }
@@ -312,7 +314,7 @@ const curlExample = computed(() => {
           </TooltipContent>
         </Tooltip>
       </TooltipProvider>
-      <slot name="cancel" />
+      <slot name="cancel"></slot>
     </div>
   </form>
 </template>

ui/src/components/reaction/ReactionList.vue

@@ -1,16 +1,19 @@
 <script setup lang="ts">
 import TanView from '@/components/TanView.vue'
 import ResourceListElement from '@/components/common/ResourceListElement.vue'
-import ReactionNewDialog from '@/components/reaction/ReactionNewDialog.vue'
+import { Button } from '@/components/ui/button'
 import { Separator } from '@/components/ui/separator'
 
-import { useQuery } from '@tanstack/vue-query'
-import { useRoute } from 'vue-router'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
+import { onMounted, onUnmounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 
 import { pb } from '@/lib/pocketbase'
 import type { Reaction } from '@/lib/types'
 
 const route = useRoute()
+const router = useRouter()
+const queryClient = useQueryClient()
 
 const {
   isPending,
@@ -47,6 +50,20 @@ const reactionNiceName = (reaction: Reaction) => {
     return 'Unknown'
   }
 }
+
+const openNew = () => {
+  router.push({ name: 'reactions', params: { id: 'new' } })
+}
+
+onMounted(() => {
+  pb.collection('reactions').subscribe('*', () => {
+    queryClient.invalidateQueries({ queryKey: ['reactions'] })
+  })
+})
+
+onUnmounted(() => {
+  pb.collection('reactions').unsubscribe('*')
+})
 </script>
 
 <template>
@@ -55,7 +72,7 @@ const reactionNiceName = (reaction: Reaction) => {
       <div class="flex items-center bg-background px-4 py-2">
         <h1 class="text-xl font-bold">Reactions</h1>
         <div class="ml-auto">
-          <ReactionNewDialog />
+          <Button variant="ghost" @click="openNew"> New Reaction </Button>
         </div>
       </div>
       <Separator />

ui/src/components/reaction/ReactionNew.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import ReactionForm from '@/components/reaction/ReactionForm.vue'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { Separator } from '@/components/ui/separator'
+
+import { useMutation, useQueryClient } from '@tanstack/vue-query'
+import { useRouter } from 'vue-router'
+
+import { pb } from '@/lib/pocketbase'
+import type { Reaction, Ticket } from '@/lib/types'
+import { handleError } from '@/lib/utils'
+
+const queryClient = useQueryClient()
+const router = useRouter()
+
+const addReactionMutation = useMutation({
+  mutationFn: (values: Reaction): Promise<Reaction> => pb.collection('reactions').create(values),
+  onSuccess: (data: Ticket) => {
+    router.push({ name: 'reactions', params: { id: data.id } })
+    queryClient.invalidateQueries({ queryKey: ['reactions'] })
+  },
+  onError: handleError
+})
+</script>
+
+<template>
+  <div class="flex h-full flex-1 flex-col overflow-hidden">
+    <div class="flex min-h-14 items-center bg-background px-4 py-2"></div>
+    <Separator />
+
+    <ScrollArea class="flex-1">
+      <div class="flex max-w-[640px] flex-col gap-4 p-4">
+        <ReactionForm @submit="addReactionMutation.mutate" />
+      </div>
+    </ScrollArea>
+  </div>
+</template>

ui/src/components/reaction/ReactionNewDialog.vue

@@ -1,63 +0,0 @@
-<script setup lang="ts">
-import ReactionForm from '@/components/reaction/ReactionForm.vue'
-import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogScrollContent,
-  DialogTitle,
-  DialogTrigger
-} from '@/components/ui/dialog'
-
-import { useMutation, useQueryClient } from '@tanstack/vue-query'
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-import { pb } from '@/lib/pocketbase'
-import type { Reaction, Ticket } from '@/lib/types'
-import { handleError } from '@/lib/utils'
-
-const queryClient = useQueryClient()
-const router = useRouter()
-
-const isOpen = ref(false)
-
-const addReactionMutation = useMutation({
-  mutationFn: (values: Reaction): Promise<Reaction> => pb.collection('reactions').create(values),
-  onSuccess: (data: Ticket) => {
-    router.push({ name: 'reactions', params: { id: data.id } })
-    queryClient.invalidateQueries({ queryKey: ['reactions'] })
-    isOpen.value = false
-  },
-  onError: handleError
-})
-
-const cancel = () => (isOpen.value = false)
-</script>
-
-<template>
-  <Dialog v-model:open="isOpen">
-    <DialogTrigger as-child>
-      <Button variant="ghost">New Reaction</Button>
-    </DialogTrigger>
-    <DialogContent>
-      <DialogHeader>
-        <DialogTitle>New Reaction</DialogTitle>
-        <DialogDescription>Create a new reaction</DialogDescription>
-      </DialogHeader>
-
-      <DialogScrollContent>
-        <ReactionForm @submit="addReactionMutation.mutate">
-          <template #cancel>
-            <DialogClose as-child>
-              <Button type="button" variant="secondary">Cancel</Button>
-            </DialogClose>
-          </template>
-        </ReactionForm>
-      </DialogScrollContent>
-    </DialogContent>
-  </Dialog>
-</template>