feat(FE): webstreams and menu

resources/js/components/content/partials/WebstreamForm.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import {ref, onMounted, type PropType, reactive} from "vue";
+import {baseWebstream, createWebstream, getWebstream, updateWebstream, type Webstream} from "@models/webstream.ts";
+
+// Props and emits
+const props = defineProps({
+  webstreamId: {
+    type: Number as PropType<number | null>,
+    required: true,
+  },
+});
+const emits = defineEmits(['go-back']);
+
+// Data
+const loading = ref(false);
+const isFormValid = ref(false);
+const currentWebstream = ref<Webstream>(baseWebstream());
+
+// Funcs
+onMounted(async () => {
+  loading.value = true;
+  if (props.webstreamId === null) {
+    currentWebstream.value = baseWebstream();
+  } else {
+    currentWebstream.value = await getWebstream(props.webstreamId);
+  }
+  loading.value = false;
+});
+
+const goBack = () => {
+  emits('go-back');
+};
+
+const saveWebstream = async () => {
+  loading.value = true;
+  try {
+    if (currentWebstream.value.id) {
+      await updateWebstream(currentWebstream.value);
+      goBack();
+      return
+    }
+
+    await createWebstream(currentWebstream.value);
+    goBack()
+    return
+
+  } catch (error) {
+    console.error("Error saving webstream:", error);
+  } finally {
+    loading.value = false;
+  }
+};
+</script>
+
+<template>
+  <v-card
+      :disabled="loading"
+      :loading="loading"
+  >
+    <template v-slot:loader="{ isActive }">
+      <v-progress-linear
+          :active="isActive"
+          color="deep-purple"
+          height="4"
+          indeterminate
+      ></v-progress-linear>
+    </template>
+
+    <v-card-title>
+      <h3>Webstream</h3>
+    </v-card-title>
+    <v-form ref="form" v-model="isFormValid">
+      <v-card-text>
+        <v-row no-gutters>
+          <!-- Name Field -->
+          <v-col cols="12" md="6">
+            <v-card>
+              <v-text-field
+                  v-model="currentWebstream.name"
+                  label="Nome"
+                  density="compact"
+                  :rules="[v => !!v || 'Nome è obbligatorio']"
+                  required="true"
+              />
+            </v-card>
+          </v-col>
+
+          <!-- URL Field -->
+          <v-col cols="12" md="6">7
+            <v-card>
+              <v-text-field
+                  v-model="currentWebstream.url"
+                  label="URL"
+                  density="compact"
+                  :rules="[v => !!v || 'URL è obbligatorio', v => /^http?:\/\//.test(v) || 'URL deve iniziare con http://']"
+                  required="true"
+              />
+            </v-card>
+          </v-col>
+
+          <!-- Description Field -->
+          <v-col cols="12">
+            <v-card>
+              <v-textarea
+                  v-model="currentWebstream.description"
+                  label="Descrizione"
+                  density="compact"
+                  rows="2"
+                  :rules="[v => !!v || 'Descrizione è obbligatoria']"
+                  required="true"
+              />
+            </v-card>
+          </v-col>
+
+          <!-- Length Field -->
+          <v-col cols="12">
+            <v-card>
+              <v-textarea
+                  v-model="currentWebstream.length"
+                  label="Durata"
+                  density="compact"
+                  rows="2"
+                  :rules="[v => !!v || 'Durata è obbligatoria']"
+                  required="true"
+              />
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-card-text>
+
+      <v-card-actions>
+        <v-btn color="accent" @click="goBack">Torna indietro</v-btn>
+        <v-btn color="primary" @click="saveWebstream" :disabled="!isFormValid">
+          {{ currentWebstream.id ? 'Aggiorna' : 'Crea' }}
+        </v-btn>
+      </v-card-actions>
+    </v-form>
+  </v-card>
+</template>
+
+<style scoped></style>