Skip to content

Commit

Permalink
feat: Possibility to delete item from checklist
Browse files Browse the repository at this point in the history
Fixes #60
  • Loading branch information
Perdolique committed Aug 8, 2024
1 parent fd444b9 commit b1c3fbe
Show file tree
Hide file tree
Showing 20 changed files with 201 additions and 78 deletions.
4 changes: 4 additions & 0 deletions app/assets/styles/_base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -87,4 +87,8 @@
// Small inputs
--input-small-height: 2rem;
--input-small-border-radius: 0.75rem;

// Extra small inputs
--input-extra-small-height: 1.5rem;
--input-extra-small-border-radius: 0.5rem;
}
6 changes: 6 additions & 0 deletions app/assets/styles/_utils.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
// overflow ellipsis
@mixin overflow-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
15 changes: 11 additions & 4 deletions app/components/IconButton.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<button :class="[$style.button, {
small,
[size]: true,
secondary
}]">
<Icon
Expand All @@ -15,12 +15,12 @@
interface Props {
readonly iconName: string;
readonly secondary?: boolean;
readonly small?: boolean;
readonly size: 'm' | 's' | 'xs';
}
withDefaults(defineProps<Props>(), {
secondary: false,
small: false
size: 'm'
});
</script>

Expand All @@ -46,13 +46,20 @@
border: 1px solid var(--input-secondary-color-border);
}
&:global(.small) {
&:global(.s) {
height: var(--input-small-height);
width: var(--input-small-height);
border-radius: var(--input-small-border-radius);
font-size: 1.125rem;
}
&:global(.xs) {
height: var(--input-extra-small-height);
width: var(--input-extra-small-height);
border-radius: var(--input-extra-small-border-radius);
font-size: 1rem;
}
&:focus-visible,
&:hover {
background-color: var(--input-color-focus);
Expand Down
2 changes: 1 addition & 1 deletion app/components/PerdInput.vue
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@
border: none;
background: none;
outline: none;
color: var(--input-secondary-color-text);
color: var(--input-color-text);
}
.input::placeholder {
Expand Down
22 changes: 12 additions & 10 deletions app/components/PerdSearch/SearchOptionAdd.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<template>
<div :class="$style.component">
<slot />
<div :class="$style.name">
<slot />
</div>

<div :class="$style.add">
<Icon
Expand All @@ -13,10 +15,11 @@
</div>
</template>

<style module>
<style lang="scss" module>
.component {
height: 100%;
display: flex;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
column-gap: var(--spacing-16);
justify-content: space-between;
Expand All @@ -29,23 +32,22 @@
}
}
.name {
@include overflow-ellipsis();
}
.add {
display: none;
opacity: 0;
display: flex;
align-items: center;
opacity: 0;
column-gap: var(--spacing-4);
font-size: var(--font-size-14);
transition:
opacity 0.15s ease-out,
display 0.15s ease-out allow-discrete;
.component:hover & {
display: flex;
opacity: 1;
@starting-style {
opacity: 0;
}
}
}
</style>
42 changes: 37 additions & 5 deletions app/components/checklists/ChecklistItem.vue
Original file line number Diff line number Diff line change
@@ -1,39 +1,71 @@
<template>
<div :class="$style.component">
<div>
<div :class="$style.name">
{{ item.equipment.name}}
</div>

<div :class="$style.weight">
{{ item.equipment.weight }}
</div>

<div :class="$style.actions">
<IconButton
size="xs"
icon-name="tabler:x"
@click="handleRemoveClick"
/>
</div>
</div>
</template>

<script lang="ts" setup>
import type { ChecklistItemModel } from '~/models/checklist';
import IconButton from '@/components/IconButton.vue';
interface Props {
readonly item: ChecklistItemModel;
}
defineProps<Props>();
const props = defineProps<Props>();
const route = useRoute();
const { removeItem } = useChecklistStore();
async function handleRemoveClick() {
if (typeof route.params.checklistId === 'string' && typeof props.item.id === 'string') {
await removeItem(route.params.checklistId, props.item.id);
}
}
</script>

<style module>
<style lang="scss" module>
.component {
height: 40px;
display: grid;
grid-template-columns: 1fr auto;
padding: var(--border-radius-8) var(--spacing-12);
grid-template-columns: minmax(100px, 30%) auto auto;
align-items: center;
padding: 0 var(--spacing-12);
background-color: var(--color-blue-100);
border: 1px solid var(--color-blue-300);
border-radius: var(--border-radius-12);
font-size: var(--font-size-16);
color: var(--color-blue-800);
}
.name {
@include overflow-ellipsis();
}
.weight {
color: var(--color-blue-700);
font-size: var(--font-size-14);
}
.actions {
justify-self: end;
}
.icon {
display: block;
cursor: pointer;
}
</style>
7 changes: 1 addition & 6 deletions app/components/checklists/ChecklistItemsList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,9 @@
</template>

<script lang="ts" setup>
import type { ChecklistItemModel } from '~/models/checklist';
import ChecklistItem from './ChecklistItem.vue';
interface Props {
readonly items: ChecklistItemModel[];
}
defineProps<Props>();
const { items } = useChecklistStore();
</script>

<style module>
Expand Down
6 changes: 2 additions & 4 deletions app/components/checklists/ChecklistsItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
const path = computed(() => `/checklists/${props.checklistId}`)
</script>

<style module>
<style lang="scss" module>
.component {
display: flex;
align-items: center;
Expand Down Expand Up @@ -51,8 +51,6 @@
}
.name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@include overflow-ellipsis();
}
</style>
6 changes: 5 additions & 1 deletion app/components/equipment/EquipmentTable.vue
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@
}
</script>

