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]  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 c40bb41f2..2c9129a74 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 ff4e2dfc8..8deb6eb59 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 1b2560dc0..9ad465d53 100644
--- a/vue/src/apps/CookbookView/CookbookView.vue
+++ b/vue/src/apps/CookbookView/CookbookView.vue
@@ -15,10 +15,10 @@
                                         <b-dropdown-item @click = "orderBy('id','asc')"   :disabled= "isActiveSort('id','asc')">oldest to newest</b-dropdown-item>
                                         <b-dropdown-item @click = "orderBy('id','desc')"  :disabled= "isActiveSort('id','desc')">newest to oldest</b-dropdown-item>
                                         <b-dropdown-item @click = "orderBy('name','asc')" :disabled= "isActiveSort('name','asc')">alphabetical order</b-dropdown-item>
-                                        <b-dropdown-item @click = " enableSortManually"   :disabled= "isActiveSort('name','asc')" >manually</b-dropdown-item>
+                                        <b-dropdown-item @click = "orderBy('order','asc')"   :disabled= "isActiveSort('order','asc')" >manually</b-dropdown-item>
                                     </b-dropdown>
                                 </b-input-group-append>
-                                <b-button class= "ml-2" variant="primary" v-show="!showMan" @click="submitManualChanging">
+                                <b-button class= "ml-2" variant="primary" v-if="isActiveSort('order','asc')" @click="handleEditButton" >
                                     {{submitText}}
                                 </b-button>
                             </b-input-group>
@@ -27,54 +27,74 @@
                 </div>
             </div>
         </div>
-        <div style="padding-bottom: 55px">
-            <div class="mb-3" v-for="(book, index) in filteredBooks" :key="book.id">
-            <div class="row">
-                <div class="col-md-12"> 
-                    <b-card class="d-flex flex-column" v-hover  > 
-                        <b-row no-gutters style="height: inherit" class="d-flex align-items-center">
-                            <b-col no-gutters :md="md" style="height: inherit">
-                                <b-card-body class="m-0 py-0" style="height: inherit">
-                                    <b-card-text class="h-100 my-0 d-flex flex-column" style="text-overflow: ellipsis">
-                                        <b-button  v-on:click="openBook(book.id)"  style="color: #000; background-color: white" variant="primary">                                        
-                                            <h5 class="m-0 mt-1 text-truncate" >
-                                            {{ book.name }} <span class="float-right"><i class="fa fa-book"></i></span>
-                                            </h5></b-button>
-                                        <div class="m-0 text-truncate">{{ book.description }}</div>
-                                        <div class="mt-auto mb-1 d-flex flex-row justify-content-end"></div>
-                                    </b-card-text>
-                                </b-card-body>
-                            </b-col>
-                            <b-col>
-                                <b-button-group vertical md = "1" >
-                                    <b-button  v-if="!showMan && index != 0 && submitManual "  variant="primary" style="border-radius:28px!important;"  @click= "swapUpBooks(index)">&uarr;</b-button>
-                                    <b-button  v-if="!showMan && index != cookbooks.length-1 && submitManual"  variant="primary" style="border-radius:28px!important;"  @click= "swapDownBooks(index)">&darr;</b-button>
-                                </b-button-group>
-                                 <b-button-group vertical md = "1" class="ml-2">
-                                    <input v-model.lazy="inputValue" v-if="!showMan && submitManual" placeholder="enter swap position">                      
-                                    <b-button v-if="!showMan && submitManual" variant="primary"  style="border-radius:28px!important;"  @click= "swapWithPos(index)">swap</b-button>
-                                </b-button-group>
-                            </b-col>
-                        </b-row>
-                    </b-card>
+        <div v-if="!isActiveSort('order','asc') || !manSubmitted">
+            <div style="padding-bottom: 55px">
+                <div class="mb-3" v-for="(book) in filteredBooks" :key="book.id">
+                <div class="row">
+                    <div class="col-md-12"> 
+                        <b-card class="d-flex flex-column" v-hover  > 
+                            <b-row no-gutters style="height: inherit" class="d-flex align-items-center">
+                                <b-col no-gutters style="height: inherit">
+                                    <b-card-body class="m-0 py-0" style="height: inherit">
+                                        <b-card-text class="h-100 my-0 d-flex flex-column" style="text-overflow: ellipsis">
+                                            <b-button  v-on:click="openBook(book.id)"  style="color: #000; background-color: white" variant="primary">                                        
+                                                <h5 class="m-0 mt-1 text-truncate" >
+                                                {{ book.name }} <span class="float-right"><i class="fa fa-book"></i></span>
+                                                </h5></b-button>
+                                            <div class="m-0 text-truncate">{{ book.description }}</div>
+                                            <div class="mt-auto mb-1 d-flex flex-row justify-content-end"></div>
+                                        </b-card-text>
+                                    </b-card-body>
+                                </b-col>
+                            </b-row>
+                        </b-card>
+                    </div>
+                </div>
+
+                <loading-spinner v-if="current_book === book.id && loading"></loading-spinner>
+                <transition name="slide-fade">
+                    <cookbook-slider
+                        :recipes="recipes"
+                        :book="book"
+                        :key="`slider_${book.id}`"
+                        v-if="current_book === book.id && !loading"
+                        v-on:refresh="refreshData"
+                        @reload="openBook(current_book, true)"
+                    ></cookbook-slider>
+                </transition>
+
                 </div>
             </div>
