Narcissistic Project Managers


    0.2.9 • Public • Published

    PROformajs vue components

    Provides vue2 components (using bootstrap 4) for writing and reviewing proformajs protocols.

    getting Started

    You'll need to have git and node (v12+) installed.


    you@yourpc:~$ git clone
    you@yourpc:~$ cd proformajs-vue
    you@yourpc:~/proformajs-vue$ npm install
    you@yourpc:~/proformajs-vue$ npm run serve
      App running at:
      - Local:   http://localhost:8080/
      - Network:
      Note that the development build is not optimized.
      To create a production build, run npm run build.


    your@yourpc:~/proformajs-vue$ npm run build
    > @openclinical/proformajs-vue@1.0.0 build /home/matt/Software/sfc-init/proformajs-vue
    > cross-env NODE_ENV=production rollup --config build/rollup.config.js
    src/entry.esm.js → dist/proformajs-vue.esm.js...
    created dist/proformajs-vue.esm.js in 2.2s
    src/entry.js → dist/proformajs-vue.ssr.js...
    created dist/proformajs-vue.ssr.js in 2.2s
    src/entry.js → dist/proformajs-vue.min.js...
    created dist/proformajs-vue.min.js in 3.2s

    use shows how you can use this project.


    vue-sfc-rollop was used to create the skeleton for this project.


    • [x] vue ace json editor
    • [ ] vue task map
      • [x] add decision, enquiry and plan components and make all sub-tasks draggable
      • [x] clickable working breadcrumb and clicking into sub plans
      • [x] create new tasks
      • [x] selectable tasks for component attribute editor
      • [x] draggable temporal dependencies
      • [x] create new temporal dependencies
      • [x] delete task
      • [x] delete temporal dependency
      • [x] show grabbable tasks with grab handle
      • [ ] move/delete groups of tasks
      • [ ] ctrl-c ctrl-v into sub plan
      • [ ] disallow dragging off canvas
      • [ ] allow user to change size of canvas
      • [ ] add panning and zooming
      • [x] handle protocol without svg positioning meta (i.e. generate it automatically)
      • [x] handle single task protocol
      • [x] show existence of data definitions/sources/candidates and sub-tasks on canvas
      • [ ] list available data-definitions to the selected task on the canvas?
      • [ ] indicate cyclic / autonomous / triggered / optional tasks on the map
    • [x] vue protocol validation feedback component
    • [ ] vue component attribute editor
      • [x] details editor
      • [ ] prevent names with incorrect characters
      • [ ] cascade name changes appropriately
      • [ ] data definitions editor
        • [x] use control to select data type and create a new data definition (named integer0, boolean1 etc)
        • [x] returning from Data Definition editor should go back to Data tab of the Task editor
        • [x] make range editable
          • [x] provide choice of raw or annotated until the first range value is entered, after which this control should be disabled
          • [x] add / edit / delete range values
          • [ ] check data types
        • [x] resetting the protocol should return the task editor to the Details tabe, no matter where we are
        • [x] provide mechanism to delete a data definition
        • [x] closing data definition dialogue should set index of the data definition dialogue back to 1 and rangeAnnotation to false and rangeIdx to -1
        • [x] show validation issues for defaultValue, valueCondition and range
        • [x] add help text to fields
        • [ ] CRUD Warnings
      • [x] sources editor
        • [x] CRUD sources
        • [x] custom requestCondition editor
      • [ ] candidates and arguments editor
        • [x] CRUD candidates
        • [x] CRUD arguments
        • [ ] custom recommendCondition editor
        • [ ] custom activeCondition editor
      • [x] pre/wait Conditions (which hide scheduling constraints)
      • [x] handle name change of schedule dependency
      • [x] remove data tab for non root plan
      • [ ] HTML editing for description
      • [x] cycle / event trigger attributes
    • [ ] vue component tree component
      • [x] show clickable tree of components
      • [x] allow sources and candidates to select task
      • [ ] allow user to configure what is shown in tree
    • [x] create npm package for vue components
    • [x] favicon / title
    • [ ] enactment review
      • [ ] add data
        • [x] single raw
        • [x] multi raw
        • [x] single ranged (optional annotations)
        • [x] multi ranged (optional annotations)
        • [x] Integer
        • [x] Float
        • [x] Text
        • [x] Boolean
        • [x] Date
        • [x] handle invalid data via text boxes
        • [x] fix reactivity issues
        • [x] dynamic data: disable input and show valueCondition
        • [ ] implement different view in enquiry and data
        • [ ] allow metadata to select widget (and implement range widget / buttongroup for select)
        • [ ] surface datadef warnings
      • [ ] allow cancel tasks / plans
      • [x] two column enquiry sources
      • [x] erase data
        • [ ] prevent erase for finished protocol
      • [x] draw decision
      • [x] confirm candidate
      • [x] view expressions/inactive arguments in decision
      • [x] view future and past tasks - prevent interaction in non in_progress tasks
      • [x] show enactment history
      • [x] show active tasks and triggers
      • [x] show existing data / history and allow update of data
      • [ ] allow custom enactment view, e.g. for shortness of breath
      • [ ] allow runtime expression evaluation in development mode
      • [ ] allow search/sort of data definitions in design and runtime interfaces
      • [x] restart enactment
      • [x] handle html descriptions with v-html
      • [ ] include proformajs-test
      • [ ] reduce delay when doing any action in a big guidelines, e.g. donor pathway
        • [ ] completing a task
        • [ ] tabbing between Sources
        • [ ] selecting a candidate
    • [ ] code quality
      • [ ] ensure all props are typed

    Test plan

    • Create new plan. use editor to edit plan attributes. check that edited attributes can be seen in code view. edit attributes in code view. check that the new edits can be seen in the editor view.
    • create a nested set of tasks that includes every task type. navigate around. move tasks around.
    • create temporal constraints. remove tasks with upstream and downstream constraints.
    • Add an integer data definition: ok, "Are you ok?" with an annotated range of 1 - "Yes" and 0 - "No". Add a text data definition: fruit, "What fruit do you like" with a range of fruit of your choice. remove fruit. edit fruit. Check that your changes are reflected in the code. Edit some of the fruit in the code. Check that those changes are reflected in the editor. Delete fruit items in code and editor. Delete one of the data definitions.
    • create a new decision. add candidates "one" and "two". for each candidate add an argument "yes" and "no"
    • cut and paste a new protocol into the code view. Check that new protocol is visible in the editor and that the root plan is selected.
    • start from a new plan. add a new enquiry and plan. double click on plan and add a decision. click on the root plan in breadcrumb. You should see two issues (missing sources and candidates). If you click on the decision path it should be selected and the parent plan changed in the map.
    • create a new plan. add a new task. make it cyclic with a cycleUntil of "index('plan:taskA')==2" and a caption of "Task A ${index('plan:taskA')}". Review an enactment. In the history you should see "Task A 0", "Task A 1" and "Task A 2"


    task editor

    • [ ] adding a space to a task name should be handled better
    • [ ] fix tabIndex issues:
      • [ ] a new enquiry opens on the sources tab when there are no other sub tasks
      • [ ] a new enquiry opens on the constraints tab when there other sub tasks
    • [ ] changing a name should change references to that name too and (maybe) automatically update the caption
    • [ ] deleting a task in a sub-plan moves focus to root plan (should move to the parent)

    code editor

    • [ ] cant edit name attribute - the editor reacts by removing attribute all together

    component tree

    • [x] needs to be open automatically

    cyclic tasks

    more work needed here. a single cyclic task limited to two iterations that shows the index in the caption ...

    • [x] cycleUntil example needs updating
    • [x] review map doesnt show task as finished at the end (maybe it isnt?)
    • [x] review map shows raw caption and not the runtime caption
    • [x] review history shows three "Task B (2)" where it should show "Task B (0)" then "Task B (1)" then "Task B (2)"


    • [x] selected task isnt highlighted when walking through an enactment


    • [x] adding an annotated range to gender throws up two issues:
      • [x] value is added as string not integer
      • [x] values are shown as json

    mobile view

    • [x] needs work

    touch screen issues

    • [x] cannot see a task being dragged (ipad safari / edge)
    • [x] cannot descend by double tapping into sub plan in compose view (ipad safari)
    • [x] ipad automatically capitalises the first letter for data definitions / candidates (ipad)
    • [x] cannot open/close tree view node
    • [x] cannot delete task
    • [x] cannot delete temporal constraint
    • [ ] cannot search in the code view


    • [x] map not synced with selected task
    • [x] cannot descend into sub plan from review map
    • [x] single task view (decision) doesnt need to show parent caption and description
    • [ ] integers should have integer data entry boxes etc
    • [ ] disable the select tab for a completed enactment
    • [ ] needs to show html content




    npm i @openclinical/proformajs-vue

    DownloadsWeekly Downloads






    Unpacked Size

    651 kB

    Total Files


    Last publish


    • openclinical-owner
    • mattsouth
    • srk23