Merge pull request Silvanite#36 from SGS-Optimisation/feature/17-op-f…

…lagged-rules Feature/17 op flagged rules
SGS-Optimisation · Mar 24, 2021 · 7a0f036 · 7a0f036
2 parents 24a6e14 + e5727a6
commit 7a0f036
Show file tree

Hide file tree

Showing 7 changed files with 171 additions and 46 deletions.
diff --git a/app/Http/Controllers/RuleFlaggingController.php b/app/Http/Controllers/RuleFlaggingController.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Rule;
+use Carbon\Carbon;
+use Illuminate\Http\Request;
+
+class RuleFlaggingController extends Controller
+{
+
+    public function on(Request $request, Rule $rule)
+    {
+        $rule->flagged = true;
+
+        $metadata = $rule->metadata ?? [];
+
+        if(!isset($metadata['flag_reason'])) {
+            $metadata['flag_reason'] = [];
+        }
+
+        $metadata['flag_reason'][] = [
+            'user' => $request->user()->name,
+            'reason' => $request->reason,
+            'date' => Carbon::now()->format('Y-m-d H:i:s'),
+        ];
+
+        $rule->metadata = $metadata;
+        $rule->timestamps = false;
+
+        $rule->save();
+
+        \Log::debug('flagging rule ' . $rule->id);
+        logger('reason: ' . $request->reason);
+
+        return back();
+    }
+}
diff --git a/resources/js/Components/PM/Rules/ViewRule.vue b/resources/js/Components/PM/Rules/ViewRule.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div v-if="rule">
         <div class="py-3 sm:py-6 sm:flex sm:flex-row">
             <h1 class="text-lg text-gray-900 font-bold w-full" id="modal-headline">
                 {{ rule.name.slice(0, 30) }}

diff --git a/resources/js/Components/PM/Rules/ViewRuleItem.vue b/resources/js/Components/PM/Rules/ViewRuleItem.vue
@@ -16,12 +16,18 @@
                         {{ rule.name }}
                     </div>
                     <div class="text-xs text-gray-500 flex flex-row justify-between">
-                        <div class="text-xs bg-pink-200 rounded-xl px-2">
-                            {{ _.find(rule.terms, (item) => {return item.taxonomy.name === group }).name  }}
+                        <div class="flex flex-row">
+                            <div class="text-xs bg-pink-200 rounded-xl px-2">
+                                {{ _.find(rule.terms, (item) => {return item.taxonomy.name === group }).name  }}
+                            </div>
+                            <div class="ml-2" v-if="rule.flagged">
+                                <i title="This rule is currently flagged"
+                                   class="text-red-700 fa fa-flag"></i>
+                            </div>
                         </div>
 
                         <div>
-                            <span v-if="rule.created_at == rule.updated_at">
+                            <span v-if="rule.created_at === rule.updated_at">
                                 Created {{ moment(rule.created_at).fromNow() }}
                             </span>
                             <span v-else>
