Add face name change modal (fix #64)

src/components/FaceEditModal.vue

@@ -0,0 +1,105 @@
+<template>
+    <NcModal
+        size="small"
+        @close="close"
+        :outTransition="true"
+        :hasNext="false"
+        :hasPrevious="false">
+
+        <div class="container">
+            <div class="head">
+                <span>{{ t('memories', 'Rename person') }}</span>
+            </div>
+
+            <div class="fields memories__editdate__fields">
+                <NcTextField :value.sync="name"
+                    class="field"
+                    :label="t('memories', 'Name')" :label-visible="true"
+                    :placeholder="t('memories', 'Name')"
+                    @keypress.enter="save()" />
+            </div>
+
+            <div class="buttons">
+                <NcButton @click="save" class="button" type="error">
+                    {{ t('memories', 'Update') }}
+                </NcButton>
+            </div>
+        </div>
+    </NcModal>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Watch } from 'vue-property-decorator';
+import { NcButton, NcModal, NcTextField } from '@nextcloud/vue';
+import { showError } from '@nextcloud/dialogs'
+import GlobalMixin from '../mixins/GlobalMixin';
+import client from '../services/DavClient';
+
+@Component({
+    components: {
+        NcButton,
+        NcModal,
+        NcTextField,
+    }
+})
+export default class EditDate extends Mixins(GlobalMixin) {
+    private user: string = "";
+    private name: string = "";
+    private oldName: string = "";
+
+    @Watch('$route')
+    async routeChange(from: any, to: any) {
+        this.refreshParams();
+    }
+
+    mounted() {
+        this.refreshParams();
+    }
+
+    public refreshParams() {
+        this.user = this.$route.params.user || '';
+        this.name = this.$route.params.name || '';
+        this.oldName = this.$route.params.name || '';
+    }
+
+    public async save() {
+		try {
+			await client.moveFile(
+				`/recognize/${this.user}/faces/${this.oldName}`,
+				`/recognize/${this.user}/faces/${this.name}`,
+			);
+            this.$router.push({ name: 'people', params: { user: this.user, name: this.name } });
+            this.close();
+		} catch (error) {
+            console.log(error);
+			showError(this.t('photos', 'Failed to rename {oldName} to {name}.', {
+                oldName: this.oldName,
+                name: this.name,
+            }));
+		}
+    }
+
+    public close() {
+        this.$emit('close');
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.container {
+	margin: 20px;
+
+    .head {
+        font-weight: 500;
+    }
+}
+
+.buttons {
+    margin-top: 10px;
+    text-align: right;
+
+    button {
+        display: inline-block;
+    }
+}
+</style>

src/components/FaceTopMatter.vue

@@ -6,7 +6,19 @@
                 <template #icon> <BackIcon :size="20" /> </template>
 			</NcActionButton>
 		</NcActions>
-        <span class="name">{{ name }}</span>
+
+        <div class="name">{{ name }}</div>
+
+        <div class="right-actions">
+            <NcActions>
+                <NcActionButton :aria-label="t('memories', 'Rename person')" @click="showEditModal=true">
+                    {{ t('memories', 'Rename person') }}
+                    <template #icon> <EditIcon :size="20" /> </template>
+                </NcActionButton>
+            </NcActions>
+        </div>
+
+        <FaceEditModal v-if="showEditModal" @close="showEditModal=false" />
     </div>
 </template>
 
@@ -15,17 +27,22 @@ import { Component, Mixins, Watch } from 'vue-property-decorator';
 import GlobalMixin from '../mixins/GlobalMixin';
 
 import { NcActions, NcActionButton } from '@nextcloud/vue';
+import FaceEditModal from './FaceEditModal.vue';
 import BackIcon from 'vue-material-design-icons/ArrowLeft.vue';
+import EditIcon from 'vue-material-design-icons/Pencil.vue';
 
 @Component({
     components: {
         NcActions,
         NcActionButton,
+        FaceEditModal,
         BackIcon,
+        EditIcon,
     },
 })
 export default class FaceTopMatter extends Mixins(GlobalMixin) {
     private name: string = '';
+    private showEditModal: boolean = false;
 
     @Watch('$route')
     async routeChange(from: any, to: any) {
@@ -48,16 +65,23 @@ export default class FaceTopMatter extends Mixins(GlobalMixin) {
 
 <style lang="scss" scoped>
 .face-top-matter {
+    display: flex;
+    vertical-align: middle;
+
     .name {
         font-size: 1.3em;
         font-weight: 400;
-        line-height: 42px;
-        display: inline-block;
-        vertical-align: top;
+        line-height: 40px;
+        padding-left: 3px;
+        flex-grow: 1;
     }
 
-    button {
-        display: inline-block;
+    .right-actions {
+        margin-right: 40px;
+        z-index: 50;
+        @media (max-width: 768px) {
+            margin-right: 10px;
+        }
     }
 }
 </style>