From d86d5e860e16630590dfa1d2f5f238becca3fa6d Mon Sep 17 00:00:00 2001
From: amir baharlou <amirmahdibaharlou@gmail.com>
Date: Wed, 6 Dec 2023 07:53:29 +0330
Subject: [PATCH 1/3] add options

---
 src/pages/social/SetAppointment.vue | 207 ++++++++++++++++++++++++++--
 1 file changed, 192 insertions(+), 15 deletions(-)

diff --git a/src/pages/social/SetAppointment.vue b/src/pages/social/SetAppointment.vue
index 40783fd..07323d0 100644
--- a/src/pages/social/SetAppointment.vue
+++ b/src/pages/social/SetAppointment.vue
@@ -24,7 +24,15 @@ import { LocalStorage } from 'quasar';
           dense
           :options="dayOptions"
           :label="$t('social.selectDay')"
-        />
+        >
+          <template #option="props">
+            <q-item v-bind="props.itemProps">
+              <q-item-section>
+                {{ props.opt.label }}
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-select>
       </div>
       <div
         class="col-md-5 col-xs-12"
@@ -39,7 +47,15 @@ import { LocalStorage } from 'quasar';
           dense
           :options="timeOptions"
           :label="$t('social.selectClock')"
-        />
+        >
+          <template #option="props">
+            <q-item v-bind="props.itemProps">
+              <q-item-section>
+                {{ props.opt.label }}
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-select>
       </div>
       <div
         class="col-md-2 col-xs-12 flex justify-center items-end"
@@ -51,38 +67,199 @@ import { LocalStorage } from 'quasar';
           text-color="white"
           flat
           no-caps
-          :class="['bg-primary', screenSize && 'full-width']"
+          :class="['bg-primary', screenSize(360) && 'full-width']"
           padding="8px 24px"
         />
       </div>
     </div>
 
-    <div class="q-mt-md">
-      <div
-        v-for="item in allData"
-        :key="item.id"
-      >
-        {{ item.name }}
-      </div>
-    </div>
+    <q-card
+      flat
+      class="border-radius-8 q-mt-lg"
+      bordered
+    >
+      <q-card-section class="row q-gutter-md">
+        <div
+          v-for="item in allData"
+          :key="item.id"
+          class="q-pa-lg border-radius-8 bg-primary-10 max-width text-center column justify-between"
+        >
+          <div class="text-subtitle2 text-primary-1">
+            {{ item.name }}
+          </div>
+          <q-btn
+            v-if="item?.reserved?.id === userId"
+            label="Cancel"
+            color="primary"
+            no-caps
+            padding="8px"
+            outline
+          />
+          <div
+            v-else-if="item?.reserved"
+            class="text-secondary text-body3"
+          >
+            Reserved By: {{ item.reserved.name }}
+          </div>
+          <q-btn
+            v-else
+            label="Reservation"
+            color="primary"
+            padding="8px"
+            no-caps
+            unelevated
+          />
+        </div>
+      </q-card-section>
+    </q-card>
   </div>
 </template>
 <script setup>
 import { ref, computed } from 'vue'
-import { useScreenHandler } from 'src/composable'
 import { LocalStorage } from 'quasar'
 
+import { useScreenHandler } from 'src/composable'
+import { useUserStore } from 'stores/user-store'
+
 // import { useI18n } from 'vue-i18n'
 
 const { screenSize } = useScreenHandler()
 
+const userStore = useUserStore()
+const userId = computed(() => userStore.user.id)
+
 const selectDay = ref(null)
 const selectTime = ref(null)
