From b8aefdf2f8aea3217691ec7c96aa6ff90f417d28 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 29 Feb 2024 17:17:02 +0100
Subject: [PATCH 01/13] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Chan?=
 =?UTF-8?q?geDatatypeTab`=20to=20composition=20API=20and=20`typeScript`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Collections/common/ChangeDatatypeTab.vue  | 84 +++++++++----------
 1 file changed, 41 insertions(+), 43 deletions(-)

diff --git a/client/src/components/Collections/common/ChangeDatatypeTab.vue b/client/src/components/Collections/common/ChangeDatatypeTab.vue
index b5844d33be4..1e410818afc 100644
--- a/client/src/components/Collections/common/ChangeDatatypeTab.vue
+++ b/client/src/components/Collections/common/ChangeDatatypeTab.vue
@@ -1,14 +1,53 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import Multiselect from "vue-multiselect";
+
+import localize from "@/utils/localization";
+
+interface Props {
+    // TODO: Replace with actual datatype type
+    datatypes: any[];
+    datatypeFromElements: string;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    // TODO: Replace with actual datatype type
+    (e: "clicked-save", datatype: any): void;
+}>();
+
+const currentDatatype = ref(props.datatypeFromElements);
+const selectedDatatype = ref(props.datatypes.find((element) => element.id == props.datatypeFromElements));
+
+const hasSelectedDatatype = computed(() => {
+    return Boolean(selectedDatatype.value);
+});
+const enableSave = computed(() => {
+    return hasSelectedDatatype.value && selectedDatatype.value.id != currentDatatype.value;
+});
+
+function clickedSave() {
+    emit("clicked-save", selectedDatatype.value);
+
+    currentDatatype.value = selectedDatatype.value.id;
+}
+</script>
+
 <template>
     <div>
         <div>
             <span class="float-left h-sm">Change Datatype/Extension of all elements in collection</span>
+
             <div class="text-right">
                 <button class="save-datatype-edit btn btn-primary" :disabled="!enableSave" @click="clickedSave">
-                    {{ l("Save") }}
+                    {{ localize("Save") }}
                 </button>
             </div>
         </div>
-        <b>{{ l("New Type") }}: </b>
+
+        <b>{{ localize("New Type") }}: </b>
+
         <Multiselect
             v-if="hasSelectedDatatype"
             v-model="selectedDatatype"
@@ -23,44 +62,3 @@
         </Multiselect>
     </div>
 </template>
-<script>
-import Multiselect from "vue-multiselect";
-
-export default {
-    components: { Multiselect },
-    props: {
-        datatypes: {
-            type: Array,
-            required: true,
-        },
-        datatypeFromElements: {
-            type: String,
-            required: true,
-        },
-    },
-    data: function () {
-        return {
-            selectedDatatype: {},
-            currentDatatype: "",
-        };
-    },
-    computed: {
-        hasSelectedDatatype() {
-            return Boolean(this.selectedDatatype);
-        },
-        enableSave() {
-            return this.hasSelectedDatatype && this.selectedDatatype.id != this.currentDatatype;
-        },
-    },
-    created() {
-        this.selectedDatatype = this.datatypes.find((element) => element.id == this.datatypeFromElements);
-        this.currentDatatype = this.datatypeFromElements;
-    },
-    methods: {
-        clickedSave: function () {
-            this.$emit("clicked-save", this.selectedDatatype);
-            this.currentDatatype = this.selectedDatatype.id;
-        },
-    },
-};
-</script>

From 72b13850f5be276d559e3e00ec515a2012347a48 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 29 Feb 2024 17:18:20 +0100
Subject: [PATCH 02/13] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Clic?=
 =?UTF-8?q?kToEdit`=20to=20composition=20API=20and=20`typeScript`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Collections/common/ClickToEdit.vue        | 57 +++++++++----------
 1 file changed, 27 insertions(+), 30 deletions(-)

diff --git a/client/src/components/Collections/common/ClickToEdit.vue b/client/src/components/Collections/common/ClickToEdit.vue
index f5e70406f62..2839c5f510f 100644
--- a/client/src/components/Collections/common/ClickToEdit.vue
+++ b/client/src/components/Collections/common/ClickToEdit.vue
@@ -1,3 +1,28 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+interface Props {
+    value: string;
+    title?: string;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "input", value: string): void;
+}>();
+
+const editable = ref(false);
+const localValue = ref(props.value);
+
+watch(
+    () => localValue.value,
+    (newLocalValue) => {
+        emit("input", newLocalValue);
+    }
+);
+</script>
+
 <template>
     <input
         v-if="editable"
@@ -6,41 +31,13 @@
         contenteditable
         @blur="editable = false"
         @keyup.enter="editable = false" />
+
     <label v-else @click="editable = true">
         {{ localValue }}
     </label>
 </template>
 
