Refactor modals

src/components/EditDate.vue

@@ -1,109 +1,102 @@
 <template>
-    <NcModal
+    <Modal
         v-if="photos.length > 0"
-        size="small"
-        @close="close"
-        :outTransition="true"
-        :hasNext="false"
-        :hasPrevious="false">
+        @close="close">
 
-        <div class="container">
-            <div class="head">
-                <span>{{ t('memories', 'Edit Date/Time') }}</span>
+        <template #title>
+            {{ t('memories', 'Edit Date/Time') }}
+        </template>
+
+        <template #buttons>
+            <NcButton @click="save" class="button" type="error" v-if="longDateStr">
+                {{ t('memories', 'Update Exif') }}
+            </NcButton>
+        </template>
+
+        <div v-if="longDateStr">
+            <span v-if="photos.length > 1">
+                [{{ t('memories', 'Newest') }}]
+            </span>
+            {{ longDateStr }}
+
+            <div class="fields memories__editdate__fields">
+                <NcTextField :value.sync="year"
+                    class="field"
+                    @input="newestChange()"
+                    :label="t('memories', 'Year')" :label-visible="true"
+                    :placeholder="t('memories', 'Year')" />
+                <NcTextField :value.sync="month"
+                    class="field"
+                    @input="newestChange()"
+                    :label="t('memories', 'Month')" :label-visible="true"
+                    :placeholder="t('memories', 'Month')" />
+                <NcTextField :value.sync="day"
+                    class="field"
+                    @input="newestChange()"
+                    :label="t('memories', 'Day')" :label-visible="true"
+                    :placeholder="t('memories', 'Day')" />
+                <NcTextField :value.sync="hour"
+                    class="field"
+                    @input="newestChange(true)"
+                    :label="t('memories', 'Time')" :label-visible="true"
+                    :placeholder="t('memories', 'Hour')" />
+                <NcTextField :value.sync="minute"
+                    class="field"
+                    @input="newestChange(true)"
+                    :label="t('memories', 'Minute')"
+                    :placeholder="t('memories', 'Minute')" />
             </div>
 
-            <div v-if="longDateStr">
-
-                <span v-if="photos.length > 1">
-                    [{{ t('memories', 'Newest') }}]
+            <div v-if="photos.length > 1" class="oldest">
+                <span>
+                    [{{ t('memories', 'Oldest') }}]
                 </span>
-                {{ longDateStr }}
+                {{ longDateStrLast }}
 
                 <div class="fields memories__editdate__fields">
-                    <NcTextField :value.sync="year"
+                    <NcTextField :value.sync="yearLast"
                         class="field"
-                        @input="newestChange()"
                         :label="t('memories', 'Year')" :label-visible="true"
                         :placeholder="t('memories', 'Year')" />
-                    <NcTextField :value.sync="month"
+                    <NcTextField :value.sync="monthLast"
                         class="field"
-                        @input="newestChange()"
                         :label="t('memories', 'Month')" :label-visible="true"
                         :placeholder="t('memories', 'Month')" />
-                    <NcTextField :value.sync="day"
+                    <NcTextField :value.sync="dayLast"
                         class="field"
-                        @input="newestChange()"
                         :label="t('memories', 'Day')" :label-visible="true"
                         :placeholder="t('memories', 'Day')" />
-                    <NcTextField :value.sync="hour"
+                    <NcTextField :value.sync="hourLast"
                         class="field"
-                        @input="newestChange(true)"
                         :label="t('memories', 'Time')" :label-visible="true"
                         :placeholder="t('memories', 'Hour')" />
-                    <NcTextField :value.sync="minute"
+                    <NcTextField :value.sync="minuteLast"
                         class="field"
-                        @input="newestChange(true)"
                         :label="t('memories', 'Minute')"
                         :placeholder="t('memories', 'Minute')" />
                 </div>
