Merge pull request #39 from Arzte/backpack-disabled

Add toggle to disable backpack group selection

components/utils/ModalDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="modal fade" :class="{ show: show }">
+  <div class="fade modal" :class="{ show: show }">
     <div class="modal-dialog modal-xl">
       <div v-if="show" class="modal-content">
         <div class="modal-header">
@@ -19,7 +19,7 @@
   </div>
   <div
     v-show="show"
-    class="modal-backdrop fade show"
+    class="fade show modal-backdrop"
     @click="$emit('close')"
   ></div>
 </template>

components/utils/OffCanvas.vue

@@ -21,7 +21,7 @@
   </div>
   <div
     v-if="show"
-    class="offcanvas-backdrop fade show"
+    class="fade show offcanvas-backdrop"
     @click="$emit('close')"
   ></div>
 </template>

components/viewer/ViewProjectObj.vue

@@ -80,27 +80,25 @@ import { buildConditions } from '~/composables/conditions';
 import { ProjectObj, ProjectRow } from '~/composables/project';
 import { useProjectRefs, useProjectStore } from '~/composables/store/project';
 import { formatText } from '~/composables/text';
+import { ViewContext } from '~/composables/viewer';
 
 const {
   row,
   obj,
-  preview = false,
+  viewObject,
   width = null,
   forceWidth = null,
-  alwaysEnable = false,
   template = null,
 } = defineProps<{
   row: ProjectRow;
   obj: ProjectObj;
-  preview?: boolean;
+  viewObject?: ViewContext;
   width?: string;
   forceWidth?: string;
-  alwaysEnable?: boolean;
   template?: string;
 }>();
 
 const objClass = computed(() => {
-  if (preview) return ['obj-preview'];
   if (forceWidth) return ['col', { [forceWidth]: true }];
 
   let objectSize = row.objectWidth;
@@ -140,10 +138,22 @@ const { selectedIds, selected } = useProjectRefs();
 
 const condition = computed(() => buildConditions(obj));
 const isEnabled = computed<boolean>(() => {
-  // always enable when alwaysEnable prop is set to true
-  // Used for the backpack, as objects should always be selectable when viewing the backpack
-  if (alwaysEnable) return true;
-  return condition.value(selectedIds.value);
+  // Whether the object is always enabled or disabled based on the viewObject
+  // Otherwise check the object conditions
+  switch (viewObject) {
+    case ViewContext.BackpackEnabled:
+      return true;
+    default:
+      return condition.value(selectedIds.value);
+  }
+});
+const isSelectable = computed<boolean>(() => {
+  return (
+    isEnabled.value &&
+    !obj.isNotSelectable &&
+    !row.isInfoRow &&
+    viewObject !== ViewContext.BackpackDisabled
+  );
 });
 const isSelected = computed<boolean>(() => R.has(obj.id, selected.value));
 
@@ -160,23 +170,18 @@ const maxSelectedAmount = computed(() =>
 );
 
 const toggle = () => {
-  if (
-    isEnabled.value &&
-    !obj.isSelectableMultiple &&
-    !obj.isNotSelectable &&
-    !row.isInfoRow
-  ) {
+  if (isSelectable.value && !obj.isSelectableMultiple) {
     store.setSelected(obj.id, !isSelected.value);
   }
 };
 
 const increment = () => {
-  if (isEnabled.value) {
+  if (isSelectable.value) {
     store.incSelected(obj.id);
   }
 };
 const decrement = () => {
-  if (isEnabled.value) {
+  if (isSelectable.value) {
     store.decSelected(obj.id);
   }
 };

components/viewer/modal/BackpackModal.vue

@@ -5,8 +5,22 @@
     </template>
     <template #default>
       <div class="pack-content flex-grow-1 bg-dark">
-        <div class="pack-scores">
-          <ViewScoreStatus vertical />
+        <div class="pack-info-container">
+          <div class="pack-scores">
+            <ViewScoreStatus vertical />
+          </div>
+          <div class="form-check form-switch pack-selection-controls">
+            <input
+              id="packRowDisabledSwitch"
+              v-model="disableBackpackSelectionSwitch"
+              class="form-check-input"
+              type="checkbox"
+              role="switch"
+            />
+            <label class="form-check-label" for="packRowDisabledSwitch">
+              Disable Backpack Selection
+            </label>
+          </div>
         </div>
         <div
           v-for="{ packRow, choices } in packRows"
@@ -17,14 +31,24 @@
             {{ packRow.title }}
           </div>
           <div class="container-fluid p-0">
-            <div class="row g-2">
+            <div v-if="!disableBackpackSelectionSwitch" class="row g-2">
               <ViewProjectObj
                 v-for="{ obj, row } in choices"
                 :key="obj.id"
                 :obj="obj"
                 :row="row"
                 :width="packRow.objectWidth"
-                :always-enable="true"
+                :view-object="ViewContext.BackpackEnabled"
+              />
+            </div>
+            <div v-else class="row g-2">
+              <ViewProjectObj
+                v-for="{ obj, row } in choices"
+                :key="obj.id"
+                :obj="obj"
+                :row="row"
+                :width="packRow.objectWidth"
+                :view-object="ViewContext.BackpackDisabled"
               />
             </div>
           </div>
@@ -48,6 +72,7 @@ import ImportCode from '~/components/viewer/utils/ImportCode.vue';
 import { ProjectObj, ProjectRow } from '~/composables/project';
 import { useProjectRefs, useProjectStore } from '~/composables/store/project';
 import { useViewerRefs, useViewerStore } from '~/composables/store/viewer';
+import { ViewContext } from '~/composables/viewer';
 
 const { getObject, getObjectRow, getRow } = useProjectStore();
 const { selected, backpack } = useProjectRefs();
@@ -78,6 +103,8 @@ const packRows = computed(() => {
     backpack.value,
   );
 });
+
+const disableBackpackSelectionSwitch = ref(false);
 </script>
 
 <style scoped lang="scss">
@@ -92,8 +119,18 @@ const packRows = computed(() => {
   overflow-x: hidden;
   overflow-y: auto;
 
-  .pack-scores {
-    margin-bottom: 0.5rem;
+  .pack-info-container {
+    display: flex;
+    position: relative;
+
+    .pack-scores {
+      margin-bottom: 0.5rem;
+    }
+
+    .pack-selection-controls {
+      position: absolute;
+      right: 0;
+    }
   }
 
   .pack-row {
@@ -131,5 +168,14 @@ const packRows = computed(() => {
   .pack-import-export {
     flex-direction: column;
   }
+
+  .pack-content .pack-info-container {
+    flex-direction: column;
+    align-items: flex-start;
+
+    .pack-selection-controls {
+      position: unset;
+    }
+  }
 }
 </style>

components/viewer/modal/SearchModal.vue

@@ -37,7 +37,7 @@
             :key="searchView.obj.id"
             :obj="searchView.obj"
             :row="searchView.row"
-            preview
+            :view-object="ViewContext.Viewer"
             template="1"
           />
         </div>
@@ -53,6 +53,7 @@ import { all, any, includes, isEmpty } from 'ramda';
 import { Project, ProjectObj, ProjectRow } from '~/composables/project';
 import { useProjectRefs } from '~/composables/store/project';
 import { useViewerRefs, useViewerStore } from '~/composables/store/viewer';
+import { ViewContext } from '~/composables/viewer';
 
 const { toggleSearch } = useViewerStore();
 const { isSearchVisible } = useViewerRefs();

components/viewer/utils/ExportCode.vue

@@ -34,7 +34,7 @@
         placeholder="Nothing has been selected yet ..."
         :value="exportText"
       />
-      <div class="export-text-toggle form-check form-switch">
+      <div class="form-check form-switch export-text-toggle">
         <input
           id="sectionTitleSwitch"
           v-model="exportTextHeaders"

composables/viewer.ts

@@ -6,3 +6,10 @@ export type ViewerProject = {
 export type ViewerProjectList = {
   items: ViewerProject[];
 };
+
+export enum ViewContext {
+  Viewer,
+  Editor, // Future use case
+  BackpackEnabled,
+  BackpackDisabled,
+}