-<script>
-export default {
-    props: {
-        value: {
-            required: true,
-            type: String,
-        },
-        title: {
-            required: false,
-            type: String,
-        },
-    },
-    data: function () {
-        return {
-            editable: false,
-            localValue: this.value,
-        };
-    },
-    watch: {
-        localValue(newValue) {
-            this.$emit("input", newValue);
-        },
-        value(newValue) {
-            this.localValue = newValue;
-        },
-    },
-};
-</script>
-
-<style>
+<style scoped lang="scss">
 .click-to-edit-input {
     width: 600px;
     line-height: 1 !important;

From 4f5cd4e6b52fed269ec645d334b2b7146628b228 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 29 Feb 2024 17:21:20 +0100
Subject: [PATCH 03/13] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Coll?=
 =?UTF-8?q?ectionCreator`=20to=20composition=20API=20and=20`typeScript`=20?=
 =?UTF-8?q?and=20import=20missing=20icons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Collections/common/CollectionCreator.vue  | 158 +++++++++---------
 1 file changed, 77 insertions(+), 81 deletions(-)

diff --git a/client/src/components/Collections/common/CollectionCreator.vue b/client/src/components/Collections/common/CollectionCreator.vue
index f2c58de94f0..9d02b00855d 100644
--- a/client/src/components/Collections/common/CollectionCreator.vue
+++ b/client/src/components/Collections/common/CollectionCreator.vue
@@ -1,3 +1,55 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { computed, ref, watch } from "vue";
+
+import localize from "@/utils/localization";
+
+library.add(faChevronDown, faChevronUp);
+
+interface Props {
+    oncancel: () => void;
+    hideSourceItems: boolean;
+    suggestedName?: string;
+    renderExtensionsToggle?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    suggestedName: "",
+});
+
+const emit = defineEmits<{
+    (e: "remove-extensions-toggle"): void;
+    (e: "clicked-create", value: string): void;
+    (e: "onUpdateHideSourceItems", value: boolean): void;
+}>();
+
+const isExpanded = ref(false);
+const collectionName = ref(props.suggestedName);
+const localHideSourceItems = ref(props.hideSourceItems);
+
+const validInput = computed(() => {
+    return collectionName.value.length > 0;
+});
+
+function clickForHelp() {
+    isExpanded.value = !isExpanded.value;
+    return isExpanded.value;
+}
+
+function cancelCreate() {
+    props.oncancel();
+}
+
+watch(
+    () => localHideSourceItems.value,
+    () => {
+        emit("onUpdateHideSourceItems", localHideSourceItems.value);
+    }
+);
+</script>
+
 <template>
     <div class="collection-creator">
         <div class="header flex-row no-flex">
@@ -6,69 +58,78 @@
                     class="more-help"
                     href="javascript:void(0);"
                     role="button"
-                    :title="titleForHelp"
-                    @click="_clickForHelp">
+                    :title="localize('Expand or Close Help')"
+                    @click="clickForHelp">
                     <div v-if="!isExpanded">
-                        <i class="fas fa-chevron-down"></i>
+                        <FontAwesomeIcon :icon="faChevronDown" />
                     </div>
                     <div v-else>
-                        <i class="fas fa-chevron-up"></i>
+                        <FontAwesomeIcon :icon="faChevronUp" />
                     </div>
                 </a>
+
                 <div class="help-content">
                     <!-- each collection that extends this will add their own help content -->
                     <slot name="help-content"></slot>
+
                     <a
                         class="more-help"
                         href="javascript:void(0);"
                         role="button"
-                        :title="titleForHelp"
-                        @click="_clickForHelp">
+                        :title="localize('Expand or Close Help')"
+                        @click="clickForHelp">
                     </a>
                 </div>
             </div>
         </div>
+
         <div class="middle flex-row flex-row-container">
             <slot name="middle-content"></slot>
         </div>
+
         <div class="footer flex-row no-flex">
             <div class="attributes clear">
                 <div class="clear">
                     <label v-if="renderExtensionsToggle" class="setting-prompt float-right">
-                        {{ removeFileExtensionsText }}
+                        {{ localize("Remove file extensions?") }}
                         <input
                             class="remove-extensions float-right"
                             type="checkbox"
                             checked
-                            @click="$emit('remove-extensions-toggle')" />
+                            @click="emit('remove-extensions-toggle')" />
                     </label>
+
                     <label class="setting-prompt float-right">
-                        {{ hideOriginalsText }}
+                        {{ localize("Hide original elements?") }}
                         <input v-model="localHideSourceItems" class="hide-originals float-right" type="checkbox" />
                     </label>
                 </div>
+
                 <div class="clear">
                     <input
                         v-model="collectionName"
                         class="collection-name form-control float-right"
-                        :placeholder="placeholderEnterName" />
+                        :placeholder="localize('Enter a name for your new collection')" />
+
                     <div class="collection-name-prompt float-right">
-                        {{ l("Name:") }}
+                        {{ localize("Name:") }}
                     </div>
                 </div>
             </div>
+
             <div class="actions clear vertically-spaced">
                 <div class="float-left">
-                    <button class="cancel-create btn" tabindex="-1" @click="_cancelCreate">
-                        {{ l("Cancel") }}
+                    <button class="cancel-create btn" tabindex="-1" @click="cancelCreate">
+                        {{ localize("Cancel") }}
                     </button>
                 </div>
+
                 <div class="main-options float-right">
                     <button
                         class="create-collection btn btn-primary"
                         :disabled="!validInput"
-                        @click="$emit('clicked-create', collectionName)">
-                        {{ l("Create collection") }}
+                        @click="emit('clicked-create', collectionName)">
+                        {{ localize("Create collection") }}
                     </button>
                 </div>
             </div>
@@ -76,72 +137,7 @@
     </div>
 </template>
 
-<script>
-import _l from "utils/localization";
-
-export default {
-    props: {
-        oncancel: {
-            type: Function,
-            required: true,
-        },
-        renderExtensionsToggle: {
-            type: Boolean,
-            default: false,
-        },
-        hideSourceItems: {
-            type: Boolean,
-            required: true,
-        },
-        suggestedName: {
-            type: String,
-            required: false,
-            default: "",
-        },
-    },
-    data: function () {
-        return {
-            titleForHelp: _l("Expand or Close Help"),
-            hideOriginalsText: _l("Hide original elements?"),
-            titleMoreHelp: _l("Close and show more help"),
-            placeholderEnterName: _l("Enter a name for your new collection"),
-            dropdownText: _l("Create a <i>single</> pair"),
-            isExpanded: false,
-            collectionName: this.suggestedName,
-            removeFileExtensionsText: "Remove file extensions?",
-            localHideSourceItems: this.hideSourceItems,
-        };
-    },
-    computed: {
-        validInput: function () {
-            return this.collectionName.length > 0;
-        },
-    },
-    watch: {
-        localHideSourceItems() {
-            this.$emit("onUpdateHideSourceItems", this.localHideSourceItems);
-        },
-    },
-    methods: {
-        l(str) {
-            // _l conflicts private methods of Vue internals, expose as l instead
-            return _l(str);
-        },
-        _clickForHelp: function () {
-            this.isExpanded = !this.isExpanded;
-            return this.isExpanded;
-        },
-        _cancelCreate: function () {
-            this.oncancel();
-        },
-        _getName: function () {
-            return this.collectionName;
-        },
-    },
-};
-</script>
-
-<style lang="scss">
+<style scoped lang="scss">
 $fa-font-path: "../../../../node_modules/@fortawesome/fontawesome-free/webfonts/";
 @import "~@fortawesome/fontawesome-free/scss/_variables";
 @import "~@fortawesome/fontawesome-free/scss/solid";

From a42c60acc13615f8594d286dd465cd8f5e7885ac Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 29 Feb 2024 17:22:54 +0100
Subject: [PATCH 04/13] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Coll?=
 =?UTF-8?q?ectionEditView`=20to=20composition=20API=20and=20`typeScript`?=
 =?UTF-8?q?=20and=20import=20missing=20icons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Collections/common/CollectionEditView.vue | 311 ++++++++++--------
 1 file changed, 166 insertions(+), 145 deletions(-)

diff --git a/client/src/components/Collections/common/CollectionEditView.vue b/client/src/components/Collections/common/CollectionEditView.vue
index cea06cf5c29..a209d9e5470 100644
--- a/client/src/components/Collections/common/CollectionEditView.vue
+++ b/client/src/components/Collections/common/CollectionEditView.vue
@@ -1,19 +1,152 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faBars, faCog, faDatabase, faTable, faUser } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import axios from "axios";
+import { BAlert, BTab, BTabs } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+import { computed, ref } from "vue";
+
+import { DatatypesProvider, DbKeyProvider, SuitableConvertersProvider } from "@/components/providers";
+import { useConfig } from "@/composables/config";
+import { useCollectionAttributesStore } from "@/stores/collectionAttributesStore";
+import { useHistoryStore } from "@/stores/historyStore";
+import localize from "@/utils/localization";
+import { prependPath } from "@/utils/redirect";
+import { errorMessageAsString } from "@/utils/simple-error";
+
+import { HistoryContentBulkOperationPayload, updateHistories } from "./services";
+
+import ChangeDatatypeTab from "@/components/Collections/common/ChangeDatatypeTab.vue";
+import DatabaseEditTab from "@/components/Collections/common/DatabaseEditTab.vue";
+import SuitableConvertersTab from "@/components/Collections/common/SuitableConvertersTab.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
+
+library.add(faBars, faCog, faDatabase, faTable, faUser);
+
+interface Props {
+    collectionId: string;
+}
+
+const props = defineProps<Props>();
+
+const { config, isConfigLoaded } = useConfig(true);
+const collectionAttributesStore = useCollectionAttributesStore();
+
+const historyStore = useHistoryStore();
+const { currentHistoryId } = storeToRefs(historyStore);
+
+const jobError = ref(null);
+const errorMessage = ref("");
+const noQuotaIncreaseMessage = ref("Your quota will not increase.");
+const newCollectionMessage = ref("This will create a new collection in your History.");
+const infoMessage = ref("This will create a new collection in your History. Your quota will not increase.");
+const expectWaitTimeMessage = ref("This operation might take a short while, depending on the size of your collection.");
+
+const attributesData = computed(() => {
+    return collectionAttributesStore.getAttributes(props.collectionId);
+});
+const databaseKeyFromElements = computed(() => {
+    return attributesData.value?.dbkey;
+});
+const datatypeFromElements = computed(() => {
+    return attributesData.value?.extension;
+});
+
+function updateInfoMessage(strMessage: string) {
+    infoMessage.value = strMessage;
+}
+
+// TODO: Replace with actual datatype type
+async function clickedSave(attribute: string, newValue: any) {
+    const url = prependPath(`/api/dataset_collections/${props.collectionId}/copy`);
+    const data: { dbkey?: string } = {};
+
+    if (attribute == "dbkey") {
+        data["dbkey"] = newValue.id;
+    } else {
+        // TODO: extend this to other attributes that could be changed
+        console.error(`Changing ${attribute} not implemented`);
+        return;
+    }
+
+    try {
+        await axios.post(url, data).catch(handleError);
+    } catch (err) {
+        errorMessage.value = errorMessageAsString(err, "History import failed.");
+    }
+}
+
+// TODO: Replace with actual datatype type
+async function clickedConvert(selectedConverter: any) {
+    const url = prependPath(`/api/tools/${selectedConverter.tool_id}/convert`);
+    const data = {
+        src: "hdca",
+        id: props.collectionId,
+        source_type: selectedConverter.original_type,
+        target_type: selectedConverter.target_type,
+    };
+
+    try {
+        await axios.post(url, data).catch(handleError);
+    } catch (err) {
+        errorMessage.value = errorMessageAsString(err, "History import failed.");
+    }
+}
+
+// TODO: Replace with actual datatype type
+async function clickedDatatypeChange(selectedDatatype: any) {
+    const data: HistoryContentBulkOperationPayload = {
+        items: [
+            {
+                history_content_type: "dataset_collection",
+                id: props.collectionId,
+            },
+        ],
+        operation: "change_datatype",
+        params: {
+            type: "change_datatype",
+            datatype: selectedDatatype.id,
+        },
+    };
+
+    try {
+        await updateHistories(currentHistoryId.value ?? "", data);
+    } catch (err) {
+        errorMessage.value = errorMessageAsString(err, "History import failed.");
+    }
+}
+
+function handleError(err: any) {
+    errorMessage.value = errorMessageAsString(err, "History import failed.");
+
+    if (err?.data?.stderr) {
+        jobError.value = err.data;
+    }
+}
+</script>
+
 <template>
     <div aria-labelledby="collection-edit-view-heading">