-
-                <div v-if="photos.length > 1" class="oldest">
-                    <span>
-                        [{{ t('memories', 'Oldest') }}]
-                    </span>
-                    {{ longDateStrLast }}
-
-                    <div class="fields memories__editdate__fields">
-                        <NcTextField :value.sync="yearLast"
-                            class="field"
-                            :label="t('memories', 'Year')" :label-visible="true"
-                            :placeholder="t('memories', 'Year')" />
-                        <NcTextField :value.sync="monthLast"
-                            class="field"
-                            :label="t('memories', 'Month')" :label-visible="true"
-                            :placeholder="t('memories', 'Month')" />
-                        <NcTextField :value.sync="dayLast"
-                            class="field"
-                            :label="t('memories', 'Day')" :label-visible="true"
-                            :placeholder="t('memories', 'Day')" />
-                        <NcTextField :value.sync="hourLast"
-                            class="field"
-                            :label="t('memories', 'Time')" :label-visible="true"
-                            :placeholder="t('memories', 'Hour')" />
-                        <NcTextField :value.sync="minuteLast"
-                            class="field"
-                            :label="t('memories', 'Minute')"
-                            :placeholder="t('memories', 'Minute')" />
-                    </div>
-                </div>
-
-                <div v-if="processing" class="info-pad">
-                    {{ t('memories', 'Processing … {n}/{m}', {
-                        n: photosDone,
-                        m: photos.length,
-                    }) }}
-                </div>
-
-                <div class="info-pad warn">
-                    {{ t('memories', 'This feature modifies files in your storage to update Exif data.') }}
-                    {{ t('memories', 'Exercise caution and make sure you have backups.') }}
-                </div>
-
-                <div class="buttons">
-                    <NcButton @click="save" class="button" type="error">
-                        {{ t('memories', 'Update Exif') }}
-                    </NcButton>
-                </div>
             </div>
 
