import Ember from 'ember'; export default Ember.Component.extend({ comments: [], page: null, pageSize: null, totalPages: null, count: null, loading: false, isEdit: false, propModal: false, comment: {}, selectedComment: {}, currentTab: '', similarComments: [], promotionFlow: false, multiFields: false, similarFlow: false, promoteLoading: false, promoteDisabled: false, similarColumns: { page: 1, data: [], all: [], count: 0, pageSize: 10, totalPages: 1 }, selectedSimilarColumns: [], getSimilarColumns: function () { var _this = this; this.set('similarColumns.loading', true) var datasetId = this.get('datasetId') var columnId = this.get('schema.id') var url = "/api/v1/datasets/" + datasetId url += ("/columns/" + columnId + "/similar") $.get (url , function (data) { var columns = data.similar; columns.forEach(function (col) { col.html = marked(col.comment || "").htmlSafe() col.selected = false }) var page = _this.get('similarColumns.page'); if (!page) { page = 1; } var pageSize = _this.get('similarColumns.pageSize'); if (!pageSize) { pageSize = 10; } var similarColumns = { page: page, all: columns, count: columns.length, pageSize: pageSize, totalPages: Math.ceil(columns.length / pageSize), data: columns.slice(0, pageSize), loading: false } _this.set('similarColumns', similarColumns) } ) }, getSimilarComments: function () { var _this = this var datasetId = this.get('datasetId') var columnId = this.get('schema.id') var url = "/api/v1/datasets/" + datasetId url += ("/columns/" + columnId + "/comments/similar") $.get (url , function (data) { var comments = data.similar; comments.forEach(function (cmnt) { cmnt.html = marked(cmnt.comment || "").htmlSafe() }) _this.set('similarComments', comments) } ) }, getComments: function (page, size) { this.set('loading', true) size = size || 3 page = page || 1 var datasetId = this.get('datasetId') var columnId = this.get('schema.id') var _this = this var url = '/api/v1/datasets/' + datasetId + '/columns/' + columnId + '/comments' url += '?page=' + page + '&size=' + size $.get (url , function (data) { var comments = data.data.comments comments.forEach(function (cmnt) { cmnt.html = marked(cmnt.text).htmlSafe(); }) _this.set('comments', comments) _this.set('page', data.data.page) _this.set('pageSize', data.data.itemsPerPage) _this.set('totalPages', data.data.totalPages) _this.set('count', data.data.count) _this.set('loading', false) } ).fail(function () { _this.set('comments', []) _this.set('loading', false) }) }, defaultCommentText: function () { return "#We Support Markdown ([GitHub Flavored][gh])! \n##Secondary Header \n* bullet \n* bullet\n\n\n| Col 1 | Col 2 | Col 3|\n|:--|:--:|--:|\n|Left|Center|Right|\n```sql\nSELECT * FROM ABOOK_DATA WHERE modified_date > 1436830358700;\n```\n[ABOOK_DATA](/#/dataset/1/ABOOK_DATA) All links will open in a new tab\n\n[gh]: https://help.github.com/articles/github-flavored-markdown/" }, setDefaultCommentText: function () { this.set('comment', {}) this.set('comment.text', this.defaultCommentText()) $("#datasetSchemaComment-write > textarea").focus() }, getSelected: function () { var isMultifield = this.get('multiFields') var isSimilar = this.get('similarFlow') if (isMultifield) { var similarColumns = this.get('similarColumns') || {} similarColumns.all = this.get('similarColumns.all') || [] return similarColumns.all.filter(function (row) { if (row.selected) return row }) } else if (isSimilar) { var selectedIndex = $("input[name='selectedComment']:checked").val() var comments = this.get('similarComments') return comments[selectedIndex] } else { return this.get('selectedComment') } }, actions: { insertImageOrLink: function (param) { var target = $('#datasetschemacomment'); insertImageAtCursor(target, param); updatePreview(); }, insertSourcecode: function () { var target = $('#datasetschemacomment'); insertSourcecodeAtCursor(target); updatePreview(); }, insertList: function (param) { var target = $('#datasetschemacomment'); var value = "Apple\nBananna\nOrange"; insertListAtCursor(target, value, param); updatePreview(); }, insertElement: function (param) { var target = $('#datasetschemacomment'); var value; switch (param) { case 'bold': value = "**" + param + " text**"; break; case 'italic': value = "*" + param + " text*"; break; case 'heading_1': value = "#" + param + " text#"; break; case 'heading_2': value = "##" + param + " text##"; break; case 'heading_3': value = "###" + param + " text###"; break; } insertAtCursor(target, value, false); updatePreview(); }, importCSVTable: function () { var input = $('#tsv-input'); var output = $('#table-output'); var headerCheckbox = $('#has-headers'); var delimiterMarker = $('#delimiter-marker'); var getDelimiter = function () { var delim = delimiterMarker.val(); if (delim == 'tab') { delim = "\t"; } return delim; }; input.keydown(function (e) { if (e.key == 'tab') { e.stop(); insertAtCursor(e.target, "\t"); } }); var renderTable = function () { var value = input.val().trim(); var hasHeader = headerCheckbox.is(":checked"); var t = csvToMarkdown(value, getDelimiter(), hasHeader); output.val(csvToMarkdown(value, getDelimiter(), hasHeader)); }; input.keyup(renderTable); headerCheckbox.change(renderTable); delimiterMarker.change(renderTable); $('#submitConvertForm').click(function () { $("#convertTableModal").modal('hide') var target = $('#datasetschemacomment'); insertAtCursor(target, output.val(), true); updatePreview(); }); renderTable(); $("#convertTableModal").modal('show'); }, create: function () { var _this = this; var token = $("#csrfToken").val().replace('/', '') var cmnt = this.get('comment') var dsid = this.get('datasetId') var cid = this.get('schema.id') var url = '/api/v1/datasets/' + dsid + '/columns/' + cid + '/comments' cmnt.csrfToken = token; if (this.get('isEdit')) { cmnt.id = this.get('commentId'); } $.ajax ({ url: url , method: 'POST' , headers: { 'Csrf-Token': token } , dataType: 'json' , data: cmnt } ).done(function (data, txt, xhr) { if (data.status == 'success') { _this.set('commentError', false); _this.set('errorMsg', ""); _this.getComments() _this.setDefaultCommentText() } else if (data.status == 'failed') { _this.set('commentError', true); _this.set('errorMsg', data.msg); } }).fail(function (xhr, txt, err) { console.log('Error: Could not update comment') }) }, editMode: function (comment) { this.set('isEdit', true); this.set('commentId', comment.id); this.set('comment.text', comment.text) }, remove: function (comment) { var _this = this var token = $("#csrfToken").val().replace('/', '') var dsid = this.get('datasetId') var cid = this.get('schema.id') var url = '/api/v1/datasets/' + dsid + '/columns/' + cid url += '/comments/' + comment.id var cmnt = {} cmnt.csrfToken = token $.ajax ({ url: url , method: 'DELETE' , headers: { 'Csrf-Token': token } , dataType: 'json' , data: cmnt } ).done(function (data, txt, xhr) { _this.getComments() _this.setDefaultCommentText() _this.set('isEdit', false) }).fail(function (xhr, txt, err) { console.log('Error: Could not update comment') }) }, cancel: function () { this.set('isEdit', false) this.setDefaultCommentText() }, updatePreview: function () { var text = $("#datasetSchemaComment-write > textarea").val() $("#datasetSchemaComment-preview").html(marked(text)) }, openModal: function (comment) { var _this = this this.set('propModal', true) setTimeout(function () { $("#datasetSchemaColumnCommentModal") .modal('show') .on('shown.bs.modal', function () { $("#datasetSchemaComment-write > textarea").focus() }) .on('hidden.bs.modal', function () { _this.set('propModal', false) if (_this.parentView && _this.parentView.controller) { _this.parentView.controller.send('getSchema') } $("#datasetSchemaColumnCommentModal").modal('hide'); }) }, 300) if (!comment) { this.setDefaultCommentText() } else { this.set('isEdit', true) this.set('comment', comment) } this.getComments() this.getSimilarComments() }, closeModal: function () { $("#datasetSchemaColumnCommentModal").modal('hide'); }, setDefault: function (comment) { var _this = this; this.set("selectedComment", comment); this.set("promotionFlow", true); this.set('selectedComment.is_default', true); this.set("currentTab", ''); var comments = this.get("comments"); comments.forEach(function (elem, idx, arr) { if (elem.id !== comment.id && elem.isDefault) { Ember.set(elem, "isDefault", false); } if (elem.id === comment.id) { Ember.set(elem, "isDefault", true); } }) this.set('comments', comments); }, promote: function () { if (this.get("promoteDisabled")) { return; } var _this = this; var selected = this.getSelected(); var selectedComment = this.get("selectedComment"); var datasetId = this.get("datasetId"); var fieldId = this.get("fieldId") var similarFlow = this.get('similarFlow') if (Array.isArray(selected)) { for (var i = 0; i < selected.length; i++) { selected[i].commentId = selectedComment.id } } else if (similarFlow) { // Selected comment already set } else { selected.commentId = selectedComment.id } this.set("promoteDisabled", true) this.set("promoteLoading, true") var params = { dataset_id: datasetId , field_id: fieldId } var token = $("#csrfToken").val().replace("/", "") var uri = '/api/v1/datasets/' uri += params.dataset_id + '/columns/' uri += params.field_id + '/comments' uri += '?csrfToken=' + token $.ajax({ type: "PATCH", headers: { 'Csrf-Token': token }, url: uri, data: JSON.stringify(selected), dataType: 'json', contentType: 'application/json' }).done(function (res, txt, xhr) { _this.set("promoteDisabled", false); _this.set("promoteLoading", false); _this.set("multiFields", false); _this.set("selectedComment", false); _this.set("similarColumns", {}); _this.getComments(); }).fail(function (xhr, txt, err) { console.error('Error: ', err); _this.set('promoteDisabled', false); _this.set('promoteLoading', false); }) }, setMultifields: function () { this.set("multiFields", true) this.getSimilarColumns() }, setTab: function (name) { this.set('currentTab', name) if (name !== "similar") { $("input[name='selectedComment']:checked").each(function () { $(this).prop('checked', false) }) } if (name === 'similar') { this.set('similarFlow', true); } else { this.set('similarFlow', false); } }, similarColumnsNextPage: function () { var currentPage = this.get('similarColumns.page'); if (currentPage++ <= this.get("similarColumns.totalPages")) { this.set('similarColumns.page', currentPage++); var currentPage = this.get("similarColumns.page"); var start = (currentPage - 1) * this.get("similarColumns.pageSize") var end = start + this.get("similarColumns.pageSize") this.set('similarColumns.data', this.get('similarColumns.all').slice(start, end)) } }, similarColumnsPrevPage: function () { var currentPage = this.get('similarColumns.page'); if (currentPage-- > 0) { this.set('similarColumns.page', currentPage--); var currentPage = this.get("similarColumns.page"); var start = (currentPage - 1) * this.get("similarColumns.pageSize") var end = start + this.get("similarColumns.pageSize") this.set('similarColumns.data', this.get('similarColumns.all').slice(start, end)) } }, selectSimilarColumn: function (similar, idx) { Ember.set(similar, "selected", !Ember.get(similar, "selected")) var page = this.get('similarColumns.page'); var pageSize = this.get('similarColumns.pageSize'); var index = ((page - 1) * pageSize) + idx var all = this.get('similarColumns.all'); Ember.set(all[index], "selected", Ember.get(similar, "selected")); this.set('selectedSimilarColumns', this.getSelected()) this.set('similarColumns.all', all) }, selectAllSimilarColumn: function (selected) { var columns = this.get('similarColumns.all'); var model = this.get('similarColumns'); Ember.set(model, "selectedAll", selected); for (var i = 0; i < columns.length; i++) { Ember.set(columns[i], "selected", selected); } if (selected) { this.set('selectedSimilarColumns', columns); } else { this.set('selectedSimilarColumns', []); } } } });