adm_tueit/TueIT_App
2
0
Fork 0
Code Issues 3 Pull Requests 3 Packages Projects Releases Wiki Activity

replaced client/s with customer/s

Browse Source
This commit is contained in:
Johanna Kuehner
2024-03-04 18:43:19 +01:00
parent 3a79ed12fa
commit 6a4a53ce4b
43 changed files with 182 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
components/ClientSearch.vue
View File

@ -1,114 +0,0 @@
<template>
<section :class="['client-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Client</div>
<pre v-if="!filtered" :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">{{ clientFilter }}</pre>
<input v-if="filtered" v-model="clientFilter" @change="filterConfigItemList()"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
</section>
</template>
<script setup>
import { ref, watch } from 'vue';
import { useStore } from 'vuex';
import { computed } from 'vue';
const store = useStore();
const filtered = computed(() => store.state.assetFiltered);
const filteredTerm = computed(() => store.state.filteredAssetbyClient);
const clientFilter = ref(store.state.filteredAssetbyClient);
const darkMode = ref(true)
// update filtered term
const updateFilterTerm = () => {
clientFilter.value = filteredTerm.value
}
// update the filtered term in the store
const filterConfigItemList = () => {
store.commit('updateAssetFilterbyClient', clientFilter.value);
}
watch(filteredTerm, updateFilterTerm)
</script>
<script>
export default {
name: "ClientSearch",
};
</script>
<style scoped>
.client-search {
display: flex;
align-items: center;
padding: 0.625em 1.875em;
gap: 1.25em;
width: 30.125em;
height: 3.125em;
box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
border-radius: 0.625em;
}
.section-darkmode {
background-color: #2c2c2c;
}
.section-lightmode {
background-color: #fff;
}
.label {
width: 2.5625em;
height: 1.875em;
font-family: "Overpass";
font-style: normal;
font-weight: 400;
font-size: 0.875em;
line-height: 1.875;
letter-spacing: 0.05em;
}
.label-darkmode {
color: #FFFFFF;
}
.label-lightmode {
color: #000;
}
.data {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0 0.625rem;
border-radius: 0.3125rem;
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
letter-spacing: 5%;
font: 400 0.75rem/250% Overpass, sans-serif;
}
.pre-darkmode {
background-color: #212121;
color: #fff;
}
.pre-lightmode {
background-color: #EBEBEB;
color: #000;
}
.input {
border: none;
}
.data-darkmode {
background-color: #212121;
color: #fff;
}
.data-lightmode {
background-color: #EBEBEB;
color: #000;
}
</style>