ChargEco/Strides-Admin/src/views/charge/components/OverwriteOCPI.vue

<template>
  <el-dialog
    :visible="visible"
    :before-close="e => hideDialog()"
    title="Manual Overwrite"
    custom-class="overwrite-ocpi-dialog">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-position="right"
      label-width="240px">
      <el-form-item
        label="Charge Box ID:">
        <el-input
          v-model="item.chargeBoxId"
          class="flex-item"
          readonly
          style="max-width: 320px;"/>
      </el-form-item>
      <el-form-item
        label="Connector ID:">
        <el-input
          v-model="item.connectorId"
          class="flex-item"
          readonly
          style="max-width: 320px;"/>
      </el-form-item>
      <el-form-item
        label="Current OCPP Status:"
        prop="transactionId">
        <el-input
          v-model="form.currentOcppStatus"
          class="flex-item"
          readonly
          style="max-width: 320px;"/>
      </el-form-item>
      <el-form-item
        label="Current OCPI Status:"
        prop="transactionId">
        <el-input
          v-model="form.currentOcpiStatus"
          class="flex-item"
          readonly
          style="max-width: 320px;"/>
      </el-form-item>
      <el-form-item
        label="Target OCPI Status:"
        prop="latestOcpiStatus">
        <el-select
          v-model="form.latestOcpiStatus"
          class="flex-item"
          style="max-width: 320px;">
          <el-option
            v-for="(item, index) in options.status"
            :key="index"
            :label="item"
            :value="item"/>
        </el-select>
      </el-form-item>
      <el-form-item
        label="TTL / Expected Recovery Time:"
        prop="latestOcpiStatusExpireTime">
        <el-date-picker
          v-model="form.latestOcpiStatusExpireTime"
          class="flex-item"
          type="datetime"
          format="yyyy-MM-dd HH:mm"
          value-format="yyyy-MM-dd HH:mm"
          style="width: 100%; max-width: 320px;"
          :picker-options="pickerOptions"/>
      </el-form-item>
      <el-form-item
        label="Action Reason:"
        prop="actionReason">
        <el-input
          v-model="form.actionReason"
          class="flex-item"
          :autosize="autosize"
          maxlength="5000"
          type="textarea"
          style="max-width: 320px;"/>
      </el-form-item>
      <div class="center buttons">
        <el-button
          type="primary"
          class="cancel-button"
          @click="hideDialog()">
          Back
        </el-button>
        <el-button
          @click="onClickSave"
          type="primary"
          :loading="loading.save">
          &nbsp;Save&nbsp;
        </el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import api from '../../../http/api/charge'
export default {
  name: "DialogOverwriteOCPI",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      loading: {
        save: false
      },
      form: {
        connectorPk: "",
        currentOcppStatus: "",
        currentOcpiStatus: "",
        latestOcpiStatus: "",
        latestOcpiStatusExpireTime: "",
        actionReason: ""
      },
      rules: {
        latestOcpiStatus: {
          required: true,
          trigger: 'change',
          message: 'Please select status'
        },
        latestOcpiStatusExpireTime: {
          required: true,
          trigger: 'change',
          message: 'Please select date time'
        },
        actionReason: {
          required: true,
          trigger: 'blur',
          message: 'Please input action reason'
        }
      },
      options: {
        status: []
      },
      autosize: {
        minRows: 3,
        maxRows: 10,
      },
      pickerOptions: {
        disabledDate: time => {
          return time.getTime() < new Date().setHours(0, 0, 0, 0);
        }
      }
    };
  },
  mounted() {
    this.getStatusOptions();
  },
  watch: {
    item: {
      immediate: true,
      handler(value) {
        if (value) {
          this.form.connectorPk = this.item.connectorPk;
          this.form.currentOcpiStatus = this.item.ocpiStatus;
          this.form.currentOcppStatus = this.item.status;
        }
      }
    },
  },
  methods: {
    hideDialog(success) {
      this.$emit("hide", success || false);
      this.form.latestOcpiStatus = "";
      this.form.latestOcpiStatusExpireTime = "";
      this.form.actionReason = "";
      this.$nextTick(() => {
        this.$refs['form'].clearValidate();
      })
    },
    getStatusOptions() {
      api.getOCPIStatusOptions().then(res => {
        if (res.data) {
          this.options.status = res.data
        }
      }).catch(err => {
        
      })
    },
    onClickSave() {
      this.$refs['form'].validate(result => {
        if (result) {
          this.manualOverwrite()
        }
      })
    },
    manualOverwrite() {
      this.loading.save = true;
      api.overwriteOCPIStatus(this.form).then(res => {
        this.loading.save = false;
        this.$message({
          message: 'Overwrite successfully',
          type: 'success'
        })
        this.hideDialog(true);
      }).catch(err => {
        this.loading.save = false;
        this.$message({
          type: 'error',
          message: err
        })
      });
    }
  },
}
</script>

<style scoped>
>>> .overwrite-ocpi-dialog {
  max-width: 620px;
}
</style>