@@ -47,6 +53,10 @@ import moment from "moment";
 export default {
     name: "ViewRuleItem",
     props: [ 'group', 'rules', 'filterFlag'],
+    data() {
+        return {
+        }
+    },
     computed:{
         taxonomyRules() {
             return [...this.filterFlag ? this.rules.filter(rule => {

diff --git a/resources/js/Jetstream/Modal.vue b/resources/js/Jetstream/Modal.vue
@@ -1,7 +1,7 @@
 <template>
     <portal to="modal">
         <transition leave-active-class="duration-200">
-            <div v-show="show" class="modal fixed w-full h-full top-0 left-0 flex items-center justify-center">
+            <div v-show="show" class="modal fixed w-full h-4/5 top-10 left-0 flex items-center justify-center z-50">
                 <transition enter-active-class="ease-out duration-300"
                         enter-class="opacity-0"
                         enter-to-class="opacity-100"
@@ -19,7 +19,7 @@
                         leave-active-class="ease-in duration-200"
                         leave-class="opacity-100 translate-y-0 sm:scale-100"
                         leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
-                    <div v-show="show" class="bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full" :class="maxWidthClass">
+                    <div v-show="show" class="h-full bg-white rounded-lg overflow-scroll shadow-xl transform transition-all sm:w-full" :class="maxWidthClass">
                         <slot></slot>
                     </div>
                 </transition>
@@ -85,6 +85,8 @@
                     'lg': 'sm:max-w-lg',
                     'xl': 'sm:max-w-xl',
                     '2xl': 'sm:max-w-2xl',
+                    '4xl': 'sm:max-w-4xl',
+                    '6xl': 'sm:max-w-6xl',
                 }[this.maxWidth]
             }
         }

diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="min-h-screen bg-gray-100">
-        <div class="md:sticky md:top-0 z-50">
+        <div class="md:sticky md:top-0 z-40">
             <nav class="bg-white border-b border-gray-100">
                 <!-- Primary Navigation Menu -->
                 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

diff --git a/resources/js/Pages/OP/JobRules.vue b/resources/js/Pages/OP/JobRules.vue
@@ -104,54 +104,81 @@
                     <div class="w-1/3 rounded"
                          v-for="(ruleGroup, ruleIndex) in Object.entries(rulesByTaxonomies)" :key="ruleIndex">
                         <view-rule-item :rules="ruleGroup[1]" :group="ruleGroup[0]" :filter-flag="filterFlag"
-                                        @on-click-view="openModal"/>
+                                        @on-click-view="openRuleModal"/>
                     </div>
 
                 </isotope>
 
             </div>
         </div>
 
-        <div class="fixed z-10 inset-0 overflow-y-auto ease-out duration-400" v-if="isOpen">
-            <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
 
-                <div class="fixed inset-0 transition-opacity">
-                    <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
+        <!-- Rule Viewing Modal -->
+        <jet-dialog-modal :show="isOpen && currentRule" max-width="6xl" @close="closeRuleModal">
+            <template #title>
+                <div class="flex justify-between">
+                    <div><p>Viewing rule</p></div>
+                    <jet-secondary-button @click.native="closeRuleModal">
+                        <i class="fa fa-times"/>
+                    </jet-secondary-button>
                 </div>
+            </template>
 
-                <span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>
-                <div
-                    class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl w-full"
-                    role="dialog" aria-modal="true" aria-labelledby="modal-headline">
-                    <form>
-
-                        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-                            <div class="">
-                                <div class="mb-4">
-                                    <view-rule :rule="currentRule">
-                                        <button @click="closeModal()" type="button"
-                                                class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
-                                            Close
-                                        </button>
-                                    </view-rule>
-                                </div>
-                            </div>
-                        </div>
+            <template #content>
+                <div class="overflow-scroll">
+                    <view-rule :rule="currentRule"/>
+                </div>
+            </template>
 
-                        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-                            <span class="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto">
-                                <button @click="closeModal()" type="button"
-                                        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
-                                    Close
-                                </button>
-                            </span>
-                        </div>
+            <template #footer>
+
+                <div>
+                    <jet-action-message :on="flagRuleForm.recentlySuccessful" class="ml-3">
+                        Rule was flagged.
+                    </jet-action-message>
+                </div>
 
-                    </form>
+                <jet-button class="ml-2" @click.native="flagRule(currentRule)">
+                    Flag rule?
+                </jet-button>
+
+                <jet-secondary-button @click.native="closeRuleModal">
+                    Close
+                </jet-secondary-button>
+            </template>
+        </jet-dialog-modal>
+
+
+        <!-- Rule Flagging Modal -->
+        <jet-dialog-modal :show="isFlaggingRule" @close="closeFlagModal">
+            <template #title>
+                <span v-if="currentFlaggingRule">Flag rule {{currentFlaggingRule.name}}</span>
+            </template>
+            <template #content>
+                <div class="mt-4">
+                    <jet-label for="reason" value="Flag reason"/>
+                    <textarea class="form-input rounded-md shadow-sm mt-1 block w-full" id="reason"
+                              placeholder="Please provide a short explanation"
+                              v-model="flagRuleForm.reason"/>
+<!--                    <jet-input type="text" class="mt-1 block w-3/4"
+                               :value="flagRuleForm.reason"
+                               v-model="flagRuleForm.reason"/>-->
 
                 </div>
-            </div>
-        </div>
+            </template>
+            <template #footer>
+                <jet-secondary-button @click.native="closeFlagModal">
+                    Nevermind
+                </jet-secondary-button>
+
+                <jet-danger-button class="ml-2" @click.native="sendFlagRule"
+                            :class="{ 'opacity-25': flagRuleForm.processing }"
+                            :disabled="flagRuleForm.processing">
+                    Flag
+                </jet-danger-button>
+            </template>
+        </jet-dialog-modal>
+
 
     </app-layout>
 </template>
@@ -160,8 +187,13 @@
 import AppLayout from '@/Layouts/AppLayout'
 import Input from "@/Jetstream/Input";
 import Button from "@/Jetstream/Button";
+import JetActionMessage from '@/Jetstream/ActionMessage'
 import JetButton from '@/Jetstream/Button'
+import JetDangerButton from '@/Jetstream/DangerButton'
+import JetDialogModal from '@/Jetstream/DialogModal';
 import JetInput from '@/Jetstream/Input'
+import JetLabel from '@/Jetstream/Label'
+import JetSecondaryButton from '@/Jetstream/SecondaryButton'
 import ViewRule from '@/Components/PM/Rules/ViewRule'
 import ViewRuleItem from "@/Components/PM/Rules/ViewRuleItem";
 import JobSearch from "@/Components/OP/JobSearchForm";
@@ -194,7 +226,15 @@ export default {
 
             rulesByTaxonomies: {},
 
-            filterFlag: null
+            filterFlag: null,
+            isFlaggingRule: false,
+            currentFlaggingRule: null,
+
+            flagRuleForm: this.$inertia.form({
+                reason: "",
+            }, {
+                bag: 'deleteTerm'
+            }),
         }
     },
 
@@ -260,13 +300,13 @@ export default {
         reloadPage() {
             window.location = window.location + this.searchJobKey;
         },
-        openModal(rule) {
+        openRuleModal(rule) {
             this.currentRule = rule;
             this.isOpen = true
         },
-        closeModal() {
-            this.currentRule = null;
+        closeRuleModal() {
             this.isOpen = false;
+            this.currentRule = null;
         },
         search() {
             if (this.searchJobKey && this.searchJobKey !== '') {
@@ -295,16 +335,44 @@ export default {
         filterByTaxonomy(taxonomy) {
             this.$refs.cpt.filter(taxonomy)
             this.filterFlag = null;
-        }
+        },
+
+        flagRule(rule) {
+            this.currentFlaggingRule = rule;
+            this.isFlaggingRule = true;
+        },
+
+        closeFlagModal() {
+            this.isFlaggingRule = false;
+            this.currentFlaggingRule = null;
+        },
+
+        sendFlagRule() {
+            console.log('flagging rule', this.currentFlaggingRule);
+
+            this.flagRuleForm.post(route('rule.flag', this.currentFlaggingRule.id), {
+                preserveScroll: true
+            }).then(() => {
+
+                    this.closeFlagModal();
+            });
+        },
+
+
     },
 
     components: {
         ViewRuleItem,
         Button,
         Input,
         AppLayout,
+        JetActionMessage,
         JetButton,
+        JetDangerButton,
+        JetDialogModal,
         JetInput,
+        JetLabel,
+        JetSecondaryButton,
         ViewRule,
         JobSearch,
         isotope

diff --git a/routes/web.php b/routes/web.php
@@ -147,9 +147,16 @@ function () {
         Route::match(['get', 'post'],'/{jobNumber?}', [\App\Http\Controllers\OPs\JobController::class, 'show'])
             ->name('home')
             ->where('jobNumber', '[0-9]+');
+
+
+        Route::post('/rule/{rule}/flag', [\App\Http\Controllers\RuleFlaggingController::class, 'on'] )
+            ->name('rule.flag')
+            ->where('rule', '[0-9]+');
     });
 
 
 
 
 
+
+