fix UI

frontend/src/pages/AppVersionManagement.vue

@@ -29,9 +29,12 @@
 
       <template v-slot:body-cell-id="p">
         <q-td :props="p">
-          <div class="flex justify-between">
+          <div class="">
             <span>{{ p.row.id }}</span>
-            <q-badge v-if="p.row.id === app.version" color="primary">適用中</q-badge>
+            <span class="q-ml-md" v-if="p.row.id === app.version">
+              <q-badge  color="primary">適用中</q-badge>
+              <q-badge class="q-ml-xs" v-if="isVersionEditing()" color="orange-7">変更あり</q-badge>
+            </span>
           </div>
         </q-td>
       </template>
@@ -54,14 +57,23 @@
 
     <q-dialog v-model="confirmDialog" 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 class="q-pb-none">
+          <q-list>
+            <q-item>
+              <q-item-section avatar>
+                <q-icon name="warning" color="warning" size="2em" />
+              </q-item-section>
+              <q-item-section>
+                <div >現在のバージョンは未保存です。</div>
+                <div >プルすると、上書されますので、よろしいでしょうか？</div>
+              </q-item-section>
+            </q-item>
+          </q-list>
         </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-btn flat label="キャンセル" color="primary" v-close-popup />
+          <q-btn flat label="上書きする" color="primary" :loading="deleteUserLoading" @click="doChangeVersion()" />
         </q-card-actions>
       </q-card>
     </q-dialog>
@@ -132,6 +144,11 @@ const getVersions = async () => {
   versionLoading.value = false;
 }
 
+function isVersionEditing() {
+  // TODO
+  return false;
+};
+
 onMounted(async () => {
   let isSuccess = getAppById();
   if (!isSuccess) {
@@ -150,25 +167,26 @@ onMounted(async () => {
 });
 
 async function changeVersion(version: IAppVersionDisplay) {
-  // TODO
-  versionLoading.value = true;
   target.value = version;
+  if (!isVersionEditing()) {
+    await doChangeVersion(version);
+  } else {
+    confirmDialog.value = true;
+  }
+}
+
+async function doChangeVersion(version?: IAppVersionDisplay) {
+  if (!version) {
+    version = target.value as IAppVersionDisplay;
+  }
+  confirmDialog.value = false;
+  versionLoading.value = true;
   await appStore.changeVersion(app.value, version);
   await getApps();
   getAppById();
   versionLoading.value = false;
 }
 
-// const deleteApp = async () => {
-//   if (target.value?.id) {
-//     deleteUserLoading.value = true;
-//     await appStore.deleteApp(targetRow.value)
-//     await getApps();
-//     deleteUserLoading.value = false;
-//     confirmDialog.value = false;
-//   }
-// }
-
 async function toEditFlowPage() {
   store.setApp({
     appId: app.value.id,