task_ui/components/HoursForm.vue

<template>
  <form class="hours-form mb-1">
    <div class="row-hours">
      <div class="form-group col coolinput">
        <label for="input" class="form-label text"> ورود :</label>
        <input
          name="input"
          v-model="hourswork.inTime"
          v-on:blur="inTimeCorrect(hourswork.inTime, $event)"
          v-on:focus="timeFocus('intime', hourswork.inTime)"
          placeholder="00:00"
          ref="intime"
          type="text"
          maxlength="5"
          class="form-control items-form-control input"
          pattern="/^\d{1,2}:\d{1,2}$/gm"
          required="required"
          :class="{ invalid: invalidInTime }"
        />
      </div>
      <div class="form-group col coolinput">
        <label for="input" class="form-label text">خروج :</label>
        <input
          name="input"
          v-model="hourswork.outTime"
          v-on:blur="outTimeCorrect(hourswork.outTime, $event)"
          v-on:focus="timeFocus('outtime', hourswork.outTime)"
          placeholder="00:00"
          ref="outtime"
          type="text"
          maxlength="5"
          required="required"
          pattern="/^\d{1,2}:\d{1,2}$/gm"
          class="form-control items-form-control input"
          :class="{ invalid: invalidOutTime }"
        />
      </div>
      <div class="form-group col coolinput">
        <label for="input" class="form-label text">غیرمفید :</label>
        <input
          name="input"
          v-model="hourswork.noWorkTime"
          v-on:blur="noWorkTimeCorrect(hourswork.noWorkTime)"
          v-on:focus="timeFocus('noworktime', hourswork.noWorkTime)"
          placeholder="00:00"
          ref="noworktime"
          type="text"
          class="form-control items-form-control input"
          @keydown.tab="saveHoursWork()"
        />
      </div>
      <div class="form-group col-auto d-flex me-auto align-items-center">
        <button-component
          v-if="hoursFormsLenght <= 1"
          @click="deleteMainTime()"
          buttonText=""
          v-tooltip="'حذف زمان کاری'"
        >
          <span class="text-danger">
            <svg class="icon icon-Component-295--1">
              <use xlink:href="#icon-Component-295--1"></use>
            </svg>
          </span>
        </button-component>

        <span
          @click="saveHoursWork()"
          title=" ثبت"
          class="btn main-page_body-icon"
        >
          <svg class="icon icon-Component-233--1 main-page_body-icon-add">
            <use xlink:href="#icon-Component-233--1"></use>
          </svg>
        </span>

        <span
          v-if="!itemIndex && hoursFormsLenght < 3"
          title=" اضافه کردن"
          class="btn main-page_body-icon pe-0 ps-0"
        >
          <svg
            title="اضافه کردن"
            @click="openFormHoursInformation()"
            class="icon icon-Component-133--1"
          >
            <use xlink:href="#icon-Component-133--1"></use>
          </svg>
        </span>

        <span
          v-else
          title="حذف"
          @click="deleteFormHoursInformation(hourswork)"
          class="btn main-page_body-icon-close pe-0 ps-0"
        >
          <svg class="icon icon-Component-21--1">
            <use xlink:href="#icon-Component-21--1"></use>
          </svg>
        </span>
      </div>
    </div>
  </form>
</template>

