Skip to content

Commit

Permalink
OHRM5X-1393: Add corporate directory - vCard support (orangehrm#1624)
Browse files Browse the repository at this point in the history
  • Loading branch information
Chamara Abesinghe authored Feb 22, 2023
1 parent b893c7c commit 3cc66e8
Show file tree
Hide file tree
Showing 4 changed files with 207 additions and 2 deletions.
1 change: 1 addition & 0 deletions src/client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"date-fns": "^2.22.1",
"hammerjs": "^2.0.8",
"intl-messageformat": "^9.11.4",
"qrcode": "^1.5.1",
"vue": "^3.2.45"
},
"devDependencies": {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -87,15 +87,21 @@
</div>
</div>
<oxd-divider v-show="employeeWorkEmail"></oxd-divider>
<qr-code
v-if="qrPayload && (employeeWorkTelephone || employeeWorkEmail)"
:value="qrPayload"
></qr-code>
</template>

<script>
import {OxdDivider} from '@ohrm/oxd';
import {APIService} from '@/core/util/services/api.service';
import QRCode from '@/orangehrmCorporateDirectoryPlugin/components/QRCode';

export default {
name: 'EmployeeDetails',
components: {
'qr-code': QRCode,
'oxd-divider': OxdDivider,
},
props: {
Expand Down Expand Up @@ -124,6 +130,8 @@ export default {
showTelephoneClip: false,
showEmailClip: false,
toGoEmail: null,
qrPayload: null,
employeeName: null,
};
},
watch: {
Expand All @@ -150,10 +158,28 @@ export default {
callEmployeeDetailsApi() {
this.http.get(this.employeeId, {model: 'detailed'}).then((response) => {
const {data} = response.data;
this.employeeWorkTelephone = data.contactInfo?.workTelephone;
this.employeeName = {
firstName: data.firstName,
middleName: data.middleName,
lastName: data.lastName,
};
this.employeeWorkEmail = data.contactInfo?.workEmail;
this.employeeWorkTelephone = data.contactInfo?.workTelephone;
this.generateQrPayload();
});
},
generateQrPayload() {
let content = '';
content += `N:${this.employeeName?.lastName || ''};`;
content += `${this.employeeName?.firstName || ''};`;
content += `${this.employeeName?.middleName || ''};\n`;
if (this.employeeWorkTelephone)
content += `TEL;CELL:${this.employeeWorkTelephone}\n`;
if (this.employeeWorkEmail)
content += `EMAIL;WORK;INTERNET:${this.employeeWorkEmail}\n`;

this.qrPayload = `BEGIN:VCARD\nVERSION:3.0\n${content}END:VCARD\n`;
},
},
};
</script>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<!--
/**
* OrangeHRM is a comprehensive Human Resource Management (HRM) System that captures
* all the essential functionalities required for any enterprise.
* Copyright (C) 2006 OrangeHRM Inc., http://www.orangehrm.com
*
* OrangeHRM is free software; you can redistribute it and/or modify it under the terms of
* the GNU General Public License as published by the Free Software Foundation; either
* version 2 of the License, or (at your option) any later version.
*
* OrangeHRM is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
* without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
* See the GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License along with this program;
* if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
* Boston, MA 02110-1301, USA
*/
-->

<script>
import {toDataURL} from 'qrcode';
import {h, ref, watch, onBeforeMount} from 'vue';

export default {
name: 'QRCode',
props: {
value: {
type: String,
required: true,
},
},
setup(props) {
const qrImgSrc = ref('');

const generateQR = async () => {
const url = await toDataURL(String(props.value), {
type: 'image/png',
width: 140,
});
qrImgSrc.value = url || '';
};

watch(() => props.value, generateQR);

onBeforeMount(generateQR);

return () =>
h('img', {
src: qrImgSrc.value,
class: 'orangehrm-qr-code',
});
},
};
</script>

<style scoped>
.orangehrm-qr-code {
margin: auto;
width: 140px;
display: block;
}
</style>
117 changes: 116 additions & 1 deletion src/client/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -4482,6 +4482,17 @@ __metadata:
languageName: node
linkType: hard

"cliui@npm:^6.0.0":
version: 6.0.0
resolution: "cliui@npm:6.0.0"
dependencies:
string-width: ^4.2.0
strip-ansi: ^6.0.0
wrap-ansi: ^6.2.0
checksum: 4fcfd26d292c9f00238117f39fc797608292ae36bac2168cfee4c85923817d0607fe21b3329a8621e01aedf512c99b7eaa60e363a671ffd378df6649fb48ae42
languageName: node
linkType: hard

"cliui@npm:^7.0.2, cliui@npm:^7.0.4":
version: 7.0.4
resolution: "cliui@npm:7.0.4"
Expand Down Expand Up @@ -5087,6 +5098,13 @@ __metadata:
languageName: node
linkType: hard

"decamelize@npm:^1.2.0":
version: 1.2.0
resolution: "decamelize@npm:1.2.0"
checksum: ad8c51a7e7e0720c70ec2eeb1163b66da03e7616d7b98c9ef43cce2416395e84c1e9548dd94f5f6ffecfee9f8b94251fc57121a8b021f2ff2469b2bae247b8aa
languageName: node
linkType: hard

"decimal.js@npm:^10.2.1":
version: 10.4.3
resolution: "decimal.js@npm:10.4.3"
Expand Down Expand Up @@ -5213,6 +5231,13 @@ __metadata:
languageName: node
linkType: hard

"dijkstrajs@npm:^1.0.1":
version: 1.0.2
resolution: "dijkstrajs@npm:1.0.2"
checksum: 8cd822441a26f190da24d69bfab7b433d080b09e069e41e046ac84e152f182a1ed9478d531b34126e000adaa7b73114a0f85fcac117a7d25b3edf302d57c0d09
languageName: node
linkType: hard

"dir-glob@npm:^3.0.1":
version: 3.0.1
resolution: "dir-glob@npm:3.0.1"
Expand Down Expand Up @@ -5397,6 +5422,13 @@ __metadata:
languageName: node
linkType: hard

"encode-utf8@npm:^1.0.3":
version: 1.0.3
resolution: "encode-utf8@npm:1.0.3"
checksum: 550224bf2a104b1d355458c8a82e9b4ea07f9fc78387bc3a49c151b940ad26473de8dc9e121eefc4e84561cb0b46de1e4cd2bc766f72ee145e9ea9541482817f
languageName: node
linkType: hard

"encodeurl@npm:~1.0.2":
version: 1.0.2
resolution: "encodeurl@npm:1.0.2"
Expand Down Expand Up @@ -6253,7 +6285,7 @@ __metadata:
languageName: node
linkType: hard

"get-caller-file@npm:^2.0.5":
"get-caller-file@npm:^2.0.1, get-caller-file@npm:^2.0.5":
version: 2.0.5
resolution: "get-caller-file@npm:2.0.5"
checksum: b9769a836d2a98c3ee734a88ba712e62703f1df31b94b784762c433c27a386dd6029ff55c2a920c392e33657d80191edbf18c61487e198844844516f843496b9
Expand Down Expand Up @@ -8944,6 +8976,7 @@ __metadata:
intl-messageformat: ^9.11.4
jest: ^27.1.0
prettier: ^2.4.1
qrcode: ^1.5.1
sass: ^1.32.7
sass-loader: ^12.0.0
ts-jest: ^27.0.4
Expand Down Expand Up @@ -9160,6 +9193,13 @@ __metadata:
languageName: node
linkType: hard

"pngjs@npm:^5.0.0":
version: 5.0.0
resolution: "pngjs@npm:5.0.0"
checksum: 04e912cc45fb9601564e2284efaf0c5d20d131d9b596244f8a6789fc6cdb6b18d2975a6bbf7a001858d7e159d5c5c5dd7b11592e97629b7137f7f5cef05904c8
languageName: node
linkType: hard

"portfinder@npm:^1.0.26":
version: 1.0.32
resolution: "portfinder@npm:1.0.32"
Expand Down Expand Up @@ -9777,6 +9817,20 @@ __metadata:
languageName: node
linkType: hard

"qrcode@npm:^1.5.1":
version: 1.5.1
resolution: "qrcode@npm:1.5.1"
dependencies:
dijkstrajs: ^1.0.1
encode-utf8: ^1.0.3
pngjs: ^5.0.0
yargs: ^15.3.1
bin:
qrcode: bin/qrcode
checksum: 842f899d95caaad2ac507408b5498be3197e1df16bc6b537b20069d2cb1330e4588b50f672ce4a9ccf01338f7c97b5732ff9b5caaa6eb2338187d3c25a973e79
languageName: node
linkType: hard

"qs@npm:6.11.0":
version: 6.11.0
resolution: "qs@npm:6.11.0"
Expand Down Expand Up @@ -10005,6 +10059,13 @@ __metadata:
languageName: node
linkType: hard

"require-main-filename@npm:^2.0.0":
version: 2.0.0
resolution: "require-main-filename@npm:2.0.0"
checksum: e9e294695fea08b076457e9ddff854e81bffbe248ed34c1eec348b7abbd22a0d02e8d75506559e2265e96978f3c4720bd77a6dad84755de8162b357eb6c778c7
languageName: node
linkType: hard

"requires-port@npm:^1.0.0":
version: 1.0.0
resolution: "requires-port@npm:1.0.0"
Expand Down Expand Up @@ -11831,6 +11892,13 @@ __metadata:
languageName: node
linkType: hard

"which-module@npm:^2.0.0":
version: 2.0.0
resolution: "which-module@npm:2.0.0"
checksum: 809f7fd3dfcb2cdbe0180b60d68100c88785084f8f9492b0998c051d7a8efe56784492609d3f09ac161635b78ea29219eb1418a98c15ce87d085bce905705c9c
languageName: node
linkType: hard

"which@npm:^1.2.9":
version: 1.3.1
resolution: "which@npm:1.3.1"
Expand Down Expand Up @@ -11886,6 +11954,17 @@ __metadata:
languageName: node
linkType: hard

"wrap-ansi@npm:^6.2.0":
version: 6.2.0
resolution: "wrap-ansi@npm:6.2.0"
dependencies:
ansi-styles: ^4.0.0
string-width: ^4.1.0
strip-ansi: ^6.0.0
checksum: 6cd96a410161ff617b63581a08376f0cb9162375adeb7956e10c8cd397821f7eb2a6de24eb22a0b28401300bf228c86e50617cd568209b5f6775b93c97d2fe3a
languageName: node
linkType: hard

"wrap-ansi@npm:^7.0.0":
version: 7.0.0
resolution: "wrap-ansi@npm:7.0.0"
Expand Down Expand Up @@ -11960,6 +12039,13 @@ __metadata:
languageName: node
linkType: hard

"y18n@npm:^4.0.0":
version: 4.0.3
resolution: "y18n@npm:4.0.3"
checksum: 014dfcd9b5f4105c3bb397c1c8c6429a9df004aa560964fb36732bfb999bfe83d45ae40aeda5b55d21b1ee53d8291580a32a756a443e064317953f08025b1aa4
languageName: node
linkType: hard

"y18n@npm:^5.0.5":
version: 5.0.8
resolution: "y18n@npm:5.0.8"
Expand Down Expand Up @@ -12002,6 +12088,35 @@ __metadata:
languageName: node
linkType: hard

"yargs-parser@npm:^18.1.2":
version: 18.1.3
resolution: "yargs-parser@npm:18.1.3"
dependencies:
camelcase: ^5.0.0
decamelize: ^1.2.0
checksum: 60e8c7d1b85814594d3719300ecad4e6ae3796748b0926137bfec1f3042581b8646d67e83c6fc80a692ef08b8390f21ddcacb9464476c39bbdf52e34961dd4d9
languageName: node
linkType: hard

"yargs@npm:^15.3.1":
version: 15.4.1
resolution: "yargs@npm:15.4.1"
dependencies:
cliui: ^6.0.0
decamelize: ^1.2.0
find-up: ^4.1.0
get-caller-file: ^2.0.1
require-directory: ^2.1.1
require-main-filename: ^2.0.0
set-blocking: ^2.0.0
string-width: ^4.2.0
which-module: ^2.0.0
y18n: ^4.0.0
yargs-parser: ^18.1.2
checksum: 40b974f508d8aed28598087720e086ecd32a5fd3e945e95ea4457da04ee9bdb8bdd17fd91acff36dc5b7f0595a735929c514c40c402416bbb87c03f6fb782373
languageName: node
linkType: hard

"yargs@npm:^16.0.0, yargs@npm:^16.2.0":
version: 16.2.0
resolution: "yargs@npm:16.2.0"
Expand Down

0 comments on commit 3cc66e8

Please sign in to comment.