-const dayOptions = ref([])
-const timeOptions = ref([])
-const allData = ref([])
+const dayOptions = [
+  {
+    label: 'Saturday, 23 December',
+    value: 0
+  },
+  {
+    label: 'Sunday, 24 December',
+    value: 1
+  },
+  {
+    label: 'Monday, 25 December',
+    value: 2
+  },
+  {
+    label: 'Tuesday, 26 December',
+    value: 3
+  }
+]
+const timeOptions = [
+  {
+    label: '9 - 9:30',
+    value: 9
+  },
+  {
+    label: '9:30 - 10',
+    value: 9.5
+  },
+  {
+    label: '10 - 10:30',
+    value: 10
+  },
+  {
+    label: '10:30 - 11',
+    value: 10.5
+  },
+  {
+    label: '11 - 11:30',
+    value: 11
+  },
+  {
+    label: '11:30 - 12',
+    value: 11.5
+  },
+  {
+    label: '13:30 - 14',
+    value: 13.5
+  },
+  {
+    label: '14 - 14:30',
+    value: 14
+  },
+  {
+    label: '14:30 - 15',
+    value: 14.5
+  },
+  {
+    label: '15 - 15:30',
+    value: 15
+  },
+  {
+    label: '15:30 - 16',
+    value: 15.5
+  }
+]
+const allData = ref([
+  {
+    id: '1',
+    name: 'tof',
+    reserved: {
+      id: '2',
+      name: 'negar'
+    }
+  },
+  {
+    id: '2',
+    name: 'snap',
+    reserved: null
+  },
+  {
+    id: '3',
+    name: 'tapsi',
+    reserved: {
+      id: '6',
+      name: 'tof'
+    }
+  },
+  {
+    id: '4',
+    name: 'matin',
+    reserved: null
+  },
+  {
+    id: '5',
+    name: 'negar',
+    reserved: {
+      id: '1',
+      name: 'tof'
+    }
+  },
+  {
+    id: '6',
+    name: 'tof negar',
+    reserved: null
+  },
+  {
+    id: '1',
+    name: 'tof',
+    reserved: {
+      id: '656f010ff421aa0494d290fd',
+      name: 'negar'
+    }
+  }
+])
 
 // const { t } = useI18n()
 
 const ltrDir = computed(() => LocalStorage.getItem('ltrDir'))
 </script>
+
+<style scoped  lang="sass">
+.max-width
+  max-width: 182px
+  width: 100%
+  height: 130px
+.q-item
+  background: linear-gradient(0deg, rgba(0, 84, 214, 0.05), rgba(0, 84, 214, 0.05)) #FEFBFF
+  margin: 5px
+  border-radius: 5px
+
+.q-manual-focusable--focused
+  box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3)
+
+</style>
-- 
GitLab


From a322951e5b908228f378f9331b6ec980b6ac537f Mon Sep 17 00:00:00 2001
From: amir baharlou <amirmahdibaharlou@gmail.com>
Date: Wed, 6 Dec 2023 17:52:34 +0330
Subject: [PATCH 2/3] add appointment

---
 src/base-url/index.js               |   7 +
 src/css/quasar.variables.scss       |   8 +-
 src/i18n/en-US/index.js             |   1 +
 src/layouts/SocialLayout.vue        |   9 +-
 src/pages/social/SetAppointment.vue | 446 +++++++++++++++++-----------
 5 files changed, 287 insertions(+), 184 deletions(-)

diff --git a/src/base-url/index.js b/src/base-url/index.js
index 5b48e6b..55cbe16 100644
--- a/src/base-url/index.js
+++ b/src/base-url/index.js
@@ -178,3 +178,10 @@ export const API_URL_CHAT = {
   newMsg: id => `/chat/msg/${id}`,
   seenMsg: id => `/chat/seen_chat/${id}`
 }
+
+export const API_URL_MEETINGTABLE = {
+  setMeet: id => `/meeting-table/reserve/${id}`,
+  canselMeet: id => `/meeting-table/cancel/${id}`,
+  getSetAppointment: '/meeting-table',
+  getCsv: '/meeting-table/csv'
+}
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 275ee2e..59a33cf 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -109,10 +109,14 @@ $flex-gutter: (
 );
 
 
-$breakpoint-xs: 600px   !default;
-$breakpoint-sm: 905px   !default;
+$breakpoint-xs: 280px   !default;
+$breakpoint-ms: 360px   !default;
+$breakpoint-sm: 769px   !default;
 $breakpoint-md: 1240px  !default;
 $breakpoint-lg: 1440px  !default;
+$breakpoint-xl: 1920px  !default;
+
+$sizes: ('none': 0, 'xs': ($breakpoint-xs), 'ms': ($breakpoint-ms), 'sm': ($breakpoint-sm), 'md': ($breakpoint-md), 'lg': ($breakpoint-lg), 'xl': ($breakpoint-xl)) !default;
 
 
 // Colors
