add barcode to profile

package.json

@@ -40,6 +40,7 @@
     "fs": "^0.0.1-security",
     "fslightbox-vue": "^2.0.2",
     "js-abstract-model": "^0.1.36",
+    "jsbarcode": "^3.11.6",
     "moment": "^2.29.4",
     "moment-jalaali": "^0.9.6",
     "postcss": "^8.4.21",

src/components/FormBuilderCustumComponents/FormBuilderBarCode.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="FormBuilderBarCode">
+    <div class="label">{{ label }}</div>
+    <svg :id="barcodeId" />
+  </div>
+</template>
+
+<script>
+import { uid } from 'quasar'
+import JsBarcode from 'jsbarcode'
+
+export default {
+  name: 'FormBuilderBarCode',
+  props: {
+    label: {
+      default: '',
+      type: String
+    },
+    value: {
+      default: '',
+      type: [String, Number]
+    }
+  },
+  data () {
+    return {
+      barcodeId: null
+    }
+  },
+  mounted() {
+    this.loadBarcode()
+  },
+  methods: {
+    loadBarcode () {
+      this.barcodeId = 'FormBuilderBarCode-' + uid()
+      setTimeout(() => {
+        JsBarcode('#' + this.barcodeId, this.value, {
+          // format: 'pharmacode',
+          lineColor: '#0aa',
+          width: 2,
+          height: 50,
+          displayValue: false
+        })
+      }, 1000)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.FormBuilderBarCode {
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+  gap: 0;
+}
+</style>

src/pages/User/Profile/profile.vue

@@ -36,11 +36,13 @@ import Warning from 'src/components/other/Warning.vue'
 import VerifyEmail from 'src/components/other/VerifyEmail.vue'
 import NationalCode from 'src/components/other/NationalCode.vue'
 import VerifyMobileNumber from 'src/components/other/VerifyMobileNumber.vue'
+import FormBuilderBarCode from 'src/components/FormBuilderCustumComponents/FormBuilderBarCode.vue'
 
 const WarningComp = shallowRef(Warning)
 const VerifyEmailComp = shallowRef(VerifyEmail)
 const NationalCodeComp = shallowRef(NationalCode)
 const VerifyMobileNumberComp = shallowRef(VerifyMobileNumber)
+const FormBuilderBarCodeComp = shallowRef(FormBuilderBarCode)
 
 export default {
   name: 'UserPanel.Profile.UserInfo',
@@ -54,6 +56,8 @@ export default {
       entityParamKey: 'id',
       showRouteName: 'UserPanel.Profile.UserInfo',
       inputs: [
+        { type: 'separator', name: 'space', placeholder: ' ', label: 'شناسه ورود به جلسه', className: 'custom-separator require', col: 'col-12' },
+        { type: FormBuilderBarCodeComp, name: 'national_code', responseKey: 'national_code', label: 'بارکد ورود به جلسه', col: 'col-12' },
         { type: 'separator', name: 'space', placeholder: ' ', label: 'اطلاعات ضروری', className: 'custom-separator require', col: 'col-12' },
         { type: WarningComp, name: 'WarningComp', label: 'بعد از تایید اطلاعات ضروری، امکان تغییر این اطلاعات وجود ندارد', col: 'col-12' },
         { type: VerifyEmailComp, name: 'email', placeholder: ' ', label: 'ایمیل', responseKey: 'email', col: 'col-md-6 col-12' },

yarn.lock

@@ -4059,6 +4059,11 @@ js-yaml@^4.1.0:
   dependencies:
     argparse "^2.0.1"
 
+jsbarcode@^3.11.6:
+  version "3.11.6"
+  resolved "https://registry.yarnpkg.com/jsbarcode/-/jsbarcode-3.11.6.tgz#96e8fbc3395476e162982a6064b98a09b5ea02c0"
+  integrity sha512-G5TKGyKY1zJo0ZQKFM1IIMfy0nF2rs92BLlCz+cU4/TazIc4ZH+X1GYeDRt7TKjrYqmPfTjwTBkU/QnQlsYiuA==
+
 jsesc@^2.5.1:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"