Merge pull request #4258 from aignatov-bio/ai-sci-6972-fix-viewer-role

Fix step for viewer role [SCI-6972]

app/assets/stylesheets/my_modules/protocol.scss

@@ -64,6 +64,9 @@
     padding-left: .75em;
   }
 
+  .empty-protocol-description {
+    color: $color-silver-chalice;
+  }
 
   .protocol-options-dropdown {
     a {

app/assets/stylesheets/shared_styles/elements/checkboxes.scss

@@ -28,6 +28,8 @@ input[type="checkbox"].sci-checkbox {
     height: var(--sci-checkbox-size);
     margin-left: calc(var(--sci-checkbox-size) * -1);
     position: absolute;
+    right: 0;
+    top: 0;
     width: var(--sci-checkbox-size);
 
     &::before {

app/assets/stylesheets/steps/components/checklist.scss

@@ -37,6 +37,15 @@
     }
   }
 
+  .sci-checkbox-view-mode {
+    align-self: center;
+    background-color: $color-black;
+    border-radius: 50%;
+    height: 4px;
+    margin-right: .5em;
+    width: 4px;
+  }
+
   .step-checklist-add-item {
     margin-left: 12px;
 
@@ -50,10 +59,17 @@
   }
 
   .sci-checkbox-container {
-    margin: 16px 0;
+    margin: 12px 0;
 
     &.disabled {
       pointer-events: none;
     }
   }
 }
+
+.step-checklist-container {
+  .empty-checklist-element {
+    color: $color-silver-chalice;
+    margin-left: 3em;
+  }
+}

app/assets/stylesheets/steps/components/table.scss

@@ -45,7 +45,7 @@
       color: $color-black;
     }
 
