Merge branch 'dev3' of https://dev.azure.com/alicorn-dev/KintoneAppBuilder/_git/KintoneAppBuilder into dev3

2024-12-10 11:27:37 +09:00
parent 9eec7e835d 3ecb08b872
commit c684105c2c
12 changed files with 537 additions and 136 deletions
--- a/frontend/src/components/AppSelectBox.vue
+++ b/frontend/src/components/AppSelectBox.vue
@@ -1,24 +1,19 @@
 <template>
-  <div class="q-px-xs">
-    <div v-if="!isLoaded" class="spinner flex flex-center">
-      <q-spinner color="primary" size="3em" />
-    </div>
-    <q-table v-else class="app-table" :selection="type" row-key="id" v-model:selected="selected" flat bordered
-      virtual-scroll :columns="columns" :rows="rows" :pagination="pagination" :rows-per-page-options="[0]"
-      :filter="filter" style="max-height: 65vh;">
-      <template v-slot:body-cell-description="props">
-        <q-td :props="props">
-          <q-scroll-area class="description-cell">
-            <div v-html="props.row.description"></div>
-          </q-scroll-area>
-        </q-td>
-      </template>
-    </q-table>
-  </div>
+  <detail-field-table
+    detailField="description"
+    :name="name"
+    :type="type"
+    :filter="filter"
+    :columns="columns"
+    :fetchData="fetchApps"
+    @update:selected="(item) => { selected = item }"
+  />
 </template>
+
 <script lang="ts">
-import { ref, onMounted, reactive, watchEffect, PropType } from 'vue'
+import { ref, PropType } from 'vue';
 import { api } from 'boot/axios';
+import DetailFieldTable from './dialog/DetailFieldTable.vue';

 interface IAppDisplay {
  id: string;
@@ -29,50 +24,35 @@ interface IAppDisplay {

 export default {
  name: 'AppSelectBox',
+  components: {
+    DetailFieldTable
+  },
  props: {
    name: String,
    type: String,
    filter: String,
    filterInitRowsFunc: {
      type: Function as PropType<(app: IAppDisplay) => boolean>,
-    },
-    updateSelectApp: {
-      type: Function
    }
  },
  setup(props) {
+    const selected = ref<IAppDisplay[]>([]);
    const columns = [
      { name: 'id', required: true, label: 'ID', align: 'left', field: 'id', sortable: true, sort: (a: string, b: string) => parseInt(a, 10) - parseInt(b, 10) },
      { name: 'name', label: 'アプリ名', field: 'name', sortable: true, align: 'left' },
      { name: 'description', label: '概要', field: 'description', align: 'left', sortable: false },
      { name: 'createdate', label: '作成日時', field: 'createdate', align: 'left' }
-    ]
-    const isLoaded = ref(false);
-    const rows = reactive<IAppDisplay[]>([]);
-    const selected = ref([])
+    ];

-    watchEffect(()=>{
-      if (selected.value && selected.value[0] && props.updateSelectApp) {
-        props.updateSelectApp(selected.value[0])
-      }
-    });
-    onMounted(() => {
-      api.get('api/v1/allapps').then(res => {
-        res.data.apps.forEach((item: any) => {
-          const row : IAppDisplay = {
+    const fetchApps = async () => {
+      const res = await api.get('api/v1/allapps');
+      return res.data.apps.map((item: any) => ({
        id: item.appId,
        name: item.name,
        description: item.description,
        createdate: dateFormat(item.createdAt)
-          }
-          if (props.filterInitRowsFunc && !props.filterInitRowsFunc(row)) {
-            return;
-          }
-          rows.push(row);
-        });
-        isLoaded.value = true;
-      });
-    });
+      })).filter(app => !props.filterInitRowsFunc || props.filterInitRowsFunc(app));
+    };

    const dateFormat = (dateStr: string) => {
      const date = new Date(dateStr);
@@ -84,31 +64,13 @@ export default {
      const minutes = pad(date.getMinutes());
      const seconds = pad(date.getSeconds());
      return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
-    }
+    };
+
    return {
      columns,
-      rows,
-      selected,
-      isLoaded,
-      pagination: ref({
-        rowsPerPage: 10
-      })
-    }
-  },
-
+      fetchApps,
+      selected
+    };
  }
