PoC new inventory table

app/assets/javascripts/my_modules/repositories.js

@@ -210,6 +210,9 @@ var MyModuleRepositories = (function() {
   }
 
   function renderSimpleTable(tableContainer) {
+    console.log(tableContainer.attr('data-element'))
+    window.mountRepositoryTable(tableContainer.attr('data-element'));
+    return
     if (SIMPLE_TABLE) SIMPLE_TABLE.destroy();
     SIMPLE_TABLE = $(tableContainer).DataTable({
       dom: "Rt<'pagination-row'<'version-label'><'pagination-actions'p>>",
@@ -265,6 +268,15 @@ var MyModuleRepositories = (function() {
   }
 
   function renderFullViewTable(tableContainer, options = {}) {
+    renderFullViewRepositoryName(
+      tableContainer.attr('data-repository-name'),
+      tableContainer.attr('data-repository-snapshot-created'),
+      options.assign_mode
+    );
+    updateFullViewRowsCount(tableContainer.attr('data-assigned-items-count'));
+    window.mountRepositoryTable();
+    return
+
     if (FULL_VIEW_TABLE) FULL_VIEW_TABLE.destroy();
     SELECTED_ROWS = {};
     FULL_VIEW_TABLE_SCROLLBAR = false;
@@ -448,7 +460,7 @@ var MyModuleRepositories = (function() {
       repositoryTable.attr('data-version-label', $(this).data('footer-label'));
       repositoryTable.attr('data-name-column-id', $(this).data('name-column-id'));
       repositoryTable.attr('data-stock-management', $(this).data('data-stock-management'));
-      repositoryContainer.html(repositoryTable);
+      //repositoryContainer.html(repositoryTable);
       renderSimpleTable(repositoryTable);
     });
 
@@ -591,6 +603,7 @@ var MyModuleRepositories = (function() {
     });
 
     FULL_VIEW_MODAL.on('hidden.bs.modal', function() {
+      return
       FULL_VIEW_MODAL.find('.repository-versions-sidebar').empty();
       FULL_VIEW_MODAL.find('.modal-content').removeClass('show-sidebar');
       FULL_VIEW_MODAL.find('#showVersionsSidebar').removeClass('active');

app/controllers/my_module_repositories_controller.rb

@@ -11,34 +11,38 @@ class MyModuleRepositoriesController < ApplicationController
   before_action :check_assign_repository_records_permissions, only: %i(update create)
 
   def index_dt
-    @draw = params[:draw].to_i
-    per_page = params[:length].to_i < 1 ? Constants::REPOSITORY_DEFAULT_PAGE_SIZE : params[:length].to_i
-    page = (params[:start].to_i / per_page) + 1
-    datatable_service = RepositoryDatatableService.new(@repository, params, current_user, @my_module)
-
-    @datatable_params = {
-      view_mode: params[:view_mode],
-      my_module: @my_module,
-      include_stock_consumption: @repository.has_stock_management? && params[:assigned].present?,
-      disable_stock_management: true # stock management is always disabled in MyModule context
-    }
-
-    @all_rows_count = datatable_service.all_count
-    @columns_mappings = datatable_service.mappings
-
-    if params[:simple_view]
-      repository_rows = datatable_service.repository_rows
-      rows_view = 'repository_rows/simple_view_index'
-    else
-      repository_rows = datatable_service.repository_rows
-                                         .preload(:repository_columns,
-                                                  :created_by,
-                                                  repository_cells: { value: @repository.cell_preload_includes })
-      rows_view = 'repository_rows/index'
-    end
-    @repository_rows = repository_rows.page(page).per(per_page)
-
-    render rows_view
+    repository_rows = Lists::RepositoryRowsService.new(@repository, params, current_user, @my_module).call
+    render json: repository_rows, each_serializer: Lists::RepositoryRowSerializer, user: current_user, my_module: @my_module,
+            meta: pagination_dict(repository_rows)
+
+    # @draw = params[:draw].to_i
+    # per_page = params[:length].to_i < 1 ? Constants::REPOSITORY_DEFAULT_PAGE_SIZE : params[:length].to_i
+    # page = (params[:start].to_i / per_page) + 1
+    # datatable_service = RepositoryDatatableService.new(@repository, params, current_user, @my_module)
+
+    # @datatable_params = {
+    #   view_mode: params[:view_mode],
+    #   my_module: @my_module,
+    #   include_stock_consumption: @repository.has_stock_management? && params[:assigned].present?,
+    #   disable_stock_management: true # stock management is always disabled in MyModule context
+    # }
+
+    # @all_rows_count = datatable_service.all_count
+    # @columns_mappings = datatable_service.mappings
+
+    # if params[:simple_view]
+    #   repository_rows = datatable_service.repository_rows
+    #   rows_view = 'repository_rows/simple_view_index'
+    # else
+    #   repository_rows = datatable_service.repository_rows
+    #                                      .preload(:repository_columns,
+    #                                               :created_by,
+    #                                               repository_cells: { value: @repository.cell_preload_includes })
+    #   rows_view = 'repository_rows/index'
+    # end
+    # @repository_rows = repository_rows.page(page).per(per_page)
+
+    # render rows_view
   end
 
   def create

app/controllers/repository_columns_controller.rb

@@ -17,6 +17,11 @@ def index
     }
   end
 
+  def index_new
+    columns = @repository.repository_columns
+    render json: columns, each_serializer: RepositoryColumnSerializer
+  end
+
   def new
     @repository_column = RepositoryColumn.new
     render json: {

app/controllers/repository_rows_controller.rb

@@ -42,6 +42,12 @@ def index
     render json: { custom_error: I18n.t('repositories.show.repository_filter.errors.value_not_found') }
   end
 
+  def index_new
+    repository_rows = Lists::RepositoryRowsService.new(@repository, params, current_user).call
+    render json: repository_rows, each_serializer: Lists::RepositoryRowSerializer, user: current_user,
+           meta: pagination_dict(repository_rows)
+  end
+
   def show
     respond_to do |format|
       format.html do
@@ -339,7 +345,7 @@ def actions_toolbar
       actions:
         Toolbars::RepositoryRowsService.new(
           current_user,
-          repository_row_ids: params[:repository_row_ids].split(',')
+          repository_row_ids: JSON.parse(params[:items]).map { |i| i['id'] }
         ).actions
     }
   end

app/helpers/my_modules_helper.rb

@@ -64,12 +64,12 @@ def grouped_by_prj_exp(my_modules)
     end
   end
 
-  def assigned_repository_full_view_table_path(my_module, repository)
+  def assigned_repository_full_view_table_path(my_module, repository, assigned = nil)
     if repository.is_a?(RepositorySnapshot)
-      return full_view_table_my_module_repository_snapshot_path(my_module, repository)
+      return full_view_table_my_module_repository_snapshot_path(my_module, repository, assigned: assigned)
     end
 
-    full_view_table_my_module_repository_path(my_module, repository)
+    full_view_table_my_module_repository_path(my_module, repository, assigned: assigned)
   end
 
   def assigned_repository_simple_view_index_path(my_module, repository)

app/javascript/packs/vue/repository_table.js

@@ -0,0 +1,16 @@
+import { createApp } from 'vue/dist/vue.esm-bundler.js';
+import PerfectScrollbar from 'vue3-perfect-scrollbar';
+import RepositoryTable from '../../vue/repository/table.vue';
+import { mountWithTurbolinks } from './helpers/turbolinks.js';
+
+window.mountRepositoryTable = (el = '#repositoryTable') => {
+  const app = createApp();
+  app.component('RepositoryTable', RepositoryTable);
+  app.config.globalProperties.i18n = window.I18n;
+  app.use(PerfectScrollbar);
+  if (document.getElementById('repositoryTable') || el !== '#repositoryTable') {
+    mountWithTurbolinks(app, el);
+  }
+};
+
+window.mountRepositoryTable();

app/javascript/vue/experiments/list.vue

@@ -157,9 +157,7 @@ export default {
         field: 'description',
         headerName: this.i18n.t('experiments.card.description'),
         sortable: true,
-        cellStyle: { 'white-space': 'normal' },
         cellRenderer: DescriptionRenderer,
-        autoHeight: true,
         minWidth: 110
       });
 

app/javascript/vue/repository/renderers/asset_value.vue

@@ -0,0 +1,16 @@
+<template>
+  <div v-if="params.value">
+    {{ params.value.value.file_name }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AssetValue',
+  props: {
+    params: {
+      required: true
+    }
+  }
+};
+</script>

app/javascript/vue/repository/renderers/assigned.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    {{ params.value.tasks }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Assigned',
+  props: {
+    params: {
+      required: true
+    }
+  }
+};
+</script>

app/javascript/vue/repository/renderers/checklist_value.vue

@@ -0,0 +1,30 @@
+<template>
+  <div v-if="params.value">
+    <GeneralDropdown>
+      <template v-slot:field>
+        {{ params.value.value.length }}
+        {{ i18n.t('libraries.manange_modal_column.checklist_type.multiple_options') }}
+      </template>
+      <template v-slot:flyout>
+        <div v-for="option in params.value.value" :key="option.value" class="px-2 py-1">
+          {{ option.label }}
+        </div>
+      </template>
+    </GeneralDropdown>
+  </div>
+</template>
+
+<script>
+import GeneralDropdown from '../../shared/general_dropdown.vue';
+export default {
+  name: 'ChecklistValue',
+  props: {
+    params: {
+      required: true
+    }
+  },
+  components: {
+    GeneralDropdown
+  }
+};
+</script>

app/javascript/vue/repository/renderers/date_range_value.vue

@@ -0,0 +1,21 @@
+<template>
+  <div v-if="params.value">
+    <DateTimeShared :params="params" />
+  </div>
+</template>
+
+<script>
+import DateTimeShared from '../shared/date_time.vue';
+
+export default {
+  name: 'DateRangeValue',
+  props: {
+    params: {
+      required: true
+    }
+  },
+  components: {
+    DateTimeShared
+  }
+};
+</script>

app/javascript/vue/repository/renderers/date_time_range_value.vue

@@ -0,0 +1,21 @@
+<template>
+  <div v-if="params.value">
+    <DateTimeShared :params="params" />
+  </div>
+</template>
+
+<script>
+import DateTimeShared from '../shared/date_time.vue';
+
+export default {
+  name: 'DateTimeRangeValue',
+  props: {
+    params: {
+      required: true
+    }
+  },
+  components: {
+    DateTimeShared
+  }
+};
+</script>

app/javascript/vue/repository/renderers/date_time_value.vue

@@ -0,0 +1,21 @@
+<template>
+  <div v-if="params.value">
+    <DateTimeShared :params="params" />
+  </div>
+</template>
+
+<script>
+import DateTimeShared from '../shared/date_time.vue';
+
+export default {
+  name: 'DateTimeValue',
+  props: {
+    params: {
+      required: true
+    }
+  },
+  components: {
+    DateTimeShared
+  }
+};
+</script>

app/javascript/vue/repository/renderers/date_value.vue

@@ -0,0 +1,21 @@
+<template>
+  <div v-if="params.value">
+    <DateTimeShared :params="params" />
+  </div>
+</template>
+
+<script>
+import DateTimeShared from '../shared/date_time.vue';
+
+export default {
+  name: 'DateValue',
+  props: {
+    params: {
+      required: true
+    }
+  },
+  components: {
+    DateTimeShared
+  }
+};
+</script>

app/javascript/vue/repository/renderers/list_value.vue

@@ -0,0 +1,51 @@
+<template>
+  <div v-if="updateUrl" class="mt-0.5">
+    <SelectDropdown :value="value.id"  @change="updateValue" :options="options" size="xs" />
+  </div>
+  <div v-else>
+    {{ value.text }}
+  </div>
+</template>
+
+<script>
+
+import SelectDropdown from '../../shared/select_dropdown.vue';
+import rendersMixin from './renders_mixin.js';
+import axios from '../../../packs/custom_axios.js';
+
+export default {
+  name: 'ListValue',
+  computed: {
+    options() {
+      return this.params.colDef.columnItems.map((item) => [item.id, item.label]);
+    }
+  },
+  mixins: [rendersMixin],
+  components: {
+    SelectDropdown
+  },
+  mounted() {
+    if (this.params.value) {
+      this.value = this.params.value.value;
+    }
+  },
+  data() {
+    return {
+      value: {}
+    };
+  },
+  methods: {
+    updateValue(newValue) {
+      this.value.id = newValue;
+      this.updateCell();
+    },
+    updateCell() {
+      const params = { repository_cells: {} };
+      params.repository_cells[this.params.colDef.columnId] = this.value.id;
+      axios.put(updateUrl, params).then((response) => {
+
+      });
+    }
+  }
+};
+</script>