Design idea for create track dialog

[jana-kasselmann]

The following design idea can be realized on one page (wizard is not available in Vuetify) and accommodate the required functionality nicely (paper mock-ups below...).

I did a PoC with the v-card in combination with a v-toolbarand a v-expand-transition.

Copied from codepen:

<script type="text/x-template" id="app-template">
  <v-app>
    <v-card
       class="mx-auto"
       min-width="400"
    >
          <v-toolbar
      dark
      prominent
    >
      <v-btn
        :icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'"
        @click="show = !show"
      ></v-btn>
      <v-toolbar-title>Field 1</v-toolbar-title>

      <v-spacer></v-spacer>

      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
        <v-menu activator="parent">
        <v-list>
          <v-list-item
            v-for="(item, index) in items"
            :key="index"
            :value="index"
          >
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
      </v-btn>
    </v-toolbar>

      <v-expand-transition>
        <div v-show="show">
          <v-divider></v-divider>

          <v-card-text>
            <v-form>
    <v-container>
        <v-col>
          <v-text-field
            v-model="firstname"
            label="First name"
            required
          ></v-text-field>
        </v-col>

        <v-col
        >
          <v-text-field
            v-model="lastname"
            label="Last name"
            required
          ></v-text-field>
        </v-col>
    </v-container>
  </v-form>
          </v-card-text>
        </div>
      </v-expand-transition>
    </v-card>
  </v-app>
</script>

<div id="app"></div>

const { createApp } = Vue
const { createVuetify } = Vuetify

const vuetify = createVuetify()

const app = createApp({
  template: '#app-template',
  data: () => ({
    show: false,
    items: [
      { title: 'Move Up' },
      { title: 'Move Down' },
      { title: 'Delete' },
    ],
  }),
}).use(vuetify).mount('#app')

[jana-kasselmann]

Create track page with Track Title input field and one field definition:

Expanded field definition cards and add field button:

Field options:

Collapsed field definition cards:

[jana-kasselmann]

We also have an additional option with the expansion panels: https://vuetifyjs.com/en/components/expansion-panels/#advanced It could be solved quite similarly. We could also try to enforce that only one field definition is expanded at once in order to limit the amount of scrolling required.

[rlindner81]

Uh those https://vuetifyjs.com/en/components/expansion-panels/ look really nice for that... does that work together with panel actions? The examples are all without a three-dot menu, and I think those are really necessary for this approach.

I also think the field name should change when the Name property of the Field is set.