-            <div v-else>
-                {{ t('memories', 'Loading data … {n}/{m}', {
+            <div v-if="processing" class="info-pad">
+                {{ t('memories', 'Processing … {n}/{m}', {
                     n: photosDone,
                     m: photos.length,
                 }) }}
             </div>
+
+            <div class="info-pad warn">
+                {{ t('memories', 'This feature modifies files in your storage to update Exif data.') }}
+                {{ t('memories', 'Exercise caution and make sure you have backups.') }}
+            </div>
         </div>
-    </NcModal>
+
+        <div v-else>
+            {{ t('memories', 'Loading data … {n}/{m}', {
+                n: photosDone,
+                m: photos.length,
+            }) }}
+        </div>
+    </Modal>
 </template>
 
 <script lang="ts">
@@ -111,9 +104,10 @@ import { Component, Mixins } from 'vue-property-decorator';
 import GlobalMixin from '../mixins/GlobalMixin';
 import { IPhoto } from '../types';
 
-import { NcButton, NcModal, NcTextField } from '@nextcloud/vue';
+import { NcButton, NcTextField } from '@nextcloud/vue';
 import { showError } from '@nextcloud/dialogs'
 import { generateUrl } from '@nextcloud/router'
+import Modal from './Modal.vue';
 import axios from '@nextcloud/axios'
 import * as utils from '../services/Utils';
 import * as dav from "../services/DavRequests";
@@ -124,8 +118,8 @@ const EDIT_API_URL = '/apps/memories/api/edit/{id}';
 @Component({
     components: {
         NcButton,
-        NcModal,
         NcTextField,
+        Modal,
     }
 })
 export default class EditDate extends Mixins(GlobalMixin) {
@@ -399,14 +393,6 @@ export default class EditDate extends Mixins(GlobalMixin) {
 </script>
 
 <style scoped lang="scss">
-.container {
-	margin: 20px;
-
-    .head {
-        font-weight: 500;
-    }
-}
-
 .fields {
     .field {
         width: 4.1em;
@@ -418,15 +404,6 @@ export default class EditDate extends Mixins(GlobalMixin) {
     margin-top: 10px;
 }
 
-.buttons {
-    margin-top: 10px;
-    text-align: right;
-
-    button {
-        display: inline-block;
-    }
-}
-
 .info-pad {
     margin-top: 6px;
     margin-bottom: 2px;

src/components/FaceDeleteModal.vue

@@ -1,37 +1,32 @@
 <template>
-    <NcModal
-        size="small"
-        @close="close"
-        :outTransition="true">
+    <Modal @close="close">
+        <template #title>
+            {{ t('memories', 'Remove person') }}
+        </template>
 
-        <div class="container">
-            <div class="head">
-                <span>{{ t('memories', 'Remove person') }}</span>
-            </div>
+        <span>{{ t('memories', 'Are you sure you want to remove {name}', { name }) }}</span>
 
-            <span>{{ t('memories', 'Are you sure you want to remove {name}', { name }) }}</span>
-
-            <div class="buttons">
-                <NcButton @click="save" class="button" type="error">
-                    {{ t('memories', 'Delete') }}
-                </NcButton>
-            </div>
-        </div>
-    </NcModal>
+        <template #buttons>
+            <NcButton @click="save" class="button" type="error">
+                {{ t('memories', 'Delete') }}
+            </NcButton>
+        </template>
+    </Modal>
 </template>
 
 <script lang="ts">
 import { Component, Mixins, Watch } from 'vue-property-decorator';
-import { NcButton, NcModal, NcTextField } from '@nextcloud/vue';
+import { NcButton, NcTextField } from '@nextcloud/vue';
 import { showError } from '@nextcloud/dialogs'
+import Modal from './Modal.vue';
 import GlobalMixin from '../mixins/GlobalMixin';
 import client from '../services/DavClient';
 
 @Component({
     components: {
         NcButton,
-        NcModal,
         NcTextField,
+        Modal,
     }
 })
 export default class FaceDeleteModal extends Mixins(GlobalMixin) {
@@ -69,23 +64,4 @@ export default class FaceDeleteModal extends Mixins(GlobalMixin) {
         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>
+</script>

src/components/FaceEditModal.vue

@@ -1,43 +1,38 @@
 <template>
-    <NcModal
-        size="small"
-        @close="close"
-        :outTransition="true">
+    <Modal @close="close">
+        <template #title>
+            {{ t('memories', 'Rename person') }}
+        </template>
 
-        <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="primary">
-                    {{ t('memories', 'Update') }}
-                </NcButton>
-            </div>
+        <div class="fields">
+            <NcTextField :value.sync="name"
+                class="field"
+                :label="t('memories', 'Name')" :label-visible="false"
+                :placeholder="t('memories', 'Name')"
+                @keypress.enter="save()" />
         </div>
-    </NcModal>
+
+        <template #buttons>
+            <NcButton @click="save" class="button" type="primary">
+                {{ t('memories', 'Update') }}
+            </NcButton>
+        </template>
+    </Modal>
 </template>
 
 <script lang="ts">
 import { Component, Mixins, Watch } from 'vue-property-decorator';
-import { NcButton, NcModal, NcTextField } from '@nextcloud/vue';
+import { NcButton, NcTextField } from '@nextcloud/vue';
 import { showError } from '@nextcloud/dialogs'
+import Modal from './Modal.vue';
 import GlobalMixin from '../mixins/GlobalMixin';
 import client from '../services/DavClient';
 
 @Component({
     components: {
         NcButton,
-        NcModal,
         NcTextField,
+        Modal,
     }
 })
 export default class FaceEditModal extends Mixins(GlobalMixin) {
@@ -83,21 +78,8 @@ export default class FaceEditModal extends Mixins(GlobalMixin) {
 }
 </script>
 
-<style scoped lang="scss">
-.container {
-	margin: 20px;
-
-    .head {
-        font-weight: 500;
-    }
-}
-
-.buttons {
-    margin-top: 10px;
-    text-align: right;
-
-    button {
-        display: inline-block;
-    }
+<style lang="scss" scoped>
+.fields {
+    margin-top: 8px;
 }
 </style>

src/components/Modal.vue

@@ -0,0 +1,52 @@
+<template>
+    <NcModal
+        size="small"
+        @close="$emit('close')"
+        :outTransition="true">
+        <div class="container">
+            <div class="head">
+                <span> <slot name="title"></slot> </span>
+            </div>
+
+            <slot></slot>
+
+            <div class="memories__modal__buttons">
+                <slot name="buttons"></slot>
+            </div>
+        </div>
+    </NcModal>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import { NcModal } from '@nextcloud/vue';
+
+@Component({
+    components: {
+        NcModal,
+    }
+})
+export default class Modal extends Vue {
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+	margin: 20px;
+
+    .head {
+        font-weight: 500;
+    }
+}
+</style>
+
+<style lang="scss">
+.memories__modal__buttons {
+    margin-top: 10px;
+    text-align: right;
+
+    > button {
+        display: inline-block !important;
+    }
+}
+</style>