Use GraphQL variables everywhere and multiple ratings support

rapidez · Mar 17, 2022 · fc1fd90 · fc1fd90
1 parent 55946a2
commit fc1fd90
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 48 deletions.
diff --git a/composer.json b/composer.json
@@ -21,7 +21,7 @@
         "illuminate/database": "^8.0",
         "illuminate/support": "^8.0",
         "illuminate/view": "^8.0",
-        "rapidez/core": "~0.18"
+        "rapidez/core": "~0.49"
     },
     "autoload": {
         "psr-4": {

diff --git a/resources/js/components/StarInput.vue b/resources/js/components/StarInput.vue
@@ -1,53 +1,44 @@
 <template>
     <fieldset class="flex items-center mt-1">
-        <label v-for="index in 5" :for="'star-' + index">
-            <svg :class="(inputValue && index <= ratingIndex) ? 'text-primary' : 'text-gray-400'" class="w-8 h-8 fill-current cursor-pointer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"></path></svg>
-            <input v-model="inputValue" class="sr-only" type="radio" :id="'star-' + index" :name="name" :value="index" required />
+        <label v-for="ratingValue in rating.values">
+            <svg :class="isActive(ratingValue) ? 'text-primary' : 'text-gray-400'" class="w-8 h-8 fill-current cursor-pointer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"></path></svg>
+
+            <input
+                class="sr-only"
+                type="radio"
+                v-model="value"
+                :name="'stars' + rating.id"
+                :value="{ id: rating.id, value_id: ratingValue.value_id }"
+                required
+            />
         </label>
     </fieldset>
 </template>
+
 <script>
     export default {
-        props: [
-            'value',
-            'name',
-            'ratingId',
-            'ratingValues'
-        ],
-        data() {
-            return {
-                changes: {
-                    ratings: ''
-                },
-                ratingValue: {
-                    value_id: '',
-                    id: ''
-                }
-            }
+        props: {
+            rating: {
+                type: Object,
+                required: true,
+            },
+            value: {
+                type: Object,
+                required: false
+            },
         },
-        methods: {
-            getRatingValue(value) {
-                return this.ratingValues[value - 1]
+
+        watch: {
+            value() {
+                this.$emit('input', this.value);
             }
         },
-        computed: {
-            inputValue: {
-                get() {
-                    return this.value
-                },
-                set(value) {
-                    this.ratingValue.id = this.ratingId
-                    this.ratingValue.value_id = this.getRatingValue(value)['value_id']
 
-                    this.$emit('input', this.ratingValue)
-                }
-            },
-            ratingIndex() {
-                if (this.inputValue) {
-                    return this.ratingValues.find(rating => {
-                        return rating.value_id == this.inputValue.value_id
-                    }).value;
-                }
+        methods: {
+            isActive(ratingValue) {
+                return this.value && ratingValue.value <= this.rating.values.find(
+                    (ratingValue) => ratingValue.value_id == this.value.value_id
+                ).value
             }
         }
     }

diff --git a/resources/views/form.blade.php b/resources/views/form.blade.php
@@ -1,19 +1,21 @@
 <graphql v-cloak query='@include('rapidez-reviews::queries.ratingsMetadata')'>
     <div v-if="data" slot-scope="{ data }">
         <x-rapidez::recaptcha location="product_review"/>
-        <graphql-mutation query="mutation { createProductReview ( input: changes ), { review { nickname summary text average_rating ratings_breakdown { name value } } } }" :clear="true" :recaptcha="{{ Rapidez::config('recaptcha_frontend/type_for/product_review') == 'recaptcha_v3' ? 'true' : 'false' }}">
-            <form slot-scope="{ changes, mutate, mutated }" v-on:submit.prevent="mutate">
+        <graphql-mutation query="mutation review ($sku: String!, $nickname: String!, $summary: String!, $text: String!, $ratings: [ProductReviewRatingInput!]!) { createProductReview ( input: { sku: $sku, nickname: $nickname, summary: $summary, text: $text, ratings: $ratings } ), { review { nickname summary text average_rating ratings_breakdown { name value } } } }" :variables="{ ratings: [] }" :clear="true" :recaptcha="{{ Rapidez::config('recaptcha_frontend/type_for/product_review') == 'recaptcha_v3' ? 'true' : 'false' }}">
+            <form slot-scope="{ variables, mutate, mutated }" v-on:submit.prevent="mutate">
                 <div class="w-full max-w-xl bg-white rounded-lg pt-2">
                     <strong class="text-1xl">@lang('Add Your Review')</strong>
                     <div class="flex flex-wrap w-full">
                         <div class="w-full md:max-w-xl">
-                            <x-rapidez::label>@lang('Rating')</x-rapidez::label>
-                            <star-input class="mb-2" v-model="changes.ratings" name="ratings" :rating-id="data.productReviewRatingsMetadata.items[0].id" :rating-values="data.productReviewRatingsMetadata.items[0].values"></star-input>
-                            <input type="hidden" v-bind:value="changes.sku = '{{ $sku }}'" v-on:input="changes.sku = $event" name="sku" />
+                            <div class="mb-2" v-for="(rating, index) in data.productReviewRatingsMetadata.items">
+                                <x-rapidez::label>@{{ rating.name }}</x-rapidez::label>
+                                <star-input v-model="variables.ratings[index]" :rating="rating"></star-input>
+                            </div>
+                            <input type="hidden" v-bind:value="variables.sku = '{{ $sku }}'" v-on:input="variables.sku = $event" name="sku" />
                             <div class="space-y-2">
-                                <x-rapidez::input v-model="changes.nickname" name="nickname" required/>
-                                <x-rapidez::input v-model="changes.summary" name="summary" required/>
-                                <x-rapidez::textarea v-model="changes.text" name="review" required/>
+                                <x-rapidez::input v-model="variables.nickname" name="nickname" required/>
+                                <x-rapidez::input v-model="variables.summary" name="summary" required/>
+                                <x-rapidez::textarea v-model="variables.text" name="review" required/>
                             </div>
                         </div>
                         <div class="w-full flex items-center mt-2">