Add clone form

app/javascript/vue/tasks/collecting_events/new_collecting_event/app.vue

@@ -58,36 +58,28 @@
           </div>
         </div>
         <ul class="context-menu no_bullets">
-          <li class="horizontal-right-content">
+          <li class="horizontal-right-content gap-small">
             <span
               v-if="isUnsaved"
-              class="medium-icon margin-small-right"
+              class="medium-icon"
               title="You have unsaved changes."
               data-icon="warning"
             />
             <button
               @click="showRecent = true"
-              class="button normal-input button-default button-size margin-small-right"
+              class="button normal-input button-default button-size"
               type="button"
             >
               Recent
             </button>
             <navigate-component
-              class="margin-small-right"
               :collecting-event="collectingEvent"
               @select="loadCollectingEvent"
             />
-            <button
-              type="button"
-              class="button normal-input button-submit margin-small-right"
-              :disabled="!collectingEvent.id"
-              @click="cloneCE"
-            >
-              Clone
-            </button>
+            <CloneForm :disabled="!collectingEvent.id" />
             <button
               @click="saveCollectingEvent"
-              class="button normal-input button-submit button-size margin-small-right"
+              class="button normal-input button-submit button-size"
               type="button"
             >
               Save
@@ -161,6 +153,7 @@ import PinComponent from '@/components/ui/Button/ButtonPin.vue'
 import RightSection from './components/RightSection'
 import NavBar from '@/components/layout/NavBar'
 import ParseData from './components/parseData'
+import CloneForm from './components/CloneForm.vue'
 
 import CollectingEventForm from './components/CollectingEventForm'
 import CollectionObjectsTable from './components/CollectionObjectsTable.vue'

app/javascript/vue/tasks/collecting_events/new_collecting_event/components/CloneForm.vue

@@ -0,0 +1,83 @@
+<template>
+  <VModal
+    v-if="isModalVisible"
+    @close="() => (isModalVisible = false)"
+  >
+    <template #header>
+      <h3>Clone</h3>
+    </template>
+    <template #body>
+      <p>
+        This will clone the current collecting event with the following
+        information.
+      </p>
+      <ul class="no_bullets">
+        <li>
+          <label>
+            <input
+              type="checkbox"
+              v-modal="annotations"
+            />
+            Copy annotations
+          </label>
+        </li>
+        <li>
+          <label>
+            <input
+              type="checkbox"
+              :disabled="!identifierId"
+              v-model="incrementIdentifier"
+            />
+            Increment identifier
+          </label>
+        </li>
+      </ul>
+      <VBtn
+        class="margin-medium-top"
+        color="create"
+        medium
+        @click="clone"
+        >Clone</VBtn
+      >
+    </template>
+  </VModal>
+  <VBtn
+    color="primary"
+    medium
+    v-bind="attrs"
+    @click="() => (isModalVisible = true)"
+  >
+    Clone
+  </VBtn>
+</template>
+
+<script setup>
+import { computed, ref, useAttrs } from 'vue'
+import { useStore } from 'vuex'
+import { ActionNames } from '../store/actions/actions'
+import { GetterNames } from '../store/getters/getters'
+import VModal from '@/components/ui/Modal.vue'
+import VBtn from '@/components/ui/VBtn/index.vue'
+
+const store = useStore()
+
+const identifierId = computed(
+  () => store.getters[GetterNames.GetIdentifier]?.id
+)
+
+const annotations = ref(false)
+const incrementIdentifier = ref(false)
+const isModalVisible = ref(false)
+const attrs = useAttrs()
+
+function clone() {
+  const payload = {
+    annotations: annotations.value,
+    incremented_identifier_id: incrementIdentifier.value
+      ? identifierId.value
+      : null
+  }
+
+  store.dispatch(ActionNames.CloneCollectingEvent, payload)
+}
+</script>

app/javascript/vue/tasks/collecting_events/new_collecting_event/store/actions/cloneCollectingEvent.js

@@ -1,13 +1,12 @@
 import { CollectingEvent } from '@/routes/endpoints'
 import ActionNames from './actionNames'
-import extend from '../../const/extendRequest.js'
 
-export default ({ dispatch, state }) => {
+export default ({ dispatch, state }, params) => {
   state.settings.isSaving = true
 
-  CollectingEvent.clone(state.collectingEvent.id, { extend })
-    .then((response) => {
-      dispatch(ActionNames.LoadCollectingEvent, response.body.id)
+  CollectingEvent.clone(state.collectingEvent.id, { ...params })
+    .then(({ body }) => {
+      dispatch(ActionNames.LoadCollectingEvent, body.id)
       TW.workbench.alert.create(
         'Collecting event was successfully cloned.',
         'notice'