ChargEco/Strides-Admin/src/views/campaign/detail.vue

<template>
  <div class="container" v-loading="loading">
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-position="right"
      label-width="130px">
      <div class="flexr">
        <div class="content flex1">
          <div class="section-title">Campaign Detail</div>
          <el-form-item
            prop="campaignTitle"
            label="Campaign Title:">
            <el-input
              v-model="form.campaignTitle"
              class="add-text"
              placeholder=""
              maxlength="100"/>
          </el-form-item>
          <el-form-item
            prop="startTime"
            label="Start Date Time:">
            <el-date-picker
              v-model="form.startTime"
              class="add-text"
              type="datetime"
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm"/>
          </el-form-item>
          <el-form-item
            prop="endTime"
            label="End Date Time:">
            <el-date-picker
              v-model="form.endTime"
              class="add-text"
              type="datetime"
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm"
              :default-value="form.startTime"/>
          </el-form-item>
          <el-form-item
            prop="campaignContent"
            label=""
            label-width="0">
            <label
              class="el-form-item__label"
              style="width: 150px;">Campaign Content:</label>
            <el-input
              v-model="form.campaignContent"
              class="area-text"
              type="textarea"
              placeholder=""
              maxlength="5000"
              :autosize="autoSize"/>
            <div class="add-checkbox" v-if="!isEdit">
              <el-checkbox
                v-model="form.switch"
                label="Use Campaign Title and Text to Create Notification Post"/>
            </div>
          </el-form-item>
        </div>
        <div class="content flex1">
          <div class="section-title">Images & Links</div>
          <el-form-item
            label=""
            label-width="0">
            <label
              class="el-form-item__label"
              style="float: none;">Photos (Max 4 photos and 2mb each):</label>
            <div class="flexcr">
              <el-upload
                class="logo-upload"
                action
                :limit="1"
                :show-file-list="false"
                :file-list="[]"
                :http-request="file => uploadImages(file, index)"
                accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG"
                v-loading="item.loading"
                v-for="(item, index) in images"
                :key="index">
                <div class="uploader-image" v-if="item.articleImagePath">
                  <el-image
                    :src="$imageSrc(item.articleImagePath)"
                    title="Click to update image"/>
                  <i
                    title="Click to delete image"
                    class="uploader-del el-icon-delete"
                    @click.stop="deleteImages(index)"></i>
                </div>
                <i v-else
                  class="el-icon-plus avatar-uploader-icon"
                  title="Click to select file"/>
              </el-upload>
            </div>
          </el-form-item>
          <el-form-item
            label=""
            label-width="0">
            <label
              class="el-form-item__label"
              style="float: none;">LINKS:</label>
            <div style="max-width: 600px; display: grid;">
              <el-table
                class="article-links-table no-border"
                :data="form.links">
                <el-table-column
                  label="Name Of Link"
                  min-width="120px">
                  <template slot-scope="{row}">
                    <el-input
                      v-model="row.articleLinkName"
                      maxlength="100"/>
                  </template>
                </el-table-column>
                <el-table-column
                  label="Hyperlink"
                  min-width="130px">
                  <template slot-scope="{row}">
                    <el-input
                      v-model="row.articleLink"
                      maxlength="150"/>
                  </template>
                </el-table-column>
                <el-table-column
                  label=""
                  width="90px">
                  <template slot-scope="{row,$index}">
                    <div class="flexc" v-loading="row.loading">
                      <i
                        class="list-item-icon el-icon-remove-outline"
                        style="color: #ED3F3F;"
                        @click="onRemoveLink($index)"/>
                      <i
                        v-if="$index === form.links.length - 1"
                        class="list-item-icon el-icon-circle-plus-outline"
                        style="color: #82CF08;"
                        @click="addLinkObj"/>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-form-item>
        </div>
      </div>
      <div class="content">
        <div class="section-title">Configure Discount</div>
        <el-table
          class="article-links-table no-border"
          :data="form.discounts"
          style="max-width: 800px;">
          <el-table-column
            label="User Type"
            min-width="80px">
            <template slot-scope="{row,$index}">
              <el-select
                style="width: 100%;"
                :value="row.userType"
                @change="type => changeUserType($index, type)"
                clearable>
                <el-option
                  v-for="item in userTypeOptions"
                  :key="item"
                  :label="item"
                  :value="item" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            label="Group Name"
            min-width="120px">
            <template slot-scope="{row}">
              <el-select
                style="width: 100%;"
                v-if="row.groupList.length"
                :disabled="row.userType == 'PUBLIC'"
                v-model="row.groupPk"
                clearable>
                <el-option
                  v-for="(item,index) in row.groupList"
                  :key="index"
                  :label="item.name"
                  :value="item.value"/>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            label="Discount (%)"
            min-width="80px">
            <template slot-scope="{row}">
              <el-input
                v-model="row.discount"
                maxlength="5"/>
            </template>
          </el-table-column>
          <el-table-column
            label=""
            width="90px">
            <template slot-scope="{row,$index}">
              <div class="flexc" v-loading="row.loading">
                <i
                  class="list-item-icon el-icon-remove-outline"
                  style="color: #ED3F3F;"
                  @click="onRemoveDiscount($index)"/>
                <i
                  v-if="$index === form.discounts.length - 1"
                  class="list-item-icon el-icon-circle-plus-outline"
                  style="color: #82CF08;"
                  @click="addDiscountObj"/>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="content flexcr">
        <div class="buttons">
          <el-button
            @click="onClickCancel"
            type="primary"
            class="cancel-button">
            Cancel
          </el-button>
          <el-button
            @click="onClickSave"
            type="primary">
            Save
          </el-button>
        </div>
        <div
          class="update-by"
          v-if="isEdit">
          <span
            class="add-text"
            :title='"CREATED BY " + form.createdBy + " ON " + form.createdOn'>
            LAST UPDATED BY {{form.updatedBy}} TIMESTAMP: {{form.updatedOn}}
          </span>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import api from '../../api/campaign.js'
