Divyanshu | Stage | Prepare and create template same as tally template for GIDDH - Version 1

apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/content-filters/content.filters.component.ts

@@ -108,6 +108,10 @@ export class ContentFilterComponent implements DoCheck, OnInit, OnChanges, OnDes
                 this.invoiceUiDataService.setContentForm(this.contentForm);
             }
             this.customTemplate = cloneDeep(template);
+            if (this.customTemplate.templateType === 'tally_template') {
+                this.customTemplate.sections.footer.data.imageSignature.display = true;
+                this.customTemplate.sections.footer.data.slogan.display = false;
+            }
             this.assignImageSignature();
         });
 

apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/design-filters/design.filters.component.html

@@ -194,15 +194,15 @@
             <li
                 [hidden]="templateUISectionVisibility.color"
                 (click)="onChangeVisibility('color')"
-                *ngIf="customTemplate.templateType !== 'thermal_template'"
+                *ngIf="customTemplate.templateType !== 'thermal_template' && customTemplate.templateType !== 'tally_template'"
                 class="d-flex align-items-center"
             >
                 <span class="icon-change_color"
                     ><span class="path1"></span><span class="path2"></span><span class="path3"></span></span
                 ><label>Try other colour</label>
             </li>
             <!--<li *ngIf="ifColorSelected">-->
-            <li [hidden]="!templateUISectionVisibility.color" *ngIf="templateType !== 'thermal_template'">
+            <li [hidden]="!templateUISectionVisibility.color" *ngIf="templateType !== 'thermal_template' && customTemplate.templateType !== 'tally_template'">
                 <span class="icon-change_color"
                     ><span class="path1"></span><span class="path2"></span><span class="path3"></span
                 ></span>

apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/out.template.component.html

@@ -24,6 +24,25 @@
     >
     </gst-template-a>
 
+    <tally-template
+        *ngSwitchCase="'tally_template'"
+        [fieldsAndVisibility]="fieldsAndVisibility"
+        [isPreviewMode]="isPreviewMode"
+        [showLogo]="showLogo"
+        [imageSignatureSrc]="imageSignatureSrc"
+        [showImageSignature]="showImageSignature"
+        [companyGSTIN]="companyGSTIN"
+        [companyPAN]="companyPAN"
+        [inputTemplate]="inputTemplate"
+        [logoSrc]="logoSrc"
+        [templateUISectionVisibility]="templateUISectionVisibility"
+        (sectionName)="onClickSection($event)"
+        [voucherType]="voucherType"
+        [showGstComposition]="showGstComposition"
+        [activeCompany]="activeCompany"
+    >
+    </tally-template>
+
     <!-- GET_ALL TEMPLATE E -->
     <gst-template-e
         *ngSwitchCase="'gst_template_e'"

apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-a/gst-template-a.component.scss

@@ -544,4 +544,4 @@ table.tax-table.item {
     display: flex;
     justify-content: flex-end;
     align-items: flex-end;
-}
+}

apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-a/gst-template-a.component.ts