<script>
export default {
  props: {
    itemIndex: {
      default: 0,
    },
    hoursFormsLenght: {
      default: 0,
    },
    hourswork: {
      default() {
        return {
          inTime: "",
          outTime: "",
          noWorkTime: "",
        };
      },
    },
  },
  emits: ["delete-form-hours", "save-form-hours", "add-new-record"],
  data() {
    return {
      invalidInTime: false,
      invalidOutTime: false,
    };
  },
  computed: {
    // ...mapGetters(["currentUser"]),
    // ...mapGetters("list", ["listGetter"]),
  },
  methods: {
    timeFocus(ref, value) {
      if (!value) value = "00:00";
      this.$refs[ref].select();
    },
    inTimeCorrect(value) {
      if (!value) value = "00:00";
      let res = this.timeCorrect(value);
      if (res) this.hourswork.inTime = res;
    },
    outTimeCorrect(value) {
      if (!value) value = "00:00";
      let res = this.timeCorrect(value);
      if (res) this.hourswork.outTime = res;
    },
    noWorkTimeCorrect(value) {
      if (!value) value = "00:00";
      let res = this.timeCorrect(value);
      if (res) this.hourswork.noWorkTime = res;
    },
    timeCorrect(value) {
      // if (value.charCodeAt()) {
      // }

      if (value == null) return value;
      value = value.trim();
      value = value.replace(".", ":");
      value = value.replace(" ", ":");

      if (value.indexOf(":") == -1) {
        if (value.length == 0) value = "00:00";
        else if (value.length == 1) value = "0" + value + ":00";
        else if (value.length == 2) value = value + ":00";
        else if (value.length == 3)
          value = "0" + value.substring(0, 1) + ":" + value.substring(1);
        else if (value.length == 4)
          value =
            value.substring(0, 2) + ":" + value.substring(2).padStart(2, "0");
        else if (value.length > 4)
          value = value.substring(0, 2) + ":" + value.substring(3, 5);
      }
      return value;
    },
    deleteMainTime() {
      this.mySwalConfirm({
        title: "هشدار!!!",
        html: "تمامی کارهای امروز پاک خواهد. آیا مطمئن هستید؟ ",
      }).then((result) => {
        if (result.isConfirmed) {
          this.$emit("delete-form-hours");
        }
      });
    },
    deleteFormHoursInformation() {
      this.$emit("delete-form-hours");
    },
    saveHoursWork() {
      const inTimeIsInvalid1 = this.hourswork.inTime == null;
      const inTimeIsInvalid2 = this.hourswork.inTime?.indexOf("00:00") > -1;
      // const inTimeIsInvalid3 = this.hourswork.inTime?.indexOf("0:00") > -1;

      const outTimeIsInvalid1 = this.hourswork.outTime == null;
      const outTimeIsInvalid2 = this.hourswork.outTime?.indexOf("00:00") > -1;
      // const outTimeIsInvalid3 = this.hourswork.outTime?.indexOf("0:00") > -1;

      if (
        inTimeIsInvalid1 ||
        inTimeIsInvalid2 ||
        // inTimeIsInvalid3 ||
        outTimeIsInvalid1 ||
        outTimeIsInvalid2
        // || outTimeIsInvalid3
      ) {
        this.invalidInTime = inTimeIsInvalid1 || inTimeIsInvalid2;
        this.invalidOutTime = outTimeIsInvalid1 || outTimeIsInvalid2;

        this.mySwalToast({
          icon: "error",
          title: "ورودی نامعتبر",
        });
      } else {
        this.invalidInTime = false;
        this.invalidOutTime = false;

        this.noWorkTimeCorrect(this.hourswork.noWorkTime);
        this.$emit("save-form-hours");
      }
    },
    openFormHoursInformation() {
      const inTimeIsInvalid =
        this.hourswork.inTime == null || this.hourswork.inTime == "00:00";
      const outTimeIsInvalid =
        this.hourswork.outTime == null || this.hourswork.outTime == "00:00";

      if (inTimeIsInvalid || outTimeIsInvalid) {
        this.invalidInTime = inTimeIsInvalid;
        this.invalidOutTime = outTimeIsInvalid;

        this.mySwalToast({
          icon: "error",
          title: "ورودی نامعتبر",
        });
      } else {
        this.invalidInTime = false;
        this.invalidOutTime = false;

        this.$emit("add-new-record");
      }
    },
  },
  
};
</script>

<style lang="scss" scoped>
.hours-form {
  border: 1px rgb(223, 223, 223) solid;
  height: 5em;
  border-radius: 0.5em;
}
.form-group {
  display: flex;
  align-items: center;
}
.row-hours {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.form-control {
  &.invalid {
    border: 1px solid red !important;
  }
}
</style>