🛠️: refactor ListDatasetCollectionElementView to use composition AP…

…I and `typeScript`

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>