-        <h1 id="collection-edit-view-heading" class="h-lg">{{ l("Edit Collection Attributes") }}</h1>
-        <b-alert show variant="info" dismissible>
-            {{ l(infoMessage) }}
-        </b-alert>
-        <div v-if="jobError">
-            <b-alert show variant="danger" dismissible>
-                {{ l(errorMessage) }}
-            </b-alert>
-        </div>
-        <b-tabs content-class="mt-3">
-            <b-tab
+        <h1 id="collection-edit-view-heading" class="h-lg">{{ localize("Edit Collection Attributes") }}</h1>
+
+        <BAlert show variant="info" dismissible>
+            {{ localize(infoMessage) }}
+        </BAlert>
+
+        <BAlert v-if="jobError" show variant="danger" dismissible>
+            {{ localize(errorMessage) }}
+        </BAlert>
+
+        <BTabs content-class="mt-3">
+            <BTab
                 title-link-class="collection-edit-change-genome-nav"
                 @click="updateInfoMessage(newCollectionMessage + ' ' + noQuotaIncreaseMessage)">
-                <template v-slot:title> <FontAwesomeIcon icon="table" /> &nbsp; {{ l("Database/Build") }}</template>
+                <template v-slot:title>
+                    <FontAwesomeIcon :icon="faTable" />
+                    &nbsp; {{ localize("Database/Build") }}
+                </template>
+
                 <DbKeyProvider v-slot="{ item, loading }">
                     <div v-if="loading"><b-spinner label="Loading Database/Builds..."></b-spinner></div>
                     <div v-else>
