fix UI

2024-12-14 21:52:26 +08:00
parent 39775a5179
commit 1135361b00
7 changed files with 84 additions and 50 deletions
--- a/frontend/src/components/ShareDomain/ShareDomainDialog.vue
+++ b/frontend/src/components/ShareDomain/ShareDomainDialog.vue
@@ -204,7 +204,8 @@ const itemToDisplay = (item: IUser) => {

 <style lang="scss">
 .dialog-content {
-  width: 60vw;
+  width: 700px !important;
+  max-width: 80vw !important;
  max-height: 80vh;
  .q-select {
    min-width: 0 !important;
--- a/frontend/src/components/UserDomain/DomainCard.vue
+++ b/frontend/src/components/UserDomain/DomainCard.vue
@@ -6,9 +6,10 @@
          <div class="text-h6 ellipsis">{{ item.name }}</div>
          <div class="text-subtitle2">{{ item.url }}</div>
        </div>
-        <div v-if="!isOwnerFunc(item.owner.id)" class="col-auto">
+        <div class="col-auto">
          <!-- <q-badge color="secondary" text-color="white" align="middle" class="q-mb-xs" label="他人の所有" /> -->
-          <q-chip square color="secondary" text-color="white" icon="people" label="他人の所有" size="sm" />
+          <q-chip v-if="!isOwnerFunc(item.owner.id)" square color="secondary" text-color="white" icon="people" label="他人の所有" size="sm" />
+          <q-chip v-else square color="purple" text-color="white" icon="people" label="自分" size="sm" />
        </div>

      </div>
@@ -25,7 +26,7 @@
          <div class="text-grey-7 text-caption text-weight-medium">
            所有者
          </div>
-          <div class="smaller-font-size">{{ item.owner.fullName }}</div>
+          <div class="smaller-font-size">{{ !isOwnerFunc(item.owner.id) ? item.owner.fullName : '自分' }}</div>
        </div>
      </div>
    </q-card-section>
--- a/frontend/src/pages/AppManagement.vue
+++ b/frontend/src/pages/AppManagement.vue
@@ -28,6 +28,14 @@
          </a>
        </q-td>
      </template>
+      <template v-slot:body-cell-version="p">
+        <q-td :props="p">
+          <div class="flex justify-between">
+            <span>{{ p.row.version }}</span>
+            <q-badge v-if="isVersionEditing(p.row)" color="orange-7">変更あり</q-badge>
+          </div>
+        </q-td>
+      </template>
      <template v-slot:body-cell-actions="p">
        <q-td :props="p">
          <table-action-menu :row="p.row" minWidth="180px" max-width="200px" :actions="actionList" />
@@ -112,6 +120,11 @@ const getApps = async () => {
  loading.value = false;
 }

+function isVersionEditing(app:IAppDisplay) {
+  // TODO
+  return false;
+};
+
 onMounted(async () => {
  await getApps();
 });
--- a/frontend/src/pages/AppVersionManagement.vue
+++ b/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,
--- a/frontend/src/pages/FlowChart.vue
+++ b/frontend/src/pages/FlowChart.vue
@@ -54,7 +54,7 @@
        <q-breadcrumbs-el icon="widgets" label="アプリ管理" to="/app" />
        <q-breadcrumbs-el>
          <template v-slot>
-            <a class="full-width" :href="!store.appInfo?'':`${authStore.currentDomain.kintoneUrl}/k/${store.appInfo?.appId}`" target="_blank" title="Kiontoneへ">
+            <a class="full-width" :href="store.appInfo ? `${authStore.currentDomain.kintoneUrl}/k/${store.appInfo?.appId}` : ''" target="_blank" title="Kiontoneへ">
              {{ store.appInfo?.name }}
              <q-icon
                class="q-ma-xs"
@@ -99,11 +99,12 @@
 <script setup lang="ts">
 import { ref, reactive, computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
-import { IActionNode, ActionNode, IActionFlow, ActionFlow, RootAction, IActionProperty } from 'src/types/ActionTypes';
+import { IActionNode, ActionNode, IActionFlow, ActionFlow, RootAction, IActionProperty, AppInfo } from 'src/types/ActionTypes';
 import { IAppDisplay, IManagedApp, IVersionSubmit } from 'src/types/AppTypes';
 import { storeToRefs } from 'pinia';
 import { useFlowEditorStore } from 'stores/flowEditor';
 import { useAuthStore } from 'stores/useAuthStore';
+import { useAppStore } from 'stores/useAppStore';
 import { api } from 'boot/axios';

 import NodeItem from 'src/components/main/NodeItem.vue';
@@ -119,10 +120,11 @@ const deployLoading = ref(false);
 const saveLoading = ref(false);
 const initLoading = ref(true);
 const drawerLeft = ref(false);
-const versionSubmit = ref<IVersionSubmit>();
+const versionSubmit = ref<IVersionSubmit>({} as IVersionSubmit);
 const $q = useQuasar();
 const store = useFlowEditorStore();
 const authStore = useAuthStore();
+const appStore = useAppStore();
 const route = useRoute()

 const appDg = ref();
@@ -262,18 +264,15 @@ const onSaveActionProps=(props:IActionProperty[])=>{
 };

 const onSaveVersion = async () => {
-  versionSubmit.value = { appId: store.appInfo?.appId }
+  if (!store.appInfo) return;
+  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
-    })
+    await appStore.createVersion(versionSubmit.value);
  }
 }

@@ -395,9 +394,9 @@ const onClearFilter=()=>{
  filter.value='';
 }

-onMounted(() => {
+onMounted(async () => {
  authStore.setLeftMenu(false);
-  fetchData();
+  await fetchData();
 });
 </script>

--- a/frontend/src/stores/useAppStore.ts
+++ b/frontend/src/stores/useAppStore.ts
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import { api } from 'boot/axios';
-import { IAppDisplay, IAppVersion, IAppVersionDisplay, IManagedApp } from 'src/types/AppTypes';
+import { IAppDisplay, IAppVersion, IAppVersionDisplay, IManagedApp, IVersionSubmit } from 'src/types/AppTypes';
 import { IUser } from 'src/types/UserTypes';
 import { date, Notify } from 'quasar'

@@ -35,15 +35,6 @@ export const useAppStore = defineStore('app', {
      return this.apps.find((item: IAppDisplay) => item.id === id);
    },

-    async getVersionsByAppId(app: IAppDisplay) {
-      const { data } = await api.get(`api/appversions/${app.id}`);
-      return data.data.map((item: IAppVersion) => versionToVersionDisplay(item));
-    },
-
-    async changeVersion(app: IAppDisplay, version: IAppVersionDisplay) {
-      await api.put(`api/appversions/${app.id}/${version.id}`);
-    },
-
    async deleteApp(app: IAppDisplay) {
      try {
        await api.delete(`api/apps/${app.id}`);
@@ -59,6 +50,23 @@ export const useAppStore = defineStore('app', {
      return true;
    },

+    async getVersionsByAppId(app: IAppDisplay) {
+      const { data } = await api.get(`api/appversions/${app.id}`);
+      return data.data.map((item: IAppVersion) => versionToVersionDisplay(item));
+    },
+
+    async changeVersion(app: IAppDisplay, version: IAppVersionDisplay) {
+      await api.put(`api/appversions/${app.id}/${version.id}`);
+    },
+
+    async createVersion(versionSubmit: IVersionSubmit) {
+      await api.post('api/apps', {
+        'appid': versionSubmit.appId,
+        'versionname': versionSubmit.name,
+        'comment': versionSubmit.comment
+      })
+    },
+
    reset() {
      this.apps = [];
      this.rowIds.clear();
--- a/frontend/src/types/AppTypes.ts
+++ b/frontend/src/types/AppTypes.ts
@@ -21,12 +21,6 @@ export interface IAppDisplay{
  version:number;
 }

-export interface IVersionInfo {
-  id: string;
-  name?: string;
-  desc?: string;
-}
-
 export interface IVersionSubmit {
  appId: string;
  name?: string;