compnay select

app/frontend/src/components/EssentialLink.vue

@@ -1,47 +0,0 @@
-<template>
-  <q-item
-    clickable
-    :to="link"
-  >
-    <q-item-section
-      v-if="icon"
-      avatar
-    >
-      <q-icon :name="icon" />
-    </q-item-section>
-
-    <q-item-section>
-      <q-item-label>{{ title }}</q-item-label>
-      <q-item-label caption>{{ caption }}</q-item-label>
-    </q-item-section>
-  </q-item>
-</template>
-
-<script>
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'EssentialLink',
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-
-    caption: {
-      type: String,
-      default: ''
-    },
-
-    link: {
-      type: String,
-      default: '#'
-    },
-
-    icon: {
-      type: String,
-      default: ''
-    }
-  }
-})
-</script>

app/frontend/src/components/dlg/Company.vue

@@ -1,14 +1,14 @@
 <template>
   <q-dialog ref="dialogRef" persistent @hide="onDialogHide">
-    <q-card>
+    <q-card style="width: 600px;">
       <q-card-section class="bg-purple text-white">
-        <span class="text-h6 text-weight-bolder">Veri Tabanı Bağlantısı</span>
+        <span class="text-h6 text-weight-bolder">Şirket Ekleme</span>
       </q-card-section>
       <q-card-section>
-        <q-input v-model="ld.host" label="Host"/>
-        <q-input v-model.number="ld.port" label="Port"/>
-        <q-input v-model="ld.username" label="Username"/>
-        <q-input v-model="ld.userpass" label="Password"/>
+        <q-input v-model="ld.name" label="Şirket Adı"/>
+        <q-input v-model="ld.memberNumber" label="Üye No"/>
+        <q-input v-model="ld.username" label="Kullanıcı Adı"/>
+        <q-input v-model="ld.password" label="Parola"/>
       </q-card-section>
       <q-card-actions align="right">
         <q-btn label="İptal"
@@ -17,7 +17,7 @@
                @click="onDialogCancel"
         />
 
-        <q-btn label="Bağlan" no-caps outline color="positive"
+        <q-btn label="Kaydet" no-caps outline color="positive"
                icon="check"
                @click="onDialogOK(toRaw(ld))"/>
       </q-card-actions>
@@ -38,10 +38,10 @@ defineEmits([
 const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
 
 const ld = reactive({
-  host: '127.0.0.1',
-  port: 5432,
-  username: 'postgres',
-  userpass: 'tayitkan',
+  name: '',
+  memberNumber: '',
+  username: '',
+  password: '',
 })
 
 

app/frontend/src/layouts/MainLayout.vue

@@ -15,7 +15,7 @@
           Bordro Robotu
         </q-toolbar-title>
 
-        <q-space />
+        <q-space/>
 
         <q-btn
           icon="mdi-database-sync" flat
@@ -32,21 +32,11 @@
     >
       <q-btn
         icon="mdi-database-sync"
-        @click="getDatabaseList"
-        />
+      />
 
       <q-list>
-        <q-item-label
-          header
-        >
-          Essential Links
-        </q-item-label>
 
-        <EssentialLink
-          v-for="link in linksList"
-          :key="link.title"
-          v-bind="link"
-        />
+
       </q-list>
     </q-drawer>
 
@@ -58,14 +48,12 @@
 
 <script setup>
 import { reactive, ref } from 'vue'
-import EssentialLink from 'components/EssentialLink.vue'
 import { useQuasar } from 'quasar'
-import DbConnect from 'components/dlg/DbConnect.vue'
 
 const $q = useQuasar()
 const ld = reactive({
   selectedDB: '',
-  databases: []
+  databases: [],
 })
 
 const linksList = [
@@ -87,7 +75,7 @@ const toggleLeftDrawer = function () {
 </script>
 
 <style scoped lang="scss">
-.header-input .q-field .q-field__control-container .q-field__native,.q-field__label {
-  color: white!important;
+.header-input .q-field .q-field__control-container .q-field__native, .q-field__label {
+  color: white !important;
 }
 </style>

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>