Add save version dialog

frontend/src/components/dialog/VersionInput.vue

@@ -0,0 +1,39 @@
+<template>
+  <q-input
+    v-model="versionInfo.name"
+    filled
+    label="バージョン名"
+    :rules="[(val) => val.length <= 20 || '20字以内で入力ください']"
+  />
+  <q-input
+    v-model="versionInfo.desc"
+    filled
+    type="textarea"
+    :rules="[(val) => val.length <= 80 || '80字以内で入力ください']"
+    label="説明"
+  />
+</template>
+<script setup lang="ts">
+import { ref, watch, defineProps, defineEmits } from 'vue';
+import { QInput } from 'quasar';
+import { IVersionInfo } from 'src/types/AppTypes';
+
+const props = defineProps<{
+  modelValue: IVersionInfo;
+}>();
+
+const versionInfo = ref({
+  ...props.modelValue,
+  name: props.modelValue.name || `新バージョン ${new Date().toLocaleString()}`,
+ });
+
+const emit = defineEmits(['update:modelValue']);
+
+watch(
+  versionInfo,
+  () => {
+    emit('update:modelValue', { ...versionInfo.value });
+  },
+  { immediate: true, deep: true }
+);
+</script>

frontend/src/pages/FlowChart.vue

@@ -14,6 +14,15 @@
             <q-space></q-space>
             <q-btn-dropdown color="primary" label="保存" icon="save" :loading="saveLoading" >
               <q-list>
+                <q-item clickable v-close-popup @click="onSaveVersion">
+                  <q-item-section avatar >
+                    <q-icon name="history"></q-icon>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label>新バージョン保存</q-item-label>
+                  </q-item-section>
+                </q-item>
+
                 <q-item clickable v-close-popup @click="onSaveFlow">
                   <q-item-section avatar >
                     <q-icon name="save" color="primary"></q-icon>
@@ -75,6 +84,10 @@
       </template>
       <action-select ref="appDg" name="model" :filter="filter"  type="single" @clearFilter="onClearFilter" ></action-select>
     </ShowDialog>
+    <!-- save version dialog -->
+    <ShowDialog v-model:visible="saveVersionAction" name="新バージョン保存" @close="closeSaveVersionDg" min-width="500px">
+      <version-input v-model="versionInfo" />
+    </ShowDialog>
     <q-inner-loading
       :showing="initLoading"
       color="primary"
@@ -87,7 +100,7 @@
 import { ref, reactive, computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import { IActionNode, ActionNode, IActionFlow, ActionFlow, RootAction, IActionProperty } from 'src/types/ActionTypes';
-import { IManagedApp } from 'src/types/AppTypes';
+import { IManagedApp, IVersionInfo } from 'src/types/AppTypes';
 import { storeToRefs } from 'pinia';
 import { useFlowEditorStore } from 'stores/flowEditor';
 import { useAuthStore } from 'stores/useAuthStore';
@@ -98,6 +111,7 @@ import ShowDialog from 'components/ShowDialog.vue';
 import ActionSelect from 'components/ActionSelect.vue';
 import PropertyPanel from 'components/right/PropertyPanel.vue';
 import EventTree from 'components/left/EventTree.vue';
+import VersionInput from 'components/dialog/VersionInput.vue';
 import { FlowCtrl } from '../control/flowctrl';
 import { useQuasar } from 'quasar';
 
@@ -105,6 +119,7 @@ const deployLoading = ref(false);
 const saveLoading = ref(false);
 const initLoading = ref(true);
 const drawerLeft = ref(false);
+const versionInfo = ref<IVersionInfo>();
 const $q = useQuasar();
 const store = useFlowEditorStore();
 const authStore = useAuthStore();
@@ -117,6 +132,7 @@ const prevNodeIfo = ref({
 });
 // const refFlow = ref<ActionFlow|null>(null);
 const showAddAction = ref(false);
+const saveVersionAction = ref(false);
 const drawerRight = ref(false);
 const filter=ref("");
 const model = ref("");
@@ -177,7 +193,7 @@ const onDeleteAllNextNodes = (node: IActionNode) => {
 }
 const closeDg = (val: any) => {
   console.log("Dialog closed->", val);
-  if (val == 'OK') {
+  if (val == 'OK' && appDg?.value?.selected?.length > 0) {
     const data = appDg.value.selected[0];
     const actionProps = JSON.parse(data.property);
     const outputPoint = JSON.parse(data.outputPoints);
@@ -245,6 +261,20 @@ const onSaveActionProps=(props:IActionProperty[])=>{
   }
 };
 
+const onSaveVersion = async () => {
+  versionInfo.value = {
+    id: '1' // TODO
+  }
+  saveVersionAction.value = true;
+  // await onSaveAllFlow();
+}
+
+const closeSaveVersionDg = (val: 'OK'|'CANCEL') => {
+  if (val == 'OK') {
+    console.log(versionInfo.value);
+  }
+}
+
 const onSaveFlow = async () => {
   const targetFlow = store.selectedFlow;
   if (targetFlow === undefined) {

frontend/src/types/AppTypes.ts

@@ -12,3 +12,9 @@ export interface IManagedApp {
   user: IUser;
   update_time: string;
 }
+
+export interface IVersionInfo {
+  id: string;
+  name?: string;
+  desc?: string;
+}