vue modal props code

DataValidationPage.vue

<template>
  <a-card title="Non Data Validation">
    <!-- <a-row :gutter="{ lg: 15, md: [15, 15] }" type="flex" align="bottom"> -->
    <a-row :gutter="[15, 15]" type="flex" align="bottom">
      <a-col :lg="4" :md="24" :sm="24" :xs="24">
        <ProjectSelect :projectId.sync="projectId" />
      </a-col>
      <a-col :lg="4" :md="24" :sm="24" :xs="24">
        <SubProjectSelect
          :projectId="projectId"
          :subProjectId.sync="subProjectId"
        />
      </a-col>
      <a-col :lg="4" :md="24" :sm="24" :xs="24">
        <VersionSelect
          :projectId="projectId"
          :subProjectId="subProjectId"
          :versionId.sync="versionId"
        />
      </a-col>
      <a-col :lg="4" :md="24" :sm="24" :xs="24">
        <SessionSelect
          :projectId="projectId"
          :subProjectId="subProjectId"
          :versionId="versionId"
          :sessionId.sync="sessionId"
        />
      </a-col>
    </a-row>
    <a-divider />

    <a-spin :spinning="isLoading" tip="Loading...">
      <table align="right">
        <tr>
          <a-icon
            type="upload"
            style="
              font-synthesis: weight;
              spin: true;
              background-color: #ffffff;
              color: #f44336;
              font-size: 19px;
              margin-right: 5px;
            "
          />

          <th>Last_registered_time</th>
          <td style="margin-left: 20px; padding-left: 10px">
            {{ recentUpdateatime }}
          </td>
        </tr>
      </table>

      <a-row>
        <a-col :xl="24" :lg="24" :md="24" :sm="0" :xs="0">
          <a-table
            :columns="validationDataListConfig"
            :dataSource="validationListData.validateLists"
            @change="onChangeClipPage"
            :pagination="pagination"
            rowKey="id"
          >
            <span slot="ID"> <a-icon type="inbox" class="mr-1" /> ID</span>
            <span slot="Name"> <a-icon type="tags" class="mr-1" /> Name</span>
            <span slot="Time">
              <a-icon type="clock-circle" class="mr-1" /> Time</span
            >

            <span slot="start_time" slot-scope="text, record">
              <template v-if="record.start_time.split('/')[1] == 'NaN'">
                <div style="color: #bebebe">can not get Start Time</div>
              </template>
              <template v-else
                ><div>{{ record.start_time }}</div></template
              >
            </span>

            <span slot="end_time" slot-scope="text, record">
              <template v-if="record.end_time.split('/')[1] == 'NaN'">
                <div style="color: #bebebe">can not get End Time</div>
              </template>
              <template v-else
                ><div>{{ record.end_time }}</div></template
              >
            </span>
            <span slot="uploaded" slot-scope="text, record">
              <template v-if="record.uploaded == 'true'"> ✅ </template>
              <template v-else
                ><div><b>🚨 fail</b></div></template
              >
            </span>
          </a-table>
        </a-col>
        <a-col :xl="0" :lg="0" :md="0">
          <a-table
            :columns="validationDataListConfigSimple"
            :dataSource="validationListData.validateLists"
            @change="onChangeClipPage"
            :pagination="pagination"
            rowKey="id"
          >
            <span slot="ID"> <a-icon type="inbox" class="mr-1" /> ID</span>
            <span slot="Time">
              <a-icon type="clock-circle" class="mr-1" /> Time</span
            >
            <span slot="uploaded" slot-scope="text, record">
              <template v-if="record.uploaded == 'true'"> ✅ </template>
              <template v-else
                ><div><b>🚨 fail</b></div></template
              >
            </span>
            <!-- <span slot="validate_result" slot-scope="text, record">
                            <template v-if="record.validate_result == 'ERROR_OK'">
                                <div style="color: #288c28; font-weight: bold"><a-icon type="check" class="mr-1" />OK</div>
                            </template>
                            <template v-else
                                ><div style="color: red; font-weight: bold">{{ record.validate_result }}</div></template
                            >
                        </span> -->
          </a-table>
        </a-col>
      </a-row>
    </a-spin>
  </a-card>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { viewService } from "@/service/api/ViewService";