@@ -31,7 +31,6 @@ export class GstTemplateAComponent implements OnInit, OnDestroy, OnChanges {
     /* This will hold the value if Gst Composition will show/hide */
     @Input() public showGstComposition: boolean = false;
     @Input() public voucherType: string;
-
     @Output() public sectionName: EventEmitter<string> = new EventEmitter();
     public companySetting$: Observable<any> = observableOf(null);
     public companyAddress: string = '';

apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/tally-template/tally-template.component.scss

@@ -0,0 +1,189 @@
+* {
+    box-sizing: content-box;
+    color: var(--color-nero);
+    font-style: inherit;
+    font-weight: inherit;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    text-decoration: none;
+    vertical-align: top;
+}
+
+.strong {
+    font-weight: bold;
+}
+
+.font-12 {
+    font-size: var(--font-size-12) !important;
+}
+// heading
+#default {
+    header {
+        h2 {
+            font-size: var(--font-size-15);
+            font-weight: bold;
+        }
+    }
+
+    table {
+        // table-layout: fixed;
+        width: 100%;
+        border-collapse: inherit;
+    }
+
+    overflow: auto;
+    background: var(--color-white-tertiary);
+    border: 1px solid var(--color-common-secondary-border);
+    padding: 0;
+
+    body {
+        box-sizing: border-box;
+        font-size: var(--font-size-12);
+        margin: 0 auto;
+        overflow: hidden;
+        padding: 0.1in;
+        letter-spacing: 0;
+        width: 100%;
+        border-radius: 1px;
+    }
+
+    header {
+        figure {
+            margin: 0 0 0.3em 0;
+            width: 100%;
+            padding: 0px;
+
+            p {
+                margin: 0 0 0.25em;
+            }
+        }
+
+        img {
+            max-height: 100%;
+            max-width: 180px;
+        }
+    }
+
+    p {
+        margin: 0;
+    }
+
+    h2 {
+        margin: 0;
+        font-size: inherit;
+    }
+}
+
+// common template css
+.disabled-area {
+    position: relative;
+    float: left;
+    width: 100%;
+    margin-bottom: 10px;
+
+    &:after {
+        content: " ";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        pointer-events: none;
+        background: rgba(204, 204, 204, 0.5);
+        border: 1px dashed var(--color-common-secondary-border);
+    }
+}
+
+.edit-template {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 4px;
+    height: 15px;
+    z-index: 1;
+    background: var(--color-primary-invoice-preview-background);
+    width: 20px;
+
+    i {
+        background: url("data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ2OS4zMzEgNDY5LjMzMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDY5LjMzMSA0NjkuMzMxOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnPgoJPHBhdGggZD0iTTQzOC45MzEsMzAuNDAzYy00MC40LTQwLjUtMTA2LjEtNDAuNS0xNDYuNSwwbC0yNjguNiwyNjguNWMtMi4xLDIuMS0zLjQsNC44LTMuOCw3LjdsLTE5LjksMTQ3LjQgICBjLTAuNiw0LjIsMC45LDguNCwzLjgsMTEuM2MyLjUsMi41LDYsNCw5LjUsNGMwLjYsMCwxLjIsMCwxLjgtMC4xbDg4LjgtMTJjNy40LTEsMTIuNi03LjgsMTEuNi0xNS4yYy0xLTcuNC03LjgtMTIuNi0xNS4yLTExLjYgICBsLTcxLjIsOS42bDEzLjktMTAyLjhsMTA4LjIsMTA4LjJjMi41LDIuNSw2LDQsOS41LDRzNy0xLjQsOS41LTRsMjY4LjYtMjY4LjVjMTkuNi0xOS42LDMwLjQtNDUuNiwzMC40LTczLjMgICBTNDU4LjUzMSw0OS45MDMsNDM4LjkzMSwzMC40MDN6IE0yOTcuNjMxLDYzLjQwM2w0NS4xLDQ1LjFsLTI0NS4xLDI0NS4xbC00NS4xLTQ1LjFMMjk3LjYzMSw2My40MDN6IE0xNjAuOTMxLDQxNi44MDNsLTQ0LjEtNDQuMSAgIGwyNDUuMS0yNDUuMWw0NC4xLDQ0LjFMMTYwLjkzMSw0MTYuODAzeiBNNDI0LjgzMSwxNTIuNDAzbC0xMDcuOS0xMDcuOWMxMy43LTExLjMsMzAuOC0xNy41LDQ4LjgtMTcuNWMyMC41LDAsMzkuNyw4LDU0LjIsMjIuNCAgIHMyMi40LDMzLjcsMjIuNCw1NC4yQzQ0Mi4zMzEsMTIxLjcwMyw0MzYuMTMxLDEzOC43MDMsNDI0LjgzMSwxNTIuNDAzeiIgZmlsbD0iIzAwMDAwMCIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=")
+            no-repeat;
+        width: 17px;
+        position: absolute;
+        right: 1px;
+        background-size: 14px;
+        height: 18px;
+    }
+}
+
+.inner-img-signature {
+    height: 60px;
+    min-width: 40px;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse !important;
+    page-break-inside: auto;
+    page-break-after: auto;
+
+    tr {
+        th,
+        td {
+            border: 1px solid black;
+            text-align: left;
+            padding: 8px;
+            word-break: break-word;
+        }
+        &.border-top-none {
+            th {
+                border-top: none !important;
+            }
+        }
+    }
+    &.table-row-height {
+        tr {
+            th,
+            td {
+                height: 50px;
+            }
+        }
+    }
+}
+
+.vertical-align-top {
+    vertical-align: top !important;
+}
+.vertical-align-middle {
+    vertical-align: middle !important;
+}
+.vertical-align-bottom {
+    vertical-align: bottom !important;
+}
+.border-top {
+    border-top: 1px solid currentColor !important;
+}
+.border-bottom {
+    border-bottom: 1px solid currentColor !important;
+}
+.border-left {
+    border-left: 1px solid currentColor !important;
+}
+.border-right {
+    border-right: 1px solid currentColor !important;
+}
+.margin-0 {
+    margin: 0 !important;
+}
+.padding-0 {
+    padding: 0 !important;
+}
+.pd-r1 {
+    padding-right: 10px !important;
+}
+.pd-l1 {
+    padding-left: 10px !important;
+}
+.no-wrap {
+    white-space: no-wrap;
+}

apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/tally-template/tally-template.component.ts

