add ability to update image info

src/frontend/components/EditImageDialog.vue

@@ -0,0 +1,132 @@
+<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 category -->
+            <td><label>Category</label></td>
+            <td><input type="text" v-model="category" placeholder="Plants" /></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 } from '../../common/GameCommon'
+
+import ResponsiveImage from './ResponsiveImage.vue'
+
+export default defineComponent({
+  name: 'edit-image-dialog',
+  components: {
+    ResponsiveImage,
+  },
+  props: {
+    image: {
+      type: Object as PropType<Image>,
+      required: true,
+    },
+  },
+  emits: {
+    bgclick: null,
+    saveClick: null,
+  },
+  data () {
+    return {
+      title: '',
+      category: '',
+    }
+  },
+  created () {
+    this.title = this.image.title
+    this.category = this.image.categories.length > 0 ? this.image.categories[0].title : ''
+  },
+  methods: {
+    saveImage () {
+      this.$emit('saveClick', {
+        id: this.image.id,
+        title: this.title,
+        category: this.category,
+      })
+    },
+  },
+})
+</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>