import ClipListDataModel from "@/service/model/data/clipList/ClipListDataModel";
import MetaInfoDataModel from "@/service/model/eventReview/MetaInfoDataModel";
import { RouterMenuName } from "@/enum/RouterMenuName";
import { RawLocation } from "vue-router";
import Base from "@/Base";
import { InjectModule } from "@/decorators/InjectModule";
import ReviewData from "@/store/module/ReviewData";
import PageInfo from "@/store/module/PageInfo";
import { delCookie, getCookie } from "@/util/CookieUtil";
import { CookieType } from "@/enum/CookieType";
import RouteParamsData from "@/store/module/RouteParamsData";
import EventReviewRouteParamsModel from "@/service/model/common/EventReviewRouteParamsModel";
import CliplistFilterInfoData from "@/store/module/CliplistFilterInfoData";
import { defaultErrorMsg } from "@/util/Utils";
import { loggerService } from "@/service/api/LoggerService";
import { GRAPH_BAR, GRAPH_PIE, MANEUVER_TYPE } from "@/const/ChartConstant";
import { searchService } from "@/service/api/SearchService";
import ProjectSelect from "@/components/common/select/ProjectSelect.vue";
import { ClipListMode } from "@/enum/ClipListMode";
import { epochToKSTms } from "@/util/Utils";
import { printTimestampPretty } from "@/util/Utils";
import { component } from "vue/types/umd";
import { columns } from "@/components/configuration/workerConfiguration/BrokerProperty.vue";

const validationDataListConfig = [
  {
    slots: { title: "ID" },
    dataIndex: "id",
    align: "center",
  },
  {
    slots: { title: "Name" },
    dataIndex: "name",
    align: "center",
  },
  {
    slots: { title: "Time" },
    dataIndex: "time",
    align: "center",
  },

  {
    title: "🛎 Start Time",
    scopedSlots: { customRender: "start_time" },
    /* eslint-disable @typescript-eslint/camelcase */
    dataIndex: "start_time",
    align: "center",
  },
  {
    /* eslint-disable @typescript-eslint/camelcase */

    title: "🛎 End Time",
    scopedSlots: { customRender: "end_time" },
    dataIndex: "end_time",
    align: "center",
  },
  {
    title: "✔ Uploaded",
    slots: { title: "Uploaded" },
    dataIndex: "uploaded",
    scopedSlots: { customRender: "uploaded" },
    align: "center",
  },
];

const validationDataListConfigSimple = [
  {
    slots: { title: "ID" },
    dataIndex: "id",
    align: "center",
  },
  {
    slots: { title: "Time" },
    dataIndex: "time",
    align: "center",
  },
  {
    title: "✔ Uploaded",
    slots: { title: "Uploaded" },
    dataIndex: "uploaded",
    scopedSlots: { customRender: "uploaded" },
    align: "center",
  },
];

const LAST_TIME_DEFAULT_STRING = "No files uploaded";

@Component({
  // data: () => ({
  //     svgPath: FileSearchOutline.name,
  // }),
  components: {
    FileSearchOutline,

    ErrorModal: () => import("/ErrorModal.vue"),
  },
})
export default class DataValidationPage extends Base {
  @InjectModule(PageInfo)
  private pageInfo$!: PageInfo;
  @InjectModule(RouteParamsData)
  private routeParamsData$!: RouteParamsData;
  @InjectModule(CliplistFilterInfoData)
  private cliplistFilterInfoData$!: CliplistFilterInfoData;
  @InjectModule(ReviewData)
  private reviewData$!: ReviewData;
  private searchText = "";
  private isClear = false;
  private clipId = "";
  private startIndex = 1;
  private numberOfItems = 10;
  private maxNumberOfItmes = 0;
  private dataUrl = "";
  private metaInfo = new MetaInfoDataModel();
  private isLoading = false;
  private clipListData: ClipListData = new ClipListDataModel();
  private validationListData: DataValidataionListData = {
    totalNumberOfValidateList: 0,
    validateLists: [],
  };

