fix UI & add unchanged

frontend/src/components/dialog/VersionInput.vue

@@ -1,12 +1,17 @@
 <template>
   <q-input
+    ref="nameRef"
     v-model="versionInfo.name"
     filled
     autofocus
     label="バージョン名"
-    :rules="[(val) => !val || val.length <= 80 || '80字以内で入力ください']"
+    :rules="[
+      val => !!val || 'バージョン名を入力してください。',
+      (val) => !val || val.length <= 80 || '80字以内で入力ください'
+    ]"
   />
   <q-input
+    ref="commentRef"
     v-model="versionInfo.comment"
     filled
     type="textarea"
@@ -19,6 +24,15 @@ import { ref, watch, defineProps, defineEmits } from 'vue';
 import { QInput } from 'quasar';
 import { IVersionSubmit } from 'src/types/AppTypes';
 
+const nameRef = ref();
+const commentRef = ref();
+
+const isValid = () => {
+  const nameHasError = nameRef.value?.hasError ?? false;
+  const commentHasError = commentRef.value?.hasError ?? false;
+  return !nameHasError && !commentHasError;
+};
+
 const props = defineProps<{
   modelValue: IVersionSubmit;
 }>();
@@ -33,6 +47,10 @@ const versionInfo = ref({
 
 const emit = defineEmits(['update:modelValue']);
 
+defineExpose({
+  isValid
+})
+
 watch(
   versionInfo,
   () => {

frontend/src/pages/AppManagement.vue

@@ -31,7 +31,8 @@
       <template v-slot:body-cell-version="p">
         <q-td :props="p">
           <div class="flex justify-between full-width" >
-            <span class="ellipsis" :title="p.row.versionName">{{ p.row.versionName || '未命名' }}</span>
+            <span v-if="p.row.version == 0"></span>
+            <span v-else class="ellipsis" :title="p.row.versionName">{{ p.row.versionName }}</span>
             <q-badge v-if="isVersionEditing(p.row)" color="orange-7">変更あり</q-badge>
           </div>
         </q-td>
@@ -128,9 +129,8 @@ const getApps = async () => {
   loading.value = false;
 }
 
-function isVersionEditing(app:IAppDisplay) {
-  // TODO
-  return false;
+function isVersionEditing(app: IAppDisplay) {
+  return !!app.versionChanged;
 };
 
 onMounted(async () => {

frontend/src/pages/AppVersionManagement.vue

@@ -32,7 +32,7 @@
           <div class="">
             <span>{{ p.row.id }}</span>
             <span class="q-ml-md" v-if="p.row.id === app.version">
-              <q-badge  color="primary">適用中</q-badge>
+              <q-badge color="primary">適用中</q-badge>
               <q-badge class="q-ml-xs" v-if="isVersionEditing()" color="orange-7">変更あり</q-badge>
             </span>
           </div>
@@ -58,19 +58,17 @@
       </template>
     </q-table>
 
-
-
     <q-dialog v-model="confirmDialog" persistent>
       <q-card>
         <q-card-section class="q-pb-none">
           <q-list>
-            <q-item>
-              <q-item-section avatar>
+            <q-item class="q-px-none">
+              <q-item-section avatar class="items-center">
                 <q-icon name="warning" color="warning" size="2em" />
               </q-item-section>
               <q-item-section>
-                <div >現在のバージョンは未保存です。</div>
-                <div >プルすると、上書されますので、よろしいでしょうか？</div>
+                <div>現在のバージョンは未保存です。</div>
+                <div>プルすると、上書されますので、よろしいでしょうか？</div>
               </q-item-section>
             </q-item>
           </q-list>
@@ -90,7 +88,6 @@ import { useQuasar } from 'quasar';
 import { ref, onMounted } from 'vue';
 import { useAppStore } from 'stores/useAppStore';
 import { useAuthStore } from 'stores/useAuthStore';
-import { useFlowEditorStore } from 'stores/flowEditor';
 import { router } from 'src/router';
 import { useRoute } from 'vue-router';
 import { IAppDisplay, IAppVersionDisplay } from 'src/types/AppTypes';
@@ -121,7 +118,6 @@ const filter = ref('');
 const versionLoading = ref(false);
 
 const target = ref<IAppVersionDisplay>();
-const store = useFlowEditorStore();
 const confirmDialog = ref(false);
 const deleteUserLoading = ref(false);
 
@@ -152,8 +148,7 @@ const getVersions = async () => {
 }
 
 function isVersionEditing() {
-  // TODO
-  return false;
+  return !!app.value.versionChanged;
 };
 
 onMounted(async () => {
@@ -195,18 +190,6 @@ async function doChangeVersion(version?: IAppVersionDisplay) {
   versionLoading.value = false;
 }
 
-async function toEditFlowPage() {
-  store.setApp({
-    appId: app.value.id,
-    name: app.value.name
-  });
-  store.selectFlow(undefined);
-  try {
-    await router.push('/FlowChart/' + app.value.id);
-  } catch (e) {
-    console.log(e);
-  }
-};
 </script>
 
 <style lang="scss">

frontend/src/pages/FlowChart.vue

@@ -85,8 +85,8 @@
       <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 v-model:visible="saveVersionAction" name="保存して新バージョン" @close="closeSaveVersionDg" :ok-btn-auto-close="false" min-width="500px">
+      <version-input ref="versionInputRef" v-model="versionSubmit" />
     </ShowDialog>
     <q-inner-loading
       :showing="initLoading"
@@ -135,6 +135,7 @@ const prevNodeIfo = ref({
 // const refFlow = ref<ActionFlow|null>(null);
 const showAddAction = ref(false);
 const saveVersionAction = ref(false);
+const versionInputRef = ref();
 const drawerRight = ref(false);
 const filter=ref("");
 const model = ref("");
@@ -270,9 +271,17 @@ const onSaveVersion = async () => {
 }
 
 const closeSaveVersionDg = async (val: 'OK'|'CANCEL') => {
+  saveVersionAction.value = true;
   if (val == 'OK') {
-    await onSaveAllFlow();
-    await appStore.createVersion(versionSubmit.value);
+    if (versionInputRef?.value?.isValid()) {
+      saveVersionAction.value = false;
+      await onSaveAllFlow();
+      await appStore.createVersion(versionSubmit.value);
+    } else {
+      saveVersionAction.value = true;
+    }
+  } else {
+    saveVersionAction.value = false;
   }
 }
 

frontend/src/stores/useAppStore.ts

@@ -97,7 +97,8 @@ function appToAppDisplay(app: IManagedApp) {
     version: app.version,
     versionName: app.versionname,
     updateTime: formatDate(app.update_time),
-    updateUser: userToUserDisplay(app.updateuser)
+    updateUser: userToUserDisplay(app.updateuser),
+    versionChanged: app.is_saved
   } as IAppDisplay
 }
 

frontend/src/types/AppTypes.ts

@@ -10,6 +10,7 @@ export interface IManagedApp {
   updateuser: IUser;
   create_time: string;
   update_time: string;
+  is_saved: boolean;
 }
 
 export interface IAppDisplay{
@@ -21,6 +22,7 @@ export interface IAppDisplay{
   updateTime:string;
   version:number;
   versionName?: string;
+  versionChanged: boolean;
 }
 
 export interface IVersionSubmit {