import apiUser from '@/http/api/apiUser'
export default {
  data() {
    return {
      loading: false,
      form: {
        campaignId: "",
        startTime: "",
        endTime: "",
        campaignTitle: "",
        campaignContent: "",
        sendNotification: true,
        imagePaths: [],
        links: [],
        discounts: []
      },
      options: {
        type: []
      },
      images: [{
        articleImagePath: "",
        loading: false
      }],
      isEdit: false,
      rules: {
        startTime: [{
          message: "Please select start date time",
          trigger: "change",
          required: true,
        }],
        endTime: [{
          message: "Please select end date time",
          trigger: "change",
          required: true,
        }],
        campaignTitle: [{
          message: "Please input campaign title",
          trigger: "blur",
          required: true,
        }],
        campaignContent: [{
          message: "Please input campaign content",
          trigger: "blur",
          required: true,
        }]
      },
      autoSize: {
        minRows: 20,
        maxRows: 50
      },
      userTypeOptions: [],
      groupOptions: {
        PUBLIC: [{
          name: "None",
          value: ""
        }]
      }
    };
  },
  created() {
    this.addLinkObj();
    this.addDiscountObj();
    this.getUserTypeOption();
    if (this.$route.params.id) {
      this.loading = true;
      this.isEdit = true;
      this.getCampaignDetail();
    }
  },
  methods: {
    onClickCancel() {
      this.$nextTick(() => {
        this.$router.replace({
          path: "/marketing-management/campaign"
        })
      })
    },
    getUserTypeOption() {
      apiUser.getUserTypeOptions().then(res => {
        if (res.data) {
          this.userTypeOptions = res.data
        }
      }).catch(err => {
        this.$message({
          message: error,
          type: 'error'
        })
      })
    },
    getCampaignDetail() {
      api.viewCampaign(this.$route.params.id).then(res => {
        if (res.data) {
          let info = res.data
          this.images = []
          info.imagePaths.forEach(item => {
            this.images.push({
              ...item,
              loading: false
            })
          })
          info.discounts.forEach(item => {
            item.groupList = []
          })
          this.form = info;
          this.$nextTick(() => {
            this.form.discounts.forEach((item, index) => {
              setTimeout(() => {
                this.changeUserType(index, item.userType)
              }, 300 * index)
            })
          })
          this.addImageObj();
        }
      }).catch(err => {
        this.$message.error(err)
      }).finally(() => {
        this.loading = false;
      })
    },
    addImageObj() {
      if (this.images.length < 4) {
        this.images.push({
          articleImagePath: "",
          loading: false
        })
      }
    },
    uploadImages(file, index) {
      this.images[index].loading = true;
      const formData = new FormData()
      formData.append('file', file.file)
      api.uploadImages(formData).then(res => {
        if (res.data.picturePath) {
          if (!this.images[index].articleImagePath) {
            this.addImageObj();
          }
          this.images[index].articleImagePath = res.data.picturePath
        }
      }).catch(err => {
        this.$message({
          message: err,
          type: 'error'
        })
      }).finally(() => {
        this.images[index].loading = false;
      })
    },
    deleteImages(index) {
      const item = this.images[index];
      if (item.articleImageId) {
        this.$confirm('Confirm delete?', 'Delete', {
          confirmButtonText: 'Confirm',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(res => {
          this.deleteImageById(item.articleImageId, index);
        })
      } else {
        this.images.splice(index, 1);
        this.addImageObj()
      }
    },
    deleteImageById(id, index) {
      this.images[index].loading = true;
      api.deleteCampaignImage(id).then(res => {
        this.images.splice(index, 1);
        this.addImageObj()
      }).catch(err => {
        this.$message({
          message: err,
          type: 'error'
        })
        this.images[index].loading = false;
      })
    },
    addLinkObj() {
      this.form.links.push({
        loading: false,
        articleLink: "",
        articleLinkName: ""
      })
    },
    onRemoveLink(index) {
      const item = this.form.links[index];
      if (item.articleLinkId) {
        this.$confirm('Confirm delete?', 'Delete', {
          confirmButtonText: 'Confirm',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(res => {
          this.deleteLinkById(item.articleLinkId, index);
        })
      } else {
        this.form.links.splice(index, 1);
        if (this.form.links.length == 0) {
          this.addLinkObj()
        }
      }
    },
    deleteLinkById(id, index) {
      this.form.links[index].loading = true;
      api.deleteCampaignLink(id).then(res => {
        this.form.links.splice(index, 1);
        if (this.form.links.length == 0) {
          this.addLinkObj()
        }
      }).catch(err => {
        this.$message({
          message: err,
          type: 'error'
        })
        this.form.links[index].loading = false;
      })
    },
    addDiscountObj() {
      this.form.discounts.push({
        loading: false,
        userType: "",
        groupPk: "",
        discount: "",
        groupList: []
      })
    },
    onRemoveDiscount(index) {
      const item = this.form.discounts[index];
      if (item.articleDiscountId) {
        this.$confirm('Confirm delete?', 'Delete', {
          confirmButtonText: 'Confirm',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(res => {
          this.deleteDiscountById(item.articleDiscountId, index);
        })
      } else {
        this.form.discounts.splice(index, 1);
        if (this.form.discounts.length == 0) {
          this.addDiscountObj()
        }
      }
    },
    deleteDiscountById(id, index) {
      this.form.discounts[index].loading = true;
      api.deleteCampaignDiscount(id).then(res => {
        this.form.discounts.splice(index, 1);
        if (this.form.discounts.length == 0) {
          this.addDiscountObj()
        }
      }).catch(err => {
        this.$message({
          message: err,
          type: 'error'
        })
        this.form.discounts[index].loading = false;
      })
    },
    changeUserType(dsIndex, dsType) {
      let type = this.form.discounts[dsIndex].userType;
      if (dsType != type) {
        this.form.discounts[dsIndex].userType = dsType;
        this.form.discounts[dsIndex].groupPk = "";
      }
      if (dsType) {
        if (this.groupOptions[dsType] && this.groupOptions[dsType].length > 0) {
          this.form.discounts[dsIndex].groupList = this.groupOptions[dsType];
        } else {
          this.groupOptions[dsType] = []
          this.getGroupOptions(dsIndex, dsType);
        }
      } else {
        this.form.discounts[dsIndex].groupList = []
      }
    },
    getGroupOptions(index, type) {
      apiUser.getGroupByType(type).then(res => {
        if (res.data) {
          this.groupOptions[type] = res.data
          this.changeUserType(index, type)
        }
      }).catch(err => {
        this.$message({
          message: err,
          type: 'error'
        })
        this.groupOptions[type] = ""
      })
    },
    onClickSave() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const images = this.images.filter(item => item.articleImagePath)
          if (images.length == 0) {
            this.$message({
              message: "Please upload at least one image",
              type: 'error'
            })
            return;
          }
          const links = this.form.links.filter(item => item.articleLinkName);
          if (links.length == 0) {
            this.$message({
              message: "Please add at least one link",
              type: 'error'
            })
            return;
          }
          const discounts = this.form.discounts.filter(item => {
            if (item.userType == "PUBLIC") {
              return item.userType && item.discount
            } else {
              return item.userType && item.groupPk && item.discount
            }
          })
          const params = {
            ...this.form,
            links: links,
            imagePaths: images,
            discounts: discounts
          }
          this.loading = true;
          this.isEdit ? this.updateArticle(params) : this.addArticle(params);
        }
      })
    },
    addArticle(params) {
      api.addCampaign(params).then(res => {
        this.$message({
          type: 'success',
          message: "Add successfully"
        });
        this.onClickCancel();
      }).catch(err => {
        this.loading = false;
        this.$message({
          type: 'error',
          message: err
        })
      });
    },
    updateArticle(params) {
      api.updateCampaign(params).then(res => {
        this.$message({
          type: 'success',
          message: "Update successfully"
        });
        this.onClickCancel();
      }).catch(err => {
        this.loading = false;
        this.$message({
          type: 'error',
          message: err
        })
      });
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '../../styles/variables.scss';
  .container {
    width: 100%;
    padding: 20px 60px;
    min-height: $mainAppMinHeight;
    background-color: #F0F5FC;
  }
  .content {
    min-width: 400px;
    margin: 0 8px 16px;
    padding: 15px 60px;
    border-radius: 6px;
    background-color: white;
  }
  
  .section-title {
    color: #333;
    margin-top: 20px;
    margin-bottom: 30px;
    font-size: 15px;
    user-select: none;
    line-height: 24px;
    font-weight: bold;
    font-family: sans-serif;
    text-transform: uppercase;
  }
  .add-text {
    width: 100%;
    min-width: 200px;
  }
  
  .area-text {
    width: 100%;
    min-width: 200px;
  }
  
  .add-text ::v-deep .el-textarea__inner,
  .area-text ::v-deep .el-textarea__inner {
    font-family: sans-serif;
  }
  .add-checkbox {
    overflow: auto;
    padding: 10px 0;
    &::v-deep {
      .el-checkbox.is-checked .el-checkbox__label{
        font-weight: bold;
      }
    }
  }
  
  
  
  .hr {
    height: 2px;
    margin: 10px -40px;
    background-color: #F0F5FC;
  }
  .buttons {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  @media screen and (max-width: 500px) {
    .container {
      padding: 0px;
    }
    .content {
      padding: 15px 30px;
    }
  }
  .logo-upload {
    width: 148px;
    height: 148px;
    position: relative;
    margin-right: 15px;
    margin-bottom: 15px;
    ::v-deep .el-image {
      width: 148px;
      height: 148px;
      border-radius: 6px;
    }
  }
  
  .avatar-uploader-icon {
    width: 148px;
    height: 148px;
    color: #8c939d;
    cursor: pointer;
    font-size: 28px;
    text-align: center;
    line-height: 148px;
    border-radius: 6px;
    border: 1px dashed #d9d9d9;
  }
  
  .uploader-image {
    width: 148px;
    height: 148px;
    text-align: left;
    position: relative;
  }
  
  .uploader-image ::v-deep img {
    object-fit: cover;
  }
  
  .uploader-del {
    right: 4px;
    bottom: 4px;
    color: #fff;
    padding: 5px;
    display: none;
    border-radius: 30px;
    position: absolute;
    background-color: rgba(1,1,1,.4);
  }
  
  .uploader-image:hover .uploader-del {
    display: block;
  }
  
  .article-links-table ::v-deep .el-table__header th {
    color: #606266;
    border: none;
    padding: 10px 0 0;
    font-weight: normal;
    background: transparent;
  }
  .article-links-table ::v-deep td {
    border: none;
    padding: 1px 0;
    background: #fff !important;
  }
  .article-links-table ::v-deep .cell {
    padding: 0px 8px 10px;
  }
  .list-item-icon {
    height: 30px;
    cursor: pointer;
    font-size: 26px;
    font-weight: 500;
    line-height: 30px;
  }
  .list-item-icon + .list-item-icon {
    margin-left: 15px;
  }
</style>