const template = html`
  <span>
    <h4>
      Prebooks Queue:
      <span class="badge badge-info ng-binding">{{data.length}}</span>
      <jsontable :header="header" :data="data"></jsontable>
    </h4>
  </span>
`;
import jsontable from "../../generic/jsontable.js";

export default {
  data: function() {
    return {
      data: [],
      header: ["", "ID", "Title", "Client", "contract", "booked in"]
    };
  },
  components: {
    jsontable
  },
  mounted() {
    this.load();
  },
  methods: {
    async load() {
      const raw = await fetch(
        "/api/v1/task?client=true&type=repair&summary=1&limit=100&original_creator=true"
      );
      const json = await raw.json();
      this.data = json.data.map(el => {
        ;

        return [
          "",
          el.id,
          el.title,
          el.client.name,
          el.client.contract.name,
          moment(el.created_at).fromNow()
        ];
      });
    }
  },
  template
};
