diff --git a/app/javascript/vue/label_template/renderers/default.vue b/app/javascript/vue/label_template/renderers/default.vue new file mode 100644 index 000000000..0081fe32a --- /dev/null +++ b/app/javascript/vue/label_template/renderers/default.vue @@ -0,0 +1,14 @@ + + diff --git a/app/javascript/vue/label_template/renderers/format.vue b/app/javascript/vue/label_template/renderers/format.vue new file mode 100644 index 000000000..de61fb305 --- /dev/null +++ b/app/javascript/vue/label_template/renderers/format.vue @@ -0,0 +1,17 @@ + + + diff --git a/app/javascript/vue/label_template/renderers/name.vue b/app/javascript/vue/label_template/renderers/name.vue new file mode 100644 index 000000000..ac969e84f --- /dev/null +++ b/app/javascript/vue/label_template/renderers/name.vue @@ -0,0 +1,16 @@ + + + diff --git a/app/javascript/vue/label_template/table.vue b/app/javascript/vue/label_template/table.vue index e39071a45..778b77c46 100644 --- a/app/javascript/vue/label_template/table.vue +++ b/app/javascript/vue/label_template/table.vue @@ -30,28 +30,34 @@ import axios from '../../packs/custom_axios.js'; import DataTable from '../shared/datatable/table.vue'; import DeleteModal from '../shared/confirmation_modal.vue'; +import NameRenderer from './renderers/name.vue'; +import DefaultRenderer from './renderers/default.vue'; +import FormatRenderer from './renderers/format.vue'; export default { name: 'LabelTemplatesTable', components: { DataTable, DeleteModal, + NameRenderer, + DefaultRenderer, + FormatRenderer }, props: { dataSource: { type: String, - required: true, + required: true }, actionsUrl: { type: String, - required: true, + required: true }, createUrl: { - type: String, + type: String }, syncFluicsUrl: { - type: String, - }, + type: String + } }, data() { return { @@ -60,40 +66,40 @@ export default { { field: 'default', headerName: this.i18n.t('label_templates.index.default_label'), - cellRenderer: this.defaultRenderer, - sortable: true, + cellRenderer: 'DefaultRenderer', + sortable: true }, { field: 'name', headerName: this.i18n.t('label_templates.index.thead_name'), - cellRenderer: this.labelNameRenderer, - sortable: true, + cellRenderer: 'NameRenderer', + sortable: true }, { field: 'format', headerName: this.i18n.t('label_templates.index.format'), sortable: true, - cellRenderer: ({ data: { format, icon_url: iconUrl } }) => `${iconUrl} ${format}` + cellRenderer: 'FormatRenderer' }, { field: 'description', headerName: this.i18n.t('label_templates.index.description'), - sortable: true, + sortable: true }, { field: 'modified_by', headerName: this.i18n.t('label_templates.index.updated_by'), - sortable: true, + sortable: true }, { field: 'updated_at', headerName: this.i18n.t('label_templates.index.updated_at'), - sortable: true, + sortable: true }, { field: 'created_by', headerName: this.i18n.t('label_templates.index.created_by'), - sortable: true, + sortable: true }, { field: 'created_at', headerName: this.i18n.t('label_templates.index.created_at'), - sortable: true, - }, - ], + sortable: true + } + ] }; }, computed: { @@ -106,7 +112,7 @@ export default { label: this.i18n.t('label_templates.index.toolbar.new'), type: 'emit', path: this.createUrl, - buttonStyle: 'btn btn-primary', + buttonStyle: 'btn btn-primary' }); } if (this.syncFluicsUrl) { @@ -121,21 +127,11 @@ export default { } return { left, - right: [], + right: [] }; - }, + } }, methods: { - labelNameRenderer(params) { - const editUrl = params.data.urls.show; - return ` - ${params.data.name} - `; - }, - defaultRenderer(params) { - const defaultSelected = params.data.default; - return defaultSelected ? '' : ''; - }, setDefault(action) { axios.post(action.path).then((response) => { this.reloadingTable = true; @@ -175,8 +171,8 @@ export default { HelperModule.flashAlertMsg(error.response.data.error, 'danger'); }); } - }, - }, + } + } }; diff --git a/app/javascript/vue/my_modules/list.vue b/app/javascript/vue/my_modules/list.vue index 8d6ff6acd..4904aee57 100644 --- a/app/javascript/vue/my_modules/list.vue +++ b/app/javascript/vue/my_modules/list.vue @@ -16,6 +16,7 @@ :hiddenDataMessage="i18n.t('experiments.empty_state.no_active_modules_archived_branch')" scrollMode="infinite" @tableReloaded="reloadingTable = false" + @reloadTable="reloadingTable = true" @create="newModalOpen = true" @edit="edit" @move="move" @@ -56,6 +57,9 @@ import axios from '../../packs/custom_axios.js'; import DataTable from '../shared/datatable/table.vue'; import ConfirmationModal from '../shared/confirmation_modal.vue'; +import NameRenderer from './renderers/name.vue'; +import ResultsRenderer from './renderers/results.vue'; +import StatusRenderer from './renderers/status.vue'; import DueDateRenderer from './renderers/due_date.vue'; import DesignatedUsers from './renderers/designated_users.vue'; import TagsModal from './modals/tags.vue'; @@ -77,7 +81,10 @@ export default { NewModal, EditModal, MoveModal, - AccessModal + AccessModal, + NameRenderer, + ResultsRenderer, + StatusRenderer }, props: { dataSource: { type: String, required: true }, @@ -115,7 +122,7 @@ export default { field: 'name', headerName: this.i18n.t('experiments.table.column.task_name_html'), sortable: true, - cellRenderer: this.nameRenderer + cellRenderer: NameRenderer }, { field: 'code', @@ -133,7 +140,7 @@ export default { field: 'results', headerName: this.i18n.t('experiments.table.column.results_html'), sortable: true, - cellRenderer: this.resultsRenderer + cellRenderer: ResultsRenderer }, { field: 'age', @@ -144,7 +151,7 @@ export default { field: 'status', headerName: this.i18n.t('experiments.table.column.status_html'), sortable: true, - cellRenderer: this.statusRenderer, + cellRenderer: StatusRenderer, minWidth: 120 } ]; @@ -321,53 +328,6 @@ export default { roles_path: this.userRolesUrl }; }, - checkProvisioning(params) { - if (params.data.provisioning_status === 'done') return; - - axios.get(params.data.urls.provisioning_status).then((response) => { - const provisioningStatus = response.data.provisioning_status; - if (provisioningStatus === 'done') { - this.reloadingTable = true; - } else { - setTimeout(() => { - this.checkProvisioning(params); - }, 5000); - } - }); - }, - // Renderers - nameRenderer(params) { - const { name, urls } = params.data; - const provisioningStatus = params.data.provisioning_status; - if (provisioningStatus === 'in_progress') { - setTimeout(() => { - this.checkProvisioning(params); - }, 5000); - return ` - -
- ${name} -
`; - } - - return `${name}`; - }, - statusRenderer(params) { - const { status } = params.data; - - return ` - ${status.name} - `; - }, - resultsRenderer(params) { - const { results, urls } = params.data; - - return `${results}`; - }, usersFilterRenderer(option) { return `
diff --git a/app/javascript/vue/my_modules/renderers/name.vue b/app/javascript/vue/my_modules/renderers/name.vue new file mode 100644 index 000000000..0dd3c9125 --- /dev/null +++ b/app/javascript/vue/my_modules/renderers/name.vue @@ -0,0 +1,49 @@ + + + diff --git a/app/javascript/vue/my_modules/renderers/results.vue b/app/javascript/vue/my_modules/renderers/results.vue new file mode 100644 index 000000000..bcb21bad5 --- /dev/null +++ b/app/javascript/vue/my_modules/renderers/results.vue @@ -0,0 +1,14 @@ + + + diff --git a/app/javascript/vue/my_modules/renderers/status.vue b/app/javascript/vue/my_modules/renderers/status.vue new file mode 100644 index 000000000..33753fc8c --- /dev/null +++ b/app/javascript/vue/my_modules/renderers/status.vue @@ -0,0 +1,20 @@ + + + diff --git a/app/javascript/vue/projects/list.vue b/app/javascript/vue/projects/list.vue index fb263d886..facdf3e25 100644 --- a/app/javascript/vue/projects/list.vue +++ b/app/javascript/vue/projects/list.vue @@ -68,6 +68,7 @@ import axios from '../../packs/custom_axios.js'; import DataTable from '../shared/datatable/table.vue'; import UsersRenderer from './renderers/users.vue'; +import NameRenderer from './renderers/name.vue'; import CommentsRenderer from '../shared/datatable/renderers/comments.vue'; import ProjectCard from './card.vue'; import ConfirmationModal from '../shared/confirmation_modal.vue'; @@ -84,6 +85,7 @@ export default { components: { DataTable, UsersRenderer, + NameRenderer, ProjectCard, ConfirmationModal, EditProjectModal, @@ -129,7 +131,7 @@ export default { flex: 1, headerName: this.i18n.t('projects.index.card.name'), sortable: true, - cellRenderer: this.nameRenderer + cellRenderer: 'NameRenderer' }, { field: 'code', @@ -252,16 +254,6 @@ export default { ${option[1]}
`; }, - nameRenderer(params) { - const showUrl = params.data.urls.show; - return ` - ${params.data.folder ? '' : ''} - ${params.data.name} - `; - }, openComments(_params, rows) { $(this.$refs.commentButton).data('objectId', rows[0].id); this.$refs.commentButton.click(); diff --git a/app/javascript/vue/projects/renderers/name.vue b/app/javascript/vue/projects/renderers/name.vue new file mode 100644 index 000000000..52b7548b5 --- /dev/null +++ b/app/javascript/vue/projects/renderers/name.vue @@ -0,0 +1,21 @@ + + diff --git a/app/javascript/vue/projects/renderers/users.vue b/app/javascript/vue/projects/renderers/users.vue index 451693696..b07a5ce8f 100644 --- a/app/javascript/vue/projects/renderers/users.vue +++ b/app/javascript/vue/projects/renderers/users.vue @@ -19,8 +19,8 @@ export default { name: 'UsersRenderer', props: { params: { - required: true, - }, + required: true + } }, computed: { users() { diff --git a/app/javascript/vue/protocols/renderers/name.vue b/app/javascript/vue/protocols/renderers/name.vue new file mode 100644 index 000000000..0af6736df --- /dev/null +++ b/app/javascript/vue/protocols/renderers/name.vue @@ -0,0 +1,21 @@ + + + diff --git a/app/javascript/vue/protocols/table.vue b/app/javascript/vue/protocols/table.vue index 062f2df7c..715d408d2 100644 --- a/app/javascript/vue/protocols/table.vue +++ b/app/javascript/vue/protocols/table.vue @@ -42,6 +42,7 @@ import axios from '../../packs/custom_axios.js'; import DataTable from '../shared/datatable/table.vue'; import UsersRenderer from '../projects/renderers/users.vue'; +import NameRenderer from './renderers/name.vue'; import NewProtocolModal from './modals/new.vue'; import AccessModal from '../shared/access_modal/modal.vue'; import KeywordsRenderer from './renderers/keywords.vue'; @@ -55,6 +56,7 @@ export default { components: { DataTable, UsersRenderer, + NameRenderer, NewProtocolModal, AccessModal, KeywordsRenderer, @@ -116,7 +118,7 @@ export default { headerName: this.i18n.t('protocols.index.thead.name'), sortable: true, notSelectable: true, - cellRenderer: this.nameRenderer + cellRenderer: 'NameRenderer' }, { field: 'code', @@ -337,14 +339,6 @@ export default { linkedMyModules(_event, rows) { [this.linkedMyModulesModalObject] = rows; }, - // renderers - nameRenderer(params) { - const { urls, name } = params.data; - if (urls.show) { - return `${name}`; - } - return `${name}`; - }, usersFilterRenderer(option) { return `
diff --git a/app/javascript/vue/reports/renderers/name.vue b/app/javascript/vue/reports/renderers/name.vue new file mode 100644 index 000000000..d2e9f7924 --- /dev/null +++ b/app/javascript/vue/reports/renderers/name.vue @@ -0,0 +1,16 @@ + + + diff --git a/app/javascript/vue/reports/table.vue b/app/javascript/vue/reports/table.vue index f68a7b293..9261c5f31 100644 --- a/app/javascript/vue/reports/table.vue +++ b/app/javascript/vue/reports/table.vue @@ -43,6 +43,7 @@ import axios from '../../packs/custom_axios.js'; import DataTable from '../shared/datatable/table.vue'; import DocxRenderer from './renderers/docx.vue'; import PdfRenderer from './renderers/pdf.vue'; +import NameRenderer from './renderers/name.vue'; import ConfirmationModal from '../shared/confirmation_modal.vue'; import SaveToInventoryModal from './modals/save_to_inventory.vue'; import UpdateReportModal from './modals/update.vue'; @@ -60,6 +61,7 @@ export default { DataTable, DocxRenderer, PdfRenderer, + NameRenderer, ConfirmationModal, SaveToInventoryModal, UpdateReportModal @@ -108,7 +110,7 @@ export default { field: 'name', headerName: this.i18n.t('projects.reports.index.thead_name'), sortable: true, - cellRenderer: ({ data: { name } }) => `${name}` + cellRenderer: 'NameRenderer' }, { field: 'code', headerName: this.i18n.t('projects.reports.index.thead_id'), diff --git a/app/javascript/vue/repositories/renderers/name.vue b/app/javascript/vue/repositories/renderers/name.vue new file mode 100644 index 000000000..e17aa60cb --- /dev/null +++ b/app/javascript/vue/repositories/renderers/name.vue @@ -0,0 +1,22 @@ + + + diff --git a/app/javascript/vue/repositories/table.vue b/app/javascript/vue/repositories/table.vue index ade32b122..84acab992 100644 --- a/app/javascript/vue/repositories/table.vue +++ b/app/javascript/vue/repositories/table.vue @@ -68,6 +68,7 @@ import EditRepositoryModal from './modals/edit.vue'; import DuplicateRepositoryModal from './modals/duplicate.vue'; import ShareRepositoryModal from './modals/share.vue'; import DataTable from '../shared/datatable/table.vue'; +import NameRenderer from './renderers/name.vue'; export default { name: 'RepositoriesTable', @@ -78,7 +79,8 @@ export default { NewRepositoryModal, EditRepositoryModal, DuplicateRepositoryModal, - ShareRepositoryModal + ShareRepositoryModal, + NameRenderer }, props: { dataSource: { @@ -138,7 +140,7 @@ export default { headerName: this.i18n.t('libraries.index.table.name'), sortable: true, notSelectable: true, - cellRenderer: this.nameRenderer + cellRenderer: 'NameRenderer' }, { field: 'code', @@ -277,23 +279,6 @@ export default { share(_event, rows) { const [repository] = rows; this.shareRepository = repository; - }, - // Renderers - nameRenderer(params) { - const { - name, - urls, - shared, - ishared - } = params.data; - let sharedIcon = ''; - if (shared || ishared) { - sharedIcon = ''; - } - return ` - ${sharedIcon}${name} - `; } } };