PMCORE-3090:UI - Task Actions (EHX) - Inbox List (and any Custom Case List that belongs to this list)

Corrections

CR

Conection to api

modals with rest service

CR

resources/assets/js/home/modal/ModalPauseCase.vue

@@ -0,0 +1,163 @@
+<template>
+  <div>
+    <b-modal
+      ref="modal-pause-case"
+      hide-footer
+      size="lg"
+    >
+      <template v-slot:modal-title>
+        {{ $t('ID_PAUSE_CASE') }}
+        <i class="far fa-pause-circle"></i>
+      </template>
+      <b-container fluid>
+        <b-row class="my-1">
+          <b-col sm="3">
+            <label for="pauseDate">{{ $t('ID_PAUSE_DATE') }}</label>
+          </b-col>
+          <b-col sm="5">
+            <b-form-datepicker
+              disabled  
+              id="pauseDate"
+              class="mb-2"
+              v-model="pauseData.pauseDate"
+              :locale="locale"
+              :date-format-options="{ year: 'numeric', month: 'numeric', day: 'numeric' }"
+            ></b-form-datepicker>
+          </b-col>
+          <b-col sm="4">
+            <input type="time" id="pauseTime" v-model="pauseData.pauseTime" class="form-control" disabled>
+          </b-col>
+        </b-row>
+        
+        <b-row class="my-1">
+          <b-col sm="3">
+            <label for="unpauseDate">{{ $t('ID_UNPAUSE_DATE') }}</label>
+          </b-col>
+          <b-col sm="5">
+            <b-form-datepicker
+              id="unpauseDate"
+              class="mb-2"
+              v-model="pauseData.unpauseDate"
+              :locale="locale"
+              :min="minDate"
+              :date-format-options="{ year: 'numeric', month: 'numeric', day: 'numeric' }"
+            ></b-form-datepicker>
+          </b-col>
+          <b-col sm="4">
+            <input type="time" v-model="pauseData.unpauseTime" id="unpauseTime" class="form-control">
+          </b-col>
+        </b-row>
+
+        <b-row class="my-1">
+          <b-col sm="3">
+            <label for="reasonPause">{{ $t('ID_REASON_PAUSE') }}</label>
+          </b-col>
+          <b-col sm="9">
+            <b-form-textarea
+              id="reasonPause"
+              v-model="pauseData.reasonPause"              
+              rows="3"
+              max-rows="6"
+            ></b-form-textarea>
+          </b-col>
+        </b-row>
+
+        <b-row>
+          <b-col sm="3">
+            <label for="notifyUser">{{ $t('ID_NOTIFY_USERS_CASE') }}</label>
+          </b-col>
+          <b-col sm="8">
+            <b-form-checkbox v-model="pauseData.nofitfyUser" id="notifyUser" name="notifyUser" switch>
+            </b-form-checkbox>
+          </b-col>
+        </b-row>
+      </b-container>
+      <div class="modal-footer">
+        <div class="float-right">
+          <b-button
+            variant="danger"
+            data-dismiss="modal"
+            @click="cancel"
+          >
+            {{ $t("ID_CANCEL") }}
+          </b-button>
+          <b-button 
+            variant="success" 
+            @click="pauseCase"
+          >
+            {{ $t("ID_PAUSE") }}
+          </b-button>
+        </div>
+      </div>
+    </b-modal>
+  </div>
+</template>
+
+<script>
+import api from "./../../api/index";
+export default {
+  name: "ModalPauseCase",
+  components: {},
+  props: {},
+  mounted() {},
+  data() {
+    return {
+      data: null,
+      locale: 'en-US',
+      pauseData: {
+        unpauseDate: '',
+        unpauseTime: '',
+        reasonPause: '',
+        nofitfyUser: '',
+        pauseDate: '',
+        pauseTime: ''
+      },
+      minDate: '',
+    };
+  },
+  methods: {
+    classBtn(cls) {
+      return "btn v-btn-request " + cls;
+    },
+    show() {
+      this.setDateTime();
+      this.$refs["modal-pause-case"].show();
+    },
+    cancel() {
+      this.$refs["modal-pause-case"].hide();
+    },
+    /**
+     * Set DateTime with current time as default
+     */
+    setDateTime() {
+      var now = new Date(),
+          nextDay = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1),
+          today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+      this.minDate = nextDay;
+      this.pauseData.pauseDate = today;
+      this.pauseData.pauseTime = now.getHours() + ":" + now.getMinutes();
+
+    },
+    /**
+     * Pause the case
+     */
+    pauseCase() {
+      let that = this;
+      this.data.unpausedDate = this.pauseData.unpauseDate;
+      this.data.unpausedTime = this.pauseData.unpauseTime;
+      this.data.nofitfyUser = this.pauseData.nofitfyUser;
+      this.data.reasonPause = this.pauseData.reasonPause;
+      
+      api.cases.pauseCase(this.data).then((response) => {
+        if (response.statusText == "OK") {
+          that.$refs["modal-pause-case"].hide();
+          that.$parent.$refs["vueTable"].getData();
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style>
+</style>