-
-
-
-
+
+
+
+
-
+
+
{{ book.name }}
-
+
{{ book.description }}
+
+
+ ↑
+ ↓
+
+
+
+ swap
+
+
+
@@ -33,10 +36,10 @@
-
+
{{ book.name }}
-
+
{{ book.description }}
@@ -44,14 +47,13 @@
- ↑
- ↓
+ ↑
+ ↓
-
- swap
+
+ swap
-
@@ -118,7 +120,9 @@ export default {
showAlp: true,
showMan: true,
md: 12,
- inputValue: ""
+ inputValue: "",
+ submitManual: false,
+ submitText: "Edit"
}
},
computed: {
@@ -200,6 +204,7 @@ export default {
this.showNtO = true
this.showOtN = true
this.showMan = true
+ this.submitManual = false
this.md = 12
},
@@ -210,6 +215,7 @@ export default {
this.showAlp= true
this.showOtN = true
this.showMan = true
+ this.submitManual = false
this.md = 12
},
sortOldest: function(){
@@ -219,16 +225,22 @@ export default {
this.showAlp= true
this.showNtO = true
this.showMan = true
+ this.submitManual = false
this.md = 12
},
enableSortManually: function(){
+ console.log(1)
+ this.synchroniseLocalToDatabase();
+ console.log(2)
+ if (localStorage.getItem('cookbooks') ){
+ this.cookbooks = JSON.parse(localStorage.getItem('cookbooks'))
+ }
this.showOtN= true
this.showAlp= true
this.showNtO = true
this.showMan = false
- this.md = 8
this.dropdown_text = "Sort by: manually"
-
+
},
swapUpBooks: function(index){
const tempArray = this.cookbooks
@@ -250,7 +262,6 @@ export default {
const position = parseInt(this.inputValue)
this.inputValue = ""
if (!(/^\d+$/.test(position)) || position >= this.cookbooks.length || position < 0){
- console.log("catch")
this.inputValue = ""
} else {
const tempArray = this.cookbooks
@@ -261,6 +272,32 @@ export default {
this.cookbooks = tempArray
}
+ }, submitManualChanging: function(){
+ if (!this.submitManual){
+ this.submitText = "Submit"
+ this.submitManual = true
+ this.md = 8
+ } else {
+ localStorage.setItem('cookbooks',JSON.stringify(this.cookbooks))
+ this.submitText = "Edit"
+ this.submitManual = false
+ this.md = 12
+ }
+ }, synchroniseLocalToDatabase: function(){
+ const localStorageData = localStorage.getItem('cookbooks');
+ const localStorageArray = JSON.parse(localStorageData) || [];
+ const updatedLocalStorageArray = localStorageArray.filter(localStorageElement => {
+ // Assuming there's a unique identifier in your objects, replace 'id' with the actual property
+ const isElementInTargetArray = this.cookbooks.some(targetElement => targetElement.id === localStorageElement.id);
+ return isElementInTargetArray;
+ });
+ this.cookbooks.forEach(targetElement => {
+ const isNewElement = !updatedLocalStorageArray.some(localStorageElement => localStorageElement.id === targetElement.id);
+ if (isNewElement) {
+ updatedLocalStorageArray.push(targetElement);
+ }
+ });
+ localStorage.setItem('cookbooks', JSON.stringify(updatedLocalStorageArray));
}
},
directives: {
From 45c14f6a12b04c2afa8819adef4571be7fe5c3cf Mon Sep 17 00:00:00 2001
From: Mahmoud <“aljouhar@rptu.de”>
Date: Sun, 17 Dec 2023 16:35:46 +0100
Subject: [PATCH 3/6] automatic ordering through api
---
cookbook/views/api.py | 12 ++++-
vue/src/apps/CookbookView/CookbookView.vue | 63 ++++++++--------------
vue/src/utils/openapi/api.ts | 7 +++
3 files changed, 39 insertions(+), 43 deletions(-)
diff --git a/cookbook/views/api.py b/cookbook/views/api.py
index d97d5f73..440a899c 100644
--- a/cookbook/views/api.py
+++ b/cookbook/views/api.py
@@ -651,15 +651,23 @@ class FoodViewSet(viewsets.ModelViewSet, TreeMixin):
content = {'error': True, 'msg': e.args[0]}
return Response(content, status=status.HTTP_403_FORBIDDEN)
-
+import json
class RecipeBookViewSet(viewsets.ModelViewSet, StandardFilterMixin):
queryset = RecipeBook.objects
serializer_class = RecipeBookSerializer
permission_classes = [(CustomIsOwner | CustomIsShared) & CustomTokenHasReadWriteScope]
def get_queryset(self):
+ order_field = self.request.GET.get('order_field')
+ order_direction = self.request.GET.get('order_direction')
+
+ if not order_field:
+ order_field = 'id'
+
+ ordering = f"{'' if order_direction == 'asc' else '-'}{order_field}"
+
self.queryset = self.queryset.filter(Q(created_by=self.request.user) | Q(shared=self.request.user)).filter(
- space=self.request.space).distinct()
+ space=self.request.space).distinct().order_by(ordering)
return super().get_queryset()
diff --git a/vue/src/apps/CookbookView/CookbookView.vue b/vue/src/apps/CookbookView/CookbookView.vue
index bb63db82..1b2560dc 100644
--- a/vue/src/apps/CookbookView/CookbookView.vue
+++ b/vue/src/apps/CookbookView/CookbookView.vue
@@ -11,11 +11,11 @@
-
- oldest to newest
- newest to oldest
- alphabetical order
- manually
+
+ oldest to newest
+ newest to oldest
+ alphabetical order
+ manually
@@ -114,10 +114,8 @@ export default {
current_book: undefined,
loading: false,
search: "",
- dropdown_text: "Sort by: oldest to newest",
- showOtN: false,
- showNtO: true,
- showAlp: true,
+ activeSortField : 'id',
+ activeSortDirection: 'asc',
showMan: true,
md: 12,
inputValue: "",
@@ -139,7 +137,7 @@ export default {
methods: {
refreshData: function () {
let apiClient = new ApiApiFactory()
-
+
apiClient.listRecipeBooks().then((result) => {
this.cookbooks = result.data
})
@@ -197,41 +195,24 @@ export default {
}
})
},
- sortAlphabetical: function(){
- this.dropdown_text = "Sort by: alphabetical order"
- this.cookbooks = this.cookbooks.sort((a, b) => a.name.localeCompare(b.name))
- this.showAlp= false
- this.showNtO = true
- this.showOtN = true
- this.showMan = true
- this.submitManual = false
- this.md = 12
-
+ orderBy: function(order_field,order_direction){
+ let apiClient = new ApiApiFactory()
+ const options = {
+ order_field: order_field,
+ order_direction: order_direction
+ }
+ this.activeSortField = order_field
+ this.activeSortDirection = order_direction
+ apiClient.listRecipeBooks(options).then((result) => {
+ this.cookbooks = result.data
+ })
},
- sortNewest: function(){
- this.dropdown_text = "Sort by: newest to oldest"
- this.cookbooks = this.cookbooks.sort((a, b) => b.id - a.id);
- this.showNtO = false
- this.showAlp= true
- this.showOtN = true
- this.showMan = true
- this.submitManual = false
- this.md = 12
- },
- sortOldest: function(){
- this.dropdown_text = "Sort by: oldest to newest"
- this.cookbooks = this.cookbooks.sort((a, b) => a.id - b.id)
- this.showOtN= false
- this.showAlp= true
- this.showNtO = true
- this.showMan = true
- this.submitManual = false
- this.md = 12
+ isActiveSort: function(field, direction) {
+ // Check if the current item is the active sorting option
+ return this.activeSortField === field && this.activeSortDirection === direction;
},
enableSortManually: function(){
- console.log(1)
this.synchroniseLocalToDatabase();
- console.log(2)
if (localStorage.getItem('cookbooks') ){
this.cookbooks = JSON.parse(localStorage.getItem('cookbooks'))
}
diff --git a/vue/src/utils/openapi/api.ts b/vue/src/utils/openapi/api.ts
index 064297c4..b08ea251 100644
--- a/vue/src/utils/openapi/api.ts
+++ b/vue/src/utils/openapi/api.ts
@@ -8985,6 +8985,13 @@ export const ApiApiAxiosParamCreator = function (configuration?: Configuration)
const localVarQueryParameter = {} as any;
+ if (options.order_field !== undefined) {
+ localVarQueryParameter['order_field'] = options.order_field;
+ }
+
+ if (options.order_direction!== undefined) {
+ localVarQueryParameter['order_direction'] = options.order_direction;
+ }
setSearchParams(localVarUrlObj, localVarQueryParameter, options.query);
let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
From 42839a5886c3a4e9274122898ab88b3ac4ea5343 Mon Sep 17 00:00:00 2001
From: Mahmoud <“aljouhar@rptu.de”>
Date: Mon, 25 Dec 2023 19:44:23 +0100
Subject: [PATCH 4/6] Manual order: you can now change the order by dragging
and dropping
---
cookbook/models.py | 2 +
cookbook/serializer.py | 2 +-
vue/src/apps/CookbookView/CookbookView.vue | 207 +++++++++------------
vue/src/utils/openapi/api.ts | 67 ++++++-
4 files changed, 157 insertions(+), 121 deletions(-)
diff --git a/cookbook/models.py b/cookbook/models.py
index c40bb41f..2c9129a7 100644
--- a/cookbook/models.py
+++ b/cookbook/models.py
@@ -934,6 +934,8 @@ class RecipeBook(ExportModelOperationsMixin('book'), models.Model, PermissionMod
shared = models.ManyToManyField(User, blank=True, related_name='shared_with')
created_by = models.ForeignKey(User, on_delete=models.CASCADE)
filter = models.ForeignKey('cookbook.CustomFilter', null=True, blank=True, on_delete=models.SET_NULL)
+ order = models.IntegerField(default=0)
+
space = models.ForeignKey(Space, on_delete=models.CASCADE)
objects = ScopedManager(space='space')
diff --git a/cookbook/serializer.py b/cookbook/serializer.py
index ff4e2dfc..8deb6eb5 100644
--- a/cookbook/serializer.py
+++ b/cookbook/serializer.py
@@ -950,7 +950,7 @@ class RecipeBookSerializer(SpacedModelSerializer, WritableNestedModelSerializer)
class Meta:
model = RecipeBook
- fields = ('id', 'name', 'description', 'shared', 'created_by', 'filter')
+ fields = ('id', 'name', 'description', 'shared', 'created_by', 'filter', 'order')
read_only_fields = ('created_by',)
diff --git a/vue/src/apps/CookbookView/CookbookView.vue b/vue/src/apps/CookbookView/CookbookView.vue
index 1b2560dc..9ad465d5 100644
--- a/vue/src/apps/CookbookView/CookbookView.vue
+++ b/vue/src/apps/CookbookView/CookbookView.vue
@@ -15,10 +15,10 @@
oldest to newest
newest to oldest
alphabetical order
- manually
+ manually
-
+
{{submitText}}
@@ -27,54 +27,74 @@