Merge pull request #73 from frappe/print-component

Print View

client/style/variables.scss

@@ -3,4 +3,6 @@ $spacer-2: 0.5rem;
 $spacer-3: 1rem;
 $spacer-4: 2rem;
 $spacer-5: 3rem;
-$page-width: 500px;
+$page-width: 500px;
+
+$shadow-width: 0.5rem;

ui/components/Button.vue

@@ -5,4 +5,4 @@
     v-on="listeners">
     <slot></slot>
   </button>
-</template>
+</template>

ui/components/Form/Form.vue

@@ -8,6 +8,7 @@
           @save="save"
           @submit="submit"
           @revert="revert"
+          @print="print"
         />
         <form-layout
           class="p-3"
@@ -120,6 +121,10 @@ export default {
       await this.save();
     },
 
+    print() {
+      this.$router.push(`/print/${this.doctype}/${this.name}`);
+    },
+
     onValidate(fieldname, isValid) {
       if (!isValid && !this.invalidFields.includes(fieldname)) {
         this.invalidFields.push(fieldname);

ui/components/Form/FormActions.vue

@@ -5,10 +5,14 @@
       <f-button primary v-if="showSave" :disabled="disableSave" @click="$emit('save')">{{ _('Save') }}</f-button>
       <f-button primary v-if="showSubmit" @click="$emit('submit')">{{ _('Submit') }}</f-button>
       <f-button secondary v-if="showRevert" @click="$emit('revert')">{{ _('Revert') }}</f-button>
+      <div class="ml-2">
+        <f-button secondary v-if="showNextAction" @click="$emit('print')">{{ _('Print') }}</f-button>
+      </div>
       <dropdown class="ml-2" v-if="showNextAction" :label="_('Actions')" :options="links"></dropdown>
     </div>
   </div>
 </template>
+
 <script>
 import frappe from 'frappejs';
 import Dropdown from '../Dropdown';
@@ -49,6 +53,8 @@ export default {
         && !this.doc._notInserted
         && this.doc.submitted === 1;
 
+      this.showNextAction = 1
+
       this.showNextAction =
         !this.doc._notInserted
         && this.links.length;

ui/components/Print/PrintActions.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="frappe-print-actions d-flex justify-content-between align-items-center p-3 border-bottom">
+    <h5 class="m-0">Print {{ title }}</h5>
+
+    <div class="button-group">
+      <f-button secondary @click="$emit('view-form')">{{ _('View Form') }}</f-button>
+      <f-button primary @click="$emit('pdf')">{{ _('PDF') }}</f-button>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import frappe from 'frappejs';
+
+export default {
+  props: ['title'],
+  data() {
+    return {
+      isDirty: false,
+      showSubmit: false,
+      showRevert: false
+    }
+  },
+  created() {},
+  methods: {},
+  computed: {
+    meta() {
+      return frappe.getMeta(this.doc.doctype);
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+@import "../../styles/variables";
+
+.frappe-print-actions {
+    background-color: $white;
+}
+
+</style>

ui/components/Print/PrintView.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="print-view">
+    <print-actions
+      v-bind:title="name"
+      @view-form="viewForm"
+      @pdf="getPDF"
+    ></print-actions>
+    <div class="print-container">
+      <div class="print-template" v-html="printTemplate"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getHTML } from '../../../common/print.js';
+import PrintActions from './PrintActions';
+
+export default {
+  name: 'PrintView',
+  props: ['doctype', 'name'],
+  data() {
+    return {
+      printTemplate: '',
+    }
+  },
+  components: {
+    PrintActions: PrintActions
+  },
+  async created(vm) {
+    this.printTemplate = await getHTML(this.doctype, this.name);
+  },
+  methods: {
+    viewForm() {
+      this.$router.push(`/edit/${this.doctype}/${this.name}`);
+    },
+
+    getPDF() {
+      frappe.getPDF(this.doctype, this.name);
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "../../styles/variables";
+
+.print-container {
+  padding: 1rem 5rem;
+}
+
+.print-template {
+  padding: 1rem;
+  background-color: $white;
+  box-shadow: 0rem 0rem 0.5rem rgba(0,0,0,0.2);
+}
+
+</style>

ui/pages/ListAndPrintView.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="frappe-list-form row no-gutters">
+        <div class="col-4 border-right">
+            <frappe-list :doctype="doctype" :filters="filters" :key="doctype" />
+        </div>
+        <div class="col-8 background-gray">
+            <print-view v-if="name" :key="doctype + name" :doctype="doctype" :name="name" />
+        </div>
+    </div>
+</template>
+<script>
+import List from '../components/List/List';
+import PrintView from '../components/Print/PrintView';
+
+export default {
+    props: ['doctype', 'name', 'filters'],
+    components: {
+        FrappeList: List,
+        PrintView: PrintView,
+    },
+}
+</script>
+<style lang="scss">
+.frappe-list-form {
+    min-height: calc(100vh - 4rem);
+}
+@import "../styles/variables";
+.background-gray {
+    background-color: $gray-100
+}
+</style>

ui/routes/index.js

@@ -1,4 +1,5 @@
 import ListAndForm from '../pages/ListAndForm';
+import ListAndPrintView from '../pages/ListAndPrintView';
 
 export default [
   {
@@ -12,5 +13,11 @@ export default [
     name: 'Form',
     component: ListAndForm,
     props: true
+  },
+  {
+    path: '/print/:doctype/:name',
+    name: 'PrintView',
+    component: ListAndPrintView,
+    props: true
   }
 ];

yarn.lock

@@ -1417,9 +1417,9 @@ forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
 
-frappe-datatable@frappe/datatable:
-  version "0.0.4"
-  resolved "https://codeload.github.com/frappe/datatable/tar.gz/4bb400230087fbf97e8587a34916e14f77fa01cd"
+frappe-datatable@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/frappe-datatable/-/frappe-datatable-1.1.2.tgz#d28841fa9161ef2329032376fb48758456dbc9cb"
   dependencies:
     clusterize.js "^0.18.0"
     lodash "^4.17.5"
@@ -1461,6 +1461,10 @@ fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
 
+fs@^0.0.1-security:
+  version "0.0.1-security"
+  resolved "https://registry.yarnpkg.com/fs/-/fs-0.0.1-security.tgz#8a7bd37186b6dddf3813f23858b57ecaaf5e41d4"
+
 fsevents@^1.0.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.3.tgz#11f82318f5fe7bb2cd22965a108e9306208216d8"
@@ -2841,6 +2845,10 @@ os-tmpdir@^1.0.0, os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
 
+os@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/os/-/os-0.1.1.tgz#208845e89e193ad4d971474b93947736a56d13f3"
+
 osenv@0, osenv@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.4.tgz#42fe6d5953df06c8064be6f176c3d05aaaa34644"