improve user interface for calendar

tracim/tracim/model/serializers.py

@@ -963,9 +963,9 @@ def serialize_workspace_in_list(workspace: pmd.Workspace, context: Context):
     result['label'] = workspace.label
     result['description'] = workspace.description
     result['member_nb'] = len(workspace.roles)
+    result['calendar_enabled'] = workspace.calendar_enabled
+    result['calendar_url'] = workspace.calendar_url
 
-    #    roles = serializableObject.roles
-    #    result['users'] = context.toDict(serializableObject.roles)
     return result
 
 

tracim/tracim/templates/admin/workspace_getall.mak

@@ -45,10 +45,13 @@
                                         <label for="workspaceDescription">${_('Description')}</label>
                                         <textarea name="description" class="form-control" id="workspaceDescription" placeholder="${_('You may add a description of the workspace')}"></textarea>
                                     </div>
-                                    <div class="form-group">
-                                        <label for="workspaceCalendarEnabled">${_('Calendar enabled')}</label>
-                                        <input id="workspaceCalendarEnabled" name="calendar_enabled" class="form-control" type="checkbox" checked />
+                                    <div class="checkbox form-group">
+                                        <label for="workspaceCalendarEnabled">
+                                            <input id="workspaceCalendarEnabled" name="calendar_enabled" type="checkbox" checked >
+                                            <b>${_('Activate associated calendar')}</b>
+                                        </label>
                                     </div>
+
                                     <div class="form-group">
                                         <p class="form-control-static">${_('<u>Note</u>: members will be added during next step.')|n}</p>
                                     </div>
@@ -80,6 +83,7 @@
                                     <th>${_('Workspace')}</th>
                                     <th>${_('Description')}</th>
                                     <th>${_('User Nb')}</th>
+                                    <th>${_('Calendar')}</th>
                                 </tr>
                             </thead>
                             % for workspace in result.workspaces:
@@ -88,6 +92,14 @@
                                     <td><a href="${tg.url('/admin/workspaces/{}'.format(workspace.id))}">${workspace.label}</a></td>
                                     <td>${workspace.description}</td>
                                     <td>${workspace.member_nb}</td>
+                                    <td class="text-center">
+                                        % if workspace.calendar_enabled:
+                                            ${ICON.FA('fa-check-square-o fa-lg t-enabled-color')}
+                                        % else:
+                                            ${ICON.FA('fa-square-o fa-lg t-disabled-color')}
+                                        % endif
+
+                                    </td>
                                 </tr>
                             % endfor
                         </table>

tracim/tracim/templates/admin/workspace_getone.mak

@@ -48,6 +48,22 @@
             </div>
 
             <div class="row">
+                % if not result.workspace.calendar_enabled:
+                    <div class="col-sm-7 col-md-offset-3">
+                        ${_('The calendar is disabled.')}
+                    </div>
+                % else:
+                    <div class="col-sm-7 col-md-offset-3">
+                        ${TITLE.H3(_('Calendar'), 'fa-calendar', 'workspace-members')}
+                        <p>${_('This workspace offers a calendar that you can configure in your software: Outlook, Thunderbird, etc.')}</p>
+                        <p>${_('The url to configure is the following one:')}</p>
+                        <p class="form-control">${result.workspace.calendar_url}"</p>
+
+                    </div>
+                % endif
+            </div>
+
+            <div class="row">
                 <div class="col-sm-7 col-md-offset-3">
                     <div>
                         <% potential_new_user_nb = sum(1 for user in fake_api.users if user.id not in (user.id for user in result.workspace.members)) %>

tracim/tracim/templates/workspace/edit.mak

@@ -17,13 +17,30 @@
             <label for="workspaceDescription">${_('Description')}</label>
             <textarea name="description" class="form-control" id="workspaceDescription" placeholder="${_('You may add a description of the workspace')}">${result.workspace.description}</textarea>
         </div>
-        <div class="form-group">
-            <label for="workspaceCalendarEnabled">${_('Calendar enabled')}</label>
-            <input id="workspaceCalendarEnabled" name="calendar_enabled" class="form-control" type="checkbox" ${'checked' if result.workspace.calendar_enabled else ''} />
+        <div class="checkbox form-group">
+            <label for="workspaceCalendarEnabled">
+                <input id="workspaceCalendarEnabled" name="calendar_enabled" type="checkbox" checked >
+                <b>${_('Activate associated calendar')}</b>
+            </label>
         </div>
+        <script>
+            $('#workspaceCalendarEnabled').click(function() {
+                console.log('Value is' + $(this).val());
+                if($(this).is(':checked')) {
+                    console.log('hide url');
+                    $('.calendar-url').css('display', 'block');
+                } else {
+                    console.log('show url');
+                    $('.calendar-url').css('display', 'none');
+                }
+            });
+        </script>
         <div class="form-group calendar-url">
-            <label for="workspaceCalendarUrl">${_('Calendar URL')}</label>
+            <label for="workspace-name1">${_('Calendar Url')}</label>
             <input id="workspaceCalendarUrl" type="text" class="form-control"  disabled="disabled" value="${result.workspace.calendar_url}" />
+            <p>
+                ${_('This url is the one to configure in your calendar software: Outlook, Thunderbird, etc.')}
+            </p>
         </div>
     </div>
     <div class="modal-footer">

tracim/tracim/templates/workspace/getone.mak

@@ -59,11 +59,6 @@
         % else:
             <p class="t-less-visible">${_('No description available')}</p>
         % endif
-        % if result.workspace.calendar_enabled:
-            <p>
-                ${_('Calendar URL')}: ${result.workspace.calendar_url}
-            </p>
-        % endif
 
         <% member_nb = len(result.workspace.members) %>
         % if member_nb<=0:
@@ -75,22 +70,33 @@
                 % else:
                     ${_('This workspace has {a_open}{member_nb} members{a_close}').format(a_open='<a data-toggle="collapse" href="#memberList" aria-expanded="false" aria-controls="memberList">', member_nb=member_nb, a_close='</a>')|n}
                 % endif
-                </p>
-                <div class="collapse" id="memberList">
-                    <table class="table">
-                        % for member in result.workspace.members:
-                            <tr>
-                                <td><strong>${member.name}</strong></td>
-                                <td>
-                                    ${TIM.ICO_FA_BADGED('fa fa-fw fa-flag', member.role_description, member.style)}
-                                    ${member.role_description}
-                                </td>
-                            </tr>
-                        % endfor
-                    </table>
-                </div>
             </p>
+            <div class="collapse" id="memberList">
+                <table class="table">
+                    % for member in result.workspace.members:
+                        <tr>
+                            <td><strong>${member.name}</strong></td>
+                            <td>
+                                ${TIM.ICO_FA_BADGED('fa fa-fw fa-flag', member.role_description, member.style)}
+                                ${member.role_description}
+                            </td>
+                        </tr>
+                    % endfor
+                </table>
+            </div>
+        % endif
+
+        % if result.workspace.calendar_enabled:
+            <p>
+                ${_('This workspace has {a_open}an associated calendar{a_close}').format(a_open='<a data-toggle="collapse" href="#calendarConfig" aria-expanded="false" aria-controls="calendarConfig">', a_close='</a>')|n}
+            </p>
+            <div class="collapse" id="calendarConfig">
+                <p>${_('You can access the calendar using your own software: Outlook, Thunderbird, etc.')}</p>
+                <p>${_('The url to setup is the following one:')}</p>
+                <p class="form-control">${result.workspace.calendar_url}"</p>
+            </div>
         % endif
+
     </div>
 </div>