-
-            <loading-spinner v-if="current_book === book.id && loading"></loading-spinner>
-            <transition name="slide-fade">
-                <cookbook-slider
-                    :recipes="recipes"
-                    :book="book"
-                    :key="`slider_${book.id}`"
-                    v-if="current_book === book.id && !loading"
-                    v-on:refresh="refreshData"
-                    @reload="openBook(current_book, true)"
-                ></cookbook-slider>
-            </transition>
-
+        </div>    
+        <div v-else>
+         <draggable 
+         @change="updateManualSorting"
+         :list="cookbooks" ghost-class="ghost">     
+            <b-card no-body class="mt-1 list-group-item p-2"
+                    style="cursor: move"
+                    v-for=" (book,index) in filteredBooks"
+                    v-hover
+                    :key="book.id">
+                <b-card-header class="p-2 border-0">
+                    <div class="row">
+                        <div class="col-2">
+                            <button type="button"
+                                    class="btn btn-lg shadow-none"><i
+                                class="fas fa-arrows-alt-v"></i></button>
+                        </div>
+                        <div class="col-10">
+                            <h5 class="mt-1 mb-1">
+                                <b-badge class="float-left text-white mr-2">
+                                    #{{ index + 1 }}
+                                </b-badge>
+                                {{ book.name }}
+                            </h5>
+                        </div>
+                    </div>
+                </b-card-header>
+            </b-card>
+        </draggable>
         </div>
-        </div>
-
 
         <bottom-navigation-bar active-view="view_books">
             <template #custom_create_functions>
@@ -92,7 +112,7 @@
 <script>
 import Vue from "vue"
 import { BootstrapVue } from "bootstrap-vue"
-
+import draggable from "vuedraggable"
 import "bootstrap-vue/dist/bootstrap-vue.css"
 import { ApiApiFactory } from "@/utils/openapi/api"
 import CookbookSlider from "@/components/CookbookSlider"
@@ -105,7 +125,7 @@ Vue.use(BootstrapVue)
 export default {
     name: "CookbookView",
     mixins: [ApiMixin],
-    components: { LoadingSpinner, CookbookSlider, BottomNavigationBar },
+    components: { LoadingSpinner, CookbookSlider, BottomNavigationBar, draggable },
     data() {
         return {
             cookbooks: [],
@@ -115,11 +135,9 @@ export default {
             loading: false,
             search: "",
             activeSortField : 'id',
-            activeSortDirection: 'asc',
-            showMan: true,
-            md: 12,
+            activeSortDirection: 'desc',
             inputValue: "",
-            submitManual: false,
+            manSubmitted : false,
             submitText: "Edit"
         }
     },
@@ -211,74 +229,27 @@ export default {
         // Check if the current item is the active sorting option
         return this.activeSortField === field && this.activeSortDirection === direction;
         },
-        enableSortManually: function(){
-            this.synchroniseLocalToDatabase();
-            if (localStorage.getItem('cookbooks') ){
-                this.cookbooks =  JSON.parse(localStorage.getItem('cookbooks'))
-            }
-            this.showOtN=  true
-            this.showAlp= true
-            this.showNtO = true
-            this.showMan =  false
-            this.dropdown_text = "Sort by: manually"
-            
-        },
-        swapUpBooks: function(index){
-            const tempArray = this.cookbooks
-            const temp = tempArray[index - 1]
-            tempArray[index-1] = tempArray[index]
-            tempArray[index] = temp
-            this.cookbooks = []
-            this.cookbooks = tempArray
-        },
-        swapDownBooks: function(index){
-            const tempArray = this.cookbooks
-            const temp = tempArray[index + 1]
-            tempArray[index+1] = tempArray[index]
-            tempArray[index] = temp
-            this.cookbooks = []
-            this.cookbooks = tempArray
-        },
-        swapWithPos: function(index){
-            const position =  parseInt(this.inputValue)
-            this.inputValue = ""
-            if (!(/^\d+$/.test(position)) || position >= this.cookbooks.length || position < 0){
-                    this.inputValue = ""
+        handleEditButton: function(){
+            if (!this.manSubmitted){
+                this.submitText = "Back"
+                this.manSubmitted = true
             } else {
-                const tempArray = this.cookbooks
-                const temp = tempArray[position]
-                tempArray[position] = tempArray[index]
-                tempArray[index] = temp
-                this.cookbooks = []
-                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
+                this.manSubmitted = false
             }
-        }, 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));
+        },
+        updateManualSorting: function(){
+                let old_order = Object.assign({}, this.cookbooks);
+                let promises = []
+                this.cookbooks.forEach((element, index) => {
+                    let apiClient = new ApiApiFactory()
+                    promises.push(apiClient.partialUpdateManualOrderBooks(element.id, {order: index}))
+                })
+                return Promise.all(promises).then(() => {
+                }).catch((err) => {
+                    this.cookbooks = old_order
+                    StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
+                })
         }
     }, 
     directives: {
diff --git a/vue/src/utils/openapi/api.ts b/vue/src/utils/openapi/api.ts
index b08ea2510..a0fae38bc 100644
--- a/vue/src/utils/openapi/api.ts
+++ b/vue/src/utils/openapi/api.ts
@@ -10032,6 +10032,40 @@ export const ApiApiAxiosParamCreator = function (configuration?: Configuration)
                 options: localVarRequestOptions,
             };
         },