@@ -24,23 +157,35 @@
                             @clicked-save="clickedSave" />
                     </div>
                 </DbKeyProvider>
-            </b-tab>
+            </BTab>
+
             <SuitableConvertersProvider :id="collectionId" v-slot="{ item }">
-                <b-tab
+                <BTab
                     v-if="item && item.length"
                     title-link-class="collection-edit-convert-datatype-nav"
                     @click="updateInfoMessage(newCollectionMessage)">
-                    <template v-slot:title> <FontAwesomeIcon icon="cog" /> &nbsp; {{ l("Convert") }}</template>
+                    <template v-slot:title>
+                        <FontAwesomeIcon :icon="faCog" />
+                        &nbsp; {{ localize("Convert") }}
+                    </template>
+
                     <SuitableConvertersTab :suitable-converters="item" @clicked-convert="clickedConvert" />
-                </b-tab>
+                </BTab>
             </SuitableConvertersProvider>
-            <b-tab
+
+            <BTab
                 v-if="isConfigLoaded && config.enable_celery_tasks"
                 title-link-class="collection-edit-change-datatype-nav"
                 @click="updateInfoMessage(expectWaitTimeMessage)">
-                <template v-slot:title> <FontAwesomeIcon icon="database" /> &nbsp; {{ l("Datatypes") }} </template>
+                <template v-slot:title>
+                    <FontAwesomeIcon :icon="faDatabase" />
+                    &nbsp; {{ localize("Datatypes") }}
+                </template>
+
                 <DatatypesProvider v-slot="{ item, loading }">
-                    <div v-if="loading"><LoadingSpan :message="loadingString" /></div>
+                    <div v-if="loading">
+                        <LoadingSpan message="Loading Datatypes" />
+                    </div>
                     <div v-else>
                         <ChangeDatatypeTab
                             v-if="item && datatypeFromElements"
@@ -49,131 +194,7 @@
                             @clicked-save="clickedDatatypeChange" />
                     </div>
                 </DatatypesProvider>
-            </b-tab>
-        </b-tabs>
+            </BTab>
+        </BTabs>
     </div>
 </template>