+};
 </script>
-<style lang="scss">
-.description-cell {
-  height: 60px;
-  width: 300px;
-  max-height: 60px;
-  max-width: 300px;
-  white-space: break-spaces;
-}
-
-.spinner {
-  min-height: 300px;
-  min-width: 400px;
-}
-</style>
--- a/frontend/src/components/ShareDomain/ShareDomainDialog.vue
+++ b/frontend/src/components/ShareDomain/ShareDomainDialog.vue
@@ -41,7 +41,7 @@
      </q-card-section>

      <q-card-actions align="right" class="text-primary">
-        <q-btn flat label="確定" @click="close" />
+        <q-btn flat label="確定" @click="checkClose" />
        <q-btn flat label="キャンセル" @click="close" />
      </q-card-actions>
    </q-card>
@@ -54,6 +54,7 @@ import { IDomainOwnerDisplay } from '../../types/DomainTypes';
 import { IUser, IUserDisplay } from '../../types/UserTypes';
 import { api } from 'boot/axios';
 import SharingUserList from 'components/ShareDomain/SharingUserList.vue';
+import { Dialog } from 'quasar'

 interface Props {
  modelValue: boolean;
@@ -111,6 +112,28 @@ watch(
  }
 );

+const checkClose = () => {
+  if (!canSharedUserFilter.value) {
+    close();
+    return;
+  }
+  Dialog.create({
+    title: '注意',
+    message: '選択済だがまだ付与未完了のユーザーがあります。<br>必要な操作を選んでください。',
+    html: true,
+    persistent: true,
+    ok: {
+      color: 'primary',
+      label: '付与'
+    },
+    cancel: '直接閉じる',
+  }).onCancel(() => {
+    close();
+  }).onOk(() => {
+    shareTo(canSharedUserFilter.value as IUserDisplay);
+  });
+};
+
 const close = () => {
  emit('close');
 };
--- a/frontend/src/components/ShowDialog.vue
+++ b/frontend/src/components/ShowDialog.vue
@@ -4,7 +4,7 @@
      <q-card class="" style="min-width: 40vw; max-width: 80vw; max-height: 95vh;" :style="cardStyle">
        <q-toolbar class="bg-grey-4">
          <q-toolbar-title>{{ name }}</q-toolbar-title>
-          <q-space></q-space>
+          <q-space v-if="$slots.toolbar"></q-space>
          <slot name="toolbar"></slot>
          <q-btn flat round dense icon="close" @click="CloseDialogue('Cancel')" />
        </q-toolbar>
@@ -12,7 +12,7 @@
         <slot></slot>
        </q-card-section>
        <q-card-actions v-if="!disableBtn" align="right" class="text-primary">
-          <q-btn flat label="確定" :loading="okBtnLoading" :v-close-popup="okBtnAutoClose" @click="CloseDialogue('OK')" />
+          <q-btn flat :label="okBtnLabel || '確定'" :loading="okBtnLoading" :v-close-popup="okBtnAutoClose" @click="CloseDialogue('OK')" />
          <q-btn flat label="キャンセル" :disable="okBtnLoading" v-close-popup @click="CloseDialogue('Cancel')" />
        </q-card-actions>
      </q-card>
