第一段階開発完了

frontend/src/components/AppInfo.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="q-pa-md row items-start q-gutter-md">
+    <q-card class="app-card">
+      <q-card-section class="bg-primary text-white">
+        {{ appinfo?.name }}
+      </q-card-section>
+      <q-separator inset />
+      <q-card-section>
+        <q-field  stack-label full-width  label="アプリ名">
+          <template v-slot:append>
+            <a :href="link" target="_blank" title="Kiontoneへ" @click="linkClick">
+              <q-icon name="link" />
+            </a>
+          </template>
+          <template v-slot:control>
+            <div class="self-center full-width no-outline" tabindex="0">
+              {{ appinfo?.name }}
+            </div>
+            <div class="self-center full-width no-outline" tabindex="0">
+              {{ appinfo?.code }}
+            </div>
+          </template>
+        </q-field>
+        <q-field  stack-label full-width  label="アプリ説明">
+          <template v-slot:control>
+            <div class="self-center full-width no-outline" tabindex="0">
+              {{ appinfo?.description }}
+            </div>
+          </template>
+        </q-field>
+      </q-card-section>
+    </q-card>
+  </div>
+</template>
+<script lang="ts" >
+import { AppInfo, AppSeed } from './models';
+import { ref,  defineComponent, watch, onMounted , toRefs } from 'vue';
+import { api } from 'boot/axios';
+import { promises } from 'dns';
+
+export default defineComponent({
+  props: {
+    app: String
+  },
+  setup(props) {
+    const { app } = toRefs(props);
+    const appinfo = ref<AppInfo>({
+      appId: "",
+      name: "",
+      description: ""
+    });
+    const link= ref('https://mfu07rkgnb7c.cybozu.com/k/' + app.value);
+    const getAppInfo = async (appId:string|undefined) => {
+      if(!appId){
+        return;
+      }
+
+      let result : any ={appId:"",name:""};
+      let retry =0;
+      while(retry<=3 && result && result.appId!==appId){
+          await new Promise(resolve => setTimeout(resolve, 1000));
+           const response = await api.get('app', {
+              params:{
+                app: appId
+              }
+          });
+          console.log(response.data);
+          result = response.data;
+          retry++;
+      }
+      return result;
+    }
+
+    watch(app, async (newApp) => {
+      appinfo.value = await getAppInfo(newApp);
+      link.value = 'https://mfu07rkgnb7c.cybozu.com/k/' + newApp;
+    }, { immediate: true });
+
+    const linkClick=(ev : MouseEvent)=>{
+      ev.stopPropagation();
+      return false;
+    };
+    onMounted(async ()=>{
+      appinfo.value = await getAppInfo(app.value);
+      link.value = 'https://mfu07rkgnb7c.cybozu.com/k/' + app.value;
+    });
+
+    return {
+      link,
+      appinfo,
+      linkClick
+    }
+  }
+});
+</script>
+<style lang="scss">
+.app-card {
+  max-width: 600px;
+  width: 100%;
+}
+</style>

frontend/src/components/DocUpload.vue

@@ -15,10 +15,8 @@
 </template>
 <script setup lang="ts">
  import { createUploaderComponent, useQuasar } from 'quasar';
-
-
     const $q=useQuasar();
-
+    const emit =defineEmits(['uploaded']);
     /**
      * ファイルアップロードを拒否する時の処理
      * @param rejectedEntries
@@ -45,6 +43,9 @@
         caption:"通知",
         message: msg
       });
+      setTimeout(() => {
+        emit('uploaded',xhr.responseText);
+      }, 2000);
     }
 
     /**

frontend/src/components/EssentialLink.vue

@@ -2,8 +2,9 @@
   <q-item
     clickable
     tag="a"
-    target="_blank"
+    :target="target?target:'_blank'"
     :href="link"
+    v-if="!isSeparator"
   >
     <q-item-section
       v-if="icon"
@@ -17,6 +18,10 @@
       <q-item-label caption>{{ caption }}</q-item-label>
     </q-item-section>
   </q-item>
+  <q-separator
+    v-if="isSeparator"
+    inset
+  />
 </template>
 
 <script setup lang="ts">
@@ -25,6 +30,8 @@ export interface EssentialLinkProps {
   caption?: string;
   link?: string;
   icon?: string;
+  isSeparator?: boolean;
+  target?:string;
 }
 withDefaults(defineProps<EssentialLinkProps>(), {
   caption: '',

frontend/src/components/models.ts

@@ -1,3 +1,4 @@
+
 export interface Todo {
   id: number;
   content: string;
@@ -6,3 +7,29 @@ export interface Todo {
 export interface Meta {
   totalCount: number;
 }
+/**
+ * Kintone app のID情報
+ */
+export interface AppSeed{
+  app:string;
+  revision?:string;
+}
+
+export interface User{
+  code:string;
+  name:string;
+}
+
+export interface AppInfo {
+  appId:string;
+  code?:string;
+  name:string;
+  description?:string;
+  createdAt?:Date;
+  modifiedAt?:Date;
+  spaceId?:string;
+  threadId?:string;
+  creator?:User;
+  modifier?:User;
+}
+