[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;
       });