From 58826eb9f0fccbdf5173e38c3ce1db7821af68bc Mon Sep 17 00:00:00 2001
From: somnath ghorpade <somnathg@mkcl.org>
Date: Thu, 1 Jun 2023 10:33:51 +0530
Subject: [PATCH] Added composition API support for all features.
---
README.md | 2 +-
app/README.md | 2 +-
app/src/App.vue | 6 +-
app/src/components/MTable.vue | 90 +-
.../download-manager/downloadFile.vue | 239 ++---
.../download-manager/downloadProgress.vue | 92 +-
.../components/sessionmanager/deleteData.vue | 89 +-
.../components/sessionmanager/fetchData.vue | 83 +-
.../components/sessionmanager/storeData.vue | 50 +-
.../components/upload-manager/uploadFile.vue | 98 +-
.../upload-manager/uploadProgessFile.vue | 95 +-
app/src/main.js | 23 -
app/src/router.js | 679 ++++++-------
app/src/views/CdnUpload.vue | 144 +--
app/src/views/Classroom.vue | 87 +-
app/src/views/DownloadManager.vue | 118 +--
app/src/views/Encryption.vue | 68 +-
app/src/views/Excel.vue | 157 +--
app/src/views/ForLoop.vue | 131 +--
app/src/views/Home.vue | 914 ++++++++----------
app/src/views/I18Demo.vue | 87 +-
app/src/views/KeyMapper.vue | 132 +--
app/src/views/LastInsertedId.vue | 28 +-
app/src/views/Login.vue | 42 +-
app/src/views/MQLRequestDemo.vue | 66 +-
app/src/views/MqlAssetFDBDemo.vue | 192 ++--
app/src/views/Registration.vue | 107 +-
app/src/views/ServerSidePagination.vue | 170 ++--
app/src/views/SessionManager.vue | 126 +--
app/src/views/StudentDemo.vue | 207 ++--
app/src/views/TableDemo.vue | 13 +-
app/src/views/UploadManager.vue | 132 +--
app/src/views/Validator.vue | 133 +--
app/src/views/autoBL.vue | 134 ++-
app/src/views/email.vue | 106 +-
app/src/views/generateOTP.vue | 40 +-
app/src/views/insertCustomMongoId.vue | 116 +--
app/src/views/otp.vue | 44 +-
app/src/views/sendDynamicEmails.vue | 24 +-
app/src/views/sendDynamicMessages.vue | 22 +-
app/src/views/sendStaticEmails.vue | 106 +-
app/src/views/sendStaticMessages.vue | 127 +--
app/src/views/sms.vue | 100 +-
app/src/views/tailwindForm.vue | 291 +++---
app/src/views/updateUserDataUsingBL.vue | 115 +--
app/src/views/validateOTP.vue | 128 +--
app/src/views/vueClipboard.vue | 95 +-
app/src/views/vueMetaExample.vue | 128 +--
48 files changed, 2506 insertions(+), 3672 deletions(-)
diff --git a/README.md b/README.md
index 3aabece..08b2c01 100644
--- a/README.md
+++ b/README.md
@@ -1 +1 @@
-# Fullstack with Formkit and tailwind css
\ No newline at end of file
+# Fullstack with Formkit and tailwind css Composition API
\ No newline at end of file
diff --git a/app/README.md b/app/README.md
index 22c1025..b36ca6e 100644
--- a/app/README.md
+++ b/app/README.md
@@ -1,6 +1,6 @@
# Node and npm environement:
Updated and tested with latest dependencies using node 18.12.1 and npm 8.19.2
-# Vue Client app
+# Vue Client app (Vue3 CompositionAPI)
# Vite CLI version 4.2.3
# FormKit version 0.17.2
# DaisyUI version 2.51.6
diff --git a/app/src/App.vue b/app/src/App.vue
index dc605cf..24188b9 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -14,8 +14,6 @@
<div class="wrapper">
<router-view :key="$route.fullPath" />
</div>
- <Toast></Toast>
- <ConfirmDialog></ConfirmDialog>
<Footer></Footer>
</div>
</template>
@@ -23,7 +21,7 @@
<script>
import { useMeta } from "vue-meta"
import Footer from "./components/common/Footer.vue"
- import { main } from './store/index'
+ import { main } from "./store/index"
export default {
name: "App",
@@ -39,7 +37,7 @@
htmlAttrs: { lang: "en", amp: true },
})
const mainStore = main()
- return {mainStore}
+ return { mainStore }
},
metaInfo: {
meta: [
diff --git a/app/src/components/MTable.vue b/app/src/components/MTable.vue
index 7f8f65c..7e6d4ae 100644
--- a/app/src/components/MTable.vue
+++ b/app/src/components/MTable.vue
@@ -30,60 +30,42 @@
</div>
</template>
-<script>
+<script setup>
import MQL from "@/plugins/mql.js"
- export default {
- name: "MTable",
- props: {
- msg: {
- type: String,
- default: null,
- },
- activity: {
- type: String,
- required: true,
- default: null,
- },
- restriction: {
- type: String,
- required: true,
- default: null,
- },
- },
- data() {
- return {
- itemList: [],
- }
- },
- mounted() {
- this.getActivityData()
- },
- methods: {
- // call for activity specific mql
- getActivityData() {
- new MQL()
- .setActivity(this.restriction + ".[" + this.activity + "]")
- // In case params not provided it will go with empty object
- .setData()
- .fetch()
- .then((rs) => {
- let res = rs.getActivity(this.activity, false)
- if (rs.isValid(this.activity)) {
- // Check if the request is of query type
- if (this.activity.startsWith("query_")) {
- // Request is of query type
- console.log(res)
- this.itemList = res
- } else {
- // Request is of activity type
- this.itemList = res.result[this.resultKey || []]
- }
- } else {
- // In case there is error from server side
- rs.showErrorToast(this.activity, this.$toast)
- }
- })
- },
- },
+ import { ref,toRefs, onMounted } from "vue"
+ const props = defineProps([
+ 'msg',
+ 'activity',
+ 'restriction',
+ 'params'])
+ let itemList = ref([])
+
+ onMounted(() => {
+ getActivityData()
+ })
+ // call for activity specific mql
+ function getActivityData() {
+ new MQL()
+ .setActivity(props.restriction + '.[' + props.activity + ']')
+ // In case params not provided it will go with empty object
+ .setData(props.params || {})
+ .fetch()
+ .then((rs) => {
+ let res = rs.getActivity(props.activity, false)
+ if (rs.isValid(props.activity)) {
+ // Check if the request is of query type
+ if (props.activity.startsWith('query_')) {
+ // Request is of query type
+ console.log(res)
+ itemList.value = res
+ } else {
+ // Request is of activity type
+ itemList.value = res.result[props.resultKey || []]
+ }
+ } else {
+ // In case there is error from server side
+ rs.showErrorToast(props.activity)
+ }
+ })
}
</script>
diff --git a/app/src/components/download-manager/downloadFile.vue b/app/src/components/download-manager/downloadFile.vue
index 67f2138..3c2cf68 100644
--- a/app/src/components/download-manager/downloadFile.vue
+++ b/app/src/components/download-manager/downloadFile.vue
@@ -1,128 +1,131 @@
<template>
- <div class="container-fluid" id="downloadFileInner">
- <h2 class="title alt">
- <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
- Download File
- </h2>
- <div class="row justify-content-center">
- <div class="col-6">
- <div class="box-login">
- <div class="p-card p-component">
- <div class="field">
- <div class="p-float-label">
- <input type="text" v-model="download.cdnBaseUrl" class="p-inputtext p-component w-100"
- :class="download.cdnBaseUrl ? 'p-filled': ''" id="url">
- <label for="url">Enter Base Url</label>
- </div>
- </div>
- <div class="field">
- <div class="p-float-label">
- <input type="text" v-model="download.downloadFileUrl" class="p-inputtext p-component w-100"
- :class="download.downloadFileUrl ? 'p-filled': ''" id="downloadFileUrl">
- <label for="downloadFileUrl">Enter Download File Url</label>
- </div>
- </div>
- <div class="field">
- <div class="p-float-label">
- <input type="text" v-model="download.destinationFileUrl" class="p-inputtext p-component w-100"
- :class="download.destinationFileUrl ? 'p-filled': ''" id="destinationFileUrl">
- <label for="destinationFileUrl">Enter Destination Url</label>
- </div>
- </div>
- <div class="btn-wrapper">
- <button class="btn btn-submit" @click.prevent="downloadFile">
- <i class="isax isax-bold-document-download"></i>
- Download File
- </button>
- </div>
- </div>
- </div>
- </div>
- <div class="col-6">
- <div class="box-login">
- <div class="p-card p-component">
- <h4> Testing Parameters </h4>
- <ul class="list">
- <li>
- Base URL
- <div>
- https://csdev.mkcl.org/
- </div>
- </li>
- <li>
- Download File URL
- <div>
- server/sls/ProjectConfigBackup/1Mg6VkbM1MQhhKh8z2qGSa42HIY/02_04_2021/1Mg6VkbM1MQhhKh8z2qGSa42HIY_1617343458.json
- </div>
- </li>
- <li>Destination File URL
- <div>
- 02_04_2021/
- </div>
- </li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- </div>
+ <div class="container-fluid" id="downloadFileInner">
+ <h2 class="title alt">Download File</h2>
+ <div class="row justify-content-center">
+ <div class="col-6">
+ <div class="box-login">
+ <div class="p-card p-component">
+ <div class="field">
+ <FormKit
+ type="text"
+ label="Enter Base Url"
+ help="Enter Base Urlâ€."
+ placeholder="Enter Base Url"
+ validation="required"
+ v-model="download.cdnBaseUrl"
+ />
+ </div>
+ <div class="field">
+ <FormKit
+ type="text"
+ label="Enter Download File Url"
+ help="Enter Download File Urlâ€."
+ placeholder="Enter Download File Url"
+ validation="required"
+ v-model="download.downloadFileUrl"
+ />
+ </div>
+ <div class="field">
+ <FormKit
+ type="text"
+ label="Enter Destination Url"
+ help="Enter Destination Urlâ€."
+ placeholder="Enter Destination Url"
+ validation="required"
+ v-model="download.destinationFileUrl"
+ />
+ </div>
+ <div class="btn-wrapper">
+ <FormKit type="submit" label="Download File" @click="downloadFile" />
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col-6">
+ <div class="box-login">
+ <div class="p-card p-component">
+ <h4>Testing Parameters</h4>
+ <ul class="list">
+ <li>
+ Base URL
+ <div>https://csdev.mkcl.org/</div>
+ </li>
+ <li>
+ Download File URL
+ <div>
+ server/sls/ProjectConfigBackup/1Mg6VkbM1MQhhKh8z2qGSa42HIY/02_04_2021/1Mg6VkbM1MQhhKh8z2qGSa42HIY_1617343458.json
+ </div>
+ </li>
+ <li>
+ Destination File URL
+ <div>02_04_2021/</div>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
-<script>
-import MQL from '@/plugins/mql.js'
-export default {
- data() {
- return {
- download: {},
- downloadId: '',
- downloadResult: '',
- progressResult: ''
- }
- },
- methods: {
- downloadFile() {
- var a = []
- a.push(this.download.downloadFileUrl)
- this.download.downloadFileUrl = a
- new MQL()
- .setActivity('o.[DownloadFileUsingDM]')
- .setData(this.download)
- .fetch()
- .then((rs) => {
- let res = rs.getActivity('DownloadFileUsingDM', true)
- if (rs.isValid('DownloadFileUsingDM')) {
- this.download = {}
- this.downloadResult = res.result
- this.$toast.add({ severity: 'success', summary: 'File Download ', detail: 'File Downloaded Successfully', life: 3000 })
- } else {
- rs.showErrorToast('DownloadFileUsingDM')
- }
- })
- }
- }
-}
+<script setup>
+ import MQL from "@/plugins/mql.js"
+ import { reactive, ref } from "vue"
+ let download = reactive({})
+ let downloadResult = ref({})
+
+ function downloadFile() {
+ var a = []
+ console.log("download", download.value)
+
+ console.log("download.downloadFileUrl -1-", download.downloadFileUrl)
+
+ a.push(download.downloadFileUrl)
+ console.log("a --", a)
+ download.downloadFileUrl = a
+ console.log("download.downloadFileUrl --", download.downloadFileUrl)
+
+ new MQL()
+ .setActivity("o.[DownloadFileUsingDM]")
+ .setData(download)
+ .fetch()
+ .then((rs) => {
+ let res = rs.getActivity("DownloadFileUsingDM", true)
+ if (rs.isValid("DownloadFileUsingDM")) {
+ download = {}
+ downloadResult.value = res.result
+ toast.add({
+ severity: "success",
+ summary: "File Download ",
+ detail: "File Downloaded Successfully",
+ life: 3000,
+ })
+ } else {
+ rs.showErrorToast("DownloadFileUsingDM")
+ }
+ })
+ }
</script>
<style lang="scss" scoped>
-h4 {
- margin-bottom: 1rem;
-}
-
-.list {
- padding: 0 1rem;
+ h4 {
+ margin-bottom: 1rem;
+ }
- li {
- font-weight: 600;
+ .list {
+ padding: 0 1rem;
- div {
- font-weight: 400;
- word-break: break-word;
- }
+ li {
+ font-weight: 600;
- &+li {
- margin-top: 0.75rem;
- }
- }
+ div {
+ font-weight: 400;
+ word-break: break-word;
+ }
-}
-</style>
\ No newline at end of file
+ & + li {
+ margin-top: 0.75rem;
+ }
+ }
+ }
+</style>
diff --git a/app/src/components/download-manager/downloadProgress.vue b/app/src/components/download-manager/downloadProgress.vue
index 446d45d..b3d5911 100644
--- a/app/src/components/download-manager/downloadProgress.vue
+++ b/app/src/components/download-manager/downloadProgress.vue
@@ -1,30 +1,22 @@
<template>
<div class="container-fluid" id="downloadFIleProgress">
<h2 class="title alt">
- <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
Check Progress
</h2>
<div class="row justify-content-center">
<div class="col-6">
<div class="box-login">
<div class="p-card p-component">
- <div class="field">
- <div class="p-float-label">
- <input
- type="text"
- v-model="downloadId"
- class="p-inputtext p-component"
- :class="downloadId ? 'p-filled' : ''"
- id="progress"
- />
- <label for="progress">Download Id</label>
- </div>
- </div>
+ <FormKit
+ type="text"
+ label="Enter Download Id"
+ help="Enter Download Idâ€."
+ placeholder="Enter Download Id"
+ validation="required"
+ v-model="downloadId"
+ />
<div class="btn-wrapper">
- <button class="btn btn-submit" @click="checkDownloadProgress">
- <i class="isax isax-bold-tick-circle"></i>
- Check Progress
- </button>
+ <FormKit type="submit" label="Check Progress" @click="checkDownloadProgress" />
</div>
<div class="field mt-4">
<h3>Result</h3>
@@ -39,46 +31,32 @@
</div>
</template>
-<script>
- import MQL from '@/plugins/mql.js'
- import jsonViewer from 'vue-json-viewer'
- export default {
- data() {
- return {
- downloadId: '',
- progressResult: '',
- }
- },
- components: {
- jsonViewer
- },
- methods: {
- checkDownloadProgress() {
- new MQL()
- .setActivity('o.[CheckDownloadedFileProgress]')
- .setData({ downloadFileId: this.downloadId })
- .fetch()
- .then((rs) => {
- let res = rs.getActivity('CheckDownloadedFileProgress', true)
- if (rs.isValid('CheckDownloadedFileProgress')) {
- if (res && res.result) {
- this.progressResult = res.result
- this.downloadId = ''
- } else {
- // alert('Progress checking failed')
- this.$toast.add({
- severity: 'error',
- summary: 'Progress Check ',
- detail: 'Progress Check Failed',
- life: 3000,
- })
+<script setup>
+ import MQL from "@/plugins/mql.js"
+ import { ref } from "vue"
+ import jsonViewer from "vue-json-viewer"
+ import { createToaster } from "@meforma/vue-toaster"
+ const toaster = createToaster({ position: "top-right", duration: 3000 })
- }
- } else {
- rs.showErrorToast('CheckDownloadedFileProgress')
- }
- })
- },
- },
+ let downloadId = ref("")
+ let progressResult = ref({})
+ function checkDownloadProgress() {
+ new MQL()
+ .setActivity("o.[CheckDownloadedFileProgress]")
+ .setData({ downloadFileId: downloadId.value })
+ .fetch()
+ .then((rs) => {
+ let res = rs.getActivity("CheckDownloadedFileProgress", true)
+ if (rs.isValid("CheckDownloadedFileProgress")) {
+ if (res && res.result) {
+ progressResult.value = res.result
+ downloadId.value = ""
+ } else {
+ toaster.error("Progress Check Failed")
+ }
+ } else {
+ rs.showErrorToast("CheckDownloadedFileProgress")
+ }
+ })
}
</script>
diff --git a/app/src/components/sessionmanager/deleteData.vue b/app/src/components/sessionmanager/deleteData.vue
index 43ce39b..7c49f4d 100644
--- a/app/src/components/sessionmanager/deleteData.vue
+++ b/app/src/components/sessionmanager/deleteData.vue
@@ -1,13 +1,12 @@
<template>
- <div id="deleteData" class="container-fluid">
- <h2 class="title alt">
- <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
- Delete Data from Session
- </h2>
- <div class="row justify-content-center">
- <div class="col-auto">
- <div class="box-login">
- <FormKit
+ <div id="deleteData" class="container-fluid">
+ <h2 class="title alt">
+ Delete Data from Session
+ </h2>
+ <div class="row justify-content-center">
+ <div class="col-auto">
+ <div class="box-login">
+ <FormKit
type="form"
id="registration-example"
:form-class="submitted ? 'hide' : 'show'"
@@ -27,46 +26,36 @@
/>
<button class="btn btn-error" type="submit" label="Delete">Delete</button>
</FormKit>
- </div>
- </div>
- </div>
- </div>
-
+ </div>
+ </div>
+ </div>
+ </div>
</template>
-<script>
-import MQL from '@/plugins/mql.js'
-export default {
- data () {
- return {
- session: '',
- deleteKey: ''
- }
- },
- components: {
- },
- methods: {
- deleteSessionData () {
- new MQL()
- .setActivity('o.[DeleteDataFromSession]')
- .setData({ name: this.deleteKey })
- .fetch()
- .then((rs) => {
- let res = rs.getActivity('DeleteDataFromSession', true)
- if (rs.isValid('DeleteDataFromSession')) {
- if (res && res.result) {
- this.sessionResult = res.result
- this.deleteKey = ''
- // alert('Data deleted successfully')
- this.$toast.add({severity:'success', summary: 'Data Delete ', detail:'Data Deleted Successfully', life: 3000})
- } else {
- this.$toast.add({severity:'error', summary: 'Data Delete', detail:'Data Deletion Failed', life: 3000})
- }
- } else {
- rs.showErrorToast('DeleteDataFromSession')
- }
- })
- }
- }
-}
-</script>
\ No newline at end of file
+<script setup>
+ import MQL from "@/plugins/mql.js"
+ import { ref } from "vue"
+ let deleteKey = ref("")
+ let sessionResult = ref({})
+
+ function deleteSessionData() {
+ new MQL()
+ .setActivity("o.[DeleteDataFromSession]")
+ .setData({ name: deleteKey.value })
+ .fetch()
+ .then((rs) => {
+ let res = rs.getActivity("DeleteDataFromSession", true)
+ if (rs.isValid("DeleteDataFromSession")) {
+ if (res && res.result) {
+ sessionResult.value = res.result
+ deleteKey.value = ""
+ toast.add({ severity: "success", summary: "Data Delete", detail: "Data Deleted Successfully", life: 3000 })
+ } else {
+ toast.add({ severity: "error", summary: "Data Delete", detail: "Data Deletion Failed", life: 3000 })
+ }
+ } else {
+ rs.showErrorToast("DeleteDataFromSession")
+ }
+ })
+ }
+</script>
diff --git a/app/src/components/sessionmanager/fetchData.vue b/app/src/components/sessionmanager/fetchData.vue
index 9b572c0..7cd69bc 100644
--- a/app/src/components/sessionmanager/fetchData.vue
+++ b/app/src/components/sessionmanager/fetchData.vue
@@ -1,7 +1,6 @@
<template>
<div id="fetchData" class="container-fluid">
<h2 class="title alt">
- <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
Fetch Data in Session
</h2>
<div class="row justify-content-center">
@@ -37,51 +36,41 @@
</div>
</template>
-<script>
- import MQL from "@/plugins/mql.js"
- import jsonViewer from "vue-json-viewer"
- export default {
- data() {
- return {
- session: {},
- fetchKey: "",
- sessionResult: "",
- }
- },
- components: {
- jsonViewer,
- },
- methods: {
- fetchSessionData() {
- new MQL()
- .setActivity("o.[FetchDataFromSession]")
- .setData({ name: this.fetchKey })
- .fetch()
- .then((rs) => {
- let res = rs.getActivity("FetchDataFromSession", true)
- if (rs.isValid("FetchDataFromSession")) {
- if (res && res.result) {
- this.sessionResult = res.result
- this.fetchKey = ""
- this.$toast.add({
- severity: "success",
- summary: "Fetch Data in Session",
- detail: "Data fetched successfully",
- life: 3000,
- })
- } else {
- this.$toast.add({
- severity: "error",
- summary: "Fetch Data in Session",
- detail: "Data fetched failed",
- life: 3000,
- })
- }
- } else {
- rs.showErrorToast("FetchDataFromSession")
- }
- })
- },
- },
+<script setup>
+ import MQL from '@/plugins/mql.js'
+ import jsonViewer from 'vue-json-viewer'
+ import { ref } from 'vue'
+ let sessionResult = ref({})
+ let fetchKey = ref('')
+
+ function fetchSessionData() {
+ new MQL()
+ .setActivity('o.[FetchDataFromSession]')
+ .setData({ name: fetchKey.value })
+ .fetch()
+ .then((rs) => {
+ let res = rs.getActivity('FetchDataFromSession', true)
+ if (rs.isValid('FetchDataFromSession')) {
+ if (res && res.result) {
+ sessionResult.value = res.result
+ fetchKey.value = ''
+ toast.add({
+ severity: 'success',
+ summary: 'Fetch Data in Session',
+ detail: 'Data fetched successfully',
+ life: 3000,
+ })
+ } else {
+ toast.add({
+ severity: 'error',
+ summary: 'Fetch Data in Session',
+ detail: 'Data fetched failed',
+ life: 3000,
+ })
+ }
+ } else {
+ rs.showErrorToast('FetchDataFromSession')
+ }
+ })
}
</script>
diff --git a/app/src/components/sessionmanager/storeData.vue b/app/src/components/sessionmanager/storeData.vue
index 9b24eba..021e303 100644
--- a/app/src/components/sessionmanager/storeData.vue
+++ b/app/src/components/sessionmanager/storeData.vue
@@ -1,7 +1,6 @@
<template>
<div id="storeData" class="container-fluid">
<h2 class="title alt">
- <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"> </i>
Store Data in Session
</h2>
<div class="row justify-content-center">
@@ -34,7 +33,7 @@
help="Session value is automatically deleted after 5 minutes because session expiration time is set to 5 minute in `StoreDataInSession` activity."
validation="required"
/>
- <FormKit type="submit" label="Save"/>
+ <FormKit type="submit" label="Save" />
</FormKit>
</div>
</div>
@@ -42,36 +41,23 @@
</div>
</template>
-<script>
+<script setup>
import MQL from "@/plugins/mql.js"
- export default {
- data() {
- return {
- session: {},
- }
- },
- components: {},
- methods: {
- saveSessionData() {
- new MQL()
- .setActivity("o.[StoreDataInSession]")
- .setData(this.session)
- .fetch()
- .then((rs) => {
- rs.getActivity("StoreDataInSession", true)
- if (rs.isValid("StoreDataInSession")) {
- this.session = {}
- this.$toast.add({
- severity: "success",
- summary: "Data Saved ",
- detail: "Data Saved Successfully",
- life: 3000,
- })
- } else {
- rs.showErrorToast("StoreDataInSession")
- }
- })
- },
- },
+ import { ref } from "vue"
+ let session = ref({})
+ function saveSessionData() {
+ new MQL()
+ .setActivity("o.[StoreDataInSession]")
+ .setData(session.value)
+ .fetch()
+ .then((rs) => {
+ rs.getActivity("StoreDataInSession", true)
+ if (rs.isValid("StoreDataInSession")) {
+ session.value = {}
+ toast.add({ severity: "success", summary: "Data Saved ", detail: "Data Saved Successfully", life: 3000 })
+ } else {
+ rs.showErrorToast("StoreDataInSession")
+ }
+ })
}
</script>
diff --git a/app/src/components/upload-manager/uploadFile.vue b/app/src/components/upload-manager/uploadFile.vue
index dae880b..15d959d 100644
--- a/app/src/components/upload-manager/uploadFile.vue
+++ b/app/src/components/upload-manager/uploadFile.vue
@@ -1,45 +1,11 @@
<template>
<div id="uploadFile" class="container-fluid">
<h2 class="title alt">
- <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
Upload File
</h2>
<div class="row">
<div class="col-6">
<div class="box-login">
- <!-- <div class="p-card p-component">
- <div class="field">
- <div class="p-float-label">
- <input type="text" v-model="upload.cdnBaseUrl" class="p-inputtext p-component w-100"
- :class="upload.cdnBaseUrl ? 'p-filled' : ''" id="cdnBaseUrl">
- <label for="cdnBaseUrl">CDN Base Url</label>
- </div>
- </div>
- <div class="field">
- <div class="p-float-label">
- <input type="text" v-model="upload.uploadFileUrl" class="p-inputtext p-component w-100"
- :class="upload.uploadFileUrl ? 'p-filled' : ''" id="uploadFileUrl">
- <label for="uploadFileUrl">File Upload Url</label>
- </div>
- </div>
- <div class="field">
- <div class="p-float-label">
- <input type="text" v-model="upload.destinationFileUrl" class="p-inputtext p-component w-100"
- :class="upload.destinationFileUrl ? 'p-filled' : ''" id="destinationFileUrl">
- <label for="destinationFileUrl">Destination File Url</label>
- </div>
- </div>
- <div class="btn-wrapper">
- <button class="btn btn-submit" @click.prevent="uploadFile">
- <i class="isax isax-bold-document-upload"></i>
- Upload File
- </button>
- </div>
- <div class="field mt-4">
- <h3>Result</h3>
- <json-viewer :value="uploadResult" boxed :expanded="true"></json-viewer>
- </div>
- </div> -->
<FormKit
type="form"
id="registration-example"
@@ -106,46 +72,32 @@
</div>
</template>
-<script>
- import MQL from "@/plugins/mql.js"
- import jsonViewer from "vue-json-viewer"
- export default {
- data() {
- return {
- upload: {},
- uploadId: "",
- uploadResult: "",
- }
- },
- components: {
- jsonViewer,
- },
- methods: {
- uploadFile() {
- // var a = []
- // a.push(this.upload.uploadFileUrl)
- // this.upload.uploadFileUrl = a
- var a = {
- cdnBaseUrl: [this.upload.cdnBaseUrl],
- uploadFileUrl: [this.upload.uploadFileUrl],
- destinationFileUrl: [this.upload.destinationFileUrl],
+<script setup>
+ import MQL from '@/plugins/mql.js'
+ import { reactive, ref } from 'vue'
+ import jsonViewer from 'vue-json-viewer'
+ let upload = reactive({})
+ let uploadResult = ref('')
+ function uploadFile() {
+ var a = {
+ cdnBaseUrl: [upload.cdnBaseUrl],
+ uploadFileUrl: [upload.uploadFileUrl],
+ destinationFileUrl: [upload.destinationFileUrl],
+ }
+ new MQL()
+ .setActivity('o.[UploadFileUsingUM]')
+ .setData(a)
+ .fetch()
+ .then((rs) => {
+ let res = rs.getActivity('UploadFileUsingUM', true)
+ if (rs.isValid('UploadFileUsingUM')) {
+ upload.value = {}
+ uploadResult.value = res.result
+ toast.add({ severity: 'success', summary: 'File Upload Manager', detail: 'Upload Success.', life: 3000 })
+ } else {
+ rs.showErrorToast('UploadFileUsingUM')
}
- new MQL()
- .setActivity("o.[UploadFileUsingUM]")
- .setData(a)
- .fetch()
- .then((rs) => {
- let res = rs.getActivity("UploadFileUsingUM", true)
- if (rs.isValid("UploadFileUsingUM")) {
- this.upload = {}
- this.uploadResult = res.result
- this.$toast.success("Upload Success")
- } else {
- rs.showErrorToast("UploadFileUsingUM")
- }
- })
- },
- },
+ })
}
</script>
diff --git a/app/src/components/upload-manager/uploadProgessFile.vue b/app/src/components/upload-manager/uploadProgessFile.vue
index a5f0289..dc156c1 100644
--- a/app/src/components/upload-manager/uploadProgessFile.vue
+++ b/app/src/components/upload-manager/uploadProgessFile.vue
@@ -1,30 +1,9 @@
<template>
<div id="progessFile" class="container-fluid">
- <h2 class="title alt">
- <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
- Check Progress
- </h2>
+ <h2 class="title alt">Check Progress</h2>
<div class="row justify-content-center">
<div class="col-auto">
<div class="box-login">
- <!-- <div class="p-card p-component">
- <div class="field">
- <div class="p-float-label">
- <input type="text" v-model="uploadId" class="p-inputtext p-component" :class="uploadId ? 'p-filled' : ''" id="uploadId">
- <label for="uploadId">Upload Id</label>
- </div>
- </div>
- <div class="btn-wrapper">
- <button class="btn btn-submit" @click.prevent="checkUploadProgress">
- <i class="isax isax-bold-tick-circle"></i>
- Check Progress
- </button>
- </div>
- <div class="field mt-4">
- <h3>Result</h3>
- <json-viewer :value="progressResult" boxed :expanded="true"></json-viewer>
- </div>
- </div> -->
<FormKit
type="form"
id="registration-example"
@@ -55,51 +34,37 @@
</div>
</template>
-<script>
+<script setup>
import MQL from "@/plugins/mql.js"
+ import { ref } from "vue"
import jsonViewer from "vue-json-viewer"
- export default {
- data() {
- return {
- uploadId: "",
- progressResult: "",
- }
- },
- components: {
- jsonViewer,
- },
- methods: {
- checkUploadProgress() {
- new MQL()
- .setActivity("o.[CheckUploadedFileProgress]")
- .setData({ uploadFileId: this.uploadId })
- .fetch()
- .then((rs) => {
- let res = rs.getActivity("CheckUploadedFileProgress", true)
- if (rs.isValid("CheckUploadedFileProgress")) {
- if (res && res.result) {
- this.progressResult = res.result
- this.uploadId = ""
- this.$toast.add({
- severity: "success",
- summary: "Upload Progress",
- detail: "File Uploaded Successfully",
- life: 3000,
- })
- } else {
- this.$toast.add({
- severity: "error",
- summary: "Upload Progress",
- detail: "File Upload Failed",
- life: 3000,
- })
- }
- } else {
- rs.showErrorToast("CheckUploadedFileProgress")
- }
- })
- },
- },
+ let uploadId = ref("")
+ let progressResult = ref({})
+
+ function checkUploadProgress() {
+ new MQL()
+ .setActivity("o.[CheckUploadedFileProgress]")
+ .setData({ uploadFileId: uploadId.value })
+ .fetch()
+ .then((rs) => {
+ let res = rs.getActivity("CheckUploadedFileProgress", true)
+ if (rs.isValid("CheckUploadedFileProgress")) {
+ if (res && res.result) {
+ progressResult.value = res.result
+ uploadId.value = ""
+ toast.add({
+ severity: "success",
+ summary: "Upload Progress",
+ detail: "File Uploaded Successfully",
+ life: 3000,
+ })
+ } else {
+ toast.add({ severity: "error", summary: "Upload Progress", detail: "File Upload Failed", life: 3000 })
+ }
+ } else {
+ rs.showErrorToast("CheckUploadedFileProgress")
+ }
+ })
}
</script>
diff --git a/app/src/main.js b/app/src/main.js
index 294d2aa..469e9f1 100644
--- a/app/src/main.js
+++ b/app/src/main.js
@@ -43,19 +43,6 @@ vm.use(mqlOptions, {
cdnConfig: [],
})
-// axios.defaults.baseURL = baseURL
-// TODO: set axios header on login to session storage
-// axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
-
-// TODO: delete axios header on logout and clear session storage
-// delete axios.defaults.headers.common['Authorization']
-// sessionStorage.setItem(
-// 'user-token',
-// 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.qCJ-hcgSTLgkaT7kfI6--xRm4IEpPFQmMj3UZ94gNo4'
-// )
-
-// vm.use(VueLocalStorage);
-
router.beforeEach((to, from, next) => {
const nearestWithTitle = to.matched
@@ -84,14 +71,4 @@ router.beforeEach((to, from, next) => {
.forEach((tag) => document.head.appendChild(tag))
next()
})
-// axios.interceptors.request.use(function (config) {
-// // if (config.url.indexOf('/r/') !== -1) { // Check for restricted request
-// if (config.headers.common['Authorization']) {
-// } else {
-// }
-// // }
-// return config
-// }, function (error) {
-// return Promise.reject(error)
-// })
vm.mount('#app')
diff --git a/app/src/router.js b/app/src/router.js
index 705ccae..ea24f8e 100644
--- a/app/src/router.js
+++ b/app/src/router.js
@@ -1,394 +1,295 @@
-import { createRouter, createWebHashHistory } from 'vue-router'
+import { createRouter, createWebHashHistory } from "vue-router"
function loadView(view) {
- return () =>
- import(/* webpackChunkName: "view-[request]" */ `@/views/${view}.vue`)
-}
-
-function loadHashComponent(component) {
- return () =>
- import(/* webpackChunkName: "component-[request]" */ `@/components/keymappers/${component}.vue`)
-}
-
-function loadBLComponent(component) {
- return () =>
- import(/* webpackChunkName: "component-[request]" */ `@/components/BL/${component}.vue`)
-}
-
-function loadMongoComponent(component) {
- return () =>
- import(/* webpackChunkName: "component-[request]" */ `@/components/mongodbID/${component}.vue`)
-}
-
-function loadExcelComponent(component) {
- return () =>
- import(/* webpackChunkName: "component-[request]" */ `@/components/excel/${component}.vue`)
-}
-function loadUploadManagerComponent(component) {
- return () =>
- import(/* webpackChunkName: "component-[request]" */ `@/components/upload-manager/${component}.vue`)
-}
-function loadSessionManagerComponent(component) {
- return () =>
- import(/* webpackChunkName: "component-[request]" */ `@/components/sessionmanager/${component}.vue`)
-}
-function loadDownloadManagerComponent(component) {
- return () =>
- import(/* webpackChunkName: "component-[request]" */ `@/components/download-manager/${component}.vue`)
+ return () => import(/* webpackChunkName: "view-[request]" */ `@/views/${view}.vue`)
}
export default createRouter({
- history: createWebHashHistory(),
- routes: [
- {
- path: '/',
- name: 'home',
- component: loadView('Home'),
- meta: { title: 'Home', lang: 'en', icon: 'mdi mdi-home-outline' },
- },
- {
- path: '/formkitcomposition',
- name: 'FormKitComposition',
- component: loadView('FormKitCustomComposition'),
- meta: { title: 'FormKitComposition', lang: 'en', icon: 'mdi mdi-home-outline' },
- },
- {
- path: '/formkitoption',
- name: 'FormKitOption',
- component: loadView('FormKitCustomOption'),
- meta: { title: 'FormKitOption', lang: 'en', icon: 'mdi mdi-home-outline' },
- },
- {
- path: '/about',
- name: 'about',
- component: loadView('About'),
- meta: { title: 'About', lang: 'en', icon: 'mdi mdi-information-variant' },
- },
- {
- path: '/login',
- name: 'login',
- component: loadView('Login'),
- meta: { title: 'Login', lang: 'mr', icon: 'mdi mdi-account' },
- },
- {
- path: '/registration',
- name: 'registration',
- component: loadView('Registration'),
- meta: { title: 'Registration', lang: 'mr', icon: 'mdi mdi-account-edit' },
- },
- {
- path: '/mqlRequestDemo',
- name: 'mqlRequestDemo',
- component: loadView('MQLRequestDemo'),
- meta: { title: 'MQLRequestDemo', lang: 'en', icon: 'mdi mdi-presentation-play' },
- },
- {
- path: '/i18Demo',
- name: 'i18Demo',
- component: loadView('I18Demo'),
- meta: { title: 'Language Demo', lang: 'en', icon: 'mdi mdi-eject-outline' },
- },
- {
- path: '/validator',
- name: 'validator',
- component: loadView('Validator'),
- meta: { title: 'Validator', lang: 'en', icon: 'mdi mdi-check-all' },
- },
- {
- path: '/encryption',
- name: 'encryption',
- component: loadView('Encryption'),
- meta: { title: 'Encrypt', lang: 'en', icon: 'mdi mdi-laptop' },
- },
- {
- path: '/cdnUpload',
- name: 'cdnUpload',
- component: loadView('CdnUpload'),
- meta: { title: 'Cdn Upload', lang: 'en', icon: 'mdi mdi-upload' },
- },
- {
- path: '/tableDemo',
- name: 'tableDemo',
- component: loadView('TableDemo'),
- meta: { title: 'Table Demo', lang: 'en', icon: 'mdi mdi-file-table-outline' },
- },
- {
- path: '/vueMetaExample/:title',
- name: 'vueMetaExample',
- component: loadView('vueMetaExample'),
- meta: { title: 'vueMetaExample', lang: 'en', icon: 'mdi mdi-arrow-expand' },
- },
- {
- path: '/clipboard',
- name: 'clipboard',
- component: loadView('vueClipboard'),
- meta: { title: 'vueClipboard', lang: 'en', icon: 'mdi mdi-arrow-expand' },
- },
- {
- path: '/MqlAssetFDBDemo',
- name: 'MqlAssetFDBDemo',
- component: loadView('MqlAssetFDBDemo'),
- meta: {
- title: 'Mql Request For Asset FDB Demo', lang: 'en',
- icon: 'mdi mdi-database-plus',
- },
- },
- {
- path: '/sessionmgr',
- name: 'sessionmgr',
- component: loadView('SessionManager'),
- meta: {
- title: 'Session Manager Demo', lang: 'en',
- icon: 'mdi mdi-compass',
- },
- },
- {
- path: '/uploadmanager',
- name: 'uploadmanager',
- component: loadView('UploadManager'),
- meta: {
- title: 'Upload Manager Demo', lang: 'en',
- icon: 'mdi mdi-upload',
- },
- },
- {
- path: '/downloadmanager',
- name: 'downloadmanager',
- component: loadView('DownloadManager'),
- meta: {
- title: 'Download Manager Demo', lang: 'en',
- icon: 'mdi mdi-download',
- },
- },
- {
- path: '/serversidepagination',
- name: 'serversidepagination',
- component: loadView('ServerSidePagination'),
- meta: {
- title: 'Server Side Pagination Demo', lang: 'en',
- icon: 'mdi mdi-google-pages',
- },
- },
- {
- path: '/keymapper',
- name: 'keymapper',
- component: loadView('KeyMapper'),
- meta: {
- title: 'Key Mapper Demo', lang: 'en',
- icon: 'mdi mdi-sort',
- },
- },
- {
- path: '/excel',
- name: 'excel',
- component: loadView('Excel'),
- meta: {
- title: 'Excel Demo', lang: 'en',
- icon: 'mdi mdi-file-excel',
- },
- },
- {
- path: '/lastinsertedId',
- name: 'lastinsertedId',
- component: loadView('LastInsertedId'),
- meta: {
- title: 'Last Inserted Id Demo',
- icon: 'mdi mdi-border-color',
- },
- },
- {
- path: '/forloop',
- name: 'forloop',
- component: loadView('ForLoop'),
- meta: {
- title: 'For Loop Demo', lang: 'en',
- icon: 'mdi mdi-refresh',
- },
- },
- {
- path: '/sendSms',
- name: 'sendSms',
- component: loadView('sms'),
- meta: {
- title: 'SMS Demo', lang: 'en',
- icon: 'mdi mdi-comment-text-outline',
- },
- },
- {
- path: '/sendEmail',
- name: 'sendEmail',
- component: loadView('email'),
- meta: {
- title: 'Email Demo', lang: 'en',
- icon: 'mdi mdi-email',
- },
- },
- {
- path: '/sendOtp',
- name: 'sendOtp',
- component: loadView('otp'),
- meta: {
- title: 'OTP Demo', lang: 'en',
- icon: 'mdi mdi-numeric-0-box',
- },
- },
- {
- path: '/autoBL',
- name: 'autoBL',
- component: loadView('autoBL'),
- meta: {
- title: 'AutoBL Demo', lang: 'en',
- icon: 'mdi mdi-code-array',
- },
- },
- {
- path: '/updateUserDataUsingBL',
- name: 'updateUserDataUsingBL',
- component: loadView('updateUserDataUsingBL'),
- meta: {
- title: 'Update User Data Using BL Demo', lang: 'en',
- icon: 'mdi mdi-crop-free',
- },
- },
- {
- path: '/insertCustomMongoId',
- name: 'insertCustomMongoId',
- component: loadView('insertCustomMongoId'),
- meta: {
- title: 'Insert Custom Mongo Id', lang: 'en',
- icon: 'mdi mdi-code-braces',
- },
- },
- {
- path: '/classroom',
- name: 'classroom',
- component: loadView('Classroom'),
- meta: {
- title: 'Insert Custom Mongo Id', lang: 'en',
- icon: 'mdi mdi-library-books',
- },
- },
- {
- path: '/tailwindForm',
- name: 'tailwindForm',
- component: loadView('tailwindForm'),
- meta: {
- title: 'Insert Custom Mongo Id', lang: 'en',
- icon: 'mdi mdi-library-books',
- },
- },
- {
- path: '/sendStaticMessages',
- component: loadView('sendStaticMessages'),
- },
- {
- path: '/sendDynamicMessages',
- component: loadView('sendDynamicMessages'),
- },
- {
- path: '/sendStaticEmails',
- component: loadView('sendStaticEmails'),
- },
- {
- path: '/sendDynamicEmails',
- component: loadView('sendDynamicEmails'),
- },
- {
- path: '/generateOTP',
- component: loadView('generateOTP'),
- },
- {
- path: '/validateOTP',
- component: loadView('validateOTP'),
- },
- {
- path: '/hashData',
- name: 'hashData',
- component: loadHashComponent('hashData'),
- },
- {
- path: '/hashSalt',
- name: 'hashSalt',
- component: loadHashComponent('hashSalt'),
- },
- {
- path: '/encryptData',
- name: 'encrpytData',
- component: loadHashComponent('encryptData')
- },
- {
- path: '/decryptData',
- name: 'decrpytData',
- component: loadHashComponent('decryptData'),
- },
- {
- path: '/clientData',
- name: 'clientData',
- component: loadExcelComponent('clientData'),
- },
- {
- path: '/updateData',
- name: 'updateData',
- component: loadExcelComponent('updateData'),
- },
- {
- path: '/saveWActivity',
- name: 'saveWActivity',
- component: loadExcelComponent('saveWActivity'),
- },
- {
- path: '/storeData',
- name: 'storeData',
- component: loadSessionManagerComponent('storeData'),
- },
- {
- path: '/fetchData',
- name: 'fetchData',
- component: loadSessionManagerComponent('fetchData'),
- },
- {
- path: '/deleteData',
- name: 'deleteData',
- component: loadSessionManagerComponent('deleteData'),
- },
- {
- path: '/updateUser',
- name: 'updateUser',
- component: loadBLComponent('updateUser'),
- },
- {
- path: '/updateDbSave',
- name: 'updateDbSave',
- component: loadBLComponent('updateDbSave'),
- },
- {
- path: '/customID',
- name: 'customID',
- component: loadMongoComponent('customID'),
- },
- {
- path: '/hexID',
- name: 'hexID',
- component: loadMongoComponent('hexID'),
- },
- {
- path: '/uploadFile',
- name: 'uploadFile',
- component: loadUploadManagerComponent('uploadFile'),
- },
- {
- path: '/uploadProgessFile',
- name: 'uploadProgessFile',
- component: loadUploadManagerComponent('uploadProgessFile'),
- },
- {
- path: '/downloadFile',
- name: 'downloadFile',
- component: loadDownloadManagerComponent('downloadFile'),
- },
- {
- path: '/downloadProgress',
- name: 'downloadProgress',
- component: loadDownloadManagerComponent('downloadProgress'),
- },
- ],
+ history: createWebHashHistory(),
+ routes: [
+ {
+ path: "/",
+ name: "home",
+ component: loadView("Home"),
+ meta: { title: "Home", lang: "en", icon: "mdi mdi-home-outline" },
+ },
+ {
+ path: "/about",
+ name: "about",
+ component: loadView("About"),
+ meta: { title: "About", lang: "en", icon: "mdi mdi-information-variant" },
+ },
+ {
+ path: "/login",
+ name: "login",
+ component: loadView("Login"),
+ meta: { title: "Login", lang: "mr", icon: "mdi mdi-account" },
+ },
+ {
+ path: "/registration",
+ name: "registration",
+ component: loadView("Registration"),
+ meta: { title: "Registration", lang: "mr", icon: "mdi mdi-account-edit" },
+ },
+ {
+ path: "/mqlRequestDemo",
+ name: "mqlRequestDemo",
+ component: loadView("MQLRequestDemo"),
+ meta: { title: "MQLRequestDemo", lang: "en", icon: "mdi mdi-presentation-play" },
+ },
+ {
+ path: "/i18Demo",
+ name: "i18Demo",
+ component: loadView("I18Demo"),
+ meta: { title: "Language Demo", lang: "en", icon: "mdi mdi-eject-outline" },
+ },
+ {
+ path: "/validator",
+ name: "validator",
+ component: loadView("Validator"),
+ meta: { title: "Validator", lang: "en", icon: "mdi mdi-check-all" },
+ },
+ {
+ path: "/encryption",
+ name: "encryption",
+ component: loadView("Encryption"),
+ meta: { title: "Encrypt", lang: "en", icon: "mdi mdi-laptop" },
+ },
+ {
+ path: "/cdnUpload",
+ name: "cdnUpload",
+ component: loadView("CdnUpload"),
+ meta: { title: "Cdn Upload", lang: "en", icon: "mdi mdi-upload" },
+ },
+ {
+ path: "/tableDemo",
+ name: "tableDemo",
+ component: loadView("TableDemo"),
+ meta: { title: "Table Demo", lang: "en", icon: "mdi mdi-file-table-outline" },
+ },
+ {
+ path: "/vueMetaExample/:title",
+ name: "vueMetaExample",
+ component: loadView("vueMetaExample"),
+ meta: { title: "vueMetaExample", lang: "en", icon: "mdi mdi-arrow-expand" },
+ },
+ {
+ path: "/clipboard",
+ name: "clipboard",
+ component: loadView("vueClipboard"),
+ meta: { title: "vueClipboard", lang: "en", icon: "mdi mdi-arrow-expand" },
+ },
+ {
+ path: "/MqlAssetFDBDemo",
+ name: "MqlAssetFDBDemo",
+ component: loadView("MqlAssetFDBDemo"),
+ meta: {
+ title: "Mql Request For Asset FDB Demo",
+ lang: "en",
+ icon: "mdi mdi-database-plus",
+ },
+ },
+ {
+ path: "/sessionmgr",
+ name: "sessionmgr",
+ component: loadView("SessionManager"),
+ meta: {
+ title: "Session Manager Demo",
+ lang: "en",
+ icon: "mdi mdi-compass",
+ },
+ },
+ {
+ path: "/uploadmanager",
+ name: "uploadmanager",
+ component: loadView("UploadManager"),
+ meta: {
+ title: "Upload Manager Demo",
+ lang: "en",
+ icon: "mdi mdi-upload",
+ },
+ },
+ {
+ path: "/downloadmanager",
+ name: "downloadmanager",
+ component: loadView("DownloadManager"),
+ meta: {
+ title: "Download Manager Demo",
+ lang: "en",
+ icon: "mdi mdi-download",
+ },
+ },
+ {
+ path: "/serversidepagination",
+ name: "serversidepagination",
+ component: loadView("ServerSidePagination"),
+ meta: {
+ title: "Server Side Pagination Demo",
+ lang: "en",
+ icon: "mdi mdi-google-pages",
+ },
+ },
+ {
+ path: "/keymapper",
+ name: "keymapper",
+ component: loadView("KeyMapper"),
+ meta: {
+ title: "Key Mapper Demo",
+ lang: "en",
+ icon: "mdi mdi-sort",
+ },
+ },
+ {
+ path: "/excel",
+ name: "excel",
+ component: loadView("Excel"),
+ meta: {
+ title: "Excel Demo",
+ lang: "en",
+ icon: "mdi mdi-file-excel",
+ },
+ },
+ {
+ path: "/lastinsertedId",
+ name: "lastinsertedId",
+ component: loadView("LastInsertedId"),
+ meta: {
+ title: "Last Inserted Id Demo",
+ icon: "mdi mdi-border-color",
+ },
+ },
+ {
+ path: "/forloop",
+ name: "forloop",
+ component: loadView("ForLoop"),
+ meta: {
+ title: "For Loop Demo",
+ lang: "en",
+ icon: "mdi mdi-refresh",
+ },
+ },
+ {
+ path: "/sendSms",
+ name: "sendSms",
+ component: loadView("sms"),
+ meta: {
+ title: "SMS Demo",
+ lang: "en",
+ icon: "mdi mdi-comment-text-outline",
+ },
+ },
+ {
+ path: "/sendEmail",
+ name: "sendEmail",
+ component: loadView("email"),
+ meta: {
+ title: "Email Demo",
+ lang: "en",
+ icon: "mdi mdi-email",
+ },
+ },
+ {
+ path: "/sendOtp",
+ name: "sendOtp",
+ component: loadView("otp"),
+ meta: {
+ title: "OTP Demo",
+ lang: "en",
+ icon: "mdi mdi-numeric-0-box",
+ },
+ },
+ {
+ path: "/autoBL",
+ name: "autoBL",
+ component: loadView("autoBL"),
+ meta: {
+ title: "AutoBL Demo",
+ lang: "en",
+ icon: "mdi mdi-code-array",
+ },
+ },
+ {
+ path: "/updateUserDataUsingBL",
+ name: "updateUserDataUsingBL",
+ component: loadView("updateUserDataUsingBL"),
+ meta: {
+ title: "Update User Data Using BL Demo",
+ lang: "en",
+ icon: "mdi mdi-crop-free",
+ },
+ },
+ {
+ path: "/insertCustomMongoId",
+ name: "insertCustomMongoId",
+ component: loadView("insertCustomMongoId"),
+ meta: {
+ title: "Insert Custom Mongo Id",
+ lang: "en",
+ icon: "mdi mdi-code-braces",
+ },
+ },
+ {
+ path: "/classroom",
+ name: "classroom",
+ component: loadView("Classroom"),
+ meta: {
+ title: "Insert Custom Mongo Id",
+ lang: "en",
+ icon: "mdi mdi-library-books",
+ },
+ },
+ {
+ path: "/tailwindForm",
+ name: "tailwindForm",
+ component: loadView("tailwindForm"),
+ meta: {
+ title: "Insert Custom Mongo Id",
+ lang: "en",
+ icon: "mdi mdi-library-books",
+ },
+ },
+ {
+ path: "/formkitcomposition",
+ name: "FormKitComposition",
+ component: loadView("FormKitCustomComposition"),
+ meta: { title: "FormKitComposition", lang: "en", icon: "mdi mdi-home-outline" },
+ },
+ {
+ path: "/formkitoption",
+ name: "FormKitOption",
+ component: loadView("FormKitCustomOption"),
+ meta: { title: "FormKitOption", lang: "en", icon: "mdi mdi-home-outline" },
+ },
+ {
+ path: "/sendStaticMessages",
+ name: "SendStaticMessages",
+ component: loadView("sendStaticMessages"),
+ meta: { title: "sendStaticMessages", lang: "en", icon: "mdi mdi-home-outline" },
+ },
+ {
+ path: "/sendDynamicMessages",
+ name: "SendDynamicMessages",
+ component: loadView("sendDynamicMessages"),
+ meta: { title: "sendDynamicMessages", lang: "en", icon: "mdi mdi-home-outline" },
+ },
+ {
+ path: "/sendStaticEmails",
+ component: loadView("sendStaticEmails"),
+ meta: { title: "sendStaticEmails", lang: "en", icon: "mdi mdi-home-outline" },
+ },
+ {
+ path: "/sendDynamicEmails",
+ component: loadView("sendDynamicEmails"),
+ meta: { title: "sendDynamicEmails", lang: "en", icon: "mdi mdi-home-outline" },
+ },
+ {
+ path: "/generateOTP",
+ component: loadView("generateOTP"),
+ meta: { title: "generateOTP", lang: "en", icon: "mdi mdi-home-outline" },
+ },
+ {
+ path: "/validateOTP",
+ component: loadView("validateOTP"),
+ meta: { title: "validateOTP", lang: "en", icon: "mdi mdi-home-outline" },
+ },
+ ],
})
diff --git a/app/src/views/CdnUpload.vue b/app/src/views/CdnUpload.vue
index ff5031c..a2f69ae 100644
--- a/app/src/views/CdnUpload.vue
+++ b/app/src/views/CdnUpload.vue
@@ -11,21 +11,33 @@
<h3>Upload File</h3>
<div class="field mt-5">
<FormKit
- type="text"
- name="inputFileName"
- label="Input File Name"
- v-model="inputFileName"
- placeholder="File name"
- help="Enter file name"
- />
- <FormKit
- type="file"
- label="Your files"
- help="This input starts with files already “attachedâ€."
- multiple="true"
- :value="file_2"
- v-model="file"
- /><FormKit @click="cdnProfileUpload" type="submit" label="Upload" />
+ type="form"
+ id="cdn-upload-example"
+ :form-class="submitted ? 'hide' : 'show'"
+ submit-label="cdn Upload"
+ @submit="cdnProfileUpload"
+ :actions="false"
+ #default="{ value }"
+ >
+ <FormKit
+ type="text"
+ name="inputFileName"
+ label="Input File Name"
+ v-model="inputFileName"
+ placeholder="File name"
+ help="Enter file name"
+ validation="required"
+ />
+ <FormKit
+ type="file"
+ label="Your files"
+ help="This input starts with files already “attachedâ€."
+ multiple="true"
+ :value="file_2"
+ v-model="file"
+ validation="required"
+ /><FormKit type="submit" label="Upload" />
+ </FormKit>
</div>
<div v-if="uploadedFilePath">
<h3>cdnServer</h3>
@@ -57,60 +69,56 @@
</div>
</template>
-<script>
+<script setup>
import MQLCdn from "@/plugins/mqlCdn.js"
- export default {
- data() {
- return {
- url: "https://testcdncs.mkcl.org/upload",
- inputFileName: "",
- fileURL: "",
- file: "",
- uploadedFilePath: "",
- }
- },
- methods: {
- cdnProfileUpload() {
- let formData = new FormData()
- formData.append("file", this.file[0].file) // append your file as 'file' in formdata.
- new MQLCdn()
- .enablePageLoader(true)
- // FIXED: change this to directory path
- .setDirectoryPath("/demoFolder") // (optional field) if you want to save file to specific directory path
- .setFormData(formData) // (required) sets file data
- .setFileName(this.inputFileName) // (optional field) if you want to set name to file that is being uploaded
- // FIXED: pass buckeyKey instead of name
- .setBucketKey("1TxYD2KhMcczFlxXntsueOYN46J") // (required) valid bucket key need to set in which file will be uploaded.
- .setPurposeId("1TxY9TS4uzp8Ivyo0eKPpo1g2Og") // (required) valid purposeId need to set in which file will be uploaded.
- .setClientId("1TxY9TS4uzp8Ivyo0eKPpo1g2Og") // (required) valid purposeId need to set in which file will be uploaded.
- .uploadFile("uploadtBtn")
- .then((res) => {
- // (required) this will upload file takes element id (optional param) which will be blocked while file upload..
- if (res.isValid()) {
- this.uploadedFilePath = res.uploadedFileURL() // returns uploaded file url..
- this.$toast.add({ severity: "success", summary: "File", detail: "file uploaded.", life: 3000 })
- } else {
- res.showErrorToast()
- }
- })
- },
- downloadFile() {
- if (this.fileURL !== "") {
- new MQLCdn()
- .setCDNPath(this.fileURL) // (required) set a filepath whihch needs to be download.
- .setBucketKey("1TxYD2KhMcczFlxXntsueOYN46J")
- .setPurposeId("1TxY9TS4uzp8Ivyo0eKPpo1g2Og") // (required) valid purposeId need to set in which file will be uploaded.
- .setClientId("1TxY9TS4uzp8Ivyo0eKPpo1g2Og") // (required) if you are providing relative path
- .enablePageLoader(true)
- .downloadFile("downloadBtn")
- .then((res) => {
- // (required) this will take elemnt id (optional) which will be blocked while file being downloaded.
- if (!res.isValid()) {
- res.showErrorToast()
- }
- })
+ import { ref } from "vue"
+ import { createToaster } from "@meforma/vue-toaster"
+ const toaster = createToaster({ position: "top-right", duration: 3000 })
+ let inputFileName = ref("")
+ let fileURL = ref("")
+ let file = ref("")
+ let uploadedFilePath = ref("")
+
+ function cdnProfileUpload() {
+ let formData = new FormData()
+ console.log("ss", file._rawValue[0].file)
+ formData.append("file", file._rawValue[0].file) // append your file as 'file' in formdata.
+ new MQLCdn()
+ .enablePageLoader(true)
+ // FIXED: change this to directory path
+ .setDirectoryPath("/demoFolder") // (optional field) if you want to save file to specific directory path
+ .setFormData(formData) // (required) sets file data
+ .setFileName(inputFileName.value) // (optional field) if you want to set name to file that is being uploaded
+ // FIXED: pass buckeyKey instead of name
+ .setBucketKey("1TxYD2KhMcczFlxXntsueOYN46J") // (required) valid bucket key need to set in which file will be uploaded.
+ .setPurposeId("1TxY9TS4uzp8Ivyo0eKPpo1g2Og") // (required) valid purposeId need to set in which file will be uploaded.
+ .setClientId("1TxY9TS4uzp8Ivyo0eKPpo1g2Og") // (required) valid purposeId need to set in which file will be uploaded.
+ .uploadFile("uploadtBtn")
+ .then((res) => {
+ // (required) this will upload file takes element id (optional param) which will be blocked while file upload..
+ if (res.isValid()) {
+ uploadedFilePath = res.uploadedFileURL() // returns uploaded file url..
+ toaster.success("file uploaded.")
+ } else {
+ res.showErrorToast()
}
- },
- },
+ })
+ }
+ function downloadFile() {
+ if (fileURL !== "") {
+ new MQLCdn()
+ .setCDNPath(fileURL.value) // (required) set a filepath whihch needs to be download.
+ .setBucketKey("1TxYD2KhMcczFlxXntsueOYN46J")
+ .setPurposeId("1TxY9TS4uzp8Ivyo0eKPpo1g2Og") // (required) valid purposeId need to set in which file will be uploaded.
+ .setClientId("1TxY9TS4uzp8Ivyo0eKPpo1g2Og") // (required) if you are providing relative path
+ .enablePageLoader(true)
+ .downloadFile("downloadBtn")
+ .then((res) => {
+ // (required) this will take elemnt id (optional) which will be blocked while file being downloaded.
+ if (!res.isValid()) {
+ res.showErrorToast()
+ }
+ })
+ }
}
</script>
diff --git a/app/src/views/Classroom.vue b/app/src/views/Classroom.vue
index 2141eea..186b9dd 100644
--- a/app/src/views/Classroom.vue
+++ b/app/src/views/Classroom.vue
@@ -133,95 +133,92 @@
</div>
</template>
-<script>
+
+<script setup>
+import { reactive, ref } from 'vue';
import MQL from '@/plugins/mql.js'
-export default {
- data() {
- return {
- classroom: {},
- fclassroom: {},
- isoclassroom: {},
- fisoclassroom: {},
- classroomResult: null,
- isoClassroomResult: []
- }
- },
- methods: {
- saveClassroom() {
- this.classroom.startDate = Math.round(
- new Date(this.classroom.startDate).getTime() / 1000
+ let classroom = reactive({})
+ let fclassroom = reactive({})
+ let isoclassroom = reactive({})
+ let fisoclassroom = reactive({})
+ let classroomResult = ref({})
+ let isoClassroomResult = ref({})
+
+ function saveClassroom() {
+ classroom.startDate = Math.round(
+ new Date(classroom.startDate).getTime() / 1000
)
+
new MQL()
.setActivity('o.[SaveClassroom]')
- .setData(this.classroom)
+ .setData(classroom)
.fetch()
.then((rs) => {
if (rs.isValid('SaveClassroom')) {
- this.classroom = {}
- this.$toast.add({severity:'success', summary: 'Classroom', detail:'Classroom added successfully', life: 3000})
+ classroom.value = {}
+ toast.add({severity:'success', summary: 'Classroom', detail:'Classroom added successfully', life: 3000})
} else {
rs.showErrorToast('SaveClassroom')
}
})
- },
- fetchClassroom() {
- this.fclassroom.sdate = Math.round(
- new Date(this.fclassroom.sdate).getTime() / 1000
+ }
+ function fetchClassroom() {
+ fclassroom.sdate = Math.round(
+ new Date(fclassroom.sdate).getTime() / 1000
)
- this.fclassroom.edate = Math.round(
- new Date(this.fclassroom.edate).getTime() / 1000
+ fclassroom.edate = Math.round(
+ new Date(fclassroom.edate).getTime() / 1000
)
new MQL()
.setActivity('o.[FetchClassroom]')
- .setData(this.fclassroom)
+ .setData(fclassroom)
.fetch()
.then((rs) => {
let res = rs.getActivity('FetchClassroom', true)
if (rs.isValid('FetchClassroom')) {
- this.fclassroom = {}
- this.classroomResult = res.result
- for (var i = 0; i < this.classroomResult.length; i++) {
- this.classroomResult[i].startDate = new Date(
- this.classroomResult[i].startDate * 1000
+ fclassroom = {}
+ classroomResult.value = res.result
+ for (var i = 0; i < classroomResult.length; i++) {
+ classroomResult[i].startDate = new Date(
+ classroomResult[i].startDate * 1000
)
}
} else {
rs.showErrorToast('FetchClassroom')
}
})
- },
- saveClassroomWithISODate() {
- this.isoclassroom.startDate = new Date(
- this.isoclassroom.startDate
+ }
+ function saveClassroomWithISODate() {
+ isoclassroom.startDate = new Date(
+ isoclassroom.startDate
).toISOString()
new MQL()
.setActivity('o.[SaveClassroomWithISODate]')
- .setData(this.isoclassroom)
+ .setData(isoclassroom)
.fetch()
.then((rs) => {
if (rs.isValid('SaveClassroomWithISODate')) {
- this.isoclassroom = {}
- this.$toast.add({severity:'success', summary: 'Classroom', detail:'Classroom added successfully', life: 3000})
+ isoclassroom.value = {}
+ toast.add({severity:'success', summary: 'Classroom', detail:'Classroom added successfully', life: 3000})
} else {
rs.showErrorToast('SaveClassroomWithISODate')
}
})
- },
- fetchClassroomWithISODate() {
+ }
+ function fetchClassroomWithISODate() {
new MQL()
.setActivity('o.[FetchClassroomWithISODate]')
- .setData(this.fisoclassroom)
+ .setData(fisoclassroom)
.fetch()
.then((rs) => {
let res = rs.getActivity('FetchClassroomWithISODate', true)
if (rs.isValid('FetchClassroomWithISODate')) {
- this.fisoclassroom = {}
- this.isoClassroomResult = res.result
+ fisoclassroom.value = {}
+ isoClassroomResult.value = res.result
} else {
rs.showErrorToast('FetchClassroomWithISODate')
}
})
}
- }
-}
+
</script>
\ No newline at end of file
diff --git a/app/src/views/DownloadManager.vue b/app/src/views/DownloadManager.vue
index 73b6485..c290e23 100644
--- a/app/src/views/DownloadManager.vue
+++ b/app/src/views/DownloadManager.vue
@@ -1,94 +1,30 @@
<template>
- <div id="downloadManger" class="container-fluid">
- <h2 class="title alt">
- <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
- Download Manager
- </h2>
- <div class="row justify-content-center">
- <div class="col-4">
- <div class="box-login clickable" @click.prevent="downloadFilePush">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-document-download"></i>
- </div>
- <div class="bx-login-name">
- Download File
- </div>
- </div>
- </div>
- </div>
- <div class="col-4">
- <div class="box-login clickable" @click.prevent="downloadProgressPush">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-document-cloud"></i>
- </div>
- <div class="bx-login-name">
- Check Download Progress
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
+ <div id="downloadManger" class="container-fluid">
+ <h2 class="title alt">
+ <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
+ Download Manager
+ </h2>
+ <div class="row justify-content-center">
+ <div class="tabs">
+ <a class="tab tab-bordered" :class="active == 0 ? 'tab-active' : ''" @click.prevent="active = 0"
+ >Download File</a
+ >
+ <a class="tab tab-bordered" :class="active == 1 ? 'tab-active' : ''" @click.prevent="active = 1"
+ >Check Download Progress</a
+ >
+ </div>
+ </div>
+ <div class="mt-3">
+ <download-file v-if="active == 0"></download-file>
+ <download-progress v-if="active == 1"></download-progress>
+ </div>
+ </div>
</template>
-<script>
-import MQL from '@/plugins/mql.js'
-export default {
- data() {
- return {
- download: {},
- downloadId: '',
- downloadResult: '',
- progressResult: ''
- }
- },
- methods: {
- downloadFilePush() {
- this.$router.push('/downloadFile')
- },
- downloadProgressPush() {
- this.$router.push('/downloadProgress')
- },
- downloadFile() {
- var a = []
- a.push(this.download.downloadFileUrl)
- this.download.downloadFileUrl = a
- new MQL()
- .setActivity('o.[DownloadFileUsingDM]')
- .setData(this.download)
- .fetch()
- .then((rs) => {
- let res = rs.getActivity('DownloadFileUsingDM', true)
- if (rs.isValid('DownloadFileUsingDM')) {
- this.download = {}
- this.downloadResult = res.result
- alert('File downloaded successfully')
- } else {
- rs.showErrorToast('DownloadFileUsingDM')
- }
- })
- },
- checkDownloadProgress() {
- new MQL()
- .setActivity('o.[CheckDownloadedFileProgress]')
- .setData({ downloadFileId: this.downloadId })
- .fetch()
- .then((rs) => {
- let res = rs.getActivity('CheckDownloadedFileProgress', true)
- if (rs.isValid('CheckDownloadedFileProgress')) {
- if (res && res.result) {
- this.progressResult = res.result
- this.downloadId = ''
- } else {
- alert('Progress checking failed')
- }
- } else {
- rs.showErrorToast('CheckDownloadedFileProgress')
- }
- })
- }
- }
-}
-</script>
\ No newline at end of file
+<script setup>
+ import { ref } from "vue"
+ import downloadFile from "../components/download-manager/downloadFile.vue"
+ import downloadProgress from "../components/download-manager/downloadProgress.vue"
+
+ const active = ref(0)
+</script>
diff --git a/app/src/views/Encryption.vue b/app/src/views/Encryption.vue
index 74fc2bc..c46d82c 100644
--- a/app/src/views/Encryption.vue
+++ b/app/src/views/Encryption.vue
@@ -45,7 +45,7 @@
</div>
<div class="divider lg:divider-horizontal">OR</div>
<div class="grid flex-grow h-50 card bg-base-300 rounded-box place-items-center">
- <h3 >Object encryption/decryption</h3>
+ <h3>Object encryption/decryption</h3>
<div class="flex flex-col w-full mt-4">
<div class="grid h-50 card bg-base-300 rounded-box place-items-center">
<FormKit
@@ -85,43 +85,37 @@
</div>
</div>
</template>
-
-<script>
+<script setup>
import CryptoJS from "crypto-js"
- export default {
- data() {
- return {
- encryptInputText: "",
- encryptOutputText: "",
- decryptInputText: "",
- decryptOutputText: "",
- encryptInputObject: "",
- encryptOutputObject: "",
- decryptInputObject: "",
- decryptOutputObject: null,
- key: "SECRETKEY",
- }
- },
- methods: {
- encryptText() {
- var op = CryptoJS.AES.encrypt(this.encryptInputText, this.key)
- this.encryptOutputText = op.toString()
- },
- decryptText() {
- var bytes = CryptoJS.AES.decrypt(this.encryptOutputText.toString(), this.key)
- var plaintext = bytes.toString(CryptoJS.enc.Utf8)
- this.decryptOutputText = plaintext
- },
- encryptObj() {
- var ip = this.encryptInputObject
- var op = CryptoJS.AES.encrypt(JSON.stringify(ip), this.key)
- this.encryptOutputObject = op.toString()
- },
- decryptObj() {
- var bytes = CryptoJS.AES.decrypt(this.encryptOutputObject.toString(), this.key)
- this.decryptOutputObject = JSON.parse(bytes.toString(CryptoJS.enc.Utf8))
- },
- },
+ import { ref } from "vue"
+
+ let encryptInputText = ref("")
+ let encryptOutputText = ref("")
+ let decryptInputText = ref("")
+ let decryptOutputText = ref("")
+ let encryptInputObject = ref({})
+ let encryptOutputObject = ref({})
+ let decryptInputObject = ref({})
+ let decryptOutputObject = ref({})
+ let key = ref("SECRETKEY")
+
+ function encryptText() {
+ var op = CryptoJS.AES.encrypt(encryptInputText.value, key.value)
+ encryptOutputText.value = op.toString()
+ }
+ function decryptText() {
+ var bytes = CryptoJS.AES.decrypt(encryptOutputText.value, key.value)
+ var plaintext = bytes.toString(CryptoJS.enc.Utf8)
+ decryptOutputText.value = plaintext
+ }
+ function encryptObj() {
+ var ip = encryptInputObject.value
+ var op = CryptoJS.AES.encrypt(JSON.stringify(ip), key.value)
+ encryptOutputObject.value = op.toString()
+ }
+ function decryptObj() {
+ var bytes = CryptoJS.AES.decrypt(encryptOutputObject.value, key.value)
+ decryptOutputObject.value = JSON.parse(bytes.toString(CryptoJS.enc.Utf8))
}
</script>
diff --git a/app/src/views/Excel.vue b/app/src/views/Excel.vue
index 087b72c..8b6fffa 100644
--- a/app/src/views/Excel.vue
+++ b/app/src/views/Excel.vue
@@ -1,123 +1,42 @@
<template>
-<div class="container-fluid" id="excel">
- <h2 class="title alt">
- <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
- Excel Plugins
- </h2>
- <div class="row justify-content-center">
- <div class="col-4">
- <div class="box-login clickable" @click.prevent="clientDataPush">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-data"></i>
- </div>
- <div class="bx-login-name">
- Client Data
- </div>
- </div>
- </div>
- </div>
- <div class="col-4">
- <div class="box-login clickable" @click.prevent="updateDataPush">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-global-refresh"></i>
- </div>
- <div class="bx-login-name">
- Update Data
- </div>
- </div>
- </div>
- </div>
- <div class="col-4">
- <div class="box-login clickable" @click.prevent="saveWActivityPush">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-document-text-1"></i>
- </div>
- <div class="bx-login-name">
- Save with Activity
- </div>
- </div>
- </div>
- </div>
- </div>
-</div>
+ <div class="container-fluid" id="excel">
+ <h2 class="title alt">
+ <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
+ Excel Plugins
+ </h2>
+ <div class="row justify-content-center">
+ <div class="tabs">
+ <a class="tab tab-bordered" :class="active == 0 ? 'tab-active' : ''" @click.prevent="active = 0">Client Data</a>
+ <a class="tab tab-bordered" :class="active == 1 ? 'tab-active' : ''" @click.prevent="active = 1">Update Data</a>
+ <a class="tab tab-bordered" :class="active == 2 ? 'tab-active' : ''" @click.prevent="active = 2"
+ >Save with Activity</a
+ >
+ </div>
+ <div class="mt-3">
+ <client-data v-if="active == 0"></client-data>
+ <update-data v-if="active == 1"></update-data>
+ <save-w-activity v-if="active == 2"></save-w-activity>
+ </div>
+ </div>
+ </div>
</template>
-<script>
-import MQL from '@/plugins/mql.js'
-export default {
- data () {
- return {
- empList: [
- { name: 'vikram', age: 27, address: 'pune' },
- { name: 'kunal', age: 28, address: 'satara' },
- { name: 'akshay', age: 29, address: 'mumbai' }
- ],
- url: '',
- excel: {}
- }
- },
- components: {
- },
- methods: {
- clientDataPush () {
- this.$router.push('/clientData')
- },
- updateDataPush () {
- this.$router.push('/updateData')
- },
- saveWActivityPush () {
- this.$router.push('/saveWActivity')
- },
+<script setup>
+ import { ref } from "vue"
+ import clientData from "../components/excel/clientData.vue"
+ import updateData from "../components/excel/updateData.vue"
+ import saveWActivity from "../components/excel/saveWActivity.vue"
- saveClientDataUsingExcel () {
- new MQL()
- .setActivity('o.[SaveClientDataUsingExcel]')
- .setData(this.empList)
- .fetch()
- .then((rs) => {
- rs.getActivity('SaveClientDataUsingExcel', true)
- if (rs.isValid('SaveClientDataUsingExcel')) {
- this.$toast.add({severity:'success', summary: 'Data Saved ', detail:'Employees Data Saved Successfully', life: 3000})
- } else {
- rs.showErrorToast('SaveClientDataUsingExcel')
- }
- })
- },
- saveExcelDataUsingActivity () {
- new MQL()
- .setActivity('o.[SaveActivityDataUsingExcel]')
- .setData({ excelURL: this.url })
- .fetch()
- .then((rs) => {
- rs.getActivity('SaveActivityDataUsingExcel', true)
- if (rs.isValid('SaveActivityDataUsingExcel')) {
- this.$toast.add({severity:'success', summary: 'Data Saved ', detail:'Excel data saved successfully using activity', life: 3000})
- this.url = ''
- } else {
- rs.showErrorToast('SaveActivityDataUsingExcel')
- }
- })
- },
- updateData () {
- this.excel.age = 30
- this.excel.address = 'pune'
- new MQL()
- .setActivity('o.[UpdateDataUsingExcel]')
- .setData([this.excel])
- .fetch()
- .then((rs) => {
- rs.getActivity('UpdateDataUsingExcel', true)
- if (rs.isValid('UpdateDataUsingExcel')) {
- this.$toast.add({severity:'success', summary: 'Data Saved ', detail:'Excel data updated successfully', life: 3000})
- this.excel = {}
- } else {
- rs.showErrorToast('UpdateDataUsingExcel')
- }
- })
- }
- }
-}
-</script>
\ No newline at end of file
+ const active = ref(0)
+ const items = ref([
+ {
+ label: "Save Client Data",
+ },
+ {
+ label: "Update Data",
+ },
+ {
+ label: "Save excel data",
+ },
+ ])
+</script>
diff --git a/app/src/views/ForLoop.vue b/app/src/views/ForLoop.vue
index 01c0537..e61a7ba 100644
--- a/app/src/views/ForLoop.vue
+++ b/app/src/views/ForLoop.vue
@@ -1,70 +1,71 @@
<template>
-<div class="container-fluid">
- <h2 class="title alt">
- <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
- Save client data
- </h2>
- <div class="subtext">
- This client data is saved in "Employee" collection of "cs playground"
- database using for loop plugin
- </div>
- <div class="row justify-content-center">
- <div class="col-6">
- <div class="box-login">
- <div class="p-card p-component">
- <DataTable v-if="empList && empList.length > 0" :value="empList">
- <Column field="name" header="name"></Column>
- <Column field="age" header="age"></Column>
- <Column field="address" header="address"></Column>
- </DataTable>
- <div class="empty-state" v-else>Records not found</div>
- <div class="btn-wrapper">
- <button class="btn btn-submit" @click="saveClientDataUsingForLoop()">
- <i class="isax isax-bold-tick-circle"></i>
- Save
- </button>
- </div>
- </div>
- </div>
- </div>
- </div>
-</div>
+ <div class="container-fluid">
+ <h2 class="title alt">
+ <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
+ Save client data
+ </h2>
+ <div class="subtext">
+ This client data is saved in "Employee" collection of "cs playground" database using for loop plugin
+ </div>
+ <div class="row justify-content-center">
+ <div class="col-6">
+ <div class="box-login">
+ <div class="p-card p-component">
+ <table class="table w-full" v-if="empList && empList.length > 0">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Address</th>
+ <th>age</th>
+ </tr>
+ </thead>
+ <tbody v-for="(item, index) in empList" v-bind:key="index">
+ <tr>
+ <th>{{ item.name }}</th>
+ <th>{{ item.address }}</th>
+ <td>{{ item.age }}</td>
+ </tr>
+ </tbody>
+ </table>
+ <div class="empty-state" v-else>Records not found</div>
+ <div class="btn-wrapper">
+ <FormKit @click="saveClientDataUsingForLoop" type="submit" label="Save" />
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
-<script>
-import MQL from '@/plugins/mql.js'
-export default {
- data () {
- return {
- empList: [
- { name: 'vikram', age: 27, address: 'pune' },
- { name: 'kunal', age: 28, address: 'satara' },
- { name: 'akshay', age: 29, address: 'mumbai' }
- ]
- }
- },
- methods: {
- saveClientDataUsingForLoop () {
- new MQL()
- .setActivity('o.[SaveClientDataUsingForLoop]')
- .setData(this.empList)
- .fetch()
- .then((rs) => {
- rs.getActivity('SaveClientDataUsingForLoop', true)
- if (rs.isValid('SaveClientDataUsingForLoop')) {
- this.$toast.add({severity:'success', summary: 'Data Saved ', detail:'Employees data saved successfully', life: 3000})
- } else {
- rs.showErrorToast('SaveClientDataUsingForLoop')
- }
- })
- }
- }
-}
+<script setup>
+ import MQL from "@/plugins/mql.js"
+ import { ref } from "vue"
+ import { createToaster } from "@meforma/vue-toaster"
+ const toaster = createToaster({ position: "top-right", duration: 3000 })
+ let empList = ref([
+ { name: "somnathg", age: 26, address: "pune" },
+ { name: "prajwalp", age: 28, address: "pune" },
+ { name: "reshmab", age: 29, address: "pune" },
+ ])
+ function saveClientDataUsingForLoop() {
+ new MQL()
+ .setActivity("o.[SaveClientDataUsingForLoop]")
+ .setData(empList.value)
+ .fetch()
+ .then((rs) => {
+ rs.getActivity("SaveClientDataUsingForLoop", true)
+ if (rs.isValid("SaveClientDataUsingForLoop")) {
+ toaster.success("Employees data saved successfully.")
+ } else {
+ rs.showErrorToast("SaveClientDataUsingForLoop")
+ }
+ })
+ }
</script>
-
<style lang="scss" scoped>
-.subtext {
- margin-top: 0.75rem;
- margin-left: 3rem;
-}
-</style>
\ No newline at end of file
+ .subtext {
+ margin-top: 0.75rem;
+ margin-left: 3rem;
+ }
+</style>
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
index 5840dd5..f4c50ac 100644
--- a/app/src/views/Home.vue
+++ b/app/src/views/Home.vue
@@ -1,500 +1,428 @@
<template>
- <div class="box">
- <h1 class="title">
- GoLang FullStack
- </h1>
- <p class="desc">
- LIST OF CORE FUNCTIONALITIES
- </p>
- <div class="row align-items-center">
- <div class="col-3">
- <div class="bx-card">
- <div class="p-card p-component" @click="$router.push({name: 'login'})">
- <div class="icon-holder">
- <i class="isax isax-bold-login"></i>
- </div>
- <div class="bx-card-name">
- Login
- <i class="isax isax-bold-arrow-right"></i>
- </div>
- <div class="bx-card-desc">
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.
- </div>
- </div>
- </div>
- </div>
- <div class="col-3" @click="$router.push({name: 'registration'})">
- <div class="bx-card" >
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-edit-2"></i>
- </div>
- <div class="bx-card-name">
- Registration
- <i class="isax isax-bold-arrow-right"></i>
- </div>
- <div class="bx-card-desc">
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="bx-card" @click="$router.push({name: 'mqlRequestDemo'})">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-cloud-change"></i>
- </div>
- <div class="bx-card-name">
- Mql Request
- <i class="isax isax-bold-arrow-right"></i>
- </div>
- <div class="bx-card-desc">
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="bx-card" @click="$router.push({name: 'i18Demo'})">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-translate"></i>
- </div>
- <div class="bx-card-name">
- i18
- <i class="isax isax-bold-arrow-right"></i>
- </div>
- <div class="bx-card-desc">
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="bx-card" @click="$router.push({name: 'validator'})">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-tick-circle"></i>
- </div>
- <div class="bx-card-name">
- Validator
- <i class="isax isax-bold-arrow-right"></i>
- </div>
- <div class="bx-card-desc">
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="bx-card" @click="$router.push({name: 'encryption'})">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-lock-1"></i>
- </div>
- <div class="bx-card-name">
- Encryption
- <i class="isax isax-bold-arrow-right"></i>
- </div>
- <div class="bx-card-desc">
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="bx-card" @click="$router.push({name: 'cdnUpload'})">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-arrow-up"></i>
- </div>
- <div class="bx-card-name">
- CDN Upload
- <i class="isax isax-bold-arrow-right"></i>
- </div>
- <div class="bx-card-desc">
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="bx-card" @click="$router.push({name: 'tableDemo'})">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-stickynote"></i>
- </div>
- <div class="bx-card-name">
- Table
- <i class="isax isax-bold-arrow-right"></i>
- </div>
- <div class="bx-card-desc">
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="bx-card" @click="vueMeta()">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-menu-board"></i>
- </div>
- <div class="bx-card-name">
- Vue Meta Example
- <i class="isax isax-bold-arrow-right"></i>
- </div>
- <div class="bx-card-desc">
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="bx-card" @click="$router.push({name: 'MqlAssetFDBDemo'})">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-3d-cube-scan"></i>
- </div>
- <div class="bx-card-name">
- Mql Asset FDB
- <i class="isax isax-bold-arrow-right"></i>
- </div>
- <div class="bx-card-desc">
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="bx-card" @click="$router.push({name: 'sessionmgr'})">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-check"></i>
- </div>
- <div class="bx-card-name">
- Session Manager
- <i class="isax isax-bold-arrow-right"></i>
- </div>
- <div class="bx-card-desc">
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="bx-card" @click="$router.push({name: 'uploadmanager'})">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-document-upload"></i>
- </div>
- <div class="bx-card-name">
- Upload Manager
- <i class="isax isax-bold-arrow-right"></i>
- </div>
- <div class="bx-card-desc">
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="bx-card" @click="$router.push({name: 'downloadmanager'})">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-document-download"></i>
- </div>
- <div class="bx-card-name">
- Download Manager
- <i class="isax isax-bold-arrow-right"></i>
- </div>
- <div class="bx-card-desc">
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="bx-card" @click="$router.push({name: 'serversidepagination'})">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-element-3"></i>
- </div>
- <div class="bx-card-name">
- Server Side Pagination
- <i class="isax isax-bold-arrow-right"></i>
- </div>
- <div class="bx-card-desc">
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="bx-card" @click="$router.push({name: 'keymapper'})">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-keyboard-open"></i>
- </div>
- <div class="bx-card-name">
- Key Mapper
- <i class="isax isax-bold-arrow-right"></i>
- </div>
- <div class="bx-card-desc">
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="bx-card" @click="$router.push({name: 'excel'})">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-document-1"></i>
- </div>
- <div class="bx-card-name">
- Excel Plugin
- <i class="isax isax-bold-arrow-right"></i>
- </div>
- <div class="bx-card-desc">
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="bx-card" @click="$router.push({name: 'lastinsertedId'})">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-note"></i>
- </div>
- <div class="bx-card-name">
- Last Insert ID
- <i class="isax isax-bold-arrow-right"></i>
- </div>
- <div class="bx-card-desc">
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="bx-card" @click="$router.push({name: 'forloop'})">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-refresh"></i>
- </div>
- <div class="bx-card-name">
- For Loop
- <i class="isax isax-bold-arrow-right"></i>
- </div>
- <div class="bx-card-desc">
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="bx-card" @click="$router.push({name: 'sendSms'})">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-sms-tracking"></i>
- </div>
- <div class="bx-card-name">
- Send SMS
- <i class="isax isax-bold-arrow-right"></i>
- </div>
- <div class="bx-card-desc">
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="bx-card" @click="$router.push({name: 'sendEmail'})">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-directbox-send"></i>
- </div>
- <div class="bx-card-name">
- Send Email
- <i class="isax isax-bold-arrow-right"></i>
- </div>
- <div class="bx-card-desc">
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="bx-card" @click="$router.push({name: 'sendOtp'})">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-notification-status"></i>
- </div>
- <div class="bx-card-name">
- Send OTP
- <i class="isax isax-bold-arrow-right"></i>
- </div>
- <div class="bx-card-desc">
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="bx-card" @click="$router.push({name: 'autoBL'})">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-note-1"></i>
- </div>
- <div class="bx-card-name">
- Auto BL
- <i class="isax isax-bold-arrow-right"></i>
- </div>
- <div class="bx-card-desc">
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="bx-card" @click="$router.push({name: 'updateUserDataUsingBL'})">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-refresh"></i>
- </div>
- <div class="bx-card-name">
- Update using BL
- <i class="isax isax-bold-arrow-right"></i>
- </div>
- <div class="bx-card-desc">
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="bx-card" @click="$router.push({name: 'insertCustomMongoId'})">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-data"></i>
- </div>
- <div class="bx-card-name">
- Custom Mongo ID
- <i class="isax isax-bold-arrow-right"></i>
- </div>
- <div class="bx-card-desc">
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="bx-card" @click="$router.push({name: 'classroom'})">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-profile-2user"></i>
- </div>
- <div class="bx-card-name">
- Classroom
- <i class="isax isax-bold-arrow-right"></i>
- </div>
- <div class="bx-card-desc">
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="bx-card" @click="$router.push({name: 'clipboard'})">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-profile-2user"></i>
- </div>
- <div class="bx-card-name">
- Vue Clipboard
- <i class="isax isax-bold-arrow-right"></i>
- </div>
- <div class="bx-card-desc">
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="bx-card" @click="$router.push({name: 'FormKitComposition'})">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-profile-2user"></i>
- </div>
- <div class="bx-card-name">
- FormKit Custom Components (CompositionAPI)
- <i class="isax isax-bold-arrow-right"></i>
- </div>
- <div class="bx-card-desc">
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.
- </div>
- </div>
- </div>
- </div><div class="col-3">
- <div class="bx-card" @click="$router.push({name: 'FormKitOption'})">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-profile-2user"></i>
- </div>
- <div class="bx-card-name">
- FormKit Custom Components (OptionAPI)
- <i class="isax isax-bold-arrow-right"></i>
- </div>
- <div class="bx-card-desc">
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="bx-card" @click="$router.push({name: 'tailwindForm'})">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-profile-2user"></i>
- </div>
- <div class="bx-card-name">
- Tailwind Testing
- <i class="isax isax-bold-arrow-right"></i>
- </div>
- <div class="bx-card-desc">
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
+ <div class="box">
+ <h1 class="title">GoLang FullStack</h1>
+ <p class="desc">LIST OF CORE FUNCTIONALITIES</p>
+ <div class="row align-items-center">
+ <div class="col-3">
+ <div class="bx-card">
+ <div class="p-card p-component" @click="$router.push({ name: 'login' })">
+ <div class="icon-holder">
+ <i class="isax isax-bold-login"></i>
+ </div>
+ <div class="bx-card-name">
+ Login
+ <i class="isax isax-bold-arrow-right"></i>
+ </div>
+ <div class="bx-card-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.</div>
+ </div>
+ </div>
+ </div>
+ <div class="col-3" @click="$router.push({ name: 'registration' })">
+ <div class="bx-card">
+ <div class="p-card p-component">
+ <div class="icon-holder">
+ <i class="isax isax-bold-edit-2"></i>
+ </div>
+ <div class="bx-card-name">
+ Registration
+ <i class="isax isax-bold-arrow-right"></i>
+ </div>
+ <div class="bx-card-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.</div>
+ </div>
+ </div>
+ </div>
+ <div class="col-3">
+ <div class="bx-card" @click="$router.push({ name: 'mqlRequestDemo' })">
+ <div class="p-card p-component">
+ <div class="icon-holder">
+ <i class="isax isax-bold-cloud-change"></i>
+ </div>
+ <div class="bx-card-name">
+ Mql Request
+ <i class="isax isax-bold-arrow-right"></i>
+ </div>
+ <div class="bx-card-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.</div>
+ </div>
+ </div>
+ </div>
+ <div class="col-3">
+ <div class="bx-card" @click="$router.push({ name: 'i18Demo' })">
+ <div class="p-card p-component">
+ <div class="icon-holder">
+ <i class="isax isax-bold-translate"></i>
+ </div>
+ <div class="bx-card-name">
+ i18
+ <i class="isax isax-bold-arrow-right"></i>
+ </div>
+ <div class="bx-card-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.</div>
+ </div>
+ </div>
+ </div>
+ <div class="col-3">
+ <div class="bx-card" @click="$router.push({ name: 'validator' })">
+ <div class="p-card p-component">
+ <div class="icon-holder">
+ <i class="isax isax-bold-tick-circle"></i>
+ </div>
+ <div class="bx-card-name">
+ Validator
+ <i class="isax isax-bold-arrow-right"></i>
+ </div>
+ <div class="bx-card-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.</div>
+ </div>
+ </div>
+ </div>
+ <div class="col-3">
+ <div class="bx-card" @click="$router.push({ name: 'encryption' })">
+ <div class="p-card p-component">
+ <div class="icon-holder">
+ <i class="isax isax-bold-lock-1"></i>
+ </div>
+ <div class="bx-card-name">
+ Encryption
+ <i class="isax isax-bold-arrow-right"></i>
+ </div>
+ <div class="bx-card-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.</div>
+ </div>
+ </div>
+ </div>
+ <div class="col-3">
+ <div class="bx-card" @click="$router.push({ name: 'cdnUpload' })">
+ <div class="p-card p-component">
+ <div class="icon-holder">
+ <i class="isax isax-bold-arrow-up"></i>
+ </div>
+ <div class="bx-card-name">
+ CDN Upload
+ <i class="isax isax-bold-arrow-right"></i>
+ </div>
+ <div class="bx-card-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.</div>
+ </div>
+ </div>
+ </div>
+ <div class="col-3">
+ <div class="bx-card" @click="$router.push({ name: 'tableDemo' })">
+ <div class="p-card p-component">
+ <div class="icon-holder">
+ <i class="isax isax-bold-stickynote"></i>
+ </div>
+ <div class="bx-card-name">
+ Table
+ <i class="isax isax-bold-arrow-right"></i>
+ </div>
+ <div class="bx-card-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.</div>
+ </div>
+ </div>
+ </div>
+ <div class="col-3">
+ <div class="bx-card" @click="vueMeta()">
+ <div class="p-card p-component">
+ <div class="icon-holder">
+ <i class="isax isax-bold-menu-board"></i>
+ </div>
+ <div class="bx-card-name">
+ Vue Meta Example
+ <i class="isax isax-bold-arrow-right"></i>
+ </div>
+ <div class="bx-card-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.</div>
+ </div>
+ </div>
+ </div>
+ <div class="col-3">
+ <div class="bx-card" @click="$router.push({ name: 'MqlAssetFDBDemo' })">
+ <div class="p-card p-component">
+ <div class="icon-holder">
+ <i class="isax isax-bold-3d-cube-scan"></i>
+ </div>
+ <div class="bx-card-name">
+ Mql Asset FDB
+ <i class="isax isax-bold-arrow-right"></i>
+ </div>
+ <div class="bx-card-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.</div>
+ </div>
+ </div>
+ </div>
+ <div class="col-3">
+ <div class="bx-card" @click="$router.push({ name: 'sessionmgr' })">
+ <div class="p-card p-component">
+ <div class="icon-holder">
+ <i class="isax isax-bold-check"></i>
+ </div>
+ <div class="bx-card-name">
+ Session Manager
+ <i class="isax isax-bold-arrow-right"></i>
+ </div>
+ <div class="bx-card-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.</div>
+ </div>
+ </div>
+ </div>
+ <div class="col-3">
+ <div class="bx-card" @click="$router.push({ name: 'uploadmanager' })">
+ <div class="p-card p-component">
+ <div class="icon-holder">
+ <i class="isax isax-bold-document-upload"></i>
+ </div>
+ <div class="bx-card-name">
+ Upload Manager
+ <i class="isax isax-bold-arrow-right"></i>
+ </div>
+ <div class="bx-card-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.</div>
+ </div>
+ </div>
+ </div>
+ <div class="col-3">
+ <div class="bx-card" @click="$router.push({ name: 'downloadmanager' })">
+ <div class="p-card p-component">
+ <div class="icon-holder">
+ <i class="isax isax-bold-document-download"></i>
+ </div>
+ <div class="bx-card-name">
+ Download Manager
+ <i class="isax isax-bold-arrow-right"></i>
+ </div>
+ <div class="bx-card-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.</div>
+ </div>
+ </div>
+ </div>
+ <div class="col-3">
+ <div class="bx-card" @click="$router.push({ name: 'serversidepagination' })">
+ <div class="p-card p-component">
+ <div class="icon-holder">
+ <i class="isax isax-bold-element-3"></i>
+ </div>
+ <div class="bx-card-name">
+ Server Side Pagination
+ <i class="isax isax-bold-arrow-right"></i>
+ </div>
+ <div class="bx-card-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.</div>
+ </div>
+ </div>
+ </div>
+ <div class="col-3">
+ <div class="bx-card" @click="$router.push({ name: 'keymapper' })">
+ <div class="p-card p-component">
+ <div class="icon-holder">
+ <i class="isax isax-bold-keyboard-open"></i>
+ </div>
+ <div class="bx-card-name">
+ Key Mapper
+ <i class="isax isax-bold-arrow-right"></i>
+ </div>
+ <div class="bx-card-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.</div>
+ </div>
+ </div>
+ </div>
+ <div class="col-3">
+ <div class="bx-card" @click="$router.push({ name: 'excel' })">
+ <div class="p-card p-component">
+ <div class="icon-holder">
+ <i class="isax isax-bold-document-1"></i>
+ </div>
+ <div class="bx-card-name">
+ Excel Plugin
+ <i class="isax isax-bold-arrow-right"></i>
+ </div>
+ <div class="bx-card-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.</div>
+ </div>
+ </div>
+ </div>
+ <div class="col-3">
+ <div class="bx-card" @click="$router.push({ name: 'lastinsertedId' })">
+ <div class="p-card p-component">
+ <div class="icon-holder">
+ <i class="isax isax-bold-note"></i>
+ </div>
+ <div class="bx-card-name">
+ Last Insert ID
+ <i class="isax isax-bold-arrow-right"></i>
+ </div>
+ <div class="bx-card-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.</div>
+ </div>
+ </div>
+ </div>
+ <div class="col-3">
+ <div class="bx-card" @click="$router.push({ name: 'forloop' })">
+ <div class="p-card p-component">
+ <div class="icon-holder">
+ <i class="isax isax-bold-refresh"></i>
+ </div>
+ <div class="bx-card-name">
+ For Loop
+ <i class="isax isax-bold-arrow-right"></i>
+ </div>
+ <div class="bx-card-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.</div>
+ </div>
+ </div>
+ </div>
+ <div class="col-3">
+ <div class="bx-card" @click="$router.push({ name: 'sendSms' })">
+ <div class="p-card p-component">
+ <div class="icon-holder">
+ <i class="isax isax-bold-sms-tracking"></i>
+ </div>
+ <div class="bx-card-name">
+ Send SMS
+ <i class="isax isax-bold-arrow-right"></i>
+ </div>
+ <div class="bx-card-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.</div>
+ </div>
+ </div>
+ </div>
+ <div class="col-3">
+ <div class="bx-card" @click="$router.push({ name: 'sendEmail' })">
+ <div class="p-card p-component">
+ <div class="icon-holder">
+ <i class="isax isax-bold-directbox-send"></i>
+ </div>
+ <div class="bx-card-name">
+ Send Email
+ <i class="isax isax-bold-arrow-right"></i>
+ </div>
+ <div class="bx-card-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.</div>
+ </div>
+ </div>
+ </div>
+ <div class="col-3">
+ <div class="bx-card" @click="$router.push({ name: 'sendOtp' })">
+ <div class="p-card p-component">
+ <div class="icon-holder">
+ <i class="isax isax-bold-notification-status"></i>
+ </div>
+ <div class="bx-card-name">
+ Send OTP
+ <i class="isax isax-bold-arrow-right"></i>
+ </div>
+ <div class="bx-card-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.</div>
+ </div>
+ </div>
+ </div>
+ <div class="col-3">
+ <div class="bx-card" @click="$router.push({ name: 'autoBL' })">
+ <div class="p-card p-component">
+ <div class="icon-holder">
+ <i class="isax isax-bold-note-1"></i>
+ </div>
+ <div class="bx-card-name">
+ Auto BL
+ <i class="isax isax-bold-arrow-right"></i>
+ </div>
+ <div class="bx-card-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.</div>
+ </div>
+ </div>
+ </div>
+ <div class="col-3">
+ <div class="bx-card" @click="$router.push({ name: 'updateUserDataUsingBL' })">
+ <div class="p-card p-component">
+ <div class="icon-holder">
+ <i class="isax isax-bold-refresh"></i>
+ </div>
+ <div class="bx-card-name">
+ Update using BL
+ <i class="isax isax-bold-arrow-right"></i>
+ </div>
+ <div class="bx-card-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.</div>
+ </div>
+ </div>
+ </div>
+ <div class="col-3">
+ <div class="bx-card" @click="$router.push({ name: 'insertCustomMongoId' })">
+ <div class="p-card p-component">
+ <div class="icon-holder">
+ <i class="isax isax-bold-data"></i>
+ </div>
+ <div class="bx-card-name">
+ Custom Mongo ID
+ <i class="isax isax-bold-arrow-right"></i>
+ </div>
+ <div class="bx-card-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.</div>
+ </div>
+ </div>
+ </div>
+ <div class="col-3">
+ <div class="bx-card" @click="$router.push({ name: 'classroom' })">
+ <div class="p-card p-component">
+ <div class="icon-holder">
+ <i class="isax isax-bold-profile-2user"></i>
+ </div>
+ <div class="bx-card-name">
+ Classroom
+ <i class="isax isax-bold-arrow-right"></i>
+ </div>
+ <div class="bx-card-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.</div>
+ </div>
+ </div>
+ </div>
+ <div class="col-3">
+ <div class="bx-card" @click="$router.push({ name: 'clipboard' })">
+ <div class="p-card p-component">
+ <div class="icon-holder">
+ <i class="isax isax-bold-profile-2user"></i>
+ </div>
+ <div class="bx-card-name">
+ Vue Clipboard
+ <i class="isax isax-bold-arrow-right"></i>
+ </div>
+ <div class="bx-card-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.</div>
+ </div>
+ </div>
+ </div>
+ <div class="col-3">
+ <div class="bx-card" @click="$router.push({ name: 'FormKitComposition' })">
+ <div class="p-card p-component">
+ <div class="icon-holder">
+ <i class="isax isax-bold-profile-2user"></i>
+ </div>
+ <div class="bx-card-name">
+ FormKit Custom Components (CompositionAPI)
+ <i class="isax isax-bold-arrow-right"></i>
+ </div>
+ <div class="bx-card-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.</div>
+ </div>
+ </div>
+ </div>
+ <div class="col-3">
+ <div class="bx-card" @click="$router.push({ name: 'FormKitOption' })">
+ <div class="p-card p-component">
+ <div class="icon-holder">
+ <i class="isax isax-bold-profile-2user"></i>
+ </div>
+ <div class="bx-card-name">
+ FormKit Custom Components (OptionAPI)
+ <i class="isax isax-bold-arrow-right"></i>
+ </div>
+ <div class="bx-card-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.</div>
+ </div>
+ </div>
+ </div>
+ <div class="col-3">
+ <div class="bx-card" @click="$router.push({ name: 'tailwindForm' })">
+ <div class="p-card p-component">
+ <div class="icon-holder">
+ <i class="isax isax-bold-profile-2user"></i>
+ </div>
+ <div class="bx-card-name">
+ Tailwind Testing
+ <i class="isax isax-bold-arrow-right"></i>
+ </div>
+ <div class="bx-card-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, rerum.</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
-<script>
-
-export default {
- name: 'Home',
- components: {
- },
- data(){
- return{
-
- }
- },
- methods:{
- vueMeta(){
- this.$router.push({name: 'vueMetaExample',params:{title:"Live Demo"}})
- }
- }
-}
+<script setup>
+ import { useRouter } from "vue-router"
+ const router = useRouter()
+ function vueMeta() {
+ router.push({ name: "vueMetaExample", params: { title: "Live Demo" } })
+ }
</script>
<style>
-.home {
- text-align: center;
-}
+ .home {
+ text-align: center;
+ }
</style>
diff --git a/app/src/views/I18Demo.vue b/app/src/views/I18Demo.vue
index 38b145a..5e0bd04 100644
--- a/app/src/views/I18Demo.vue
+++ b/app/src/views/I18Demo.vue
@@ -12,14 +12,17 @@
<h3>Change Language (i18)</h3>
<FormKit
type="select"
- label=""
placeholder="Change Language"
name="salutation"
:options="langs"
@change="changeLanguage(lang)"
v-model="lang"
+ value="lang"
/>
</div>
+ <h2>
+ <strong> *** {{ $t("home.homeTitle") }} *** </strong>
+ </h2>
<div class="data alt">
<component1 class="my-3" />
<component2 />
@@ -31,42 +34,60 @@
</div>
</template>
-<script>
+<script setup>
import component1 from "../components/i18Demo/Component1.vue"
import component2 from "../components/i18Demo/Component2.vue"
- import { loadLanguageAsync } from "@/setup/i18n-setup.js"
- export default {
- components: { component1, component2 },
- data() {
- return {
- langs: [
- {
- label: "Hindi",
- value: "hi",
- },
- {
- label: "Marathi",
- value: "mr",
- },
- {
- label: "English",
- value: "en",
- },
- ],
- lang: {},
- }
+ import { loadLanguageAsync, i18n } from "@/setup/i18n-setup.js"
+ import { onMounted, onUpdated, reactive } from "vue"
+
+ let langs = reactive([
+ {
+ label: "English",
+ value: "en",
+ },
+ {
+ label: "Hindi",
+ value: "hi",
},
- methods: {
- changeLanguage(lang) {
- console.log("lang", lang)
- if (Object.keys(lang).length > 0 && lang !== undefined) {
- this.$i18n.locale = lang
- this.$i18n.fallbackLocale = lang
- loadLanguageAsync(lang)
- console.log(lang)
- }
- },
+ {
+ label: "Marathi",
+ value: "mr",
},
+ ])
+
+ let lang = reactive({})
+
+ onMounted(() => {
+ getLanguage()
+ })
+
+ onUpdated(() => {
+ // getLanguage()
+ })
+
+ async function changeLanguage(lang) {
+ if (Object.keys(lang).length > 0 && lang !== undefined) {
+ i18n.locale = lang
+ i18n.fallbackLocale = lang
+ loadLanguageAsync(lang)
+ console.log(lang)
+ }
+ }
+
+ function getLanguage() {
+ let obj = langs.find((el) => el.lang == i18n.global.locale.value)
+ if (obj !== undefined) {
+ if (lang === "hi") {
+ obj.label = "Hindi"
+ lang = obj.value
+ } else if (obj === "mr") {
+ obj.label = "Marathi"
+ lang = obj.value
+ } else if (obj === "en") {
+ obj.label = "English"
+ lang = obj.value
+ }
+ }
}
</script>
diff --git a/app/src/views/KeyMapper.vue b/app/src/views/KeyMapper.vue
index 2c25633..da7de7c 100644
--- a/app/src/views/KeyMapper.vue
+++ b/app/src/views/KeyMapper.vue
@@ -1,95 +1,47 @@
<template>
-<div class="container-fluid" id="keyMapper">
- <h2 class="title alt">
- <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
- Key Mappers
- </h2>
- <div class="row justify-content-center">
- <div class="col-3">
- <div class="box-login clickable" @click.prevent="hashDataPush">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-shield-tick"></i>
- </div>
- <div class="bx-login-name">
- Hash Data
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="box-login clickable" @click.prevent="hashSaltPush">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-security-card"></i>
- </div>
- <div class="bx-login-name">
- Hash Salt
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="box-login clickable" @click.prevent="encryptDataPush">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-security-safe"></i>
- </div>
- <div class="bx-login-name">
- Encrypts Data
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <div class="box-login clickable" @click.prevent="decryptDataPush">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-shield-slash"></i>
- </div>
- <div class="bx-login-name">
- Decrypts Data
- </div>
- </div>
- </div>
- </div>
- </div>
-</div>
+ <div class="container-fluid" id="keyMapper">
+ <h2 class="title alt">
+ <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
+ Key Mappers
+ </h2>
+ <div class="row justify-content-center">
+ <div class="tabs">
+ <a class="tab tab-bordered" :class="active == 0 ? 'tab-active' : ''" @click.prevent="active = 0">Hash Data</a>
+ <a class="tab tab-bordered" :class="active == 1 ? 'tab-active' : ''" @click.prevent="active = 1">Hash Salt</a
+ ><a class="tab tab-bordered" :class="active == 2 ? 'tab-active' : ''" @click.prevent="active = 2">Encryption</a>
+ <a class="tab tab-bordered" :class="active == 3 ? 'tab-active' : ''" @click.prevent="active = 3">Decryption</a>
+ </div>
+ </div>
+ <div class="mt-3">
+ <hash-data v-if="active == 0"></hash-data>
+ <hash-salt v-if="active == 1"></hash-salt>
+ <encrypt-data v-if="active == 2"></encrypt-data>
+ <decrypt-data v-if="active == 3"></decrypt-data>
+ </div>
+ </div>
</template>
-<script>
+<script setup>
+ import { ref } from "vue"
+ import hashData from "../components/keymappers/hashData.vue"
+ import hashSalt from "../components/keymappers/hashSalt.vue"
+ import encryptData from "../components/keymappers/encryptData.vue"
+ import decryptData from "../components/keymappers/decryptData.vue"
-export default {
- data () {
- return {
- name: '',
- sname: '',
- saltKey: '',
- ename: '',
- dname: '',
- hashResult: '',
- saltResult: '',
- encryptResult: '',
- decryptResult: ''
- }
- },
- methods: {
- hashDataPush () {
- this.$router.push('/hashData')
- },
- hashSaltPush () {
- this.$router.push('/hashSalt')
- },
- encryptDataPush () {
- this.$router.push('/encryptData')
- },
- decryptDataPush () {
- this.$router.push('/decryptData')
- }
- }
-}
+ const active = ref(0)
+ const items = ref([
+ {
+ label: "Hash Data",
+ },
+ {
+ label: "Hash Salt",
+ },
+ {
+ label: "Encryption",
+ },
+ {
+ label: "Decryption",
+ },
+ ])
</script>
-
-<style>
-
-</style>
\ No newline at end of file
+<style></style>
diff --git a/app/src/views/LastInsertedId.vue b/app/src/views/LastInsertedId.vue
index a70f59c..36dc03f 100644
--- a/app/src/views/LastInsertedId.vue
+++ b/app/src/views/LastInsertedId.vue
@@ -43,36 +43,26 @@
</div>
</template>
-<script>
+<script setup>
import MQL from '@/plugins/mql.js'
+import { ref } from 'vue'
import jsonViewer from 'vue-json-viewer'
-export default {
- data () {
- return {
- emp: {},
- empResult: ''
- }
- },
- components: {
- jsonViewer
- },
- methods: {
- saveAndGetLastInsertedId () {
+ let emp = ref({})
+ let empResult = ref({})
+ function saveAndGetLastInsertedId () {
new MQL()
.setActivity('o.[FetchLastInsertedId]')
- .setData(this.emp)
+ .setData(emp.value)
.fetch()
.then((rs) => {
let res = rs.getActivity('FetchLastInsertedId', true)
if (rs.isValid('FetchLastInsertedId')) {
- this.$toast.add({severity:'success', summary: 'Data Saved ', detail:'Data Saved Successfully', life: 3000})
- this.emp = {}
- this.empResult = res.result
+ toast.add({severity:'success', summary: 'Data Saved ', detail:'Data Saved Successfully', life: 3000})
+ emp.value = {}
+ empResult.value = res.result
} else {
rs.showErrorToast('FetchLastInsertedId')
}
})
}
- }
-}
</script>
\ No newline at end of file
diff --git a/app/src/views/Login.vue b/app/src/views/Login.vue
index 7bbb3a1..883e931 100644
--- a/app/src/views/Login.vue
+++ b/app/src/views/Login.vue
@@ -51,30 +51,24 @@
</div>
</template>
-<script>
+<script setup>
+ import { ref } from "vue"
import { login } from "../store/modules/login.js"
- export default {
- setup() {
- const loginStore = login()
- return { loginStore }
- },
- data() {
- return {
- username: "",
- password: "",
- }
- },
- methods: {
- authenticate() {
- this.loginStore
- .AUTH_REQUEST({ loginId: this.username, password: this.password })
- .then((res) => {
- this.$toast.success("Login Successfully")
- })
- .catch((err) => {
- this.$toast.error(err)
- })
- },
- },
+ import { createToaster } from "@meforma/vue-toaster"
+ const toaster = createToaster({ position: "top-right", duration: 3000 })
+ const loginStore = login()
+ let username = ref("")
+ let password = ref("")
+ let showPass = ref(false)
+
+ function authenticate() {
+ loginStore
+ .AUTH_REQUEST({ loginId: username.value, password: password.value })
+ .then((res) => {
+ toaster.success("Login Successfully")
+ })
+ .catch((err) => {
+ toaster.error(err)
+ })
}
</script>
diff --git a/app/src/views/MQLRequestDemo.vue b/app/src/views/MQLRequestDemo.vue
index c980906..ec36d3f 100644
--- a/app/src/views/MQLRequestDemo.vue
+++ b/app/src/views/MQLRequestDemo.vue
@@ -7,52 +7,42 @@
<div class="row justify-content-center">
<div class="col-6">
<div class="box-login">
- <div class="data">
- <h3>MQL Data</h3>
- <FormKit type="button" prefix-icon="check" @click="GetAllPosts">
- MQL Request
- </FormKit>
- </div>
- <div class="json-wrapper">
- <json-viewer :value="result" boxed :expanded="true"></json-viewer>
- </div>
+ <div class="data">
+ <h3>MQL Data</h3>
+ <FormKit type="button" prefix-icon="check" @click="GetAllPosts"> MQL Request </FormKit>
+ </div>
+ <div class="json-wrapper">
+ <json-viewer :value="result" boxed :expanded="true"></json-viewer>
+ </div>
</div>
</div>
</div>
</div>
</template>
-<script>
+<script setup>
import MQL from "@/plugins/mql.js"
+ import { ref } from "vue"
import jsonViewer from "vue-json-viewer"
- export default {
- data() {
- return {
- result: [],
- }
- },
- components: {
- jsonViewer,
- },
- methods: {
- GetAllPosts() {
- new MQL()
- .showConfirmDialog(true)
- .setActivity("o.[query_1QPikbRCETCu32Dj13qzRKNBraC]")
- .setData({})
- .setHeader({ "my-header": "It is Ok" })
- .fetch("mqlData")
- .then((rs) => {
- let res = rs.getActivity("query_1QPikbRCETCu32Dj13qzRKNBraC", true)
- if (rs.isValid("query_1QPikbRCETCu32Dj13qzRKNBraC")) {
- this.$toast.success("Data Loaded Successfully")
- this.result = res
- } else {
- rs.showErrorToast("query_1QPikbRCETCu32Dj13qzRKNBraC")
- }
- })
- },
- },
+ import { createToaster } from "@meforma/vue-toaster"
+ const toaster = createToaster({ position: "top-right", duration: 3000 })
+ let result = ref([])
+ function GetAllPosts() {
+ new MQL()
+ .showConfirmDialog(true)
+ .setActivity("o.[query_1QPikbRCETCu32Dj13qzRKNBraC]")
+ .setData({})
+ .setHeader({ "my-header": "It is Ok" })
+ .fetch("mqlData")
+ .then((rs) => {
+ let res = rs.getActivity("query_1QPikbRCETCu32Dj13qzRKNBraC", true)
+ if (rs.isValid("query_1QPikbRCETCu32Dj13qzRKNBraC")) {
+ toaster.success("Data Loaded Successfully")
+ result.value = res
+ } else {
+ rs.showErrorToast("query_1QPikbRCETCu32Dj13qzRKNBraC")
+ }
+ })
}
</script>
diff --git a/app/src/views/MqlAssetFDBDemo.vue b/app/src/views/MqlAssetFDBDemo.vue
index d1f1a39..2c76c3e 100644
--- a/app/src/views/MqlAssetFDBDemo.vue
+++ b/app/src/views/MqlAssetFDBDemo.vue
@@ -10,12 +10,6 @@
<div class="p-card p-component">
<h3>Upload File</h3>
<div class="field mt-5">
- <!-- <fileupload name="file" :url="url" id="files" :chooseIcon="chooseIcon"
- :uploadIcon="uploadIcon" :cancelIcon="cancelIcon" :customUpload="true" @uploader="uploadFile">
- <template #empty>
- <p>Click on the choose button to upload files</p>
- </template>
- </fileupload> -->
<FormKit
type="file"
label="Your files"
@@ -28,47 +22,38 @@
</div>
<div class="field mt-5">
<h3 class="mb-5">Asset File</h3>
- <div class="p-float-label">
- <input
- type="text"
- class="p-inputtext p-component w-100"
- :class="assetPath ? 'p-filled' : ''"
- id="assetPath"
- name="assetPath"
- />
- <label for="assetPath">Enter Asset File Path</label>
- </div>
+ <FormKit
+ type="text"
+ name="assetPath"
+ label="assetPath"
+ v-model="assetPath"
+ placeholder="Enter Asset File Path"
+ help="Asset File Path"
+ validation="required"
+ />
</div>
<div class="field mt-5">
<h3 class="mb-5">Update File</h3>
- <div class="p-float-label">
- <input
- type="text"
- class="p-inputtext p-component w-100"
- :class="recordId ? 'p-filled' : ''"
- name="recordID"
- id="recordID"
- />
- <label for="recordID">Enter your Record ID</label>
- </div>
+ <FormKit
+ type="text"
+ name="recordId"
+ label="recordId"
+ v-model="recordId"
+ placeholder="Enter recordId"
+ help="Record Id"
+ validation="required"
+ />
</div>
<div class="field mt-5">
- <fileupload
- name="file"
- :url="url"
- id="files"
- :chooseIcon="chooseIcon"
- :uploadIcon="uploadIcon"
- :cancelIcon="cancelIcon"
- :customUpload="true"
- @uploader="uploadFile"
- >
- <template #empty>
- <p>Click on the choose button to upload files</p>
- </template>
- </fileupload>
+ <FormKit
+ type="file"
+ label="Your files"
+ help="This input starts with files already “attachedâ€."
+ multiple="true"
+ :value="file_2"
+ v-model="file"
+ />
</div>
-
<div class="field mt-5">
<h3 class="mb-3">Updated Asset Path</h3>
<p v-if="!updatedAssetPath">Asset path not updated</p>
@@ -76,17 +61,10 @@
{{ updatedAssetPath }}
</p>
</div>
-
- <div class="btn-wrapper text-center">
- <button class="btn btn-submit" @click.stop.prevent="downloadFile">
- <i class="isax isax-bold-document-download"></i>
- Download Asset
- </button>
- <button class="btn btn-show" @click.stop.prevent="renderFile">
- <i class="isax isax-bold-document-download"></i>
- Render Asset
- </button>
- </div>
+ <!-- <div class="btn-wrapper text-center"> -->
+ <FormKit type="submit" @click.stop.prevent="downloadFile" label="Download Asset" />
+ <FormKit type="submit" @click.stop.prevent="renderFile" label="Render Asset" />
+ <!-- </div> -->
</div>
</div>
</div>
@@ -94,66 +72,60 @@
</div>
</template>
-<script>
+<script setup>
import MQLAssetFDB from "@/plugins/mqlAssetFDB.js"
+ import { ref } from "vue"
- export default {
- data() {
- return {
- assetPath: "",
- file: "",
- content: "",
- recordId: "",
- updatedAssetPath: "",
- chooseIcon: "isax isax-bold-cloud-plus",
- uploadIcon: "isax isax-bold-add",
- cancelIcon: "isax isax-bold-close-circle",
- }
- },
- methods: {
- uploadFile() {
- let formData = new FormData()
- formData.append("file", this.file[0].file)
- new MQLAssetFDB()
- .enablePageLoader(true)
- .setIndex("o.9929b6e44da568f390d20e51032b")
- .setHostName("TestMixedBucketFDB2")
- .setFormData(formData)
- .setAssetData({ TestAssetBucket: "bucket1" })
- .uploadAssetFile()
- .then((res) => {
- if (res.isValid()) {
- this.assetPath = res.getAssetPath()
- } else {
- res.showErrorToast()
- }
- })
- },
- updateFile(recordId) {
- let formData = new FormData()
- formData.append("file", this.files)
- new MQLAssetFDB()
- .setIndex("o.9929b6e44da568f390d20e51032b")
- .setHostName("TestMixedBucketFDB2")
- .setFormData(formData)
- .setUpdateWithRecordId(recordId)
- .setAssetData({ TestAssetBucket: "bucket1" })
- .uploadAssetFile()
- .then((res) => {
- if (res.isValid()) {
- this.updatedAssetPath = res.getAssetPath()
- } else {
- res.showErrorToast()
- }
- })
- },
- downloadFile() {
- new MQLAssetFDB().download(this.updatedAssetPath || this.assetPath)
- },
- renderFile() {
- new MQLAssetFDB().render(this.updatedAssetPath || this.assetPath)
- },
- },
+ let assetPath = ref("")
+ let files = ref("")
+ let content = ref("")
+ let recordId = ref("")
+ let updatedAssetPath = ref("")
+ let chooseIcon = ref("isax isax-bold-cloud-plus")
+ let uploadIcon = ref("isax isax-bold-add")
+ let cancelIcon = ref("isax isax-bold-close-circle")
+
+ function uploadFile() {
+ let formData = new FormData()
+ formData.append("file", files.value)
+ new MQLAssetFDB()
+ .enablePageLoader(true)
+ .setIndex("o.9929b6e44da568f390d20e51032b")
+ .setHostName("TestMixedBucketFDB2")
+ .setFormData(formData)
+ .setAssetData({ TestAssetBucket: "bucket1" })
+ .uploadAssetFile()
+ .then((res) => {
+ if (res.isValid()) {
+ assetPath.value = res.getAssetPath()
+ } else {
+ res.showErrorToast()
+ }
+ })
+ }
+ function updateFile(recordId) {
+ let formData = new FormData()
+ formData.append("file", files.value)
+ new MQLAssetFDB()
+ .setIndex("o.9929b6e44da568f390d20e51032b")
+ .setHostName("TestMixedBucketFDB2")
+ .setFormData(formData)
+ .setUpdateWithRecordId(recordId)
+ .setAssetData({ TestAssetBucket: "bucket1" })
+ .uploadAssetFile()
+ .then((res) => {
+ if (res.isValid()) {
+ updatedAssetPath.value = res.getAssetPath()
+ } else {
+ res.showErrorToast()
+ }
+ })
+ }
+ function downloadFile() {
+ new MQLAssetFDB().download(updatedAssetPath.value || assetPath.value)
+ }
+ function renderFile() {
+ new MQLAssetFDB().render(updatedAssetPath.value || assetPath.value)
}
</script>
diff --git a/app/src/views/Registration.vue b/app/src/views/Registration.vue
index 2cacd2f..9d8defc 100644
--- a/app/src/views/Registration.vue
+++ b/app/src/views/Registration.vue
@@ -217,63 +217,56 @@
</div>
</template>
-<script>
- import MQLCdn from "@/plugins/mqlCdn.js"
- export default {
- data() {
- return {
- loginId: "",
- password: "",
- file: null,
- result: "",
- showPass: false,
- url: "https://testcdncs.mkcl.org/1TxYD2KhMcczFlxXntsueOYN46J/demoFolder/",
- uploadedFilePath: "",
- value: "",
- value1: "",
- value2: "",
- submitted: false,
- file_2: "",
- list: "",
- }
- },
- methods: {
- cdnProfileUpload() {
- let formData = new FormData()
- formData.append("file", this.file[0].file) // append your file as 'file' in formdata.
- new MQLCdn()
- .enablePageLoader(true)
- // FIXED: change this to directory path
- .setDirectoryPath("/demoFolder") // (optional field) if you want to save file to specific directory path
- .setFormData(formData) // (required) sets file data
- .setFileName(this.inputFileName) // (optional field) if you want to set name to file that is being uploaded
- // FIXED: pass buckeyKey instead of name
- .setBucketKey("1TxYD2KhMcczFlxXntsueOYN46J") // (required) valid bucket key need to set in which file will be uploaded.
- .setPurposeId("1TxY9TS4uzp8Ivyo0eKPpo1g2Og") // (required) valid purposeId need to set in which file will be uploaded.
- .setClientId("1TxY9TS4uzp8Ivyo0eKPpo1g2Og") // (required) valid purposeId need to set in which file will be uploaded.
- .uploadFile("uploadtBtn")
- .then((res) => {
- // (required) this will upload file takes element id (optional param) which will be blocked while file upload..
- if (res.isValid()) {
- this.uploadedFilePath = res.uploadedFileURL() // returns uploaded file url..
- console.log("res cdn path", this.uploadedFilePath)
- this.$toast.add({ severity: "success", summary: "File", detail: "file uploaded.", life: 3000 })
- } else {
- res.showErrorToast()
- }
- })
- },
- saveData(value) {
- this.cdnProfileUpload()
- const form = new FormData()
- form.set("enctype", "multipart/form-data")
- form.append("fileUrl", this.uploadedFilePath.cdnServer + this.uploadedFilePath.filePath)
- form.append("loginId", this.loginId)
- form.append("password", this.password)
- console.log("formData", this.value)
- console.log(value)
- },
- },
+<script setup>
+ import { ref } from "vue"
+ import MQLCdn from "@/plugins/mqlCdn.js"
+ let loginId = ref("")
+ let password = ref("")
+ let showPass = ref(false)
+ let file = ref(null)
+ let result = ref("")
+ let url = ref("https://testcdncs.mkcl.org/1TxYD2KhMcczFlxXntsueOYN46J/")
+ let uploadedFilePath = ref("")
+ let value = ref("")
+ let value1 = ref("")
+ let value2 = ref("")
+ let submitted = ref(false)
+ let file_2 = ref("")
+ let list = ref("")
+ function cdnProfileUpload() {
+ let formData = new FormData()
+ formData.append("file", this.file[0].file) // append your file as 'file' in formdata.
+ new MQLCdn()
+ .enablePageLoader(true)
+ // FIXED: change this to directory path
+ .setDirectoryPath("/demoFolder") // (optional field) if you want to save file to specific directory path
+ .setFormData(formData) // (required) sets file data
+ .setFileName(this.inputFileName) // (optional field) if you want to set name to file that is being uploaded
+ // FIXED: pass buckeyKey instead of name
+ .setBucketKey("1TxYD2KhMcczFlxXntsueOYN46J") // (required) valid bucket key need to set in which file will be uploaded.
+ .setPurposeId("1TxY9TS4uzp8Ivyo0eKPpo1g2Og") // (required) valid purposeId need to set in which file will be uploaded.
+ .setClientId("1TxY9TS4uzp8Ivyo0eKPpo1g2Og") // (required) valid purposeId need to set in which file will be uploaded.
+ .uploadFile("uploadtBtn")
+ .then((res) => {
+ // (required) this will upload file takes element id (optional param) which will be blocked while file upload..
+ if (res.isValid()) {
+ this.uploadedFilePath = res.uploadedFileURL() // returns uploaded file url..
+ console.log("res cdn path", this.uploadedFilePath)
+ this.$toast.add({ severity: "success", summary: "File", detail: "file uploaded.", life: 3000 })
+ } else {
+ res.showErrorToast()
+ }
+ })
+ }
+ function saveData(value) {
+ this.cdnProfileUpload()
+ const form = new FormData()
+ form.set("enctype", "multipart/form-data")
+ form.append("fileUrl", this.uploadedFilePath.cdnServer + this.uploadedFilePath.filePath)
+ form.append("loginId", this.loginId)
+ form.append("password", this.password)
+ console.log("formData", this.value)
+ console.log(value)
}
</script>
diff --git a/app/src/views/ServerSidePagination.vue b/app/src/views/ServerSidePagination.vue
index d150335..038cb5f 100644
--- a/app/src/views/ServerSidePagination.vue
+++ b/app/src/views/ServerSidePagination.vue
@@ -1,86 +1,96 @@
<template>
-<div id="serverSidePagination" class="container-fluid">
- <h2 class="title alt">
- <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
- Server Side Pagination
- </h2>
- <div class="subtext">This report shows per page 3 documents</div>
- <div class="row justify-content-center">
- <div class="col">
- <div class="box-login">
- <div class="p-card p-component">
- <DataTable :value="items" v-if="items && items.length > 0">
- <Column field="addcategory" header="addcategory"></Column>
- <Column field="fname" header="fname"></Column>
- <Column field="name" header="name"></Column>
- <Column field="sname" header="sname"></Column>
- </DataTable>
- <div class="empty-state" v-else>Records Not Found</div>
- <div class="btn-wrapper">
- <button class="btn btn-show" v-if="pageNo > 1" @click="prevClick()">
- <i class="isax isax-bold-arrow-left-3"></i>
- Prev
- </button>
- <button v-if="items && items.length > 0" class="btn btn-submit" :disabled="items == undefined || items.length == 0" @click="nextClick()">
- <i class="isax isax-bold-arrow-right-2"></i>
- Next
- </button>
- </div>
- </div>
- </div>
- </div>
- </div>
-</div>
+ <div id="serverSidePagination" class="container-fluid">
+ <h2 class="title alt">
+ <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
+ Server Side Pagination
+ </h2>
+ <div class="subtext">This report shows per page 3 documents</div>
+ <div class="row justify-content-center">
+ <div class="col">
+ <div class="box-login">
+ <div class="p-card p-component">
+ <table class="table w-full" v-if="items && items.length > 0">
+ <thead>
+ <tr>
+ <th>addcategory</th>
+ <th>fname</th>
+ <th>name</th>
+ <th>sname</th>
+ </tr>
+ </thead>
+ <tbody v-for="(item, index) in items" v-bind:key="index">
+ <tr>
+ <th>{{ item.addcategory }}</th>
+ <th>{{ item.fname }}</th>
+ <th>{{ item.name }}</th>
+ <td>{{ item.sname }}</td>
+ </tr>
+ </tbody>
+ </table>
+ <div class="empty-state" v-else>Records Not Found</div>
+ <div class="btn-wrapper">
+ <FormKit type="submit" label="Prev" v-if="pageNo > 1" @click="prevClick" />
+ <FormKit
+ type="submit"
+ label="Next"
+ v-if="items && items.length > 0"
+ :disabled="items == undefined || items.length == 0"
+ @click="nextClick"
+ />
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
-<script>
-import MQL from '@/plugins/mql.js'
-export default {
- data () {
- return {
- items: [],
- pageNo: 1
- }
- },
- mounted () {
- this.fetchPaginationData()
- },
- methods: {
- prevClick () {
- if (this.pageNo > 1) {
- this.pageNo--
- } else {
- this.pageNo = 1
- }
- this.fetchPaginationData()
- },
- nextClick () {
- this.pageNo++
- this.fetchPaginationData()
- },
- fetchPaginationData () {
- new MQL()
- .setActivity('o.[GetPaginationData]')
- .setData({ pageNo: this.pageNo })
- .fetch()
- .then((rs) => {
- let res = rs.getActivity('GetPaginationData', true)
- if (rs.isValid('GetPaginationData')) {
- this.items = res.result
- this.$toast.add({severity:'success', summary: 'Pagination Data ', detail:'Get Pagination Data', life: 3000})
- } else {
- this.items = []
- rs.showErrorToast('GetPaginationData')
- }
- })
- }
- }
-}
+<script setup>
+ import MQL from "@/plugins/mql.js"
+ import { onMounted, ref } from "vue"
+ import { createToaster } from "@meforma/vue-toaster"
+ const toaster = createToaster({ position: "top-right", duration: 3000 })
+
+ let items = ref([])
+ let pageNo = ref(1)
+
+ onMounted(() => {
+ fetchPaginationData()
+ })
+
+ function prevClick() {
+ if (pageNo.value > 1) {
+ pageNo.value--
+ } else {
+ pageNo.value = 1
+ }
+ fetchPaginationData()
+ }
+ function nextClick() {
+ pageNo.value++
+ fetchPaginationData()
+ }
+ function fetchPaginationData() {
+ new MQL()
+ .setActivity("o.[GetPaginationData]")
+ .setData({ pageNo: pageNo.value })
+ .fetch()
+ .then((rs) => {
+ let res = rs.getActivity("GetPaginationData", true)
+ if (rs.isValid("GetPaginationData")) {
+ items.value = res.result
+ toaster.success("Get Pagination Data")
+ } else {
+ items.value = []
+ rs.showErrorToast("GetPaginationData")
+ }
+ })
+ }
</script>
<style lang="scss" scoped>
-.subtext {
- margin-top: 0.25rem;
- margin-left: 3rem;
-}
-</style>
\ No newline at end of file
+ .subtext {
+ margin-top: 0.25rem;
+ margin-left: 3rem;
+ }
+</style>
diff --git a/app/src/views/SessionManager.vue b/app/src/views/SessionManager.vue
index 7fa6a82..b3bff8a 100644
--- a/app/src/views/SessionManager.vue
+++ b/app/src/views/SessionManager.vue
@@ -6,120 +6,24 @@
</h2>
<div class="row justify-content-center">
<div class="tabs">
- <a class="tab tab-bordered" @click.prevent="storeDataPush"> Store Data</a>
- <a class="tab tab-bordered tab-active" @click.prevent="fetchDataPush">Fetch Data</a>
- <a class="tab tab-bordered" @click.prevent="deleteDataPush">Delete Data</a>
+ <a class="tab tab-bordered" :class="active == 0 ? 'tab-active' : ''" @click.prevent="active = 0"> Store Data</a>
+ <a class="tab tab-bordered" :class="active == 1 ? 'tab-active' : ''" @click.prevent="active = 1">Fetch Data</a>
+ <a class="tab tab-bordered" :class="active == 2 ? 'tab-active' : ''" @click.prevent="active = 2">Delete Data</a>
</div>
- <!-- <div class="col-4">
- <div class="box-login clickable">
- <div class="p-card p-component" @click.prevent="storeDataPush">
- <div class="icon-holder">
- <i class="isax isax-bold-story"></i>
- </div>
- <div class="bx-login-name">Store Data</div>
- </div>
- </div>
- </div>
- <div class="col-4">
- <div class="box-login clickable">
- <div class="p-card p-component" @click.prevent="fetchDataPush">
- <div class="icon-holder">
- <i class="isax isax-bold-document-download"></i>
- </div>
- <div class="bx-login-name">Fetch Data</div>
- </div>
- </div>
- </div>
- <div class="col-4">
- <div class="box-login clickable">
- <div class="p-card p-component" @click.prevent="deleteDataPush">
- <div class="icon-holder">
- <i class="isax isax-bold-trash"></i>
- </div>
- <div class="bx-login-name">Delete Data</div>
- </div>
- </div>
- </div> -->
+ </div>
+ <div class="mt-3">
+ <store-data v-if="active == 0"></store-data>
+ <fetch-data v-if="active == 1"></fetch-data>
+ <delete-data v-if="active == 2"></delete-data>
</div>
</div>
</template>
-<script>
- import MQL from "@/plugins/mql.js"
- export default {
- data() {
- return {
- session: {},
- fetchKey: "",
- deleteKey: "",
- sessionResult: "",
- }
- },
- methods: {
- storeDataPush() {
- this.$router.push("/storeData")
- },
- fetchDataPush() {
- this.$router.push("/fetchData")
- },
- deleteDataPush() {
- this.$router.push("deleteData")
- },
- saveSessionData() {
- new MQL()
- .setActivity("o.[StoreDataInSession]")
- .setData(this.session)
- .fetch()
- .then((rs) => {
- rs.getActivity("StoreDataInSession", true)
- if (rs.isValid("StoreDataInSession")) {
- this.session = {}
- alert("Data saved successfully")
- } else {
- rs.showErrorToast("StoreDataInSession")
- }
- })
- },
- fetchSessionData() {
- new MQL()
- .setActivity("o.[FetchDataFromSession]")
- .setData({ name: this.fetchKey })
- .fetch()
- .then((rs) => {
- let res = rs.getActivity("FetchDataFromSession", true)
- if (rs.isValid("FetchDataFromSession")) {
- if (res && res.result) {
- this.sessionResult = res.result
- this.fetchKey = ""
- alert("Data fetched successfully")
- } else {
- alert("Data fetched failed")
- }
- } else {
- rs.showErrorToast("FetchDataFromSession")
- }
- })
- },
- deleteSessionData() {
- new MQL()
- .setActivity("o.[DeleteDataFromSession]")
- .setData({ name: this.deleteKey })
- .fetch()
- .then((rs) => {
- let res = rs.getActivity("DeleteDataFromSession", true)
- if (rs.isValid("DeleteDataFromSession")) {
- if (res && res.result) {
- this.sessionResult = res.result
- this.deleteKey = ""
- alert("Data deleted successfully")
- } else {
- alert("Data delete failed")
- }
- } else {
- rs.showErrorToast("DeleteDataFromSession")
- }
- })
- },
- },
- }
+<script setup>
+ import { ref } from "vue"
+ import storeData from "../components/sessionmanager/storeData.vue"
+ import fetchData from "../components/sessionmanager/fetchData.vue"
+ import deleteData from "../components/sessionmanager/deleteData.vue"
+
+ const active = ref(0)
</script>
diff --git a/app/src/views/StudentDemo.vue b/app/src/views/StudentDemo.vue
index e7e6084..5f2c12e 100644
--- a/app/src/views/StudentDemo.vue
+++ b/app/src/views/StudentDemo.vue
@@ -1,123 +1,94 @@
<template>
- <div>
- <h3>Save Student</h3>
- Student Name: <input
- v-model="student.name"
- required
- > <br>
- Student Age: <input
- v-model.number="student.age"
- required
- > <br>
- Student address: <input
- v-model="student.address"
- required
- ><br>
- <button @click="saveStudentData">
- Save
- </button>
- <br><br>
- <h3>Update Student</h3>
- Student Name: <input
- v-model="uname"
- required
- > <br>
- <button @click="updateStudentData">
- Update
- </button>
- <div>{{ updatedRes }}</div>
- <br><br>
- <h3>Fetch All Student</h3>
- <button @click="fetchAllStudent">
- FetchAllStudent
- </button>
- <div>{{ AllStudent }}</div>
- <br><br>
- <h3>Delete Student</h3>
- Student Name: <input
- v-model="dstudent"
- required
- > <br>
- <button @click="deleteStudentData">
- Delete
- </button>
- </div>
+ <div>
+ <h3>Save Student</h3>
+ Student Name: <input v-model="student.name" required /> <br />
+ Student Age: <input v-model.number="student.age" required /> <br />
+ Student address: <input v-model="student.address" required /><br />
+ <button @click="saveStudentData">Save</button>
+ <br /><br />
+ <h3>Update Student</h3>
+ Student Name: <input v-model="uname" required /> <br />
+ <button @click="updateStudentData">Update</button>
+ <div>{{ updatedRes }}</div>
+ <br /><br />
+ <h3>Fetch All Student</h3>
+ <button @click="fetchAllStudent">FetchAllStudent</button>
+ <div>{{ AllStudent }}</div>
+ <br /><br />
+ <h3>Delete Student</h3>
+ Student Name: <input v-model="dstudent" required /> <br />
+ <button @click="deleteStudentData">Delete</button>
+ </div>
</template>
-<script>
-import MQL from '@/plugins/mql.js'
-export default {
- data () {
- return {
- student: {},
- uname: '',
- dstudent: '',
- updatedRes: '',
- AllStudent: []
- }
- },
- methods: {
- saveStudentData () {
- // alert(JSON.stringify(this.student))
- new MQL()
- .setActivity('o.[SaveStudentData]')
- .setData(this.student)
- .fetch()
- .then((rs) => {
- let res = rs.getActivity('SaveStudentData', true)
- if (rs.isValid('SaveStudentData')) {
- alert(JSON.stringify(res))
- alert('student saved successfully')
- this.student = {}
- } else {
- rs.showErrorToast('SaveStudentData')
- }
- })
- },
- updateStudentData () {
- new MQL()
- .setActivity('o.[UpdateStudentData]')
- .setData({ name: this.uname })
- .fetch()
- .then((rs) => {
- let res = rs.getActivity('UpdateStudentData', true)
- if (rs.isValid('UpdateStudentData')) {
- this.updatedRes = res.result
- this.uname = ''
- } else {
- rs.showErrorToast('UpdateStudentData')
- }
- })
- },
- deleteStudentData () {
- new MQL()
- .setActivity('o.[DeleteStudentData]')
- .setData({ name: this.dstudent })
- .fetch()
- .then((rs) => {
- rs.getActivity('DeleteStudentData', true)
- if (rs.isValid('DeleteStudentData')) {
- alert('Student deleted successfully')
- this.dstudent = ''
- } else {
- rs.showErrorToast('DeleteStudentData')
- }
- })
- },
- fetchAllStudent () {
- new MQL()
- .setActivity('o.[query_1tvgHmekn2RX1jUoViq5E0vDPh9]')
- .fetch()
- .then((rs) => {
- let res = rs.getActivity('query_1tvgHmekn2RX1jUoViq5E0vDPh9', true)
- if (rs.isValid('query_1tvgHmekn2RX1jUoViq5E0vDPh9')) {
- this.AllStudent = res
- } else {
- rs.showErrorToast('query_1tvgHmekn2RX1jUoViq5E0vDPh9')
- }
- })
- }
- }
-}
+<script setup>
+ import MQL from "@/plugins/mql.js"
+ import { ref } from "vue"
+
+ let student = ref({})
+ let uname = ref("")
+ let dstudent = ref("")
+ let updatedRes = ref({})
+ let AllStudent = ref([])
+
+ function saveStudentData() {
+ new MQL()
+ .setActivity("o.[SaveStudentData]")
+ .setData(student.value)
+ .fetch()
+ .then((rs) => {
+ let res = rs.getActivity("SaveStudentData", true)
+ if (rs.isValid("SaveStudentData")) {
+ alert(JSON.stringify(res))
+ alert("student saved successfully")
+ student.value = {}
+ } else {
+ rs.showErrorToast("SaveStudentData")
+ }
+ })
+ }
+ function updateStudentData() {
+ new MQL()
+ .setActivity("o.[UpdateStudentData]")
+ .setData({ name: uname.value })
+ .fetch()
+ .then((rs) => {
+ let res = rs.getActivity("UpdateStudentData", true)
+ if (rs.isValid("UpdateStudentData")) {
+ updatedRes.value = res.result
+ uname.value = ""
+ } else {
+ rs.showErrorToast("UpdateStudentData")
+ }
+ })
+ }
+ function deleteStudentData() {
+ new MQL()
+ .setActivity("o.[DeleteStudentData]")
+ .setData({ name: dstudent.value })
+ .fetch()
+ .then((rs) => {
+ rs.getActivity("DeleteStudentData", true)
+ if (rs.isValid("DeleteStudentData")) {
+ alert("Student deleted successfully")
+ dstudent.value = ""
+ } else {
+ rs.showErrorToast("DeleteStudentData")
+ }
+ })
+ }
+ function fetchAllStudent() {
+ new MQL()
+ .setActivity("o.[query_1tvgHmekn2RX1jUoViq5E0vDPh9]")
+ .fetch()
+ .then((rs) => {
+ let res = rs.getActivity("query_1tvgHmekn2RX1jUoViq5E0vDPh9", true)
+ if (rs.isValid("query_1tvgHmekn2RX1jUoViq5E0vDPh9")) {
+ AllStudent.value = res
+ } else {
+ rs.showErrorToast("query_1tvgHmekn2RX1jUoViq5E0vDPh9")
+ }
+ })
+ }
</script>
<style></style>
diff --git a/app/src/views/TableDemo.vue b/app/src/views/TableDemo.vue
index ba44c3e..9fab347 100644
--- a/app/src/views/TableDemo.vue
+++ b/app/src/views/TableDemo.vue
@@ -4,7 +4,7 @@
<i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
Table
</h2>
- <mTable
+ <m-table
id-table="tblPlaces"
restriction="o"
activity="query_1el1NAwh6nMeZl1PhbzhP1TyQLf"
@@ -13,18 +13,9 @@
</div>
</template>
-<script>
+<script setup>
import MTable from '@/components/MTable.vue'
-export default {
- components: {
- mTable: MTable
- },
- data () {
- return {
- }
- }
-}
</script>
<style lang="scss">
diff --git a/app/src/views/UploadManager.vue b/app/src/views/UploadManager.vue
index 0a50c40..4306081 100644
--- a/app/src/views/UploadManager.vue
+++ b/app/src/views/UploadManager.vue
@@ -1,104 +1,36 @@
<template>
- <div id="uploadManager" class="container-fluid">
- <h2 class="title alt">
- <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
- Upload Manager
- </h2>
- <div class="row justify-content-center">
- <!-- <div class="col-4">
- <div class="box-login clickable" @click.prevent="uploadFilePush">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-document-upload"></i>
- </div>
- <div class="bx-login-name">
- Upload File
- </div>
- </div>
- </div>
- </div>
- <div class="col-4">
- <div class="box-login clickable" @click.prevent="uploadProgressPush">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-document-cloud"></i>
- </div>
- <div class="bx-login-name">
- Upload Progress Check
- </div>
- </div>
- </div>
- </div> -->
- <div class="tabs">
- <a class="tab tab-bordered" @click.prevent="uploadFilePush">Upload File</a>
- <a class="tab tab-bordered tab-active" @click.prevent="uploadProgressPush">Upload Progress Check</a>
- </div>
- </div>
- </div>
+ <div id="uploadManager" class="container-fluid">
+ <h2 class="title alt">
+ <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
+ Upload Manager
+ </h2>
+ <div class="row justify-content-center">
+ <div class="tabs">
+ <a class="tab tab-bordered" :class="active == 0 ? 'tab-active' : ''" @click.prevent="active = 0">Upload File</a>
+ <a class="tab tab-bordered" :class="active == 1 ? 'tab-active' : ''" @click.prevent="active = 1"
+ >Upload Progress Check</a
+ >
+ </div>
+ </div>
+ <div class="mt-3">
+ <upload-file v-if="active == 0"></upload-file>
+ <upload-progess-file v-if="active == 1"></upload-progess-file>
+ </div>
+ </div>
</template>
-<script>
-import MQL from '@/plugins/mql.js'
-export default {
- data () {
- return {
- upload: {},
- uploadId: '',
- uploadResult: '',
- progressResult: ''
- }
- },
- methods: {
- uploadFilePush () {
- this.$router.push('/uploadFile')
- },
- uploadProgressPush () {
- this.$router.push('/uploadProgessFile')
- },
+<script setup>
+ import { ref } from "vue"
+ import uploadFile from "../components/upload-manager/uploadFile.vue"
+ import uploadProgessFile from "../components/upload-manager/uploadProgessFile.vue"
- uploadFile () {
- // var a = []
- // a.push(this.upload.uploadFileUrl)
- // this.upload.uploadFileUrl = a
- var a = {
- cdnBaseUrl: [this.upload.cdnBaseUrl],
- uploadFileUrl: [this.upload.uploadFileUrl],
- destinationFileUrl: [this.upload.destinationFileUrl]
- }
- new MQL()
- .setActivity('o.[UploadFileUsingUM]')
- .setData(a)
- .fetch()
- .then((rs) => {
- let res = rs.getActivity('UploadFileUsingUM', true)
- if (rs.isValid('UploadFileUsingUM')) {
- this.upload = {}
- this.uploadResult = res.result
- alert('File uploaded successfully')
- } else {
- rs.showErrorToast('UploadFileUsingUM')
- }
- })
- },
- checkUploadProgress () {
- new MQL()
- .setActivity('o.[CheckUploadedFileProgress]')
- .setData({ uploadFileId: this.uploadId })
- .fetch()
- .then((rs) => {
- let res = rs.getActivity('CheckUploadedFileProgress', true)
- if (rs.isValid('CheckUploadedFileProgress')) {
- if (res && res.result) {
- this.progressResult = res.result
- this.uploadId = ''
- } else {
- alert('Progress checking failed')
- }
- } else {
- rs.showErrorToast('CheckUploadedFileProgress')
- }
- })
- }
- }
-}
-</script>
\ No newline at end of file
+ const active = ref(0)
+ const items = ref([
+ {
+ label: "Upload File",
+ },
+ {
+ label: "Check Upload Progress",
+ },
+ ])
+</script>
diff --git a/app/src/views/Validator.vue b/app/src/views/Validator.vue
index eaa035b..1e3a5de 100644
--- a/app/src/views/Validator.vue
+++ b/app/src/views/Validator.vue
@@ -8,104 +8,6 @@
<div class="col-auto">
<div class="box-login">
<div class="p-card p-component">
- <!-- <Form @submit="onSubmit" :validation-schema="schema" v-slot="{ errors }">
- <div class="field">
- <label>Title</label>
- <Field
- name="title"
- as="select"
- class="p-dropdown p-componet p-inputwrapper"
- :class="{ 'is-invalid': errors.title }"
- >
- <option class="p-dropdown-item" value="">Select your title</option>
- <option class="p-dropdown-item" value="Mr">Mr</option>
- <option class="p-dropdown-item" value="Mrs">Mrs</option>
- <option class="p-dropdown-item" value="Miss">Miss</option>
- <option class="p-dropdown-item" value="Ms">Ms</option>
- </Field>
- <div class="invalid-feedback">{{ errors.title }}</div>
- </div>
- <div class="field">
- <label>First Name</label>
- <Field
- name="firstName"
- type="text"
- class="p-inputtext p-component"
- :class="{ 'is-invalid': errors.firstName }"
- />
- <div class="invalid-feedback">{{ errors.firstName }}</div>
- </div>
- <div class="field">
- <label>Last Name</label>
- <Field
- name="lastName"
- type="text"
- class="p-inputtext p-component"
- :class="{ 'is-invalid': errors.lastName }"
- />
- <div class="invalid-feedback">{{ errors.lastName }}</div>
- </div>
- <div class="field">
- <label>Date of Birth</label>
- <Field
- name="dob"
- type="date"
- class="p-inputtext p-component"
- :class="{ 'is-invalid': errors.dob }"
- />
- <div class="invalid-feedback">{{ errors.dob }}</div>
- </div>
- <div class="field">
- <label>Email</label>
- <Field
- name="email"
- type="text"
- class="p-inputtext p-component"
- :class="{ 'is-invalid': errors.email }"
- />
- <div class="invalid-feedback">{{ errors.email }}</div>
- </div>
- <div class="field">
- <label>Password</label>
- <Field
- name="password"
- type="password"
- class="p-inputtext p-component"
- :class="{ 'is-invalid': errors.password }"
- />
- <div class="invalid-feedback">{{ errors.password }}</div>
- </div>
- <div class="field">
- <label>Confirm Password</label>
- <Field
- name="confirmPassword"
- type="password"
- class="p-inputtext p-component"
- :class="{ 'is-invalid': errors.confirmPassword }"
- />
- <div class="invalid-feedback">{{ errors.confirmPassword }}</div>
- </div>
- <div class="field">
- <Field
- name="acceptTerms"
- type="checkbox"
- id="acceptTerms"
- value="true"
- class="p-checkbox p-component"
- :class="{ 'is-invalid': errors.acceptTerms }"
- />
- <label for="acceptTerms" class="label-checkbox"
- >Accept Terms & Conditions</label
- >
- <div class="invalid-feedback">{{ errors.acceptTerms }}</div>
- </div>
- <div class="btn-wrapper">
- <button class="btn btn-submit" type="submit">
- <i class="isax isax-bold-tick-circle"></i>
- Submit
- </button>
- </div>
- </Form> -->
<FormKit
type="form"
id="validator-example"
@@ -117,10 +19,10 @@
<FormKit
type="select"
label="Select Salutation"
- placeholder="Select Salutation"
+ placeholder="Select Salutation"
name="salutation"
:options="['MR', 'MISS']"
- validation="required"
+ validation="required"
/>
<FormKit
type="text"
@@ -196,35 +98,6 @@
</div>
</template>
-<script>
- import * as Yup from "yup"
-
- export default {
- data() {
- return {
- schema: Yup.object().shape({
- title: Yup.string().required("Title is required"),
- firstName: Yup.string().required("First Name is required"),
- lastName: Yup.string().required("Last name is required"),
- dob: Yup.string()
- .required("Date of Birth is required")
- .matches(
- /^\d{4}-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/,
- "Date of Birth must be a valid date in the format YYYY-MM-DD"
- ),
- email: Yup.string().required("Email is required").email("Email is invalid"),
- password: Yup.string().min(6, "Password must be at least 6 characters").required("Password is required"),
- confirmPassword: Yup.string()
- .oneOf([Yup.ref("password"), null], "Passwords must match")
- .required("Confirm Password is required"),
- acceptTerms: Yup.string().required("Accept Ts & Cs is required"),
- }),
- onSubmit: (values) => {
- alert("SUCCESS!! :-)\n\n" + JSON.stringify(values, null, 4))
- },
- }
- },
- }
-</script>
+<script></script>
<style></style>
diff --git a/app/src/views/autoBL.vue b/app/src/views/autoBL.vue
index 15bcb28..03eac3c 100644
--- a/app/src/views/autoBL.vue
+++ b/app/src/views/autoBL.vue
@@ -1,75 +1,71 @@
<template>
- <div class="container-fluid" id="autoBL">
- <h2 class="title alt">
- <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
- Auto BL
- </h2>
- <div class="subtext">To check positive condition write "CoreStudio" string in input box</div>
- <div class="row justify-content-center">
- <div class="col-auto">
- <div class="box-login">
- <div class="p-card p-component">
- <div class="field">
- <div class="p-float-label">
- <input type="text" v-model="autobl.name" :class="autobl.name ? 'p-filled' : ''" id="bl"
- class="p-inputtext p-component">
- <label for="bl">Enter string</label>
- </div>
- </div>
- <div class="btn-wrapper">
- <button class="btn btn-submit" @click.prevent="autoblDemo">
- <i class="isax isax-bold-tick-circle"></i>
- Test
- </button>
- </div>
- <div class="field mt-4">
- <h3>Result</h3>
- <json-viewer :value="autoblResult" boxed :expanded="true"></json-viewer>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
-
+ <div class="container-fluid" id="autoBL">
+ <h2 class="title alt">
+ <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
+ Auto BL
+ </h2>
+ <div class="subtext">To check positive condition write "CoreStudio" string in input box</div>
+ <div class="row justify-content-center">
+ <div class="col-auto">
+ <div class="box-login">
+ <div class="p-card p-component">
+ <div class="field">
+ <div class="p-float-label">
+ <input
+ type="text"
+ v-model="autobl.name"
+ :class="autobl.name ? 'p-filled' : ''"
+ id="bl"
+ class="p-inputtext p-component"
+ />
+ <label for="bl">Enter string</label>
+ </div>
+ </div>
+ <div class="btn-wrapper">
+ <button class="btn btn-submit" @click.prevent="autoblDemo">
+ <i class="isax isax-bold-tick-circle"></i>
+ Test
+ </button>
+ </div>
+ <div class="field mt-4">
+ <h3>Result</h3>
+ <json-viewer :value="autoblResult" boxed :expanded="true"></json-viewer>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
-<script>
-import MQL from '@/plugins/mql.js'
-import jsonViewer from 'vue-json-viewer'
-export default {
- data() {
- return {
- autobl: {},
- autoblResult: ''
- }
- },
- components: {
- jsonViewer
- },
- methods: {
- autoblDemo() {
- new MQL()
- .setActivity('o.[AutoBLDemo]')
- .setData(this.autobl)
- .fetch()
- .then((rs) => {
- let res = rs.getActivity('AutoBLDemo', true)
- if (rs.isValid('AutoBLDemo')) {
- this.autobl = {}
- this.autoblResult = res.result
- } else {
- rs.showErrorToast('AutoBLDemo')
- }
- })
- }
- }
-}
+<script setup>
+ import MQL from "@/plugins/mql.js"
+ import jsonViewer from "vue-json-viewer"
+ import { ref } from "vue"
+
+ let autobl = ref({})
+ let autoblResult = ref({})
+
+ function autoblDemo() {
+ new MQL()
+ .setActivity("o.[AutoBLDemo]")
+ .setData(autobl.value)
+ .fetch()
+ .then((rs) => {
+ let res = rs.getActivity("AutoBLDemo", true)
+ if (rs.isValid("AutoBLDemo")) {
+ autobl.value = {}
+ autoblResult.value = res.result
+ } else {
+ rs.showErrorToast("AutoBLDemo")
+ }
+ })
+ }
</script>
<style lang="scss" scoped>
-.subtext {
- margin-left: 3rem;
- margin-top: 0.75rem;
-}
-</style>
\ No newline at end of file
+ .subtext {
+ margin-left: 3rem;
+ margin-top: 0.75rem;
+ }
+</style>
diff --git a/app/src/views/email.vue b/app/src/views/email.vue
index acf67b5..6de5c12 100644
--- a/app/src/views/email.vue
+++ b/app/src/views/email.vue
@@ -1,70 +1,40 @@
<template>
- <div class="container-fluid">
- <h2 class="title alt">
- <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
- Email
- </h2>
- <div class="row justify-content-center">
- <div class="col-6">
- <div class="box-login clickable" @click.prevent="sendStatic">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-sms"></i>
- </div>
- <div class="bx-login-name">
- Send Static Email Example
- </div>
- </div>
- </div>
- </div>
- <div class="col-6">
- <div class="box-login clickable" @click.prevent="sendDynamic">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-sms-tracking"></i>
- </div>
- <div class="bx-login-name">
- Send Dynamic Email Example
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
+ <div class="container-fluid">
+ <h2 class="title alt">
+ <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
+ Email
+ </h2>
+ <div class="row justify-content-center">
+ <div class="tabs">
+ <a
+ class="tab tab-bordered"
+ @click="sendStatic"
+ :class="active == 0 ? 'tab-active' : ''"
+ @click.prevent="active = 0"
+ >
+ Send Static Email Example</a
+ >
+ <a
+ class="tab tab-bordered"
+ @click="sendDynamic"
+ :class="active == 1 ? 'tab-active' : ''"
+ @click.prevent="active = 1"
+ >Send Dynamic Email Example</a
+ >
+ </div>
+ </div>
+ </div>
+</template>
-<script>
-import MQL from '@/plugins/mql.js'
-export default {
- data () {
- return {
- email: {}
- }
- },
- components: {
- },
- methods: {
- sendDynamic () {
- this.$router.push('/sendDynamicEmails')
- },
- sendStatic () {
- this.$router.push('/sendStaticEmails')
- },
- sendemail () {
- new MQL()
- .setActivity('o.[SendEmail]')
- .setData(this.email)
- .fetch()
- .then((rs) => {
- rs.getActivity('SendEmail', true)
- if (rs.isValid('SendEmail')) {
- this.email = {}
- this.$toast.add({severity:'success', summary: 'Email Sent ', detail:'Email Sent Successfully', life: 3000})
- } else {
- rs.showErrorToast('SendEmail')
- }
- })
- }
- }
-}
-</script>
\ No newline at end of file
+<script setup>
+ import { useRouter } from "vue-router"
+
+ const route = useRouter()
+
+ function sendDynamic() {
+ route.push("/sendDynamicEmails")
+ }
+ function sendStatic() {
+ route.push("/sendStaticEmails")
+ }
+</script>
diff --git a/app/src/views/generateOTP.vue b/app/src/views/generateOTP.vue
index 19b7a83..af32ec8 100644
--- a/app/src/views/generateOTP.vue
+++ b/app/src/views/generateOTP.vue
@@ -31,42 +31,32 @@
</div>
</template>
-<script>
+<script setup>
import MQL from '@/plugins/mql.js'
+import { ref } from 'vue'
import jsonViewer from 'vue-json-viewer'
-export default {
- data () {
- return {
- otp: {},
- result: ''
- }
- },
- components: {
- jsonViewer
- },
- methods: {
- onCopy () {
- this.$toast.add({severity:'info', summary: 'OTP ', detail:'You just copied OTP', life: 3000})
- },
- onError () {
- this.$toast.add({severity:'error', summary: 'OTP ', detail:'Failed to get OTP', life: 3000})
- },
- generateOTP () {
+ let otp = ref({})
+ let result = ref({})
+ function onCopy () {
+ toast.add({severity:'info', summary: 'OTP ', detail:'You just copied OTP', life: 3000})
+ }
+ function onError () {
+ toast.add({severity:'error', summary: 'OTP ', detail:'Failed to get OTP', life: 3000})
+ }
+ function generateOTP () {
new MQL()
.setActivity('o.[smsOTP]')
- .setData(this.otp)
+ .setData(otp.value)
.fetch()
.then((rs) => {
let res = rs.getActivity('smsOTP', true)
if (rs.isValid('smsOTP')) {
- this.otp = {}
- this.result = res.result
- this.$toast.add({severity:'success', summary: 'OTP ', detail:'OTP Sent Successfully', life: 3000})
+ otp.value = {}
+ result.value = res.result
+ toast.add({severity:'success', summary: 'OTP ', detail:'OTP Sent Successfully', life: 3000})
} else {
rs.showErrorToast('smsOTP')
}
})
}
- }
-}
</script>
\ No newline at end of file
diff --git a/app/src/views/insertCustomMongoId.vue b/app/src/views/insertCustomMongoId.vue
index 6df3942..eb730c3 100644
--- a/app/src/views/insertCustomMongoId.vue
+++ b/app/src/views/insertCustomMongoId.vue
@@ -1,84 +1,38 @@
<template>
- <div id="customMongoID" class="container-fluid">
- <h2 class="title alt">
- <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
- Insert Any Custom MongoDB ID
- </h2>
- <div class="row justify-content-center">
- <div class="col-6">
- <div class="box-login clickable" @click.prevent="customIDPush">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-data"></i>
- <div class="bx-login-name">
- Custom ID Example
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="col-6">
- <div class="box-login clickable" @click.prevent="hexIDPush">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-data"></i>
- <div class="bx-login-name">
- Hex ID Example
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
+ <div id="customMongoID" class="container-fluid">
+ <h2 class="title alt">
+ <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
+ Insert Any Custom MongoDB ID
+ </h2>
+ <div class="row justify-content-center">
+ <div class="tabs">
+ <a class="tab tab-bordered" :class="active == 0 ? 'tab-active' : ''" @click.prevent="active = 0">
+ Custom ID Example</a
+ >
+ <a class="tab tab-bordered" :class="active == 1 ? 'tab-active' : ''" @click.prevent="active = 1">
+ Hex ID Example</a
+ >
+ </div>
+ </div>
+ <div class="mt-3">
+ <customID v-if="active == 0"></customID>
+ <hexID v-if="active == 1"></hexID>
+ </div>
+ </div>
</template>
-<script>
-import MQL from '@/plugins/mql.js'
-export default {
- data () {
- return {
- obj: {},
- hobj: {}
- }
- },
- methods: {
- customIDPush () {
- this.$router.push('/customID')
- },
- hexIDPush () {
- this.$router.push('/hexID')
- },
- saveCustomId () {
- new MQL()
- .setActivity('o.[SaveCustomObjectID]')
- .setData(this.obj)
- .fetch()
- .then((rs) => {
- rs.getActivity('SaveCustomObjectID', true)
- if (rs.isValid('SaveCustomObjectID')) {
- this.obj = {}
- alert('Custom objectId saved successfully')
- } else {
- rs.showErrorToast('SaveCustomObjectID')
- }
- })
- },
- saveCustomHexId () {
- new MQL()
- .setActivity('o.[SaveCustomHexObjectID]')
- .setData(this.hobj)
- .fetch()
- .then((rs) => {
- rs.getActivity('SaveCustomHexObjectID', true)
- if (rs.isValid('SaveCustomHexObjectID')) {
- this.hobj = {}
- alert('Custom hex objectId saved successfully')
- } else {
- rs.showErrorToast('SaveCustomHexObjectID')
- }
- })
- }
- }
-}
-</script>
\ No newline at end of file
+<script setup>
+ import { ref } from "vue"
+ import customID from "../components/mongodbID/customID.vue"
+ import hexID from "../components/mongodbID/hexID.vue"
+
+ const active = ref(0)
+ const items = ref([
+ {
+ label: "Custom ID Example",
+ },
+ {
+ label: "Hex ID Example",
+ },
+ ])
+</script>
diff --git a/app/src/views/otp.vue b/app/src/views/otp.vue
index 2e89131..cbc5dfb 100644
--- a/app/src/views/otp.vue
+++ b/app/src/views/otp.vue
@@ -33,40 +33,16 @@
</div>
</template>
-<script>
-import MQL from '@/plugins/mql.js'
-export default {
- data () {
- return {
- otp: {},
- otpResult: ''
+<script setup>
+import { useRouter } from 'vue-router'
+
+ const router = useRouter()
+
+ function generated () {
+ router.push('/generateOTP')
}
- },
- components: {
- },
- methods: {
- generated () {
- this.$router.push('/generateOTP')
- },
- verified () {
- this.$router.push('/validateOTP')
- },
- generateOTP () {
- new MQL()
- .setActivity('o.[SendOTP]')
- .setData(this.otp)
- .fetch()
- .then((rs) => {
- let res = rs.getActivity('SendOTP', true)
- if (rs.isValid('SendOTP')) {
- this.otp = {}
- this.otpResult = res.result
- this.$toast.add({severity:'success', summary: 'OTP', detail:'OTP generated successfully', life: 3000})
- } else {
- rs.showErrorToast('SendOTP')
- }
- })
+ function verified () {
+ router.push('/validateOTP')
}
- }
-}
+
</script>
\ No newline at end of file
diff --git a/app/src/views/sendDynamicEmails.vue b/app/src/views/sendDynamicEmails.vue
index 48e8ed4..2a570e7 100644
--- a/app/src/views/sendDynamicEmails.vue
+++ b/app/src/views/sendDynamicEmails.vue
@@ -33,32 +33,24 @@
</div>
</template>
-<script>
+<script setup>
import MQL from '@/plugins/mql.js'
-export default {
- data () {
- return {
- email: {}
- }
- },
- components: {
- },
- methods: {
- submitDynamic () {
+import { ref } from 'vue';
+ let email = ref({})
+
+ function submitDynamic () {
new MQL()
.setActivity('o.[SendDynamicEmails]')
- .setData(this.email)
+ .setData(email.value)
.fetch()
.then((rs) => {
rs.getActivity('SendDynamicEmails', true)
if (rs.isValid('SendDynamicEmails')) {
- this.email = {}
- this.$toast.add({severity:'success', summary: 'Email Sent ', detail:'Email Sent Successfully', life: 3000})
+ email.value = {}
+ toast.add({severity:'success', summary: 'Email Sent ', detail:'Email Sent Successfully', life: 3000})
} else {
rs.showErrorToast('SendDynamicEmails')
}
})
}
- }
-}
</script>
diff --git a/app/src/views/sendDynamicMessages.vue b/app/src/views/sendDynamicMessages.vue
index 63ec2c4..f8a7aa0 100644
--- a/app/src/views/sendDynamicMessages.vue
+++ b/app/src/views/sendDynamicMessages.vue
@@ -39,31 +39,23 @@
</div>
</template>
-<script>
+<script setup>
import MQL from '@/plugins/mql.js'
-export default {
- data () {
- return {
- sms: {}
- }
- },
-
- methods: {
- sendDynamicMessages () {
+import { ref } from 'vue'
+ let sms = ref({})
+ function sendDynamicMessages () {
new MQL()
.setActivity('o.[SendDynamicMessages]')
- .setData(this.sms)
+ .setData(sms.value)
.fetch()
.then((rs) => {
rs.getActivity('SendDynamicMessages', true)
if (rs.isValid('SendDynamicMessages')) {
- this.sms = {}
- this.$toast.add({severity:'success', summary: 'SMS Sent ', detail:'SMS Sent Successfully', life: 3000})
+ sms.value = {}
+ toast.add({severity:'success', summary: 'SMS Sent ', detail:'SMS Sent Successfully', life: 3000})
} else {
rs.showErrorToast('SendDynamicMessages')
}
})
}
- }
-}
</script>
\ No newline at end of file
diff --git a/app/src/views/sendStaticEmails.vue b/app/src/views/sendStaticEmails.vue
index ee7dc3d..b3b40cb 100644
--- a/app/src/views/sendStaticEmails.vue
+++ b/app/src/views/sendStaticEmails.vue
@@ -1,57 +1,57 @@
<template>
- <div class="container-fluid">
- <h2 class="title alt">
- <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
- Static Email
- </h2>
- <div class="row justify-content-center">
- <div class="col-auto">
- <div class="box-login">
- <div class="p-card p-component">
- <div class="field">
- <div class="p-float-label">
- <input type="email" v-model="email.to" class="p-inputtext p-component" :class="email.to ? 'p-filled' : ''" id="email" required>
- <label for="email">Enter Email ID</label>
- </div>
- </div>
- <div class="btn-wrapper">
- <button class="btn btn-submit" @click.prevent="sendemail" >
- <i class="isax isax-bold-sms"></i>
- Send Email
- </button>
- </div>
- </div>
- </div>
- </div>
- </div>
-</div>
+ <div class="container-fluid">
+ <h2 class="title alt">
+ <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
+ Static Email
+ </h2>
+ <div class="row justify-content-center">
+ <div class="col-auto">
+ <div class="box-login">
+ <div class="p-card p-component">
+ <div class="field">
+ <div class="p-float-label">
+ <input
+ type="email"
+ v-model="email.to"
+ class="p-inputtext p-component"
+ :class="email.to ? 'p-filled' : ''"
+ id="email"
+ required
+ />
+ <label for="email">Enter Email ID</label>
+ </div>
+ </div>
+ <div class="btn-wrapper">
+ <button class="btn btn-submit" @click.prevent="sendemail">
+ <i class="isax isax-bold-sms"></i>
+ Send Email
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
-<script>
-import MQL from '@/plugins/mql.js'
-export default {
- data () {
- return {
- email: {}
- }
- },
+<script setup>
+ import MQL from "@/plugins/mql.js"
+ import { ref } from "vue"
+ let email = ref({})
- methods: {
- sendemail () {
- new MQL()
- .setActivity('o.[SendEmails]')
- .setData(this.email)
- .fetch()
- .then((rs) => {
- rs.getActivity('SendEmails', true)
- if (rs.isValid('SendEmails')) {
- this.email = {}
- this.$toast.add({severity:'success', summary: 'Email Sent ', detail:'Email Sent Successfully', life: 3000})
- } else {
- rs.showErrorToast('SendEmails')
- }
- })
- }
- }
-}
-</script>
\ No newline at end of file
+ function sendemail() {
+ new MQL()
+ .setActivity("o.[SendEmails]")
+ .setData(email.value)
+ .fetch()
+ .then((rs) => {
+ rs.getActivity("SendEmails", true)
+ if (rs.isValid("SendEmails")) {
+ email.value = {}
+ toast.add({ severity: "success", summary: "Email Sent ", detail: "Email Sent Successfully", life: 3000 })
+ } else {
+ rs.showErrorToast("SendEmails")
+ }
+ })
+ }
+</script>
diff --git a/app/src/views/sendStaticMessages.vue b/app/src/views/sendStaticMessages.vue
index 244360a..0c56ad7 100644
--- a/app/src/views/sendStaticMessages.vue
+++ b/app/src/views/sendStaticMessages.vue
@@ -1,66 +1,69 @@
<template>
-<div class="container-fluid">
- <h2 class="title alt">
- <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
- Static Messages
- </h2>
- <div class="row justify-content-center">
- <div class="col-auto">
- <div class="box-login">
- <div class="p-card p-component">
- <div class="field">
- <div class="p-float-label">
- <input type="text" v-model="msg.number" class="p-inputtext p-component" :class="msg.number ? 'p-filled' : ''" id="number">
- <label for="number">Enter mobile number</label>
- </div>
- <div class="mt-1">
- <small><b>{{ text }}</b></small>
- </div>
- <div class="mt-1">
- <small><b>{{ alert }}</b></small>
- </div>
- </div>
- <div class="btn-wrapper">
- <button class="btn btn-submit" @click.prevent="mysms">
- <i class="isax isax-bold-sms"></i>
- Send
- </button>
- </div>
- </div>
- </div>
- </div>
- </div>
-</div>
+ <div class="container-fluid">
+ <h2 class="title alt">
+ <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
+ Static Messages
+ </h2>
+ <div class="row justify-content-center">
+ <div class="col-auto">
+ <div class="box-login">
+ <div class="p-card p-component">
+ <div class="field">
+ <div class="p-float-label">
+ <input
+ type="text"
+ v-model="msg.number"
+ class="p-inputtext p-component"
+ :class="msg.number ? 'p-filled' : ''"
+ id="number"
+ />
+ <label for="number">Enter mobile number</label>
+ </div>
+ <div class="mt-1">
+ <small
+ ><b>{{ text }}</b></small
+ >
+ </div>
+ <div class="mt-1">
+ <small
+ ><b>{{ alert }}</b></small
+ >
+ </div>
+ </div>
+ <div class="btn-wrapper">
+ <button class="btn btn-submit" @click.prevent="mysms">
+ <i class="isax isax-bold-sms"></i>
+ Send
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
-<script>
-import MQL from '@/plugins/mql.js'
-export default {
- data () {
- return {
- number: null,
- text: null,
- alert: null,
- msg: {}
- }
- },
+<script setup>
+ import MQL from "@/plugins/mql.js"
+ import { ref } from "vue"
+ let number = ref(null)
+ let text = ref(null)
+ let alert = ref(null)
+ let msg = ref({})
- methods: {
- mysms () {
- new MQL()
- .setActivity('o.[MySMSTestActivity]')
- .setData(this.msg)
- .fetch()
- .then((rs) => {
- rs.getActivity('MySMSTestActivity', true)
- if (rs.isValid('MySMSTestActivity')) {
- this.sms = {}
- this.$toast.add({severity:'success', summary: 'SMS Sent ', detail:'SMS Sent Successfully', life: 3000})
- } else {
- rs.showErrorToast('MySMSTestActivity')
- }
- })
- }
- }
-}
-</script>
\ No newline at end of file
+ function mysms() {
+ new MQL()
+ .setActivity("o.[MySMSTestActivity]")
+ .setData(msg.value)
+ .fetch()
+ .then((rs) => {
+ rs.getActivity("MySMSTestActivity", true)
+ if (rs.isValid("MySMSTestActivity")) {
+ // sms = {}
+ toast.add({ severity: "success", summary: "SMS Sent ", detail: "SMS Sent Successfully", life: 3000 })
+ } else {
+ rs.showErrorToast("MySMSTestActivity")
+ }
+ })
+ }
+</script>
diff --git a/app/src/views/sms.vue b/app/src/views/sms.vue
index 3c9ff93..323ea3a 100644
--- a/app/src/views/sms.vue
+++ b/app/src/views/sms.vue
@@ -1,70 +1,40 @@
<template>
-<div class="container-fluid">
- <h2 class="title alt">
- <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
- SMS
- </h2>
- <div class="row justify-content-center">
- <div class="col-6">
- <div class="box-login clickable" @click.prevent="staticPage">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-sms"></i>
- </div>
- <div class="bx-login-name">
- Send Static Message Example
- </div>
- </div>
- </div>
- </div>
- <div class="col-6">
- <div class="box-login clickable" @click.prevent="dynamicPage">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-sms"></i>
- </div>
- <div class="bx-login-name">
- Send Dynamic Message Example
- </div>
- </div>
- </div>
- </div>
- </div>
-</div>
+ <div class="container-fluid">
+ <h2 class="title alt">
+ <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
+ SMS
+ </h2>
+ <div class="row justify-content-center">
+ <div class="tabs">
+ <a
+ class="tab tab-bordered"
+ @click="staticPage"
+ :class="active == 0 ? 'tab-active' : ''"
+ @click.prevent="active = 0"
+ >
+ Send Static Message Example</a
+ >
+ <a
+ class="tab tab-bordered"
+ @click="dynamicPage"
+ :class="active == 1 ? 'tab-active' : ''"
+ @click.prevent="active = 1"
+ >Send Dynamic Message Example</a
+ >
+ </div>
+ </div>
+ </div>
</template>
-<script>
-import MQL from '@/plugins/mql.js'
-export default {
- data () {
- return {
- sms: {}
- }
- },
+<script setup>
+ import { useRouter } from "vue-router"
- methods: {
- staticPage () {
- this.$router.push('/sendStaticMessages')
- },
- dynamicPage () {
- this.$router.push('/sendDynamicMessages')
- },
+ const router = useRouter()
- sendsms () {
- new MQL()
- .setActivity('o.[SendSMS]')
- .setData(this.sms)
- .fetch()
- .then((rs) => {
- rs.getActivity('SendSMS', true)
- if (rs.isValid('SendSMS')) {
- this.sms = {}
- this.$toast.add({severity:'success', summary: 'SMS Sent ', detail:'SMS sent successfully', life: 3000})
- } else {
- rs.showErrorToast('SendSMS')
- }
- })
- }
- }
-}
-</script>
\ No newline at end of file
+ function staticPage() {
+ router.push("/sendStaticMessages")
+ }
+ function dynamicPage() {
+ router.push("/sendDynamicMessages")
+ }
+</script>
diff --git a/app/src/views/tailwindForm.vue b/app/src/views/tailwindForm.vue
index 3cf9e96..98b5449 100644
--- a/app/src/views/tailwindForm.vue
+++ b/app/src/views/tailwindForm.vue
@@ -1,178 +1,119 @@
<template>
- <div>
-
-
-
-
-<h1>Table 1</h1>
-
-<div class="relative overflow-x-auto">
- <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
- <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
- <tr>
- <th scope="col" class="px-6 py-3">
- Product name
- </th>
- <th scope="col" class="px-6 py-3">
- Color
- </th>
- <th scope="col" class="px-6 py-3">
- Category
- </th>
- <th scope="col" class="px-6 py-3">
- Price
- </th>
- </tr>
- </thead>
- <tbody>
- <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
- <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
- Apple MacBook Pro 17"
- </th>
- <td class="px-6 py-4">
- Silver
- </td>
- <td class="px-6 py-4">
- Laptop
- </td>
- <td class="px-6 py-4">
- $2999
- </td>
- </tr>
- <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
- <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
- Microsoft Surface Pro
- </th>
- <td class="px-6 py-4">
- White
- </td>
- <td class="px-6 py-4">
- Laptop PC
- </td>
- <td class="px-6 py-4">
- $1999
- </td>
- </tr>
- <tr class="bg-white dark:bg-gray-800">
- <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
- Magic Mouse 2
- </th>
- <td class="px-6 py-4">
- Black
- </td>
- <td class="px-6 py-4">
- Accessories
- </td>
- <td class="px-6 py-4">
- $99
- </td>
- </tr>
- </tbody>
- </table>
-</div>
-
-
-
-<H1>Table 2</H1>
- <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
- <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
- <thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
- <tr>
- <th scope="col" class="px-6 py-3 bg-gray-50 dark:bg-gray-800">
- Product name
- </th>
- <th scope="col" class="px-6 py-3">
- Color
- </th>
- <th scope="col" class="px-6 py-3 bg-gray-50 dark:bg-gray-800">
- Category
- </th>
- <th scope="col" class="px-6 py-3">
- Price
- </th>
- </tr>
- </thead>
- <tbody>
- <tr class="border-b border-gray-200 dark:border-gray-700">
- <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800">
- Apple MacBook Pro 17"
- </th>
- <td class="px-6 py-4">
- Silver
- </td>
- <td class="px-6 py-4 bg-gray-50 dark:bg-gray-800">
- Laptop
- </td>
- <td class="px-6 py-4">
- $2999
- </td>
- </tr>
- <tr class="border-b border-gray-200 dark:border-gray-700">
- <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800">
- Microsoft Surface Pro
- </th>
- <td class="px-6 py-4">
- White
- </td>
- <td class="px-6 py-4 bg-gray-50 dark:bg-gray-800">
- Laptop PC
- </td>
- <td class="px-6 py-4">
- $1999
- </td>
- </tr>
- <tr class="border-b border-gray-200 dark:border-gray-700">
- <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800">
- Magic Mouse 2
- </th>
- <td class="px-6 py-4">
- Black
- </td>
- <td class="px-6 py-4 bg-gray-50 dark:bg-gray-800">
- Accessories
- </td>
- <td class="px-6 py-4">
- $99
- </td>
- </tr>
- <tr class="border-b border-gray-200 dark:border-gray-700">
- <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800">
- Google Pixel Phone
- </th>
- <td class="px-6 py-4">
- Gray
- </td>
- <td class="px-6 py-4 bg-gray-50 dark:bg-gray-800">
- Phone
- </td>
- <td class="px-6 py-4">
- $799
- </td>
- </tr>
- <tr>
- <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800">
- Apple Watch 5
- </th>
- <td class="px-6 py-4">
- Red
- </td>
- <td class="px-6 py-4 bg-gray-50 dark:bg-gray-800">
- Wearables
- </td>
- <td class="px-6 py-4">
- $999
- </td>
- </tr>
- </tbody>
- </table>
-</div>
-
-
-
-
-</div>
+ <div>
+ <h2 class="title alt">
+ <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
+ Dashboard
+ </h2>
+ <h1>Table 1</h1>
+ <div class="relative overflow-x-auto">
+ <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+ <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+ <tr>
+ <th scope="col" class="px-6 py-3">Product name</th>
+ <th scope="col" class="px-6 py-3">Color</th>
+ <th scope="col" class="px-6 py-3">Category</th>
+ <th scope="col" class="px-6 py-3">Price</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+ <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+ Apple MacBook Pro 17"
+ </th>
+ <td class="px-6 py-4">Silver</td>
+ <td class="px-6 py-4">Laptop</td>
+ <td class="px-6 py-4">$2999</td>
+ </tr>
+ <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+ <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+ Microsoft Surface Pro
+ </th>
+ <td class="px-6 py-4">White</td>
+ <td class="px-6 py-4">Laptop PC</td>
+ <td class="px-6 py-4">$1999</td>
+ </tr>
+ <tr class="bg-white dark:bg-gray-800">
+ <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+ Magic Mouse 2
+ </th>
+ <td class="px-6 py-4">Black</td>
+ <td class="px-6 py-4">Accessories</td>
+ <td class="px-6 py-4">$99</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <H1>Table 2</H1>
+ <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
+ <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+ <thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
+ <tr>
+ <th scope="col" class="px-6 py-3 bg-gray-50 dark:bg-gray-800">Product name</th>
+ <th scope="col" class="px-6 py-3">Color</th>
+ <th scope="col" class="px-6 py-3 bg-gray-50 dark:bg-gray-800">Category</th>
+ <th scope="col" class="px-6 py-3">Price</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr class="border-b border-gray-200 dark:border-gray-700">
+ <th
+ scope="row"
+ class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
+ >
+ Apple MacBook Pro 17"
+ </th>
+ <td class="px-6 py-4">Silver</td>
+ <td class="px-6 py-4 bg-gray-50 dark:bg-gray-800">Laptop</td>
+ <td class="px-6 py-4">$2999</td>
+ </tr>
+ <tr class="border-b border-gray-200 dark:border-gray-700">
+ <th
+ scope="row"
+ class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
+ >
+ Microsoft Surface Pro
+ </th>
+ <td class="px-6 py-4">White</td>
+ <td class="px-6 py-4 bg-gray-50 dark:bg-gray-800">Laptop PC</td>
+ <td class="px-6 py-4">$1999</td>
+ </tr>
+ <tr class="border-b border-gray-200 dark:border-gray-700">
+ <th
+ scope="row"
+ class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
+ >
+ Magic Mouse 2
+ </th>
+ <td class="px-6 py-4">Black</td>
+ <td class="px-6 py-4 bg-gray-50 dark:bg-gray-800">Accessories</td>
+ <td class="px-6 py-4">$99</td>
+ </tr>
+ <tr class="border-b border-gray-200 dark:border-gray-700">
+ <th
+ scope="row"
+ class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
+ >
+ Google Pixel Phone
+ </th>
+ <td class="px-6 py-4">Gray</td>
+ <td class="px-6 py-4 bg-gray-50 dark:bg-gray-800">Phone</td>
+ <td class="px-6 py-4">$799</td>
+ </tr>
+ <tr>
+ <th
+ scope="row"
+ class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
+ >
+ Apple Watch 5
+ </th>
+ <td class="px-6 py-4">Red</td>
+ <td class="px-6 py-4 bg-gray-50 dark:bg-gray-800">Wearables</td>
+ <td class="px-6 py-4">$999</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
</template>
-<script>
-
-</script>
\ No newline at end of file
+<script></script>
diff --git a/app/src/views/updateUserDataUsingBL.vue b/app/src/views/updateUserDataUsingBL.vue
index afdcebb..22421c5 100644
--- a/app/src/views/updateUserDataUsingBL.vue
+++ b/app/src/views/updateUserDataUsingBL.vue
@@ -1,83 +1,36 @@
<template>
- <div id="updateUsingBl" class="container-fluid">
- <h2 class="title alt">
- <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
- Update Data using BL
- </h2>
- <div class="row justify-content-center">
- <div class="col-6">
- <div class="box-login clickable" @click.prevent="updateUserPush">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-refresh"></i>
- </div>
- <div class="bx-login-name">
- Update user data
- </div>
- </div>
- </div>
- </div>
- <div class="col-6">
- <div class="box-login clickable" @click.prevent="updateDbSave">
- <div class="p-card p-component">
- <div class="icon-holder">
- <i class="isax isax-bold-document-download"></i>
- </div>
- <div class="bx-login-name">
- Updated and Save to Database
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
+ <div id="updateUsingBl" class="container-fluid">
+ <h2 class="title alt">
+ <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
+ Update Data using BL
+ </h2>
+ <div class="row justify-content-center">
+ <div class="tabs">
+ <a class="tab tab-bordered" :class="active == 0 ? 'tab-active' : ''" @click.prevent="active = 0">
+ Update user data</a
+ >
+ <a class="tab tab-bordered" :class="active == 1 ? 'tab-active' : ''" @click.prevent="active = 1"
+ >Updated and Save to Database</a
+ >
+ </div>
+ <div class="mt-3">
+ <update-user v-if="active == 0"></update-user>
+ <update-db-save v-if="active == 1"></update-db-save>
+ </div>
+ </div>
+ </div>
</template>
-<script>
-import MQL from '@/plugins/mql.js'
-export default {
- data () {
- return {
- obj: {},
- sobj: {},
- result: ''
- }
- },
- methods: {
- updateUserPush () {
- this.$router.push('/updateUser')
- },
- updateDbSave () {
- this.$router.push('/updateDbSave')
- },
- updateObjectUsingBL () {
- new MQL()
- .setActivity('o.[UpdateObjectUsingBL]')
- .setData(this.obj)
- .fetch()
- .then((rs) => {
- let res = rs.getActivity('UpdateObjectUsingBL', true)
- if (rs.isValid('UpdateObjectUsingBL')) {
- alert('Data update success')
- this.result = res.result
- } else {
- rs.showErrorToast('UpdateObjectUsingBL')
- }
- })
- },
- updateObjectUsingBLAndSave () {
- new MQL()
- .setActivity('o.[UpdateObjectUsingBLAndSave]')
- .setData(this.sobj)
- .fetch()
- .then((rs) => {
- rs.getActivity('UpdateObjectUsingBLAndSave', true)
- if (rs.isValid('UpdateObjectUsingBLAndSave')) {
- alert('Data update & save success')
- } else {
- rs.showErrorToast('UpdateObjectUsingBLAndSave')
- }
- })
- }
- }
-}
-</script>
\ No newline at end of file
+<script setup>
+ import { ref } from "vue"
+ import updateUser from "../components/BL/updateUser.vue"
+ import updateDbSave from "../components/BL/updateDbSave.vue"
+ const active = ref(0)
+ const items = ref([
+ {
+ label: "Update User",
+ },
+ {
+ label: "Update and Save in Database",
+ },
+ ])
+</script>
diff --git a/app/src/views/validateOTP.vue b/app/src/views/validateOTP.vue
index 1cd1a87..009f3a5 100644
--- a/app/src/views/validateOTP.vue
+++ b/app/src/views/validateOTP.vue
@@ -1,65 +1,69 @@
<template>
- <div class="container-fluid">
- <h2 class="title alt">
- <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
- Verify OTP
- </h2>
- <div class="row justify-content-center">
- <div class="col-auto">
- <div class="box-login">
- <div class="p-card p-component">
- <div class="field">
- <div class="p-float-label">
- <input type="text" class="p-inputtext p-component" :class="otp.number ? 'p-filled' : ''" id="number" v-model="otp.number">
- <label for="number">Enter mobile number</label>
- </div>
- </div>
- <div class="field">
- <div class="p-float-label">
- <input type="text" class="p-inputtext p-component" :class="otp.result ? 'p-filled' : ''" id="result" v-model="otp.result">
- <label for="result">Enter generated otp</label>
- </div>
- </div>
- <div class="btn-wrapper">
- <button class="btn btn-submit" @click.prevent="validateOTP">
- <i class="isax isax-bold-message-edit"></i>
- Verify
- </button>
- </div>
- </div>
- </div>
- </div>
- </div>
-</div>
+ <div class="container-fluid">
+ <h2 class="title alt">
+ <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
+ Verify OTP
+ </h2>
+ <div class="row justify-content-center">
+ <div class="col-auto">
+ <div class="box-login">
+ <div class="p-card p-component">
+ <div class="field">
+ <div class="p-float-label">
+ <input
+ type="text"
+ class="p-inputtext p-component"
+ :class="otp.number ? 'p-filled' : ''"
+ id="number"
+ v-model="otp.number"
+ />
+ <label for="number">Enter mobile number</label>
+ </div>
+ </div>
+ <div class="field">
+ <div class="p-float-label">
+ <input
+ type="text"
+ class="p-inputtext p-component"
+ :class="otp.result ? 'p-filled' : ''"
+ id="result"
+ v-model="otp.result"
+ />
+ <label for="result">Enter generated otp</label>
+ </div>
+ </div>
+ <div class="btn-wrapper">
+ <button class="btn btn-submit" @click.prevent="validateOTP">
+ <i class="isax isax-bold-message-edit"></i>
+ Verify
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
-<script>
-import MQL from '@/plugins/mql.js'
-export default {
- data () {
- return {
- otp: {},
- result: ''
- }
- },
-
- methods: {
- validateOTP () {
- new MQL()
- .setActivity('o.[smsOTP]')
- .setData(this.otp)
- .fetch()
- .then((rs) => {
- let res = rs.getActivity('smsOTP', true)
- if (rs.isValid('smsOTP')) {
- this.otp = {}
- this.result = res.result
- this.$toast.add({severity:'success', summary: 'OTP ', detail:'OTP is verified', life: 3000})
- } else {
- rs.showErrorToast('smsOTP')
- }
- })
- }
- }
-}
-</script>
\ No newline at end of file
+<script setup>
+ import MQL from "@/plugins/mql.js"
+ import { ref } from "vue"
+ let otp = ref({})
+ let result = ref({})
+ function validateOTP() {
+ new MQL()
+ .setActivity("o.[smsOTP]")
+ .setData(otp.value)
+ .fetch()
+ .then((rs) => {
+ let res = rs.getActivity("smsOTP", true)
+ if (rs.isValid("smsOTP")) {
+ otp.value = {}
+ result.value = res.result
+ toast.add({ severity: "success", summary: "OTP ", detail: "OTP is verified", life: 3000 })
+ } else {
+ rs.showErrorToast("smsOTP")
+ }
+ })
+ }
+</script>
diff --git a/app/src/views/vueClipboard.vue b/app/src/views/vueClipboard.vue
index 5a5a752..fb0bdcc 100644
--- a/app/src/views/vueClipboard.vue
+++ b/app/src/views/vueClipboard.vue
@@ -1,50 +1,47 @@
<template>
- <div class="container-fluid">
- <h2 class="title alt">
- <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
- Clipboard Demo
- </h2>
- <div class="row justify-content-center">
- <div class="col-auto">
- <div class="box-login">
- <div class="p-card p-component">
- <div class="field">
- <div >
- <textarea class="p-inputtext p-component" v-model="content" rows="5" cols="90"/>
- </div>
- </div>
- <div class="btn-wrapper">
- <button ref="container" class="btn btn-submit" @click="copyContent()" >
- <i class="isax isax-bold-copy"></i>
- Copy
- </button>
-
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
-
- <script>
- export default {
- data () {
- return {
- content: 'Computer programming is the process of telling a computer to do certain things by giving it instructions. These instructions are called programs. A person who writes instructions is a computer programmer. The instructions come in different languages; they are called programming languages.'
- }
- },
-
- methods: {
- copyContent () {
- this.$copyText(this.content, undefined, (error, event) => {
- if (error) {
- this.$toast.add({ severity: 'error', summary: 'Text Copy', detail: 'Failed to copy text!', life: 3000 })
- } else {
- this.$toast.add({ severity: 'success', summary: 'Text Copy', detail: 'Text copied successfully!', life: 3000 })
- }
- })
- }
- }
- }
- </script>
\ No newline at end of file
+ <div class="container-fluid">
+ <h2 class="title alt">
+ <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
+ Clipboard Demo
+ </h2>
+ <div class="row justify-content-center">
+ <div class="col-auto">
+ <div class="box-login">
+ <div class="p-card p-component">
+ <div class="field">
+ <div>
+ <textarea class="p-inputtext p-component" v-model="content" rows="5" cols="90" />
+ </div>
+ </div>
+ <div class="btn-wrapper">
+ <button ref="container" class="btn btn-submit" @click="copyContent()">
+ <i class="isax isax-bold-copy"></i>
+ Copy
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup>
+ import { ref } from "vue"
+
+ import { copyText } from "vue3-clipboard"
+
+ let content = ref(
+ "Computer programming is the process of telling a computer to do certain things by giving it instructions. These instructions are called programs. A person who writes instructions is a computer programmer. The instructions come in different languages; they are called programming languages."
+ )
+
+ function copyContent() {
+ copyText(content.value, undefined, (error, event) => {
+ if (error) {
+ toast.add({ severity: "error", summary: "Text Copy", detail: "Failed to copy text!", life: 3000 })
+ } else {
+ toast.add({ severity: "success", summary: "Text Copy", detail: "Text copied successfully!", life: 3000 })
+ }
+ })
+ }
+</script>
diff --git a/app/src/views/vueMetaExample.vue b/app/src/views/vueMetaExample.vue
index 7de1145..0f3897e 100644
--- a/app/src/views/vueMetaExample.vue
+++ b/app/src/views/vueMetaExample.vue
@@ -1,67 +1,67 @@
<template>
- <div class="container-fluid" id="vueMeta">
- <h2 class="title alt">
- <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
- Vue-Meta
- </h2>
- <div class="row justify-content-center">
- <div class="col-4">
- <div class="box-login">
- <div class="p-card p-component">
- <h3>
- {{ response.name }}
- </h3>
- <p>
- {{ response.description }}
- </p>
- </div>
- </div>
- </div>
- </div>
- </div>
+ <div class="container-fluid" id="vueMeta">
+ <h2 class="title alt">
+ <i class="isax isax-bold-arrow-left-2" @click="$router.go(-1)"></i>
+ Vue-Meta
+ </h2>
+ <div class="row justify-content-center">
+ <div class="col-4">
+ <div class="box-login">
+ <div class="p-card p-component">
+ <h3>
+ {{ response.name }}
+ </h3>
+ <p>
+ {{ response.description }}
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
-<script>
-import MQL from '@/plugins/mql.js'
-export default {
- name: 'Data',
- metaInfo () {
- return {
- title: this.response.title,
- meta: [
- {
- vmid: 'description',
- name: 'description',
- content: this.response.description
- }
- ]
- }
- },
- data () {
- return {
- description: 'I am Data',
- result: this.$route.params.title,
- response: ''
- }
- },
- mounted () {
- // sample activity present in playground project
- if (this.result) {
- let data = {
- name: this.result
- }
- new MQL()
- .setActivity('o.[GetClassRoomName]')
- .setData(data)
- .fetch()
- .then(rs => {
- let res = rs.getActivity('GetClassRoomName', true)
- if (rs.isValid('GetClassRoomName')) {
- this.response = res.result[0]
- } else {
- rs.showErrorToast('GetClassRoomName')
- }
- })
- }
- }
-}
+<script setup>
+ import MQL from "@/plugins/mql.js"
+ import { onMounted, ref } from "vue"
+ import { useMeta } from "vue-meta"
+ import { useRoute } from "vue-router"
+
+ const route = useRoute()
+
+ let description = ref("I am Data")
+ let result = ref(route.params.title)
+ let response = ref({})
+
+ useMeta({
+ title: response.title,
+ htmlAttrs: { lang: "en", amp: true },
+ meta: [
+ {
+ vmid: "description",
+ name: "description",
+ content: response.description,
+ },
+ ],
+ })
+
+ onMounted(() => {
+ // sample activity present in playground project
+ if (result) {
+ let data = {
+ name: result.value,
+ }
+ new MQL()
+ .setActivity("o.[GetClassRoomName]")
+ .setData(data)
+ .fetch()
+ .then((rs) => {
+ let res = rs.getActivity("GetClassRoomName", true)
+ if (rs.isValid("GetClassRoomName")) {
+ response.value = res.result[0]
+ } else {
+ rs.showErrorToast("GetClassRoomName")
+ }
+ })
+ }
+ })
</script>
--
GitLab