Merge pull request #48 from Cowofi/47-space-reviews

47 space reviews

src/components/Reviews/CreateForm.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="row">
+    <div class="col-12">
+      <p>{{ $t("messages.information.howDidweDo") }}</p>
+      <div class="text-center">
+        <q-rating
+          v-model="rating"
+          size="3.5em"
+          color="yellow-8"
+          icon="eva-star-outline"
+          icon-selected="eva-star"
+        />
+      </div>
+    </div>
+    <div class="col-12">
+      <p>{{ $t("messages.information.careShareMoreAboutIt") }}</p>
+      <q-input
+        v-model="comment"
+        outlined
+        :label="$t('common.comment')"
+        type="textarea"
+        :counter="true"
+        :maxlength="100"
+      />
+    </div>
+    <div class="col-12 text-center">
+      <q-btn
+        :disabled="rating === 0"
+        :loading="loading"
+        @click="submit"
+        push
+        color="primary"
+        text-color="white"
+        :label="$t('action.publishFeedback')"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from "vue";
+
+export default {
+  name: "ComponentReviewForm",
+  props: {
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, { emit }) {
+    const rating = ref(0);
+    const comment = ref("");
+
+    return {
+      rating,
+      comment,
+      submit() {
+        emit("on-created", {
+          rating: rating.value,
+          comment: comment.value,
+        });
+      },
+    };
+  },
+};
+</script>

src/components/Reviews/ReviewCard.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="row q-col-gutter-sm">
+    <div class="col-12">
+      <div class="row justify-center items-center">
+        <div class="col-4">
+          <q-avatar color="primary" text-color="white">
+            {{ review.users.raw_user_meta_data.full_name.substring(0, 1) }}
+          </q-avatar>
+          <span class="q-ml-sm">
+            {{ review.users.raw_user_meta_data.full_name }}
+          </span>
+        </div>
+        <div class="col text-right text-grey-8">
+          {{ timeAgo(review.created_at) }}
+        </div>
+      </div>
+    </div>
+    <div class="col-12">
+      <q-rating
+        v-model="rating"
+        size="1.5em"
+        color="yellow-8"
+        icon="eva-star-outline"
+        icon-selected="eva-star"
+        readonly
+      />
+    </div>
+    <div class="col-12">
+      <q-separator />
+    </div>
+    <div class="col-12">
+      <p>{{ review.comment }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from "vue";
+import { timeAgo } from "src/utils/time";
+
+export default {
+  name: "ComponentReviewCard",
+  props: {
+    review: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup(props) {
+    const rating = ref(props.review.rating);
+    return {
+      rating,
+      timeAgo,
+    };
+  },
+};
+</script>

src/components/Schedule/MiniCard.vue

@@ -29,12 +29,42 @@
                   )} ${$t("common.days")}`
             }}
           </q-chip>
+          <q-chip
+            :color="getStatusColor(schedule.status)"
+            :text-color="schedule.status === 'pending' ? 'black' : 'white'"
+            size="10px"
+          >
+            {{ $t(`common.${schedule.status}`) }}
+          </q-chip>
         </div>
         <div class="col-12">
           <q-icon size="xs" name="eva-clock-outline" />
           {{ $t("common.at") }} {{ parseTime(schedule.from_time) }} -
           {{ parseTime(schedule.to_time) }}
         </div>
+        <div class="col-12" v-if="showActions">
+          <div class="row q-col-gutter-md">
+            <div class="col-6">
+              <q-btn
+                :loading="loading"
+                @click="onAccept()"
+                push
+                color="primary"
+                text-color="white"
+                :label="$t('action.accept')"
+              />
+            </div>
+            <div class="col-6 text-right">
+              <q-btn
+                :loading="loading"
+                @click="onReject()"
+                push
+                color="negative"
+                :label="$t('action.reject')"
+              />
+            </div>
+          </div>
+        </div>
         <div class="col-12">
           <q-separator />
         </div>
@@ -61,9 +91,17 @@ export default {
       type: Object,
       required: true,
     },
+    showActions: {
+      type: Boolean,
+      default: false,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
   },
   components: { SpaceMinimal },
-  setup() {
+  setup(_, { emit }) {
     const $t = useI18n().t;
 
     return {
@@ -80,6 +118,24 @@ export default {
         const diff = toDate.diff(fromDate, "days");
         return diff + " " + $t("common.days");
       },
+      onAccept() {
+        emit("accept");
+      },
+      onReject() {
+        emit("reject");
+      },
+      getStatusColor(status) {
+        switch (status) {
+          case "pending":
+            return "grey-4";
+          case "accepted":
+            return "primary";
+          case "rejected":
+            return "negative";
+          default:
+            return "grey-4";
+        }
+      },
     };
   },
 };

src/i18n/en-US/index.js

@@ -66,7 +66,13 @@ export default {
     yourMessages: "Your Messages",
     conversations: "Conversations",
     message: "Message",
-    sendMessage: 'Send message'
+    sendMessage: 'Send message',
+    giveFeedback: "Give Feedback",
+    comment: "Comment",
+    reviews: "Reviews",
+    accepted: "Accepted",
+    rejected: "Rejected",
+    pending: "Pending",
   },
   messages: {
     information: {
@@ -92,6 +98,9 @@ export default {
       atLeast1Number: "At least 1 number",
       passwordMustContain: "Password must contain",
       passwordChangedSuccessfully: "Password changed successfully",
+      howDidweDo: "How did we do?",
+      careShareMoreAboutIt: "Care to share more about it?",
+      noReviewsYet: "No reviews yet",
     },
     error: {
       pleaseEnterValidPhoneNumber: "Please enter valid phone number",
@@ -118,5 +127,8 @@ export default {
     sendMessage: "Send message",
     continue: "Continue",
     changePassword: "Change Password",
+    publishFeedback: "Publish Feedback",
+    accept: "Accept",
+    reject: "Reject",
   },
 };