Transit

frontend/src/views/creators/NameEditor.vue

@@ -0,0 +1,89 @@
+<script setup>
+import {computed, ref} from "vue";
+import {v7} from "uuid";
+import {useClient} from "@/plugins/api.js";
+
+const props = defineProps({
+  name: {
+    required: true
+  },
+  creatorNameReservationId: {
+    required: true
+  }
+});
+
+const emits = defineEmits([
+  'update:name',
+  'update:creatorNameReservationId'
+]);
+
+const name = ref(props.name);
+const isReserved = computed(() => reservationState.value === 'reserved');
+
+const isOperationPending = ref(false);
+const reservationState = ref(null);
+const reservationId = ref(null);
+
+let timeout = null;
+const handleInput = () => {
+  clearTimeout(timeout);
+  timeout = setTimeout(() =>
+          checkNameAvailability(),
+      200);
+};
+
+const client = useClient()
+const checkNameAvailability = async () => {
+  if (!name.value || name.value.trim() === "") {
+    reservationState.value = null;
+    return;
+  }
+
+  try {
+    const id = v7();
+    isOperationPending.value = true;
+    reservationState.value = "loading";
+    await client.post(
+        `/api/creators/@${encodeURIComponent(name.value)}/reserve`,
+        {reservationId: id}
+    );
+    reservationState.value = "reserved";
+    reservationId.value = id;
+  } catch (error) {
+    reservationState.value = "unavailable"; // Handle API failure case
+    reservationId.value = undefined;
+  } finally {
+    emits('update:name', name);
+    emits('update:creatorNameReservationId', reservationId);
+    isOperationPending.value = false;
+  }
+};
+
+</script>
+
+<template>
+  <v-text-field
+      variant="outlined"
+      label="Nom de la page"
+      v-model="name"
+      outlined
+      @input="handleInput"
+  >
+    <template #append-inner>
+      <v-progress-circular
+          v-if="reservationState === 'loading'"
+          indeterminate
+          size="24"
+          width="3"
+          color="grey"
+      ></v-progress-circular>
+
+      <v-icon v-else-if="reservationState === 'reserved'" color="green">mdi-check-circle</v-icon>
+      <v-icon v-else-if="reservationState === 'unavailable'" color="red">mdi-close-circle</v-icon>
+    </template>
+  </v-text-field>
+</template>
+
+<style scoped>
+
+</style>