@@ -30,6 +30,7 @@ export default {
    height:String,
    minWidth:String,
    minHeight:String,
+    okBtnLabel:String,
    okBtnLoading:Boolean,
    okBtnAutoClose:{
      type: Boolean,
@@ -41,7 +42,8 @@ export default {
    }
  },
  emits: [
-    'close'
+    'close',
+    'update:visible'
  ],
  setup(props, context) {
    const CloseDialogue = (val) => {
--- a/frontend/src/components/dialog/DetailFieldTable.vue
+++ b/frontend/src/components/dialog/DetailFieldTable.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="q-px-xs">
+    <div v-if="!isLoaded" class="spinner flex flex-center">
+      <q-spinner color="primary" size="3em" />
+    </div>
+    <q-table v-else class="app-table" :selection="type" row-key="id" v-model:selected="selected" flat bordered
+      virtual-scroll :columns="columns" :rows="rows" :pagination="pagination" :rows-per-page-options="[0]"
+      :filter="filter" style="max-height: 65vh;" @update:selected="emitSelected">
+
+      <template v-for="col in columns" :key="col.name" v-slot:[`body-cell-${col.name}`]="props">
+        <q-td :props="props">
+          <!-- 使用动态插槽名称 -->
+          <slot v-if="col.name !== detailField" :name="`body-cell-${col.name}`" :row="props.row" :column="props.col">
+            <!-- 默认内容 -->
+            <span>{{ props.row[col.name] }}</span>
+          </slot>
+          <q-scroll-area v-else class="description-cell">
+            <div v-html="props.row[detailField]"></div>
+          </q-scroll-area>
+        </q-td>
+      </template>
+
+      
+    </q-table>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, onMounted, reactive, PropType } from 'vue'
+
+interface IRow {
+  [key: string]: any;
+}
+
+export default {
+  name: 'DetailFieldTable',
+  props: {
+    name: String,
+    type: String,
+    filter: String,
+    detailField: {
+      type: String,
+      required: true
+    },
+    columns: {
+      type: Array as PropType<any[]>,
+      required: true
+    },
+    fetchData: {
+      type: Function as PropType<() => Promise<IRow[]>>,
+      required: true
+    },
+    sortBy: {
+      type: String,
+      required: false
+    },
+    sortDesc: {
+      type: Boolean,
+      required: false
+    }
+  },
+  emits: ['update:selected'],
+  setup(props, { emit }) {
+    const isLoaded = ref(false);
+    const rows = reactive<IRow[]>([]);
+    const selected = ref([]);
+
+    onMounted(async () => {
+      const data = await props.fetchData();
+      rows.push(...data);
+      isLoaded.value = true;
+    });
+
+    const emitSelected = (selectedItems: any[]) => {
+      emit('update:selected', selectedItems);
+    };
+
+    return {
+      rows,
+      selected,
+      isLoaded,
+      pagination: ref({
+        sortBy: props.sortBy || undefined,
+        descending: props.sortDesc || undefined,
+        rowsPerPage: 10
+      }),
+      emitSelected
+    };
+  }
+};
+</script>
+
+<style lang="scss">
+.description-cell {
+  height: 60px;
+  width: 300px;
+  max-height: 60px;
+  max-width: 300px;
+  white-space: break-spaces;
+}
+
+.spinner {
+  min-height: 300px;
+  min-width: 400px;
+}
+</style>
--- a/frontend/src/components/dialog/VersionHistory.vue
+++ b/frontend/src/components/dialog/VersionHistory.vue
@@ -0,0 +1,100 @@
+<template>
+  <detail-field-table
+    detailField="comment"
+    type="single"
+    :columns="columns"
+    sortBy="id"
+    :sortDesc="true"
+    :fetchData="fetchVersionHistory"
+    @update:selected="(item) => { selected = item }"
+  >
+    <template v-slot:body-cell-id="p">
+      <div class="flex justify-between">
+        <span>{{ p.row.id }}</span>
+        <q-badge v-if="p.row.isActive" color="primary">現在</q-badge>
+      </div>
+    </template>
+  </detail-field-table>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref } from 'vue';
+import { IAppDisplay, IAppVersion, IAppVersionDisplay } from 'src/types/AppTypes';
+import { date } from 'quasar';
+import { api } from 'boot/axios';
+import DetailFieldTable from './DetailFieldTable.vue';
+import { IUser, IUserDisplay } from 'src/types/UserTypes';
+
+interface IVersionDisplay extends IAppVersionDisplay {
+  isActive : boolean
+}
+
+export default defineComponent({
+  name: 'VersionHistory',
+  components: {
+    DetailFieldTable
+  },
+  props: {
+    app: {
+      type: Object as PropType<IAppDisplay>,
+      required: true,
+    },
+  },
+  setup(props, { emit }) {
+    const selected = ref<IVersionDisplay[]>();
+
+    const columns = [
+      { name: 'id', label: 'バージョン', field: 'version', align: 'left', sortable: true },
+      { name: 'name', label: 'バージョン名', field: 'name', align: 'left', sortable: true },
+      { name: 'comment', label: 'コメント', field: 'comment', align: 'left', sortable: true },
+      // { name: 'creator', label: '作成者', field: (row: IVersionDisplay) => row.creator.fullName, align: 'left', sortable: true },
+      // { name: 'createTime', label: '作成日時', field: 'createTime', align: 'left', sortable: true },
+      // { name: 'updater', label: '更新者', field: (row: IVersionDisplay) => row.updater.fullName, align: 'left', sortable: true },
+      // { name: 'updateTime', label: '更新日時', field: 'updateTime', align: 'left', sortable: true },
+    ];
+
+    const formatDate = (dateStr: string) => {
+      return date.formatDate(dateStr, 'YYYY/MM/DD HH:mm:ss');
+    };
+
+    const toUserDisplay = (user: IUser) => {
+      return {
+        id: user.id,
+        firstName: user.first_name,
+        lastName: user.last_name,
+        fullNameSearch: (user.last_name + user.first_name).toLowerCase(),
+        fullName: user.last_name + ' ' + user.first_name,
+        email: user.email,
+        isActive: user.is_active,
+        isSuperuser: user.is_superuser,
+      }
+    }
+
+    const fetchVersionHistory = async () => {
+      const { data } = await api.get(`api/appversions/${props.app.id}`);
+      return data.data.reduce((arr: IVersionDisplay[], item: any) => {
+        const val = {
+          id: item.version,
+          isActive: item.version === props.app.version,
+          version: item.version,
+          appid: item.appid,
+          name: item.versionname,
+          comment: item.comment,
+          // updater: toUserDisplay(item.updateuser),
+          // updateTime: formatDate(item.updatetime),
+          // creator: toUserDisplay(item.createuser),
+          // createTime: formatDate(item.createtime),
+        } as IVersionDisplay;
+        arr.push(val);
+        return arr;
+      }, []);
+    }
+
+    return {
+      fetchVersionHistory,
+      columns,
+      selected,
+    };
+  },
+});
+</script>
--- a/frontend/src/components/dialog/VersionInput.vue
+++ b/frontend/src/components/dialog/VersionInput.vue
@@ -0,0 +1,43 @@
+<template>
+  <q-input
+    v-model="versionInfo.name"
+    filled
+    autofocus
+    label="バージョン名"
+    :rules="[(val) => !val || val.length <= 30 || '30字以内で入力ください']"
+  />
+  <q-input
+    v-model="versionInfo.comment"
+    filled
+    type="textarea"
+    :rules="[(val) => !val || val.length <= 80 || '80字以内で入力ください']"
+    label="説明"
+  />
+</template>
+<script setup lang="ts">
+import { ref, watch, defineProps, defineEmits } from 'vue';
+import { QInput } from 'quasar';
+import { IVersionSubmit } from 'src/types/AppTypes';
+
+const props = defineProps<{
+  modelValue: IVersionSubmit;
+}>();
+
+const defaultTitle = `${new Date().toLocaleString()}`;
+
+const versionInfo = ref({
+  ...props.modelValue,
+  name: props.modelValue.name || defaultTitle,
+  comment: props.modelValue.comment || '',
+ });
+
+const emit = defineEmits(['update:modelValue']);
+
+watch(
+  versionInfo,
+  () => {
+    emit('update:modelValue', { ...versionInfo.value });
+  },
+  { immediate: true, deep: true }
+);
+</script>
--- a/frontend/src/control/flowctrl.ts
+++ b/frontend/src/control/flowctrl.ts
@@ -32,7 +32,7 @@ export class FlowCtrl {
   * @returns
   */
  async UpdateFlow(jsonData: any): Promise<boolean> {
-    const result = await api.put('api/flow/' + jsonData.flowid, jsonData);
+    const result = await api.put('api/flow', jsonData);
    console.info(result.data);
    return true;
  }
--- a/frontend/src/layouts/MainLayout.vue
+++ b/frontend/src/layouts/MainLayout.vue
@@ -38,8 +38,10 @@ import { computed, onMounted, reactive } from 'vue';
 import EssentialLink, { EssentialLinkProps } from 'components/EssentialLink.vue';
 import DomainSelector from 'components/DomainSelector.vue';
 import { useAuthStore } from 'stores/useAuthStore';
+import { useRoute } from 'vue-router';

 const authStore = useAuthStore();
+const route = useRoute()
 const noDomain = computed(() => !authStore.hasDomain);

 const essentialLinks: EssentialLinkProps[] = reactive([
@@ -128,7 +130,7 @@ const version = process.env.version;
 const productName = process.env.productName;

 onMounted(() => {
-  authStore.setLeftMenu(true);
+  authStore.setLeftMenu(!route.path.startsWith('/FlowChart/'));
 });

 function toggleLeftDrawer() {
--- a/frontend/src/pages/AppManagement.vue
+++ b/frontend/src/pages/AppManagement.vue
@@ -37,14 +37,34 @@

    <show-dialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeSelectAppDialog" min-width="50vw" min-height="50vh" :ok-btn-auto-close="false" :ok-btn-loading="isAdding">
      <template v-slot:toolbar>
-        <q-input dense debounce="300" v-model="filter" placeholder="検索" clearable>
+        <q-input dense debounce="300" v-model="dgFilter" placeholder="検索" clearable>
          <template v-slot:before>
            <q-icon name="search" />
          </template>
        </q-input>
      </template>
-      <app-select-box ref="appDialog" name="アプリ" type="single" :filter="filter" :filterInitRowsFunc="filterInitRows" />
+      <app-select-box ref="appDialog" name="アプリ" type="single" :filter="dgFilter" :filterInitRowsFunc="filterInitRows" />
    </show-dialog>
+
+    
+    <show-dialog v-model:visible="showVersionHistory" :name="targetRow?.name + 'のバージョン履歴'" @close="closeHistoryDg" min-width="30vw" :ok-btn-auto-close="false" :ok-btn-loading="isAdding"
+      ok-btn-label="選択">
+      <version-history ref="versionDialog" :app="targetRow" />
+    </show-dialog>
+
+    <q-dialog v-model="deleteDialog" persistent>
+      <q-card>
+        <q-card-section class="row items-center">
+          <q-icon name="warning" color="warning" size="2em" />
+          <span class="q-ml-sm">削除してもよろしいですか？</span>
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn flat label="Cancel" color="primary" v-close-popup />
+          <q-btn flat label="OK" color="primary" :loading="deleteUserLoading" @click="deleteApp" />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
  </div>
 </template>

@@ -56,20 +76,11 @@ import { useAuthStore } from 'stores/useAuthStore';
 import { useFlowEditorStore } from 'stores/flowEditor';
 import { router } from 'src/router';
 import { date } from 'quasar'
-import { IManagedApp } from 'src/types/AppTypes';
+import { IManagedApp, IAppDisplay, IAppVersion } from 'src/types/AppTypes';
 import ShowDialog from 'src/components/ShowDialog.vue';
 import AppSelectBox from 'src/components/AppSelectBox.vue';
 import TableActionMenu from 'components/TableActionMenu.vue';
-
-interface IAppDisplay{
-  id:string;
-  sortId: number;
-  name:string;
-  url:string;
-  user:string;
-  version:string;
-  updatetime:string;
-}
+import VersionHistory from 'components/dialog/VersionHistory.vue';

 const authStore = useAuthStore();
 const numberStringSorting = (a: string, b: string) => parseInt(a, 10) - parseInt(b, 10);
@@ -78,8 +89,8 @@ const columns = [
  { name: 'id', label: 'アプリID', field: 'id', align: 'left', sortable: true, sort: numberStringSorting },
  { name: 'name', label: 'アプリ名', field: 'name', align: 'left', sortable: true },
  { name: 'url', label: 'URL', field: 'url', align: 'left', sortable: true },
-  { name: 'user', label: '最後更新者', field: 'user', align: 'left', sortable: true},
-  { name: 'updatetime', label: '最後更新日', field: 'updatetime', align: 'left', sortable: true},
+  { name: 'updateUser', label: '最後更新者', field: (row: IAppDisplay) => row.updateUser.fullName, align: 'left', sortable: true},
+  { name: 'updateTime', label: '最後更新日', field: 'updateTime', align: 'left', sortable: true},
  { name: 'version', label: 'バージョン', field: 'version', align: 'left', sortable: true, sort: numberStringSorting },
  { name: 'actions', label: '', field: 'actions' }
 ];
@@ -87,14 +98,20 @@ const columns = [
 const pagination = ref({ sortBy: 'id', descending: true, rowsPerPage: 20 });
 const loading = ref(false);
 const filter = ref('');
+const dgFilter = ref('');
 const rows = ref<IAppDisplay[]>([]);
+const targetRow = ref<IAppDisplay>();
 const rowIds = new Set<string>();

 const $q = useQuasar()
 const store = useFlowEditorStore();
 const appDialog = ref();
+const versionDialog = ref();
 const showSelectApp=ref(false);
+const showVersionHistory=ref(false);
 const isAdding = ref(false);
+const deleteDialog = ref(false);
+const deleteUserLoading = ref(false);

 const actionList =  [
  { label: '設定', icon: 'account_tree', action: toEditFlowPage },
@@ -137,6 +154,7 @@ const filterInitRows = (row: {id: string}) => {

 const showAddAppDialog = () => {
  showSelectApp.value = true;
+  dgFilter.value = ''
 }

 const closeSelectAppDialog = async (val: 'OK'|'Cancel') => {
@@ -150,31 +168,72 @@ const closeSelectAppDialog = async (val: 'OK'|'Cancel') => {
 }

 function removeRow(app:IAppDisplay) {
-  return
+  targetRow.value = app;
+  deleteDialog.value = true;
+}
+
+const deleteApp = async () => {
+  deleteUserLoading.value = true;
+  try {
+    await api.delete(`api/apps/${targetRow.value?.id}`);
+    await getApps();
+  } catch (error) {
+    $q.notify({
+      icon: 'error',
+      color: 'negative',
+      message: 'アプリの削除に失敗しました'
+    });
+  } finally {
+    deleteUserLoading.value = false;
+    deleteDialog.value = false;
+  }
 }

 function showHistory(app:IAppDisplay) {
-  return
+  targetRow.value = app;
+  showVersionHistory.value = true;
+  dgFilter.value = ''
+}
+
+const closeHistoryDg = async (val: 'OK'|'Cancel') => {
+  showVersionHistory.value = true;
+  if (val == 'OK' && versionDialog.value.selected[0]) {
+      isAdding.value = true;
+      await api.put(`api/appversions/${targetRow.value?.id}/${versionDialog.value.selected[0].id}`)
+      await getApps();
+  }
+  showVersionHistory.value = false;
+  isAdding.value = false;
 }

 const appToAppDisplay = (app: IManagedApp) => {
+  const user = app.updateuser;
  return {
    id: app.appid,
    sortId: parseInt(app.appid, 10),
    name: app.appname,
    url: `${app.domainurl}/k/${app.appid}`,
-    user: `${app.updateuser.first_name} ${app.updateuser.last_name}` ,
-    updatetime:date.formatDate(app.update_time, 'YYYY/MM/DD HH:mm'),
-    version: app.version
+    version: app.version,
+    updateTime:date.formatDate(app.update_time, 'YYYY/MM/DD HH:mm'),
+    updateUser: {
+      id: user.id,
+      firstName: user.first_name,
+      lastName: user.last_name,
+      fullNameSearch: (user.last_name + user.first_name).toLowerCase(),
+      fullName: user.last_name + ' ' + user.first_name,
+      email: user.email,
+      isSuperuser: user.is_superuser,
+      isActive: user.is_active,
    }
+  } as IAppDisplay
 }

-function toEditFlowPage(app:IAppDisplay) {
+async function toEditFlowPage(app:IAppDisplay) {
  store.setApp({
    appId: app.id,
    name: app.name
  });
  store.selectFlow(undefined);
-  router.push('/FlowChart/' + app.id);
+  await router.push('/FlowChart/' + app.id);
 };
 </script>
--- a/frontend/src/pages/FlowChart.vue
+++ b/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="bookmark_border"></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="versionSubmit" />
+    </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 { IAppDisplay, IManagedApp, IVersionSubmit } 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 versionSubmit = ref<IVersionSubmit>();
 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,22 @@ const onSaveActionProps=(props:IActionProperty[])=>{
  }
 };

+const onSaveVersion = async () => {
+  versionSubmit.value = { appId: store.appInfo?.appId }
+  saveVersionAction.value = true;
+}
+
+const closeSaveVersionDg = async (val: 'OK'|'CANCEL') => {
+  if (val == 'OK') {
+    await onSaveAllFlow();
+    await api.post('api/apps', {
+      'appid': versionSubmit.value?.appId,
+      'versionname': versionSubmit.value?.name,
+      'comment': versionSubmit.value?.comment
+    })
+  }
+}
+
 const onSaveFlow = async () => {
  const targetFlow = store.selectedFlow;
  if (targetFlow === undefined) {
@@ -316,11 +348,9 @@ const onSaveAllFlow= async ()=>{
 const fetchData = async () => {
  initLoading.value = true;
  if (store.appInfo === undefined && route?.params?.id !== undefined) {
-    const { appid, appname } = await fetchAppById(route.params.id as string);
-    store.setApp({
-      appId: appid,
-      name: appname
-    });
+    // only for page refreshed
+    const app = await fetchAppById(route.params.id as string);
+    store.setApp(app);
  };
  await store.loadFlow();
  initLoading.value = false
@@ -328,24 +358,39 @@ const fetchData = async () => {
 }

 const fetchAppById = async(id: string) => {
-  try {
-    const result = await api.get('api/apps');
-    return result.data.find((item: IManagedApp) => item.appid === id ) as IManagedApp;
-  } catch (e) {
-    console.error(e);
-    const result = await api.get(`api/v1/app?app=${id}`);
-    const data = result?.data;
-    if (data?.message) {
+  let result = await api.get('api/apps');
+  const app = result.data?.data?.find((item: IManagedApp) => item.appid === id ) as IManagedApp;
+  if (app) {
+    return convertManagedAppToAppInfo(app);
+  }
+
+  result = await api.get(`api/v1/app?app=${id}`);
+  const kApp = result?.data as IAppDisplay | KErrorMsg;
+  if (isErrorMsg(kApp)) {
    $q.notify({
      type: 'negative',
-        caption: "エラー",
-        message: data.message
+      caption: 'エラー',
+      message: kApp.message,
    });
  }
-    return { appid: data.appId, appname: data.name };
+  return kApp;
 }
+
+type KErrorMsg = {
+  message: string;
 }

+const isErrorMsg = (e: IAppDisplay | KErrorMsg): e is KErrorMsg => {
+  return 'message' in e;
+};
+
+const convertManagedAppToAppInfo = (app: IManagedApp): AppInfo => {
+  return {
+    appId: app.appid,
+    name: app.appname
+  }
+};
+
 const onClearFilter=()=>{
  filter.value='';
 }
--- a/frontend/src/pages/TenantDomain.vue
+++ b/frontend/src/pages/TenantDomain.vue
@@ -145,7 +145,7 @@ import { useAuthStore } from 'stores/useAuthStore';
 import { useDomainStore } from 'stores/useDomainStore';
 import ShareDomainDialog from 'components/ShareDomain/ShareDomainDialog.vue';
 import TableActionMenu from 'components/TableActionMenu.vue';
-import { IDomain, IDomainOwnerDisplay, IDomainSubmit } from '../types/DomainTypes';
+import { IDomain, IDomainDisplay, IDomainOwnerDisplay, IDomainSubmit } from '../types/DomainTypes';

 const authStore = useAuthStore();
 const domainStore = useDomainStore();
@@ -163,10 +163,10 @@ const columns = [
  //   classes: inactiveRowClass
  // },
  { name: 'name', label: '環境名', field: 'name', align: 'left', sortable: true, classes: inactiveRowClass },
-  { name: 'active', label: 'x', align: 'left', field: 'domainActive', classes: inactiveRowClass },
+  { name: 'active', label: '', align: 'left', field: 'domainActive', classes: inactiveRowClass },
  { name: 'url', label: 'URL', field: 'url', align: 'left', sortable: true, classes: inactiveRowClass },
  { name: 'user', label: 'ログイン名', field: 'user', align: 'left', classes: inactiveRowClass },
-  { name: 'owner', label: '所有者', field: row => row.owner.fullName, align: 'left', classes: inactiveRowClass },
+  { name: 'owner', label: '所有者', field: (row: IDomainOwnerDisplay) => row.owner.fullName, align: 'left', classes: inactiveRowClass },
  { name: 'actions', label: '', field: 'actions', classes: inactiveRowClass }
 ];

--- a/frontend/src/types/AppTypes.ts
+++ b/frontend/src/types/AppTypes.ts
@@ -1,10 +1,69 @@
-import { IUser } from './UserTypes';
+import { IUser, IUserDisplay } from './UserTypes';

 export interface IManagedApp {
  appid: string;
  appname: string;
  domainurl: string;
  version: string;
+  user: IUser;
  updateuser: IUser;
+  create_time: string;
  update_time: string;
 }
+
+export interface IManagedApp {
+  appid: string;
+  appname: string;
+  domainurl: string;
+  version: string;
+  user: IUser;
+  updateuser: IUser;
+  create_time: string;
+  update_time: string;
+}
+
+export interface IAppDisplay{
+  id:string;
+  sortId: number;
+  name:string;
+  url:string;
+  updateUser: IUserDisplay;
+  updateTime:string;
+  version:string;
+}
+
+export interface IVersionInfo {
+  id: string;
+  name?: string;
+  desc?: string;
+}
+
+export interface IVersionSubmit {
+  appId: string;
+  name?: string;
+  comment?: string;
+}
+
+export interface IAppVersion {
+  id: number;
+  version: number;
+  appid: string;
+  versionname: string
+  comment: string;
+  updater: IUserDisplay;
+  updateTime: string;
+  creator: IUserDisplay;
+  createTime: string;
+}
+
+export interface IAppVersionDisplay {
+  id: number;
+  version: number;
+  appid: string;
+  name: string
+  comment: string;
+  updater: IUserDisplay;
+  updateTime: string;
+  creator: IUserDisplay;
+  createTime: string;
+}