@@ -0,0 +1,118 @@
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { select, Store } from '@ngrx/store';
+import { cloneDeep } from 'apps/web-giddh/src/app/lodash-optimized';
+import { AppState } from 'apps/web-giddh/src/app/store';
+import { Observable, of as observableOf, ReplaySubject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { SettingsProfileActions } from '../../../../../../actions/settings/profile/settings.profile.action';
+import { CustomTemplateResponse } from '../../../../../../models/api-models/Invoice';
+import { TemplateContentUISectionVisibility } from '../../../../../../services/invoice.ui.data.service';
+import * as dayjs from 'dayjs';
+import { GIDDH_DATE_FORMAT, GIDDH_DATE_FORMAT_DD_MM_YYYY } from 'apps/web-giddh/src/app/shared/helpers/defaultDateFormat';
+
+@Component({
+    selector: 'tally-template',
+    templateUrl: './tally-template.component.html',
+    styleUrls: ['./tally-template.component.scss']
+})
+
+export class TallyTemplateComponent implements OnInit, OnDestroy {
+    /** Holds fields and visibility object */
+    @Input() public fieldsAndVisibility: any = null;
+    /** Holds true if preview mode */
+    @Input() public isPreviewMode: boolean = false;
+    /** Holds true if show company logo */
+    @Input() public showLogo: boolean = true;
+    /** Holds true if show company name */
+    @Input() public showCompanyName: boolean;
+    /** Holds company GSTIN  number as string */
+    @Input() public companyGSTIN: string;
+    /** Holds true if company PAN number as string */
+    @Input() public companyPAN: string;
+    /** Holds template input data */
+    @Input() public inputTemplate: CustomTemplateResponse = new CustomTemplateResponse();
+    /** Holds uploaded company logo source */
+    @Input() public logoSrc: string;
+    /** Holds uploaded image signature source */
+    @Input() public imageSignatureSrc: string;
+    /** Holds true show image signature */
+    @Input() public showImageSignature: boolean;
+    /* This will hold active company*/
+    @Input() public activeCompany: any;
+    /** Holds template UI Section Visibility  status and label name */
+    @Input() public templateUISectionVisibility: TemplateContentUISectionVisibility = new TemplateContentUISectionVisibility();
+    /* This will hold the value if Gst Composition will show/hide */
+    @Input() public showGstComposition: boolean = false;
+    /** Holds voucher type */
+    @Input() public voucherType: string;
+    /** Emits selected section name to edit and show respective options */
+    @Output() public sectionName: EventEmitter<string> = new EventEmitter();
+    /** Holds company setting */
+    public companySetting$: Observable<any> = observableOf(null);
+    /** Holds company address */
+    public companyAddress: string = '';
+    /** Observable to unsubscribe all the store listeners to avoid memory leaks */
+    private destroyed$: ReplaySubject<boolean> = new ReplaySubject(1);
+    /** Holds dollar symbol */
+    public dollarSymbol = '$';
+    /** Holds true if company Base Currency is Rupee */
+    public isBaseCurrencyRupee = true;
+    /** Holds rupee symbol */
+    public rupeeSymbol = '&#8377';
+
+    constructor(
+        private store: Store<AppState>,
+        private settingsProfileActions: SettingsProfileActions
+    ) {
+        this.companySetting$ = this.store.pipe(select(state => state.settings.profile), takeUntil(this.destroyed$));
+    }
+
+    /**
+     * Initializes the component
+     *
+     * @memberof TallyTemplateAComponent
+     */
+    public ngOnInit(): void {
+        this.companySetting$.subscribe(address => {
+            if (address && address.address) {
+                this.companyAddress = cloneDeep(address.address);
+            } else if (!address) {
+                this.store.dispatch(this.settingsProfileActions.GetProfileInfo());
+            }
+        });
+    }
+
+    /**
+     * Current date in different format
+     *
+     * @param {boolean} [isDefaultGiddhDate=true]
+     * @param {boolean} [dateInNumber=false]
+     * @return {*}  {string}
+     * @memberof TallyTemplateAComponent
+     */
+    public getTodayDate(isDefaultGiddhDate: boolean = true, dateInNumber: boolean = false): string {
+        return dayjs().format(dateInNumber ? "DDMMYYYY" : (isDefaultGiddhDate ? GIDDH_DATE_FORMAT : GIDDH_DATE_FORMAT_DD_MM_YYYY));
+    }
+
+    /**
+     * Handle template edit section click
+     *
+     * @param {string} sectionName
+     * @memberof TallyTemplateAComponent
+     */
+    public onClickSection(sectionName: string): void {
+        if (!this.isPreviewMode) {
+            this.sectionName.emit(sectionName);
+        }
+    }
+
+    /**
+     * Life cycle hook runs when the component is destroyed
+     *
+     * @memberof TallyTemplateAComponent
+     */
+    public ngOnDestroy(): void {
+        this.destroyed$.next(true);
+        this.destroyed$.complete();
+    }
+}

apps/web-giddh/src/app/invoice/templates/invoice.templates.module.ts

@@ -19,6 +19,7 @@ import { InvoiceTemplatePreviewModelComponent } from './edit-template/modals/tem
 import { DesignFiltersContainerComponent } from './edit-template/filters-container/design-filters/design.filters.component';
 import { ClickOutsideModule } from 'ng-click-outside';
 import { DecimalDigitsModule } from '../../shared/helpers/directives/decimalDigits/decimalDigits.module';
+import { TallyTemplateComponent } from './edit-template/out-tempate/templates/tally-template/tally-template.component';
 
 @NgModule({
     imports: [
@@ -44,7 +45,8 @@ import { DecimalDigitsModule } from '../../shared/helpers/directives/decimalDigi
         ThermalTemplateComponent,
         EditInvoiceComponent,
         InvoiceTemplateModalComponent,
-        EditFiltersContainersComponent
+        EditFiltersContainersComponent,
+        TallyTemplateComponent
     ],
     exports: [
         OutTemplateComponent,