-    &.view {
+    &.view:not(.locked) {
       &:hover {
         background-color: $color-concrete;
 

app/assets/stylesheets/steps/components/text.scss

@@ -10,6 +10,10 @@
     flex: 0;
   }
 
+  .empty-text-element {
+    color: $color-silver-chalice;
+  }
+
   .buttons-container {
     background: linear-gradient(
       90deg,
@@ -36,7 +40,7 @@
     position: absolute;
   }
 
-  &:hover:not(.edit) {
+  &:hover:not(.edit):not(.locked) {
     background: $color-concrete;
 
     .buttons-container {

app/javascript/vue/protocol/container.vue

@@ -62,7 +62,9 @@
             @update="updateDescription"
           />
         </div>
-        <div v-else v-html="protocol.attributes.description_view">
+        <div v-else-if="protocol.attributes.description_view" v-html="protocol.attributes.description_view"></div>
+        <div v-else class="empty-protocol-description">
+          {{ i18n.t("protocols.no_text_placeholder") }}
         </div>
       </div>
       <a v-if="urls.add_step_url && protocol.attributes.in_repository" class="btn btn-primary" @click="addStep(steps.length)">

app/javascript/vue/protocol/step.vue

@@ -24,7 +24,7 @@
             @click="toggleCollapsed">
               <span class="fas fa-caret-right"></span>
           </a>
-          <div v-if="!inRepository" class="step-complete-container">
+          <div v-if="!inRepository && (urls.state_url || step.attributes.completed)" class="step-complete-container">
             <div :class="`step-state ${step.attributes.completed ? 'completed' : ''}`"
                  @click="changeState"
                  @keyup.enter="changeState"

app/javascript/vue/protocol/step_elements/checklist.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="step-checklist-container" :class="{ 'step-element--locked': !element.attributes.orderable.urls.update_url }">
-    <div class="step-element-header" :class="{ 'locked': locked, 'editing-name': editingName }">
+    <div class="step-element-header" :class="{ 'editing-name': editingName }">
       <div v-if="reorderElementUrl" class="step-element-grip" @click="$emit('reorder')">
         <i class="fas fas-rotated-90 fa-exchange-alt"></i>
       </div>
@@ -29,7 +29,7 @@
         </button>
       </div>
     </div>
-    <div class="step-checklist-items">
+    <div v-if="element.attributes.orderable.urls.create_item_url || orderedChecklistItems.length > 0" class="step-checklist-items">
       <Draggable
         v-model="checklistItems"
         :ghostClass="'step-checklist-item-ghost'"
@@ -66,6 +66,9 @@
         {{ i18n.t('protocols.steps.insert.checklist_item') }}
       </div>
     </div>
+    <div v-else class="empty-checklist-element">
+      {{ i18n.t("protocols.steps.checklist.empty_checklist") }}
+    </div>
     <deleteElementModal v-if="confirmingDelete" @confirm="deleteElement" @cancel="closeDeleteModal"/>
   </div>
 </template>
@@ -126,7 +129,7 @@
         return this.linesToPaste > 0;
       },
       locked() {
-        return this.reordering || this.editingName
+        return this.reordering || this.editingName || !this.element.attributes.orderable.urls.update_url
       }
     },
     methods: {

app/javascript/vue/protocol/step_elements/checklistItem.vue

@@ -4,8 +4,9 @@
       <div v-if="reorderChecklistItemUrl" class="step-element-grip step-element-grip--draggable" :class="{ 'step-element-grip--disabled': !draggable }">
         <i class="fas fa-grip-vertical"></i>
       </div>
+      <div v-else class="step-element-grip-placeholder"></div>
       <div class="step-element-name" :class="{ 'done': checklistItem.attributes.checked }">
-        <div class="sci-checkbox-container" :class="{ 'disabled': !toggleUrl || inRepository}">
+        <div v-if="toggleUrl" class="sci-checkbox-container" :class="{ 'disabled': inRepository}">
           <input ref="checkbox"
                  type="checkbox"
                  class="sci-checkbox"
@@ -14,6 +15,7 @@
           <span class="sci-checkbox-label" >
           </span>
         </div>
+        <div v-else class="sci-checkbox-view-mode"></div>
         <div class="step-checklist-text">
           <InlineEdit
             :value="checklistItem.attributes.text"

app/javascript/vue/protocol/step_elements/table.vue

@@ -27,7 +27,10 @@
         </button>
       </div>
     </div>
-    <div :class="'step-table ' + (editingTable ? 'edit' : 'view')" tabindex="0" @keyup.enter="!editingTable && enableTableEdit()">
+    <div class="step-table"
+         :class="{'edit': editingTable, 'view': !editingTable, 'locked': !element.attributes.orderable.urls.update_url}"
+         tabindex="0"
+         @keyup.enter="!editingTable && enableTableEdit()">
       <div  class="enable-edit-mode" v-if="!editingTable && element.attributes.orderable.urls.update_url" @click="enableTableEdit">
         <div class="enable-edit-mode__icon">
           <i class="fas fa-pen"></i>
@@ -113,6 +116,8 @@
         this.update();
       },
       updateTable() {
+        if (this.editingTable == false) return;
+
         let tableData = JSON.stringify({data: this.tableObject.getData()});
         this.element.attributes.orderable.contents = tableData;
         this.update();

app/javascript/vue/protocol/step_elements/text.vue

@@ -28,7 +28,10 @@
       @editingDisabled="disableEditMode"
       @editingEnabled="enableEditMode"
     />
-    <div v-else v-html="element.attributes.orderable.text_view"></div>
+    <div v-else-if="element.attributes.orderable.text_view" v-html="element.attributes.orderable.text_view"></div>
+    <div v-else class="empty-text-element">
+      {{ i18n.t("protocols.steps.text.empty_text") }}
+    </div>
     <deleteElementModal v-if="confirmingDelete" @confirm="deleteElement($event)" @cancel="closeDeleteModal"/>
   </div>
 </template>

config/locales/en.yml

@@ -2270,6 +2270,7 @@ en:
       unchangable_error_message: "Predefined roles can not be changed!"
 
   protocols:
+    no_text_placeholder: 'No protocol description'
     reorder_steps:
         button: "Rearrange steps"
         modal:
@@ -2564,8 +2565,10 @@ en:
         edit_message: 'Use right click for table options'
       checklist:
         default_name: 'Checklist %{position}'
+        empty_checklist: 'Doesn’t contain any checklist items'
       text:
         placeholder: 'Enter step text'
+        empty_text: 'No text entered'
       modals:
         delete_element:
           title: 'Delete content'