MyWorkflowsView.vue

<script setup lang="ts">
import { computed, onMounted, reactive } from "vue";
import type { WorkflowOut, WorkflowVersion } from "@/client/workflow";
import { Status } from "@/client/workflow";
import WorkflowWithVersionsCard from "@/components/workflows/WorkflowWithVersionsCard.vue";
import CreateWorkflowModal from "@/components/workflows/modals/CreateWorkflowModal.vue";
import CardTransitionGroup from "@/components/transitions/CardTransitionGroup.vue";
import UpdateWorkflowModal from "@/components/workflows/modals/UpdateWorkflowModal.vue";
import DeleteModal from "@/components/modals/DeleteModal.vue";
import UpdateWorkflowVersionIconModal from "@/components/workflows/modals/UpdateWorkflowVersionIconModal.vue";
import UpdateWorkflowCredentialsModal from "@/components/workflows/modals/UpdateWorkflowCredentialsModal.vue";
import { useWorkflowStore } from "@/stores/workflows";
import { useWorkflowExecutionStore } from "@/stores/workflowExecutions";

const workflowRepository = useWorkflowStore();
const workflowExecutionRepository = useWorkflowExecutionStore();

const workflowsState = reactive<{
  loading: boolean;
  updateWorkflow: WorkflowOut;
  potentialWorkflowDelete?: WorkflowOut;
  updateIconVersion: WorkflowVersion;
}>({
  loading: true,
  potentialWorkflowDelete: undefined,
  updateWorkflow: {
    short_description: "",
    name: "",
    versions: [
      {
        version: "1.0.0",
        created_at: 0,
        workflow_version_id: "",
        status: Status.CREATED,
        workflow_id: "",
        icon_url: "",
        modes: [],
      },
    ],
    repository_url: "",
    workflow_id: "",
    developer_id: "",
    private: false,
  },
  updateIconVersion: {
    version: "",
    workflow_id: "",
    workflow_version_id: "",
    modes: [],
    icon_url: null,
    created_at: 0,
    status: Status.CREATED,
  },
});

const sortedWorkflows = computed<WorkflowOut[]>(() => {
  const temp = [...workflowRepository.ownWorkflows];
  temp.sort((a, b) => (a.name.toLowerCase() > b.name.toLowerCase() ? 1 : -1));
  return temp;
});

function workflowUpdateClicked(workflow: WorkflowOut) {
  workflowsState.updateWorkflow = workflow;
}

function iconUpdateClicked(version: WorkflowVersion) {
  workflowsState.updateIconVersion = version;
}

function workflowDeleteClicked(workflow: WorkflowOut) {
  workflowsState.potentialWorkflowDelete = workflow;
}

function confirmedWorkflowDelete(workflow_id?: string) {
  if (workflow_id) {
    workflowRepository.deleteWorkflow(workflow_id).finally(() => {
      workflowsState.potentialWorkflowDelete = undefined;
    });
  }
}

function updateIconClicked(version: WorkflowVersion) {
  workflowsState.updateIconVersion = version;
}

onMounted(() => {
  workflowRepository.fetchOwnWorkflows(() => {
    workflowsState.loading = false;
  });
  workflowExecutionRepository.fetchExecutionsForDevStatistics();
});
</script>

<template>
  <create-workflow-modal modal-id="createWorkflowModal" />
  <update-workflow-modal
    :workflow="workflowsState.updateWorkflow"
    modal-id="updateWorkflowModal"
  />
  <delete-modal
    modal-id="deleteWorkflowModal"
    :object-name-delete="workflowsState.potentialWorkflowDelete?.name"
    @confirm-delete="
      confirmedWorkflowDelete(
        workflowsState.potentialWorkflowDelete?.workflow_id,
      )
    "
  />
  <update-workflow-version-icon-modal
    modal-id="updateWorkflowVersionIconModal"
    :workflow-name="
      workflowRepository.comprehensiveWorkflowMapping[
        workflowsState.updateIconVersion.workflow_id
      ]?.name
    "
    :version="workflowsState.updateIconVersion"
  />
  <update-workflow-credentials-modal
    :workflow="workflowsState.updateWorkflow"
    modal-id="updateWorkflowCredentialsModal"
  />
  <div
    class="row border-bottom mb-4 justify-content-between align-items-center pb-2 pe-2"
  >
    <h2 class="w-fit">My Workflows</h2>
    <button
      class="btn btn-lg btn-primary w-fit"
      data-bs-toggle="modal"
      data-bs-target="#createWorkflowModal"
    >
      Create
    </button>
  </div>
  <div v-if="!workflowsState.loading">
    <card-transition-group
      v-if="sortedWorkflows.length > 0"
      class="d-flex flex-wrap align-items-center justify-content-between mt-5"
    >
      <workflow-with-versions-card
        v-for="workflow in sortedWorkflows"
        :key="workflow.workflow_id"
        :workflow="workflow"
        :loading="false"
        @workflow-update-click="workflowUpdateClicked"
        @workflow-update-credentials-click="workflowUpdateClicked"
        @workflow-delete-click="workflowDeleteClicked"
        @workflow-update-icon-click="iconUpdateClicked"
      />
    </card-transition-group>
    <div v-else class="text-center mt-5 fs-2">
      There are currently no workflows that you created.<br />
      <a href="#" data-bs-toggle="modal" data-bs-target="#createWorkflowModal"
        >Create a new one</a
      >
    </div>
  </div>
  <div
    v-else
    class="d-flex flex-wrap align-items-center justify-content-between mt-5"
  >
    <workflow-with-versions-card
      v-for="n in 4"
      :key="n"
      :workflow="{
        workflow_id: '',
        versions: [],
        name: '',
        repository_url: '',
        short_description: '',
        developer_id: '',
        private: false,
      }"
      loading
      @workflow-update-icon-click="updateIconClicked"
    />
  </div>
</template>
<style scoped></style>