Add lock button.

Author: mross-ua

components/lineup/Lineup.vue

@@ -3,24 +3,36 @@ import { useSortable } from '@vueuse/integrations/useSortable'
 
 import { nanoid } from 'nanoid';
 
-import type { Lineup, AppSettings } from '~~/types';
+import type { Spot, Lineup, AppSettings } from '~~/types';
 
 const lineup = useLocalStorage<Lineup>('lineup', {
     id: nanoid(),
     teamName: '',
     spots: []
+}, {
+    mergeDefaults: true
 });
 const appSettings = useLocalStorage<AppSettings>('app-settings', {
+    isLineupLocked: false,
     jerseyColor: 'f47373',
     jerseyTextColor: '000000'
+}, {
+    mergeDefaults: true
 });
 
 const sortableContainer = ref<HTMLElement | null>(null);
 useSortable(sortableContainer, lineup.value.spots, {
   group: 'spots',
   handle: '.drag-handle',
-  animation: 150
+  animation: 150,
+  onMove: () => !appSettings.value.isLineupLocked
 });
+
+function addSpot(spot: Spot) {
+    if (!appSettings.value.isLineupLocked) {
+        lineup.value.spots.push(spot);
+    }
+}
 </script>
 
 <template>
@@ -34,6 +46,8 @@ useSortable(sortableContainer, lineup.value.spots, {
                 placeholder="Team Name"
             />
 
+            <SettingsLockButton :is-locked="appSettings.isLineupLocked" @lock="appSettings.isLineupLocked = true" @unlock="appSettings.isLineupLocked = false" />
+
             <SettingsButton :app-settings="appSettings" />
         </header>
 
@@ -43,6 +57,7 @@ useSortable(sortableContainer, lineup.value.spots, {
                     v-for="spot in lineup.spots"
                     :key="spot.player.id"
                     :spot="spot"
+                    :is-lineup-locked="appSettings.isLineupLocked"
                     :jersey-color="appSettings.jerseyColor"
                     :jersey-text-color="appSettings.jerseyTextColor"
                     @delete="lineup.spots = lineup.spots.filter(s => s.player.id !== $event)"
@@ -52,7 +67,7 @@ useSortable(sortableContainer, lineup.value.spots, {
         </div>
 
         <footer>
-            <LineupNewSpot @add="lineup.spots.push($event)" />
+            <LineupNewSpot @add="addSpot($event)" :class="`${ appSettings.isLineupLocked ? 'collapse' : 'visible' }`" />
         </footer>
     </div>
 </template>

components/lineup/LineupSpot.vue

@@ -4,6 +4,7 @@ import { PositionOptions } from '~~/types';
 
 const props = defineProps<{
     spot: Spot,
+    isLineupLocked: boolean,
     jerseyColor: string,
     jerseyTextColor: string
 }>();
@@ -30,7 +31,7 @@ const isPositionDialogVisible = ref(false);
         @blur="focused = false"
         tabindex="0"
     >
-        <LineupDragHandle class="inline-block shrink-0 text-[1.3em] px-2" />
+        <LineupDragHandle :class="`${ props.isLineupLocked ? 'collapse' : 'visible' } inline-block shrink-0 text-[1.3em] px-2`" />
 
         <PlayerJersey :player="props.spot.player" :jersey-color="props.jerseyColor" :jersey-text-color="props.jerseyTextColor" class="shrink-0" />
 

components/settings/SettingsLockButton.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const props = defineProps<{
+  isLocked: boolean
+}>();
+
+const emit = defineEmits<{
+  (e: "lock"): void;
+  (e: "unlock"): void;
+}>();
+
+const isLocked = ref(props.isLocked);
+
+function handleClick(): void {
+  isLocked.value = !isLocked.value;
+
+  if (isLocked.value) {
+    emit('lock');
+  } else {
+    emit('unlock');
+  }
+}
+</script>
+
+<template>
+  <Button
+      @click="handleClick"
+      :icon="`pi pi-${ isLocked ? 'lock' : 'lock-open' }`"
+      :severity="`${ isLocked ? 'secondary' : 'warning' }`"
+      text
+      rounded
+      :aria-label="`${ isLocked ? 'Unlock lineup' : 'Lock lineup' }`"
+      :title="`${ isLocked ? 'Unlock lineup' : 'Lock lineup' }`"
+  />
+</template>

types/index.ts

@@ -34,6 +34,7 @@ export interface Lineup {
 };
 
 export interface AppSettings {
+    isLineupLocked: boolean,
     jerseyColor: string,
     jerseyTextColor: string,
 };