feat(fe file upload): added js file model and component for file edit content dialog

resources/js/components/content/partials/dialogs/FileEdit.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import {onMounted, reactive, ref} from "vue";
+import {VSelect, VTextarea, VTextField} from "vuetify/components";
+import {trackType} from "@/composables/content/track_type.ts";
+import {file} from "@/composables/content/models/file.ts";
+
+const props = defineProps({
+  item: Object,
+})
+
+const trackTypes = trackType(null)
+const fields = file()
+const item = props.item
+
+
+</script>
+
+<template>
+  <v-card>
+    <v-card-title>
+      <h3>Modifica traccia</h3>
+    </v-card-title>
+    <v-form>
+      <v-card-text>
+        <v-row no-gutters>
+          <v-col v-for="(field, key) in fields()" cols="12" md="6" lg="4">
+            <Component
+                :is="field.component"
+                :label="field.label"
+                :value="field.value"
+                :disabled="field.disabled"
+                :items="trackTypes.trackTypes.value"
+                v-model="item[key]"
+                item-title="type_name"
+                density="compact"
+                hide-details="auto"
+                class="mb-2"
+                clearable
+                :active="true"
+            />
+          </v-col>
+        </v-row>
+    </v-card-text>
+      <v-card-actions>
+        <v-btn
+          color="primary"
+          type="submit"
+          @click.prevent="$emit('editItem', item)"
+        >Salva</v-btn>
+      </v-card-actions>
+    </v-form>
+  </v-card>
+</template>
+
+<style scoped>
+
+</style>

resources/js/composables/content/models/file.ts

@@ -0,0 +1,51 @@
+import {VSelect, VTextarea, VTextField} from "vuetify/components";
+
+export function file() {
+    const visibleFields = {
+        track_title: 'Titolo traccia',
+        artist_name: 'Artista',
+        album_title: 'Titolo dell\'album',
+        owner: 'Utente',
+        track_type: 'Tipo di traccia',
+        description: 'Descrizione',
+        track_number: 'Numero della traccia',
+        genre: 'Genere',
+        year: 'Anno',
+        label: 'Etichetta discografica',
+        composer: 'Compositore',
+        conductor: 'Direttore',
+        mood: 'Mood',
+        bpm: 'BPM',
+        isrc_number: 'Numero ISRC',
+        language: 'Lingua',
+        cuein: 'Cue in',
+        cueout: 'Cue out'
+    }
+
+    return () => {
+        const fields = {}
+        Object.keys(visibleFields).forEach((key) => {
+            fields[key] = {
+                label: visibleFields[key],
+                value: item[key],
+                disabled: false,
+                component: VTextField
+            }
+            switch (key) {
+                case 'owner':
+                    console.log(item.owner.login)
+                    fields[key].value = item.owner.login
+                    fields[key].disabled = true
+                    break
+                case 'track_type':
+                    fields[key].component = VSelect
+                    break;
+                case 'description':
+                    fields[key].component = VTextarea
+                    break;
+            }
+        })
+
+        return fields
+    }
+}