Merge branch 'sit' into uat

wayne

2022-02-17 a3716f72066d25d745f4d5103ff23a553c3e102b

 PAMapp/components/multiSelectBtn.vue

@@ -25,30 +25,58 @@
</template>

<script lang="ts">
  import { Vue, Component, Prop, PropSync} from 'vue-property-decorator';
  import { OptionBtnDto } from './singleSelectBtn.vue';
  import { Vue, Component, Prop, PropSync, Watch} from 'vue-property-decorator';
import { OptionBtnDto } from '~/shared/models/optionBtnDto.model';

  @Component
  export default class MultiSelectBtn extends Vue {
    @PropSync('mutiSelect',{type:Array,default:()=>[]}) syncMutiSelect!:string[];
    @Prop({default:()=>[]}) options!:OptionBtnDto[];
    @Prop({default:''}) nameOfSelectAll!:string;
    @PropSync('otherSelect',{default:''}) syncOtherSelect!:string;
    @Prop({type:String,default:''}) nameOfOtherOption!:string;

    @PropSync('mutiSelect',{type:Array,default:()=>[]})
    syncMutiSelect!:string[];

    @Prop({default:()=>[]})
    options!:OptionBtnDto[];

    @Prop({default:''})
    nameOfSelectAll!:string;

    @PropSync('otherSelect',{default:''})
    syncOtherSelect!:string;

    @Prop({type:String,default:''})
    nameOfOtherOption!:string;

    @Prop()
    maxLength? : number;

    @Watch('syncMutiSelect')
    onMutiSelectChange(): void {
      if (!this.maxLength) return;
      if (this.syncMutiSelect.length > this.maxLength) {
        this.syncMutiSelect.shift();
      }
    }

    isSelectOtherOption=false;
    isSelectAll=false;

    //////////////////////////////////////////////////////////////////////

    updated() {
      this.isSelectAll = this.syncMutiSelect.length === this.options.length;
    }

    //////////////////////////////////////////////////////////////////////

    selectAll():void{
      this.isSelectAll= !this.isSelectAll;
      this.syncMutiSelect = this.isSelectAll ? this.optionsFormat(this.options):[];
    }
    optionsFormat(optios:OptionBtnDto[]):string[]{
      return optios.map(o=>o.title);

    optionsFormat(options:OptionBtnDto[]): string[] {
      return options.map((option)=> option.title );
    }

    selectOther():void{
      this.isSelectOtherOption = !this.isSelectOtherOption;
      if(!this.isSelectOtherOption){
@@ -60,7 +88,7 @@

<style lang="scss" scoped>
  .pam-selectAll-btn{
    padding: 6px 20px;
    padding         : 10px 20px;
    border: 1px $LIGHT_GREY solid;
    background-color: $PRIMARY_WHITE;
    border-radius: 30px;