KintoneAppBuilder/frontend/src/pages/AppManagement.vue

<template>
  <div class="q-pa-md">
    <div class="q-gutter-sm row items-start">
        <q-breadcrumbs>
          <q-breadcrumbs-el icon="widgets" label="アプリ管理" />
        </q-breadcrumbs>
    </div>
    <q-table title="Treats" :rows="rows" :columns="columns" row-key="id" :filter="filter" :loading="loading" :pagination="pagination">

      <template v-slot:top>
        <q-btn color="primary" :disable="loading" label="新規" @click="showAddAppDialog" />
        <q-space />
        <q-input borderless dense filled debounce="300" v-model="filter" placeholder="検索">
          <template v-slot:append>
            <q-icon name="search" />
          </template>
        </q-input>
      </template>
      <template v-slot:body-cell-name="prop">
        <q-td :props="prop">
          <q-btn flat dense :label="prop.row.name" @click="toEditFlowPage(prop.row)" ></q-btn>
        </q-td>
      </template>
      <template v-slot:body-cell-url="prop">
        <q-td :props="prop">
          <a :href="prop.row.url" target="_blank" :title="prop.row.name" >
            {{ prop.row.url  }}
          </a>
        </q-td>
      </template>
      <template v-slot:body-cell-actions="p">
        <q-td :props="p">
          <q-btn flat padding="xs" round size="1em" icon="more_vert">
            <q-menu >
              <q-list dense style="min-width: 100px">
                <q-item clickable v-close-popup @click="toEditFlowPage(p.row)">
                  <q-item-section>
                    <q-icon size="1.2em" name="account_tree" />
                  </q-item-section>
                  <q-item-section>設定</q-item-section>
                </q-item>
                <q-item clickable v-close-popup @click="showHistory(p.row)">
                  <q-item-section>
                    <q-icon size="1.2em" name="history" />
                  </q-item-section>
                  <q-item-section>履歴</q-item-section>
                </q-item>
                <q-separator />
                <q-item class="text-red" clickable v-close-popup  @click="removeRow(p.row)">
                  <q-item-section>
                    <q-icon size="1.2em" name="delete_outline" />
                  </q-item-section>
                  <q-item-section>削除</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>
        </q-td>
      </template>
    </q-table>

    <show-dialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeSelectAppDialog" min-width="50vw" min-height="50vh" :ok-btn-auto-close="false" :ok-btn-loading="isAdding">
      <template v-slot:toolbar>
        <q-input dense debounce="300" v-model="filter" placeholder="検索" clearable>
          <template v-slot:before>
            <q-icon name="search" />
          </template>
        </q-input>
      </template>
      <app-select-box ref="appDialog" name="アプリ" type="single" :filter="filter" :filterInitRowsFunc="filterInitRows" />
    </show-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, reactive } from 'vue';
import { useQuasar } from 'quasar'
import { api } from 'boot/axios';
import { useAuthStore } from 'stores/useAuthStore';
import { useFlowEditorStore } from 'stores/flowEditor';
import { router } from 'src/router';
import { date } from 'quasar'
import { IManagedApp } from 'src/types/AppTypes';
import ShowDialog from 'src/components/ShowDialog.vue';
import AppSelectBox from 'src/components/AppSelectBox.vue';

interface IAppDisplay{
  id:string;
  sortId: number;
  name:string;
  url:string;
  user:string;
  version:string;
  updatetime:string;
}

const authStore = useAuthStore();
const numberStringSorting = (a: string, b: string) => parseInt(a, 10) - parseInt(b, 10);

const columns = [
  { name: 'id', label: 'アプリID', field: 'id', align: 'left', sortable: true, sort: numberStringSorting },
  { name: 'name', label: 'アプリ名', field: 'name', align: 'left', sortable: true },
  { name: 'url', label: 'URL', field: 'url', align: 'left', sortable: true },
  { name: 'user', label: '最後更新者', field: 'user', align: 'left', sortable: true},
  { name: 'updatetime', label: '最後更新日', field: 'updatetime', align: 'left', sortable: true},
  { name: 'version', label: 'バージョン', field: 'version', align: 'left', sortable: true, sort: numberStringSorting },
  { name: 'actions', label: '', field: 'actions' }
];

const pagination = ref({ sortBy: 'id', descending: true, rowsPerPage: 20 });
const loading = ref(false);
const filter = ref('');
const rows = ref<IAppDisplay[]>([]);
const rowIds = new Set<string>();

const $q = useQuasar()
const store = useFlowEditorStore();
const appDialog = ref();
const showSelectApp=ref(false);
const isAdding = ref(false);

const getApps = async () => {
  loading.value = true;
  rowIds.clear();
  try {
    const { data } = await api.get('api/apps');
    rows.value = data.data.map((item: IManagedApp) => {
      rowIds.add(item.appid);
      return appToAppDisplay(item)
    }).sort((a: IAppDisplay, b: IAppDisplay) => a.sortId - b.sortId); // set default order
  } catch (error) {
    $q.notify({
      icon: 'error',
      color: 'negative',
      message: 'アプリ一覧の読み込みに失敗しました'
    });
  } finally {
    loading.value = false;
  }
}

onMounted(async () => {
  authStore.setLeftMenu(false);
  await getApps();
});

watch(() => authStore.currentDomain.id, async () => {
  await getApps();
});

const filterInitRows = (row: {id: string}) => {
  return !rowIds.has(row.id);
}

const showAddAppDialog = () => {
  showSelectApp.value = true;
}

const closeSelectAppDialog = async (val: 'OK'|'Cancel') => {
  showSelectApp.value = true;
  if (val == 'OK' && appDialog.value.selected[0]) {
      isAdding.value = true;
      toEditFlowPage(appDialog.value.selected[0]);
  }
  showSelectApp.value = false;
  isAdding.value = false;
}

const removeRow = (app:IAppDisplay) => {
  return
}

const showHistory = (app:IAppDisplay) => {
  return
}

const appToAppDisplay = (app: IManagedApp) => {
  return {
    id: app.appid,
    sortId: parseInt(app.appid, 10),
    name: app.appname,
    url: `${app.domainurl}/k/${app.appid}`,
    user: `${app.updateuser.first_name} ${app.updateuser.last_name}` ,
    updatetime:date.formatDate(app.update_time, 'YYYY/MM/DD HH:mm'),
    version: app.version
  }
}

const toEditFlowPage = (app:IAppDisplay) => {
  store.setApp({
    appId: app.id,
    name: app.name
  });
  store.selectFlow(undefined);
  router.push('/FlowChart/' + app.id);
};
</script>