-
-<script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faBars, faCog, faDatabase, faTable, faUser } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import axios from "axios";
-import BootstrapVue from "bootstrap-vue";
-import { mapState } from "pinia";
-import { prependPath } from "utils/redirect";
-import { errorMessageAsString } from "utils/simple-error";
-import Vue from "vue";
-
-import { useConfig } from "@/composables/config";
-import { useCollectionAttributesStore } from "@/stores/collectionAttributesStore";
-import { useHistoryStore } from "@/stores/historyStore";
-
-import { DatatypesProvider, DbKeyProvider, SuitableConvertersProvider } from "../../providers";
-import ChangeDatatypeTab from "./ChangeDatatypeTab";
-import DatabaseEditTab from "./DatabaseEditTab";
-import SuitableConvertersTab from "./SuitableConvertersTab";
-
-import LoadingSpan from "@/components/LoadingSpan.vue";
-
-library.add(faDatabase, faTable, faBars, faUser, faCog);
-
-Vue.use(BootstrapVue);
-export default {
-    components: {
-        DatabaseEditTab,
-        SuitableConvertersTab,
-        FontAwesomeIcon,
-        DbKeyProvider,
-        SuitableConvertersProvider,
-        ChangeDatatypeTab,
-        DatatypesProvider,
-        LoadingSpan,
-    },
-    props: {
-        collectionId: {
-            type: String,
-            required: true,
-        },
-    },
-    setup() {
-        const { config, isConfigLoaded } = useConfig(true);
-        return { config, isConfigLoaded };
-    },
-    data: function () {
-        return {
-            errorMessage: null,
-            jobError: null,
-            noQuotaIncrease: true,
-            loadingString: "Loading Datatypes",
-            infoMessage: "This will create a new collection in your History. Your quota will not increase.", //initialmessage on first/database tab
-            newCollectionMessage: "This will create a new collection in your History.",
-            noQuotaIncreaseMessage: "Your quota will not increase.",
-            expectWaitTimeMessage: "This operation might take a short while, depending on the size of your collection.",
-        };
-    },
-    computed: {
-        ...mapState(useHistoryStore, ["currentHistoryId"]),
-        ...mapState(useCollectionAttributesStore, ["getAttributes"]),
-        attributesData() {
-            return this.getAttributes(this.collectionId);
-        },
-        databaseKeyFromElements: function () {
-            return this.attributesData?.dbkey;
-        },
-        datatypeFromElements: function () {
-            return this.attributesData?.extension;
-        },
-    },
-    methods: {
-        updateInfoMessage: function (strMessage) {
-            this.infoMessage = strMessage;
-        },
-        clickedSave: function (attribute, newValue) {
-            const url = prependPath(`/api/dataset_collections/${this.collectionId}/copy`);
-            const data = {};
-            if (attribute == "dbkey") {
-                data["dbkey"] = newValue.id;
-            } else {
-                // TODO: extend this to other attributes that could be changed
-                console.error(`Changing ${attribute} not implemented`);
-                return;
-            }
-            axios.post(url, data).catch(this.handleError);
-        },
-        clickedConvert: function (selectedConverter) {
-            const url = prependPath(`/api/tools/${selectedConverter.tool_id}/convert`);
-            const data = {
-                src: "hdca",
-                id: this.collectionId,
-                source_type: selectedConverter.original_type,
-                target_type: selectedConverter.target_type,
-            };
-            axios.post(url, data).catch(this.handleError);
-        },
-        clickedDatatypeChange: function (selectedDatatype) {
-            const url = prependPath(`/api/histories/${this.currentHistoryId}/contents/bulk`);
-            const data = {
-                operation: "change_datatype",
-                items: [
-                    {
-                        history_content_type: "dataset_collection",
-                        id: this.collectionId,
-                    },
-                ],
-                params: {
-                    type: "change_datatype",
-                    datatype: selectedDatatype.id,
-                },
-            };
-            axios.put(url, data).catch(this.handleError);
-        },
-        handleError: function (err) {
-            this.errorMessage = errorMessageAsString(err, "History import failed.");
-            if (err?.data?.stderr) {
-                this.jobError = err.data;
-            }
-        },
-    },
-};
-</script>

