feat: clone button on locations #586

app/src/views/domain/ngx_conf/LocationEditor.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { DeleteOutlined, HolderOutlined } from '@ant-design/icons-vue'
+import { CopyOutlined, DeleteOutlined, HolderOutlined } from '@ant-design/icons-vue'
 import Draggable from 'vuedraggable'
+import _ from 'lodash'
 import CodeEditor from '@/components/CodeEditor'
 import type { NgxConfig, NgxLocation } from '@/api/ngx'
 
@@ -37,6 +38,12 @@ function save() {
 function remove(index: number) {
   ngx_config.servers[props.currentServerIndex!].locations?.splice(index, 1)
 }
+
+function duplicate(index: number) {
+  const loc = ngx_config.servers[props.currentServerIndex!].locations![index]
+
+  ngx_config.servers[props.currentServerIndex!].locations?.splice(index, 0, _.cloneDeep(loc))
+}
 </script>
 
 <template>
@@ -51,7 +58,10 @@ function remove(index: number) {
     handle=".ant-collapse-header"
   >
     <template #item="{ element: v, index }">
-      <ACollapse :bordered="false">
+      <ACollapse
+        :bordered="false"
+        collapsible="header"
+      >
         <ACollapsePanel>
           <template #header>
             <div>
@@ -64,21 +74,32 @@ function remove(index: number) {
             v-if="!readonly"
             #extra
           >
-            <APopconfirm
-              :title="$gettext('Are you sure you want to remove this location?')"
-              :ok-text="$gettext('Yes')"
-              :cancel-text="$gettext('No')"
-              @confirm="remove(index)"
-            >
+            <ASpace>
               <AButton
                 type="text"
                 size="small"
+                @click="() => duplicate(index)"
               >
                 <template #icon>
-                  <DeleteOutlined style="font-size: 14px;" />
+                  <CopyOutlined style="font-size: 14px;" />
                 </template>
               </AButton>
-            </APopconfirm>
+              <APopconfirm
+                :title="$gettext('Are you sure you want to remove this location?')"
+                :ok-text="$gettext('Yes')"
+                :cancel-text="$gettext('No')"
+                @confirm="remove(index)"
+              >
+                <AButton
+                  type="text"
+                  size="small"
+                >
+                  <template #icon>
+                    <DeleteOutlined style="font-size: 14px;" />
+                  </template>
+                </AButton>
+              </APopconfirm>
+            </ASpace>
           </template>
           <AForm layout="vertical">
             <AFormItem :label="$gettext('Comments')">