update

frontend/src/components/FieldSelect.vue

@@ -1,53 +1,84 @@
 <template>
-  <div class="q-pa-md">
+  <div class="q-px-md" style=" min-width: 50vw; max-width: 85vw;">
     <div v-if="!isLoaded" class="spinner flex flex-center">
-      <q-spinner  color="primary" size="3em" />
+      <q-spinner color="primary" size="3em" />
     </div>
-    <q-table v-else  row-key="name"  :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" />
+    <q-table flat bordered v-else row-key="name" :selection="type" v-model:selected="selected" :columns="columns"
+      :rows="rows" :pagination="pageSetting" :filter="filter" style="max-height: 55vh;"/>
   </div>
 </template>
 <script>
-import { ref,onMounted,reactive } from 'vue'
+import { ref, onMounted, reactive, watch } from 'vue'
 import { api } from 'boot/axios';
 
 export default {
   name: 'fieldSelect',
   props: {
     name: String,
-    type: String,
-    appId:Number
+    type: {
+      type: String,
+      default: 'single'
+    },
+    appId: Number,
+    not_page: {
+      type: Boolean,
+      default: false,
+    },
+    updateSelects: {
+      type: Function
+    },
+    filter: String,
   },
   setup(props) {
-    const isLoaded=ref(false);
+    const isLoaded = ref(false);
     const columns = [
-    { name: 'name', required: true,label: 'フィールド名',align: 'left',field: row=>row.name,sortable: true},
-    { name: 'code', label: 'フィールドコード', align: 'left',field: 'code', sortable: true },
-    { name: 'type', label: 'フィールドタイプ', align: 'left',field: 'type', sortable: true }
+      { name: 'name', required: true, label: 'フィールド名', align: 'left', field: row => row.name, sortable: true },
+      { name: 'code', label: 'フィールドコード', align: 'left', field: 'code', sortable: true },
+      { name: 'type', label: 'フィールドタイプ', align: 'left', field: 'type', sortable: true }
     ]
+    const not_page = props.not_page
+    const pageSetting = ref({
+      sortBy: 'desc',
+      descending: false,
+      page: 2,
+      rowsPerPage: not_page ? 0 : 5
+      // rowsNumber: xx if getting data from a server
+    })
+    const filter = props.filter
     const rows = reactive([])
-      onMounted( async () => {
-          const res = await api.get('api/v1/appfields', {
-                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});
-            });
-            isLoaded.value=true;
-        });
+    const selected = ref([])
+    const updateSelects = props.updateSelects
+    watch(selected, (newValue, oldValue) => {
 
-      return {
-        columns,
-        rows,
-        selected: ref([]),
-        isLoaded
+      if (newValue && newValue[0] && updateSelects) {
+        console.log(newValue);
+        updateSelects(newValue)
       }
+    });
+
+    onMounted(async () => {
+      const res = await api.get('api/v1/appfields', {
+        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 });
+      });
+      isLoaded.value = true;
+    });
+
+    return {
+      columns,
+      rows,
+      selected,
+      isLoaded,
+      pageSetting
+    }
   },
 
 }