Merge pull request #134 from Perdolique/65-confirmation-dialog

style: Update base.scss and dialog styles

app/assets/styles/_base.scss

@@ -70,6 +70,7 @@
   --button-color-text: ghostwhite;
   --button-color-disabled: #ccc;
   --button-color-disabled-text: #666;
+
   // Inputs
   --input-height: 3rem;
   --input-spacing-horizontal: 1rem;
@@ -82,7 +83,6 @@
   --input-color-placeholder: #8c8c8c;
   --input-color-background: ghostwhite;
 
-
   // Secondary inputs
   --input-secondary-color-main: ghostwhite;
   --input-secondary-color-text: #287892;
@@ -103,4 +103,10 @@
    --element-color-background: ghostwhite;
    --element-color-background-hover: #f0fafb;
    --element-color-background-active: #d8f2f5;
+
+  // Dialogs
+  --dialog-color-background: #f0fafb;
+  --dialog-color-border: #266278;
+  --dialog-padding: 1.5rem;
+  --dialog-border-radius: 1.5rem;
 }

app/components/PerdHeading.vue

@@ -9,7 +9,7 @@
 
 <script lang="ts" setup>
   interface Props {
-    readonly level: 1;
+    readonly level: 1 | 2;
   }
 
   const { level } = defineProps<Props>();
@@ -22,6 +22,13 @@
           className: 'h1'
         };
       }
+
+      case 2: {
+        return {
+          name: 'h2',
+          className: 'h2'
+        };
+      }
     }
   });
 </script>
@@ -35,5 +42,10 @@
       font-size: var(--font-size-24);
       font-weight: var(--font-weight-bold);
     }
+
+    &:global(.h2) {
+      font-size: var(--font-size-20);
+      font-weight: var(--font-weight-bold);
+    }
   }
 </style>

app/components/PerdMenu.vue

@@ -42,6 +42,8 @@
 
   onClickOutside(rootRef, () => {
     isMenuVisible.value = false
+  }, {
+    ignore: ['dialog']
   });
 </script>
 

app/components/dialogs/ConfirmationDialog.vue

@@ -0,0 +1,100 @@
+<template>
+  <ModalDialog v-model="isOpened">
+    <div :class="$style.content">
+      <PerdHeading
+        :class="$style.header"
+        :level="2"
+      >
+        {{ headerText }}
+      </PerdHeading>
+
+      <div :class="$style.body">
+        <slot />
+      </div>
+
+      <div :class="$style.buttons">
+        <PerdButton
+          secondary
+          :class="$style.cancelButton"
+          @click="close"
+        >
+          {{ cancelButtonText }}
+        </PerdButton>
+
+        <PerdButton
+          :class="$style.confirmButton"
+          @click="emitConfirm"
+        >
+          {{ confirmButtonText }}
+        </PerdButton>
+      </div>
+    </div>
+  </ModalDialog>
+</template>
+
+<script lang="ts" setup>
+  import PerdButton from '~/components/PerdButton.vue'
+  import PerdHeading from '~/components/PerdHeading.vue';
+  import ModalDialog from './ModalDialog.vue'
+
+  interface Props {
+    readonly headerText: string;
+    readonly confirmButtonText: string;
+    readonly cancelButtonText?: string;
+  }
+
+  type Emits = (event: 'confirm') => void
+
+  const isOpened = defineModel<boolean>({
+    required: true
+  })
+
+  const {
+    cancelButtonText = 'Cancel'
+  } = defineProps<Props>()
+
+  const emit = defineEmits<Emits>()
+
+  function close() {
+    isOpened.value = false
+  }
+
+  function emitConfirm() {
+    emit('confirm')
+
+    close()
+  }
+</script>
+
+<style lang="scss" module>
+  .content {
+    display: grid;
+    row-gap: var(--spacing-24);
+    column-gap: var(--spacing-16);
+    background-color:  var(--dialog-color-background);
+    padding: var(--dialog-padding);
+    border-radius: var(--dialog-border-radius);
+    border: 1px solid var(--dialog-color-border);
+  }
+
+  .header {
+    @include overflow-ellipsis();
+  }
+
+  .body {
+    word-break: break-word;
+  }
+
+  .buttons {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--spacing-16);
+  }
+
+  .confirmButton,
+  .cancelButton {
+    max-width: 200px;
+    @include overflow-ellipsis();
+  }
+</style>

