alicorn-dev/KintoneAppBuilder
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

自動採番アクション追加・ドメイン追加

Browse Source
This commit is contained in:
maxiaozhe@alicorns.co.jp
2023-11-01 10:47:24 +09:00
parent df593d2ffe
commit cfc416fd14
20 changed files with 529 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/components/DomainSelector.vue Normal file
View File

@@ -0,0 +1,42 @@
<template>
<q-btn-dropdown
color="primay"
push
flat
no-caps
icon="share"
size="md"
:label="`${userStore.currentDomain.domainName}.cybozu.com`"
>
<q-list>
<q-item v-for="domain in domains" :key="domain.domainName"
clickable v-close-popup @click="onItemClick(domain)">
<q-item-section side>
<q-icon name="share" size="sm" color="orange" text-color="white"></q-icon>
</q-item-section>
<q-item-section>
<q-item-label>{{ `${domain.domainName}.cybozu.com` }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</template>
<script setup lang="ts" >
import { IDomainInfo } from 'src/types/ActionTypes';
import { useAuthStore,IUserState } from 'stores/useAuthStore';
import { ref } from 'vue';
const userStore = useAuthStore();
const domains = ref<IDomainInfo[]>([]);
(async ()=>{
domains.value = await userStore.getUserDomains();
})();
const onItemClick=(domain:IDomainInfo)=>{
console.log(domain);
userStore.setCurrentDomain(domain);
}
</script>
<style lang="scss">
</style>

6
frontend/src/components/right/DatePicker.vue
View File

@@ -1,6 +1,6 @@
<template>
<q-input v-model="selectedDate" :label="displayName" :placeholder="placeholder" mask="date" :rules="['date']">
<q-input v-model="selectedDate" :label="displayName" :placeholder="placeholder" label-color="primary" mask="date" :rules="['date']" stack-label>
<template v-slot:append>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
@@ -29,6 +29,10 @@ export default defineComponent({
type: String,
default: '',
},
hint:{
type: String,
default: '',
},
modelValue: {
type: String,
default: '',

35
frontend/src/components/right/FieldInput.vue
View File

@@ -1,16 +1,29 @@
<template>
<q-input v-model="selectedField" :label="displayName" labelColor="" :placeholder="placeholder" clearable >
<template v-slot:append>
<q-field v-model="selectedField" :label="displayName" labelColor="primary"
:clearable="isSelected" stack-label :bottom-slots="!isSelected" >
<template v-slot:control >
<q-chip color="primary" text-color="white" v-if="isSelected">
{{ selectedField.name }}
</q-chip>
</template>
<!-- <template v-slot:hint v-if="isSelected">
<div> 項目コード：<q-chip size="sm" outline color="secondary" text-color="white">{{selectedField.code}}</q-chip></div>
</template> -->
<template v-slot:hint v-if="!isSelected">
{{ placeholder }}
</template>
<template v-slot:append>
<q-icon name="search" class="cursor-pointer" @click="showDg"/>
</template>
</q-input>
</template>
</q-field>
<show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg">
<field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
</show-dialog>
</template>
<script lang="ts">
import { defineComponent, ref ,watchEffect} from 'vue';
import { defineComponent, ref ,watchEffect,computed} from 'vue';
import ShowDialog from '../ShowDialog.vue';
import FieldSelect from '../FieldSelect.vue';
import { useFlowEditorStore } from 'stores/flowEditor';
@@ -29,10 +42,14 @@ export default defineComponent({
type: String,
default: '',
},
modelValue: {
hint:{
type: String,
default: '',
},
modelValue: {
type: Object,
default: null
},
},
setup(props, { emit }) {
@@ -40,6 +57,9 @@ export default defineComponent({
const show = ref(false);
const selectedField = ref(props.modelValue);
const store = useFlowEditorStore();
const isSelected = computed(()=>{
return selectedField.value!==null && typeof selectedField.value === 'object' && ('name' in selectedField.value)
});
const showDg = () => {
show.value = true;
@@ -47,7 +67,7 @@ export default defineComponent({
const closeDg = (val:string) => {
if (val == 'OK') {
selectedField.value = appDg.value.selected[0].code;
selectedField.value = appDg.value.selected[0];
}
};
@@ -62,6 +82,7 @@ export default defineComponent({
showDg,
closeDg,
selectedField,
isSelected
};
}
});

8
frontend/src/components/right/InputText.vue
View File

@@ -1,5 +1,5 @@
<template>
<q-input :label="displayName" :placeholder="placeholder" v-model="inputValue"/>
<q-input :label="displayName" v-model="inputValue" label-color="primary" :placeholder="placeholder" stack-label/>
</template>
<script lang="ts">
@@ -16,13 +16,17 @@ export default defineComponent({
type: String,
default: '',
},
hint:{
type: String,
default: '',
},
modelValue: {
type: String,
default: '',
},
},
setup(props, { emit }) {
setup(props , { emit }) {
const inputValue = ref(props.modelValue);
watchEffect(() => {

6
frontend/src/components/right/MuiltInputText.vue
View File

@@ -1,5 +1,5 @@
<template>
<q-input :label="displayName" :placeholder="placeholder" v-model="inputValue" autogrow />
<q-input :label="displayName" label-color="primary" v-model="inputValue" :placeholder="placeholder" autogrow stack-label/>
</template>
<script lang="ts">
@@ -16,6 +16,10 @@ export default defineComponent({
type: String,
default: '',
},
hint:{
type: String,
default: '',
},
modelValue: {
type: String,
default: '',

3
frontend/src/layouts/MainLayout.vue
View File

@@ -14,9 +14,9 @@
Kintone App Builder
<q-badge align="top" outline>V{{ env.version }}</q-badge>
</q-toolbar-title>
<domain-selector></domain-selector>
<q-btn flat round dense icon="logout" @click="authStore.logout()"/>
</q-toolbar>
</q-header>
<q-drawer
@@ -48,6 +48,7 @@
<script setup lang="ts">
import { ref } from 'vue';
import EssentialLink, { EssentialLinkProps } from 'components/EssentialLink.vue';
import DomainSelector from 'components/DomainSelector.vue';
import { useAuthStore } from 'stores/useAuthStore';
const authStore = useAuthStore();

40
frontend/src/stores/useAuthStore.ts
View File

@@ -1,13 +1,20 @@
import { defineStore } from 'pinia';
import { api } from 'boot/axios';
import { Router } from '../router';
import {IDomainInfo} from '../types/ActionTypes';
export interface IUserState{
token?:string;
returnUrl:string;
currentDomain:IDomainInfo;
}
export const useAuthStore = defineStore({
id: 'auth',
state: () => ({
token: localStorage.getItem('token'),
returnUrl: ''
state: () :IUserState => ({
token: localStorage.getItem('token')||'',
returnUrl: '',
currentDomain: JSON.parse(localStorage.getItem('currentDomain')||"{}")
}),
actions: {
async login(username:string, password:string) {
@@ -19,6 +26,8 @@ export const useAuthStore = defineStore({
console.info(result);
this.token =result.data.access_token;
localStorage.setItem('token', result.data.access_token);
this.currentDomain=await this.getCurrentDomain();
localStorage.setItem('currentDomain',JSON.stringify(this.currentDomain));
Router.push(this.returnUrl || '/');
return true;
}catch(e)
@@ -27,10 +36,33 @@ export const useAuthStore = defineStore({
return false;
}
},
async getCurrentDomain():Promise<IDomainInfo>{
return {
domainName:'mfu07rkgnb7c',
kintoneUrl:'https://mfu07rkgnb7c.cybozu.com'
}
},
async getUserDomains():Promise<IDomainInfo[]>{
return [
{
domainName:'mfu07rkgnb7c',
kintoneUrl:'https://mfu07rkgnb7c.cybozu.com'
},
{
domainName:'alicorn',
kintoneUrl:'https://alicorn.cybozu.com'
}
]
},
logout() {
this.token = null;
this.token = undefined;
localStorage.removeItem('token');
localStorage.removeItem('currentDomain');
Router.push('/login');
},
setCurrentDomain(domain:IDomainInfo){
this.currentDomain=domain;
localStorage.setItem('currentDomain',JSON.stringify(this.currentDomain));
}
}
});

12
frontend/src/types/ActionTypes.ts
View File

@@ -1,4 +1,9 @@
import { v4 as uuidv4 } from 'uuid';
export interface IDomainInfo{
domainName:string;
kintoneUrl:string;
}
/**
* アプリ情報
*/
@@ -20,6 +25,8 @@ export interface IActionProperty {
//プロパティ表示名
displayName: string;
placeholder: string;
//入力提示・説明
hint:string;
//プロパティ設定値
modelValue: any;
};
@@ -71,12 +78,13 @@ class ActionProperty implements IActionProperty {
// プロパティ表示名
displayName: string;
placeholder: string;
hint:string;
// プロパティ設定値
modelValue: any;
};
static defaultProperty(): IActionProperty {
return new ActionProperty('InputText', 'displayName', '表示名', '表示を入力してください', '');
return new ActionProperty('InputText', 'displayName', '表示名', '表示を入力してください', '','');
};
constructor(
@@ -84,6 +92,7 @@ class ActionProperty implements IActionProperty {
name: string,
displayName: string,
placeholder: string,
hint:string,
modelValue: any
) {
this.component = component;
@@ -91,6 +100,7 @@ class ActionProperty implements IActionProperty {
name: name,
displayName: displayName,
placeholder: placeholder,
hint:hint,
modelValue: modelValue
};
}