Unverified Commit 03111fad authored by Martin Cech's avatar Martin Cech
Browse files

move the link from heading to the body and change to a button 

- add minor text adjustments
- close the modal when clicking on the currently selected storage
parent 97371f14

client/src/components/Dataset/DatasetStorage/DatasetStorage.vue

+6 −8
Original line number Diff line number Diff line
@@ -59,14 +59,7 @@ watch(props, fetch, { immediate: true }); 


<template>

    <div>

        <h2 v-if="includeTitle" class="h-md">

            Dataset Storage

            <RelocateLink

                v-if="storageInfo"

                :dataset-id="datasetId"

                :dataset-storage-details="storageInfo"

                @relocated="fetch" />

        </h2>

        <h2 v-if="includeTitle" class="h-md">Dataset Storage</h2>

        <div v-if="errorMessage" class="error">{{ errorMessage }}</div>

        <LoadingSpan v-else-if="storageInfo == null"> </LoadingSpan>

        <div v-else-if="discarded">
@@ -84,5 +77,10 @@ watch(props, fetch, { immediate: true }); 
        <div v-else>

            <DescribeObjectStore what="This dataset is stored in" :storage-info="storageInfo" />

        </div>

        <RelocateLink

            v-if="storageInfo"

            :dataset-id="datasetId"

            :dataset-storage-details="storageInfo"

            @relocated="fetch" />

    </div>

</template>

client/src/components/Dataset/DatasetStorage/RelocateDialog.vue

+10 −5
Original line number Diff line number Diff line
@@ -13,24 +13,26 @@ defineProps<RelocateProps>(); 


const emit = defineEmits<{

    (e: "relocate", value: string): void;

    (e: "closeModal"): void;

}>();



const fromWhat = "This dataset location in a";

const toWhat = "This dataset will be relocated to";

const fromWhat = "This dataset location is";

const toWhat = "This dataset will be moved to";

</script>



<template>

    <div>

        <p>Relocate the dataset's current object store of:</p>

        <p>Currently the dataset is located in:</p>

        <b-button-group vertical size="lg" class="select-button-group">

            <ObjectStoreSelectButton

                :key="fromObjectStore.object_store_id"

                id-prefix="swap-target"

                class="swap-target-object-store-select-button"

                variant="info"

                :object-store="fromObjectStore" />

                :object-store="fromObjectStore"

                @click="emit('closeModal')" />

        </b-button-group>

        <p>Select a new object store below to relocate the dataset</p>

        <p class="move-to">Select new storage location for the dataset:</p>

        <b-button-group vertical size="lg" class="select-button-group">

            <ObjectStoreSelectButton

                v-for="objectStore in targetObjectStores"
@@ -60,4 +62,7 @@ const toWhat = "This dataset will be relocated to"; 
    margin: auto;

    width: 400px;

}

.move-to {

    margin-top: 2em;

}

</style>

client/src/components/Dataset/DatasetStorage/RelocateLink.vue

+9 −3
Original line number Diff line number Diff line 
<script setup lang="ts">

import { BButton } from "bootstrap-vue";

import { storeToRefs } from "pinia";

import { computed, ref } from "vue";
@@ -70,6 +71,10 @@ const emit = defineEmits<{ 
    (e: "relocated"): void;

}>();



function closeModal() {

    showModal.value = false;

}



async function relocate(objectStoreId: string) {

    try {

        await updateObjectStore(props.datasetId, objectStoreId);
@@ -84,12 +89,13 @@ async function relocate(objectStoreId: string) { 


<template>

    <span class="storage-relocate-link">

        <SelectModal v-if="currentObjectStore" v-model="showModal" title="Relocate Dataset Storage">

        <SelectModal v-if="currentObjectStore" v-model="showModal" title="Move Dataset">

            <RelocateDialog

                :from-object-store="currentObjectStore"

                :target-object-stores="validTargets"

                @relocate="relocate" />

                @relocate="relocate"

                @closeModal="closeModal" />

        </SelectModal>

        <b-link v-if="relocatable" href="#" @click="showModal = true">(relocate)</b-link>

        <BButton v-if="relocatable" @click="showModal = true">Move Dataset</BButton>

    </span>

</template>