Add workflow landing state management with Pinia store and refactor claim logic

<script setup lang="ts">

import { BAlert } from "bootstrap-vue";

import { onMounted, ref } from "vue";

import { storeToRefs } from "pinia";

import { GalaxyApi } from "@/api";

import { useActivityStore } from "@/stores/activityStore";

import { errorMessageAsString } from "@/utils/simple-error";

import { useWorkflowLandingStore } from "@/stores/workflowLandingStore";

import LoadingSpan from "@/components/LoadingSpan.vue";

import WorkflowRun from "@/components/Workflow/Run/WorkflowRun.vue";

    public: false,

});

const workflowId = ref<string | null>(null);

const errorMessage = ref<string | null>(null);

const requestState = ref<Record<string, never> | null>(null);

const instance = ref<boolean>(false);

const store = useWorkflowLandingStore();

const { claimWorkflow } = store;

const { claimState } = storeToRefs(store);

const activityStore = useActivityStore("default");

onMounted(async() => {

    let claim;

    let claimError;

    if (props.public) {

        const { data, error } = await GalaxyApi().GET("/api/workflow_landings/{uuid}", {

            params: {

                path: { uuid: props.uuid },

            },

        });

        claim = data;

        claimError = error;

    } else {

        const { data, error } = await GalaxyApi().POST("/api/workflow_landings/{uuid}/claim", {

            params: {

                path: { uuid: props.uuid },

            },

            body: {

                client_secret: props.secret,

            },

        });

        claim = data;

        claimError = error;

    }

    if (claim) {

        workflowId.value = claim.workflow_id;

        instance.value = claim.workflow_target_type === "workflow";

        requestState.value = claim.request_state;

    } else {

        errorMessage.value = errorMessageAsString(claimError);

    }

// Start claim immediately

claimWorkflow(props.uuid, props.public, props.secret).then(() => {

    activityStore.closeSideBar();

});

</script>

<template>

    <div>

        <div v-if="errorMessage">

        <div v-if="claimState.errorMessage">

            <BAlert variant="danger" show>

                {{ errorMessage }}

                {{ claimState.errorMessage }}

            </BAlert>

        </div>

        <div v-else-if="!workflowId">

        <div v-else-if="!claimState.workflowId">

            <LoadingSpan message="Loading workflow parameters" />

        </div>

        <div v-else>

            <WorkflowRun

                :workflow-id="workflowId"

                :workflow-id="claimState.workflowId"

                :prefer-simple-form="true"

                :request-state="requestState"

                :instance="instance" />

                :request-state="claimState.requestState"

                :instance="claimState.instance" />

        </div>

    </div>

</template>

import { defineStore } from "pinia";

import { ref } from "vue";

import { GalaxyApi } from "@/api";

import { errorMessageAsString } from "@/utils/simple-error";

interface ClaimState {

    workflowId: string | null;

    instance: boolean;

    requestState: Record<string, never> | null;

    errorMessage: string | null;

}

export const useWorkflowLandingStore = defineStore("workflowLanding", () => {

    const claimState = ref<ClaimState>({

        workflowId: null,

        instance: false,

        requestState: null,

        errorMessage: null,

    });

    async function claimWorkflow(uuid: string, isPublic: boolean, secret?: string) {

        let claim;

        let claimError;

        console.debug("Claiming workflow");

        if (isPublic) {

            const { data, error } = await GalaxyApi().GET("/api/workflow_landings/{uuid}", {

                params: {

                    path: { uuid },

                },

            });

            claim = data;

            claimError = error;

        } else {

            const { data, error } = await GalaxyApi().POST("/api/workflow_landings/{uuid}/claim", {

                params: {

                    path: { uuid },

                },

                body: {

                    client_secret: secret,

                },

            });

            claim = data;

            claimError = error;

        }

        if (claim) {

            console.debug("CLaim!", claim);

            claimState.value = {

                workflowId: claim.workflow_id,

                instance: claim.workflow_target_type === "workflow",

                requestState: claim.request_state,

                errorMessage: null,

            };

        } else {

            console.debug("Claim error", claimError);

            claimState.value = {

                workflowId: null,

                instance: false,

                requestState: null,

                errorMessage: errorMessageAsString(claimError),

            };

        }

    }

    return {

        claimState,

        claimWorkflow,

    };

});