raven-client/ayanova/src/components/attachment-control.vue

<template>
  <div class="mt-6" v-resize="onResize">
    <span class="v-label v-label--active theme--light">
      {{ $ay.t("Attachments") }}
    </span>

    <v-tabs v-model="tab" color="primary">
      <v-tabs-slider></v-tabs-slider>
      <v-tab key="list"><v-icon>fa-folder</v-icon></v-tab>
      <v-tab key="attach"><v-icon>fa-paperclip</v-icon></v-tab>
      <v-tabs-items v-model="tab">
        <v-tab-item key="list">
          <div class="mt-4" :style="cardTextStyle()">
            <v-list color="grey lighten-5" three-line>
              <v-list-item v-for="item in displayList" :key="item.id">
                <!-- @click="download(item.id)" -->
                <v-list-item-avatar>
                  <v-icon v-text="item.icon"></v-icon>
                </v-list-item-avatar>

                <v-list-item-content>
                  <v-list-item-title v-html="item.title"></v-list-item-title>

                  <v-list-item-subtitle
                    v-text="item.date"
                  ></v-list-item-subtitle>

                  <v-list-item-subtitle
                    v-text="item.notes"
                  ></v-list-item-subtitle>
                </v-list-item-content>

                <v-list-item-action>
                  <v-btn icon>
                    <v-icon>fa-edit</v-icon>
                  </v-btn>
                  <v-btn @click="remove(item)" icon>
                    <v-icon>fa-trash</v-icon>
                  </v-btn>
                </v-list-item-action>
              </v-list-item>
            </v-list>
          </div>
        </v-tab-item>
        <v-tab-item key="attach">
          <div class="mt-8">
            <v-file-input
              v-model="uploadFiles"
              :label="$ay.t('AttachFile')"
              prepend-icon="fa-paperclip"
              multiple
              chips
            ></v-file-input>
            <v-text-field
              v-model="notes"
              :label="$ay.t('AttachmentNotes')"
            ></v-text-field>
            <v-btn color="primary" text @click="upload">{{
              $ay.t("Upload")
            }}</v-btn>
          </div>
        </v-tab-item>
      </v-tabs-items>
    </v-tabs>
    <v-menu
      min-width="360"
      v-model="editMenu"
      :close-on-content-click="false"
      offset-y
      :position-x="menuX"
      :position-y="menuY"
      absolute
    >
      <v-card>
        <v-card-title>{{ $ay.t("FileAttachment") }}</v-card-title>
        <div class="ma-6">
          <v-text-field
            v-model="editName"
            :label="$ay.t('AttachmentFileName')"
          ></v-text-field>
          <v-text-field
            v-model="editNotes"
            :label="$ay.t('AttachmentNotes')"
          ></v-text-field>
        </div>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn text @click="editMenu = false">{{ $ay.t("Cancel") }}</v-btn>
          <v-btn color="primary" text @click="editClick()">{{
            $ay.t("OK")
          }}</v-btn>
        </v-card-actions>
      </v-card>
    </v-menu>
  </div>
</template>
<script>
export default {
  created() {
    this.getList();
  },
  data() {
    return {
      height: 300,
      attachedFiles: [],
      displayList: [],
      notes: null,
      tab: null,
      uploadFiles: [],
      editMenu: false,
      editNotes: null,
      editName: null,
      editId: null
    };
  },
  props: {
    ayaType: Number,
    ayaId: Number,
    readonly: Boolean
  },
  computed: {},
  methods: {
    onResize() {
      this.height = window.innerHeight * 0.8;
    },
    cardTextStyle() {
      return "height: " + this.height + "px;overflow-y:auto;";
    },
    upload() {
      let vm = this;
      let at = {
        ayaId: vm.ayaId,
        ayaType: vm.ayaType,
        files: vm.uploadFiles,
        notes: vm.notes ? vm.notes : ""
      };

      window.$gz.api
        .uploadAttachment(at)
        .then(res => {
          if (res.error) {
            window.$gz.errorHandler.handleFormError(res.error);
          } else {
            vm.uploadFiles = [];
            vm.attachedFiles = res.data;
            vm.updateDisplayList();
          }
        })
        .catch(function handleUploadError(error) {
          window.$gz.errorHandler.handleFormError(error);
        });
    },
    remove(item) {
      let vm = this;
      window.$gz.dialog.confirmDelete().then(dialogResult => {
        if (dialogResult == true) {
          window.$gz.api
            .remove("Attachment/" + item.id)
            .then(res => {
              if (res.error) {
                window.$gz.errorHandler.handleFormError(res.error);
              } else {
                vm.getList();
              }
            })
            .catch(function handleUploadError(error) {
              window.$gz.errorHandler.handleFormError(error);
            });
        }
      });
    },
    getList() {
      let vm = this;
      window.$gz.api
        .get("Attachment/list?ayatype=" + vm.ayaType + "&ayaid=" + vm.ayaId)
        .then(res => {
          if (res.error) {
            window.$gz.errorHandler.handleFormError(res.error);
          } else {
            vm.attachedFiles = res.data;
            vm.updateDisplayList();
          }
        })
        .catch(function handleGetListError(error) {
          window.$gz.errorHandler.handleFormError(error);
        });
    },
    updateDisplayList() {
      //{"data":[{"id":1,"concurrencyToken":7733332,"contentType":"image/png","displayFileName":"Screen Shot 2020-01-09 at 10.50.24.png","lastModified":"0001-01-01T00:00:00Z","notes":"Here are notes"},{"id":4,"concurrencyToken":7733354,"contentType":"text/plain","displayFileName":"TNT log file ayanova.txt","lastModified":"0001-01-01T00:00:00Z","notes":"Here are notes"},{"id":2,"concurrencyToken":7733342,"contentType":"text/plain","displayFileName":"stack.txt","lastModified":"0001-01-01T00:00:00Z","notes":"Here are notes"},{"id":3,"concurrencyToken":7733348,"contentType":"image/jpeg","displayFileName":"t2cx6sloffk41.jpg","lastModified":"0001-01-01T00:00:00Z","notes":"Here are notes"}]}
      if (!this.attachedFiles) {
        this.attachedFiles = [];
      }

      let timeZoneName = window.$gz.locale.getBrowserTimeZoneName();
      let languageName = window.$gz.locale.getBrowserLanguages();
      let hour12 = window.$gz.store.state.locale.hour12;
      let ret = [];
      for (let i = 0; i < this.attachedFiles.length; i++) {
        let o = this.attachedFiles[i];
        //http://localhost:7575/api/v8/Attachment/download/100?t=sssss
        ret.push({
          id: o.id,
          title:
            "<a href='" +
            window.$gz.api.downloadUrl(o.id) +
            "' target='_blank'>" +
            o.displayFileName +
            "</a>",
          name: o.displayFileName,
          date: window.$gz.locale.utcDateToShortDateAndTimeLocalized(
            o.lastModified,
            timeZoneName,
            languageName,
            hour12
          ),
          notes: o.notes ? o.notes : "",
          icon: window.$gz.util.iconForFile(o.displayFileName, o.contentType)
        });
      }
      this.displayList = ret;
    }
  }
};
</script>