ayanova/src/components/report-selector-control.vue

@@ -1,9 +1,10 @@
 <template>
-  <div class="text-center">
+  <v-row justify="center">
+    <!-- :max-width="options.width" -->
     <v-dialog
-      persistent
+      scrollable
+      max-width="400px"
       v-model="isVisible"
-      :max-width="options.width"
       @keydown.esc="cancel"
       :data-cy="!!$ay.dev ? 'reportselector' : false"
     >
@@ -13,7 +14,34 @@
         </v-card-title>
 
         <v-card-text>
-          //list of reports here
+          <v-card-text style="height: 300px;">
+            <v-radio-group v-model="selectedTeportId" column>
+              <v-radio label="Bahamas, The" value="bahamas"></v-radio>
+              <v-radio label="Bahrain" value="bahrain"></v-radio>
+              <v-radio label="Bangladesh" value="bangladesh"></v-radio>
+              <v-radio label="Barbados" value="barbados"></v-radio>
+              <v-radio label="Belarus" value="belarus"></v-radio>
+              <v-radio label="Belgium" value="belgium"></v-radio>
+              <v-radio label="Belize" value="belize"></v-radio>
+              <v-radio label="Benin" value="benin"></v-radio>
+              <v-radio label="Bhutan" value="bhutan"></v-radio>
+              <v-radio label="Bolivia" value="bolivia"></v-radio>
+              <v-radio label="Bosnia and Herzegovina" value="bosnia"></v-radio>
+              <v-radio label="Botswana" value="botswana"></v-radio>
+              <v-radio label="Brazil" value="brazil"></v-radio>
+              <v-radio label="Brunei" value="brunei"></v-radio>
+              <v-radio label="Bulgaria" value="bulgaria"></v-radio>
+              <v-radio label="Burkina Faso" value="burkina"></v-radio>
+              <v-radio label="Burma" value="burma"></v-radio>
+              <v-radio label="Burundi" value="burundi"></v-radio>
+            </v-radio-group>
+          </v-card-text>
+          <!-- <v-select
+            :items="reportList"
+            v-model="selectedTeportId"
+            item-text="name"
+            item-value="id"
+          ></v-select> -->
         </v-card-text>
 
         <!-- <v-divider></v-divider> v-bind:class="options.type" -->
@@ -32,12 +60,12 @@
             text
             @click.native="ok"
             :data-cy="!!$ay.dev ? 'reportselector:ok' : false"
-            >{{ $ay.t("Ok") }}</v-btn
+            >{{ $ay.t("OK") }}</v-btn
           >
         </v-card-actions>
       </v-card>
     </v-dialog>
-  </div>
+  </v-row>
 </template>
 <script>
 export default {
@@ -49,6 +77,7 @@ export default {
       width: 290,
       zIndex: 200
     },
+    reportList: [],
     selectedReportId: null
   }),
   props: {
@@ -59,6 +88,18 @@ export default {
   },
   methods: {
     open() {
+      //debugger;
+      //get report list from server
+      //for now we'll fake it
+      let fakeReportList = [];
+      for (let i = 0; i < 255; i++) {
+        fakeReportList.push({
+          name: "Fake report with the number " + i,
+          id: i
+        });
+      }
+      this.reportList = fakeReportList;
+
       this.isVisible = true;
       return new Promise((resolve, reject) => {
         this.resolve = resolve;
@@ -66,11 +107,11 @@ export default {
       });
     },
     ok() {
-      this.resolve(true);
+      this.resolve(this.selectedReportId);
       this.isVisible = false;
     },
     cancel() {
-      this.resolve(false);
+      this.resolve(null);
       this.isVisible = false;
     }
   }

ayanova/src/views/widget.vue

@@ -1,8 +1,10 @@
 <template>
   <v-container>
     <v-row v-if="formState.ready">
-      <gz-report-selector ref="reportSelector"></gz-report-selector>
       <v-col>
+        <v-col cols="12" sm="6" lg="4" xl="3">
+          <gz-report-selector ref="reportSelector"></gz-report-selector>
+        </v-col>
         <v-form ref="form">
           <v-row>
             <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>