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

frontend/src/components/DomainSelector.vue

@@ -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>

frontend/src/components/right/DatePicker.vue

@@ -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: '',

frontend/src/components/right/FieldInput.vue

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

frontend/src/components/right/InputText.vue

@@ -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(() => {

frontend/src/components/right/MuiltInputText.vue

@@ -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: '',