  private validationDataListConfig = validationDataListConfig;
  private validationDataListConfigSimple = validationDataListConfigSimple;
  private isAndCondition = true;
  private eventReviewOptions!: EventReviewRouteOptions;
  private isSearchMode = false;
  private recentUpdateatime = LAST_TIME_DEFAULT_STRING;
  // private dataValidationDataContainResultListData: DataValidationDataContainResultListData = {
  //     totalNumberOfValidations: 0,
  //     dataValidationDataContainResultList: []
  // }

  @Watch("isAndCondition")
  private watchIsAndCondition(): void {
    this.cliplistFilterInfoData$.setIsAndCondition(this.isAndCondition);
  }

  @Watch("projectId")
  private projectIdWatch(): void {
    if (this.reviewData$.clipListMode != ClipListMode.SEARCH) {
      this.subProjectId = "-1";
    }
  }

  @Watch("subProjectId")
  private subProjectIdWatch(): void {
    if (this.reviewData$.clipListMode != ClipListMode.SEARCH) {
      this.versionId = "-1";
    }
    this.onClickClearFilter();
    delCookie(CookieType.EVENT_REVIEW_SIGNAL_MODAL);
  }

  @Watch("versionId")
  private versionIdWatch(): void {
    this.sessionId = "-1";
    this.recentUpdateatime = LAST_TIME_DEFAULT_STRING;
    this.onClickClearFilter();

    if (this.versionId === "-1") {
      this.clipListData = new ClipListDataModel();
    } else {
      this.getValidationListData();
    }
  }

  @Watch("sessionId")
  private sessionIdWatch(sessionId: string): void {
    this.metaInfo = { id: "-1", value: "-1", clipType: "-", distinctId: "-1" };
    this.pageInfo$.setPage(1);

    if (sessionId == "-1") {
      this.clipListData.totalNumberOfClips = 0;
      this.clipListData.clips = [];
    }
    this.getValidationListData();
  }

  private mounted(): void {
    this.isAndCondition = this.cliplistFilterInfoData$.isAndCondition;
    this.init();
    this.isLoading = true;

    const mode = this.reviewData$.clipListMode;

    //dashboard에서 점프해서온 경우 maneuver 필터로 선택된 후 해당 페이지 이동
    // if(mode == ClipListMode.PIECHART || mode == ClipListMode.BARCHART) {
    //     this.getValidationListData();
    // }else if (mode == ClipListMode.SEARCH) {
    //     this.getValidationListData();
    // }
    this.getValidationListData();
  }

  private getValidationListData(): void {
    this.isLoading = true;

    viewService
      .retrieveValidataionListData(
        this.projectId,
        this.subProjectId,
        this.versionId,
        this.sessionId,
        this.startIndex,
        this.numberOfItems
      )
      .subscribe(
        (dataValidataionListData: DataValidataionListData) => {
          this.isLoading = false;
          this.maxNumberOfItmes =
            dataValidataionListData.totalNumberOfValidateList;

          dataValidataionListData.validateLists =
            dataValidataionListData.validateLists.map(
              (validateListsArr: any, index: number) => {
                if (index == 0) {
                  this.recentUpdateatime = epochToKSTms(
                    "" + validateListsArr.time
                  );
                }

                // if (validateListsArr.validate_result != "ERROR_OK") {
                //     var div = document.querySelector("#tableid");
                // }

                return {
                  ...validateListsArr,

                  uploaded: String(validateListsArr.uploaded),
                  time: epochToKSTms("" + validateListsArr.time),
                  /* eslint-disable @typescript-eslint/camelcase */
                  start_time: epochToKSTms("" + validateListsArr.startTime),

                  /* eslint-disable @typescript-eslint/camelcase */
                  end_time: epochToKSTms("" + validateListsArr.endTime),
                };
              }
            );

          this.validationListData = dataValidataionListData;

          this.validationListData.validateLists =
            dataValidataionListData.validateLists.map((v) => {
              return { ...v };
            });
        },
        (error: any) => {
          this.isLoading = false;
          loggerService.sendErrorLog("getValidationListData", error);
          this.$message.error(defaultErrorMsg(error));
        }
      );



    this.isLoading = false;
  }

  private onChangeClipPage(page: AntPagination): void {
    this.startIndex = page.current;
    //this.pageInfo$.setPage(page.current);
    this.getValidationListData();
  }

