[feature] add new application

frontend/src/components/AppSelectBox.vue

@@ -17,28 +17,38 @@
   </div>
 </template>
 <script lang="ts">
-import { ref, onMounted, reactive, watchEffect } from 'vue'
+import { ref, onMounted, reactive, watchEffect, PropType } from 'vue'
 import { api } from 'boot/axios';
 
+interface IAppDisplay {
+  id: string;
+  name: string;
+  description: string;
+  createdate: string;
+}
+
 export default {
   name: 'AppSelectBox',
   props: {
     name: String,
     type: String,
     filter: String,
+    filterInitRowsFunc: {
+      type: Function as PropType<(app: IAppDisplay) => boolean>,
+    },
     updateSelectApp: {
       type: Function
     }
   },
   setup(props) {
     const columns = [
-      { name: 'id', required: true, label: 'ID', align: 'left', field: 'id', sortable: true },
+      { name: 'id', required: true, label: 'ID', align: 'left', field: 'id', sortable: true, sort: (a: string, b: string) => parseInt(a, 10) - parseInt(b, 10) },
       { name: 'name', label: 'アプリ名', field: 'name', sortable: true, align: 'left' },
       { name: 'description', label: '概要', field: 'description', align: 'left', sortable: false },
       { name: 'createdate', label: '作成日時', field: 'createdate', align: 'left' }
     ]
     const isLoaded = ref(false);
-    const rows: any[] = reactive([]);
+    const rows = reactive<IAppDisplay[]>([]);
     const selected = ref([])
 
     watchEffect(()=>{
@@ -49,12 +59,16 @@ export default {
     onMounted(() => {
       api.get('api/v1/allapps').then(res => {
         res.data.apps.forEach((item: any) => {
-          rows.push({
+          const row : IAppDisplay = {
             id: item.appId,
             name: item.name,
             description: item.description,
             createdate: dateFormat(item.createdAt)
-          });
+          }
+          if (props.filterInitRowsFunc && !props.filterInitRowsFunc(row)) {
+            return;
+          }
+          rows.push(row);
         });
         isLoaded.value = true;
       });

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="確定" v-close-popup @click="CloseDialogue('OK')" />
+          <q-btn flat label="確定" :loading="okBtnLoading" :v-close-popup="okBtnAutoClose" @click="CloseDialogue('OK')" />
           <q-btn flat label="キャンセル" v-close-popup @click="CloseDialogue('Cancel')" />
         </q-card-actions>
       </q-card>
@@ -30,6 +30,11 @@ export default {
     height:String,
     minWidth:String,
     minHeight:String,
+    okBtnLoading:Boolean,
+    okBtnAutoClose:{
+      type: Boolean,
+      default: true
+    },
     disableBtn:{
       type: Boolean,
       default: false