changes

components/common/NoteInfo.vue

@@ -0,0 +1,121 @@
+<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" v-for="(v,i) in data">
+  <figure class="media-left">
+      <Avatarbox v-bind="{text: v.user__fullname.substring(0,1).toUpperCase(), size: 'two', type: 'findata'}" />
+  </figure>
+  <div class="media-content">
+    <div>
+      <p class="fs-15">
+        {{ v.detail }}
+      </p>
+      <p class="mt-1 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: 22}"></SvgIcon>
+          </a>
+          <a class="ml-3" @click="askConfirm(v, i)">
+            <SvgIcon v-bind="{name: 'bin.svg', type: 'gray', size: 22}"></SvgIcon>
+          </a>
+        </template>
+    </span>
+      </p>
+    </div>
+  </div>
+</article>
+</template>
+</template>
+     <div class="field is-grouped mt-3">
+      <div class="control is-expanded">
+        <textarea class="textarea" rows="1" 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.state.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.state.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.state[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.state[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>