Skip to content

Commit

Permalink
naming
Browse files Browse the repository at this point in the history
  • Loading branch information
@asmarcz
asmarcz committed Feb 17, 2024
1 parent 41ca832 commit cbc4e43
Show file tree
Hide file tree
Showing 4 changed files with 192 additions and 15 deletions.
177 changes: 177 additions & 0 deletions src/components/CompanyDetailModal.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,177 @@
<template>
<cv-modal ref="CompanyDetailModal" :visible="isOpen" @secondary-click="openEshop">
<!-- 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" />
</h2>
<p class="subtitle bx--tile__subtitle">
<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
ČR.</span>
<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>
</p>
</div>

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

</div>
</template>

<!-- Content of the modal -->
<template v-slot:content>
<div class="modal-content">
<!-- Show comments on company -->
<h4>Poznámky k výrobě</h4>
<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
}} ({{ 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>
<br />

<!-- Show categories -->
<h4>Kategorie</h4>
<cv-list class="list-container">
<cv-list-item v-for="(leaf, index) in leaves" :key="index">{{ leaf }}</cv-list-item>
</cv-list>
<br />

<!-- If there are aliases, show -->
<!-- <template v-if="(item.aliasy != undefined) && (item.aliasy.length > 0)"> -->
<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>
<br />
</template>

</div>
</template>

<!-- Footer of the modal - Buttons -->
<template v-slot:other-button>
<div class="button-content">
<edit-icon />
Upravit
</div>
</template>
<template v-slot:secondary-button>
<div class="button-content">
<launch-icon />
Eshop
</div>
</template>
<template v-slot:primary-button>Zavřít</template>

</cv-modal>
</template>

<script>
import { CvModal, CvList, CvListItem } from '@carbon/vue';
import { getUniqueBradcrumbs } from './KategorieTool.js';
import LaunchIcon from '@carbon/icons-vue/es/launch/16';
import EditIcon from '@carbon/icons-vue/es/edit/16';
import UnknownIcon from '@carbon/icons-vue/es/unknown/16';
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';
export default {
name: 'CompanyDetailModal',
components: {
CvModal,
CvList,
CvListItem,
'launch-icon': LaunchIcon,
'edit-icon': EditIcon,
'unknown-icon': UnknownIcon,
'error-icon': ErrorIcon,
'incomplete-icon': IncompleteIcon,
'success-icon': SuccessIcon,
},
props: {
isOpen: {
type: Boolean,
default: false
},
item: {
type: Object,
default: () => ({})
}
},
methods: {
showModal() {
this.$refs.CompanyDetailModal.show();
},
hideModal() {
this.$refs.CompanyDetailModal.hide();
},
openEshop() {
window.open(this.item.eshop, '_blank');
},
},
computed: {
leaves() {
return getUniqueBradcrumbs(this.item.kategorie0, this.item.kategorie1, this.item.kategorie2);
}
}
};
</script>

<style scoped>
.tile-logo {
height: 35px;
/* height: 50px; */
}
.tile-logo-container {
height: 35px;
flex: 1;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 1rem;
}
.modal-buttons {
display: flex;
justify-content: flex-end;
width: 100%;
}
.lokality {
color: lightgray;
font-size: 1em;
}
</style>
16 changes: 8 additions & 8 deletions src/components/ItemTile.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,16 +47,16 @@
</div>
</div>
</div>
<!-- <my-modal v-if="isModalOpen" :item="item" :key="modalKey" :is-open="isModalOpen"
<!-- <company-detail-modal v-if="isModalOpen" :item="item" :key="modalKey" :is-open="isModalOpen"
@update:isOpen="updateModalState" @other-btn-click="onOtherBtnClick" @secondary-click="openEshop">
</my-modal>
</company-detail-modal>
<edit-modal v-if="isEditModalOpen" :editedItem="item" :is-open="isEditModalOpen" :key="editModalKey"
@update:isOpen="updateEditModalState" :newCompany="false"></edit-modal> -->
<!-- <my-modal v-model:isOpen="isModalOpen" :item="item" :key="modalKey" @update:isOpen="updateModalState"
<!-- <company-detail-modal v-model:isOpen="isModalOpen" :item="item" :key="modalKey" @update:isOpen="updateModalState"
@other-btn-click="onOtherBtnClick" @secondary-click="openEshop">
</my-modal> -->
<my-modal v-model:visible="isModalOpen" :item="item" @other-btn-click="onOtherBtnClick">
</my-modal>
</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>
Expand All @@ -70,7 +70,7 @@ 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 MyModal from './MyModal.vue';
import CompanyDetailModal from './CompanyDetailModal.vue';
import EditModal from './EditModal.vue'; // Make sure to create this component
import { getLeaves, getUniqueBradcrumbs } from './KategorieTool.js';
Expand Down Expand Up @@ -98,7 +98,7 @@ export default {
'success-icon': SuccessIcon,
'launch-icon': LaunchIcon,
'edit-modal': EditModal,
MyModal,
CompanyDetailModal,
},
methods: {
openModal() {
Expand Down
10 changes: 5 additions & 5 deletions src/components/MyModal.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<cv-modal ref="myModal" :visible="isOpen" @secondary-click="openEshop">
<cv-modal ref="CompanyDetailModal" :visible="isOpen" @secondary-click="openEshop">
<!-- Header of the modal -->
<template v-slot:title>
<div class="modal-title-container">
Expand Down Expand Up @@ -108,7 +108,7 @@ import SuccessIcon from '@carbon/icons-vue/es/checkmark--filled/16';
export default {
name: 'MyModal',
name: 'CompanyDetailModal',
components: {
CvModal,
CvList,
Expand All @@ -132,10 +132,10 @@ export default {
},
methods: {
showModal() {
this.$refs.myModal.show();
this.$refs.CompanyDetailModal.show();
},
hideModal() {
this.$refs.myModal.hide();
this.$refs.CompanyDetailModal.hide();
},
openEshop() {
window.open(this.item.eshop, '_blank');
Expand Down Expand Up @@ -174,4 +174,4 @@ export default {
color: lightgray;
font-size: 1em;
}
</style>
</style>
4 changes: 2 additions & 2 deletions src/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { CvHeader, CvHeaderMenuButton, CvSkipToContent, CvHeaderName, CvSearch,
import { AisInstantSearch, AisHits, AisHierarchicalMenu, AisConfigure, AisStateResults } from 'vue-instantsearch/vue3/es';
import algoliasearch from 'algoliasearch';
import HierarchicalMenu from './components/HierarchicalMenu.vue';
import ItemTile from './components/ItemTIle.vue';
import ItemTile from './components/ItemTile.vue';
import Add16 from '@carbon/icons-vue/es/add/16';
import EditModal from './components/EditModal.vue';

Expand Down Expand Up @@ -60,4 +60,4 @@ export default {
location.reload();
},
},
};
};

0 comments on commit cbc4e43

Please sign in to comment.