refactor components: multiSelectBtn, singleSelectBtn

Tomas

2021-12-27 c9b1f11a9655813773e009286467af5044106d6e

refactor components: multiSelectBtn, singleSelectBtn

 PAMapp/components/multiSelectBtn.vue

@@ -5,7 +5,7 @@
        v-for="(option, index) in options"
        :key="index"
        :label="option.label">
          {{option.title}}
          {{ option.title }}
        </el-checkbox>
      <template v-if="nameOfSelectAll">
        <button class="pam-selectAll-btn cursor--pointer fix-chrome-click--issue" :class="{'selected':isSelectAll}" :model="isSelectAll" @click="selectAll">
@@ -14,7 +14,7 @@
      </template>
      <template v-if="nameOfOtherOption">
        <button class="pam-selectAll-btn cursor--pointer fix-chrome-click--issue" :class="{'selected':isSelectOtherOption}" :model="isSelectOtherOption" @click="selectOther">
         {{nameOfOtherOption}}
         {{ nameOfOtherOption }}
        </button>
        <div>
          <input class="pam-muti-select-other cursor--pointer " v-if="isSelectOtherOption" v-model="syncOtherSelect" placeholder="請輸入,限20字">
@@ -30,6 +30,7 @@

  @Component
  export default class MultiSelectBtn extends Vue {

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

@@ -49,19 +50,23 @@
    isSelectAll=false;

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

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

    //////////////////////////////////////////////////////////////////////
    selectAll():void{

    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{

    selectOther(): void {
      this.isSelectOtherOption = !this.isSelectOtherOption;
      if(!this.isSelectOtherOption){
        this.syncOtherSelect = '';
@@ -72,26 +77,26 @@

<style lang="scss" scoped>
  .pam-selectAll-btn{
    padding: 6px 20px;
    border: 1px $LIGHT_GREY solid;
    padding         : 6px 20px;
    border          : 1px $LIGHT_GREY solid;
    background-color: $PRIMARY_WHITE;
    border-radius: 30px;
    color: $PRIMARY_BLACK;
    font-size: 20px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius   : 30px;
    color           : $PRIMARY_BLACK;
    font-size       : 20px;
    margin-right    : 10px;
    margin-bottom   : 10px;
    &.selected{
      background-color:$CORAL;
      color: $PRIMARY_WHITE;
      background-color: $CORAL;
      color           : $PRIMARY_WHITE;
    }
  }
  .pam-muti-select-other {
    height: 50px;
    padding: 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
    width: 316px;
    border: 1px solid #CCCCCC;
    height            : 50px;
    padding           : 5px;
    -webkit-box-sizing: border-box;         /* Safari/Chrome, other WebKit */
    -moz-box-sizing   : border-box;         /* Firefox, other Gecko */
    box-sizing        : border-box;
    width             : 316px;
    border            : 1px solid #CCCCCC;
  }
</style>

 PAMapp/components/singleSelectBtn.vue

@@ -20,9 +20,12 @@

<script lang="ts">
  import { Component, Prop, PropSync, Vue } from "nuxt-property-decorator";

  import * as _ from 'lodash';

  @Component
  export default class SingleSelectBtn extends Vue {

    @PropSync('singleSelected', { default: '' })
    syncSingleSelected!: string | number;

@@ -36,8 +39,8 @@
    }
  }
  export interface OptionBtnDto {
    title: string,
    title    : string,
    subTitle?: string,
    label: string | number,
    label    : string | number,
  }
</script>