web/app/components/common/NoteInfo.vue

<template>
  <div>
    <template v-if="data">
      <article
        class="message is-findata"
        v-if="data.length === 0"
      >
        <div class="message-body py-2 fs-16">Chưa có <b>ghi chú</b> nào được lưu</div>
      </article>
      <template v-else>
        <article
          class="media mt-0 mb-0"
          v-for="(v, i) in data"
        >
          <figure class="media-left">
            <Avatarbox
              v-bind="{
                text: v.user__fullname[0].toUpperCase(),
                size: 'two',
                type: 'primary',
              }"
            />
          </figure>
          <div class="media-content">
            <div>
              <p class="fs-15">
                {{ v.detail }}
              </p>
              <p class="mt-1 fs-14 has-text-grey">
                <span class="icon-text">
                  <span>{{ v.user__fullname }}</span>
                  <span class="ml-3">{{ $dayjs(v["create_time"]).fromNow(true) }}</span>
                  <template v-if="login.id === v.user">
                    <a
                      class="ml-3"
                      @click="edit(v)"
                    >
                      <SvgIcon v-bind="{ name: 'pen1.svg', type: 'gray', size: 20 }"></SvgIcon>
                    </a>
                    <a
                      class="ml-3"
                      @click="askConfirm(v, i)"
                    >
                      <SvgIcon v-bind="{ name: 'bin.svg', type: 'gray', size: 20 }"></SvgIcon>
                    </a>
                  </template>
                </span>
              </p>
            </div>
          </div>
        </article>
      </template>
    </template>
    <div
      v-if="$getEditRights()"
      class="field is-grouped mt-3"
    >
      <div class="control is-expanded">
        <textarea
          class="textarea"
          rows="2"
          placeholder="Viết ghi chú tại đây"
          v-model="detail"
        ></textarea>
      </div>
      <div class="control">
        <button
          class="button is-primary has-text-white"
          @click="save()"
        >
          Lưu
        </button>
      </div>
    </div>
    <Modal
      @close="showmodal = undefined"
      v-bind="showmodal"
      v-if="showmodal"
      @confirm="confirm()"
    ></Modal>
  </div>
</template>
<script>
export default {
  props: ["row", "api", "pagename"],
  data() {
    return {
      data: undefined,
      detail: undefined,
      vbind2: { image: undefined, text: "ABC", size: "two", type: "findata" },
      current: undefined,
      showmodal: undefined,
      obj: undefined,
    };
  },
  async created() {
    if (!this.row) return;
    this.data = await this.$getdata(this.api, { ref: this.row.id });
  },
  computed: {
    login: {
      get: function () {
        return this.$store.login;
      },
      set: function (val) {
        this.$store.commit("updateLogin", { login: val });
      },
    },
  },
  methods: {
    async save() {
      if (this.$empty(this.detail)) return this.$snackbar("Chưa nhập nội dung ghi chú");
      let data = {
        user: this.$store.login.id,
        detail: this.detail,
        ref: this.row.id,
      };
      if (this.current) {
        data = this.$copy(this.current);
        data.detail = this.detail;
      }
      let rs = data.id ? await this.$updateapi(this.api, data) : await this.$insertapi(this.api, data);
      if (!rs) return;
      this.detail = undefined;
      if (this.current) {
        this.current = undefined;
        let idx = this.$findIndex(this.data, { id: rs.id });
        this.$set(this.data, idx, rs);
      } else {
        this.data.push(rs);
        let rows = this.$copy(this.$store[this.pagename].data);
        let idx = this.$findIndex(rows, { id: this.row.id });
        let copy = this.$copy(this.row);
        copy.count_note += 1;
        rows[idx] = copy;
        this.$store.commit("updateState", {
          name: this.pagename,
          key: "update",
          data: { data: rows },
        });
      }
    },
    edit(v) {
      this.current = this.$copy(v);
      this.detail = v.detail;
    },
    askConfirm(v, i) {
      this.obj = { v: v, i: i };
      this.showmodal = {
        component: `dialog/Confirm`,
        vbind: { content: "Bạn có muốn xóa ghi chú này không?", duration: 10 },
        title: "Xóa ghi chú",
        width: "500px",
        height: "100px",
      };
    },
    async confirm() {
      let v = this.obj.v;
      let i = this.obj.i;
      let rs = await this.$deleteapi(this.api, v.id);
      if (rs === "error") return;
      this.$delete(this.data, i);
      let rows = this.$copy(this.$store[this.pagename].data);
      let idx = this.$findIndex(rows, { id: this.row.id });
      let copy = this.$copy(this.row);
      copy.count_note -= 1;
      rows[idx] = copy;
      this.$store.commit("updateState", {
        name: this.pagename,
        key: "update",
        data: { data: rows },
      });
    },
  },
};
</script>