puzzle/src/frontend/components/EditImageDialog.vue

<template>
  <div class="overlay edit-image-dialog" @click="$emit('bgclick')">
    <div class="overlay-content" @click.stop="">

      <div class="area-image">
        <div class="has-image">
          <responsive-image :src="image.url" :title="image.title" />
        </div>
      </div>

      <div class="area-settings">
        <table>
          <tr>
            <td><label>Title</label></td>
            <td><input type="text" v-model="title" placeholder="Flower by @artist" /></td>
          </tr>
          <tr>
            <td colspan="2">
              <div class="hint">Feel free to leave a credit to the artist/photographer in the title :)</div>
            </td>
          </tr>
          <tr>
            <!-- TODO: autocomplete tags -->
            <td><label>Tags</label></td>
            <td>
              <tags-input v-model="tags" />
            </td>
          </tr>
        </table>
      </div>

      <div class="area-buttons">
        <button class="btn" @click="saveImage">🖼️ Save image</button>
      </div>

    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { Image, Tag } from '../../common/Types'

import ResponsiveImage from './ResponsiveImage.vue'
import TagsInput from './TagsInput.vue'

export default defineComponent({
  name: 'edit-image-dialog',
  components: {
    ResponsiveImage,
    TagsInput,
  },
  props: {
    image: {
      type: Object as PropType<Image>,
      required: true,
    },
  },
  emits: {
    bgclick: null,
    saveClick: null,
  },
  data () {
    return {
      title: '',
      tags: [] as string[],
    }
  },
  created () {
    this.title = this.image.title
    this.tags = this.image.tags.map((t: Tag) => t.title)
  },
  methods: {
    saveImage () {
      this.$emit('saveClick', {
        id: this.image.id,
        title: this.title,
        tags: this.tags,
      })
    },
  },
})
</script>

// TODO: scoped vs .edit-image-dialog
<style>
.edit-image-dialog .overlay-content {
  display: grid;
  grid-template-columns: auto 450px;
  grid-template-rows: auto;
  grid-template-areas:
    "image settings"
    "image buttons";
  height: 90%;
  width: 80%;
}

.edit-image-dialog .area-image {
  grid-area: image;
  margin: 20px;
}
.edit-image-dialog .area-image.no-image {
  align-content: center;
  display: grid;
  text-align: center;
  border: dashed 6px;
  position: relative;
}
.edit-image-dialog .area-image .has-image {
  position: relative;
  width: 100%;
  height: 100%;
}
.edit-image-dialog .area-image .has-image .remove {
  position: absolute;
  top: .5em;
  left: .5em;
}

.edit-image-dialog .area-settings {
  grid-area: settings;
}

.edit-image-dialog .area-settings table input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

.edit-image-dialog .area-buttons {
  align-self: end;
  grid-area: buttons;
}
.edit-image-dialog .area-buttons button {
  width: 100%;
  margin-top: .5em;
}
</style>