12 interactive search bar

.eslintignore

@@ -5,3 +5,4 @@
 /node_modules
 .eslintrc.js
 /quasar.config.*.temporary.compiled*
+/src/stores/store-flag.d.ts

README.md

@@ -6,9 +6,13 @@ A simple odoo mobile app
 ```bash
 npm install
 ```
+## Install Quasar CLI
+```bash
+npm install -g @quasar/cli
+```
 
-### Start the app in development mode (hot-code reloading, error reporting, etc.)
+## Start the app in development mode (hot-code reloading, error reporting, etc.)
 ```bash
-npm run dev
+quasar dev
 ```
 

package.json

@@ -7,7 +7,7 @@
   "private": true,
   "scripts": {
     "lint": "eslint --ext .js,.vue ./",
-    "format": "prettier --write \"**/*.{js,vue,css,html,md,json}\" --ignore-path .gitignore",
+    "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
     "test": "echo \"No test specified\" && exit 0",
     "dev": "quasar dev",
     "build": "quasar build"

quasar.config.js

@@ -30,7 +30,7 @@ module.exports = configure(function (/* ctx */) {
     boot: ["pinia"],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
-    css: ["app.css"],
+    css: ["app.scss"],
 
     // https://github.com/quasarframework/quasar/tree/dev/extras
     extras: [
@@ -56,6 +56,16 @@ module.exports = configure(function (/* ctx */) {
       },
 
       vueRouterMode: "hash", // available values: 'hash', 'history'
+
+      viteOption: { // Vite configuration for CSS and Sass
+        css : {
+          preprocessorOptions: { // Configure the Sass preprocessor
+            sass: { 
+              additionalData: `@import 'src/css/app.sass';` // Include custom Sass data, e.g., variables and mixins
+            }
+          }
+        }
+      }
       // vueRouterBase,
       // vueDevtools,
       // vueOptionsAPI: false,
@@ -89,7 +99,19 @@ module.exports = configure(function (/* ctx */) {
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
     framework: {
-      config: {},
+      config: {
+        dark: "false", 
+        brand: {
+          primary: "#006783",
+          secondary: "#6d48b4",
+          accent: "#5d5b7d",
+          dark: "#191c1e",
+          positive: "#21BA45",
+          negative: "#ba1a1a",
+          info: "#31CCEC",
+          warning: "#F2C037",
+        }
+      },
 
       // iconSet: 'material-icons', // Quasar icon set
       // lang: 'en-US', // Quasar language pack
@@ -105,6 +127,8 @@ module.exports = configure(function (/* ctx */) {
       plugins: [
         "Notify",
         "Dark",
+        "LocalStorage",
+        "SessionStorage",
       ],
     },
 

src/App.vue

@@ -3,9 +3,16 @@
 </template>
 
 <script>
-import { defineComponent } from 'vue'
+import { defineComponent } from 'vue' ; 
+import {  useQuasar } from 'quasar' ;
+
 
 export default defineComponent({
-  name: 'App'
-})
+  name: 'App', 
+  setup() {
+    const $q = useQuasar() ;
+
+    $q.dark.set(false);
+  },
+}) ;
 </script>

src/components/Class/Contacts.vue

@@ -0,0 +1,176 @@
+<!-- <template>
+  <q-card 
+   v-ripple
+   @click="getOneClickedContact(contact)"
+   v-for="contact in Contacts.contactsList" :key="contact.id"
+  >
+
+    <q-card-section class="text">{{ contact.name }}</q-card-section>
+    <q-card-section class="text">{{ contact.email }}</q-card-section>
+
+  </q-card>
+</template> -->
+
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import axios from 'axios';
+// import ContactCard from '../ContactCard.vue';  
+
+export default defineComponent({
+  name: 'ContactsComponent',
+  data() {
+    return {
+      Contacts: {
+        contactsList: [],
+      },
+    };
+  },
+  methods: {
+
+    cleanContactProperties(contact){
+      return {
+        name: contact.name || '',
+        email: contact.email_normalized || '',
+        phone: contact.phone || '',
+        mobile: contact.mobile || '',
+        image_1920: contact.image_1920 || '',
+        street: contact.street || '',
+        street2: contact.street2 || '',
+        zip: contact.zip || '',
+        city: contact.city || '',
+        write_date: contact.write_date || '',
+        func: contact.function || '',
+        is_company: contact.is_company || '',
+        commercial_company_name: contact.commercial_company_name || '',
+      }
+    },
+
+    async fetchContactList() {
+      try {
+        const options = {
+          method: 'POST',
+          url: 'https://apps.alusage.fr/jsonrpc',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          data: {
+            jsonrpc: '2.0',
+            params: {
+              service: 'object',
+              method: 'execute_kw',
+              args: [
+                'odoo',
+                '2',
+                'admin',
+                'res.partner',
+                'search_read',
+                [[]],
+                {
+                  fields: [
+                    'name',
+                    'email_normalized',
+                    'phone',
+                    'mobile',
+                    'image_1920',
+                    'street',
+                    'street2',
+                    'zip',
+                    'city',
+                    'write_date',
+                    'function',
+                    'is_company',
+                  ],
+                },
+              ],
+            },
+          },
+        };
+
+        const response = await axios.request(options);
+        const contactData = response.data.result;
+
+        let listeClean = [] ; 
+
+
+        contactData.forEach( (contact) => {
+          listeClean.push(this.cleanContactProperties(contact)) ; 
+
+        });
+
+        // console.log(contactData);
+
+        this.Contacts.contactsList = listeClean;
+        // console.log(this.Contacts.contactsList);
+        // Emit the contacts list to the parent component
+        this.$emit('fetchedContactList', this.Contacts.contactsList);
+
+      } catch (error) {
+        console.error(error);
+      }
+    },
+
+
+    getOneClickedContact(contact){
+      this.$emit('clickedContact', contact); 
+    },
+
+  },
+  mounted() {
+    this.fetchContactList();
+
+    // this.getOneContact();
+    // this.assignContactsData();
+    // this.getContactProperties(); 
+    // this.testClick();
+  },
+});
+</script>
+
+<!-- ['name', 'email_normalized', 'phone', 'mobile', 'image_1920', 'street', 'street2', 'zip', 'city', 'write_date', 'function', 'is_company', 'commercial_company_name'] -->
+
+<!-- const fetchContactList = async () => {
+    try {
+      const options = {
+        method: 'POST',
+        url: 'https://apps.alusage.fr/jsonrpc',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        data: {
+          jsonrpc: '2.0',
+          params: {
+            service: 'object',
+            method: 'execute_kw',
+            args: [
+              state.db,
+              state.myId,
+              state.apikey,
+              'res.partner',
+              'search_read',
+              [[]],
+              {
+                fields: ['name', 'email_normalized', 'phone', 'mobile', 'image_1920', 'street', 'street2', 'zip', 'city','write_date','function', 'is_company'],
+              }
+            ]
+          }
+        }
+      };
+
+
+      const response = await axios.request(options);
+      state.rows = response.data.result;
+      isContactListFetched.value = true;
+
+      console.log(state.rows)
+      console.log(state.rows[10].name)
+    } catch (error) {
+      console.error(error);
+    }
+
+  } -->