Skip to content

Commit

Permalink
Merge pull request #19 from Smidra/clean-up-modals
Browse files Browse the repository at this point in the history 
reuse Edit and Detail modals, instead of spawning one per tile
  • Loading branch information
@Smidra
Smidra committed Mar 2, 2024
2 parents e78b4af + 38b520a commit 79765bc
Show file tree
Hide file tree
Showing 5 changed files with 57 additions and 93 deletions.
17 changes: 10 additions & 7 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,9 @@
</ais-hierarchical-menu>

<hr class="custom-divider" />
<cv-button kind="ghost" class="grey-text" @click="showModal = true">
<cv-button kind="ghost" class="grey-text" @click="handleCreateNew">
Přidat novou firmu<add-icon />
</cv-button>
<EditModal v-model:visible="showModal" />


<cv-button kind="ghost" class="grey-text" @click="showAbout = true">
O nás
</cv-button>
Expand All @@ -41,21 +38,23 @@
</cv-header>

<!-- Main Content -->
<main>
<main class="padding-top">
<ais-hits>
<template v-slot="{ items }">
<div class="tile-container">
<ItemTile v-for="item in items" :key="item.objectID" :item="item" />
<ItemTile v-for="item in items" :key="item.objectID" :item="item" @open-company-detail="detailModalItem = $event; showDetailModal = true" @open-eshop="handleOpenEshop" />
</div>
</template>
</ais-hits>
</main>

</ais-instant-search>
<EditModal v-model:visible="showEditModal" :editedItem="editedItem" />
<CompanyDetailModal v-model:visible="showDetailModal" :item="detailModalItem" @edit="handleEditOpen()" @open-eshop="handleOpenEshop"/>
<AboutModal/>
</div>
</template>

<script src="./script.js"></script>

<style src="./style.css"></style>
Expand All @@ -79,4 +78,8 @@
/* color: #5A6872; */
color: #0f62fe;
}
.padding-top {
padding-top: 1rem;
}
</style>
65 changes: 19 additions & 46 deletions src/components/CompanyDetailModal.vue
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,33 @@
<template>
<cv-modal ref="CompanyDetailModal" :visible="isOpen" @secondary-click="openEshop">
<cv-modal ref="CompanyDetailModal" :visible="isOpen" @secondary-click="$emit('open-eshop', item.eshop)" @other-btn-click="$emit('edit')">
<!-- Header of the modal -->
<template v-slot:title>
<div class="modal-title-container">

<!-- Left part -->
<div>
<h2 class="modal-title">
{{ item.jmeno_firmy }}
<unknown-icon v-if="item.semafor === undefined" class="icon-unknown factory-icon-modal" />
<error-icon v-else-if="item.semafor === '10'" class="icon-error factory-icon-modal" />
<incomplete-icon v-else-if="item.semafor === '20'" class="icon-in-progress factory-icon-modal" />
<success-icon v-else-if="item.semafor === '30'" class="icon-success factory-icon-modal" />
{{ item?.jmeno_firmy }}
<unknown-icon v-if="item?.semafor === undefined" class="icon-unknown factory-icon-modal" />
<error-icon v-else-if="item?.semafor === '10'" class="icon-error factory-icon-modal" />
<incomplete-icon v-else-if="item?.semafor === '20'" class="icon-in-progress factory-icon-modal" />
<success-icon v-else-if="item?.semafor === '30'" class="icon-success factory-icon-modal" />
</h2>
<p class="subtitle bx--tile__subtitle">
<span v-if="item.semafor === undefined" class="icon-unknown factory-icon">Nevíme kde
<span v-if="item?.semafor === undefined" class="icon-unknown factory-icon">Nevíme kde
vyrábí.</span>
<span v-else-if="item.semafor === '10'" class="icon-error factory-icon">Nevyrábí v
<span v-else-if="item?.semafor === '10'" class="icon-error factory-icon">Nevyrábí v
ČR.</span>
<span v-else-if="item.semafor === '20'" class="icon-in-progress factory-icon">Vyrábí částečně v
<span v-else-if="item?.semafor === '20'" class="icon-in-progress factory-icon">Vyrábí částečně v
ČR.</span>
<span v-else-if="item.semafor === '30'" class="icon-success factory-icon">Vyrábí v ČR, {{
item.vyrobny ? item.vyrobny[0].lokalita.hezkyNazev : "" }}</span>
<span v-else-if="item?.semafor === '30'" class="icon-success factory-icon">Vyrábí v ČR, {{
item?.vyrobny ? item?.vyrobny[0].lokalita.hezkyNazev : "" }}</span>
</p>
</div>

