Report Builder / Prescription Builder

Report builder for prescription building

Installation

You will need bootstrap as bootstrap is used to build this.

npm i bootstrap
npm i prescription-builder

yarn add bootstrap
yarn add prescription-builder

Use

in your main.ts import bootstrap and import prescription-builder style.css

import { createApp } from 'vue'
import './styles/style.scss'
import App from './App.vue'

+ import 'prescription-builder/lib/style.css'
+ import 'bootstrap'

createApp(App).mount('#app')

Register Builder Component

use this code to show builder component

import {PrescriptionBuilder} from "prescription-builder";

<PrescriptionBuilder></PrescriptionBuilder>

PrescriptionBuilder Component support variables, page-setup & render-list props where.

PrescriptionBuilder also support onExport event it's return the pageSetup and renderList in event argument

variables should be array of object

interface Variable {
    title: string;
    description: string;
}

page-setup should be object

interface Page {
    title: string;
    height: number; // height is in millimeters
    width: number; // weight is in  millimeters
}

render-list should be array of object

// check /lib/component/builder/utls/models.d.ts for all decleartaion
interface DragElementSettingsMap {
    text: TextSetting,
    columns: ColumnSetting,
    header: HeaderSetting,
    drug: DrugSetting,
    subscription: SubscriptionSetting,
}

use render-list props to edit prescription builder

Register Preview Component

use PrescriptionPreview to preview the prescription

const page = {
    type: 'a4',
    height: 210,
    width: 400,
}

  <PrescriptionPreview :render-list="" :page-setup="" :allow-demo="false"></PrescriptionPreview>

As you already apply the builder now it's time to make a printable document based on prescription builder.

as you exported pageSetup and renderList, i'm assuming that you are storing the export as JSON.stringify. so let's start form there.

const prescriptionRender = JSON.parse(exportedData).renderList;
prescriptionRender.forEach((el) => {
    // replace value by the declared variable
    // i.e your saved value is Patient Name: @patient_name
    // replace @patient_name to prescription.patient.full_name
    el.value =  yourModifiedValue
});

Better to do it from server side instate of client side

<?php

$builder = PrescriptionBuilder::find(1);
$data = json_decode($builder->data, true);
$prescriptionRender = $data['renderList'];


// Looping through each element in prescriptionRender
foreach ($prescriptionRender as &$el) {
    // replace value by the declared variable
    // i.e your saved value is Patient Name: @patient_name
    // replace @patient_name to prescription.patient.full_name

    // Assuming $prescription is an associative array with patient name and another value
    $prescription = [
        'patient' => [
            'full_name' => 'John Doe', // Example patient name
        ],
        'another_value' => 'Another Value', // Example another value
    ];

    // Replacing @patient_name with $prescription['patient']['full_name']
    // You can replace other variables similarly
    $el['value'] = str_replace('@patient_name', $prescription['patient']['full_name'], $el['value']);
    $el['value'] = str_replace('@another_value', $prescription['another_value'], $el['value']);
}

?>