diff --git a/src/i18n/en-US/index.js b/src/i18n/en-US/index.js
index 259150b..4330560 100644
--- a/src/i18n/en-US/index.js
+++ b/src/i18n/en-US/index.js
@@ -732,6 +732,7 @@ export default {
     inputChatPlaceholder: 'Write Something ...'
   },
   social: {
+    search: 'Search',
     companies: 'Companies',
     appointment: 'Appointment',
     company: 'Company',
diff --git a/src/layouts/SocialLayout.vue b/src/layouts/SocialLayout.vue
index 5342e4a..2a7f113 100644
--- a/src/layouts/SocialLayout.vue
+++ b/src/layouts/SocialLayout.vue
@@ -17,8 +17,9 @@
     :dir="ltrDir ? 'ltr' : 'rtl'"
   >
     <q-scroll-area class="fit">
-      <div class="q-py-lg text-center cursor-pointer">
-        <q-img
+      <div class="q-py-lg text-center cursor-pointer text-bold">
+        TELECOME 2023
+        <!-- <q-img
           src="~assets/images/login_vector.svg"
           width="70px"
           height="70px"
@@ -30,7 +31,7 @@
           >
             {{ t('profile.exploreEvent') }}
           </q-tooltip>
-        </q-img>
+        </q-img> -->
       </div>
       <q-list class="q-gutter-md">
         <div
@@ -171,7 +172,7 @@ const menus = computed(() => [
     label: t('event.createEvent'),
     icon: roundEvent,
     badge: false,
-    show: userStore.user.user_type === 'COMPANY',
+    show: false,
     route: { name: 'CreateEvent' }
   },
   {
diff --git a/src/pages/social/SetAppointment.vue b/src/pages/social/SetAppointment.vue
index 07323d0..f92e79a 100644
--- a/src/pages/social/SetAppointment.vue
+++ b/src/pages/social/SetAppointment.vue
@@ -1,125 +1,161 @@
-import { LocalStorage } from 'quasar';
 <template>
-  <div class="appointment-container q-pt-4xl q-px-md">
-    <p
-      class="text-primary-1 text-subtitle2 q-mb-xl"
-      :dir="ltrDir ? 'ltr' : 'rtl'"
-    >
-      {{ $t('social.appointment') }}
-    </p>
-    <div
-      class="row q-col-gutter-md"
-      :dir="ltrDir ? 'ltr' : 'rtl'"
-    >
-      <div
-        class="col-md-5 col-xs-12"
-        :dir="ltrDir ? 'ltr' : 'rtl'"
-      >
-        <div>
-          {{ $t('social.day') }} <span class="text-neutral-variant-3 text-caption">({{ $t('required') }})</span>
-        </div>
-        <q-select
-          v-model="selectDay"
-          outlined
-          dense
-          :options="dayOptions"
-          :label="$t('social.selectDay')"
-        >
-          <template #option="props">
-            <q-item v-bind="props.itemProps">
-              <q-item-section>
-                {{ props.opt.label }}
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
-      </div>
-      <div
-        class="col-md-5 col-xs-12"
-        :dir="ltrDir ? 'ltr' : 'rtl'"
-      >
-        <div>
-          {{ $t('social.time') }} <span class="text-neutral-variant-3 text-caption">({{ $t('required') }})</span>
-        </div>
-        <q-select
-          v-model="selectTime"
-          outlined
-          dense
-          :options="timeOptions"
-          :label="$t('social.selectClock')"
-        >
-          <template #option="props">
-            <q-item v-bind="props.itemProps">
-              <q-item-section>
-                {{ props.opt.label }}
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
-      </div>
-      <div
-        class="col-md-2 col-xs-12 flex justify-center items-end"
-        :dir="ltrDir ? 'ltr' : 'rtl'"
-      >
-        <q-btn
-          :label="$t('social.search')"
-          dense
-          text-color="white"
-          flat
-          no-caps
-          :class="['bg-primary', screenSize(360) && 'full-width']"
-          padding="8px 24px"
-        />
-      </div>
-    </div>
-
-    <q-card
-      flat
-      class="border-radius-8 q-mt-lg"
-      bordered
-    >
-      <q-card-section class="row q-gutter-md">
+  <q-page class="bg-neutral-variant-11 q-pt-4xl">
+    <div class="appointment-container q-py-md q-px-md bg-white border-radius-8">
+      <div class="row q-mb-xl items-center justify-between">
         <div
-          v-for="item in allData"
-          :key="item.id"
-          class="q-pa-lg border-radius-8 bg-primary-10 max-width text-center column justify-between"
+          class="text-primary-1 text-subtitle1"
+          :dir="ltrDir ? 'ltr' : 'rtl'"
         >
-          <div class="text-subtitle2 text-primary-1">
-            {{ item.name }}
-          </div>
+          {{ $t('social.appointment') }}
+        </div>
+        <div :class="[screenSize(400).value && 'col-12 q-mt-md']">
           <q-btn
-            v-if="item?.reserved?.id === userId"
-            label="Cancel"
+            label="Export"
             color="primary"
             no-caps
-            padding="8px"
             outline
+            :icon="roundGetApp"
+            :class="[screenSize(400).value && 'full-width']"
+            :loading="loading.export"
+            padding="8px 24px"
+            :disable="!selectDay"
+            @click="getReport"
           />
-          <div
-            v-else-if="item?.reserved"
-            class="text-secondary text-body3"
+        </div>
+      </div>
+      <q-form
+        class="row q-col-gutter-md"
+        :dir="ltrDir ? 'ltr' : 'rtl'"
+        @submit="fetchMeetingDate"
+      >
+        <div class="col-sm-5 col-xs-12">
+          <label>
+            {{ $t('social.day') }} <span class="text-neutral-variant-3 text-caption">({{ $t('required') }})</span>
+          </label>
+          <q-select
+            v-model="selectDay"
+            :label="$t('social.selectDay')"
+            :dir="ltrDir ? 'ltr' : 'rtl'"
+            dense
+            :rules="[requiredRule]"
+            :options="dayOptions"
+            outlined
+            lazy-rules
+            emit-value
+            map-options
+            no-error-icon
+            hide-bottom-space
           >
-            Reserved By: {{ item.reserved.name }}
-          </div>
+            <template #option="props">
+              <q-item v-bind="props.itemProps">
+                <q-item-section>
+                  {{ props.opt.label }}
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+        </div>
+        <div class="col-sm-5 col-xs-12">
+          <label>
+            {{ $t('social.time') }} <span class="text-neutral-variant-3 text-caption">({{ $t('required') }})</span>
+          </label>
+          <q-select
+            v-model="selectTime"
+            :label="$t('social.selectClock')"
+            dense
+            :rules="[requiredRule]"
+            :options="timeOptions"
+            outlined
+            lazy-rules
+            emit-value
+            map-options
+            no-error-icon
+            hide-bottom-space
+          >
+            <template #option="props">
+              <q-item v-bind="props.itemProps">
+                <q-item-section>
+                  {{ props.opt.label }}
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+        </div>
+
+        <div class="col-sm-2 col-xs-12 self-end">
           <q-btn
-            v-else
-            label="Reservation"
+            :label="$t('social.search')"
+            dense
             color="primary"
-            padding="8px"
+            class="full-width"
             no-caps
+            :loading="loading.get"
+            type="submit"
+            padding="8px 24px"
             unelevated
           />
         </div>
-      </q-card-section>
-    </q-card>
-  </div>
+      </q-form>
+
+      <q-card
+        v-if="!!allData.length"
+        flat
+        class="border-radius-8 q-mt-lg"
+        bordered
+      >
+        <q-card-section class="row q-col-gutter-md">
+          <div
+            v-for="item in allData"
+            :key="item.id"
+            :class="[responsive]"
+          >
+            <div class="q-pa-lg border-radius-8 bg-primary-10 text-center column justify-between max-width">
+              <div class="text-subtitle2 text-primary-1">
+                {{ item.name }}
+              </div>
+              <q-btn
+                v-if="item?.reserved_by?.user_id === userId"
+                label="Cancel"
+                color="primary"
+                no-caps
+                padding="8px"
+                outline
+                :loading="loading.cancel === item.id"
+                @click="cancelMeet(item.id)"
+              />
+              <div
+                v-else-if="item?.reserved_by"
+                class="text-secondary text-body3"
+              >
+                Reserved By: {{ item.reserved_by.name }}
+              </div>
+              <q-btn
+                v-else
+                label="Reservation"
+                color="primary"
+                padding="8px"
+                no-caps
+                unelevated
+                :loading="loading.set === item.id"
+                @click="setMeet(item.id)"
+              />
+            </div>
+          </div>
+        </q-card-section>
+      </q-card>
+    </div>
+  </q-page>
 </template>
 <script setup>
 import { ref, computed } from 'vue'
 import { LocalStorage } from 'quasar'
 
-import { useScreenHandler } from 'src/composable'
+import { api } from 'boot/axios'
 import { useUserStore } from 'stores/user-store'
+import { requiredRule } from 'src/utils'
+import { useScreenHandler } from 'src/composable'
+import { API_URL_MEETINGTABLE } from 'src/base-url'
+import { roundGetApp } from '@quasar/extras/material-icons-round'
 
 // import { useI18n } from 'vue-i18n'
 
@@ -127,132 +163,186 @@ const { screenSize } = useScreenHandler()
 
 const userStore = useUserStore()
 const userId = computed(() => userStore.user.id)
+const responsive = computed(() => {
+  let result = 'col-3'
+  if (!screenSize(768).value) {
+    result = 'col-3'
+    console.log('0')
+  }
+  if (screenSize(768).value) {
+    result = 'col-4'
+    console.log('1')
+  }
+  if (screenSize(600).value) {
+    result = 'col-6'
+    console.log('2')
+  }
+  if (screenSize(400).value) {
+    result = 'col-12'
+    console.log('3')
+  }
+  return result
+})
+
+const allData = ref([])
+const loading = ref({
+  get: false,
+  set: false,
+  cancel: false,
+  export: false
+})
 
 const selectDay = ref(null)
 const selectTime = ref(null)
+
 const dayOptions = [
   {
     label: 'Saturday, 23 December',
-    value: 0
+    value: '23 DECEMBER'
   },
   {
     label: 'Sunday, 24 December',
-    value: 1
+    value: '24 DECEMBER'
   },
   {
     label: 'Monday, 25 December',
-    value: 2
+    value: '25 DECEMBER'
   },
   {
     label: 'Tuesday, 26 December',
-    value: 3
+    value: '26 DECEMBER'
   }
 ]
+
 const timeOptions = [
   {
-    label: '9 - 9:30',
-    value: 9
+    label: '09:00 - 9:30',
+    value: '09:00-09:30'
   },
   {
-    label: '9:30 - 10',
-    value: 9.5
+    label: '09:30 - 10:00',
+    value: '09:30-10:00'
   },
   {
-    label: '10 - 10:30',
-    value: 10
+    label: '10:00 - 10:30',
+    value: '10:00-10:30'
   },
   {
-    label: '10:30 - 11',
-    value: 10.5
+    label: '10:30 - 11:00',
+    value: '10:30-11:00'
   },
   {
-    label: '11 - 11:30',
-    value: 11
+    label: '11:000 - 11:30',
+    value: '11:00-11:30'
   },
   {
-    label: '11:30 - 12',
-    value: 11.5
+    label: '11:30 - 12:00',
+    value: '11:30-12:00'
   },
   {
-    label: '13:30 - 14',
-    value: 13.5
+    label: '13:30 - 14:00',
+    value: '13:30-14:00'
   },
   {
-    label: '14 - 14:30',
-    value: 14
+    label: '14:00 - 14:30',
+    value: '14:00-14:30'
   },
   {
-    label: '14:30 - 15',
-    value: 14.5
+    label: '14:30 - 15:00',
+    value: '14:30-15:00'
   },
   {
-    label: '15 - 15:30',
-    value: 15
+    label: '15:00 - 15:30',
+    value: '15:00-15:30'
   },
   {
-    label: '15:30 - 16',
-    value: 15.5
+    label: '15:30 - 16:00',
+    value: '15:30-16:00'
   }
 ]
-const allData = ref([
-  {
-    id: '1',
-    name: 'tof',
-    reserved: {
-      id: '2',
-      name: 'negar'
-    }
-  },
-  {
-    id: '2',
-    name: 'snap',
-    reserved: null
-  },
-  {
-    id: '3',
-    name: 'tapsi',
-    reserved: {
-      id: '6',
-      name: 'tof'
-    }
-  },
-  {
-    id: '4',
-    name: 'matin',
-    reserved: null
-  },
-  {
-    id: '5',
-    name: 'negar',
-    reserved: {
-      id: '1',
-      name: 'tof'
-    }
-  },
-  {
-    id: '6',
-    name: 'tof negar',
-    reserved: null
-  },
-  {
-    id: '1',
-    name: 'tof',
-    reserved: {
-      id: '656f010ff421aa0494d290fd',
-      name: 'negar'
-    }
-  }
-])
 
 // const { t } = useI18n()
 
 const ltrDir = computed(() => LocalStorage.getItem('ltrDir'))
+
+const setMeet = async (id) => {
+  try {
+    loading.value.set = id
+    await api.post(API_URL_MEETINGTABLE.setMeet(id))
+    fetchMeetingDate()
+  }
+  finally {
+    loading.value.set = false
+  }
+}
+const cancelMeet = async (id) => {
+  try {
+    loading.value.cancel = id
+    await api.post(API_URL_MEETINGTABLE.canselMeet(id))
+    fetchMeetingDate()
+  }
+  finally {
+    loading.value.cancel = false
+  }
+}
+
+const fetchMeetingDate = async () => {
+  try {
+    loading.value.get = true
+    const { data } = await api.get(API_URL_MEETINGTABLE.getSetAppointment, {
+      params: {
+        date: selectDay.value,
+        time: selectTime.value
+      }
+    })
+    // eslint-disable-next-line camelcase
+    // reserved.value = data.some(({ reserved_by }) => reserved_by?.user_id === userId.value)
+    allData.value = data
+  }
+  finally {
+    loading.value.get = false
+  }
+}
+
+const downloadBlob = (blob, fileName) => {
+  const url = URL.createObjectURL(blob)
+
+  const link = document.createElement('a')
+  link.href = url
+  link.download = fileName
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+
+  URL.revokeObjectURL(url)
+}
+
+const getReport = async () => {
+  try {
+    loading.value.export = true
+
+    const { data } = await api.get(API_URL_MEETINGTABLE.getCsv, {
+      params: {
+        date: selectDay.value
+      },
+      responseType: 'blob'
+    })
+
+    const fileName = `${selectDay.value}.xlsx`
+
+    downloadBlob(data, fileName)
+  }
+  catch (err) {}
+  finally {
+    loading.value.export = false
+  }
+}
 </script>
 
 <style scoped  lang="sass">
 .max-width
-  max-width: 182px
-  width: 100%
+  // max-width: 182px
+  // width: 100%
   height: 130px
 .q-item
   background: linear-gradient(0deg, rgba(0, 84, 214, 0.05), rgba(0, 84, 214, 0.05)) #FEFBFF
-- 
GitLab


From b525ff7e21f7c9f411a70c1c34f3aa35a18a65a0 Mon Sep 17 00:00:00 2001
From: amir baharlou <amirmahdibaharlou@gmail.com>
Date: Wed, 6 Dec 2023 18:12:19 +0330
Subject: [PATCH 3/3] responsive

---
 src/components/stage-layout/EventDrawer.vue |  2 +-
 src/layouts/MobileSocialLayout.vue          | 26 +++++++++++++++++----
 src/layouts/SocialLayout.vue                |  6 ++---
 src/pages/social/AddCompanies.vue           |  4 ++--
 4 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/components/stage-layout/EventDrawer.vue b/src/components/stage-layout/EventDrawer.vue
index b131a55..38f13e1 100644
--- a/src/components/stage-layout/EventDrawer.vue
+++ b/src/components/stage-layout/EventDrawer.vue
@@ -181,7 +181,7 @@ const routeId = route.params.id
 const userStore = useUserStore()
 
 const tab = ref('eventprofile')
-const colSize = computed(() => $q.screen.sizes.md > $q.screen.width)
+const colSize = computed(() => $q.screen.sizes.sm > $q.screen.width)
 
 const drawer = ref(false)
 const miniState = ref(true)
diff --git a/src/layouts/MobileSocialLayout.vue b/src/layouts/MobileSocialLayout.vue
index 920d73b..6e07b08 100644
--- a/src/layouts/MobileSocialLayout.vue
+++ b/src/layouts/MobileSocialLayout.vue
@@ -96,11 +96,13 @@ import stickySupport from 'components/stickySupport.vue'
 import {
   roundMenu,
   roundHome,
+  roundEvent,
   roundRssFeed,
   roundListAlt,
   // roundVideocam,
+  roundBusiness,
   roundStorefront,
-  roundEvent
+  roundEventAvailable
   // roundWorkspaces
 } from '@quasar/extras/material-icons-round'
 
@@ -122,10 +124,12 @@ const profileData = ref({})
 const refDrawer = ref(null)
 
 dayjs.tz.setDefault(userStore.getTimezone)
-const colSize = computed(() => $q.screen.sizes.md > $q.screen.width)
+const colSize = computed(() => $q.screen.sizes.sm > $q.screen.width)
 const ltrDir = computed(() => LocalStorage.getItem('ltrDir'))
 
 const checkLogin = computed(() => !!userStore.token)
+const owner = computed(() => userStore.user.id === stageStore.event?.user_info?.id)
+
 const checkBuy = computed(() => {
   if (checkLogin.value) {
     if (stageStore.event.user_info?.id === userStore.user.id) return false
@@ -184,7 +188,7 @@ const menus = computed(() => [
     label: 'Feed',
     icon: roundRssFeed,
     badge: false,
-    show: true,
+    show: false,
     route: { name: 'SocialFeed' }
   },
   {
@@ -198,8 +202,22 @@ const menus = computed(() => [
     label: t('event.createEvent'),
     icon: roundEvent,
     badge: false,
-    show: userStore.user.user_type === 'COMPANY',
+    show: false,
     route: { name: 'CreateEvent' }
+  },
+  {
+    label: t('social.companies'),
+    icon: roundBusiness,
+    badge: false,
+    show: owner.value,
+    route: { name: 'AddCompanies' }
+  },
+  {
+    label: t('social.appointment'),
+    icon: roundEventAvailable,
+    badge: false,
+    show: true,
+    route: { name: 'setAppointment' }
   }
 ])
 
diff --git a/src/layouts/SocialLayout.vue b/src/layouts/SocialLayout.vue
index 2a7f113..a6ab9f7 100644
--- a/src/layouts/SocialLayout.vue
+++ b/src/layouts/SocialLayout.vue
@@ -79,12 +79,12 @@ import { useStageStore } from 'stores/stage-store'
 
 import {
   roundHome,
-  roundListAlt,
   // roundVideocam,
-  roundRssFeed,
-  roundStorefront,
   roundEvent,
+  roundListAlt,
+  roundRssFeed,
   roundBusiness,
+  roundStorefront,
   roundEventAvailable
   // roundWorkspaces
 } from '@quasar/extras/material-icons-round'
diff --git a/src/pages/social/AddCompanies.vue b/src/pages/social/AddCompanies.vue
index a76f091..8cecd61 100644
--- a/src/pages/social/AddCompanies.vue
+++ b/src/pages/social/AddCompanies.vue
@@ -11,7 +11,7 @@
       :dir="ltrDir ? 'ltr' : 'rtl'"
     >
       <div
-        class="col-md-10 col-xs-12"
+        class="col-sm-10 col-xs-12"
         :dir="ltrDir ? 'ltr' : 'rtl'"
       >
         <div>
@@ -59,7 +59,7 @@
         </q-select>
       </div>
       <div
-        class="col-md-2 col-xs-12 flex justify-center items-end"
+        class="col-sm-2 col-xs-12 flex justify-center items-end"
         :dir="ltrDir ? 'ltr' : 'rtl'"
       >
         <q-btn
-- 
GitLab