<!-- Right part -->
<div class="tile-logo-container">
<img :src="item.logo" alt="Logo" class="tile-logo bx--tile__icon">
<img :src="item?.logo" alt="Logo" class="tile-logo bx--tile__icon">
</div>

</div>
Expand All @@ -38,20 +38,20 @@
<div class="modal-content">
<!-- Show comments on company -->
<h4>Poznámky k výrobě</h4>
<p>{{ item.poznamky_k_vyrobe }}</p>
<p>{{ item?.poznamky_k_vyrobe }}</p>
<br />

<h4>Místa</h4>
<cv-list class="list-container">
<cv-list-item v-for="(vyrobna, index) in item.vyrobny" :key="index">{{ vyrobna.lokalita.hezkyNazev
<cv-list-item v-for="(vyrobna, index) in item?.vyrobny" :key="index">{{ vyrobna.lokalita.hezkyNazev
}} ({{ vyrobna.lokalita.adresaUradu.kraj }}, {{ vyrobna.lokalita.adresaUradu.PSC
}})</cv-list-item>
</cv-list>
<br />

<!-- Show description -->
<h4>Popisek firmy</h4>
<p>{{ item.popisek_firmy }}</p>
<p>{{ item?.popisek_firmy }}</p>
<br />

<!-- Show categories -->
Expand All @@ -63,15 +63,9 @@

<!-- If there are aliases, show -->
<!-- <template v-if="(item.aliasy != undefined) && (item.aliasy.length > 0)"> -->
<template v-if="(item.aliasy != undefined) && (item.aliasy != '')">
<template v-if="(item?.aliasy != undefined) && (item?.aliasy != '')">
<h4>Značky & Aliasy</h4>
<p>{{ item.aliasy }}

<!-- <span v-for="(alias, index) in item.aliasy" :key="index">
{{ alias }}
<span v-if="index !== item.aliasy.length - 1">, </span>
</span> -->
</p>
<p>{{ item?.aliasy }}</p>
<br />
</template>

Expand Down Expand Up @@ -130,20 +124,10 @@ export default {
default: () => ({})
}
},
methods: {
showModal() {
this.$refs.CompanyDetailModal.show();
},
hideModal() {
this.$refs.CompanyDetailModal.hide();
},
openEshop() {
window.open(this.item.eshop, '_blank');
},
},
methods: {},
computed: {
leaves() {
return getUniqueBradcrumbs(this.item.kategorie0, this.item.kategorie1, this.item.kategorie2);
return getUniqueBradcrumbs(this.item?.kategorie0, this.item?.kategorie1, this.item?.kategorie2);
}
}
};
Expand All @@ -163,15 +147,4 @@ export default {
justify-content: flex-end;
padding: 1rem;
}
.modal-buttons {
display: flex;
justify-content: flex-end;
width: 100%;
}
.lokality {
color: lightgray;
font-size: 1em;
}
</style>
6 changes: 6 additions & 0 deletions src/components/EditModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,12 @@ export default {
}
},
},
watch: {
// once source item updates, copy into local form
editedItem(newEditedItem) {
this.form = newEditedItem ? { ...newEditedItem } : {};
}
},
created() {
if (this.editedItem != null) {
this.form = { ...this.editedItem };
Expand Down
36 changes: 2 additions & 34 deletions src/components/ItemTile.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,25 +41,12 @@
</div>
<div class="footer-buttons">
<!-- Footer right -->
<cv-button class="square-button" kind="tertiary" size="small" @click="openEshop">
<cv-button class="square-button" kind="tertiary" size="small" @click.stop="$emit('open-eshop', item.eshop)">
<launch-icon />
</cv-button>
</div>
</div>
</div>
<!-- <company-detail-modal v-if="isModalOpen" :item="item" :key="modalKey" :is-open="isModalOpen"
@update:isOpen="updateModalState" @other-btn-click="onOtherBtnClick" @secondary-click="openEshop">
</company-detail-modal>
<edit-modal v-if="isEditModalOpen" :editedItem="item" :is-open="isEditModalOpen" :key="editModalKey"
@update:isOpen="updateEditModalState" :newCompany="false"></edit-modal> -->
<!-- <company-detail-modal v-model:isOpen="isModalOpen" :item="item" :key="modalKey" @update:isOpen="updateModalState"
@other-btn-click="onOtherBtnClick" @secondary-click="openEshop">
</company-detail-modal> -->
<company-detail-modal v-model:visible="isModalOpen" :item="item" @other-btn-click="onOtherBtnClick">
</company-detail-modal>
<!-- <edit-modal v-model:visible="isEditModalOpen" :editedItem="item" :key="editModalKey"
@update:isOpen="updateEditModalState" :newCompany="false"></edit-modal> -->
<edit-modal v-model:visible="isEditModalOpen" :editedItem="item" :newCompany="false"></edit-modal>
</div>
</cv-tile>
</template>
Expand All @@ -70,8 +57,6 @@ import ErrorIcon from '@carbon/icons-vue/es/error/16';
import IncompleteIcon from '@carbon/icons-vue/es/incomplete/16';
import SuccessIcon from '@carbon/icons-vue/es/checkmark--filled/16';
import LaunchIcon from '@carbon/icons-vue/es/launch/16';
import CompanyDetailModal from './CompanyDetailModal.vue';
import EditModal from './EditModal.vue'; // Make sure to create this component
import { getLeaves, getUniqueBradcrumbs } from './KategorieTool.js';
Expand All @@ -97,27 +82,10 @@ export default {
'incomplete-icon': IncompleteIcon,
'success-icon': SuccessIcon,
'launch-icon': LaunchIcon,
'edit-modal': EditModal,
CompanyDetailModal,
},
methods: {
openModal() {
this.isModalOpen = true;
this.modalKey++; // Add this line
},
updateModalState(newVal) {
this.isModalOpen = newVal;
},
onOtherBtnClick() {
this.isModalOpen = false;
this.editModalKey++;
this.isEditModalOpen = true;
},
updateEditModalState(newState) {
this.isEditModalOpen = newState;
},
openEshop() {
window.open(this.item.eshop, '_blank');
this.$emit('open-company-detail', this.item);
},
},
data() {
Expand Down
26 changes: 20 additions & 6 deletions src/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,12 @@ import ItemTile from './components/ItemTile.vue';
import Add16 from '@carbon/icons-vue/es/add/16';
import EditModal from './components/EditModal.vue';
import AboutModal from './components/AboutModal.vue';
import CompanyDetailModal from "@/components/CompanyDetailModal.vue";

export default {
name: 'App',
components: {
CompanyDetailModal,
ItemTile,
HierarchicalMenu,
CvHeader,
Expand All @@ -34,18 +36,19 @@ export default {
searchQuery: '',
searchResults: [],
searchClient: algoliasearch('S27OT8U78J', '995efbd2d821e03836317ed9c20812a3'),
showModal: false,
showEditModal: false,
showAbout: false,
editedItem: null,
editedItemNew: true,
detailModalItem: null,
showDetailModal: false,
};
},
mounted() {
document.title = "Datoun";
// Add resize event listener on component mount
window.addEventListener('resize', this.handleResize);
this.handleResize(); // Call the method on initial load
this.$nextTick(() => {
// console.log(this.items);
});
},
beforeUnmount() {
// Remove resize event listener before component unmount
Expand All @@ -56,11 +59,22 @@ export default {
// Update expandedSideNav based on window width
this.expandedSideNav = window.innerWidth > 768;
},
handleClick(item, refine) {
refine(item.value);
handleEditOpen() {
this.editedItem = {...this.detailModalItem};
this.showDetailModal = false;
this.showEditModal = true;
this.editedItemNew = false;
},
handleCreateNew() {
this.editedItem = null;
this.showEditModal = true;
this.editedItemNew = true;
},
reloadPage() {
location.reload();
},
handleOpenEshop(url) {
window.open(url, '_blank');
}
},
};

0 comments on commit 79765bc

Please sign in to comment.