app/components/dialogs/CreateChecklistDialog.vue

@@ -81,10 +81,10 @@
   .content {
     display: grid;
     row-gap: var(--spacing-24);
-    background-color: var(--color-background);
-    padding: var(--spacing-16) var(--spacing-32);
-    border-radius: var(--border-radius-24);
-    border: 1px solid var(--color-blue-700);
+    background-color: var(--dialog-color-background);
+    padding: var(--dialog-padding);
+    border-radius: var(--dialog-border-radius);
+    border: 1px solid var(--dialog-color-border);
   }
 
   .header {

app/components/dialogs/ModalDialog.vue

@@ -24,7 +24,7 @@
     }
   });
 
-  useEventListener(dialogRef, 'close', (event) => {
+  useEventListener(dialogRef, 'close', () => {
     isOpened.value = false
   })
 

app/pages/auth/twitch.vue

@@ -80,8 +80,8 @@
 
 <style module>
   .component {
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     display: flex;
     overflow: hidden;
     padding: var(--spacing-24);

app/pages/checklists/[checklistId].vue

@@ -18,9 +18,15 @@
         >
           <OptionButton
             icon="tabler:trash"
-            @click="deleteChecklist"
+            @click="showDeleteConfirmation"
           >
-            Delete
+            <template v-if="isDeleting">
+              Deleting...
+            </template>
+
+            <template v-else>
+              Delete
+            </template>
           </OptionButton>
 
           <OptionToggle v-model="isCheckMode">
@@ -54,6 +60,15 @@
       />
     </div>
   </PageContent>
+
+  <ConfirmationDialog
+    v-model="isDeleteDialogOpened"
+    header-text="Delete checklist"
+    :confirm-button-text="deleteButtonText"
+    @confirm="deleteChecklist"
+  >
+    Cheklist <strong>{{ name }}</strong> will be deleted
+  </ConfirmationDialog>
 </template>
 
 <script lang="ts" setup>
@@ -65,6 +80,7 @@
   import OptionButton from '~/components/PerdMenu/OptionButton.vue';
   import OptionToggle from '~/components/PerdMenu/OptionToggle.vue';
   import PerdButton from '~/components/PerdButton.vue';
+  import ConfirmationDialog from '~/components/dialogs/ConfirmationDialog.vue'
 
   definePageMeta({
     layout: 'page'
@@ -83,8 +99,10 @@
   const options = ref<InventoryItem[]>([])
   const isSearching = ref(false)
   const isCheckMode = ref(false)
+  const isDeleteDialogOpened = ref(false)
   const { resetAll: resetAllToggles } = useChecklistToggle(checklistId)
   const { data: checklistData } = await useFetch(`/api/checklists/${checklistId}`)
+  const deleteButtonText = computed(() => `Delete ${name.value}`)
 
   await useChecklistItemsData(checklistId)
 
@@ -97,6 +115,10 @@
   }
 
   async function deleteChecklist() {
+    if (isDeleting.value) {
+      return
+    }
+
     try {
       isDeleting.value = true
 
@@ -143,6 +165,10 @@
 
     options.value = options.value.filter(({ id }) => id !== equipmentId)
   }
+
+  function showDeleteConfirmation() {
+    isDeleteDialogOpened.value = true
+  }
 </script>
 
 <style module>

app/pages/index.vue

@@ -1,8 +1,12 @@
 <template>
   <div :class="$style.component">
-    Hello, {{ user.userId }}
-    <br />
-    Your admin status is: {{ user.isAdmin }}
+    <div>
+      Hello, {{ user.userId }}
+    </div>
+
+    <div>
+      Your admin status is: {{ user.isAdmin }}
+    </div>
   </div>
 </template>
 
@@ -16,7 +20,7 @@
 
 <style module>
   .component {
-    display: flex;
+    display: grid;
     justify-content: center;
     gap: var(--spacing-16);
     padding-top: var(--spacing-32);