Fix styling issues

CrowdDotDev · Jul 10, 2023 · 1043a74 · 1043a74
1 parent ac96868
commit 1043a74
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 48 deletions.
diff --git a/frontend/src/modules/member/components/form/member-form-organizations.vue b/frontend/src/modules/member/components/form/member-form-organizations.vue
@@ -77,22 +77,30 @@
             />
           </div>
 
-          <div class="w-1/3">
+          <div class="w-1/3 flex">
             <el-date-picker
-              v-model="dateRange[index]"
-              type="daterange"
-              start-placeholder="From"
-              end-placeholder="To"
-              format="MMM YYYY"
-              class="custom-date-picker"
+              v-model="dateRange[index][0]"
+              type="month"
+              format="MMMM YYYY"
+              placeholder="From"
+              class="custom-date-picker organization left"
               popper-class="date-picker-popper"
               :prefix-icon="DateRangePickerPrefix"
-              @change="(val: string[]) => onDatePickerChange(val, index)"
-            >
-              <template #range-separator>
-                <el-divider direction="vertical" />
-              </template>
-            </el-date-picker>
+              clearable
+              @change="(val: Date) => onDatePickerChange('dateStart', val, index)"
+            />
+            <el-divider direction="vertical" class="m-0 h-full" />
+            <el-date-picker
+              v-model="dateRange[index][1]"
+              type="month"
+              format="MMMM YYYY"
+              placeholder="To"
+              class="custom-date-picker organization right"
+              popper-class="date-picker-popper"
+              :prefix-icon="DateRangePickerPrefix"
+              clearable
+              @change="(val: Date) => onDatePickerChange('dateEnd', val, index)"
+            />
           </div>
 
           <button
@@ -123,7 +131,6 @@ import { OrganizationService } from '@/modules/organization/organization-service
 import AppAvatar from '@/shared/avatar/avatar.vue';
 import { Member } from '@/modules/member/types/Member';
 import { Organization } from '@/modules/organization/types/Organization';
-import moment from 'moment';
 
 const emit = defineEmits<{(e: 'update:modelValue', value: Member): any}>();
 const props = defineProps<{
@@ -177,9 +184,11 @@ const createOrganizationFn = (value: string) => OrganizationService.create({
   }))
   .catch(() => null);
 
-const onDatePickerChange = (value: string[], index: number) => {
-  organizations.value[index].memberOrganizations.dateStart = moment(value[0]).utc().toISOString();
-  organizations.value[index].memberOrganizations.dateEnd = moment(value[1]).utc().toISOString();
+const onDatePickerChange = (key: 'dateStart' | 'dateEnd', value: Date, index: number) => {
+  const timezoneOffsetMinutes = value.getTimezoneOffset();
+  const date = new Date(value.getTime() - (timezoneOffsetMinutes * 60 * 1000)).toISOString();
+
+  organizations.value[index].memberOrganizations[key] = value ? date : '';
 };
 
 const addOrganization = () => {
@@ -200,24 +209,25 @@ const removeOrganization = (index: number) => {
 </script>
 
 <style lang="scss">
-.custom-date-picker.el-input__wrapper {
-  @apply rounded-md;
-
-  &.el-range-editor.is-active {
-    box-shadow: none;
-    border: 1px solid #4b5563;
+.custom-date-picker.organization {
+  &.left {
+    .el-input__wrapper {
+      @apply rounded-l-md rounded-r-none h-10 border-r-0;
+    }
   }
 
-  .el-range__icon, .el-range__close-icon {
-    @apply hidden;
+  &.right {
+    .el-input__wrapper {
+      @apply rounded-r-md rounded-l-none h-10 border-l-0;
+    }
   }
 
-  .el-divider {
-    @apply h-full;
-  }
+  .el-input__wrapper {
+    @apply h-10 flex flex-row;
 
-  input {
-    @apply h-full w-full text-left px-1;
+    .el-input__prefix {
+      @apply hidden;
+    }
   }
 }
 

diff --git a/frontend/src/modules/member/components/view/_aside/_aside-organizations.vue b/frontend/src/modules/member/components/view/_aside/_aside-organizations.vue
@@ -30,30 +30,38 @@
       class="flex flex-col gap-4 mt-6"
     >
       <router-link
-        v-for="organization of member.organizations"
-        :key="organization.id"
+        v-for="{
+          id,
+          logo,
+          displayName,
+          memberOrganizations,
+        } of member.organizations"
+        :key="id"
         :to="{
           name: 'organizationView',
           params: {
-            id: organization.id,
+            id,
           },
         }"
         class="group hover:cursor-pointer"
       >
         <div
           class="flex justify-start gap-3"
+          :class="{
+            'items-center': !hasValues(memberOrganizations),
+          }"
         >
           <div
             class="w-6 h-6 rounded-md border border-gray-200 p-0.5 flex items-center justify-center overflow-hidden"
             :class="{
-              'bg-white': organization.logo,
-              'bg-gray-50': !organization.logo,
+              'bg-white': logo,
+              'bg-gray-50': !logo,
             }"
           >
             <img
-              v-if="organization.logo"
-              :src="organization.logo"
-              :alt="`${organization.displayName} logo`"
+              v-if="logo"
+              :src="logo"
+              :alt="`${displayName} logo`"
             />
             <i
               v-else
@@ -64,21 +72,21 @@
             <div
               class="text-xs text-gray-900 group-hover:text-brand-500 transition font-medium"
             >
-              {{ organization.displayName }}
+              {{ displayName }}
             </div>
-            <div v-if="organization.memberOrganizations" class="text-gray-600 text-3xs">
-              <span v-if="organization.memberOrganizations.title">{{ organization.memberOrganizations.title }}</span>
-              <span v-if="organization.memberOrganizations.dateStart || organization.memberOrganizations.dateEnd">
-                <span class="mx-1">•</span>
+            <div v-if="hasValues(memberOrganizations)" class="text-gray-600 text-2xs">
+              <span v-if="memberOrganizations.title">{{ memberOrganizations.title }}</span>
+              <span v-if="memberOrganizations.dateStart || memberOrganizations.dateEnd">
+                <span v-if="memberOrganizations.title" class="mx-1">•</span>
                 <span>
-                  {{ organization.memberOrganizations.dateStart
-                    ? moment(organization.memberOrganizations.dateStart).utc().format('MMM YYYY')
+                  {{ memberOrganizations.dateStart
+                    ? moment(memberOrganizations.dateStart).utc().format('MMMM YYYY')
                     : 'Unkown' }}
                 </span>
-                <span class="mx-1">-></span>
+                <span class="mx-1 whitespace-nowrap">-></span>
                 <span>
-                  {{ organization.memberOrganizations.dateEnd
-                    ? moment(organization.memberOrganizations.dateEnd).utc().format('MMM YYYY')
+                  {{ memberOrganizations.dateEnd
+                    ? moment(memberOrganizations.dateEnd).utc().format('MMMM YYYY')
                     : 'Present' }}
                 </span>
               </span>
@@ -112,4 +120,6 @@ const isEditLockedForSampleData = computed(() => new MemberPermissions(
   currentTenant.value,
   currentUser.value,
 ).editLockedForSampleData);
+
+const hasValues = (organizations) => Object.values(organizations || {}).some((v) => !!v);
 </script>