movie-night-web/app/components/list-settings.vue

<script lang="ts" setup>
import type {MovieList} from "~/types/movie-list";
import {type MovieListSettings} from "~/types/movie-list-settings";

const emit = defineEmits(['back-to-list'])
const props = defineProps<{
  list: MovieList
}>()

const listSettings: MovieListSettings = {
  listName: 'My MovieList',
  isPublic: true,
  collaborators: [
    {id: 1, name: 'Ed', role: 3},
    {id: 2, name: 'Bob', role: 2}
  ],
  roles: [
    {id: 1, name: 'Viewer'},
    {id: 2, name: 'Editor'},
    {id: 3, name: 'Admin'}
  ]
}
</script>

<template>
  <div class="settings-header">
    <div @click="$emit('back-to-list')">
      <Icon name="solar:arrow-left-linear"/>
      <span>Back to MovieList</span>
    </div>
  </div>

  <ul class="settings-list">
    <li class="list-setting">
      <label for="list-name-input">MovieList Name</label>

      <div>
        <input id="list-name-input" :value="listSettings.listName" type="text"/>
        <button>Save</button>
      </div>
    </li>
    <li class="list-setting">
      <div>
        <label for="make-list-public">Make list public</label>
        <input id="make-list-public" :checked="listSettings.isPublic" type="checkbox"/>
      </div>
    </li>
    <li class="list-setting collaborator-list">
      <span>Collaborators</span>
      <details>
        <summary>Permission levels</summary>

        <ul>
          <li>Viewer: Can view the list, but cannot make any changes.</li>
          <li>Editor: Can add/remove movies from the list.</li>
          <li>Admin: Can make any changes to the list including deleting it. Can also invite other users to collaborate
            on
            this list.
          </li>
        </ul>
      </details>

      <ul class="collaborators">
        <li v-for="collaborator in listSettings.collaborators" :key="collaborator.id">
          <span>{{ collaborator.name }}</span>
          <select v-model="collaborator.role">
            <option
                v-for="role in listSettings.roles"
                :value="role.id"
            >
              {{ role.name }}
            </option>
          </select>
        </li>
      </ul>
    </li>
    <li class="list-setting">
      <label for="invite-collaborators-input">Invite Collaborators</label>
      <textarea name="invite-collaborators-input" type="text"></textarea>
    </li>
    <li class="list-setting">
      <label for="delete-list-button">Delete MovieList</label>
      <button name="delete-list-button">Delete</button>
    </li>
  </ul>
</template>

<style scoped>
.collaborator-list {
  gap: 1rem;
}

.collaborators li {
  display: flex;
  justify-content: space-between;
}

.list-setting {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.settings-header {
  display: flex;
  justify-content: space-between;
  padding: 1rem 0;
  cursor: pointer;
}

.settings-header > div {
  display: flex;
  align-items: center;
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.settings-list > li {
  display: flex;
  border: gray 1px solid;
  padding: 1rem;
}

details ul > li {
  padding: 1rem;
  border: black 1px solid;
}

details ul > li:not(:last-child) {
  border-bottom: none;
}
</style>