add src/views/charge/components/OverwriteOCPI.vue

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

@@ -0,0 +1,199 @@
+<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="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="Latest 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="Latest OCPI Status Expire 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;"/>
+      </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'
+        },
+      },
+      options: {
+        status: []
+      },
+      autosize: {
+        minRows: 3,
+        maxRows: 10,
+      },
+    };
+  },
+  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>