Merge pull request galaxyproject#17571 from itisAliRH/collections-com…

…mon-refactors

Collections common refactors

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;
+}

client/src/api/histories.ts

@@ -8,3 +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 updateHistoryItemsInBulk = fetcher
+    .path("/api/histories/{history_id}/contents/bulk")
+    .method("put")
+    .create();

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>

client/src/components/Collections/common/ClickToEdit.vue

@@ -1,3 +1,35 @@
+<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);
+    }
+);
+
+watch(
+    () => props.value,
+    (newValue) => {
+        localValue.value = newValue;
+    }
+);
+</script>
+
 <template>
     <input
         v-if="editable"
@@ -6,41 +38,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;