From 33ada62e6e62cee5ac4bbd2cfc2af75155b75971 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 8 Mar 2024 17:01:58 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`ListDatase?=
 =?UTF-8?q?tCollectionElementView`=20to=20use=20composition=20API=20and=20?=
 =?UTF-8?q?`typeScript`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ListDatasetCollectionElementView.vue      | 96 +++++++++----------
 1 file changed, 44 insertions(+), 52 deletions(-)

diff --git a/client/src/components/Collections/ListDatasetCollectionElementView.vue b/client/src/components/Collections/ListDatasetCollectionElementView.vue
index ea5276d901cc..e7b41e4158de 100644
--- a/client/src/components/Collections/ListDatasetCollectionElementView.vue
+++ b/client/src/components/Collections/ListDatasetCollectionElementView.vue
@@ -1,61 +1,53 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+
+import localize from "@/utils/localization";
+
+import ClickToEdit from "@/components/Collections/common/ClickToEdit.vue";
+
+interface Props {
+    element: any;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (event: "onRename", name: string): void;
+    (event: "element-is-selected", element: any): void;
+    (event: "element-is-discarded", element: any): void;
+}>();
+
+const elementName = ref("");
+
+watch(elementName, () => {
+    emit("onRename", elementName.value);
+});
+
+function clickDiscard() {
+    emit("element-is-discarded", props.element);
+}
+
+onMounted(() => {
+    elementName.value = props.element.name;
+});
+</script>
+
 <template>
-    <div class="collection-element" @click="$emit('element-is-selected', element)">
-        <ClickToEdit v-model="elementName" :title="titleElementName" />
-        <button class="discard-btn btn-sm" :title="titleDiscardButton" @click="clickDiscard">
-            {{ l("Discard") }}
+    <div class="collection-element" @click="emit('element-is-selected', element)">
+        <ClickToEdit v-model="elementName" :title="localize('Click to rename')" />
+
+        <button class="discard-btn btn-sm" :title="localize('Remove this dataset from the list')" @click="clickDiscard">
+            {{ localize("Discard") }}
         </button>
     </div>
 </template>
 
-<script>
-import _l from "utils/localization";
-
-import ClickToEdit from "./common/ClickToEdit";
-
-export default {
-    components: { ClickToEdit },
-    props: {
-        element: {
-            required: true,
-        },
-    },
-    data: function () {
-        return {
-            titleDiscardButton: _l("Remove this dataset from the list"),
-            titleElementName: _l("Click to rename"),
-            isSelected: false,
-            elementName: "",
-        };
-    },
-    watch: {
-        elementName() {
-            this.$emit("onRename", this.elementName);
-        },
-    },
-    created: function () {
-        this.elementName = this.element.name;
-    },
-    methods: {
-        l(str) {
-            // _l conflicts private methods of Vue internals, expose as l instead
-            return _l(str);
-        },
-        clickDiscard: function () {
-            this.$emit("element-is-discarded", this.element);
-        },
-        /** string rep */
-        toString() {
-            return "ListDatasetCollectionElementView()";
-        },
-    },
-};
-</script>
-
-<style>
-.discard-btn {
-    float: right;
-}
+<style scoped lang="scss">
 .collection-element {
     height: auto;
+
+    .discard-btn {
+        float: right;
+    }
 }
 </style>