  private get pagination(): boolean | object {
    return this.validationListData.validateLists.length === 0
      ? false
      : {
          //total: this.dataValidationDataContainResultListData.totalNumberOfValidations,
          total: this.maxNumberOfItmes,
          //   current: this.$store.state.pageInfo.curPage,
          current: this.startIndex,
          showSizeChanger: false,
        };
  }

  private onClickClearFilter(): void {
    this.metaInfo = new MetaInfoDataModel();
    this.cliplistFilterInfoData$.setClear();
    this.getValidationListData();
    this.isClear = true;
  }

  private init(): void {
    this.validationListData = {
      totalNumberOfValidateList: 0,
      validateLists: [],
    };

    const before = getCookie(CookieType.REFERER_PAGE);
    const after = getCookie(CookieType.CURRENT_PAGE);
    if (
      before != RouterMenuName.ClipEventReview ||
      after != RouterMenuName.ClipList
    ) {
      if (this.$store.state.pageInfo.curPage != 1) {
        this.pageInfo$.setPage(1);
      }
    }
    if (after == RouterMenuName.ClipList) {
      if (this.cliplistFilterInfoData$.metaInfo) {
        this.metaInfo = this.cliplistFilterInfoData$.metaInfo;
      }
      this.getValidationListData();
    }
  }
}
</script>

ErrorModal.vue

<template>
  <a-modal title="Error description" v-model="syncVisible" @ok="handleOk()">
    <template v-if="validateErrorMsg == 'L0_E02'">
      <h4>{{ validateErrorMsg }}</h4>
      <p>Correct logger’s folder structure 필요함.</p>
    </template>
    <template v-else-if="validateErrorMsg == ('L0_E11' || 'L0_E22')">
      <h4>{{ validateErrorMsg }}</h4>
      <p>validation 불가능</p>
    </template>
    <template v-else-if="validateErrorMsg == ('L0_E5' || 'L0_E07')">
      <h4>{{ validateErrorMsg }}</h4>
      <p>meta.json 파일관련 오류</p>
      <p>
        drive duration/distance에 대한 MIN_VALUE를 새로 요청해야 함. (제공 받은
        MIN_VALUE는 폴더에 있는 전체 주행 합계에 대한 Threshold임)
      </p>
    </template>
    <template v-else-if="validateErrorMsg == 'L2_SIGNAL_E07'">
      <h4>{{ validateErrorMsg }} Timestamp Jump</h4>
      <p>
        메시지 마다 timestamp 간격이 time_delta 보다 큰 경우가 존재하는지
        체크하는 validation.
      </p>
      <p>message 별 time_delta 필요함</p>
    </template>

    <template v-else-if="validateErrorMsg == 'L2_SIGNAL_E04'">
      <h4>{{ validateErrorMsg }} (Signal frozen)</h4>
      <p>signal value의 변화가 없는 경우가 존재하는지 체크하는 validation</p>
      <p>
        signal이 아닌 message 단위로 frozen을 check한다면 message의 list가 필요
      </p>
    </template>
    <template v-else-if="validateErrorMsg == 'L2_SIGNAL_E08'">
      <h4>{{ validateErrorMsg }} (Signal Jump)</h4>
      <p>
        Signal value가 특정 시간동안 너무 크게 변한 경우가 있는지 체크하는
        validation
      </p>
      <p>signal별 time_delta, value_delta 가 필요</p>
    </template>
    <template v-else>
      <h4>{{ validateErrorMsg }}</h4>
      <p>Error List에 없는 에러입니다.</p>
    </template>
  </a-modal>
</template>

<script lang="ts">
import { Component, Prop, PropSync, Vue } from "vue-property-decorator";
@Component
export default class TeamEdit extends Vue {
  @PropSync("errorModalVisible")
  private syncVisible!: boolean;

  @Prop() private validateErrorMsg!: any;
  // @Emit("Submit")
  // private onClickSubmit(): void {
  //     //console.log(11);
  //     //edit team 에서 organization 넣는 함수 없음
  // }

  private onClickClose(): void {
    this.syncVisible = false;
  }
  private handleOk() {
    //console.log(e);
    this.syncVisible = false;
  }
}
</script>
<style scoped>
p {
  margin-left: 5px;
}
</style>