bartosz/mleczarnia-kuzma-zamowienia-ui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Some changes

Browse Source
This commit is contained in:
Patryk Binkowski
2024-07-01 17:29:57 +02:00
parent 15271a873b
commit 673eb10b7b
7 changed files with 53 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/MainForm.vue
View File

@@ -88,8 +88,8 @@ function setConfirmationModal(event : Event) {
v-bind:dark = "isDarkTheme"/>
</div>
</div>
<button class="button is-info mt-5">Submit</button>
<button class="button is-info mt-5 ml-3" @click="setConfirmationModal">Potwierdź</button>
<button class="button is-info mt-5">Zapisz</button>
<button class="button is-success mt-5 ml-3" @click="setConfirmationModal">Potwierdź</button>
</div>
</div>
<div v-for="category in categories" :key="category.Kod">
@@ -105,6 +105,7 @@ function setConfirmationModal(event : Event) {
type="text"
placeholder="Kwota"
v-model="product.Twr_Cena"
v-bind:class="{ 'is-success has-background-light': product.Quantity != undefined && product.Quantity as unknown as string != '' }"
/>
</div>
</div>
@@ -115,20 +116,21 @@ function setConfirmationModal(event : Event) {
type="text"
placeholder="Kwota"
v-model="product.Twr_CenaZ"
v-bind:class="{ 'is-success has-background-light': product.Quantity != undefined && product.Quantity as unknown as string != '' }"
/>
</div>
</div>
<div class="column">
<div class="field has-addons">
<p class="control">
<span class="select is-small">
<span class="select is-small" v-bind:class="{ 'is-success has-background-light': product.Quantity != undefined }">
<select v-model="product.ChosenOption" readonly>
<option v-for="option in product.Options" :key="option">{{ option }}</option>
</select>
</span>
</p>
<p class="control is-expanded">
<input class="input is-small" type="text" placeholder="Ilość" v-model="product.Quantity">
<input class="input is-small" type="text" placeholder="Ilość" v-model="product.Quantity" v-bind:class="{ 'is-success': product.Quantity != undefined }">
</p>
</div>
</div>
@@ -139,10 +141,10 @@ function setConfirmationModal(event : Event) {
</div>
<div class="columns mt-1 is-variable is-mobile">
<div class = "column is-6">
<button class="button is-info is-fullwidth is-large">Submit</button>
<button class="button is-info is-fullwidth is-large">Zapisz</button>
</div>
<div class = "is-large column is-6 ml-3">
<button class="button is-info is-fullwidth is-large" @click="showConfirmationModal = true">Potwierdź</button>
<button class="button is-success is-fullwidth is-large" @click="showConfirmationModal = true">Potwierdź</button>
</div>
</div>
</form>

9
src/components/NavBar.vue
View File

@@ -6,6 +6,7 @@ import { useOrdersStore } from '@/stores/orders.store'
import { useContractorsStore } from '@/stores/contractors.store'
import { useCategoriesStore } from '@/stores/categories.store'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/stores/user.store'
const activator = ref(false);
@@ -13,6 +14,9 @@ const siteControlStore = useSiteControlStore();
const ordersStore = useOrdersStore();
const contractorsStore = useContractorsStore();
const categoriesStore = useCategoriesStore();
const userStore = useUserStore();
const { username } = storeToRefs(userStore);
function makeBurger() {
@@ -83,9 +87,12 @@ function newOrder() {
<button class="button is-info" @click="newOrder">
Nowe Zamówienie
</button>
<button class="button is-light" @click="routeLogin">
<button class="button is-light" @click="routeLogin" v-if="username == undefined">
Log in
</button>
<button class="button is-light is-static" @click="routeLogin" v-if="username != undefined">
{{ username }}
</button>
</div>
</div>
</div>

5
src/components/OrdersSelector.vue
View File

@@ -11,6 +11,7 @@ const searchOrderDate = ref<Date>();
const isOutOfBuffer = ref<boolean>(false);
const isInBufor = ref<boolean>(false);
const { orders } = storeToRefs(ordersStore);
const areOrdersLoading = ref<boolean>(false);
watch(isInBufor, (val) => {
if(val && val == isOutOfBuffer.value) {
@@ -34,11 +35,13 @@ function viewOrder(uuid : string) {
async function fetchOrders(event : Event) {
event.preventDefault();
areOrdersLoading.value = true;
if(isInBufor.value) {
orders.value = await ordersStore.fetchOrdersInBuffer();
} else if (isOutOfBuffer.value) {
orders.value = await ordersStore.fetchOrdersOutOfBuffer();
}
areOrdersLoading.value = false;
}
</script>
@@ -70,7 +73,7 @@ async function fetchOrders(event : Event) {
</label>
</div>
</div>
<button class="button is-primary is-small is-expanded" @click="fetchOrders">Pobierz zamówienia</button>
<button class="button is-primary is-small is-expanded" @click="fetchOrders" :class="{ 'is-loading': areOrdersLoading }">Pobierz zamówienia</button>
</div>
</form>
<div class="box">

13
src/main.ts
View File

@@ -10,13 +10,14 @@ import ConfirmedForm from '@/components/ConfirmedForm.vue'
import LoadingComponent from '@/components/LoadingComponent.vue'
import axios from 'axios'
import LoginModal from '@/components/LoginModal.vue'
import { createPinia } from 'pinia'
import { createPinia, storeToRefs } from 'pinia'
import VueCookies from 'vue3-cookies'
import { router } from '@/router/router'
import { useSiteControlStore } from '@/stores/siteControl.store'
import { useCategoriesStore } from '@/stores/categories.store'
import { useOrdersStore } from '@/stores/orders.store'
import { useContractorsStore } from '@/stores/contractors.store'
import { useUserStore } from '@/stores/user.store'
const app = createApp(App);
const pinia = createPinia();
@@ -34,6 +35,16 @@ export const axiosInstance = axios.create({
withCredentials: true
});
axiosInstance.interceptors.response.use( (response) => {
return response;
}, (error) => {
if (error.response.status == 401) {
const userStore = useUserStore();
storeToRefs(userStore).username.value = undefined;
router.push('/login');
}
});
app.component('VueDatePicker', VueDatePicker);
app.component('ConfirmationModal', ConfirmationModal);
app.component('LoginModal', LoginModal);

9
src/stores/user.store.ts Normal file
View File

@@ -0,0 +1,9 @@
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useUserStore = defineStore('user', () => {
const username = ref<string>();
return {username};
})

4
src/views/LoginView.vue
View File

@@ -3,6 +3,8 @@ import { Form, Field } from 'vee-validate';
import * as Yup from 'yup';
import { axiosInstance } from '@/main'
import { router } from '@/router/router'
import { useUserStore } from '@/stores/user.store'
import { storeToRefs } from 'pinia'
const schema = Yup.object().shape({
username: Yup.string().required('Nazwa użytkownika jest wymagana'),
@@ -25,6 +27,8 @@ async function onSubmit(values : any, { setErrors } : any) {
}
});
if(body != undefined && body.status == 200) {
const userStore = useUserStore();
localStorage.setItem("username", username);
await router.push('/');
}

10
src/views/MainView.vue
View File

@@ -24,22 +24,28 @@ import { storeToRefs } from 'pinia'
import { useCategoriesStore } from '@/stores/categories.store'
import { useOrdersStore } from '@/stores/orders.store'
import { useSiteControlStore } from '@/stores/siteControl.store'
import { useUserStore } from '@/stores/user.store'
const contractorsStore = useContractorsStore();
const categoriesStore = useCategoriesStore();
const ordersStore = useOrdersStore();
const siteControlStore = useSiteControlStore();
const userStore = useUserStore();
const contractors = storeToRefs(contractorsStore).contractors;
const contractor = storeToRefs(contractorsStore).contractor;
const categories = storeToRefs(categoriesStore).categories;
const { uuid, order } = storeToRefs(ordersStore);
const { username } = storeToRefs(userStore);
const { isForm, isOrders, showConfirmationModal, isLoading } = storeToRefs(siteControlStore);
async function fetchData() {
await categoriesStore.fetchCategories();
await contractorsStore.fetchContractors();
const usernameString = localStorage.getItem("username");
if(usernameString != null) {
username.value = usernameString;
}
isLoading.value = false;
}