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

<script lang="ts" setup>
import type {MovieList} from "~/types/movie-list";
import Card from "~/components/common/card.vue";
import InputAction from "~/components/common/input-action.vue";

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

const localName = ref(props.list.name)

const availableRoles = [
  {id: 1, name: 'viewer'},
  {id: 2, name: 'editor'},
  {id: 3, name: 'admin'}
]

const collaboratorInvites = ref("");
const responseMessage = ref("");
type BasicResponse = {
  message: string
}
const sendInvites = () => {
  $api<BasicResponse>(`/api/invitations/`, {
    method: 'POST',
    body: {
      emails: collaboratorInvites.value.split(',').map(email => email.trim()),
      movie_list_id: props.list.id
    }
  }).then((response) => {
    collaboratorInvites.value = "";
    responseMessage.value = response.message;
  })
}

const deleteList = () => {
  if (!confirm("Are you sure you want to delete this list?")) return

  $api(`/api/movielists/${props.list.id}`, {
    method: 'DELETE',
  }).then(() => {
    navigateTo('/lists')
  })
}
</script>

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

    <ul class="settings-list">
      <li class="list-setting">
        <label for="list-name-input">MovieList Name</label>
        <InputAction
            v-model="localName"
            buttonText="Save"
            inputName="list-name-input"
            placeholder="List Name"
            @action="$emit('update-list', { ...list, name: localName })"
        />
      </li>
      <li class="list-setting-row">
        <label for="make-list-public">Make list public</label>
        <input id="make-list-public" :checked="list.is_public" type="checkbox"
               @change="$emit('update-list', { ...list, is_public: ($event.target as HTMLInputElement).checked })"/>
      </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>

        <div v-if="!list.collaborators.length">No collaborators found</div>
        <ul v-else class="collaborators">
          <li v-for="collaborator in list.collaborators" :key="collaborator.id">
            <span>{{ collaborator.username }}</span>
            <select v-model="collaborator.role">
              <option
                  v-for="role in availableRoles"
                  :value="role.name"
              >
                {{ role.name }}
              </option>
            </select>
          </li>
        </ul>
      </li>
      <li class="list-setting">
        <form class="list-setting" @submit.prevent="sendInvites">
          <label for="invite-collaborators-input">Invite Collaborators</label>
          <textarea v-model="collaboratorInvites" name="invite-collaborators-input" type="text"></textarea>
          <button>Send Invites</button>
          <span v-if="responseMessage">{{ responseMessage }}</span>
        </form>
      </li>
      <li class="list-setting">
        <label for="delete-list-button">Delete MovieList</label>
        <button name="delete-list-button" @click="deleteList">Delete</button>
      </li>
    </ul>
  </Card>
</template>

<style scoped>
.back-to-list:hover {
  text-decoration: underline;
}

.collaborator-list {
  gap: 1rem;
}

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

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

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

.settings-header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 1rem;
  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: rgba(0, 0, 0, 0.2) 1px solid;
  padding: 1rem;
}

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

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


</style>