compnay select

app/frontend/src/pages/IndexPage.vue

@@ -1,18 +1,67 @@
 <template>
   <q-page padding>
-    AAAAA
-    <img
-      alt="Quasar logo"
-      src="~assets/quasar-logo-vertical.svg"
-      style="width: 200px; height: 200px"
-    >
+    <q-card>
+      <q-card-section>
+        <div class="row">
+          <div class="col">
+            <q-select v-model="ld.companyID"
+                      label="Şirket"
+                      option-label="Name"
+                      option-value="Name"
+                      :options="ld.companies"
+                      map-options
+                      emit-value
+            >
+              <template v-slot:after>
+                <q-btn
+                  label="Yeni Şirket Ekle"
+                  color="primary"
+                  @click="createCompany"
+                />
+              </template>
+            </q-select>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+
   </q-page>
 </template>
 
-<script>
-import { defineComponent } from 'vue'
+<script setup>
+import { onMounted, reactive } from 'vue'
+import Company from 'components/dlg/Company.vue'
+import { useQuasar } from 'quasar'
+import { Companies, CreateCompany } from 'app/bindings/lib/dbsrv/Srv'
 
-export default defineComponent({
-  name: 'IndexPage'
+const $q = useQuasar()
+
+const ld = reactive({
+  companyID: null,
+  companies: [],
 })
+
+onMounted(()=> {
+  getCompanies()
+})
+
+const createCompany = function () {
+  $q.dialog({
+    component: Company,
+    parent: this,
+    // ----------------------
+    // props that are passed to component instancde
+  }).onOk(data => {
+    CreateCompany(data.name, data.memberNumber, data.username, data.password)
+  })
+}
+
+const getCompanies = function () {
+  ld.companies.splice(0)
+  Companies().then(res => {
+    ld.companies.push(...res)
+  })
+
+}
+
 </script>