第一段階開発完了
This commit is contained in:
34
frontend/src/boot/axios.ts
Normal file
34
frontend/src/boot/axios.ts
Normal file
@@ -0,0 +1,34 @@
|
||||
import { boot } from 'quasar/wrappers';
|
||||
import axios, { AxiosInstance } from 'axios';
|
||||
|
||||
declare module '@vue/runtime-core' {
|
||||
interface ComponentCustomProperties {
|
||||
$axios: AxiosInstance;
|
||||
$api: AxiosInstance;
|
||||
}
|
||||
}
|
||||
|
||||
// Be careful when using SSR for cross-request state pollution
|
||||
// due to creating a Singleton instance here;
|
||||
// If any client changes this (global) instance, it might be a
|
||||
// good idea to move this instance creation inside of the
|
||||
// "export default () => {}" function below (which runs individually
|
||||
// for each client)
|
||||
const api:AxiosInstance = axios.create({ baseURL: process.env.KAB_BACKEND_URL });
|
||||
|
||||
export default boot(({ app }) => {
|
||||
// for use inside Vue files (Options API) through this.$axios and this.$api
|
||||
|
||||
app.config.globalProperties.$axios = axios;
|
||||
// ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
|
||||
// so you won't necessarily have to import axios in each vue file
|
||||
|
||||
app.config.globalProperties.$api = api;
|
||||
// ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
|
||||
// so you can easily perform requests against your app's API
|
||||
app.provide<AxiosInstance>('$api',api);
|
||||
app.provide<AxiosInstance>('$axios',axios);
|
||||
|
||||
});
|
||||
|
||||
export { api };
|
||||
101
frontend/src/components/AppInfo.vue
Normal file
101
frontend/src/components/AppInfo.vue
Normal file
@@ -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>
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -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: '',
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -10,12 +10,10 @@
|
||||
aria-label="Menu"
|
||||
@click="toggleLeftDrawer"
|
||||
/>
|
||||
|
||||
<q-toolbar-title>
|
||||
Kintone App Builder
|
||||
<q-badge align="top" outline>V{{ env.version }}</q-badge>
|
||||
</q-toolbar-title>
|
||||
|
||||
<div>ver {{ env.version }}</div>
|
||||
</q-toolbar>
|
||||
</q-header>
|
||||
|
||||
@@ -54,21 +52,54 @@ const essentialLinks: EssentialLinkProps[] = [
|
||||
title: 'ホーム',
|
||||
caption: 'home',
|
||||
icon: 'home',
|
||||
link: '/'
|
||||
link: '/',
|
||||
target:'_self'
|
||||
},
|
||||
{
|
||||
title: 'ルールエディター',
|
||||
caption: 'rule',
|
||||
icon: 'rule',
|
||||
link: '/#/ruleEditor'
|
||||
}
|
||||
,
|
||||
link: '/#/ruleEditor',
|
||||
target:'_self'
|
||||
},
|
||||
{
|
||||
title:'',
|
||||
isSeparator:true
|
||||
},
|
||||
{
|
||||
title:'Kintone ポータル',
|
||||
caption:'Kintone',
|
||||
icon:'cloud_queue',
|
||||
link:'https://mfu07rkgnb7c.cybozu.com/k/#/portal'
|
||||
},
|
||||
{
|
||||
title:'CUSTOMINE',
|
||||
caption:'gusuku',
|
||||
link:'https://app-customine.gusuku.io/drive.html',
|
||||
icon:'settings_suggest'
|
||||
},
|
||||
{
|
||||
title:'Kintone API ドキュメント',
|
||||
caption:'Kintone API',
|
||||
link:'https://cybozu.dev/ja/kintone/docs/',
|
||||
icon:'help_outline'
|
||||
},
|
||||
{
|
||||
title:'',
|
||||
isSeparator:true
|
||||
},
|
||||
{
|
||||
title: 'Docs',
|
||||
caption: 'quasar.dev',
|
||||
icon: 'school',
|
||||
link: 'https://quasar.dev'
|
||||
},
|
||||
{
|
||||
title: 'Icons',
|
||||
caption: 'Material Icons',
|
||||
icon: 'insert_emoticon',
|
||||
link: 'https://fonts.google.com/icons?selected=Material+Icons:insert_emoticon:'
|
||||
},
|
||||
{
|
||||
title: 'Github',
|
||||
caption: 'github.com/quasarframework',
|
||||
|
||||
@@ -8,41 +8,36 @@
|
||||
</q-breadcrumbs>
|
||||
</div>
|
||||
<div class="q-gutter-sm row items-start">
|
||||
<doc-uploader></doc-uploader>
|
||||
<doc-uploader @uploaded="onAppUploaded"></doc-uploader>
|
||||
</div>
|
||||
<app-info v-if="props?.app" :app="props?.app"></app-info>
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Todo, Meta } from 'components/models';
|
||||
import {ref} from 'vue'
|
||||
import DocUploader from 'components/DocUpload.vue';
|
||||
// import ExampleComponent from 'components/ExampleComponent.vue';
|
||||
import { ref } from 'vue';
|
||||
import AppInfo from 'components/AppInfo.vue';
|
||||
import { AppSeed } from 'src/components/models';
|
||||
|
||||
const todos = ref<Todo[]>([
|
||||
{
|
||||
id: 1,
|
||||
content: 'ct1'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
content: 'ct2'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
content: 'ct3'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
content: 'ct4'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
content: 'ct5'
|
||||
}
|
||||
]);
|
||||
const meta = ref<Meta>({
|
||||
totalCount: 1200
|
||||
interface AppInfo {
|
||||
app:string,
|
||||
revision:string
|
||||
}
|
||||
|
||||
const appseed = withDefaults( defineProps<AppSeed>(),{
|
||||
app:''
|
||||
});
|
||||
|
||||
// const appseed = defineProps<AppSeed>();
|
||||
|
||||
const props = ref(appseed);
|
||||
|
||||
function onAppUploaded(responseText :string){
|
||||
let json:AppInfo = JSON.parse(responseText);
|
||||
props.value=json;
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<q-breadcrumbs-el :label="title" icon="rule" />
|
||||
</q-breadcrumbs>
|
||||
</div>
|
||||
<div id="q-app" style="min-height: 100vh;">
|
||||
<div style="min-height: 100vh;">
|
||||
<div class="q-pa-md">
|
||||
<q-btn-dropdown
|
||||
split
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user