Kaydet (Commit) 1fd144f3 authored tarafından Emincan Özcan's avatar Emincan Özcan

bucket

üst 089e395b
......@@ -2,7 +2,7 @@
<div v-if="loading">Loading</div>
<div v-else class="bg-gray-900 text-gray-100 min-h-screen flex">
<Sidebar
class="sticky top-0 left-0 h-screen w-64 bg-gray-700 bg-opacity-25 flex-shrink-0"
class="sticky top-0 left-0 h-screen w-96 bg-gray-700 bg-opacity-25 flex-shrink-0"
/>
<router-view class="flex-1 bg-gray-900" />
</div>
......
......@@ -20,6 +20,7 @@
<span class="font-medium mr-4"> {{ pardusApp.name }}</span>
<button
class="bg-pardus-yellow px-2 py-1 font-medium rounded-lg shadow-lg text-gray-900"
@click="addToBucket(pardusApp.id)"
>
Sepete Ekle
</button>
......@@ -29,6 +30,7 @@
</template>
<script>
import store from "../global-state/store";
export default {
name: "AlternativeAppSuggestionRow",
props: {
......@@ -42,7 +44,10 @@ export default {
},
},
setup() {
return {};
const { addToBucket } = store;
return {
addToBucket,
};
},
};
</script>
......
<template>
<div class="px-4 border-t-2 border-gray-600 py-6">
<h2 class="mb-8 text-xl font-medium">Uygulama Sepeti</h2>
<div class="relative">
<div class="flex-1">
<div class="relative mr-2" v-for="app in apps" :key="app.id">
<div class="flex items-center py-2 px-2 my-2 bg-gray-700 rounded-md">
<div>
<img class="h-8 w-8 mr-4" :src="app.image_url" />
</div>
<h4 class="font-bold text-sm text-gray-300">{{ app.name }}</h4>
</div>
<button
class="absolute right-0 top-0 bg-red-500 text-white top-2 -right-2 px-2 py-2 rounded-md"
@click="removeFromBucket(app.id)"
>
X
</button>
</div>
</div>
</div>
</div>
</template>
<script>
import store from "../global-state/store";
import { computed } from "vue";
export default {
name: "Bucket",
setup() {
const apps = computed(() => {
return store.bucket.value.map((appId) => {
return store.pardusApps.value.find((item) => item.id === appId);
});
});
const removeFromBucket = store.removeFromBucket;
return {
apps,
bucket: store.bucket,
removeFromBucket,
};
},
};
</script>
<style scoped></style>
<template>
<div>
<h1 class="text-2xl text-pardus-yellow font-semibold text-center py-6">
Pardus Kataliz
</h1>
<div class="flex flex-col space-y-2 mt-2 px-4">
<router-link
class="px-4 block py-3 text-gray-200 font-medium w-full rounded-lg"
active-class="bg-gray-700 text-pardus-yellow shadow-lg"
to="/"
>
<span class="font-medium">Alternatif Uygulamalar</span>
</router-link>
<router-link
to="/app-packages"
class="px-4 block py-3 text-gray-200 font-medium w-full rounded-lg"
active-class="bg-gray-700 text-pardus-yellow shadow-lg"
>
<span class="font-medium">Uygulama Paketleri</span>
</router-link>
<div class="h-screen">
<div class="h-1/2">
<h1 class="text-2xl text-pardus-yellow font-semibold text-center py-6">
Pardus Kataliz
</h1>
<div class="flex flex-col space-y-2 mt-2 px-4">
<router-link
class="px-4 block py-3 text-gray-200 font-medium w-full rounded-lg"
active-class="bg-gray-700 text-pardus-yellow shadow-lg"
to="/"
>
<span class="font-medium">Alternatif Uygulamalar</span>
</router-link>
<router-link
to="/app-packages"
class="px-4 block py-3 text-gray-200 font-medium w-full rounded-lg"
active-class="bg-gray-700 text-pardus-yellow shadow-lg"
>
<span class="font-medium">Uygulama Paketleri</span>
</router-link>
</div>
</div>
<Bucket class="h-1/2 overflow-y-auto" />
</div>
</template>
<script>
import Bucket from "./Bucket";
export default {
name: "Sidebar",
components: { Bucket },
};
</script>
......
......@@ -19,10 +19,26 @@ async function fetchData() {
}
}
const bucket = ref([]);
function addToBucket(pardusAppId) {
if (bucket.value.find((item) => item === pardusAppId)) {
return;
}
bucket.value.push(pardusAppId);
}
function removeFromBucket(pardusAppId) {
bucket.value = bucket.value.filter((item) => item !== pardusAppId);
}
export default {
loading,
pardusApps,
nonPardusApps,
appPackages,
fetchData,
bucket,
addToBucket,
removeFromBucket,
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment