fix layout & validate

src/modules/06_webservices/components/DialogApiKey.vue

@@ -235,13 +235,13 @@ watch(modal, async (val) => {
 </script>
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 60%">
+    <q-card style="min-width: 70%">
       <!-- header -->
       <DialogHeader :tittle="titleName" :close="onCloseDialog" />
       <q-separator />
 
       <q-card-section :horizontal="$q.screen.gt.xs" class="row">
-        <q-card-section class="col-5">
+        <q-card-section class="col-4">
           <div class="col-12">
             <div class="q-gutter-sm">
               <div class="row q-col-gutter-sm q-pl-sm">
@@ -253,7 +253,7 @@ watch(modal, async (val) => {
                   </q-input>
                 </div>
               </div>
-              <div class="bg-white tree-container q-pa-xs">
+              <div class="bg-white tree-container-fixed q-pa-xs">
                 <q-tree
                   class="q-pa-sm q-gutter-sm"
                   dense
@@ -268,12 +268,16 @@ watch(modal, async (val) => {
                 >
                   <template v-slot:default-header="prop">
                     <q-item
-                      @click.stop="selectedOrg(prop.node)"
+                      @click.stop="
+                        formData.accessType !== 'ALL'
+                          ? selectedOrg(prop.node)
+                          : null
+                      "
                       :active="orgId == prop.node.orgTreeId"
                       clickable
                       active-class="my-list-link text-primary text-weight-medium"
                       class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
-                      :disable="isAPIKey"
+                      :disable="isAPIKey || formData.accessType === 'ALL'"
                     >
                       <div>
                         <div
@@ -318,7 +322,7 @@ watch(modal, async (val) => {
 
         <q-separator :vertical="$q.screen.gt.xs" />
 
-        <q-card-section class="col">
+        <q-card-section class="col tree-container-fixed">
           <div class="row q-col-gutter-sm">
             <!-- ชื่อ/คำอธิบาย -->
             <div class="col-9" v-if="!isAPIKey">
@@ -415,6 +419,13 @@ watch(modal, async (val) => {
   border-radius: 10px;
 }
 
+.tree-container-fixed {
+  overflow: auto;
+  height: 400px;
+  border: 1px solid #e6e6e7;
+  border-radius: 10px;
+}
+
 .my-list-link {
   color: rgb(118, 168, 222);
   border-radius: 5px;