From 3c83732a2ab2704e02072180ff2643fc5db3d654 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 29 Feb 2024 17:23:32 +0100
Subject: [PATCH 05/13] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Data?=
 =?UTF-8?q?baseEditTab`=20to=20composition=20API=20and=20`typeScript`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Collections/common/DatabaseEditTab.vue    | 68 +++++++++----------
 1 file changed, 33 insertions(+), 35 deletions(-)

diff --git a/client/src/components/Collections/common/DatabaseEditTab.vue b/client/src/components/Collections/common/DatabaseEditTab.vue
index cd56598f0b6..f8cfffac606 100644
--- a/client/src/components/Collections/common/DatabaseEditTab.vue
+++ b/client/src/components/Collections/common/DatabaseEditTab.vue
@@ -1,17 +1,46 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import Multiselect from "vue-multiselect";
+
+import localize from "@/utils/localization";
+
+interface Props {
+    // TODO: Replace with actual datatype type
+    genomes: { id: string; text: string }[];
+    databaseKeyFromElements: string;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    // TODO: Replace with actual datatype type
+    (event: "clicked-save", attribute: string, newValue: any): void;
+}>();
+
+const selectedGenome = computed(() => props.genomes.find((element) => element.id == props.databaseKeyFromElements));
+
+function clickedSave() {
+    emit("clicked-save", "dbkey", selectedGenome.value);
+}
+</script>
+
 <template>
     <div>
         <div>
             <span class="float-left h-sm">Change Database/Build of all elements in collection</span>
+
             <div class="text-right">
                 <button
                     class="save-dbkey-edit btn btn-primary"
-                    :disabled="selectedGenome.id == databaseKeyFromElements"
+                    :disabled="selectedGenome?.id == databaseKeyFromElements"
                     @click="clickedSave">
-                    {{ l("Save") }}
+                    {{ localize("Save") }}
                 </button>
             </div>
         </div>
-        <b>{{ l("Database/Build") }}: </b>
+
+        <b>{{ localize("Database/Build") }}: </b>
+
         <Multiselect
             v-model="selectedGenome"
             class="database-dropdown"
@@ -21,38 +50,7 @@
             :options="genomes"
             :searchable="true"
             :allow-empty="false">
-            {{ selectedGenome.text }}
+            {{ selectedGenome?.text }}
         </Multiselect>
     </div>
 </template>
-<script>
-import Multiselect from "vue-multiselect";
-
-export default {
-    components: { Multiselect },
-    props: {
-        genomes: {
-            type: Array,
-            required: true,
-        },
-        databaseKeyFromElements: {
-            type: String,
-            required: true,
-        },
-    },
-    data: function () {
-        return {
-            selectedGenome: {},
-        };
-    },
-    created() {
-        this.selectedGenome = this.genomes.find((element) => element.id == this.databaseKeyFromElements);
-    },
-    methods: {
-        clickedSave: function () {
-            this.$emit("clicked-save", "dbkey", this.selectedGenome);
-            this.selectedGenome = this.genomes.find((element) => element.id == this.databaseKeyFromElements);
-        },
-    },
-};
-</script>

From 4d2a74c7ca3cd5b5b31f6e0f29071fbf3b7ee157 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 1 Mar 2024 09:32:26 +0100
Subject: [PATCH 06/13] =?UTF-8?q?=E2=9C=A8:=20create=20collection=20common?=
 =?UTF-8?q?=20services?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Collections/common/services.ts | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 client/src/components/Collections/common/services.ts

diff --git a/client/src/components/Collections/common/services.ts b/client/src/components/Collections/common/services.ts
new file mode 100644
index 00000000000..df832a62810
--- /dev/null
+++ b/client/src/components/Collections/common/services.ts
@@ -0,0 +1,8 @@
+import { type components, fetcher } from "@/api/schema";
+
+export type HistoryContentBulkOperationPayload = components["schemas"]["HistoryContentBulkOperationPayload"];
+
+const putHistories = fetcher.path("/api/histories/{history_id}/contents/bulk").method("put").create();
+export async function updateHistories(historyId: string, changes: HistoryContentBulkOperationPayload) {
+    await putHistories({ history_id: historyId, ...changes });
+}

From b9e3b180a39f3e2b48945f63fe27e61c885739e0 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 7 Mar 2024 14:46:04 +0100
Subject: [PATCH 07/13] =?UTF-8?q?=E2=9C=94=EF=B8=8F:=20use=20unscoped=20st?=
 =?UTF-8?q?yle=20`CollectionCreator`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Collections/common/CollectionCreator.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Collections/common/CollectionCreator.vue b/client/src/components/Collections/common/CollectionCreator.vue
index 9d02b00855d..8ef14660d99 100644
--- a/client/src/components/Collections/common/CollectionCreator.vue
+++ b/client/src/components/Collections/common/CollectionCreator.vue
@@ -137,7 +137,7 @@ watch(
     </div>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss">
 $fa-font-path: "../../../../node_modules/@fortawesome/fontawesome-free/webfonts/";
 @import "~@fortawesome/fontawesome-free/scss/_variables";
 @import "~@fortawesome/fontawesome-free/scss/solid";

From 2eaf1af959dec823470a48ee67912e82a5fc92be Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 7 Mar 2024 17:20:13 +0100
Subject: [PATCH 08/13] =?UTF-8?q?=E2=9C=94=EF=B8=8F:=20fix=20`DatabaseEdit?=
 =?UTF-8?q?Tab`=20test=20error?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Collections/common/DatabaseEditTab.vue  | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Collections/common/DatabaseEditTab.vue b/client/src/components/Collections/common/DatabaseEditTab.vue
index f8cfffac606..e8e88438317 100644
--- a/client/src/components/Collections/common/DatabaseEditTab.vue
+++ b/client/src/components/Collections/common/DatabaseEditTab.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { onMounted, ref } from "vue";
 import Multiselect from "vue-multiselect";
 
 import localize from "@/utils/localization";
 
 interface Props {
-    // TODO: Replace with actual datatype type
     genomes: { id: string; text: string }[];
     databaseKeyFromElements: string;
 }
@@ -13,15 +12,18 @@ interface Props {
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
-    // TODO: Replace with actual datatype type
     (event: "clicked-save", attribute: string, newValue: any): void;
 }>();
 
-const selectedGenome = computed(() => props.genomes.find((element) => element.id == props.databaseKeyFromElements));
+const selectedGenome = ref();
 
 function clickedSave() {
     emit("clicked-save", "dbkey", selectedGenome.value);
 }
+
+onMounted(() => {
+    selectedGenome.value = props.genomes.find((element) => element.id == props.databaseKeyFromElements);
+});
 </script>
 
 <template>

From a3934ab55a2327de49ba3c85b3b50a6a702a614c Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 8 Mar 2024 14:35:56 +0100
Subject: [PATCH 09/13] =?UTF-8?q?=E2=9C=A8:=20add=20`copyCollection`=20fet?=
 =?UTF-8?q?cher=20to=20`datasetCollections`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/api/datasetCollections.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/client/src/api/datasetCollections.ts b/client/src/api/datasetCollections.ts
index cb09d46c66b..3cf02c98f55 100644
--- a/client/src/api/datasetCollections.ts
+++ b/client/src/api/datasetCollections.ts
@@ -61,3 +61,9 @@ export const fetchCollectionAttributes = fetcher
     .path("/api/dataset_collections/{id}/attributes")
     .method("get")
     .create();
+
+const postCopyCollection = fetcher.path("/api/dataset_collections/{id}/copy").method("post").create();
+export async function copyCollection(id: string, dbkey: string): Promise<Record<string, never>> {
+    const { data } = await postCopyCollection({ id, dbkey });
+    return data;
+}

From 5a58d7a4d0cc55bb7a9f8915b3546df8cb04ce70 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 8 Mar 2024 14:37:11 +0100
Subject: [PATCH 10/13] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20use=20`copyColle?=
 =?UTF-8?q?ction`=20fetcher=20in=20`CollectionEditView`=20and=20remove=20u?=
 =?UTF-8?q?nnecessary=20refs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Collections/common/CollectionEditView.vue | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/client/src/components/Collections/common/CollectionEditView.vue b/client/src/components/Collections/common/CollectionEditView.vue
index a209d9e5470..223e4b17353 100644
--- a/client/src/components/Collections/common/CollectionEditView.vue
+++ b/client/src/components/Collections/common/CollectionEditView.vue
@@ -7,6 +7,7 @@ import { BAlert, BTab, BTabs } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 
+import { copyCollection } from "@/api/datasetCollections";
 import { DatatypesProvider, DbKeyProvider, SuitableConvertersProvider } from "@/components/providers";
 import { useConfig } from "@/composables/config";
 import { useCollectionAttributesStore } from "@/stores/collectionAttributesStore";
@@ -38,10 +39,7 @@ const { currentHistoryId } = storeToRefs(historyStore);
 
 const jobError = ref(null);
 const errorMessage = ref("");
-const noQuotaIncreaseMessage = ref("Your quota will not increase.");
-const newCollectionMessage = ref("This will create a new collection in your History.");
 const infoMessage = ref("This will create a new collection in your History. Your quota will not increase.");
-const expectWaitTimeMessage = ref("This operation might take a short while, depending on the size of your collection.");
 
 const attributesData = computed(() => {
     return collectionAttributesStore.getAttributes(props.collectionId);
@@ -59,19 +57,16 @@ function updateInfoMessage(strMessage: string) {
 
 // TODO: Replace with actual datatype type
 async function clickedSave(attribute: string, newValue: any) {
-    const url = prependPath(`/api/dataset_collections/${props.collectionId}/copy`);
-    const data: { dbkey?: string } = {};
-
-    if (attribute == "dbkey") {
-        data["dbkey"] = newValue.id;
-    } else {
+    if (attribute !== "dbkey") {
         // TODO: extend this to other attributes that could be changed
         console.error(`Changing ${attribute} not implemented`);
         return;
     }
 
+    const dbKey = newValue.id;
+
     try {
-        await axios.post(url, data).catch(handleError);
+        await copyCollection(props.collectionId, dbKey);
     } catch (err) {
         errorMessage.value = errorMessageAsString(err, "History import failed.");
     }
@@ -141,7 +136,11 @@ function handleError(err: any) {
         <BTabs content-class="mt-3">
             <BTab
                 title-link-class="collection-edit-change-genome-nav"
-                @click="updateInfoMessage(newCollectionMessage + ' ' + noQuotaIncreaseMessage)">
+                @click="
+                    updateInfoMessage(
+                        'This will create a new collection in your History. Your quota will not increase.'
+                    )
+                ">
                 <template v-slot:title>
                     <FontAwesomeIcon :icon="faTable" />
                     &nbsp; {{ localize("Database/Build") }}
@@ -163,7 +162,7 @@ function handleError(err: any) {
                 <BTab
                     v-if="item && item.length"
                     title-link-class="collection-edit-convert-datatype-nav"
-                    @click="updateInfoMessage(newCollectionMessage)">
+                    @click="updateInfoMessage('This will create a new collection in your History.')">
                     <template v-slot:title>
                         <FontAwesomeIcon :icon="faCog" />
                         &nbsp; {{ localize("Convert") }}
@@ -176,7 +175,11 @@ function handleError(err: any) {
             <BTab
                 v-if="isConfigLoaded && config.enable_celery_tasks"
                 title-link-class="collection-edit-change-datatype-nav"
-                @click="updateInfoMessage(expectWaitTimeMessage)">
+                @click="
+                    updateInfoMessage(
+                        'This operation might take a short while, depending on the size of your collection.'
+                    )
+                ">
                 <template v-slot:title>
                     <FontAwesomeIcon :icon="faDatabase" />
                     &nbsp; {{ localize("Datatypes") }}

From f7bca0c60c73f462a6fb4bdf4467138f1777e2f1 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 8 Mar 2024 14:42:24 +0100
Subject: [PATCH 11/13] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20rename=20`update?=
 =?UTF-8?q?Histories`=20fetcher=20to=20`updateHistoryItemsBulk`=20and=20mo?=
 =?UTF-8?q?ve=20it=20histories=20apis?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/api/histories.ts                                 | 1 +
 .../components/Collections/common/CollectionEditView.vue    | 4 ++--
 client/src/components/Collections/common/services.ts        | 6 +++---
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/client/src/api/histories.ts b/client/src/api/histories.ts
index dafdc577ac2..fc70d5817ba 100644
--- a/client/src/api/histories.ts
+++ b/client/src/api/histories.ts
@@ -8,3 +8,4 @@ export const undeleteHistory = fetcher.path("/api/histories/deleted/{history_id}
 export const undeleteHistories = fetcher.path("/api/histories/batch/undelete").method("put").create();
 export const publishedHistoriesFetcher = fetcher.path("/api/histories/published").method("get").create();
 export const historyFetcher = fetcher.path("/api/histories/{history_id}").method("get").create();
+export const putHistories = fetcher.path("/api/histories/{history_id}/contents/bulk").method("put").create();
diff --git a/client/src/components/Collections/common/CollectionEditView.vue b/client/src/components/Collections/common/CollectionEditView.vue
index 223e4b17353..f04abfca8aa 100644
--- a/client/src/components/Collections/common/CollectionEditView.vue
+++ b/client/src/components/Collections/common/CollectionEditView.vue
@@ -16,7 +16,7 @@ import localize from "@/utils/localization";
 import { prependPath } from "@/utils/redirect";
 import { errorMessageAsString } from "@/utils/simple-error";
 
-import { HistoryContentBulkOperationPayload, updateHistories } from "./services";
+import { HistoryContentBulkOperationPayload, updateHistoryItemsBulk } from "./services";
 
 import ChangeDatatypeTab from "@/components/Collections/common/ChangeDatatypeTab.vue";
 import DatabaseEditTab from "@/components/Collections/common/DatabaseEditTab.vue";
@@ -106,7 +106,7 @@ async function clickedDatatypeChange(selectedDatatype: any) {
     };
 
     try {
-        await updateHistories(currentHistoryId.value ?? "", data);
+        await updateHistoryItemsBulk(currentHistoryId.value ?? "", data);
     } catch (err) {
         errorMessage.value = errorMessageAsString(err, "History import failed.");
     }
diff --git a/client/src/components/Collections/common/services.ts b/client/src/components/Collections/common/services.ts
index df832a62810..900ed920342 100644
--- a/client/src/components/Collections/common/services.ts
+++ b/client/src/components/Collections/common/services.ts
@@ -1,8 +1,8 @@
-import { type components, fetcher } from "@/api/schema";
+import { putHistories } from "@/api/histories";
+import { type components } from "@/api/schema";
 
 export type HistoryContentBulkOperationPayload = components["schemas"]["HistoryContentBulkOperationPayload"];
 
-const putHistories = fetcher.path("/api/histories/{history_id}/contents/bulk").method("put").create();
-export async function updateHistories(historyId: string, changes: HistoryContentBulkOperationPayload) {
+export async function updateHistoryItemsBulk(historyId: string, changes: HistoryContentBulkOperationPayload) {
     await putHistories({ history_id: historyId, ...changes });
 }

From af0da22afe2bd0346406f2a1bac7c651f5d0104a Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 12 Mar 2024 15:41:03 +0100
Subject: [PATCH 12/13] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20rename=20`update?=
 =?UTF-8?q?Histories`=20fetcher=20to=20`updateHistoryItemsBulk`=20and=20mo?=
 =?UTF-8?q?ve=20it=20histories=20apis=20and=20import=20missing=20component?=
 =?UTF-8?q?=20in=20`CollectionEditView`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/api/histories.ts                                 | 5 ++++-
 .../components/Collections/common/CollectionEditView.vue    | 6 ++++--
 client/src/components/Collections/common/services.ts        | 4 ++--
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/client/src/api/histories.ts b/client/src/api/histories.ts
index fc70d5817ba..fcd1d0c1c1f 100644
--- a/client/src/api/histories.ts
+++ b/client/src/api/histories.ts
@@ -8,4 +8,7 @@ export const undeleteHistory = fetcher.path("/api/histories/deleted/{history_id}
 export const undeleteHistories = fetcher.path("/api/histories/batch/undelete").method("put").create();
 export const publishedHistoriesFetcher = fetcher.path("/api/histories/published").method("get").create();
 export const historyFetcher = fetcher.path("/api/histories/{history_id}").method("get").create();
-export const putHistories = fetcher.path("/api/histories/{history_id}/contents/bulk").method("put").create();
+export const updateHistoryItemsInBulk = fetcher
+    .path("/api/histories/{history_id}/contents/bulk")
+    .method("put")
+    .create();
diff --git a/client/src/components/Collections/common/CollectionEditView.vue b/client/src/components/Collections/common/CollectionEditView.vue
index f04abfca8aa..e7465737b73 100644
--- a/client/src/components/Collections/common/CollectionEditView.vue
+++ b/client/src/components/Collections/common/CollectionEditView.vue
@@ -3,7 +3,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faBars, faCog, faDatabase, faTable, faUser } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import axios from "axios";
-import { BAlert, BTab, BTabs } from "bootstrap-vue";
+import { BAlert, BSpinner, BTab, BTabs } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 
@@ -147,7 +147,9 @@ function handleError(err: any) {
                 </template>
 
                 <DbKeyProvider v-slot="{ item, loading }">
-                    <div v-if="loading"><b-spinner label="Loading Database/Builds..."></b-spinner></div>
+                    <div v-if="loading">
+                        <BSpinner label="Loading Database/Builds..." />
+                    </div>
                     <div v-else>
                         <DatabaseEditTab
                             v-if="item && databaseKeyFromElements"
diff --git a/client/src/components/Collections/common/services.ts b/client/src/components/Collections/common/services.ts
index 900ed920342..fd6287c4114 100644
--- a/client/src/components/Collections/common/services.ts
+++ b/client/src/components/Collections/common/services.ts
@@ -1,8 +1,8 @@
-import { putHistories } from "@/api/histories";
+import { updateHistoryItemsInBulk } from "@/api/histories";
 import { type components } from "@/api/schema";
 
 export type HistoryContentBulkOperationPayload = components["schemas"]["HistoryContentBulkOperationPayload"];
 
 export async function updateHistoryItemsBulk(historyId: string, changes: HistoryContentBulkOperationPayload) {
-    await putHistories({ history_id: historyId, ...changes });
+    await updateHistoryItemsInBulk({ history_id: historyId, ...changes });
 }

From 6e33a41c327a2d9864123bc13eaa714e1fd4bad0 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 13 Mar 2024 11:05:34 +0100
Subject: [PATCH 13/13] =?UTF-8?q?=E2=9C=94=EF=B8=8F:=20fix=20value=20updat?=
 =?UTF-8?q?e=20in=20collections=20common=20component=20`ClickToEdit`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Collections/common/ClickToEdit.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/client/src/components/Collections/common/ClickToEdit.vue b/client/src/components/Collections/common/ClickToEdit.vue
index 2839c5f510f..da60f01880d 100644
--- a/client/src/components/Collections/common/ClickToEdit.vue
+++ b/client/src/components/Collections/common/ClickToEdit.vue
@@ -21,6 +21,13 @@ watch(
         emit("input", newLocalValue);
     }
 );
+
+watch(
+    () => props.value,
+    (newValue) => {
+        localValue.value = newValue;
+    }
+);
 </script>
 
 <template>