Page Settings: Add Copy and Remove Page buttons

Signed-off-by: Jimmy Tanagra <jcode@tanagra.id.au>

bundles/org.openhab.ui/web/src/components/pagedesigner/page-settings.vue

@@ -5,7 +5,7 @@
                      :clear-button="createMode" :info="(createMode) ? 'Required. Note: cannot be changed after the creation' : ''"
                      required validate pattern="[A-Za-z0-9_]+" error-message="Required. A-Z,a-z,0-9,_ only" :disabled="!createMode" />
       <f7-list-input label="Label" type="text" placeholder="Page label used for display purposes" :info="(createMode) ? 'Required' : ''" :value="page.config.label" @input="page.config.label = $event.target.value" required validate clear-button />
-      <f7-list-item accordion-item title="Sidebar &amp; Visibility" :disabled="page.uid === 'overview'">
+      <f7-list-item accordion-item title="Sidebar &amp; Visibility" v-if="page.uid !== 'overview'">
         <f7-accordion-content>
           <f7-list-item ref="pageVisibility" title="Visible only to" smart-select :smart-select-params="{openIn: 'popover'}">
             <select name="pagevisibility" multiple @change="updatePageVisibility">
@@ -29,14 +29,25 @@
         </f7-accordion-content>
       </f7-list-item>
     </f7-list>
-    <f7-list inline-labels no-hairline-md>
-      <tag-input :item="page" :disabled="page.uid === 'overview'" />
-    </f7-list>
+    <template v-if="page.uid !== 'overview'">
+      <f7-list inline-labels no-hairline-md>
+        <tag-input :item="page" />
+      </f7-list>
+      <f7-list v-if="!createMode" inline-labels no-hairline-md>
+        <f7-list-button color="blue" @click="copyPage">
+          Copy Page
+        </f7-list-button>
+        <f7-list-button color="red" @click="deletePage">
+          Remove Page
+        </f7-list-button>
+      </f7-list>
+    </template>
   </f7-col>
 </template>
 
 <script>
 import TagInput from '@/components/tags/tag-input.vue'
+import cloneDeep from 'lodash/cloneDeep'
 
 export default {
   components: {
@@ -62,6 +73,31 @@ export default {
           destroyOnClose: true
         }).open()
       }
+    },
+    copyPage () {
+      const pageClone = cloneDeep(this.page)
+      const pageType = pageClone.component.replace(/^oh-|-page$/g, '')
+      pageClone.uid = pageClone.uid + '_copy'
+      this.$f7router.navigate(`/settings/pages/${pageType}/add`, { props: { createMode: true, pageCopy: pageClone } })
+    },
+    deletePage () {
+      this.$f7.dialog.confirm(
+        `Are you sure you want to delete ${this.page.uid}?`,
+        'Delete Page',
+        () => {
+          this.$oh.api.delete('/rest/ui/components/ui:page/' + this.page.uid).then((data) => {
+            this.$f7.toast.create({
+              text: `Page '${this.page.uid}' deleted`,
+              destroyOnClose: true,
+              closeTimeout: 2000
+            }).open()
+            this.$f7router.back('/settings/pages/', { force: true })
+          }).catch((err) => {
+            console.error(err)
+            this.$f7.dialog.alert('An error occurred while deleting: ' + err)
+          })
+        }
+      )
     }
   }
 }

bundles/org.openhab.ui/web/src/pages/settings/pages/pagedesigner-mixin.js

@@ -8,6 +8,7 @@ import DirtyMixin from '../dirty-mixin'
 
 export default {
   mixins: [DirtyMixin],
+  props: ['pageCopy'],
   data () {
     return {
       pageReady: false,
@@ -111,6 +112,9 @@ export default {
       this.loading = true
 
       if (this.createMode) {
+        if (this.pageCopy) {
+          this.$set(this, 'page', cloneDeep(this.pageCopy))
+        }
         this.savedPage = cloneDeep(this.page)
         this.loading = false
         this.pageReady = true
@@ -134,12 +138,17 @@ export default {
         this.$f7.dialog.alert('Page ID is only allowed to contain A-Z,a-z,0-9,_')
         return
       }
-      if (!this.page.config.label) {
-        this.$f7.dialog.alert('Please give a label to the page')
+      if (this.createMode) {
+        if (this.$store.getters.page(this.page.uid)) {
+          this.$f7.dialog.alert('A page with this ID already exists')
+          return
+        }
+      } else if (this.uid !== this.page.uid) {
+        this.$f7.dialog.alert('You cannot change the ID of an existing page. Duplicate it with the new ID then delete this one.')
         return
       }
-      if (!this.createMode && this.uid !== this.page.uid) {
-        this.$f7.dialog.alert('You cannot change the ID of an existing page. Duplicate it with the new ID then delete this one.')
+      if (!this.page.config.label) {
+        this.$f7.dialog.alert('Please give a label to the page')
         return
       }