<style module>
<style lang="scss" module>
.component {
border: 1px solid var(--input-color-main);
border-radius: var(--border-radius-16);
Expand Down Expand Up @@ -124,6 +124,10 @@
font-weight: var(--font-weight-medium);
}
&:global(.name) {
@include overflow-ellipsis();
}
&:global(.actions) {
width: 8rem;
}
Expand Down
6 changes: 2 additions & 4 deletions app/components/layout/page-content.vue
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,13 @@
defineProps<Props>()
</script>

<style module>
<style lang="scss" module>
.layout {
display: grid;
row-gap: var(--spacing-32);
}
.heading {
overflow: hidden;
text-overflow: ellipsis;
text-wrap: nowrap;
@include overflow-ellipsis();
}
</style>
6 changes: 1 addition & 5 deletions app/composables/use-checklist-items-data.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
import type { ChecklistItemModel } from "~/models/checklist"

export async function useChecklistItemsData(checklistId: string) {
const items = ref<ChecklistItemModel[]>([])
const { items } = useChecklistStore()
const { data } = await useFetch(`/api/checklists/${checklistId}/items`)

if (data.value !== undefined) {
items.value = data.value
}

return items
}
44 changes: 44 additions & 0 deletions app/composables/use-checklist-store.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import type { ChecklistItemModel } from "~/models/checklist";

export function useChecklistStore() {
const items = useState<ChecklistItemModel[]>('checklistItems', () => [])

async function removeItem(checklistId: string, itemId: string) {
try {
const deletedItem = await $fetch(`/api/checklists/${checklistId}/items/${itemId}`, {
method: 'DELETE'
});

items.value = items.value.filter(item => item.id !== deletedItem.id);
} catch (error) {
console.error(error);
}
}

async function addItem(checklistId: string, equipmentId: string) {
try {
const insertedItem = await $fetch(`/api/checklists/${checklistId}/items`, {
method: 'POST',

body: {
equipmentId
}
});

if (insertedItem !== undefined) {
items.value.push({
id: insertedItem.id,
equipment: insertedItem.equipment
})
}
} catch (error) {
console.error(error);
}
}

return {
items,
removeItem,
addItem
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
@search="search"
>
<template #option="{ option }">
<SearchOptionAdd @click="addItem(option)">
<SearchOptionAdd @click="handleOptionClick(option.id)">
{{ option.name }}
</SearchOptionAdd>
</template>
Expand All @@ -42,13 +42,15 @@
}
const route = useRoute()
const { items, addItem } = useChecklistStore()
const name = ref('')
const checklistId = route.params.id?.toString() ?? ''
const checklistId = route.params.checklistId?.toString() ?? ''
const isDeleting = ref(false)
const options = ref<InventoryItem[]>([]);
const isSearching = ref(false);
const options = ref<InventoryItem[]>([])
const isSearching = ref(false)
const { data: checklistData } = await useFetch(`/api/checklists/${checklistId}`)
const items = await useChecklistItemsData(checklistId)
await useChecklistItemsData(checklistId)
if (checklistData.value !== undefined) {
name.value = checklistData.value.name
Expand Down Expand Up @@ -100,27 +102,10 @@
}
}
async function addItem(item: InventoryItem) {
try {
const insertedItem = await $fetch(`/api/checklists/${checklistId}/items`, {
method: 'POST',
body: {
equipmentId: item.id
}
})
async function handleOptionClick(equipmentId: string) {
await addItem(checklistId, equipmentId)
options.value = options.value.filter(({ id }) => id !== item.id)
if (insertedItem !== undefined) {
items.value.push({
id: insertedItem.id,
equipment: insertedItem.equipment
})
}
} catch (error) {
console.error(error)
}
options.value = options.value.filter(({ id }) => id !== equipmentId)
}
</script>

Expand Down
Loading

0 comments on commit b1c3fbe

Please sign in to comment.