version with backend

2024-12-09 14:31:24 +08:00
parent 305868f091
commit b95548e7f7
10 changed files with 133 additions and 49 deletions
--- 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
@@ -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,
--- a/frontend/src/components/dialog/DetailFieldTable.vue
+++ b/frontend/src/components/dialog/DetailFieldTable.vue
@@ -6,13 +6,21 @@
    <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-slot:[`body-cell-${detailField}`]="props">
+
+      <template v-for="col in columns" :key="col.name" v-slot:[`body-cell-${col.name}`]="props">
        <q-td :props="props">
-          <q-scroll-area class="description-cell">
+          <!-- 使用动态插槽名称 -->
+          <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>
@@ -41,6 +49,14 @@ export default {
    fetchData: {
      type: Function as PropType<() => Promise<IRow[]>>,
      required: true
+    },
+    sortBy: {
+      type: String,
+      required: false
+    },
+    sortDesc: {
+      type: Boolean,
+      required: false
    }
  },
  emits: ['update:selected'],
@@ -64,6 +80,8 @@ export default {
      selected,
      isLoaded,
      pagination: ref({
+        sortBy: props.sortBy || undefined,
+        descending: props.sortDesc || undefined,
        rowsPerPage: 10
      }),
      emitSelected
--- a/frontend/src/components/dialog/VersionHistory.vue
+++ b/frontend/src/components/dialog/VersionHistory.vue
@@ -3,19 +3,32 @@
    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, watch } from 'vue';
-import { IAppDisplay, IAppVersion } from 'src/types/AppTypes';
+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: {
@@ -28,23 +41,23 @@ export default defineComponent({
    },
  },
  setup(props, { emit }) {
-    const selected = ref<IAppVersion[]>([]);
+    const selected = ref<IVersionDisplay[]>();

    const columns = [
-      { name: 'version', label: 'ID', field: 'version', align: 'left', sortable: true },
+      { 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: IAppVersion) => row.creator.fullName, align: 'left', sortable: true },
-      { name: 'createTime', label: '作成日時', field: 'createTime', align: 'left', sortable: true },
-      { name: 'updater', label: '更新者', field: (row: IAppVersion) => row.updater.fullName, align: 'left', sortable: true },
-      { name: 'updateTime', label: '更新日時', field: 'updateTime', 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 toUserDisaplay = (user: IUser) => {
+    const toUserDisplay = (user: IUser) => {
      return {
        id: user.id,
        firstName: user.first_name,
@@ -58,24 +71,29 @@ export default defineComponent({
    }

    const fetchVersionHistory = async () => {
-      const { data } = await api.get(`api/apps/${props.app.id}/versions`);
-      return data.data.map((item: any) => ({
-        id: item.id,
-        version: item.version,
-        appid: item.appid,
-        name: item.name,
-        comment: item.comment,
-        updater: toUserDisaplay(item.updateuser),
-        updateTime: formatDate(item.updatetime),
-        creator: toUserDisaplay(item.createuser),
-        createTime: formatDate(item.createtime),
-      } as IAppVersion));
-    };
+      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
+      selected,
    };
  },
 });
--- a/frontend/src/components/dialog/VersionInput.vue
+++ b/frontend/src/components/dialog/VersionInput.vue
@@ -7,7 +7,7 @@
    :rules="[(val) => !val || val.length <= 30 || '30字以内で入力ください']"
  />
  <q-input
-    v-model="versionInfo.desc"
+    v-model="versionInfo.comment"
    filled
    type="textarea"
    :rules="[(val) => !val || val.length <= 80 || '80字以内で入力ください']"
@@ -17,10 +17,10 @@
 <script setup lang="ts">
 import { ref, watch, defineProps, defineEmits } from 'vue';
 import { QInput } from 'quasar';
-import { IVersionInfo } from 'src/types/AppTypes';
+import { IVersionSubmit } from 'src/types/AppTypes';

 const props = defineProps<{
-  modelValue: IVersionInfo;
+  modelValue: IVersionSubmit;
 }>();

 const defaultTitle = `${new Date().toLocaleString()}`;
@@ -28,6 +28,7 @@ const defaultTitle = `${new Date().toLocaleString()}`;
 const versionInfo = ref({
  ...props.modelValue,
  name: props.modelValue.name || defaultTitle,
+  comment: props.modelValue.comment || '',
 });

 const emit = defineEmits(['update:modelValue']);
--- 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/pages/AppManagement.vue
+++ b/frontend/src/pages/AppManagement.vue
@@ -47,8 +47,9 @@
    </show-dialog>

    
-    <show-dialog v-model:visible="showVersionHistory" :name="targetRow?.name + 'のバージョン履歴'" @close="closeHistoryDg" min-width="50vw" min-height="50vh" :ok-btn-auto-close="false" :ok-btn-loading="isAdding">
-      <version-history ref="versionDialog" :app="targetRow as IAppDisplay" />
+    <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>
  </div>
 </template>
@@ -91,6 +92,7 @@ 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);
@@ -161,12 +163,13 @@ function showHistory(app:IAppDisplay) {
 }

 const closeHistoryDg = async (val: 'OK'|'Cancel') => {
-  showSelectApp.value = true;
-  if (val == 'OK' && appDialog.value.selected[0]) {
+  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();
  }
-  showSelectApp.value = false;
+  showVersionHistory.value = false;
  isAdding.value = false;
 }

--- a/frontend/src/pages/FlowChart.vue
+++ b/frontend/src/pages/FlowChart.vue
@@ -19,7 +19,7 @@
                    <q-icon name="bookmark_border"></q-icon>
                  </q-item-section>
                  <q-item-section>
-                    <q-item-label>新バージョン保存</q-item-label>
+                    <q-item-label>保存して新バージョン</q-item-label>
                  </q-item-section>
                </q-item>

@@ -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="versionInfo" />
+    <ShowDialog v-model:visible="saveVersionAction" name="保存して新バージョン" @close="closeSaveVersionDg" min-width="500px">
+      <version-input v-model="versionSubmit" />
    </ShowDialog>
    <q-inner-loading
      :showing="initLoading"
@@ -100,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 { IAppDisplay, IManagedApp, IVersionInfo } 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';
@@ -119,7 +119,7 @@ const deployLoading = ref(false);
 const saveLoading = ref(false);
 const initLoading = ref(true);
 const drawerLeft = ref(false);
-const versionInfo = ref<IVersionInfo>();
+const versionSubmit = ref<IVersionSubmit>();
 const $q = useQuasar();
 const store = useFlowEditorStore();
 const authStore = useAuthStore();
@@ -262,16 +262,18 @@ const onSaveActionProps=(props:IActionProperty[])=>{
 };

 const onSaveVersion = async () => {
-  versionInfo.value = {
-    id: '1' // TODO
-  }
+  versionSubmit.value = { appId: store.appInfo?.appId }
  saveVersionAction.value = true;
-  // await onSaveAllFlow();
 }

-const closeSaveVersionDg = (val: 'OK'|'CANCEL') => {
+const closeSaveVersionDg = async (val: 'OK'|'CANCEL') => {
  if (val == 'OK') {
-    console.log(versionInfo.value);
+    await onSaveAllFlow();
+    await api.post('api/apps', {
+      'appid': versionSubmit.value?.appId,
+      'versionname': versionSubmit.value?.name,
+      'comment': versionSubmit.value?.comment
+    })
  }
 }

--- a/frontend/src/pages/TenantDomain.vue
+++ b/frontend/src/pages/TenantDomain.vue
@@ -163,7 +163,7 @@ 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: IDomainOwnerDisplay) => row.owner.fullName, align: 'left', classes: inactiveRowClass },
--- a/frontend/src/types/AppTypes.ts
+++ b/frontend/src/types/AppTypes.ts
@@ -38,7 +38,25 @@ export interface IVersionInfo {
  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;