feat(doc-preview): add toolbar

src/pages/05_quotation/peview/ViewForm.vue

@@ -18,6 +18,7 @@ import { QuotationPayload } from 'src/stores/quotations/types';
 // NOTE: Import Components
 import ViewHeader from './ViewHeader.vue';
 import BankComponents from './BankComponents.vue';
+import PrintButton from 'src/components/button/PrintButton.vue';
 
 const quotationForm = useQuotationForm();
 const optionStore = useOptionStore();
@@ -184,9 +185,16 @@ onMounted(async () => {
 watch(elements, () => {
   console.log(elements.value);
 });
+
+function print() {
+  window.print();
+}
 </script>
 
 <template>
+  <div class="toolbar">
+    <PrintButton solid @click="print" />
+  </div>
   <div class="row justify-between container">
     <section class="content" v-for="chunk in chunks">
       <ViewHeader />
@@ -423,6 +431,19 @@ watch(elements, () => {
 </template>
 
 <style scoped>
+.toolbar {
+  width: 100%;
+  position: sticky;
+  top: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 1rem;
+  padding: 1rem;
+  background: white;
+  border-bottom: 1px solid var(--gray-3);
+}
+
 table {
   border-collapse: collapse;
 }
@@ -496,6 +517,10 @@ hr {
 }
 
 @media print {
+  .toolbar {
+    display: none;
+  }
+
   .container {
     padding: 0;
     gap: 0;