feat:ボタンをスペースに配置

2024-06-10 11:24:10 +09:00
parent c426bbf793
commit 52514b7197
10 changed files with 125 additions and 72 deletions
--- a/backend/app/api/api_v1/routers/kintone.py
+++ b/backend/app/api/api_v1/routers/kintone.py
@@ -217,7 +217,9 @@ def deoployappfromkintone(app:str,revision:str,c:config.KINTONE_ENV):
    data = {"apps":[{"app":app,"revision":revision}],"revert": False}
    r = httpx.post(url,headers=headers,data=json.dumps(data))
    return r.json
-    
+
+# 既定項目に含めるアプリのフィールドのみ取得する
+# スペース、枠線、ラベルを含まない    
 def getfieldsfromkintone(app:str,c:config.KINTONE_ENV):
    headers={config.API_V1_AUTH_KEY:c.API_V1_AUTH_VALUE}
    params = {"app":app}
@@ -225,6 +227,44 @@ def getfieldsfromkintone(app:str,c:config.KINTONE_ENV):
    r = httpx.get(url,headers=headers,params=params)
    return r.json()

+# フォームに配置するフィールドのみ取得する
+# スペース、枠線、ラベルも含める
+def getformfromkintone(app:str,c:config.KINTONE_ENV):
+    headers={config.API_V1_AUTH_KEY:c.API_V1_AUTH_VALUE}
+    params = {"app":app}
+    url = f"{c.BASE_URL}{config.API_V1_STR}/form.json"
+    r = httpx.get(url,headers=headers,params=params)
+    return r.json()
+
+
+def merge_kintone_fields(fields_response: dict, form_response: dict) -> dict:
+    fields_properties = fields_response.get('properties', {})
+    form_properties = form_response.get('properties', [])
+
+    merged_properties = {k: v for k, v in fields_properties.items()}
+
+    for index, form_field in enumerate(form_properties):
+        code = form_field.get('code')
+        if code:
+            if code and code not in merged_properties:
+                merged_properties[code] = form_field
+        else:
+            element_id = form_field.get('elementId')
+            if element_id:
+                key = element_id
+                form_field['code']=element_id
+                form_field['label']=form_field.get('type')
+            # else:
+            #     key = f"{form_field.get('type')}_{index}"
+                merged_properties[key] = form_field 
+
+    merged_response = {
+        'revision': fields_response.get('revision', ''),
+        'properties': merged_properties
+    }
+    
+    return merged_response
+
 def analysefields(excel,kintone):
    updatefields={}
    addfields={}
@@ -482,6 +522,15 @@ async def appfields(request:Request,app:str,env = Depends(getkintoneenv)):
    except Exception as e:
       raise APIException('kintone:appfields',request.url._url, f"Error occurred while get app fileds({env.DOMAIN_NAM}->{app}):",e) 

+@r.get("/allfields")
+async def allfields(request:Request,app:str,env = Depends(getkintoneenv)):
+    try:
+        field_resp = getfieldsfromkintone(app,env)
+        form_resp = getformfromkintone(app,env)
+        return merge_kintone_fields(field_resp,form_resp)
+    except Exception as e:
+       raise APIException('kintone:allfields',request.url._url, f"Error occurred while get form fileds({env.DOMAIN_NAM}->{app}):",e) 
+
@r.get("/appprocess")
 async def appprocess(request:Request,app:str,env = Depends(getkintoneenv)):
    try:
--- a/backend/readme.md
+++ b/backend/readme.md
@@ -24,4 +24,8 @@ python -m venv env
   ```bash
   pip install -r requirements.txt

-   ```
+   ```
+4. backend 起動
+   ```bash
+   uvicorn app.main:app --reload
+   ```
--- a/frontend/.env
+++ b/frontend/.env
@@ -1,3 +1,3 @@
-KAB_BACKEND_URL="https://kab-backend.azurewebsites.net/"
-#KAB_BACKEND_URL="http://127.0.0.1:8000/"
+#KAB_BACKEND_URL="https://kab-backend.azurewebsites.net/"
+KAB_BACKEND_URL="http://127.0.0.1:8000/"

--- a/frontend/src/components/FieldSelect.vue
+++ b/frontend/src/components/FieldSelect.vue
@@ -11,6 +11,7 @@
 import { ref, onMounted, reactive, watchEffect } from 'vue'
 import { api } from 'boot/axios';

+
 export default {
  name: 'fieldSelect',
  props: {
@@ -28,8 +29,9 @@ export default {
      type:Array,
      default:()=>[]
    },
-    updateSelects: {
-      type: Function
+    fieldTypes:{
+      type:Array,
+      default:()=>[]
    },
    filter: String,
  },
@@ -43,29 +45,26 @@ export default {
    const pageSetting = ref({
      sortBy: 'desc',
      descending: false,
-      page: 2,
+      page: 1,
      rowsPerPage: props.not_page ? 0 : 5
      // rowsNumber: xx if getting data from a server
    });
    const rows = reactive([]);
    const selected = ref(props.selectedFields && props.selectedFields.length>0?props.selectedFields:[]);

-    watchEffect(() => {
-        props.updateSelects(selected);
-    });
-
    onMounted(async () => {
-      const res = await api.get('api/v1/appfields', {
+      const url = props.fieldTypes.includes('SPACER')?'api/v1/allfields':'api/v1/appfields';
+      const res = await api.get(url, {
        params: {
          app: props.appId
        }
      });
      let fields = res.data.properties;
-      console.log(fields);
      Object.keys(fields).forEach((key) => {
        const fld = fields[key];
-        // rows.push({name:fields[key].label,code:fields[key].code,type:fields[key].type});
-        rows.push({ name: fld.label, ...fld });
+        if(props.fieldTypes.length===0 || props.fieldTypes.includes(fld.type)){
+          rows.push({ name: fld.code, ...fld });
+        }
      });
      isLoaded.value = true;
    });
--- a/frontend/src/components/right/AppFieldSelect.vue
+++ b/frontend/src/components/right/AppFieldSelect.vue
@@ -81,7 +81,7 @@
                    </div>
                </div>
                <div class="row">
-                    <field-select ref="fieldDlg" name="フィールド" :type="selectType" :updateSelects="updateItems"
+                    <field-select ref="fieldDlg" name="フィールド" :type="selectType"
                        :appId="selectedField.app?.id" not_page :filter="fieldFilter" :selectedFields="selectedField.fields"></field-select>
                </div>
            </div>
@@ -99,9 +99,7 @@
                </template>
            </q-input>
        </template>
-
-        <AppSelect ref="appDlg" name="アプリ" type="single" :filter="filter"
-            :updateExternalSelectAppInfo="updateExternalSelectAppInfo"></AppSelect>
+        <AppSelect ref="appDlg" name="アプリ" type="single" :filter="filter" :fieldTypes="fieldTypes"></AppSelect>
    </show-dialog>
 </template>

@@ -154,6 +152,10 @@ export default defineComponent({
        selectType:{
            type:String,
            default:'single'
+        },
+        fieldTypes:{
+            type:Array,
+            default:()=>[]
        }
    },
    setup(props, { emit }) {
@@ -197,13 +199,6 @@ export default defineComponent({
                selectedField.value.fields = fieldDlg.value.selected;
            }
        };
-        const updateExternalSelectAppInfo = (newAppinfo:IApp) => {
-          // selectedField.value.app = newAppinfo
-        }
-
-        const updateItems = (newFields:IField[]) => {
-          // selectedField.value.fields = newFields
-        }

        const removeField=(index:number)=>{
          selectedField.value.fields.splice(index,1);
@@ -223,9 +218,7 @@ export default defineComponent({
            selectedField,
            showSelectApp,
            isSelected,
-            updateExternalSelectAppInfo,
            filter: ref(),
-            updateItems,
            clear,
            fieldFilter: ref(),
            removeField
--- a/frontend/src/components/right/FieldInput.vue
+++ b/frontend/src/components/right/FieldInput.vue
@@ -7,9 +7,6 @@
          {{ 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>
@@ -19,7 +16,7 @@
      </template>
    </q-field>
    <show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg" widht="400px">
-      <field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
+      <field-select ref="appDg" name="フィールド" :type="selectType" :appId="store.appInfo?.appId" :fieldTypes="fieldTypes"></field-select>
    </show-dialog>
  </div>
 </template>
@@ -54,6 +51,14 @@ export default defineComponent({
      type: String,
      default: '',
    },
+    selectType:{
+        type:String,
+        default:'single'
+    },
+    fieldTypes:{
+      type:Array,
+      default:()=>[]
+    },
    hint: {
      type: String,
      default: '',
--- a/frontend/src/components/right/InputText.vue
+++ b/frontend/src/components/right/InputText.vue
@@ -36,6 +36,10 @@ export default defineComponent({
      type: String,
      default: '',
    },
+    fieldTypes:{
+      type:Array,
+      default:()=>[]
+    },
    hint: {
      type: String,
      default: '',
--- a/plugin/kintone-addins/src/actions/button-add.css
+++ b/plugin/kintone-addins/src/actions/button-add.css
@@ -0,0 +1,24 @@
+.alc-button-normal {
+    display: inline-block;
+    box-sizing: border-box;
+    padding: 0 16px;
+    margin-left: 16px;
+    margin-top: 8px;
+    min-width: 100px;
+    outline: none;
+    border: 1px solid #e3e7e8;
+    background-color: #f7f9fa;
+    box-shadow: 1px 1px 1px #fff inset;
+    color: #3498db;
+    text-align: center;
+    line-height: 32px;
+}
+.alc-button-normal:hover {
+    background-color: #c8d6dd;
+    box-shadow: none;
+    cursor: pointer;
+  }
+.alc-button-normal:active {
+    color: #f7f9fa;
+    background-color: #54b8eb;
+}
--- a/plugin/kintone-addins/src/actions/button-add.ts
+++ b/plugin/kintone-addins/src/actions/button-add.ts
@@ -8,12 +8,18 @@ import { IAction, IActionProperty, IActionNode, IActionResult } from "../types/A
 interface IButtonAddProps {
    //ボタン表示名
    buttonName: string;
+    space?:ISpace;
    //配置位置
    position: string;
    //イベント名
    eventName:string
 }   

+interface ISpace{
+    type:string,
+    elementId:string
+}
+
 export class ButtonAddAction implements IAction {
    name: string; 
    actionProps: IActionProperty[]; 
@@ -47,43 +53,19 @@ export class ButtonAddAction implements IAction {
            }
            this.props = actionNode.ActionValue as IButtonAddProps; 
            //ボタンを配置する
-            const menuSpace = kintone.app.record.getHeaderMenuSpaceElement();
-            if(!menuSpace) return result;
-            if($("style#alc-button-add").length===0){
-                const css=`
-                .alc-button-normal {
-                    display: inline-block;
-                    box-sizing: border-box;
-                    padding: 0 16px;
-                    margin-left: 16px;
-                    margin-top: 8px;
-                    min-width: 100px;
-                    outline: none;
-                    border: 1px solid #e3e7e8;
-                    background-color: #f7f9fa;
-                    box-shadow: 1px 1px 1px #fff inset;
-                    color: #3498db;
-                    text-align: center;
-                    line-height: 32px;
-                }
-                .alc-button-normal:hover {
-                    background-color: #c8d6dd;
-                    box-shadow: none;
-                    cursor: pointer;
-                  }
-                .alc-button-normal:active {
-                    color: #f7f9fa;
-                    background-color: #54b8eb;
-                }`;
-                const style = $("<style id='alc-button-add'>/<style>");
-                style.text(css);
-                $("head").append(style);
+            let buttonSpace;
+            if(this.props.space && this.props.space.elementId){
+                buttonSpace = kintone.app.record.getSpaceElement(this.props.space.elementId);
+            }else{
+                buttonSpace = kintone.app.record.getHeaderMenuSpaceElement();
            }
+            if(!buttonSpace) return result;
+  
            const button =$(`<button id='${this.props.eventName}' class='alc-button-normal' >${this.props.buttonName}</button>`);
            if(this.props.position==="一番左に追加する"){
-                $(menuSpace).prepend(button);
+                $(buttonSpace).prepend(button);
            }else{
-                $(menuSpace).append(button);
+                $(buttonSpace).append(button);
            }
            const clickEventName = `${event.type}.customButtonClick.${this.props.eventName}`;
            button.on("click",()=>{
@@ -98,7 +80,6 @@ export class ButtonAddAction implements IAction {
        }
    }
  
-
    register(): void {
        actionAddins[this.name] = this;
    }
--- a/plugin/kintone-addins/src/index.ts
+++ b/plugin/kintone-addins/src/index.ts
@@ -1,9 +1,3 @@
-// export const sum = (a: number, b: number) => {
-//   if ('development' === process.env.NODE_ENV) {
-//     console.log('boop');
-//   }
-//   return a + b;
-// };
 import $ from 'jquery';
 import { ActionProcess } from './types/action-process';
 import { ActionFlow } from './types/ActionTypes';