Add node pack actions: install, uninstall, enable, disable, change version (#3016)

Co-authored-by: github-actions <github-actions@github.com>

src/components/dialog/content/manager/button/PackActionButton.vue

@@ -0,0 +1,52 @@
+<template>
+  <Button
+    outlined
+    class="m-0 p-0 rounded-lg border-neutral-700"
+    :class="{
+      'w-full': fullWidth,
+      'w-min-content': !fullWidth
+    }"
+    :disabled="isExecuted"
+    v-bind="$attrs"
+    @click="onClick"
+  >
+    <span class="py-2.5 px-3">
+      <template v-if="isExecuted">
+        {{ loadingMessage ?? $t('g.loading') }}
+      </template>
+      <template v-else>
+        {{ label }}
+      </template>
+    </span>
+  </Button>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { ref } from 'vue'
+
+const {
+  label,
+  loadingMessage,
+  fullWidth = false
+} = defineProps<{
+  label: string
+  loadingMessage?: string
+  fullWidth?: boolean
+}>()
+
+const emit = defineEmits<{
+  action: []
+}>()
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const isExecuted = ref(false)
+
+const onClick = (): void => {
+  isExecuted.value = true
+  emit('action')
+}
+</script>

src/components/dialog/content/manager/button/PackEnableToggle.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="flex items-center">
+    <ToggleSwitch
+      :model-value="isEnabled"
+      :disabled="isLoading"
+      aria-label="Enable or disable pack"
+      @update:model-value="onToggle"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { debounce } from 'lodash'
+import ToggleSwitch from 'primevue/toggleswitch'
+import { computed, ref } from 'vue'
+
+import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import {
+  InstallPackParams,
+  ManagerChannel,
+  SelectedVersion
+} from '@/types/comfyManagerTypes'
+import type { components } from '@/types/comfyRegistryTypes'
+
+const TOGGLE_DEBOUNCE_MS = 300
+
+const { nodePack } = defineProps<{
+  nodePack: components['schemas']['Node']
+}>()
+
+const managerStore = useComfyManagerStore()
+const isLoading = ref(false)
+
+const isEnabled = computed(() => managerStore.isPackEnabled(nodePack.id))
+const version = computed(() => {
+  const id = nodePack.id
+  if (!id) return SelectedVersion.NIGHTLY
+  return (
+    managerStore.installedPacks[id]?.ver ??
+    nodePack.latest_version?.version ??
+    SelectedVersion.NIGHTLY
+  )
+})
+
+const handleEnable = async () => {
+  if (!nodePack.id) return
+
+  // Enable is done by using the install endpoint with a disabled pack
+  managerStore.installPack.call({
+    id: nodePack.id,
+    version: version.value,
+    selected_version: version.value,
+    repository: nodePack.repository ?? '',
+    channel: ManagerChannel.DEFAULT,
+    mode: 'default' as InstallPackParams['mode']
+  })
+}
+
+const handleDisable = async () => {
+  managerStore.disablePack({
+    id: nodePack.id,
+    version: version.value
+  })
+}
+
+const handleToggle = async (enable: boolean) => {
+  if (isLoading.value) return
+
+  isLoading.value = true
+  if (enable) {
+    await handleEnable()
+  } else {
+    await handleDisable()
+  }
+  isLoading.value = false
+}
+
+const onToggle = debounce(handleToggle, TOGGLE_DEBOUNCE_MS)
+</script>

src/components/dialog/content/manager/button/PackInstallButton.vue

@@ -0,0 +1,61 @@
+<template>
+  <PackActionButton
+    v-bind="$attrs"
+    :label="
+      nodePacks.length > 1 ? $t('manager.installSelected') : $t('g.install')
+    "
+    severity="secondary"
+    :loading-message="$t('g.installing')"
+    @action="installAllPacks"
+  />
+</template>
+
+<script setup lang="ts">
+import PackActionButton from '@/components/dialog/content/manager/button/PackActionButton.vue'
+import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import {
+  ManagerChannel,
+  ManagerDatabaseSource,
+  SelectedVersion
+} from '@/types/comfyManagerTypes'
+import type { components } from '@/types/comfyRegistryTypes'
+
+type NodePack = components['schemas']['Node']
+
+const { nodePacks } = defineProps<{
+  nodePacks: NodePack[]
+}>()
+
+const managerStore = useComfyManagerStore()
+
+const createPayload = (installItem: NodePack) => {
+  const isUnclaimedPack = installItem.publisher?.name === 'Unclaimed'
+  const versionToInstall = isUnclaimedPack
+    ? SelectedVersion.NIGHTLY
+    : installItem.latest_version?.version ?? SelectedVersion.LATEST
+
+  return {
+    id: installItem.id,
+    repository: installItem.repository ?? '',
+    channel: ManagerChannel.DEV,
+    mode: ManagerDatabaseSource.CACHE,
+    selected_version: versionToInstall,
+    version: versionToInstall
+  }
+}
+
+const installPack = (item: NodePack) =>
+  managerStore.installPack.call(createPayload(item))
+
+const installAllPacks = async () => {
+  if (!nodePacks?.length) return
+
+  const uninstalledPacks = nodePacks.filter(
+    (pack) => !managerStore.isPackInstalled(pack.id)
+  )
+  if (!uninstalledPacks.length) return
+
+  await Promise.all(uninstalledPacks.map(installPack))
+  managerStore.installPack.clear()
+}
+</script>

src/components/dialog/content/manager/button/PackUninstallButton.vue

@@ -0,0 +1,43 @@
+<template>
+  <PackActionButton
+    v-bind="$attrs"
+    :label="
+      nodePacks.length > 1
+        ? $t('manager.uninstallSelected')
+        : $t('manager.uninstall')
+    "
+    severity="danger"
+    :loading-message="$t('manager.uninstalling')"
+    @action="uninstallItems"
+  />
+</template>
+
+<script setup lang="ts">
+import PackActionButton from '@/components/dialog/content/manager/button/PackActionButton.vue'
+import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import type { ManagerPackInfo } from '@/types/comfyManagerTypes'
+import type { components } from '@/types/comfyRegistryTypes'
+
+type NodePack = components['schemas']['Node']
+
+const { nodePacks } = defineProps<{
+  nodePacks: NodePack[]
+}>()
+
+const managerStore = useComfyManagerStore()
+
+const createPayload = (uninstallItem: NodePack): ManagerPackInfo => {
+  return {
+    id: uninstallItem.id,
+    version: uninstallItem.latest_version?.version
+  }
+}
+
+const uninstallPack = (item: NodePack) =>
+  managerStore.uninstallPack(createPayload(item))
+
+const uninstallItems = async () => {
+  if (!nodePacks?.length) return
+  await Promise.all(nodePacks.map(uninstallPack))
+}
+</script>