+        /**
+         * 
+         * @param {string} id A unique integer value identifying the book.
+         * @param {RecipeBook} [recipeBook] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        partialUpdateManualOrderBooks: async (id: string, recipeBook?: RecipeBook , options: any = {}): Promise<RequestArgs> => {
+            const localVarPath = `/api/recipe-book/{id}/`
+                .replace(`{${"id"}}`, encodeURIComponent(String(id)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'PATCH', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter, options.query);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(recipeBook , localVarRequestOptions, configuration)
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
         /**
          * 
          * @param {string} id A unique integer value identifying this access token.
@@ -16172,6 +16206,17 @@ export const ApiApiFp = function(configuration?: Configuration) {
             const localVarAxiosArgs = await localVarAxiosParamCreator.moveKeyword(id, parent, keyword, options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
+        /**
+         * 
+         * @param {string} id A unique integer value identifying this supermarket category relation.
+         * @param {RecipeBook} [recipeBook] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async partialUpdateManualOrderBooks(id: string, recipeBook?: RecipeBook, options?: any): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<SupermarketCategoryRelation>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.partialUpdateManualOrderBooks(id, recipeBook, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
         /**
          * 
          * @param {string} id A unique integer value identifying this access token.
@@ -18838,6 +18883,16 @@ export const ApiApiFactory = function (configuration?: Configuration, basePath?:
         moveKeyword(id: string, parent: string, keyword?: Keyword, options?: any): AxiosPromise<Keyword> {
             return localVarFp.moveKeyword(id, parent, keyword, options).then((request) => request(axios, basePath));
         },
+       /**
+         * 
+         * @param {string} id A unique integer value identifying this supermarket category relation.
+         * @param {RecipeBook} [recipeBook] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        partialUpdateManualOrderBooks(id: string, recipeBook?: RecipeBook, options?: any): AxiosPromise<SupermarketCategoryRelation> {
+            return localVarFp.partialUpdateManualOrderBooks(id, recipeBook, options).then((request) => request(axios, basePath));
+        },
         /**
          * 
          * @param {string} id A unique integer value identifying this access token.
@@ -20413,7 +20468,6 @@ export class ApiApi extends BaseAPI {
     public createRecipeBookEntry(recipeBookEntry?: RecipeBookEntry, options?: any) {
         return ApiApiFp(this.configuration).createRecipeBookEntry(recipeBookEntry, options).then((request) => request(this.axios, this.basePath));
     }
-
     /**
      * 
      * @param {ShoppingList} [shoppingList] 
@@ -21639,7 +21693,16 @@ export class ApiApi extends BaseAPI {
     public moveKeyword(id: string, parent: string, keyword?: Keyword, options?: any) {
         return ApiApiFp(this.configuration).moveKeyword(id, parent, keyword, options).then((request) => request(this.axios, this.basePath));
     }
-
+    /**
+     * 
+     * @param {string} id A unique integer value identifying this supermarket category relation.
+     * @param {RecipeBook} [recipeBook] 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     */
+    public partialUpdateManualOrderBooks(id: string, recipeBook?: RecipeBook, options?: any) {
+        return ApiApiFp(this.configuration).partialUpdateManualOrderBooks(id, recipeBook, options).then((request) => request(this.axios, this.basePath));
+    }
     /**
      * 
      * @param {string} id A unique integer value identifying this access token.