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']);